vue-wswg-editor 0.0.11 → 0.0.13

package/src/components/IframePreview/IframePreview.vue

@@ -0,0 +1,211 @@
+<template>
+   <div ref="containerRef" class="iframe-preview-container">
+      <iframe ref="iframeRef" title="Page preview" :src="iframeSrc" class="iframe-preview" frameborder="0"></iframe>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount, nextTick, computed } from "vue";
+import { generateIframeHTML } from "./iframeContent";
+import {
+   sendPageDataUpdate,
+   sendActiveBlock,
+   sendHoveredBlock,
+   sendSettingsOpen,
+   sendScrollToBlock,
+   handleIframeMessage,
+} 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
+const iframeAppModuleUrl = getIframeAppModuleUrl();
+
+const props = defineProps<{
+   pageData?: Record<string, any>;
+   activeBlock: Block | null;
+   hoveredBlockId: string | null;
+   viewport: "desktop" | "mobile";
+   editable?: boolean;
+   blocksKey?: string;
+   settingsKey?: string;
+   settingsOpen?: boolean;
+   theme?: string;
+}>();
+
+const emit = defineEmits<{
+   (e: "click-block", block: Block | null): void;
+   (e: "hover-block", blockId: string | null): void;
+   (e: "block-reorder", oldIndex: number, newIndex: number): void;
+   (e: "block-add", blockType: string, index: number): void;
+   (e: "click-partial", partialValue: string): void;
+}>();
+
+const iframeRef = ref<HTMLIFrameElement | null>(null);
+const containerRef = ref<HTMLElement | null>(null);
+const iframeReady = ref(false);
+const iframeSrc = ref<string>("");
+
+const blocksKey = computed(() => props.blocksKey || "blocks");
+const settingsKey = computed(() => props.settingsKey || "settings");
+
+// Generate blob URL for iframe
+function createIframeSrc(): string {
+   const html = generateIframeHTML(iframeAppModuleUrl);
+   const blob = new Blob([html], { type: "text/html" });
+   return URL.createObjectURL(blob);
+}
+
+// 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;
+
+   await nextTick();
+   sendPageDataUpdate(iframeRef.value, props.pageData, blocksKey.value, settingsKey.value, props.theme || "default");
+}
+
+// Setup message listener
+let messageListener: ((event: MessageEvent) => void) | null = null;
+
+function setupMessageListener() {
+   messageListener = (event: MessageEvent) => {
+      // Only handle messages from our iframe
+      if (event.source !== iframeRef.value?.contentWindow) return;
+
+      handleIframeMessage(event, {
+         onBlockClick: (_blockId: string, block: any) => {
+            emit("click-block", block);
+         },
+         onBlockHover: (blockId: string | null) => {
+            emit("hover-block", blockId);
+         },
+         onBlockReorder: (oldIndex: number, newIndex: number) => {
+            emit("block-reorder", oldIndex, newIndex);
+         },
+         onBlockAdd: (blockType: string, index: number) => {
+            emit("block-add", blockType, index);
+         },
+         onPartialClick: (partialValue: string) => {
+            emit("click-partial", partialValue);
+         },
+         onIframeReady: () => {
+            iframeReady.value = true;
+            // Wait a bit for iframe Vue app to be fully ready
+            setTimeout(() => {
+               updateIframeContent();
+               // Send initial settingsOpen state
+               if (iframeRef.value && props.settingsOpen !== undefined) {
+                  sendSettingsOpen(iframeRef.value, props.settingsOpen);
+               }
+            }, 100);
+         },
+      });
+   };
+
+   window.addEventListener("message", messageListener);
+}
+
+function cleanupMessageListener() {
+   if (messageListener) {
+      window.removeEventListener("message", messageListener);
+      messageListener = null;
+   }
+}
+
+// Watch for pageData changes
+watch(
+   [() => props.pageData, () => props.theme],
+   async () => {
+      await nextTick();
+      updateIframeContent();
+   },
+   { deep: true }
+);
+
+// Watch for activeBlock changes
+watch(
+   () => props.activeBlock,
+   async (block) => {
+      if (iframeRef.value && iframeReady.value) {
+         sendActiveBlock(iframeRef.value, block || null);
+         // Also scroll to block
+         if (block?.id) {
+            await nextTick();
+            sendScrollToBlock(iframeRef.value, block.id);
+         }
+      }
+   }
+);
+
+// Watch for hoveredBlockId changes
+watch(
+   () => props.hoveredBlockId,
+   (blockId) => {
+      if (iframeRef.value && iframeReady.value) {
+         sendHoveredBlock(iframeRef.value, blockId);
+      }
+   }
+);
+
+// Watch for settingsOpen changes
+watch(
+   () => props.settingsOpen,
+   (settingsOpen) => {
+      if (iframeRef.value && iframeReady.value) {
+         sendSettingsOpen(iframeRef.value, settingsOpen ?? false);
+      }
+   }
+);
+
+onMounted(() => {
+   iframeSrc.value = createIframeSrc();
+   setupMessageListener();
+});
+
+onBeforeUnmount(() => {
+   cleanupMessageListener();
+   // Cleanup blob URL
+   if (iframeSrc.value.startsWith("blob:")) {
+      URL.revokeObjectURL(iframeSrc.value);
+   }
+});
+</script>
+
+<style scoped lang="scss">
+.iframe-preview-container {
+   // position: relative;
+   // width: 100%;
+   // overflow: hidden;
+   // background-color: #ededed;
+   height: -webkit-fill-available;
+
+   &.mobile-viewport {
+      .iframe-preview {
+         max-width: 384px;
+         margin: 0 auto;
+      }
+   }
+}
+
+.iframe-preview {
+   display: block;
+   width: 100%;
+   height: 100%;
+   background: white;
+   border: none;
+}
+
+.hidden-renderer {
+   position: absolute;
+   top: -9999px;
+   left: -9999px;
+   visibility: hidden;
+   width: 1px;
+   height: 1px;
+   overflow: hidden;
+   pointer-events: none;
+   opacity: 0;
+}
+</style>

