vue-wswg-editor 0.0.10 → 0.0.12

package/src/components/PageRenderer/PageRenderer.vue

@@ -1,7 +1,21 @@
 <template>
-   <component :is="layoutComponent" v-if="withLayout && layoutComponent" v-bind="settings">
-      <template #default>
-         <div id="page-blocks-wrapper">
+   <div id="page-viewport" class="page-renderer-wrapper relative">
+      <template v-if="isReady">
+         <component :is="layoutComponent" v-if="withLayout && layoutComponent" v-bind="settings">
+            <template #default>
+               <div id="page-blocks-wrapper">
+                  <div
+                     v-for="block in blocks"
+                     :key="block.id"
+                     class="block-wrapper"
+                     :class="{ [getMarginClass(block)]: true }"
+                  >
+                     <component :is="getBlock(block.type)" v-bind="block" :key="`block-${block.id}`" />
+                  </div>
+               </div>
+            </template>
+         </component>
+         <div v-else id="page-blocks-wrapper">
             <div
                v-for="block in blocks"
                :key="block.id"
@@ -10,21 +24,17 @@
             >
                <component :is="getBlock(block.type)" v-bind="block" :key="`block-${block.id}`" />
             </div>
+            <pre>{{ blocks }}</pre>
          </div>
       </template>
-   </component>
-   <div v-else id="page-blocks-wrapper">
-      <div v-for="block in blocks" :key="block.id" class="block-wrapper" :class="{ [getMarginClass(block)]: true }">
-         <component :is="getBlock(block.type)" v-bind="block" :key="`block-${block.id}`" />
-      </div>
    </div>
 </template>
 
 <script setup lang="ts">
-import { type Component, computed, withDefaults } from "vue";
+import { type Component, computed, withDefaults, onBeforeMount, ref } from "vue";
 import { generateNameVariations } from "../../util/helpers";
