@blokkli/editor 1.3.4 → 1.4.0-alpha.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "blokkli",
   "configKey": "blokkli",
-  "version": "1.3.4",
+  "version": "1.4.0-alpha.0",
   "compatibility": {
     "nuxt": "^3.12.0"
   },

package/dist/module.mjs

@@ -7,7 +7,7 @@ import MagicString from 'magic-string';
 import { walk } from 'estree-walker-ts';
 import { BK_VISIBLE_LANGUAGES, BK_HIDDEN_GLOBALLY } from '../dist/runtime/helpers/symbols.js';
 
-const version = "1.3.4";
+const version = "1.4.0-alpha.0";
 
 function sortObjectKeys(obj) {
   if (Array.isArray(obj)) {
@@ -190,7 +190,7 @@ class BlockExtractor {
         icon,
         proxyComponent,
         diffComponent,
-        chunkName: extracted.definition.chunkName || "global",
+        chunkName: this.isBuild ? extracted.definition.chunkName || "global" : "global",
         componentName: "BlokkliComponent_" + extracted.definition.bundle + "_" + componentFileName,
         source: extracted.source,
         fileSource,
@@ -203,7 +203,7 @@ class BlockExtractor {
       this.fragmentDefinitions[filePath2] = {
         filePath: filePath2,
         definition: extracted.definition,
-        chunkName: extracted.definition.chunkName || "global",
+        chunkName: this.isBuild ? extracted.definition.chunkName || "global" : "global",
         componentName: "BlokkliFragmentComponent_" + extracted.definition.name,
         source: extracted.source,
         fileSource
@@ -399,7 +399,7 @@ export const getFragmentDefinition = (name: string): FragmentDefinitionInput<Rec
   generateDefaultGlobalOptions(globalOptions = {}) {
     const defaults = Object.entries(globalOptions).reduce(
       (acc, [key, option]) => {
-        if (option.default) {
+        if (option.default !== void 0 && option.default !== null) {
           acc[key] = {
             default: option.default,
             type: option.type
@@ -561,20 +561,28 @@ const fragmentChunkMapping: Record<string, string> = ${JSON.stringify(
       2
     )}
 
+function componentOrFunction(component: any) {
+  if (typeof component === 'object') {
+    return component
+  }
+
+  return defineAsyncComponent(() => component())
+}
+
 export function getBlokkliItemComponent(bundle: string, fieldListType?: string, parentBundle?: string): any {
   const forFieldListType = 'block_' + bundle + '__field_list_type_' + fieldListType
   if (global[forFieldListType]) {
-    return global[forFieldListType]
+    return componentOrFunction(global[forFieldListType])
   }
   if (parentBundle) {
     const forParentBundle = 'block_' + bundle + '__parent_block_' + parentBundle
     if (global[forParentBundle]) {
-      return global[forParentBundle]
+      return componentOrFunction(global[forParentBundle])
     }
   }
   const key = 'block_' + bundle
   if (global[key]) {
-    return global[key]
+    return componentOrFunction(global[key])
   }
   const chunkName = chunkMapping[key]
   if (chunkName) {
@@ -587,7 +595,7 @@ export function getBlokkliItemComponent(bundle: string, fieldListType?: string,
 export function getBlokkliFragmentComponent(name: string): any {
   const key = 'fragment_' + name
   if (globalFragments[key]) {
-    return globalFragments[key]
+    return componentOrFunction(globalFragments[key])
   }
   const chunkName = fragmentChunkMapping[key]
   if (chunkName) {
@@ -606,7 +614,11 @@ export function getBlokkliFragmentComponent(name: string): any {
       return v?.chunkName === chunkName;
     }).filter(falsy);
     const imports = definitions.map((v) => {
-      return `import ${v.componentName} from '${v.filePath}'`;
+      if (this.isBuild) {
+        return `import ${v.componentName} from '${v.filePath}'`;
+      } else {
+        return `const ${v.componentName} = () => import('${v.filePath}')`;
+      }
     });
     const map = definitions.reduce((acc, v) => {
       if ("bundle" in v.definition) {
@@ -7330,7 +7342,7 @@ export const forceDefaultLanguage: boolean = ${JSON.stringify(
     };
     await generateOptionsSchema();
     getChunkNames().forEach((chunkName) => {
-      if (chunkName !== "global") {
+      if (chunkName !== "global" && !nuxt.options.dev) {
         const template = addTemplate({
           write: true,
           filename: `blokkli/chunk-${chunkName}.ts`,
@@ -7348,7 +7360,9 @@ export const forceDefaultLanguage: boolean = ${JSON.stringify(
       write: true,
       filename: "blokkli/imports.ts",
       getContents: () => {
-        return blockExtractor.generateImportsTemplate(getChunkNames());
+        return blockExtractor.generateImportsTemplate(
+          nuxt.options.dev ? ["global"] : getChunkNames()
+        );
       },
       options: {
         blokkli: true

package/dist/runtime/components/Edit/BlockProxy/index.vue

@@ -34,7 +34,7 @@ import type {
   BlockBundleWithNested,
   ValidFieldListTypes,
 } from '#blokkli/generated-types'
-import { computed, useBlokkli, onMounted, onBeforeUnmount, ref } from '#imports'
+import { computed, useBlokkli, ref } from '#imports'
 import {
   getDefinition,
   getBlokkliItemProxyComponent,
@@ -83,7 +83,7 @@ const proxyBundle = computed(
   () => libraryItemProps.value?.block?.bundle || props.bundle,
 )
 
-const { dom, types, runtimeConfig } = useBlokkli()
+const { types, runtimeConfig } = useBlokkli()
 
 const root = ref<HTMLElement | null>(null)
 
@@ -125,18 +125,4 @@ const fieldLayout = computed<FieldConfig[][]>(() => {
     .forEntityTypeAndBundle(runtimeConfig.itemEntityType, proxyBundle.value)
     .map((config) => [config])
 })
-
-onMounted(() => {
-  dom.registerBlock(
-    props.uuid,
-    root.value,
-    props.bundle,
-    props.fieldListType,
-    props.parentType as BlockBundleWithNested,
-  )
-})
-
-onBeforeUnmount(() => {
-  dom.unregisterBlock(props.uuid)
-})
 </script>

package/dist/runtime/components/Edit/EditProvider.vue

@@ -37,7 +37,7 @@
   <DragInteractions v-if="!isInitializing" />
   <AnimationCanvas v-if="!isInitializing" />
   <SystemRequirements />
-  <slot :mutated-entity="mutatedEntity" />
+  <slot v-if="!isInitializing" :mutated-entity="mutatedEntity" />
 </template>
 
 <script lang="ts" setup generic="T">
@@ -176,15 +176,13 @@ onMounted(() => {
   if (props.isolate) {
     document.documentElement.classList.add('bk-isolate-provider')
   }
-  nextTick(() => {
-    isInitializing.value = false
-  })
 
   document.documentElement.addEventListener('touchmove', onTouchMove)
   document.documentElement.addEventListener('touchstart', onTouchStart)
   setRootClasses()
   baseLogger.log('EditProvider mounted')
   dom.init()
+  isInitializing.value = false
   broadcast.emit('editorLoaded', { uuid: props.entityUuid })
 })
 

package/dist/runtime/composables/defineBlokkli.js

@@ -4,16 +4,9 @@ import {
   INJECT_FIELD_LIST_BLOCKS,
   INJECT_FIELD_LIST_TYPE,
   INJECT_REUSABLE_OPTIONS,
-  INJECT_PROVIDER_BLOCKS,
-  INJECT_FIELD_USES_PROXY
+  INJECT_PROVIDER_BLOCKS
 } from "../helpers/symbols.js";
-import {
-  computed,
-  inject,
-  getCurrentInstance,
-  onMounted,
-  onBeforeUnmount
-} from "#imports";
+import { computed, inject } from "#imports";
 import { globalOptionsDefaults } from "#blokkli/default-global-options";
 import { getRuntimeOptionValue } from "#blokkli/helpers/runtimeHelpers";
 export function defineBlokkli(config) {
@@ -82,30 +75,6 @@ export function defineBlokkli(config) {
   });
   const parentType = computed(() => item?.value.parentType);
   const isEditing = !!item?.value.isEditing;
-  const fieldUsesProxy = inject(INJECT_FIELD_USES_PROXY, false);
-  onMounted(() => {
-    if (
-      // If the field uses proxy mode we don't want to register the block here.
-      fieldUsesProxy || !item?.value || !isEditing || !editContext || !editContext.dom || // Block is already registered by the from_library block.
-      fromLibraryOptions || // The defineBlokkliFragment composable registers the block itself.
-      config.bundle === "blokkli_fragment"
-    ) {
-      return;
-    }
-    const instance = getCurrentInstance();
-    editContext.dom.registerBlock(
-      uuid,
-      instance,
-      config.bundle,
-      fieldListType.value,
-      item.value.parentType
-    );
-  });
-  onBeforeUnmount(() => {
-    if (!fieldUsesProxy && isEditing && editContext && editContext.dom && uuid && config.bundle !== "blokkli_fragment") {
-      editContext.dom.unregisterBlock(uuid);
-    }
-  });
   return {
     uuid,
     index,

package/dist/runtime/composables/defineBlokkliFragment.js

@@ -1,22 +1,12 @@
-import {
-  INJECT_EDIT_CONTEXT,
-  INJECT_FRAGMENT_CONTEXT
-} from "../helpers/symbols.js";
+import { INJECT_FRAGMENT_CONTEXT } from "../helpers/symbols.js";
 import { getRuntimeOptionValue } from "../helpers/runtimeHelpers/index.js";
-import {
-  computed,
-  getCurrentInstance,
-  inject,
-  onBeforeUnmount,
-  onMounted
-} from "#imports";
+import { computed, inject } from "#imports";
 import { globalOptionsDefaults } from "#blokkli/default-global-options";
 export function defineBlokkliFragment(config) {
   const ctx = inject(
     INJECT_FRAGMENT_CONTEXT,
     null
   );
-  const editContext = inject(INJECT_EDIT_CONTEXT, null);
   const optionKeys = [
     ...Object.keys(config.options || {}),
     ...config.globalOptions || []
@@ -36,22 +26,5 @@ export function defineBlokkliFragment(config) {
     });
     return result;
   });
-  onMounted(() => {
-    if (editContext && editContext.dom && ctx) {
-      const instance = getCurrentInstance();
-      editContext.dom.registerBlock(
-        ctx.uuid,
-        instance,
-        "blokkli_fragment",
-        ctx.fieldListType.value,
-        ctx.parentType.value
-      );
-    }
-  });
-  onBeforeUnmount(() => {
-    if (editContext && ctx && ctx.uuid && editContext.dom) {
-      editContext.dom.unregisterBlock(ctx.uuid);
-    }
-  });
   return { ...ctx, options };
 }

package/dist/runtime/helpers/domProvider.d.ts

@@ -1,8 +1,6 @@
-import type { ComponentInternalInstance } from 'vue';
 import { type ComputedRef } from '#imports';
 import type { DraggableExistingBlock, BlokkliFieldElement, DraggableItem, DroppableEntityField, EntityContext, Rectangle } from '#blokkli/types';
 import type { UiProvider } from './uiProvider.js';
-import type { BlockBundleWithNested, ValidFieldListTypes } from '#blokkli/generated-types';
 import type { DebugProvider } from './debugProvider.js';
 type RegisteredFieldType = {
     entityType: string;
@@ -21,8 +19,6 @@ export type DomProvider = {
      */
     getDropElementMarkup(item: DraggableItem, checkSize?: boolean): string;
     findField(entityUuid: string, fieldName: string): BlokkliFieldElement | undefined;
-    registerBlock: (uuid: string, instance: ComponentInternalInstance | null | HTMLElement, bundle: string, fieldListType: ValidFieldListTypes, parentBlockBundle?: BlockBundleWithNested) => void;
-    unregisterBlock: (uuid: string) => void;
     registerField: (entity: EntityContext, fieldName: string, instance: HTMLElement) => void;
     updateFieldElement: (entity: EntityContext, fieldName: string, element: HTMLElement) => void;
     unregisterField: (entity: EntityContext, fieldName: string) => void;

package/dist/runtime/helpers/domProvider.js

@@ -43,16 +43,6 @@ const buildFieldElement = (element) => {
     };
   }
 };
-const getVisibleBlockElement = (instance) => {
-  if (instance instanceof HTMLElement) {
-    return instance;
-  }
-  if (instance.vnode.el instanceof HTMLElement) {
-    return instance.vnode.el;
-  } else if (instance?.vnode.el instanceof Text && instance?.vnode.el.nextElementSibling instanceof HTMLElement) {
-    return instance.vnode.el.nextElementSibling;
-  }
-};
 function rectWithTime(rect, time) {
   return {
     ...rect,
@@ -60,6 +50,7 @@ function rectWithTime(rect, time) {
   };
 }
 export default function(ui, debug) {
+  const artboardElement = ui.artboardElement();
   const logger = debug.createLogger("DomProvider");
   const mutationsReady = ref(true);
   const intersectionReady = ref(false);
@@ -136,7 +127,7 @@ export default function(ui, debug) {
       }
     }
   }
-  const observer = useDelayedIntersectionObserver(intersectionCallback);
+  const intersectionObserver = useDelayedIntersectionObserver(intersectionCallback);
   const registeredBlocks = reactive({});
   const registeredFields = reactive({});
   const registeredFieldTypes = computed(() => {
@@ -162,22 +153,22 @@ export default function(ui, debug) {
   const registerField = (entity, fieldName, element) => {
     const key = `${entity.uuid}:${fieldName}`;
     registeredFields[key] = { element, entity, fieldName };
-    observer.observe(element);
+    intersectionObserver.observe(element);
   };
   const updateFieldElement = (entity, fieldName, element) => {
     const key = `${entity.uuid}:${fieldName}`;
     const existingElement = registeredFields[key]?.element;
     if (existingElement) {
-      observer.unobserve(existingElement);
+      intersectionObserver.unobserve(existingElement);
     }
     registeredFields[key] = { entity, fieldName, element };
-    observer.observe(element);
+    intersectionObserver.observe(element);
   };
   const unregisterField = (entity, fieldName) => {
     const key = `${entity.uuid}:${fieldName}`;
     const el = registeredFields[key]?.element;
     if (el) {
-      observer.unobserve(el);
+      intersectionObserver.unobserve(el);
     }
     visibleFields.delete(key);
     registeredFields[key] = void 0;
@@ -196,45 +187,6 @@ export default function(ui, debug) {
     }
     return el;
   }
-  const registerBlock = (uuid, instance, bundle, fieldListType, parentBlockBundle) => {
-    if (registeredBlocks[uuid]) {
-      console.error(
-        "Trying to register block with already existing UUID: " + uuid
-      );
-    }
-    if (!instance) {
-      console.error(
-        `Failed to get component instance of block with UUID "${uuid}"`
-      );
-      return;
-    }
-    const el = getVisibleBlockElement(instance);
-    if (!el) {
-      console.error(
-        `Failed to locate block component element for UUID "${uuid}". Make sure the block renders at least one root element that is always visible.`
-      );
-      return;
-    }
-    const observableElement = getElementToObserve(
-      el,
-      bundle,
-      fieldListType,
-      parentBlockBundle
-    );
-    observer.observe(observableElement);
-    resizeObserver.observe(observableElement);
-    registeredBlocks[uuid] = el;
-  };
-  const unregisterBlock = (uuid) => {
-    const el = registeredBlocks[uuid];
-    if (el) {
-      observer.unobserve(el);
-      resizeObserver.unobserve(el);
-    }
-    registeredBlocks[uuid] = void 0;
-    delete blockRects[uuid];
-    visibleBlocks.delete(uuid);
-  };
   const findBlock = (uuid) => {
     const cached = draggableBlockCache[uuid];
     if (cached) {
@@ -399,26 +351,72 @@ export default function(ui, debug) {
     logger.log("Refreshed all visible rects");
   });
   function init() {
-    observer.init();
+    intersectionObserver.init();
     intersectionReady.value = true;
     logger.log("IntersectionObserver initialized");
   }
   const dragElementUuidMap = /* @__PURE__ */ new WeakMap();
   const dragElementCache = /* @__PURE__ */ new Map();
-  const callback = function(mutationsList) {
+  function handleNodeAdded(node) {
+    if (!(node instanceof HTMLElement)) {
+      return;
+    }
+    if (node.dataset.uuid) {
+      const item = buildDraggableItem(node);
+      if (item && item.itemType === "existing") {
+        const observableElement = getElementToObserve(
+          node,
+          item.itemBundle,
+          item.hostFieldListType,
+          item.hostBundle
+        );
+        intersectionObserver.observe(observableElement);
+        resizeObserver.observe(observableElement);
+        registeredBlocks[item.uuid] = node;
+      }
+    } else if (node.dataset.fieldName && node.dataset.fieldKey && node.dataset.fieldCardinality) {
+      const blocks = node.querySelectorAll('[data-element-type="existing"]');
+      for (const block of blocks) {
+        handleNodeAdded(block);
+      }
+    }
+  }
+  function handleNodeRemoved(node) {
+    if (node instanceof HTMLElement && node.dataset.uuid) {
+      const uuid = node.dataset.uuid;
+      const el = registeredBlocks[uuid];
+      if (el !== node) {
+        return;
+      }
+      if (el) {
+        intersectionObserver.unobserve(el);
+        resizeObserver.unobserve(el);
+        dragElementUuidMap.delete(el);
+      }
+      dragElementUuidMap.delete(node);
+      dragElementCache.delete(uuid);
+      registeredBlocks[uuid] = void 0;
+      delete blockRects[uuid];
+      visibleBlocks.delete(uuid);
+    }
+  }
+  const mutationObserverCallback = function(mutationsList) {
     for (const mutation of mutationsList) {
       if (mutation.type === "childList") {
-        mutation.removedNodes.forEach((node) => {
-          const uuid = dragElementUuidMap.get(node);
-          dragElementUuidMap.delete(node);
-          if (uuid) {
-            dragElementCache.delete(uuid);
-          }
-        });
+        for (const node of mutation.removedNodes) {
+          handleNodeRemoved(node);
+        }
+        for (const node of mutation.addedNodes) {
+          handleNodeAdded(node);
+        }
       }
     }
   };
-  const mutationObserver = new MutationObserver(callback);
+  const mutationObserver = new MutationObserver(mutationObserverCallback);
+  mutationObserver.observe(artboardElement, {
+    subtree: true,
+    childList: true
+  });
   function getDragElement(block) {
     const cached = dragElementCache.get(block.uuid);
     if (cached && document.body.contains(cached)) {
@@ -444,8 +442,6 @@ export default function(ui, debug) {
     findClosestBlock,
     getDropElementMarkup,
     findField,
-    registerBlock,
-    unregisterBlock,
     getAllDroppableFields,
     findClosestEntityContext,
     getVisibleBlocks,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "1.3.4",
+  "version": "1.4.0-alpha.0",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",