@blokkli/editor 1.3.4 → 1.4.0-alpha.1

package/dist/module.mjs

@@ -2,12 +2,13 @@ import path, { basename, extname } from 'node:path';
 import fs, { promises, existsSync } from 'node:fs';
 import { defineNuxtModule, createResolver, resolveFiles, addTemplate, addComponent, addBuildPlugin, addImports, addPlugin, updateTemplates } from '@nuxt/kit';
 import { defu, createDefu } from 'defu';
+import { relative } from 'pathe';
 import { createUnplugin } from 'unplugin';
 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.1";
 
 function sortObjectKeys(obj) {
   if (Array.isArray(obj)) {
@@ -51,24 +52,9 @@ function estreeToObject(expression) {
   );
 }
 function buildRuntimeDefinition(definition) {
-  const runtimeDefinition = {
+  return {
     bundle: definition.bundle
   };
-  if (definition.options) {
-    runtimeDefinition.options = {};
-    Object.entries(definition.options).forEach(
-      ([optionKey, optionDefinition]) => {
-        runtimeDefinition.options[optionKey] = {
-          type: optionDefinition.type,
-          default: optionDefinition.default
-        };
-      }
-    );
-  }
-  if (definition.globalOptions) {
-    runtimeDefinition.globalOptions = definition.globalOptions;
-  }
-  return runtimeDefinition;
 }
 const DefinitionPlugin = (nuxt, composableName = "defineBlokkli") => createUnplugin(() => {
   return {
@@ -125,8 +111,12 @@ class BlockExtractor {
   isBuild = false;
   composableName;
   fragmentComposableName;
-  constructor(isBuild = false) {
+  buildDir;
+  imports;
+  constructor(isBuild = false, buildDir, imports) {
     this.isBuild = isBuild;
+    this.buildDir = buildDir;
+    this.imports = imports;
     this.composableName = "defineBlokkli";
     this.fragmentComposableName = "defineBlokkliFragment";
   }
@@ -190,7 +180,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 +193,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
@@ -279,45 +269,16 @@ class BlockExtractor {
       }
       return acc;
     }, {});
-    const buildContextComponents = (name) => {
-      const proxyComponents = Object.values(this.definitions).reduce((acc, v) => {
-        if (v?.[name]) {
-          acc[v.definition.bundle] = v[name];
-        }
-        return acc;
-      }, {});
-      const imports = Object.entries(proxyComponents).map(([bundle, proxyComponentPath]) => {
-        return `import ${name}_${bundle} from '${proxyComponentPath}'`;
-      }).join("\n");
-      const maps = Object.keys(proxyComponents).map((bundle) => {
-        return `'${bundle}': ${name}_${bundle}`;
-      }).join(",  \n");
-      return {
-        imports,
-        maps
-      };
-    };
-    const proxy = buildContextComponents("proxyComponent");
-    const diff = buildContextComponents("diffComponent");
     const allFragmentNames = Object.values(this.fragmentDefinitions).filter(falsy).map((v) => `'${v.definition.name}'`).join(" | ");
-    return `import type { GlobalOptionsKey, ValidFieldListTypes, BlockBundleWithNested } from './generated-types'
-import type { BlockDefinitionInput, BlockDefinitionOptionsInput, FragmentDefinitionInput } from '#blokkli/types'
+    return `
+import type { GlobalOptionsKey, ValidFieldListTypes, BlockBundleWithNested } from './generated-types'
+import type { BlockDefinitionInput, BlockDefinitionOptionsInput, FragmentDefinitionInput } from '${this.imports.TYPES}'
 export const globalOptions = ${JSON.stringify(globalOptions, null, 2)} as const
-${proxy.imports}
-${diff.imports}
 
 type DefinitionItem = BlockDefinitionInput<BlockDefinitionOptionsInput, GlobalOptionsKey[]>
 
 ${definitionDeclarations.join("\n")}
 
-const PROXY_COMPONENTS: Record<string, any> = {
-  ${proxy.maps}
-}
-
-const DIFF_COMPONENTS: Record<string, any> = {
-  ${diff.maps}
-}
-
 export const icons: Record<string, string> = ${JSON.stringify(icons)}
 
 export const definitionsMap: Record<string, DefinitionItem> = {
@@ -351,14 +312,6 @@ export function getDefinition(bundle: string, fieldListType: ValidFieldListTypes
   return definitionsMap[bundle]
 }
 
-export function getBlokkliItemProxyComponent(bundle: string): any {
-  return PROXY_COMPONENTS[bundle]
-}
-
-export function getBlokkliItemDiffComponent(bundle: string): any {
-  return DIFF_COMPONENTS[bundle]
-}
-
 /**
  * Get the definition of the default block component.
  */
@@ -366,6 +319,128 @@ export function getDefaultDefinition(bundle: string): BlockDefinitionInput<Recor
   return definitionsMap[bundle]
 }
 export const getFragmentDefinition = (name: string): FragmentDefinitionInput<Record<string, any>, GlobalOptionsKey[]>|undefined => fragmentDefinitionsMap[name]
+`;
+  }
+  /**
+   * Generate the template for the block item options used for runtime (e.g. not during editing).
+   */
+  generateRuntimeOptionsTemplate(globalOptions = {}) {
+    const bundles = Object.values(this.definitions).filter(falsy).reduce((acc, definition2) => {
+      if (definition2.definition.renderFor) {
+        return acc;
+      }
+      const bundle = definition2.definition.bundle;
+      const optionDefinitions = Object.entries(
+        definition2.definition.options || {}
+      );
+      const options = {};
+      if (definition2.definition.globalOptions) {
+        definition2.definition.globalOptions.forEach((name) => {
+          const option = globalOptions[name];
+          options[name] = [option.type, option.default];
+        });
+      }
+      optionDefinitions.forEach(([name, option]) => {
+        options[name] = [option.type, option.default];
+      });
+      if (Object.values(options).length) {
+        acc[bundle] = options;
+      }
+      return acc;
+    }, {});
+    function getOptionTypes(definition2) {
+      const definedOptions = definition2.options || {};
+      const blockGlobalOptions = definition2.globalOptions || [];
+      blockGlobalOptions.forEach((key) => {
+        if (globalOptions[key]) {
+          definedOptions[key] = globalOptions[key];
+        }
+      });
+      return Object.entries(definedOptions || {}).map(([key, option]) => {
+        if (option.type === "text") {
+          return `${key}: string`;
+        } else if (option.type === "checkbox") {
+          return `${key}: boolean`;
+        } else if (option.type === "checkboxes") {
+          const possibleValues = Object.keys(option.options).map((v) => `'${v}'`).join(" | ") || "string";
+          return `${key}: Array<${possibleValues}>`;
+        } else if (option.type === "radios") {
+          const possibleValues = Object.keys(option.options).map((v) => `'${v}'`).join(" | ") || "string";
+          return `${key}: ${possibleValues}`;
+        } else if (option.type === "color") {
+          return key + ": `#${string}`";
+        } else if (option.type === "range" || option.type === "number") {
+          return `${key}: number`;
+        }
+      });
+    }
+    const runtimeMappedOptionTypes = Object.values(this.definitions).filter(falsy).map((definition2) => {
+      if (definition2.definition.renderFor) {
+        return null;
+      }
+      const bundle = definition2.definition.bundle;
+      const options = getOptionTypes(definition2.definition).join("\n    ");
+      if (!options) {
+        return `  ${bundle}: {}`;
+      }
+      return `  ${bundle}: {
+    ${options}
+  }`;
+    }).filter(falsy).join(",\n");
+    return `
+import type { BlockOptionDefinition } from '${this.imports.TYPES_BLOKK_OPTIONS}'
+
+export type RuntimeBlockOptionArray = {
+  [T in BlockOptionDefinition as T['type']]: [T['type'], T['default']]
+}[BlockOptionDefinition['type']]
+
+export type RuntimeBlockOptions = {
+${runtimeMappedOptionTypes}
+}
+
+export const BLOCK_OPTIONS: Record<string, Record<string, RuntimeBlockOptionArray>> = ${JSON.stringify(bundles, null, 2)}
+`;
+  }
+  generateEditComponents() {
+    const buildContextComponents = (name) => {
+      const proxyComponents = Object.values(this.definitions).reduce((acc, v) => {
+        if (v?.[name]) {
+          acc[v.definition.bundle] = v[name];
+        }
+        return acc;
+      }, {});
+      const imports = Object.entries(proxyComponents).map(([bundle, proxyComponentPath]) => {
+        return `import ${name}_${bundle} from '${this.toBuildRelativePath(proxyComponentPath)}'`;
+      }).join("\n");
+      const maps = Object.keys(proxyComponents).map((bundle) => {
+        return `'${bundle}': ${name}_${bundle}`;
+      }).join(",  \n");
+      return {
+        imports,
+        maps
+      };
+    };
+    const proxy = buildContextComponents("proxyComponent");
+    const diff = buildContextComponents("diffComponent");
+    return `
+${proxy.imports}
+${diff.imports}
+
+const PROXY_COMPONENTS: Record<string, any> = {
+  ${proxy.maps}
+}
+
+const DIFF_COMPONENTS: Record<string, any> = {
+  ${diff.maps}
+}
+
+export function getBlokkliItemProxyComponent(bundle: string): any {
+  return PROXY_COMPONENTS[bundle]
+}
+
+export function getBlokkliItemDiffComponent(bundle: string): any {
+  return DIFF_COMPONENTS[bundle]
+}
 `;
   }
   /**
@@ -388,7 +463,8 @@ export const getFragmentDefinition = (name: string): FragmentDefinitionInput<Rec
   }
   getBundlesWithGlobalOptions(key) {
     return Object.values(this.definitions).map((definition2) => {
-      if (definition2?.definition.globalOptions?.includes(key)) {
+      const globalOptions = definition2?.definition.globalOptions;
+      if (definition2 && globalOptions && globalOptions.includes(key)) {
         return definition2.definition.bundle;
       }
     }).filter(falsy);
@@ -399,7 +475,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
@@ -409,7 +485,7 @@ export const getFragmentDefinition = (name: string): FragmentDefinitionInput<Rec
       },
       {}
     );
-    return `import type { BlockOptionDefinition } from '#blokkli/types/blokkOptions'
+    return `import type { BlockOptionDefinition } from '${this.imports.TYPES_BLOKK_OPTIONS}'
 
 type GlobalOptionsDefaults = {
   type: BlockOptionDefinition['type']
@@ -425,7 +501,7 @@ export const globalOptionsDefaults: Record<string, GlobalOptionsDefaults> = ${JS
       2
     )} as const`;
   }
-  generateTypesTemplate(globalOptions, chunkNames, fieldListTypes) {
+  generateTypesTemplate(globalOptions, chunkNames, fieldListTypes, getBundlePropsType) {
     const allDefintions = Object.values(
       this.definitions
     ).map((v) => v?.definition).filter(falsy);
@@ -444,12 +520,9 @@ export const globalOptionsDefaults: Record<string, GlobalOptionsDefaults> = ${JS
     const validBlockBundles = allDefintions.filter((v) => v.bundle !== "from_library").map((v) => {
       return `'${v.bundle}'`;
     }).join(" | ");
-    const possibleOptionTypes = Object.values(this.definitions).filter(falsy).filter((v) => v.definition.bundle !== "from_library").reduce((acc, v) => {
-      if (!acc[v.definition.bundle]) {
-        acc[v.definition.bundle] = [];
-      }
-      const definedOptions = v.definition.options;
-      const blockGlobalOptions = v.globalOptions || [];
+    function getOptionTypes(definition2) {
+      const definedOptions = definition2.options || {};
+      const blockGlobalOptions = definition2.globalOptions || [];
       blockGlobalOptions.forEach((key) => {
         if (globalOptions[key]) {
           definedOptions[key] = globalOptions[key];
@@ -461,33 +534,73 @@ export const globalOptionsDefaults: Record<string, GlobalOptionsDefaults> = ${JS
         } else if (option.type === "checkbox") {
           return `${key}: '1' | '0' | undefined`;
         } else if (option.type === "radios" || option.type === "checkboxes") {
-          const possibleValues = Object.keys(option.options).map((v2) => `'${v2}'`).join(" | ");
-          return `${key}: ${possibleValues} | undefined`;
+          return `${key}: string | undefined`;
+        } else if (option.type === "color") {
+          return `${key}: string | undefined`;
+        } else if (option.type === "range" || option.type === "number") {
+          return `${key}: number | string | undefined`;
         }
       }).join("\n    ");
-      acc[v.definition.bundle].push(
-        `{
- ${options}
-}`
-      );
-      return acc;
-    }, {});
-    const typedFieldListItems = Object.entries(possibleOptionTypes).map(
-      ([bundle, options]) => {
-        const typeName = `FieldListItem_${bundle}`;
-        const typeDefinition = `
-type ${typeName} = {
-  bundle: '${bundle}'
-  options: ${options.join(" | ")}
-}`;
+      return `{
+    ${options}
+  }`;
+    }
+    const propTypeImports = {};
+    const typedFieldListItems = [];
+    const definitions = Object.entries(this.definitions);
+    const mappedGetBundlePropsType = (bundle, definition2) => {
+      if (bundle === "from_library" || bundle === "blokkli_fragment") {
         return {
-          typeName,
-          typeDefinition
+          typeName: "Props",
+          from: definition2.filePath
         };
+      } else if (getBundlePropsType) {
+        return getBundlePropsType(bundle, definition2);
       }
-    );
+      return null;
+    };
+    for (let i = 0; i < definitions.length; i++) {
+      const [_, definition2] = definitions[i];
+      if (!definition2) {
+        continue;
+      }
+      if (definition2.definition.renderFor) {
+        continue;
+      }
+      const bundle = definition2.definition.bundle;
+      const options = getOptionTypes(definition2.definition);
+      const generatedTypeName = `FieldListItem_${bundle}`;
+      const lines = [`  bundle: '${bundle}'`, `options: ${options}`];
+      const bundlePropsType = mappedGetBundlePropsType(bundle, definition2);
+      if (bundlePropsType) {
+        const { typeName, from } = bundlePropsType;
+        if (!propTypeImports[from]) {
+          propTypeImports[from] = [];
+        }
+        propTypeImports[from].push({ bundle, typeName });
+        lines.push(`props: Bundle_${bundle}_Props`);
+      }
+      const typeDefinition = `
+type ${generatedTypeName} = {
+${lines.join("\n  ")}
+}`;
+      typedFieldListItems.push({
+        typeName: generatedTypeName,
+        typeDefinition
+      });
+    }
+    const propTypeImportStatements = Object.entries(propTypeImports).map(([from, items]) => {
+      const imports = items.map((v) => {
+        return `${v.typeName} as Bundle_${v.bundle}_Props`;
+      }).join(",\n  ");
+      const importPath = this.toBuildRelativePath(from);
+      return `import type {
+  ${imports}
+} from '${importPath}'`;
+    }).join("\n");
     return `
-import type { FieldListItem } from "#blokkli/types"
+${propTypeImportStatements}
+import type { FieldListItem } from "${this.imports.TYPES}"
 
 export type ValidFieldListTypes = ${validFieldListTypes}
 
@@ -503,7 +616,7 @@ export type ValidGlobalConfigKeys = Array<GlobalOptionsKey>
 
 ${typedFieldListItems.map((v) => v.typeDefinition).join("\n\n")}
 
-export type FieldListItemTyped = FieldListItem & (${typedFieldListItems.map((v) => v.typeName).join(" | ")})
+export type FieldListItemTyped = Omit<FieldListItem, 'props'> & (${typedFieldListItems.map((v) => v.typeName).join(" | ")})
 export type FieldListItemTypedArray = Array<FieldListItemTyped>
 `;
   }
@@ -520,7 +633,7 @@ export type FieldListItemTypedArray = Array<FieldListItemTyped>
    */
   generateImportsTemplate(chunkNames) {
     const chunkImports = chunkNames.filter((v) => v !== "global").map((chunkName) => {
-      return `${chunkName}: () => import('#blokkli/chunk-${chunkName}')`;
+      return `${chunkName}: () => import('./chunk-${chunkName}')`;
     });
     const nonGlobalChunkMapping = Object.values(this.definitions).reduce((acc, v) => {
       if (v && v.chunkName !== "global") {
@@ -561,20 +674,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 +708,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) {
@@ -598,6 +719,12 @@ export function getBlokkliFragmentComponent(name: string): any {
 }
 `;
   }
+  toBuildRelativePath(path2) {
+    if (!path2.startsWith("/")) {
+      return path2;
+    }
+    return relative(this.buildDir, path2);
+  }
   /**
    * Generate the template.
    */
@@ -606,7 +733,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 '${this.toBuildRelativePath(v.filePath)}'`;
+      } else {
+        return `const ${v.componentName} = () => import('${this.toBuildRelativePath(v.filePath)}')`;
+      }
     });
     const map = definitions.reduce((acc, v) => {
       if ("bundle" in v.definition) {
@@ -6978,6 +7109,34 @@ const module = defineNuxtModule({
     const srcResolver = createResolver(srcDir);
     const moduleDir = import.meta.url;
     const resolver = createResolver(moduleDir);
+    const buildResolver = createResolver(nuxt.options.buildDir);
+    const blokkliBuildDir = buildResolver.resolve("blokkli");
+    const IMPORTS = {
+      TYPES: relative(
+        blokkliBuildDir,
+        resolver.resolve("./runtime/types/index.ts")
+      ),
+      CONSTANTS: relative(
+        blokkliBuildDir,
+        resolver.resolve("./runtime/constants/index.ts")
+      ),
+      ADAPTER: relative(
+        blokkliBuildDir,
+        resolver.resolve("./runtime/adapter/index.ts")
+      ),
+      TYPES_THEME: relative(
+        blokkliBuildDir,
+        resolver.resolve("./runtime/types/theme.ts")
+      ),
+      TYPES_GENERATED_MODULE_TYPED: relative(
+        blokkliBuildDir,
+        resolver.resolve("./runtime/types/generatedModuleTypes.ts")
+      ),
+      TYPES_BLOKK_OPTIONS: relative(
+        blokkliBuildDir,
+        resolver.resolve("./runtime/types/blokkOptions.ts")
+      )
+    };
     const featureFolder = resolver.resolve("./runtime/components/Edit/Features");
     const featureExtractor = new Extractor(!nuxt.options.dev);
     const builtinFeatures = await resolveFiles(featureFolder, ["*/index.vue"], {
@@ -7013,7 +7172,7 @@ const module = defineNuxtModule({
             id: v.id,
             componentName: v.componentPath,
             importName,
-            importStatement: `import ${importName} from '${v.componentPath}'`,
+            importStatement: `import ${importName} from '${relative(blokkliBuildDir, v.componentPath)}'`,
             definition: v.definition
           };
         });
@@ -7038,8 +7197,8 @@ const module = defineNuxtModule({
 }`;
         }).join(",\n");
         return `${imports}
-import type { BlokkliAdapter } from '#blokkli/adapter'
-import type { Viewport } from '#blokkli/constants'
+import type { BlokkliAdapter } from '${IMPORTS.ADAPTER}'
+import type { Viewport } from '${IMPORTS.CONSTANTS}'
 type AdapterMethods = keyof BlokkliAdapter<any>
 
 export const availableFeaturesAtBuild = ${JSON.stringify(
@@ -7068,7 +7227,7 @@ ${featuresArray}
         blokkli: true
       }
     });
-    nuxt.options.alias["#blokkli-runtime/features"] = featureComponents.dst;
+    nuxt.options.alias["#blokkli-build/features"] = featureComponents.dst;
     addTemplate({
       write: true,
       filename: "blokkli/features.json",
@@ -7122,7 +7281,11 @@ ${featuresArray}
     const files = await resolveFiles(srcDir, importPattern, {
       followSymbolicLinks: false
     });
-    const blockExtractor = new BlockExtractor(!nuxt.options.dev);
+    const blockExtractor = new BlockExtractor(
+      !nuxt.options.dev,
+      blokkliBuildDir,
+      IMPORTS
+    );
     await blockExtractor.addFiles(files);
     const templateDefinitions = addTemplate({
       write: true,
@@ -7136,7 +7299,31 @@ ${featuresArray}
         blokkli: true
       }
     });
-    nuxt.options.alias["#blokkli/definitions"] = templateDefinitions.dst;
+    nuxt.options.alias["#blokkli-build/definitions"] = templateDefinitions.dst;
+    const templateRuntimeOptions = addTemplate({
+      write: true,
+      filename: "blokkli/runtime-options.ts",
+      getContents: () => {
+        return blockExtractor.generateRuntimeOptionsTemplate(
+          moduleOptions.globalOptions
+        );
+      },
+      options: {
+        blokkli: true
+      }
+    });
+    nuxt.options.alias["#blokkli-build/runtime-options"] = templateRuntimeOptions.dst;
+    const templateEditComponents = addTemplate({
+      write: true,
+      filename: "blokkli/edit-components.ts",
+      getContents: () => {
+        return blockExtractor.generateEditComponents();
+      },
+      options: {
+        blokkli: true
+      }
+    });
+    nuxt.options.alias["#blokkli-build/edit-components"] = templateEditComponents.dst;
     const templateTranslations = addTemplate({
       write: true,
       filename: "blokkli/translations.ts",
@@ -7155,14 +7342,14 @@ ${featuresArray}
         blokkli: true
       }
     });
-    nuxt.options.alias["#blokkli/translations"] = templateTranslations.dst;
+    nuxt.options.alias["#blokkli-build/translations"] = templateTranslations.dst;
     nuxt.options.runtimeConfig.public.blokkli = {
       itemEntityType: moduleOptions.itemEntityType || "",
       defaultLanguage: moduleOptions.defaultLanguage || "en"
     };
     const resolvedPath = "~/app/blokkli.editAdapter".replace(/^(~~|@@)/, nuxt.options.rootDir).replace(/^(~|@)/, nuxt.options.srcDir);
     const adapterTemplate = (() => {
-      const resolvedFilename = `blokkli.editAdapter.ts`;
+      const resolvedFilename = `blokkli/editAdapter.ts`;
       const maybeUserFile = fileExists(resolvedPath, ["ts"]);
       if (!maybeUserFile) {
         throw new Error(
@@ -7173,14 +7360,14 @@ ${featuresArray}
         filename: resolvedFilename,
         write: true,
         getContents: () => `
-        import type { BlokkliAdapterFactory } from '#blokkli/adapter'
-        import adapter from '${resolvedPath}'
+        import type { BlokkliAdapterFactory } from '${IMPORTS.ADAPTER}'
+        import adapter from '${relative(blokkliBuildDir, resolvedPath)}'
 
         export default adapter as BlokkliAdapterFactory<any>
         `
       });
     })();
-    nuxt.options.alias["#blokkli/compiled-edit-adapter"] = adapterTemplate.dst;
+    nuxt.options.alias["#blokkli-build/compiled-edit-adapter"] = adapterTemplate.dst;
     nuxt.options.build.transpile.push(resolver.resolve("runtime"));
     addComponent({
       filePath: resolver.resolve("./runtime/components/BlokkliField"),
@@ -7223,7 +7410,7 @@ ${featuresArray}
       from: resolver.resolve("./runtime/composables/useBlokkli"),
       as: "useBlokkli"
     });
-    nuxt.options.alias["#blokkli/styles"] = resolver.resolve(
+    nuxt.options.alias["#blokkli-build/styles"] = resolver.resolve(
       "./runtime/css/output.css"
     );
     const templateGeneratedTypes = addTemplate({
@@ -7233,14 +7420,15 @@ ${featuresArray}
         return blockExtractor.generateTypesTemplate(
           moduleOptions.globalOptions || {},
           getChunkNames(),
-          getFieldListTypes()
+          getFieldListTypes(),
+          moduleOptions.getBundlePropsType
         );
       },
       options: {
         blokkli: true
       }
     });
-    nuxt.options.alias["#blokkli/generated-types"] = templateGeneratedTypes.dst;
+    nuxt.options.alias["#blokkli-build/generated-types"] = templateGeneratedTypes.dst;
     const { themeCss, fullTheme, hasCustomTheme } = buildThemeData(
       moduleOptions.theme
     );
@@ -7254,14 +7442,14 @@ ${featuresArray}
         blokkli: true
       }
     });
-    nuxt.options.alias["#blokkli/theme"] = templateThemeCss.dst;
+    nuxt.options.alias["#blokkli-build/theme"] = templateThemeCss.dst;
     const templateConfig = addTemplate({
       write: true,
       filename: "blokkli/config.ts",
       getContents: () => {
         const settingsOverride = moduleOptions.settingsOverride || {};
-        return `import type { Theme } from '#blokkli/types/theme'
-import type { ModuleOptionsSettings } from '#blokkli/types/generatedModuleTypes'
+        return `import type { Theme } from '${IMPORTS.TYPES_THEME}'
+import type { ModuleOptionsSettings } from '${IMPORTS.TYPES_GENERATED_MODULE_TYPED}'
 
 export const hasCustomTheme = ${JSON.stringify(hasCustomTheme)}
 export const themes: Record<string, Theme> = ${JSON.stringify(themes, null, 2)}
@@ -7288,7 +7476,7 @@ export const forceDefaultLanguage: boolean = ${JSON.stringify(
         blokkli: true
       }
     });
-    nuxt.options.alias["#blokkli/config"] = templateConfig.dst;
+    nuxt.options.alias["#blokkli-build/config"] = templateConfig.dst;
     const templateDefaultGlobalOptions = addTemplate({
       write: true,
       filename: "blokkli/default-global-options.ts",
@@ -7301,7 +7489,7 @@ export const forceDefaultLanguage: boolean = ${JSON.stringify(
         blokkli: true
       }
     });
-    nuxt.options.alias["#blokkli/default-global-options"] = templateDefaultGlobalOptions.dst;
+    nuxt.options.alias["#blokkli-build/default-global-options"] = templateDefaultGlobalOptions.dst;
     let optionsSchemaTemplate = null;
     const generateOptionsSchema = async () => {
       const outputPath = moduleOptions.schemaOptionsPath;
@@ -7330,8 +7518,8 @@ export const forceDefaultLanguage: boolean = ${JSON.stringify(
     };
     await generateOptionsSchema();
     getChunkNames().forEach((chunkName) => {
-      if (chunkName !== "global") {
-        const template = addTemplate({
+      if (chunkName !== "global" && !nuxt.options.dev) {
+        addTemplate({
           write: true,
           filename: `blokkli/chunk-${chunkName}.ts`,
           getContents: () => {
@@ -7341,14 +7529,15 @@ export const forceDefaultLanguage: boolean = ${JSON.stringify(
             blokkli: true
           }
         });
-        nuxt.options.alias["#blokkli/chunk-" + chunkName] = template.dst;
       }
     });
     const templateImports = addTemplate({
       write: true,
       filename: "blokkli/imports.ts",
       getContents: () => {
-        return blockExtractor.generateImportsTemplate(getChunkNames());
+        return blockExtractor.generateImportsTemplate(
+          nuxt.options.dev ? ["global"] : getChunkNames()
+        );
       },
       options: {
         blokkli: true
@@ -7386,8 +7575,8 @@ export type BlokkliIcon = keyof typeof icons`;
         blokkli: true
       }
     });
-    nuxt.options.alias["#blokkli/icons"] = templateIcons.dst;
-    nuxt.options.alias["#blokkli/imports"] = templateImports.dst;
+    nuxt.options.alias["#blokkli-build/icons"] = templateIcons.dst;
+    nuxt.options.alias["#blokkli-build/imports"] = templateImports.dst;
     nuxt.options.alias["#blokkli/types"] = resolver.resolve("runtime/types");
     nuxt.options.alias["#blokkli/constants"] = resolver.resolve("runtime/constants");
     nuxt.options.alias["#blokkli/plugins"] = resolver.resolve(
@@ -7398,6 +7587,9 @@ export type BlokkliIcon = keyof typeof icons`;
     );
     nuxt.options.alias["#blokkli/helpers"] = resolver.resolve("runtime/helpers");
     nuxt.options.alias["#blokkli/adapter"] = resolver.resolve("runtime/adapter");
+    nuxt.options.alias["#blokkli/runtime-helpers"] = resolver.resolve(
+      "runtime/helpers/runtimeHelpers"
+    );
     nuxt.hook("nitro:config", (nitroConfig) => {
       nitroConfig.publicAssets ||= [];
       nitroConfig.publicAssets.push({