package/src/components/IframePreview/iframeContent.ts

@@ -0,0 +1,210 @@
+/**
+ * Extract CSS variables from the parent document
+ * Extracts variables from :root and specific selectors like .wswg-page-builder
+ */
+function extractParentCSSVariables(): string {
+   if (typeof document === "undefined" || typeof window === "undefined") return "";
+
+   const variables: string[] = [];
+
+   // Get all CSS variables from :root
+   const rootVariables = new Set<string>();
+   const allStyles = Array.from(document.styleSheets);
+
+   // Extract from stylesheets
+   allStyles.forEach((sheet) => {
+      try {
+         const rules = Array.from(sheet.cssRules || sheet.rules || []);
+         rules.forEach((rule) => {
+            if (rule instanceof CSSStyleRule) {
+               const { selectorText, style } = rule;
+               // Check if this rule targets :root or html
+               if (selectorText === ":root" || selectorText === "html" || selectorText === "html:root") {
+                  for (let i = 0; i < style.length; i++) {
+                     const property = style[i];
+                     if (property.startsWith("--")) {
+                        const value = style.getPropertyValue(property);
+                        rootVariables.add(`${property}: ${value};`);
+                     }
+                  }
+               }
+            }
+         });
+      } catch {
+         // Cross-origin stylesheets will throw errors, ignore them
+      }
+   });
+
+   // Also extract from inline styles in <style> tags
+   const styleTags = document.querySelectorAll("head style");
+   styleTags.forEach((style) => {
+      const content = style.textContent || style.innerHTML;
+      if (content) {
+         // Match CSS variable declarations
+         const varRegex = /--[\w-]+\s*:\s*[^;]+;/g;
+         const matches = content.match(varRegex);
+         if (matches) {
+            matches.forEach((match) => {
+               rootVariables.add(match.trim());
+            });
+         }
+      }
+   });
+
+   if (rootVariables.size > 0) {
+      variables.push(`:root {`);
+      rootVariables.forEach((variable) => {
+         variables.push(`   ${variable}`);
+      });
+      variables.push(`}`);
+   }
+
+   return variables.length > 0 ? `<style>${variables.join("\n")}</style>` : "";
+}
+
+/**
+ * Extract stylesheets from the parent document
+ * This includes both <link rel="stylesheet"> tags and <style> tags
+ */
+function extractParentStylesheets(): string {
+   if (typeof document === "undefined") return "";
+
+   const stylesheets: string[] = [];
+
+   // Extract <link rel="stylesheet"> tags
+   const linkTags = document.querySelectorAll('head link[rel="stylesheet"]');
+   linkTags.forEach((link) => {
+      const href = link.getAttribute("href");
+      if (href) {
+         // Convert relative URLs to absolute URLs
+         const absoluteHref = new URL(href, window.location.href).href;
+         stylesheets.push(`<link rel="stylesheet" href="${absoluteHref}">`);
+      }
+   });
+
+   // Extract <style> tags
+   const styleTags = document.querySelectorAll("head style");
+   styleTags.forEach((style) => {
+      const content = style.textContent || style.innerHTML;
+      if (content) {
+         stylesheets.push(`<style>${content}</style>`);
+      }
+   });
+
+   return stylesheets.join("\n   ");
+}
+
+/**
+ * Generate HTML content for the iframe
+ * 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
+ */
+export function generateIframeHTML(iframeAppModuleUrl?: string): string {
+   const parentStylesheets = extractParentStylesheets();
+   const parentCSSVariables = extractParentCSSVariables();
+   const vueCdnUrl = "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
+   // Get parent origin to use as base URL for relative asset paths
+   const parentOrigin = typeof window !== "undefined" ? window.location.origin : "";
+
+   // Define Vue feature flags before Vue is loaded
+   // These must be defined as global constants before any Vue code runs
+   const vueFeatureFlagsScript = `<script>
+      // Define Vue feature flags to prevent warnings
+      // These must be defined before Vue or the library code is imported
+      // Using var to make them available globally (not just on window)
+      var __VUE_OPTIONS_API__ = true;
+      var __VUE_PROD_DEVTOOLS__ = false;
+      var __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false;
+      
+      // Also set on window for compatibility
+      window.__VUE_OPTIONS_API__ = true;
+      window.__VUE_PROD_DEVTOOLS__ = false;
+      window.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false;
+   </script>`;
+
+   // Generate script that loads Vue and initializes the iframe app
+   const appScript = iframeAppModuleUrl
+      ? `<script type="module">
+         import { createApp } from '${vueCdnUrl}';
+         import { createIframeApp } from '${iframeAppModuleUrl}';
+         
+         const appEl = document.getElementById('app');
+         if (appEl) {
+            createIframeApp(appEl).catch(error => {
+               console.error('Failed to create iframe app:', error);
+            });
+         }
+      </script>`
+      : `<script type="module">
+         // Fallback: Wait for parent to send module URL via postMessage
+         import { createApp } from '${vueCdnUrl}';
+         
+         let appInitialized = false;
+         
+         window.addEventListener('message', async (event) => {
+            if (event.data.type === 'INIT_IFRAME_APP' && event.data.moduleUrl && !appInitialized) {
+               appInitialized = true;
+               try {
+                  const { createIframeApp } = await import(event.data.moduleUrl);
+                  const appEl = document.getElementById('app');
+                  if (appEl) {
+                     createIframeApp(appEl);
+                  }
+               } catch (error) {
+                  console.error('Failed to load iframe app module:', error);
+                  // Fallback: create minimal Vue app
+                  const appEl = document.getElementById('app');
+                  if (appEl) {
+                     createApp({
+                        template: '<div class="p-4">Loading preview...</div>'
+                     }).mount(appEl);
+                  }
+               }
+            }
+         });
+         
+         // Notify parent that we're ready to receive module URL
+         if (window.parent) {
+            window.parent.postMessage({ type: 'IFRAME_READY_FOR_APP' }, '*');
+         }
+      </script>`;
+
+   return `<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <title>Page Preview</title>
+   ${parentOrigin ? `<base href="${parentOrigin}/">` : ""}
+   ${parentStylesheets}
+   ${parentCSSVariables}
+   <style>
+      /* Additional iframe-specific styles */
+      html, body {
+         margin: 0;
+         padding: 0;
+         width: 100%;
+         height: 100%;
+         overflow-x: hidden;
+      }
+      
+      #app {
+         width: 100%;
+         min-height: 100vh;
+      }
+      
+      .page-renderer-wrapper {
+         width: 100%;
+      }
+   </style>
+</head>
+<body>
+   <div id="app"></div>
+   ${vueFeatureFlagsScript}
+   ${appScript}
+</body>
+</html>`;
+}

