lf-pagebuilder-vue

Editor visual para construir páginas HTML usando los componentes de libreria-astro-lefebvre.

Instalación

npm i lf-pagebuilder-vue

Luego en tu package.json, cambia la versión a latest para tener siempre la última:

{
  "dependencies": {
    "lf-pagebuilder-vue": "latest"
  }
}

¿Qué es?

El Pagebuilder permite al usuario arrastrar y configurar componentes de la librería de componentes Astro de Lefebvre para diseñar páginas de forma visual.

El Pagebuilder NO renderiza la página final. Genera un JSON de configuración que se envía a una API externa renderizadora, que es la encargada de generar el HTML final.

Formas de uso

1. Como script IIFE (Symfony u otros backends)

En la carpeta dist-symfony/ están los archivos compilados:

• lf-pagebuilder-iife.iife.js
• lf-pagebuilder-iife.css

Instalación:

Copiar estos archivos a la carpeta pública del proyecto. En Symfony, puedes configurar el build para que los copie automáticamente a public/build/ o copiarlos manualmente.

Uso:

<link rel="stylesheet" href="/build/lf-pagebuilder-iife.css">
<script src="/build/lf-pagebuilder-iife.iife.js"></script>

<!-- El Pagebuilder se monta automáticamente en elementos con el selector: -->
<div class="XXXXXXXX" data-is-production="false"></div>

El atributo data-is-production indica el entorno:

• "true" → Usa API de producción (https://render-api.lefebvre.es)
• "false" → Usa API de desarrollo (https://led-dev-astro-render-api-dev.eu.els.local)

Data attributes disponibles

Se pueden pasar opciones de configuración al Pagebuilder mediante atributos data-* en el input:

| Atributo | Tipo | Default | Descripción | |----------|------|---------|-------------| | data-is-production | "true" | "false" | "false" | Entorno de la API de renderizado | | data-debug-mode | "true" | "false" | "false" | Activa el modo debug | | data-submit-form | "true" | "false" | "false" | Envía el formulario automáticamente | | data-exclude-component-types | string | - | Categorías de componentes a excluir, separadas por coma |

Ejemplo completo:

<input 
  type="hidden" 
  class="js-lf-pagebuilder-vue-input" 
  name="page_config"
  data-is-production="true"
  data-debug-mode="false"
  data-submit-form="true"
  data-exclude-component-types="SEO, Footer, Cabecera"
/>

Nota sobre data-exclude-component-types: La categoría "Repetidor" siempre se excluye automáticamente. Las categorías adicionales que pases se suman a esta exclusión. Las categorías disponibles son: Call to Action, Contenido, Separador, Texto, Cabecera, Footer, Imagen, Repetidor, Formulario, Título, SEO.

2. Como componente Vue

npm install lf-pagebuilder-vue

<template>
  <Pagebuilder :isProduction="false" />
</template>

<script setup>
import { Pagebuilder } from 'lf-pagebuilder-vue';
</script>

Props:

| Prop | Tipo | Default | Descripción | |------|------|---------|-------------| | isProduction | boolean | false | true = API producción, false = API desarrollo | | debugMode | boolean | false | Activa el modo debug | | submitForm | boolean | false | Envía el formulario automáticamente | | inputId | string \| null | null | ID del input hidden donde guardar la configuración | | excludeComponentTypes | string[] | [] | Categorías de componentes a excluir (además de "Repetidor" que siempre se excluye) |

Ejemplo con exclusión de componentes:

<template>
  <Pagebuilder 
    :isProduction="false"
    :excludeComponentTypes="['SEO', 'Footer', 'Cabecera']"
  />
</template>

<script setup>
import { Pagebuilder } from 'lf-pagebuilder-vue';
</script>

Instalación y dependencias

Dependencias requeridas en el proyecto padre

El proyecto que use este Pagebuilder debe tener instaladas estas dependencias:

npm install vue@^3.3.0 vuedraggable@^4.1.0 @vueup/vue-quill@^1.2.0 libreria-astro-lefebvre@latest

| Dependencia | Versión | Descripción | |-------------|---------|-------------| | vue | ^3.3.0 | Framework Vue 3 | | vuedraggable | ^4.1.0 | Drag & drop para Vue 3 | | @vueup/vue-quill | ^1.2.0 | Editor de texto enriquecido | | libreria-astro-lefebvre | latest | Librería de componentes Astro de Lefebvre |

Configuración especial del proyecto padre

En proyectos Astro

El proyecto debe tener las integraciones de Vue y Tailwind:

npm install @astrojs/vue tailwindcss @tailwindcss/vite

En astro.config.mjs:

import { defineConfig } from 'astro/config';
import { searchForWorkspaceRoot } from 'vite';
import path from 'path';
import vue from '@astrojs/vue';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  integrations: [vue()],

  vite: {
    plugins: [tailwindcss()],
    server: {
      fs: {
        // Necesario si usas npm link con librerías hermanas
        allow: [
          searchForWorkspaceRoot(process.cwd()),
          path.resolve(process.cwd(), '..'),
        ],
      },
    },
  },
});

