@blokkli/editor 1.3.3 → 1.4.0-alpha.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "blokkli",
   "configKey": "blokkli",
-  "version": "1.3.3",
+  "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.3";
+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) {
@@ -6999,7 +7011,10 @@ const module = defineNuxtModule({
         moduleOptions.alterFeatures(featuresContext)
       );
     }
-    const allFeatureIds = extractedFeatures.map((v) => v.id);
+    const allFeatureIds = [
+      ...extractedFeatures.map((v) => v.id),
+      ...featuresContext.features.map((v) => v.id)
+    ].filter(onlyUnique);
     const featureComponents = addTemplate({
       write: true,
       filename: "blokkli/features.ts",
@@ -7327,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`,
@@ -7345,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/components/Edit/Features/Artboard/Overview/index.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Artboard, type ArtboardPlugin, overview } from 'artboard-deluxe'
+import { type Artboard, type PluginOverview, overview } from 'artboard-deluxe'
 import { onBeforeUnmount, onMounted, ref, useBlokkli, computed } from '#imports'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 
@@ -40,7 +40,7 @@ const overviewArtboardEl = ref<HTMLDivElement>()
 const overviewVisibleEl = ref<HTMLDivElement>()
 const canvas = ref<HTMLCanvasElement>()
 
-let pluginOverview: ArtboardPlugin | null = null
+let pluginOverview: PluginOverview | null = null
 
 function updateCanvas() {
   const ctx = canvas.value?.getContext('2d')

package/dist/runtime/components/Edit/Features/Artboard/Scrollbar/index.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Artboard, type ArtboardPlugin, scrollbar } from 'artboard-deluxe'
+import { type Artboard, type PluginScrollbar, scrollbar } from 'artboard-deluxe'
 import { onBeforeUnmount, onMounted, ref } from '#imports'
 
 const props = defineProps<{
@@ -22,7 +22,7 @@ const props = defineProps<{
 
 const el = ref<HTMLDivElement>()
 const thumb = ref<HTMLButtonElement>()
-let scrollbarPlugin: ArtboardPlugin | null = null
+let scrollbarPlugin: PluginScrollbar | null = null
 
 onMounted(() => {
   if (el.value && thumb.value) {

package/dist/runtime/components/Edit/Features/Artboard/index.vue

@@ -65,11 +65,11 @@ import {
   type ArtboardOptions,
   type Artboard,
   type PluginWheelOptions,
+  type PluginWheelFactory,
   touch,
   wheel,
   mouse,
   dom as domPlugin,
-  type PluginWheel,
 } from 'artboard-deluxe'
 const { settings } = defineBlokkliFeature({
   id: 'artboard',
@@ -155,7 +155,7 @@ const saveState = () => {
   }
 }
 
-let pluginWheel: PluginWheel | null = null
+let pluginWheel: PluginWheelFactory | null = null
 
 const wheelOptions = computed<PluginWheelOptions>(() => {
   return {

package/dist/runtime/components/Edit/Features/Settings/Dialog/index.vue

@@ -115,7 +115,7 @@ const groups = computed<GroupedSettings[]>(() => {
         }
 
         acc[group].settings.push({
-          featureId: feature.id,
+          featureId: feature.id as ValidFeatureKey,
           settingsKey,
           setting,
         })

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/composables/useBlokkli.js

@@ -1,5 +1,11 @@
 import { INJECT_APP } from "../helpers/symbols.js";
 import { inject } from "#imports";
 export function useBlokkli() {
-  return inject(INJECT_APP);
+  const app = inject(INJECT_APP);
+  if (!app) {
+    throw new Error(
+      "The useBlokkli composable was called while not in edit mode."
+    );
+  }
+  return app;
 }