vue-wswg-editor 0.0.13 → 0.0.14

package/package.json

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

package/src/components/IframePreview/iframeContent.ts

@@ -106,6 +106,7 @@ export function generateIframeHTML(iframeAppModuleUrl?: string): string {
    const parentStylesheets = extractParentStylesheets();
    const parentCSSVariables = extractParentCSSVariables();
    const vueCdnUrl = "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
+   const vueRouterCdnUrl = "https://unpkg.com/vue-router@4/dist/vue-router.esm-browser.js";
    // Get parent origin to use as base URL for relative asset paths
    const parentOrigin = typeof window !== "undefined" ? window.location.origin : "";
 
@@ -125,10 +126,15 @@ export function generateIframeHTML(iframeAppModuleUrl?: string): string {
       window.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false;
    </script>`;
 
-   // Generate script that loads Vue and initializes the iframe app
+   // 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">
-         import { createApp } from '${vueCdnUrl}';
+         import { createApp } from 'vue';
+         import * as VueRouter from 'vue-router';
+         // Make vue-router available globally so it can be accessed in the iframe app
+         window.VueRouter = VueRouter;
+         
          import { createIframeApp } from '${iframeAppModuleUrl}';
          
          const appEl = document.getElementById('app');
@@ -140,7 +146,10 @@ export function generateIframeHTML(iframeAppModuleUrl?: string): string {
       </script>`
       : `<script type="module">
          // Fallback: Wait for parent to send module URL via postMessage
-         import { createApp } from '${vueCdnUrl}';
+         import { createApp } from 'vue';
+         import * as VueRouter from 'vue-router';
+         // Make vue-router available globally so it can be imported in the iframe app
+         window.VueRouter = VueRouter;
          
          let appInitialized = false;
          
@@ -179,6 +188,17 @@ export function generateIframeHTML(iframeAppModuleUrl?: string): string {
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Preview</title>
    ${parentOrigin ? `<base href="${parentOrigin}/">` : ""}
+   <!-- Import map to allow vue-router to resolve "vue" -->
+   <!-- Stub for @vue/devtools-api to avoid loading devtools in iframe -->
+   <script type="importmap">
+   {
+      "imports": {
+         "vue": "${vueCdnUrl}",
+         "vue-router": "${vueRouterCdnUrl}",
+         "@vue/devtools-api": "data:text/javascript,export const setupDevtoolsPlugin=()=>{};export const on=()=>{};export const off=()=>{};export const once=()=>{};export const emit=()=>{};export const notifyComponentUpdate=()=>{};export const addTimelineLayer=()=>{};export const addCustomCommand=()=>{};export const addCustomTab=()=>{};"
+      }
+   }
+   </script>
    ${parentStylesheets}
    ${parentCSSVariables}
    <style>

package/src/components/IframePreview/iframePreviewApp.ts

@@ -57,8 +57,7 @@ export async function createIframeApp(container: HTMLElement): Promise<App> {
    function serializeForPostMessage(data: any): any {
       try {
          return JSON.parse(JSON.stringify(data));
-      } catch (error) {
-         console.warn("[iframe] Failed to serialize data for postMessage:", error);
+      } catch {
          return undefined;
       }
    }
@@ -69,7 +68,6 @@ export async function createIframeApp(container: HTMLElement): Promise<App> {
          // 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, "*");
@@ -193,15 +191,18 @@ export async function createIframeApp(container: HTMLElement): Promise<App> {
       },
    });
 
+   // Dynamic import helper - using Function constructor to create a truly dynamic import
+   // that Vite cannot analyze statically, preventing build-time resolution errors
+   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+   // @ts-ignore - modules may not be available in all consuming apps
+   const dynamicImport = new Function("modulePath", "return import(modulePath)");
+
    // 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");
+      const headModule = await dynamicImport("@vueuse/head");
       if (headModule && typeof headModule.createHead === "function") {
          const head = headModule.createHead();
          app.use(head);
@@ -211,6 +212,92 @@ export async function createIframeApp(container: HTMLElement): Promise<App> {
       // This is expected if the consuming app doesn't use @vueuse/head
    }
 
+   // Try to use vue-router - first try from CDN, but components use consuming app's vue-router
+   // The issue is that components from the consuming app use their own vue-router instance
+   // 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
+   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");
+      VueRouter = routerModule;
+   } catch {
+      // Fallback to CDN version
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      VueRouter = typeof window !== "undefined" ? (window as any).VueRouter : null;
+   }
+
+   if (VueRouter && typeof VueRouter.createRouter === "function") {
+      try {
+         // Create a minimal router instance
+         const router = VueRouter.createRouter({
+            history: VueRouter.createMemoryHistory(),
+            routes: [
+               {
+                  path: "/",
+                  component: { template: "<div></div>" },
+               },
+               {
+                  path: "/:pathMatch(.*)*",
+                  component: { template: "<div></div>" },
+               },
+            ],
+         });
+
+         // Store original resolve to call it first, then ensure matched array exists
+         const originalResolve = router.resolve.bind(router);
+         router.resolve = (to: any) => {
+            // Call original resolve to get proper route structure
+            const resolved = originalResolve(to);
+            // Ensure the resolved route has a matched array (useLink requires this)
+            if (resolved.route && (!resolved.route.matched || resolved.route.matched.length === 0)) {
+               resolved.route.matched = [
+                  {
+                     path: resolved.route.path || "/",
+                     name: resolved.route.name,
+                     meta: resolved.route.meta || {},
+                     components: {},
+                     children: [],
+                  },
+               ];
+            }
+            return resolved;
+         };
+
+         // Install router BEFORE mounting - this provides the router injection
+         // The app.use() call should handle the Symbol keys automatically
+         app.use(router);
+
+         // Wait for router to be ready before mounting
+         await router.isReady();
+
+         // Ensure currentRoute has proper structure with matched array
+         // currentRoute.value is readonly, so we navigate to ensure route is properly resolved
+         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+         // @ts-ignore
+         const currentRoute = router.currentRoute.value;
+         if (currentRoute && (!currentRoute.matched || currentRoute.matched.length === 0)) {
+            // Navigate to ensure route has proper matched array
+            await router.push("/");
+         }
+
+         routerInstalled = true;
+      } catch {
+         // Fall through to mount without router
+      }
+   }
+
+   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
    app.mount(container);
 

package/src/components/PageRenderer/PageRenderer.vue

@@ -1,7 +1,7 @@
 <template>
    <div id="page-viewport" class="page-renderer-wrapper relative">
       <template v-if="isReady">
-         <component :is="layoutComponent" v-if="withLayout && layoutComponent" v-bind="settings">
+         <component :is="layoutComponent" v-if="withLayout && layoutComponent" v-bind="settings" :blocks="blocks">
             <template #default>
                <div id="page-blocks-wrapper">
                   <div
@@ -54,7 +54,7 @@ const isReady = ref(false);
 
 // Get the layout component based on the layout prop
 const layoutComponent = computed(() => {
-   return getLayout(props.layout);
+   return getLayout(props.layout || props.settings?.layout);
 });
 
 // Get the margin class for the block
@@ -84,10 +84,14 @@ onBeforeMount(async () => {
 });
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 @use "../../assets/styles/mixins" as *;
 
-.block-wrapper {
-   @include block-margin-classes;
+// Styles are scoped to the component using the root class selector instead of Vue's scoped attribute
+// This ensures styles work correctly when the component is consumed from a library
+.page-renderer-wrapper {
+   .block-wrapper {
+      @include block-margin-classes;
+   }
 }
 </style>

package/src/util/theme-registry.ts

@@ -178,8 +178,8 @@ export async function initialiseLayoutRegistry(): Promise<void> {
    // Get the active theme
    const activeTheme = getActiveTheme();
 
-   // Use virtual module to load all layouts (scans all themes at build time)
-   // Then filter to only process layouts from the active theme
+   // Use virtual module to load all layouts (scans all theme directories at build time)
+   // Then filter to only process layouts from the active theme directory
    const { modules: layoutModules } = await import("vue-wswg-editor:layouts");
 
    // Filter to only layouts from the active theme