vue-wswg-editor 0.0.16 → 0.0.18

package/package.json

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

package/src/components/IframePreview/IframePreview.vue

@@ -21,6 +21,7 @@ import {
    sendSettingsOpen,
    sendScrollToBlock,
    handleIframeMessage,
+   sendInitIframeApp,
 } from "./messageHandler";
 import type { Block } from "../../types/Block";
 import { getIframeAppModuleUrl } from "./iframePreviewApp";
@@ -122,6 +123,26 @@ 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");
+         if (iframeRef.value && iframeAppModuleUrl) {
+            sendInitIframeApp(iframeRef.value, iframeAppModuleUrl);
+         } else {
+            console.warn("[parent] Cannot send module URL - iframe ref or module URL not available");
+         }
+         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");
+         if (iframeRef.value && iframeAppModuleUrl) {
+            sendInitIframeApp(iframeRef.value, iframeAppModuleUrl);
+         }
+         return;
+      }
+
       handleIframeMessage(event, {
          onBlockClick: (_blockId: string, block: any) => {
             emit("click-block", block);

package/src/components/IframePreview/iframeContent.ts

@@ -141,22 +141,77 @@ export function generateIframeHTML(iframeAppModuleUrl?: string): string {
          // 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}');
-         import { createIframeApp } from '${iframeAppModuleUrl}';
-         console.info('[iframe] createIframeApp imported successfully');
+         let appInitialized = false;
          
-         const appEl = document.getElementById('app');
-         console.info('[iframe] App element found:', appEl);
-         if (appEl) {
-            console.info('[iframe] Calling createIframeApp...');
-            createIframeApp(appEl).then(() => {
-               console.info('[iframe] createIframeApp completed successfully');
-            }).catch(error => {
-               console.error('[iframe] Failed to create iframe app:', error);
-               console.error('[iframe] Error stack:', error.stack);
+         try {
+            const module = await import('${iframeAppModuleUrl}');
+            console.info('[iframe] Module imported successfully:', module);
+            
+            if (module && module.createIframeApp) {
+               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(() => {
+                     console.info('[iframe] createIframeApp completed successfully');
+                  }).catch(error => {
+                     console.error('[iframe] Failed to create iframe app:', 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');
+                        createApp({
+                           template: '<div class="p-4">Loading preview...</div>'
+                        }).mount(appEl);
+                     }
+                  }
+               }
             });
-         } else {
-            console.error('[iframe] App element (#app) 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">

package/src/components/IframePreview/messageHandler.ts

@@ -149,6 +149,25 @@ export function sendScrollToBlock(iframe: HTMLIFrameElement | null, blockId: str
    sendToIframe(iframe, message);
 }
 
+/**
+ * Send module URL to iframe for initialization
+ * Used when iframe requests the module URL via postMessage
+ */
+export function sendInitIframeApp(iframe: HTMLIFrameElement | null, moduleUrl: string): void {
+   if (!iframe || !iframe.contentWindow) {
+      console.warn("[parent] Cannot send INIT_IFRAME_APP: iframe not ready");
+      return;
+   }
+
+   try {
+      console.info("[parent] Sending INIT_IFRAME_APP with module URL:", moduleUrl);
+      iframe.contentWindow.postMessage({ type: "INIT_IFRAME_APP", moduleUrl }, "*");
+      console.info("[parent] INIT_IFRAME_APP message sent successfully");
+   } catch (error) {
+      console.error("[parent] Error sending INIT_IFRAME_APP message:", error);
+   }
+}
+
 /**
  * Validate incoming message from iframe
  */