mgpanel-cli 1.0.4 → 1.0.5

package/bin/mgpanel.js

@@ -400,6 +400,76 @@ Cuando despliegues el proyecto en MGPanel:
 3. El contenido puede ser editado desde el panel de administración
 4. La estructura de archivos se mantiene compatible
 
+### Importante: compatibilidad Local Preview vs MGPanel (Nube)
+
+En *preview local* (⁠ dev/preview.js ⁠) cada módulo se inserta envuelto en un contenedor como:
+
+\`\`\`html
+<div data-mgpanel-module="header">...contenido del módulo...</div>
+\`\`\`
+
+En *MGPanel (nube)* el CMS puede renderizar el HTML del módulo *sin ese wrapper, y además el HTML puede inyectarse **después** de que el archivo JS del módulo ya fue cargado.
+
+Por eso, en los módulos con JS, sigue estas reglas para que funcionen *tanto local como en nube*:
+
+•⁠  ⁠*Seleccionar root con fallback*:
+  - Primero intenta ⁠ \`document.querySelector('[data-mgpanel-module="<modulo>"]')\` ⁠ (preview).
+  - Si no existe, busca el nodo real del módulo, por ejemplo ⁠ \`.mg-<modulo>\` ⁠ (nube).
+•⁠  ⁠*Inicialización tardía (cloud-safe)*:
+  - No asumas que el HTML existe cuando corre el JS.
+  - Implementa retry + ⁠ \`MutationObserver\` ⁠, y escucha ⁠ \`DOMContentLoaded\` ⁠ / ⁠ \`load\` ⁠.
+•⁠  ⁠*Evitar doble init*:
+  - Marca el nodo root con ⁠ \`dataset\` ⁠ (por ejemplo ⁠ \`data-mg-init="1"\` ⁠) para no registrar listeners dos veces.
+•⁠  ⁠*Rutas de assets*:
+  - En SPAs y en nube, usa rutas absolutas: ⁠ \`src="/assets/Logo.png"\` ⁠ en vez de ⁠ \`assets/Logo.png\` ⁠.
+•⁠  ⁠*No ocultar contenido sin JS*:
+  - Si usas animaciones por clase (ej. ⁠ \`data-mg-animate\` ⁠), asegúrate que el contenido no quede invisible si el JS no corre.
+
+#### Plantilla recomendada para JS de módulos (cloud-safe)
+
+\`\`\`js
+(() => {
+  const MODULE = "header"; // cambia por el nombre del módulo
+
+  const findRoot = () => {
+    const wrapped = document.querySelector(\`[data-mgpanel-module="\${MODULE}"]\`);
+    if (wrapped) return wrapped;
+    return document.querySelector(\`.mg-\${MODULE}\`);
+  };
+
+  const init = (rootOrEl) => {
+    if (!rootOrEl) return false;
+    const el = rootOrEl.classList?.contains(\`mg-\${MODULE}\`)
+      ? rootOrEl
+      : rootOrEl.querySelector?.(\`.mg-\${MODULE}\`);
+    if (!el) return false;
+
+    if (el.dataset.mgInit === "1") return true;
+    el.dataset.mgInit = "1";
+
+    // ... tu lógica aquí ...
+    return true;
+  };
+
+  const tryInit = () => init(findRoot());
+  if (tryInit()) return;
+
+  let tries = 0;
+  const t = window.setInterval(() => {
+    tries += 1;
+    if (tryInit() || tries > 200) window.clearInterval(t); // ~10s
+  }, 50);
+
+  const mo = new MutationObserver(() => {
+    if (tryInit()) mo.disconnect();
+  });
+  mo.observe(document.documentElement, { childList: true, subtree: true });
+
+  window.addEventListener("DOMContentLoaded", tryInit, { once: true });
+  window.addEventListener("load", tryInit, { once: true });
+})();
+\`\`\`
+
 ## Consejos para IDEs
 
 - Los archivos \`page.json\` definen la configuración de cada página
@@ -471,6 +541,17 @@ Este archivo contiene información detallada sobre:
 └── index.html          # Preview local
 \`\`\`
 
+## ✅ Nota importante (Local vs Nube)
+
+En local, \`dev/preview.js\` envuelve módulos en un contenedor \`data-mgpanel-module="..."\`, pero en MGPanel (nube) ese wrapper puede **no existir** y los módulos pueden inyectarse **después** de que el JS ya cargó.
+
+Por eso, al crear nuevos módulos con JavaScript:
+- No asumas que el HTML existe en el momento de ejecución.
+- Usa un patrón "cloud-safe" (retry + MutationObserver) y un selector con fallback (\`[data-mgpanel-module="x"]\` o \`.mg-x\`).
+- Usa rutas absolutas para assets (\`/assets/...\`) para evitar problemas de routing.
+
+Para más detalles, consulta la sección de compatibilidad en \`dev/config.md\`.
+
 ## 🔗 Más Información
 
 - **Documentación de desarrollo:** Ver \`dev/config.md\`
@@ -546,7 +627,7 @@ function cmdMakeModule(moduleName) {
   const jsPath = path.join(moduleDir, `${moduleName}.js`);
 
   const htmlContent = `<!-- Module: ${moduleName} -->
-<section class="${moduleName}">
+<section class="${moduleName} mg-${moduleName}">
   <h2>${moduleName}</h2>
   <p>Módulo creado con MGPanel ✅</p>
 </section>
@@ -559,7 +640,57 @@ function cmdMakeModule(moduleName) {
 `;
 
   const jsContent = `// Module: ${moduleName}
-console.log("[MGPanel] Module loaded:", "${moduleName}");
+// Patrón cloud-safe: funciona tanto en preview local como en MGPanel (nube)
+
+(() => {
+  const MODULE = "${moduleName}";
+
+  // Busca el root del módulo con fallback (local vs nube)
+  const findRoot = () => {
+    const wrapped = document.querySelector(\`[data-mgpanel-module="\${MODULE}"]\`);
+    if (wrapped) return wrapped;
+    return document.querySelector(\`.mg-\${MODULE}\`);
+  };
+
+  // Inicializa el módulo
+  const init = (rootOrEl) => {
+    if (!rootOrEl) return false;
+    const el = rootOrEl.classList?.contains(\`mg-\${MODULE}\`)
+      ? rootOrEl
+      : rootOrEl.querySelector?.(\`.mg-\${MODULE}\`);
+    if (!el) return false;
+
+    // Evitar doble inicialización
+    if (el.dataset.mgInit === "1") return true;
+    el.dataset.mgInit = "1";
+
+    // ... tu lógica aquí ...
+    console.log("[MGPanel] Module initialized:", MODULE);
+
+    return true;
+  };
+
+  // Intenta inicializar inmediatamente
+  const tryInit = () => init(findRoot());
+  if (tryInit()) return;
+
+  // Retry con intervalo (hasta ~10 segundos)
+  let tries = 0;
+  const intervalId = window.setInterval(() => {
+    tries += 1;
+    if (tryInit() || tries > 200) window.clearInterval(intervalId);
+  }, 50);
+
+  // Observar cambios en el DOM (para inyección tardía)
+  const mo = new MutationObserver(() => {
+    if (tryInit()) mo.disconnect();
+  });
+  mo.observe(document.documentElement, { childList: true, subtree: true });
+
+  // Escuchar eventos de carga
+  window.addEventListener("DOMContentLoaded", tryInit, { once: true });
+  window.addEventListener("load", tryInit, { once: true });
+})();
 `;
 
   const created = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mgpanel-cli",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "MGPanel CLI",
   "bin": {
     "mgpanel": "./bin/mgpanel.js"