-import { blockModules } from "./blockModules";
-import { layoutModules } from "./layoutModules";
+import { getBlockModule, loadBlockModules } from "./blockModules";
+import { loadLayoutModules, getLayoutModule } from "./layoutModules";
 import type { Block } from "../../types/Block";
 
 const props = withDefaults(
@@ -37,28 +47,20 @@ const props = withDefaults(
    {
       layout: "default",
       settings: () => ({}),
-      withLayout: true,
+      withLayout: false,
    }
 );
 
+const isReady = ref(false);
+
 function getBlock(blockType: string): Component | undefined {
-   // Generate name variations and try to find a match in blockModules keys (file paths)
+   // Generate name variations and try to find a match
    const nameVariations = generateNameVariations(blockType);
 
-   // Iterate through all blockModules entries
-   for (const [filePath, module] of Object.entries(blockModules)) {
-      // Check if any variation matches the file path
-      for (const variation of nameVariations) {
-         // Check if the file path contains the variation followed by .vue
-         // e.g., "hero-section" matches "blocks/hero-section/hero-section.vue"
-         if (filePath.includes(`${variation}.vue`)) {
-            // Extract the default export (the Vue component)
-            const component = (module as any).default;
-            if (component) {
-               return component;
-            }
-         }
-      }
+   // Try each variation to find the block component
+   for (const variation of nameVariations) {
+      const module = getBlockModule(variation);
+      if (module) return module;
    }
 
    return undefined;
@@ -68,20 +70,10 @@ function getLayout(layoutName: string): Component | undefined {
    // Generate name variations and try to find a match in layoutModules keys (file paths)
    const nameVariations = generateNameVariations(layoutName);
 
-   // Iterate through all layoutModules entries
-   for (const [filePath, module] of Object.entries(layoutModules)) {
-      // Check if any variation matches the file path
-      for (const variation of nameVariations) {
-         // Check if the file path contains the variation followed by .vue
-         // e.g., "default" matches "layout/default.vue" or "layout/default/default.vue"
-         if (filePath.includes(`${variation}.vue`)) {
-            // Extract the default export (the Vue component)
-            const component = (module as any).default;
-            if (component) {
-               return component;
-            }
-         }
-      }
+   // Try each variation to find the block component
+   for (const variation of nameVariations) {
+      const module = getLayoutModule(variation);
+      if (module) return module;
    }
 
    return undefined;
@@ -107,6 +99,13 @@ function getMarginClass(block: Block): string {
 
    return [getClass(top, "top"), getClass(bottom, "bottom")].join(" ");
 }
+
+onBeforeMount(async () => {
+   isReady.value = false;
+   await loadBlockModules();
+   await loadLayoutModules();
+   isReady.value = true;
+});
 </script>
 
 <style scoped lang="scss">

package/src/components/PageRenderer/blockModules.ts

@@ -1,3 +1,32 @@
-// import.meta.glob must be at top level - it will be transformed by Vite plugin
-// This file is separate from the Vue component to ensure the transform hook can intercept it
-export const blockModules = import.meta.glob("@page-builder/blocks/**/*.vue", { eager: true });
+// Import from virtual module created by vue-wswg-editor vite plugin
+// Use lazy initialization to avoid circular dependency issues with createField
+// The import is deferred until first access, ensuring createField is available when blocks load
+import { type Component } from "vue";
+import { getModuleDefault } from "../../util/registry";
+import { markRaw } from "vue";
+let _blockModules: Record<string, Component> | null = null;
+
+export async function loadBlockModules(): Promise<Record<string, Component> | null> {
+   if (!_blockModules) {
+      _blockModules = {};
+      // Lazy load virtual modules to prevent initialization order issues
+      const { modules: discoveredModules } = await import("vue-wswg-editor:blocks");
+      for (const [, module] of Object.entries(discoveredModules)) {
+         let resolvedModule = module;
+         // If module is a function (lazy-loaded), call it to get the actual module
+         if (typeof module === "function") {
+            resolvedModule = await module();
+         }
+         const component = getModuleDefault(resolvedModule);
+         if (component && component.__name) {
+            const blockType = component.type || component.__name;
+            _blockModules[blockType] = markRaw(component);
+         }
+      }
+   }
+   return _blockModules;
+}
+
+export function getBlockModule(type: string): Component | undefined {
+   return _blockModules?.[type];
+}

package/src/components/PageRenderer/layoutModules.ts

@@ -1,3 +1,32 @@
-// import.meta.glob must be at top level - it will be transformed by Vite plugin
-// This file is separate from the Vue component to ensure the transform hook can intercept it
-export const layoutModules = import.meta.glob("@page-builder/layout/**/*.vue", { eager: true });
+// Import from virtual module created by vue-wswg-editor vite plugin
+// Use lazy initialization to avoid circular dependency issues with createField
+// The import is deferred until first access, ensuring createField is available when blocks load
+import { type Component } from "vue";
+import { getModuleDefault } from "../../util/registry";
+import { markRaw } from "vue";
+let _layoutModules: Record<string, Component> | null = null;
+
+export async function loadLayoutModules(): Promise<Record<string, Component> | null> {
+   if (!_layoutModules) {
+      _layoutModules = {};
+      // Lazy load virtual modules to prevent initialization order issues
+      const { modules: discoveredModules } = await import("vue-wswg-editor:layouts");
+      for (const [, module] of Object.entries(discoveredModules)) {
+         let resolvedModule = module;
+         // If module is a function (lazy-loaded), call it to get the actual module
+         if (typeof module === "function") {
+            resolvedModule = await module();
+         }
+         const component = getModuleDefault(resolvedModule);
+         if (component && component.__name) {
+            const layoutType = component.type || component.__name;
+            _layoutModules[layoutType] = markRaw(component);
+         }
+      }
+   }
+   return _layoutModules;
+}
+
+export function getLayoutModule(type: string): Component | undefined {
+   return _layoutModules?.[type];
+}

package/src/components/WswgJsonEditor/WswgJsonEditor.vue

@@ -27,11 +27,11 @@
                <BrowserNavigation v-if="showBrowserBar" class="browser-navigation-bar" :url="url" />
                <div
                   v-if="pageLayout"
-                  id="page-preview-viewport"
-                  class="overflow-hidden rounded-b-lg bg-white"
+                  id="page-viewport"
+                  class="relative overflow-hidden rounded-b-lg bg-white"
                   :class="{ 'rounded-t-lg': !showBrowserBar }"
                >
-                  <component :is="pageLayout">
+                  <component :is="pageLayout" v-bind="pageData?.[settingsKey]">
                      <template #default>
                         <!-- No blocks found -->
                         <EmptyState
@@ -41,7 +41,7 @@
                            @block-added="handleAddBlock"
                         />
                         <!-- Blocks found -->
-                        <div v-else id="page-blocks-wrapper">
+                        <div v-else id="page-blocks-wrapper" ref="pageBlocksWrapperRef">
                            <div v-for="(block, blockIndex) in pageData[blocksKey]" :key="block.id">
                               <BlockComponent
                                  :block="block"
@@ -57,7 +57,36 @@
                      </template>
                   </component>
                </div>
-               <p v-else>No layout component found</p>
+               <!-- No layout found -->
+               <div v-else class="rounded-b-lg bg-white px-5 py-12 md:py-20">
+                  <div class="mx-auto max-w-md pb-7 text-center">
+                     <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke-width="1.5"
+                        stroke="currentColor"
+                        class="mx-auto size-20 text-gray-400"
+                     >
+                        <path
+                           stroke-linecap="round"
+                           stroke-linejoin="round"
+                           d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+                        ></path>
+                     </svg>
+
+                     <h2 class="text-2xl font-bold text-gray-900">No layout found</h2>
+
+                     <p class="mt-4 text-pretty text-gray-700">
+                        Get started by creating your first layout. It only takes a few seconds.
+                     </p>
+
+                     <p class="mt-6 text-sm text-gray-700">
+                        <a href="#" class="underline hover:text-gray-900">Learn how</a> or
+                        <a href="#" class="underline hover:text-gray-900">view examples</a>
+                     </p>
+                  </div>
+               </div>
             </div>
          </div>
 
@@ -65,7 +94,11 @@
          <ResizeHandle @sidebar-width="handleSidebarWidth" />
 
          <!-- Sidebar -->
-         <div class="page-builder-sidebar-wrapper bg-white" :style="{ width: sidebarWidth + 'px' }">
+         <div
+            id="page-builder-sidebar"
+            class="page-builder-sidebar-wrapper bg-white"
+            :style="{ width: sidebarWidth + 'px' }"
+         >
             <PageBuilderSidebar
                v-model="pageData"
                v-model:activeBlock="activeBlock"
@@ -91,16 +124,16 @@ import {
    watch,
    type Component,
    onBeforeMount,
+   onMounted,
    nextTick,
    computed,
-   onMounted,
 } from "vue";
 import ResizeHandle from "../ResizeHandle/ResizeHandle.vue";
 import PageBuilderSidebar from "../PageBuilderSidebar/PageBuilderSidebar.vue";
 import BrowserNavigation from "../BrowserNavigation/BrowserNavigation.vue";
 import BlockComponent from "../BlockComponent/BlockComponent.vue";
 import EmptyState from "../EmptyState/EmptyState.vue";
-import { getBlockComponent, getLayouts } from "../../util/registry";
+import { getBlockComponent, getLayouts, initialiseRegistry } from "../../util/registry";
 import type { Block } from "../../types/Block";
 import Sortable from "sortablejs";
 
@@ -132,6 +165,9 @@ const activeBlock = ref<any>(null);
 const isSorting = ref(false);
 const hoveredBlockId = ref<string | null>(null);
 const sidebarWidth = ref(380); // Default sidebar width (380px)
+const sortableInstance = ref<InstanceType<typeof Sortable> | null>(null);
+const pageBlocksWrapperRef = ref<HTMLElement | null>(null);
+const isInitializingSortable = ref(false); // Prevent concurrent initialization
 
 // Model value for the JSON page data
 const pageData = defineModel<Record<string, any>>();
@@ -153,8 +189,8 @@ async function loadLayout(layoutName: string | undefined) {
       const availableLayouts = getLayouts();
       const layoutModule = availableLayouts[layout];
       pageLayout.value = layoutModule;
-      await nextTick();
-      initSortable();
+      // Don't initialize Sortable here - let the watcher handle it
+      // The watcher will react to pageLayout.value changing and check all conditions
    } catch (error) {
       // Layout doesn't exist, return undefined
       console.warn(`Layout "${layout}" not found in @page-builder/layout/`, error);
@@ -165,6 +201,7 @@ async function loadLayout(layoutName: string | undefined) {
 // Check if the page has settings
 const hasPageSettings = computed(() => {
    // Show page settings if there are multiple layouts to choose from
+   // Note: This computed might run before registry is initialized, so we check if layouts exist
    const layouts = getLayouts();
    if (Object.keys(layouts).length > 1) {
       return true;
@@ -187,7 +224,7 @@ function handleBlockClick(block: Block | null) {
    showAddBlockMenu.value = false;
 }
 
-function handleAddBlock(blockType: string, insertIndex?: number) {
+async function handleAddBlock(blockType: string, insertIndex?: number) {
    if (!pageData.value) return;
 
    // Ensure blocks array exists
@@ -233,10 +270,8 @@ function handleAddBlock(blockType: string, insertIndex?: number) {
 
    // finally, if this is an add from the EmptyState, we need to trigger a re-render and initialise the sortable
    if (isAddFromEmptyState) {
-      nextTick(() => {
-         // The component will re-render with the new block data
-         initSortable();
-      });
+      await nextTick();
+      await initSortable();
    }
 
    return newBlock;
@@ -278,50 +313,171 @@ watch(
    }
 );
 
-function initSortable() {
-   const sortableBlocksWrapper = document.getElementById("page-blocks-wrapper");
-   if (!sortableBlocksWrapper) return;
-   new Sortable(sortableBlocksWrapper, {
-      animation: 150,
-      ghostClass: "sortable-ghost",
-      chosenClass: "sortable-chosen",
-      dragClass: "sortable-drag",
-      group: "page-blocks",
-      onStart: () => {
-         isSorting.value = true;
-      },
-      onAdd: (event: any) => {
-         // This fires when an item is added from another list (drag from sidebar)
-         const { item: draggedElement, newIndex } = event;
-         const blockType = draggedElement.getAttribute("data-block-type");
-
-         if (blockType) {
-            // Use the consolidated handleAddBlock function
-            handleAddBlock(blockType, newIndex);
-
-            // Remove the cloned HTML element that SortableJS added
-            draggedElement.remove();
-
-            // Force Vue to re-render by triggering reactivity
-            nextTick(() => {
-               // The component will re-render with the new block data
-            });
-         }
-      },
-      onEnd: (event: any) => {
-         isSorting.value = false;
-         const { oldIndex, newIndex } = event;
-
-         // Only handle reordering if this wasn't an add operation (oldIndex will be null for adds)
-         if (oldIndex !== null && oldIndex !== newIndex) {
-            const movedBlock = pageData.value?.[props.blocksKey]?.splice(oldIndex, 1)[0];
-            pageData.value?.[props.blocksKey]?.splice(newIndex, 0, movedBlock);
-         }
-      },
-   });
+// Watch for the pageBlocksWrapperRef element to become available
+watch(
+   pageBlocksWrapperRef,
+   async (element) => {
+      if (element) {
+         // Element is now in the DOM, initialize Sortable
+         await nextTick(); // One more tick to ensure it's fully rendered
+         await initSortable();
+      }
+   },
+   { immediate: true }
+);
+
+// Also watch for both pageLayout and blocks array changes to trigger re-initialization
+// But only if Sortable isn't already initialized or currently sorting
+watch(
+   () => [pageLayout.value, pageData.value?.[props.blocksKey]?.length],
+   async ([layout, blockCount], [oldLayout, oldBlockCount]) => {
+      // Skip if already initializing or sorting
+      if (isInitializingSortable.value || isSorting.value) {
+         return;
+      }
+
+      // Only initialize Sortable if both layout exists and blocks exist
+      // And only if the layout changed or blocks were added/removed (not just reordered)
+      const layoutChanged = layout !== oldLayout;
+      const blocksChanged = blockCount !== oldBlockCount;
+      const shouldInitialize = layout && blockCount && blockCount > 0 && !props.loading && pageBlocksWrapperRef.value;
+
+      // Only re-initialize if layout changed or blocks were added/removed
+      // Don't re-initialize on reorder (same count, just different order)
+      if (shouldInitialize && (layoutChanged || blocksChanged || !sortableInstance.value)) {
+         // Wait for the dynamic component to fully mount and render
+         await nextTick();
+         await nextTick();
+         await initSortable();
+      }
+   },
+   { immediate: false }
+);
+
+async function initSortable() {
+   // Don't re-initialize if already sorting or initializing (prevents conflicts)
+   if (isSorting.value || isInitializingSortable.value) {
+      return;
+   }
+
+   // Check prerequisites before attempting to initialize
+   if (props.loading) {
+      console.warn("Cannot initialize Sortable: component is still loading");
+      return;
+   }
+
+   if (!pageLayout.value) {
+      console.warn("Cannot initialize Sortable: pageLayout is not set");
+      return;
+   }
+
+   const blockCount = pageData.value?.[props.blocksKey]?.length;
+   if (!blockCount || blockCount === 0) {
+      console.warn("Cannot initialize Sortable: no blocks exist");
+      return;
+   }
+
+   // Use the template ref first, fallback to getElementById
+   const sortableBlocksWrapper = pageBlocksWrapperRef.value || document.getElementById("page-blocks-wrapper");
+
+   if (!sortableBlocksWrapper) {
+      console.warn("page-blocks-wrapper element not found. Conditions:", {
+         loading: props.loading,
+         hasPageLayout: !!pageLayout.value,
+         blockCount: pageData.value?.[props.blocksKey]?.length,
+         hasRef: !!pageBlocksWrapperRef.value,
+         pagePreviewViewportExists: !!document.getElementById("page-viewport"),
+      });
+      return;
+   }
+
+   // If Sortable is already initialized and working, don't re-initialize
+   if (sortableInstance.value) {
+      // Check if the instance is still valid by checking if the element is still attached
+      const { el } = sortableInstance.value;
+      if (el && el.isConnected && el === sortableBlocksWrapper) {
+         // Sortable is already initialized and valid, no need to re-initialize
+         return;
+      }
+      // Instance exists but element is disconnected or different, destroy it
+      try {
+         sortableInstance.value.destroy();
+      } catch {
+         // Ignore errors during destruction
+      }
+      sortableInstance.value = null;
+   }
+
+   isInitializingSortable.value = true;
+   try {
+      sortableInstance.value = new Sortable(sortableBlocksWrapper, {
+         animation: 150,
+         ghostClass: "sortable-ghost",
+         chosenClass: "sortable-chosen",
+         dragClass: "sortable-drag",
+         group: "page-blocks",
+         forceFallback: false, // Use native HTML5 drag if available
+         fallbackOnBody: true, // Append fallback element to body
+         swapThreshold: 0.7, // Threshold for swap
+         onStart: () => {
+            isSorting.value = true;
+         },
+         onAdd: (event: any) => {
+            // This fires when an item is added from another list (drag from sidebar)
+            const { item: draggedElement, newIndex } = event;
+            const blockType = draggedElement.getAttribute("data-block-type");
+
+            if (blockType) {
+               // Use the consolidated handleAddBlock function
+               handleAddBlock(blockType, newIndex);
+
+               // Remove the cloned HTML element that SortableJS added
+               draggedElement.remove();
+
+               // Force Vue to re-render by triggering reactivity
+               nextTick(() => {
+                  // The component will re-render with the new block data
+               });
+            }
+         },
+         onEnd: async (event: any) => {
+            const { oldIndex, newIndex } = event;
+
+            // Only handle reordering if this wasn't an add operation (oldIndex will be null for adds)
+            if (
+               oldIndex !== null &&
+               oldIndex !== undefined &&
+               newIndex !== null &&
+               newIndex !== undefined &&
+               oldIndex !== newIndex &&
+               pageData.value?.[props.blocksKey]
+            ) {
+               // Wait for SortableJS to finish its DOM cleanup before we modify the array
+               await nextTick();
+
+               // Get the block data from the DOM element before Vue re-renders
+               const movedBlock = pageData.value[props.blocksKey][oldIndex];
+               if (movedBlock) {
+                  // Update the array - this will trigger Vue to re-render
+                  pageData.value[props.blocksKey].splice(oldIndex, 1);
+                  pageData.value[props.blocksKey].splice(newIndex, 0, movedBlock);
+               }
+            }
+
+            // Reset sorting state after a small delay to ensure DOM is stable
+            await nextTick();
+            isSorting.value = false;
+         },
+      });
+   } finally {
+      isInitializingSortable.value = false;
+   }
 }
 
-onBeforeMount(() => {
+onBeforeMount(async () => {
+   // Initialize the registry first
+   await initialiseRegistry();
+
    if (!pageData.value) {
       pageData.value = {};
    }
@@ -356,11 +512,22 @@ onBeforeMount(() => {
          pageData.value[props.blocksKey] = [];
       }
    }
-});
 
-onMounted(() => {
    loadLayout(pageData.value?.[props.settingsKey]?.layout);
 });
+
+// Initialize Sortable after component is mounted - watcher will handle the initialization
+// This is just a fallback in case the watcher didn't fire
+onMounted(async () => {
+   await nextTick();
+   await nextTick();
+   // Trigger the watcher by checking conditions
+   // The watcher will handle initialization if all conditions are met
+   if (pageData.value?.[props.blocksKey]?.length && pageLayout.value && !props.loading) {
+      await nextTick();
+      await initSortable();
+   }
+});
 </script>
 
 <style lang="scss">
@@ -368,6 +535,7 @@ $editor-background-color: #6a6a6a;
 
 .wswg-json-editor {
    --editor-height: calc(100vh);
+   --editor-bg-color: #6a6a6a;
 
    position: relative;
    width: 100%;
@@ -384,7 +552,7 @@ $editor-background-color: #6a6a6a;
    &-body {
       display: flex;
       width: 100%;
-      background-color: $editor-background-color;
+      background-color: var(--editor-bg-color, $editor-background-color);
    }
 
    &-preview {
@@ -401,7 +569,7 @@ $editor-background-color: #6a6a6a;
       .browser-navigation-bar {
          position: sticky;
          top: 1.5rem;
-         z-index: 12;
+         z-index: 30;
 
          &::before {
             position: absolute;
@@ -411,7 +579,7 @@ $editor-background-color: #6a6a6a;
             width: 100%;
             height: 100%;
             content: "";
-            background-color: $editor-background-color;
+            background-color: var(--editor-bg-color, $editor-background-color);
          }
       }
    }

package/src/index.ts

@@ -2,9 +2,8 @@
 // This ensures createField is available immediately without waiting for CSS or component imports
 export { createField } from "./util/fieldConfig";
 export type { EditorFieldConfig, ValidatorFunction } from "./util/fieldConfig";
-export { getLayouts } from "./util/registry";
-export { validateField, validateAllFields } from "./util/validation";
-export type { ValidationResult } from "./util/validation";
+export { getLayouts, initialiseRegistry } from "./util/registry";
+export { validateField, validateAllFields, type ValidationResult } from "./util/validation";
 
 // Export components (component exports don't cause side effects until used)
 export { default as WswgJsonEditor } from "./components/WswgJsonEditor/WswgJsonEditor.vue";

package/src/style.css

@@ -1,3 +1,10 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/****
+* Wrap Tailwind v3 utilities in a custom layer with lower priority
+* This allows Tailwind v4 utilities to override v3 utilities when both exist
+****/
+
+@layer vue-wswg-editor-library {
+   @tailwind base;
+   @tailwind components;
+   @tailwind utilities;
+}