vue-wswg-editor 0.0.18 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "vue-wswg-editor",
-   "version": "0.0.18",
+   "version": "0.0.19",
    "type": "module",
    "main": "./dist/vue-wswg-editor.es.js",
    "module": "./dist/vue-wswg-editor.es.js",

package/src/components/IframePreview/IframePreview.vue

@@ -28,6 +28,8 @@ import { getIframeAppModuleUrl } from "./iframePreviewApp";
 
 // Get the iframe app module URL
 // This will be processed by the consuming app's Vite build
+// Note: When the library is consumed as a bundled file, this URL may not resolve
+// In that case, we'll use the postMessage fallback mechanism
 const iframeAppModuleUrl = getIframeAppModuleUrl();
 
 const props = defineProps<{
@@ -80,7 +82,9 @@ function onIframeLoad() {
 // Generate blob URL for iframe
 function createIframeSrc(): string {
    console.info("[parent] Creating iframe src, module URL:", iframeAppModuleUrl);
-   const html = generateIframeHTML(iframeAppModuleUrl);
+   // Always pass undefined to use postMessage mechanism
+   // The module URL will be sent via postMessage after iframe loads
+   const html = generateIframeHTML(undefined);
    const blob = new Blob([html], { type: "text/html" });
    const blobUrl = URL.createObjectURL(blob);
    console.info("[parent] Iframe blob URL created:", blobUrl);
@@ -123,9 +127,9 @@ function setupMessageListener() {
 
       console.info("[parent] Received message from iframe:", event.data);
 
-      // Handle IFRAME_NEEDS_MODULE_URL - send module URL when iframe can't import it directly
-      if (event.data && event.data.type === "IFRAME_NEEDS_MODULE_URL") {
-         console.info("[parent] IFRAME_NEEDS_MODULE_URL received, sending module URL");
+      // Handle IFRAME_READY_FOR_APP - iframe is ready and requesting module URL
+      if (event.data && event.data.type === "IFRAME_READY_FOR_APP") {
+         console.info("[parent] IFRAME_READY_FOR_APP received, sending module URL");
          if (iframeRef.value && iframeAppModuleUrl) {
             sendInitIframeApp(iframeRef.value, iframeAppModuleUrl);
          } else {
@@ -134,11 +138,13 @@ function setupMessageListener() {
          return;
       }
 
-      // Handle IFRAME_READY_FOR_APP - legacy fallback mechanism
-      if (event.data && event.data.type === "IFRAME_READY_FOR_APP") {
-         console.info("[parent] IFRAME_READY_FOR_APP received, sending module URL");
+      // Handle IFRAME_NEEDS_MODULE_URL - same as IFRAME_READY_FOR_APP
+      if (event.data && event.data.type === "IFRAME_NEEDS_MODULE_URL") {
+         console.info("[parent] IFRAME_NEEDS_MODULE_URL received, sending module URL");
          if (iframeRef.value && iframeAppModuleUrl) {
             sendInitIframeApp(iframeRef.value, iframeAppModuleUrl);
+         } else {
+            console.warn("[parent] Cannot send module URL - iframe ref or module URL not available");
          }
          return;
       }

package/src/components/IframePreview/iframeContent.ts

@@ -99,10 +99,10 @@ function extractParentStylesheets(): string {
  * This creates a standalone HTML page with a Vue app that will be loaded in the iframe
  * The Vue app uses PageRenderer to render blocks reactively
  *
- * @param iframeAppModuleUrl - URL to the iframe app module bundle
- *                             This should be obtained using import.meta.url from iframePreviewApp.ts
+ * Note: The module URL is now sent via postMessage after iframe loads
+ * This parameter is kept for backward compatibility but is not used
  */
-export function generateIframeHTML(iframeAppModuleUrl?: string): string {
+export function generateIframeHTML(_iframeAppModuleUrl?: string): string {
    const parentStylesheets = extractParentStylesheets();
    const parentCSSVariables = extractParentCSSVariables();
    const vueCdnUrl = "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
@@ -127,148 +127,74 @@ export function generateIframeHTML(iframeAppModuleUrl?: string): string {
    </script>`;
 
    // Generate script that loads Vue, vue-router, and initializes the iframe app
-   // The import map above allows vue-router to resolve "vue" as a bare module specifier
-   const appScript = iframeAppModuleUrl
-      ? `<script type="module">
-         console.info('[iframe] Script module starting...');
-         console.info('[iframe] Module URL:', '${iframeAppModuleUrl}');
-         
-         import { createApp } from 'vue';
-         console.info('[iframe] Vue imported successfully');
-         
-         import * as VueRouter from 'vue-router';
-         console.info('[iframe] VueRouter imported successfully');
-         // Make vue-router available globally so it can be accessed in the iframe app
-         window.VueRouter = VueRouter;
-         
-         // Use dynamic import with error handling - static imports fail if module doesn't exist
-         console.info('[iframe] Attempting to import createIframeApp from:', '${iframeAppModuleUrl}');
-         let appInitialized = false;
-         
-         try {
-            const module = await import('${iframeAppModuleUrl}');
-            console.info('[iframe] Module imported successfully:', module);
-            
-            if (module && module.createIframeApp) {
+   // Always use postMessage fallback mechanism since module URLs may not resolve when bundled
+   const appScript = `<script type="module">
+      console.info('[iframe] Script module starting...');
+      
+      import { createApp } from 'vue';
+      console.info('[iframe] Vue imported successfully');
+      
+      import * as VueRouter from 'vue-router';
+      console.info('[iframe] VueRouter imported successfully');
+      // Make vue-router available globally so it can be accessed in the iframe app
+      window.VueRouter = VueRouter;
+      
+      let appInitialized = false;
+      
+      // Always use postMessage mechanism to get the module URL
+      // This works whether the library is consumed as source or bundled
+      window.addEventListener('message', async (event) => {
+         console.info('[iframe] Received message:', event.data);
+         if (event.data.type === 'INIT_IFRAME_APP' && event.data.moduleUrl && !appInitialized) {
+            appInitialized = true;
+            console.info('[iframe] Initializing app with module URL:', event.data.moduleUrl);
+            try {
+               const { createIframeApp } = await import(event.data.moduleUrl);
+               console.info('[iframe] createIframeApp imported successfully');
                const appEl = document.getElementById('app');
                console.info('[iframe] App element found:', appEl);
                if (appEl) {
                   console.info('[iframe] Calling createIframeApp...');
-                  appInitialized = true;
-                  module.createIframeApp(appEl).then(() => {
+                  createIframeApp(appEl).then(() => {
                      console.info('[iframe] createIframeApp completed successfully');
                   }).catch(error => {
-                     console.error('[iframe] Failed to create iframe app:', error);
+                     console.error('[iframe] createIframeApp failed:', error);
                      console.error('[iframe] Error stack:', error.stack);
-                  });
-               } else {
-                  console.error('[iframe] App element (#app) not found!');
-               }
-            } else {
-               console.error('[iframe] Module imported but createIframeApp not found');
-               throw new Error('createIframeApp not found in module');
-            }
-         } catch (error) {
-            console.error('[iframe] Failed to import module, falling back to postMessage:', error);
-            console.error('[iframe] Error details:', error.message, error.stack);
-            
-            // Fallback to postMessage mechanism
-            window.addEventListener('message', async (event) => {
-               console.info('[iframe] Received message (fallback):', event.data);
-               if (event.data.type === 'INIT_IFRAME_APP' && event.data.moduleUrl && !appInitialized) {
-                  appInitialized = true;
-                  console.info('[iframe] Initializing app with module URL (fallback):', event.data.moduleUrl);
-                  try {
-                     const { createIframeApp } = await import(event.data.moduleUrl);
-                     console.info('[iframe] createIframeApp imported successfully (fallback)');
-                     const appEl = document.getElementById('app');
-                     console.info('[iframe] App element found (fallback):', appEl);
-                     if (appEl) {
-                        console.info('[iframe] Calling createIframeApp (fallback)...');
-                        createIframeApp(appEl).then(() => {
-                           console.info('[iframe] createIframeApp completed successfully (fallback)');
-                        }).catch(err => {
-                           console.error('[iframe] createIframeApp failed (fallback):', err);
-                        });
-                     } else {
-                        console.error('[iframe] App element not found (fallback)!');
-                     }
-                  } catch (err) {
-                     console.error('[iframe] Failed to load iframe app module (fallback):', err);
                      // Fallback: create minimal Vue app
                      const appEl = document.getElementById('app');
                      if (appEl) {
-                        console.info('[iframe] Creating fallback Vue app');
+                        console.info('[iframe] Creating fallback Vue app after error');
                         createApp({
-                           template: '<div class="p-4">Loading preview...</div>'
+                           template: '<div class="p-4">Error loading preview. Check console for details.</div>'
                         }).mount(appEl);
                      }
-                  }
+                  });
+               } else {
+                  console.error('[iframe] App element not found!');
                }
-            });
-            
-            // Notify parent that we need the module URL via postMessage
-            if (window.parent) {
-               console.info('[iframe] Notifying parent that iframe needs module URL');
-               window.parent.postMessage({ type: 'IFRAME_NEEDS_MODULE_URL' }, '*');
-            }
-         }
-      </script>`
-      : `<script type="module">
-         // Fallback: Wait for parent to send module URL via postMessage
-         console.info('[iframe] Fallback script module starting...');
-         import { createApp } from 'vue';
-         console.info('[iframe] Vue imported successfully (fallback)');
-         import * as VueRouter from 'vue-router';
-         console.info('[iframe] VueRouter imported successfully (fallback)');
-         // Make vue-router available globally so it can be imported in the iframe app
-         window.VueRouter = VueRouter;
-         
-         let appInitialized = false;
-         
-         window.addEventListener('message', async (event) => {
-            console.info('[iframe] Received message:', event.data);
-            if (event.data.type === 'INIT_IFRAME_APP' && event.data.moduleUrl && !appInitialized) {
-               appInitialized = true;
-               console.info('[iframe] Initializing app with module URL:', event.data.moduleUrl);
-               try {
-                  const { createIframeApp } = await import(event.data.moduleUrl);
-                  console.info('[iframe] createIframeApp imported successfully (fallback)');
-                  const appEl = document.getElementById('app');
-                  console.info('[iframe] App element found (fallback):', appEl);
-                  if (appEl) {
-                     console.info('[iframe] Calling createIframeApp (fallback)...');
-                     createIframeApp(appEl).then(() => {
-                        console.info('[iframe] createIframeApp completed successfully (fallback)');
-                     }).catch(error => {
-                        console.error('[iframe] createIframeApp failed (fallback):', error);
-                     });
-                  } else {
-                     console.error('[iframe] App element not found (fallback)!');
-                  }
-               } catch (error) {
-                  console.error('[iframe] Failed to load iframe app module:', error);
-                  console.error('[iframe] Error stack:', error.stack);
-                  // Fallback: create minimal Vue app
-                  const appEl = document.getElementById('app');
-                  if (appEl) {
-                     console.info('[iframe] Creating fallback Vue app');
-                     createApp({
-                        template: '<div class="p-4">Loading preview...</div>'
-                     }).mount(appEl);
-                  }
+            } catch (error) {
+               console.error('[iframe] Failed to load iframe app module:', error);
+               console.error('[iframe] Error stack:', error.stack);
+               // Fallback: create minimal Vue app
+               const appEl = document.getElementById('app');
+               if (appEl) {
+                  console.info('[iframe] Creating fallback Vue app');
+                  createApp({
+                     template: '<div class="p-4">Loading preview...</div>'
+                  }).mount(appEl);
                }
             }
-         });
-         
-         // Notify parent that we're ready to receive module URL
-         if (window.parent) {
-            console.info('[iframe] Notifying parent that iframe is ready for app');
-            window.parent.postMessage({ type: 'IFRAME_READY_FOR_APP' }, '*');
-         } else {
-            console.warn('[iframe] window.parent is not available');
          }
-      </script>`;
+      });
+      
+      // Notify parent that we're ready to receive module URL
+      if (window.parent) {
+         console.info('[iframe] Notifying parent that iframe is ready for app');
+         window.parent.postMessage({ type: 'IFRAME_READY_FOR_APP' }, '*');
+      } else {
+         console.warn('[iframe] window.parent is not available');
+      }
+   </script>`;
 
    return `<!DOCTYPE html>
 <html lang="en">