Nota: La configuración de vite.server.fs.allow es necesaria cuando usas npm link para desarrollo local con librerías en carpetas hermanas. Si instalas el paquete desde npm, no es necesaria.

Build

El proyecto tiene dos builds diferentes:

Build estándar (librería npm)

npm run build

Genera en dist/:

• index.js - ES Module
• index.cjs - CommonJS
• index.d.ts - Tipos TypeScript
• styles.css - Estilos

Este es el build que se publica en npm.

Build Symfony (IIFE)

npm run build:symfony

Genera en dist-symfony/:

• lf-pagebuilder-iife.iife.js - Script autocontenido
• lf-pagebuilder-iife.css - Estilos

Este build incluye Vue y todas las dependencias empaquetadas. Se puede usar directamente con <script> sin necesidad de bundler.

Build completo

npm run build:all

Ejecuta ambos builds.

⚠️ Desarrollo local

IMPORTANTE: Lee esta sección completa antes de trabajar con este proyecto localmente.

El problema del package.json

Este proyecto tiene dos configuraciones de package.json porque durante el desarrollo local NO queremos compilar constantemente:

| Archivo | Apunta a | Uso | |---------|----------|-----| | package.dev.json | ./src/ (código fuente) | Desarrollo local | | package.prod.json | ./dist/ (compilado) | Publicar en npm |

Durante el desarrollo, el package.json debe apuntar a los archivos fuente para que los cambios se reflejen inmediatamente sin hacer build.

Para publicar en npm, debe apuntar a los archivos compilados.

Cambiar entre modos

Puedes copiar el archivo o copiar y pegar el contenido manualmente:

# Para DESARROLLO: copiar configuración de desarrollo
cp package.dev.json package.json

# Para PRODUCCIÓN/PUBLICAR: copiar configuración de producción
cp package.prod.json package.json
npm run build
npm publish

⚠️ NUNCA publiques con la configuración de desarrollo. El paquete no funcionará porque ./src/ no se incluye en el paquete publicado.

⚠️ MUY IMPORTANTE: Mantener sincronizados los 3 archivos

Los archivos package.json, package.dev.json y package.prod.json deben estar sincronizados:

• Nueva dependencia: Si añades una dependencia, añádela también en package.dev.json y package.prod.json
• Cambio de versión: Cuando subas la versión del paquete, actualízala en los 3 archivos
• Cualquier otro cambio: Scripts, keywords, etc. deben reflejarse en los 3

# Ejemplo: después de añadir una dependencia
npm install nueva-dependencia

# Ahora editar manualmente package.dev.json y package.prod.json
# para añadir "nueva-dependencia" en las mismas secciones

Trabajar con npm link

