vue-wswg-editor 0.0.17 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "vue-wswg-editor",
-   "version": "0.0.17",
+   "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

@@ -21,12 +21,15 @@ import {
    sendSettingsOpen,
    sendScrollToBlock,
    handleIframeMessage,
+   sendInitIframeApp,
 } from "./messageHandler";
 import type { Block } from "../../types/Block";
 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<{
@@ -79,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);
@@ -122,6 +127,28 @@ function setupMessageListener() {
 
       console.info("[parent] Received message from iframe:", event.data);
 
+      // 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 {
+            console.warn("[parent] Cannot send module URL - iframe ref or module URL not available");
+         }
+         return;
+      }
+
+      // 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;
+      }
+
       handleIframeMessage(event, {
          onBlockClick: (_blockId: string, block: any) => {
             emit("click-block", block);

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,93 +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;
-         
-         console.info('[iframe] Attempting to import createIframeApp from:', '${iframeAppModuleUrl}');
-         import { createIframeApp } from '${iframeAppModuleUrl}';
-         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...');
-            createIframeApp(appEl).then(() => {
-               console.info('[iframe] createIframeApp completed successfully');
-            }).catch(error => {
-               console.error('[iframe] Failed to create iframe app:', error);
+   // 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...');
+                  createIframeApp(appEl).then(() => {
+                     console.info('[iframe] createIframeApp completed successfully');
+                  }).catch(error => {
+                     console.error('[iframe] createIframeApp failed:', 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 after error');
+                        createApp({
+                           template: '<div class="p-4">Error loading preview. Check console for details.</div>'
+                        }).mount(appEl);
+                     }
+                  });
+               } else {
+                  console.error('[iframe] App element not found!');
+               }
+            } catch (error) {
+               console.error('[iframe] Failed to load iframe app module:', error);
                console.error('[iframe] Error stack:', error.stack);
-            });
-         } else {
-            console.error('[iframe] App element (#app) not found!');
-         }
-      </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);
-                  }
+               // 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">

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
  */