package/src/components/IframePreview/iframePreviewApp.ts

@@ -0,0 +1,221 @@
+/**
+ * Iframe Preview Vue Application
+ *
+ * This file creates a Vue application that runs inside the iframe preview.
+ * Since the library is consumed as source code, consuming apps' Vite builds
+ * will process this file, giving it access to virtual modules (blocks/layouts).
+ *
+ * Usage in consuming apps:
+ * ```ts
+ * import { createIframeApp, getIframeAppModuleUrl } from 'vue-wswg-editor/IframePreviewApp'
+ * ```
+ */
+
+import { createApp, ref, watch, h, type App } from "vue";
+import EditorPageRenderer from "../EditorPageRenderer/EditorPageRenderer.vue";
+import type { Block } from "../../types/Block";
+
+/**
+ * Get the URL of this module
+ * This can be used to import the module in the iframe HTML
+ */
+export function getIframeAppModuleUrl(): string {
+   // Use import.meta.url to get the current module's URL
+   // In development, this will be the source file URL
+   // In production (after Vite build), this will be the bundled module URL
+   return import.meta.url;
+}
+
+export interface IframeAppState {
+   pageData: Record<string, any> | null;
+   activeBlock: Block | null;
+   hoveredBlockId: string | null;
+   blocksKey: string;
+   settingsKey: string;
+   settingsOpen: boolean;
+   theme: string;
+}
+
+export interface IframeAppCallbacks {
+   onBlockClick?: (blockId: string, block: Block | null) => void;
+   onBlockHover?: (blockId: string | null) => void;
+}
+
+/**
+ * Create and mount the Vue app for the iframe preview
+ */
+export async function createIframeApp(container: HTMLElement): Promise<App> {
+   // State
+   const pageData = ref<Record<string, any> | null>(null);
+   const activeBlock = ref<Block | null>(null);
+   const hoveredBlockId = ref<string | null>(null);
+   const settingsOpen = ref<boolean>(false);
+   const blocksKey = ref<string>("blocks");
+   const settingsKey = ref<string>("settings");
+   const theme = ref<string>("default");
+   // Serialize data for postMessage (handles Vue reactive proxies)
+   function serializeForPostMessage(data: any): any {
+      try {
+         return JSON.parse(JSON.stringify(data));
+      } catch (error) {
+         console.warn("[iframe] Failed to serialize data for postMessage:", error);
+         return undefined;
+      }
+   }
+
+   // Message handler
+   function sendToParent(message: any) {
+      if (window.parent) {
+         // Serialize message to handle Vue reactive proxies
+         const serializedMessage = serializeForPostMessage(message);
+         if (!serializedMessage) {
+            console.error("[iframe] Failed to serialize message for postMessage");
+            return;
+         }
+         window.parent.postMessage(serializedMessage, "*");
+      }
+   }
+
+   // Handle messages from parent
+   window.addEventListener("message", (event: MessageEvent) => {
+      const msg = event.data;
+      if (!msg || !msg.type) return;
+
+      switch (msg.type) {
+         case "UPDATE_PAGE_DATA":
+            if (msg.pageData) {
+               pageData.value = msg.pageData;
+            }
+            if (msg.blocksKey) {
+               blocksKey.value = msg.blocksKey;
+            }
+            if (msg.settingsKey) {
+               settingsKey.value = msg.settingsKey;
+            }
+            if (msg.theme) {
+               theme.value = msg.theme;
+            }
+            break;
+         case "SET_ACTIVE_BLOCK":
+            activeBlock.value = msg.block;
+            break;
+         case "SET_HOVERED_BLOCK":
+            hoveredBlockId.value = msg.blockId;
+            break;
+         case "SET_SETTINGS_OPEN":
+            settingsOpen.value = msg.settingsOpen;
+            break;
+         case "SCROLL_TO_BLOCK": {
+            const block = document.querySelector(`[data-block-id="${msg.blockId}"]`);
+            if (block) {
+               block.scrollIntoView({ behavior: "smooth", block: "center" });
+            }
+            break;
+         }
+      }
+   });
+
+   // Create Vue app using render function (since we're using runtime-only Vue)
+   const app = createApp({
+      components: {
+         EditorPageRenderer,
+      },
+      setup() {
+         // Ensure PageRenderer has time to load blocks before rendering
+         const isPageReady = ref(false);
+
+         // Watch for pageData changes
+         watch(
+            () => pageData.value,
+            async (newPageData) => {
+               if (newPageData && newPageData[blocksKey.value]) {
+                  // Give PageRenderer time to load block modules
+                  // PageRenderer loads blocks in onBeforeMount, so we need to wait
+                  await new Promise((resolve) => setTimeout(resolve, 200));
+                  isPageReady.value = true;
+               } else {
+                  isPageReady.value = false;
+               }
+            },
+            { immediate: true }
+         );
+
+         // Render function
+         return () => {
+            const currentPageData = pageData.value;
+            const hasPageData = currentPageData && currentPageData[blocksKey.value];
+            const blocks = hasPageData && currentPageData ? currentPageData[blocksKey.value] : [];
+
+            if (isPageReady.value && currentPageData) {
+               return h(EditorPageRenderer, {
+                  blocks: blocks,
+                  layout: currentPageData[settingsKey.value]?.layout,
+                  settings: currentPageData[settingsKey.value],
+                  activeBlock: activeBlock.value,
+                  hoveredBlockId: hoveredBlockId.value,
+                  settingsOpen: settingsOpen.value,
+                  editable: true,
+                  theme: theme.value,
+               });
+            } else {
+               // 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" }, [
+                     h(
+                        "svg",
+                        {
+                           class: "mx-auto size-8 animate-spin text-blue-600",
+                           xmlns: "http://www.w3.org/2000/svg",
+                           fill: "none",
+                           viewBox: "0 0 24 24",
+                        },
+                        [
+                           h("circle", {
+                              class: "opacity-25",
+                              cx: "12",
+                              cy: "12",
+                              r: "10",
+                              stroke: "currentColor",
+                              "stroke-width": "4",
+                           }),
+                           h("path", {
+                              class: "opacity-75",
+                              fill: "currentColor",
+                              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+                           }),
+                        ]
+                     ),
+                     h("span", { class: "mt-4 text-gray-700" }, "Loading preview..."),
+                  ]),
+               ]);
+            }
+         };
+      },
+   });
+
+   // Try to install Unhead plugin if available
+   // This is needed for layouts that use useHead from @vueuse/head
+   try {
+      // Dynamic import to check if @vueuse/head is available
+      // This module is externalized in vite.config.ts so it won't be bundled
+      // Using @vite-ignore to prevent static analysis
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore - @vueuse/head may not be available in all consuming apps
+      const headModule = await import(/* @vite-ignore */ "@vueuse/head");
+      if (headModule && typeof headModule.createHead === "function") {
+         const head = headModule.createHead();
+         app.use(head);
+      }
+   } catch {
+      // @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
+   }
+
+   // Mount the app
+   app.mount(container);
+
+   // Notify parent that iframe is ready
+   sendToParent({ type: "IFRAME_READY" });
+
+   return app;
+}