vue-wswg-editor 0.0.15 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "vue-wswg-editor",
-   "version": "0.0.15",
+   "version": "0.0.16",
    "type": "module",
    "main": "./dist/vue-wswg-editor.es.js",
    "module": "./dist/vue-wswg-editor.es.js",
@@ -88,10 +88,16 @@
       "vite": "^5.4.19",
       "vitepress": "^1.6.4",
       "vitest": "^2.1.9",
+      "vue-router": "^4.0.0",
       "vue-tsc": "^2.2.12",
       "yup": "^1.7.1"
    },
    "peerDependencies": {
       "vue": "^3.4.0"
+   },
+   "peerDependenciesMeta": {
+      "vue-router": {
+         "optional": true
+      }
    }
 }

package/src/components/IframePreview/IframePreview.vue

@@ -1,6 +1,13 @@
 <template>
    <div ref="containerRef" class="iframe-preview-container">
-      <iframe ref="iframeRef" title="Page preview" :src="iframeSrc" class="iframe-preview" frameborder="0"></iframe>
+      <iframe
+         ref="iframeRef"
+         title="Page preview"
+         :src="iframeSrc"
+         class="iframe-preview"
+         frameborder="0"
+         @load="onIframeLoad"
+      ></iframe>
    </div>
 </template>
 
@@ -50,19 +57,54 @@ const iframeSrc = ref<string>("");
 const blocksKey = computed(() => props.blocksKey || "blocks");
 const settingsKey = computed(() => props.settingsKey || "settings");
 
+// Handle iframe load event
+function onIframeLoad() {
+   console.info("[parent] Iframe load event fired");
+   console.info("[parent] Iframe ref:", iframeRef.value);
+   console.info("[parent] Iframe contentWindow:", iframeRef.value?.contentWindow);
+   if (iframeRef.value?.contentWindow) {
+      try {
+         console.info("[parent] Iframe document:", iframeRef.value.contentWindow.document);
+         console.info("[parent] Iframe document body:", iframeRef.value.contentWindow.document.body);
+         console.info(
+            "[parent] Iframe document body innerHTML length:",
+            iframeRef.value.contentWindow.document.body.innerHTML.length
+         );
+      } catch (error) {
+         console.info("[parent] Cannot access iframe document (cross-origin?):", error);
+      }
+   }
+}
+
 // Generate blob URL for iframe
 function createIframeSrc(): string {
+   console.info("[parent] Creating iframe src, module URL:", iframeAppModuleUrl);
    const html = generateIframeHTML(iframeAppModuleUrl);
    const blob = new Blob([html], { type: "text/html" });
-   return URL.createObjectURL(blob);
+   const blobUrl = URL.createObjectURL(blob);
+   console.info("[parent] Iframe blob URL created:", blobUrl);
+   return blobUrl;
 }
 
 // Update iframe content - send pageData to Vue app in iframe
 async function updateIframeContent() {
-   if (!iframeRef.value || !iframeReady.value) return;
-   if (!props.pageData || !props.pageData[blocksKey.value]) return;
+   console.info("[parent] updateIframeContent called", {
+      hasIframeRef: !!iframeRef.value,
+      iframeReady: iframeReady.value,
+      hasPageData: !!props.pageData,
+      hasBlocks: !!(props.pageData && props.pageData[blocksKey.value]),
+   });
+   if (!iframeRef.value || !iframeReady.value) {
+      console.info("[parent] Skipping update - iframe not ready");
+      return;
+   }
+   if (!props.pageData || !props.pageData[blocksKey.value]) {
+      console.info("[parent] Skipping update - no pageData or blocks");
+      return;
+   }
 
    await nextTick();
+   console.info("[parent] Sending pageData update to iframe");
    sendPageDataUpdate(iframeRef.value, props.pageData, blocksKey.value, settingsKey.value, props.theme || "default");
 }
 