Para probar cambios localmente en otro proyecto sin publicar:

Paso 1: Crear el enlace en esta librería

cd /ruta/a/lf-pagebuilder-vue
npm link

Paso 2: Usar el enlace en tu proyecto

cd /ruta/a/tu-proyecto
npm link lf-pagebuilder-vue

⚠️ CRÍTICO: Múltiples librerías con npm link

Este proyecto depende de libreria-astro-lefebvre. Si necesitas trabajar con ambas librerías localmente (muy común), hay una trampa importante:

# ❌ INCORRECTO - El segundo comando ROMPE el primero
npm link lf-pagebuilder-vue
npm link libreria-astro-lefebvre

# ✅ CORRECTO - Linkear TODAS las librerías en UN SOLO comando
npm link lf-pagebuilder-vue libreria-astro-lefebvre

Flujo completo para trabajar con ambas librerías

# 1. En lf-pagebuilder-vue
cd /ruta/a/lf-pagebuilder-vue
cp package.dev.json package.json  # Modo desarrollo
npm link

# 2. En libreria-astro-lefebvre
cd /ruta/a/libreria-astro-lefebvre
npm link

# 3. En tu proyecto consumidor - AMBAS EN UN SOLO COMANDO
cd /ruta/a/tu-proyecto
npm link lf-pagebuilder-vue libreria-astro-lefebvre

Deshacer los enlaces

cd /ruta/a/tu-proyecto
npm unlink lf-pagebuilder-vue libreria-astro-lefebvre
npm install

Si algo no funciona

# Nuclear option: borrar todo y reinstalar
cd /ruta/a/tu-proyecto
rm -rf node_modules package-lock.json
npm install
npm link lf-pagebuilder-vue libreria-astro-lefebvre

Watch mode

Para que los cambios se reflejen automáticamente mientras desarrollas:

npm run dev

Esto ejecuta vite build --watch y recompila automáticamente cuando hay cambios.

Nota: Si usas package.dev.json (apuntando a ./src/), no necesitas watch mode porque los cambios en el código fuente se reflejan directamente.

📘 Nota para los no familiarizados con npm

Este proyecto tiene dos lugares separados:

1. GitHub (código fuente)

https://github.com/Lefebvre-El-Derecho-SA/lf-pagebuilder-vue

Aquí es donde se edita el código. Los cambios que hagas aquí NO se reflejan automáticamente en los proyectos que usan el paquete.

2. npm (paquete distribuido)

https://www.npmjs.com/package/lf-pagebuilder-vue

Aquí es donde las webs descargan el paquete cuando hacen npm install. Esta versión va separada de GitHub.

¿Cómo actualizar el paquete en npm?

Para que los cambios en GitHub lleguen a npm, hay que publicar una nueva versión:

1. Subir la versión en package.json (y en package.dev.json y package.prod.json)

   ⚠️ Si no subes la versión, npm rechazará la publicación.

2. Asegurarte de usar la configuración de producción:

   cp package.prod.json package.json

3. Compilar y publicar:

   npm run build
   npm publish --access public

Configurar acceso a npm (primera vez)

Para poder publicar, necesitas pertenecer a la organización de npm:

1. Solicitar acceso al equipo desarrollowebteamlef en:

   https://www.npmjs.com/settings/desarrollowebteamlef/packages

2. Crear un token de acceso en npm:

   • Ve a tu perfil de npm → Access Tokens → Generate New Token
   • Selecciona "Bypass 2FA" (si aplica)
   • Pon expiración de 90 días
   • Copia el token generado

3. Configurar el token en tu máquina:

   Edita (o crea) el archivo ~/.npmrc:

   # Linux/Mac
   nano ~/.npmrc
      
   # Añadir esta línea con tu token:
   //registry.npmjs.org/:_authToken=TU_TOKEN_AQUI

4. Ya puedes publicar:

   npm publish --access public