@@ -70,9 +112,15 @@ async function updateIframeContent() {
 let messageListener: ((event: MessageEvent) => void) | null = null;
 
 function setupMessageListener() {
+   console.info("[parent] Setting up message listener");
    messageListener = (event: MessageEvent) => {
       // Only handle messages from our iframe
-      if (event.source !== iframeRef.value?.contentWindow) return;
+      if (event.source !== iframeRef.value?.contentWindow) {
+         console.info("[parent] Ignoring message from different source");
+         return;
+      }
+
+      console.info("[parent] Received message from iframe:", event.data);
 
       handleIframeMessage(event, {
          onBlockClick: (_blockId: string, block: any) => {
@@ -91,12 +139,15 @@ function setupMessageListener() {
             emit("click-partial", partialValue);
          },
          onIframeReady: () => {
+            console.info("[parent] IFRAME_READY received, setting iframeReady to true");
             iframeReady.value = true;
             // Wait a bit for iframe Vue app to be fully ready
             setTimeout(() => {
+               console.info("[parent] Timeout completed, calling updateIframeContent");
                updateIframeContent();
                // Send initial settingsOpen state
                if (iframeRef.value && props.settingsOpen !== undefined) {
+                  console.info("[parent] Sending initial settingsOpen state");
                   sendSettingsOpen(iframeRef.value, props.settingsOpen);
                }
             }, 100);
@@ -105,6 +156,7 @@ function setupMessageListener() {
    };
 
    window.addEventListener("message", messageListener);
+   console.info("[parent] Message listener added");
 }
 
 function cleanupMessageListener() {
@@ -160,7 +212,9 @@ watch(
 );
 
 onMounted(() => {
+   console.info("[parent] IframePreview component mounted");
    iframeSrc.value = createIframeSrc();
+   console.info("[parent] Iframe src set:", iframeSrc.value);
    setupMessageListener();
 });
 

package/src/components/IframePreview/iframeContent.ts

@@ -130,43 +130,74 @@ export function generateIframeHTML(iframeAppModuleUrl?: string): string {
    // 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) {
-            createIframeApp(appEl).catch(error => {
-               console.error('Failed to create iframe app:', error);
+            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);
             });
+         } 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) {
-                     createIframeApp(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('Failed to load iframe app module:', 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);
@@ -177,7 +208,10 @@ export function generateIframeHTML(iframeAppModuleUrl?: string): string {
          
          // 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>`;
 

package/src/components/IframePreview/iframePreviewApp.ts

@@ -45,6 +45,9 @@ export interface IframeAppCallbacks {
  * Create and mount the Vue app for the iframe preview
  */
 export async function createIframeApp(container: HTMLElement): Promise<App> {
+   console.info("[iframe] createIframeApp called with container:", container);
+   console.info("[iframe] Container element:", container.tagName, container.id, container.className);
+
    // State
    const pageData = ref<Record<string, any> | null>(null);
    const activeBlock = ref<Block | null>(null);
@@ -53,6 +56,7 @@ export async function createIframeApp(container: HTMLElement): Promise<App> {
    const blocksKey = ref<string>("blocks");
    const settingsKey = ref<string>("settings");
    const theme = ref<string>("default");
+   console.info("[iframe] State initialized");
    // Serialize data for postMessage (handles Vue reactive proxies)
    function serializeForPostMessage(data: any): any {
       try {
@@ -75,14 +79,23 @@ export async function createIframeApp(container: HTMLElement): Promise<App> {
    }
 
    // Handle messages from parent
+   console.info("[iframe] Setting up message listener");
    window.addEventListener("message", (event: MessageEvent) => {
       const msg = event.data;
+      console.info("[iframe] Received message:", msg?.type, msg);
       if (!msg || !msg.type) return;
 
       switch (msg.type) {
          case "UPDATE_PAGE_DATA":
+            console.info("[iframe] UPDATE_PAGE_DATA received", {
+               hasPageData: !!msg.pageData,
+               blocksKey: msg.blocksKey,
+               settingsKey: msg.settingsKey,
+               theme: msg.theme,
+            });
             if (msg.pageData) {
                pageData.value = msg.pageData;
+               console.info("[iframe] pageData updated:", pageData.value);
             }
             if (msg.blocksKey) {
                blocksKey.value = msg.blocksKey;
@@ -114,25 +127,36 @@ export async function createIframeApp(container: HTMLElement): Promise<App> {
    });
 
    // Create Vue app using render function (since we're using runtime-only Vue)
+   console.info("[iframe] Creating Vue app...");
    const app = createApp({
       components: {
          EditorPageRenderer,
       },
       setup() {
+         console.info("[iframe] Vue app setup() called");
          // Ensure PageRenderer has time to load blocks before rendering
          const isPageReady = ref(false);
 
          // Watch for pageData changes
+         console.info("[iframe] Setting up pageData watcher");
          watch(
             () => pageData.value,
             async (newPageData) => {
+               console.info("[iframe] pageData watcher triggered:", {
+                  hasNewPageData: !!newPageData,
+                  blocksKey: blocksKey.value,
+                  hasBlocks: !!(newPageData && newPageData[blocksKey.value]),
+               });
                if (newPageData && newPageData[blocksKey.value]) {
                   // Give PageRenderer time to load block modules
                   // PageRenderer loads blocks in onBeforeMount, so we need to wait
+                  console.info("[iframe] Waiting 200ms for PageRenderer to load blocks...");
                   await new Promise((resolve) => setTimeout(resolve, 200));
                   isPageReady.value = true;
+                  console.info("[iframe] isPageReady set to true");
                } else {
                   isPageReady.value = false;
+                  console.info("[iframe] isPageReady set to false (no pageData)");
                }
             },
             { immediate: true }
@@ -144,7 +168,15 @@ export async function createIframeApp(container: HTMLElement): Promise<App> {
             const hasPageData = currentPageData && currentPageData[blocksKey.value];
             const blocks = hasPageData && currentPageData ? currentPageData[blocksKey.value] : [];
 
+            console.info("[iframe] Render function called:", {
+               isPageReady: isPageReady.value,
+               hasPageData: !!currentPageData,
+               hasBlocks: hasPageData,
+               blocksCount: blocks?.length || 0,
+            });
+
             if (isPageReady.value && currentPageData) {
+               console.info("[iframe] Rendering EditorPageRenderer");
                return h(EditorPageRenderer, {
                   blocks: blocks,
                   layout: currentPageData[settingsKey.value]?.layout,
@@ -156,6 +188,7 @@ export async function createIframeApp(container: HTMLElement): Promise<App> {
                   theme: theme.value,
                });
             } else {
+               console.info("[iframe] Rendering loading state");
                // Show loading state while PageRenderer loads blocks
                return h("div", { class: "bg-white px-5 py-12 md:py-20" }, [
                   h("div", { class: "mx-auto max-w-md pb-7 text-center" }, [
@@ -199,17 +232,23 @@ export async function createIframeApp(container: HTMLElement): Promise<App> {
 
    // Try to install Unhead plugin if available
    // This is needed for layouts that use useHead from @vueuse/head
+   console.info("[iframe] Attempting to install @vueuse/head plugin...");
    try {
       // Dynamic import to check if @vueuse/head is available
       // This module is externalized in vite.config.ts so it won't be bundled
       const headModule = await dynamicImport("@vueuse/head");
       if (headModule && typeof headModule.createHead === "function") {
+         console.info("[iframe] @vueuse/head found, installing plugin");
          const head = headModule.createHead();
          app.use(head);
+         console.info("[iframe] @vueuse/head plugin installed");
+      } else {
+         console.info("[iframe] @vueuse/head module found but createHead is not a function");
       }
-   } catch {
+   } catch (error) {
       // @vueuse/head not available - layouts using useHead will show warnings but won't break
       // This is expected if the consuming app doesn't use @vueuse/head
+      console.info("[iframe] @vueuse/head not available (this is OK):", error);
    }
 
    // Try to use vue-router - first try from CDN, but components use consuming app's vue-router
@@ -217,25 +256,29 @@ export async function createIframeApp(container: HTMLElement): Promise<App> {
    // with different Symbol keys. We need to use the same instance they're using.
    // Try to import vue-router dynamically - this will use the consuming app's vue-router
    // if it's available in the module resolution context
+   console.info("[iframe] Attempting to install vue-router...");
    let VueRouter: any = null;
    let routerInstalled = false;
 
    try {
-      // Try dynamic import - this should resolve to the consuming app's vue-router
-      // when the library is consumed as source code
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore - vue-router may not be available in all consuming apps
-      const routerModule = await import("vue-router");
+      // Use dynamic import helper to prevent static analysis
+      // This should resolve to the consuming app's vue-router when the library is consumed as source code
+      console.info("[iframe] Trying to import vue-router dynamically...");
+      const routerModule = await dynamicImport("vue-router");
       VueRouter = routerModule;
-   } catch {
+      console.info("[iframe] vue-router imported successfully:", !!VueRouter);
+   } catch (error) {
       // Fallback to CDN version
+      console.info("[iframe] Dynamic import failed, trying CDN version:", error);
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       VueRouter = typeof window !== "undefined" ? (window as any).VueRouter : null;
+      console.info("[iframe] VueRouter from window:", !!VueRouter);
    }
 
    if (VueRouter && typeof VueRouter.createRouter === "function") {
       try {
+         console.info("[iframe] Creating vue-router instance...");
          // Create a minimal router instance
          const router = VueRouter.createRouter({
             history: VueRouter.createMemoryHistory(),
@@ -250,6 +293,7 @@ export async function createIframeApp(container: HTMLElement): Promise<App> {
                },
             ],
          });
+         console.info("[iframe] Router created, setting up resolve override...");
 
          // Store original resolve to call it first, then ensure matched array exists
          const originalResolve = router.resolve.bind(router);
@@ -273,10 +317,13 @@ export async function createIframeApp(container: HTMLElement): Promise<App> {
 
          // Install router BEFORE mounting - this provides the router injection
          // The app.use() call should handle the Symbol keys automatically
+         console.info("[iframe] Installing router on app...");
          app.use(router);
 
          // Wait for router to be ready before mounting
+         console.info("[iframe] Waiting for router to be ready...");
          await router.isReady();
+         console.info("[iframe] Router is ready");
 
          // Ensure currentRoute has proper structure with matched array
          // currentRoute.value is readonly, so we navigate to ensure route is properly resolved
@@ -285,23 +332,34 @@ export async function createIframeApp(container: HTMLElement): Promise<App> {
          const currentRoute = router.currentRoute.value;
          if (currentRoute && (!currentRoute.matched || currentRoute.matched.length === 0)) {
             // Navigate to ensure route has proper matched array
+            console.info("[iframe] Navigating to / to ensure route has matched array");
             await router.push("/");
          }
 
          routerInstalled = true;
-      } catch {
+         console.info("[iframe] Router installed successfully");
+      } catch (error) {
          // Fall through to mount without router
+         console.error("[iframe] Failed to install router:", error);
       }
+   } else {
+      console.info("[iframe] VueRouter not available or createRouter is not a function");
    }
 
    if (!routerInstalled) {
       // Router was not installed - RouterLink components will fail
       console.warn("[iframe preview] Router was not installed - RouterLink components will fail");
    }
+
    // Mount the app
+   console.info("[iframe] Mounting app to container...");
+   console.info("[iframe] Container before mount:", container.innerHTML);
    app.mount(container);
+   console.info("[iframe] App mounted successfully");
+   console.info("[iframe] Container after mount:", container.innerHTML);
 
    // Notify parent that iframe is ready
+   console.info("[iframe] Sending IFRAME_READY message to parent");
    sendToParent({ type: "IFRAME_READY" });
 
    return app;

package/src/components/IframePreview/messageHandler.ts

@@ -27,23 +27,26 @@ function serializeForPostMessage(data: any): any {
  * Send a message to the iframe
  */
 export function sendToIframe(iframe: HTMLIFrameElement | null, message: IframeMessage): void {
+   console.info("[parent] sendToIframe called:", message.type);
    if (!iframe || !iframe.contentWindow) {
-      console.warn("Cannot send message: iframe not ready");
+      console.warn("[parent] Cannot send message: iframe not ready");
       return;
    }
 
    // Serialize message to handle Vue reactive proxies
    const serializedMessage = serializeForPostMessage(message) as IframeMessage;
    if (!serializedMessage) {
-      console.error("Failed to serialize message for postMessage");
+      console.error("[parent] Failed to serialize message for postMessage");
       return;
    }
 
    // Security: Only send to same origin
    try {
+      console.info("[parent] Posting message to iframe:", message.type, serializedMessage);
       iframe.contentWindow.postMessage(serializedMessage, "*");
+      console.info("[parent] Message posted successfully");
    } catch (error) {
-      console.error("Error sending message to iframe:", error);
+      console.error("[parent] Error sending message to iframe:", error);
    }
 }