@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/runtime/composables/defineBlokkli.js

@@ -5,13 +5,19 @@ import {
   INJECT_FIELD_LIST_TYPE,
   INJECT_REUSABLE_OPTIONS,
   INJECT_PROVIDER_BLOCKS,
-  INJECT_PROVIDER_CONTEXT
+  INJECT_PROVIDER_CONTEXT,
+  INJECT_FIELD_USES_PROXY,
+  INJECT_REUSABLE_UUID
 } from "../helpers/symbols.js";
 import { computed, inject } from "#imports";
 import { getRuntimeOptionValue } from "#blokkli/helpers/runtimeHelpers";
 import {
   OPTIONS
 } from "#blokkli-build/runtime-options";
+import {
+  BUNDLE_BLOKKLI_FRAGMENT,
+  BUNDLE_FROM_LIBRARY
+} from "#blokkli/constants";
 export function defineBlokkli(arg) {
   const [bundle, identifier] = arg.split("::", 2);
   const fieldListType = inject(
@@ -40,6 +46,7 @@ export function defineBlokkli(arg) {
     INJECT_REUSABLE_OPTIONS,
     null
   );
+  const reusableUuid = inject(INJECT_REUSABLE_UUID, null);
   const editContext = inject(INJECT_EDIT_CONTEXT, null);
   const provider = inject(
     INJECT_PROVIDER_CONTEXT,
@@ -48,13 +55,13 @@ export function defineBlokkli(arg) {
   const parentType = computed(() => item?.value.parentType);
   const isEditing = !!item?.value.isEditing;
   const options = computed(() => {
-    if (bundle === "from_library") {
+    if (bundle === BUNDLE_FROM_LIBRARY) {
       return {
         ...item?.value.options || {},
         ...editContext?.mutatedOptions[uuid] || {}
       };
     }
-    const optionKey = bundle === "blokkli_fragment" ? "fragment:" + item?.value.fragmentName + "__default" : identifier;
+    const optionKey = bundle === BUNDLE_BLOKKLI_FRAGMENT ? "fragment:" + item?.value.fragmentName : identifier;
     const runtimeOptionDefinitions = (editContext?.definitions.runtimeOptions.value || OPTIONS)[optionKey] || {};
     const result = Object.entries(runtimeOptionDefinitions).reduce((acc, [key, v]) => {
       const definition = v;
@@ -87,6 +94,12 @@ export function defineBlokkli(arg) {
     import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
     });
   }
+  if (editContext?.useBlockRegistration && editContext.dom && bundle !== BUNDLE_FROM_LIBRARY && bundle !== BUNDLE_BLOKKLI_FRAGMENT) {
+    const isProxyMode = inject(INJECT_FIELD_USES_PROXY, false);
+    if (!isProxyMode) {
+      editContext.useBlockRegistration(editContext.dom, reusableUuid ?? uuid);
+    }
+  }
   return {
     uuid,
     index,

package/dist/runtime/composables/defineBlokkliFeature.d.ts

@@ -15,14 +15,11 @@ type SettingType<S> = S extends {
 type SettingsTypes<S> = {
     [P in keyof S]: SettingType<S[P]>;
 };
-type PickRequiredMethods<T, Methods extends AdapterMethods[]> = {
-    [K in Methods[number]]: NonNullable<BlokkliAdapter<T>[K]>;
-};
-type CombinedAdapter<T, Methods extends AdapterMethods[]> = PickRequiredMethods<T, Methods> & BlokkliAdapter<T>;
-type DefineBlokkliFeature<T, Methods extends AdapterMethods[], F extends FeatureDefinition<Methods, ValidFeatureKey>> = {
-    adapter: CombinedAdapter<T, Methods>;
+type RequireAdapterMethods<T extends BlokkliAdapter<any>, Methods extends readonly AdapterMethods[]> = Omit<T, Methods[number]> & Required<Pick<T, Methods[number] & keyof T>>;
+type DefineBlokkliFeature<F extends FeatureDefinition<any, any>> = {
+    adapter: F['requiredAdapterMethods'] extends readonly (keyof BlokkliAdapter<any>)[] ? RequireAdapterMethods<BlokkliAdapter<any>, F['requiredAdapterMethods']> : BlokkliAdapter<any>;
     settings: ComputedRef<SettingsTypes<F['settings']>>;
     logger: DebugLogger;
 };
-export declare function defineBlokkliFeature<T, Methods extends AdapterMethods[], F extends FeatureDefinition<Methods, ValidFeatureKey>>(feature: F): DefineBlokkliFeature<T, Methods, F>;
+export declare function defineBlokkliFeature<const F extends FeatureDefinition<AdapterMethods[], ValidFeatureKey>>(feature: F): DefineBlokkliFeature<F>;
 export {};

package/dist/runtime/composables/defineBlokkliFragment.js

@@ -1,4 +1,7 @@
-import { INJECT_FRAGMENT_CONTEXT } from "../helpers/symbols.js";
+import {
+  INJECT_EDIT_CONTEXT,
+  INJECT_FRAGMENT_CONTEXT
+} from "../helpers/symbols.js";
 import { inject, computed } from "#imports";
 export function defineBlokkliFragment(_config) {
   const ctx = inject(
@@ -18,5 +21,9 @@ export function defineBlokkliFragment(_config) {
       provider: computed(() => null)
     };
   }
+  const editContext = inject(INJECT_EDIT_CONTEXT, null);
+  if (editContext?.dom && editContext.useBlockRegistration) {
+    editContext.useBlockRegistration(editContext.dom, ctx.uuid);
+  }
   return ctx;
 }

package/dist/runtime/composables/defineBlokkliProvider.d.ts

@@ -0,0 +1,11 @@
+import type { BlockDefinitionOptionsInput, DefineProviderContext, ProviderDefinitionInput } from '#blokkli/types';
+import type { GlobalOptionsKey } from '#blokkli-build/generated-types';
+type DefineBlokkliProviderProps = {
+    hostOptions?: any;
+} | {
+    blokkliProps: {
+        hostOptions?: any;
+    };
+};
+export declare function defineBlokkliProvider<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined = undefined>(props: DefineBlokkliProviderProps, _config: ProviderDefinitionInput<T, G>): DefineProviderContext<T, G>;
+export {};

package/dist/runtime/composables/defineBlokkliProvider.js

@@ -0,0 +1,46 @@
+import { computed, provide, useState } from "#imports";
+import { INJECT_PROVIDER_KEY } from "#blokkli/helpers/symbols";
+import {
+  OPTIONS
+} from "#blokkli-build/runtime-options";
+import { getRuntimeOptionValue } from "#blokkli/helpers/runtimeHelpers";
+export function defineBlokkliProvider(props, _config) {
+  const key = _config;
+  provide(INJECT_PROVIDER_KEY, key);
+  const overrideOptions = useState(
+    "options:" + key,
+    () => {
+      return null;
+    }
+  );
+  const definitionKey = key.split("::")[1] ?? "";
+  const runtimeOptionDefinitions = OPTIONS[definitionKey];
+  const options = computed(() => {
+    if (!runtimeOptionDefinitions) {
+      return {};
+    }
+    const hostOptionsCurrent = ("blokkliProps" in props ? props.blokkliProps.hostOptions : props.hostOptions) ?? {};
+    return Object.entries(runtimeOptionDefinitions).reduce((acc, [key2, v]) => {
+      const definition = v;
+      if (overrideOptions.value) {
+        if (overrideOptions.value[key2] !== void 0 && overrideOptions.value[key2] !== null) {
+          acc[key2] = getRuntimeOptionValue(
+            definition,
+            overrideOptions.value[key2]
+          );
+          return acc;
+        }
+      }
+      if (hostOptionsCurrent && hostOptionsCurrent[key2] !== void 0 && hostOptionsCurrent[key2] !== null) {
+        acc[key2] = getRuntimeOptionValue(definition, hostOptionsCurrent[key2]);
+        return acc;
+      }
+      acc[key2] = definition[1];
+      return acc;
+    }, {});
+  });
+  return {
+    // Must be cast because type of options is inferred automatically.
+    options
+  };
+}

package/dist/runtime/composables/useBlokkliHelper.d.ts

@@ -0,0 +1,19 @@
+import { type ComputedRef } from '#imports';
+import type { FieldListItemTyped } from '#blokkli-build/generated-types';
+type BundleWithoutLibrary = Exclude<FieldListItemTyped['bundle'], 'from_library'>;
+type CallbackResult = {
+    include: boolean;
+    continueChildren?: boolean;
+} | undefined | null;
+type UseBlokkliHelper = {
+    /**
+     * Iterates over the all blocks of the current field and returns a flat array
+     * of matching block bundles.
+     */
+    queryBlocks<K extends BundleWithoutLibrary>(bundles: K[], providedList?: FieldListItemTyped[]): ComputedRef<Extract<FieldListItemTyped, {
+        bundle: K;
+    }>[]>;
+    queryBlocks(bundles: (item: FieldListItemTyped) => CallbackResult, providedList?: FieldListItemTyped[]): ComputedRef<FieldListItemTyped[]>;
+};
+export declare function useBlokkliHelper(): UseBlokkliHelper;
+export {};

package/dist/runtime/composables/useBlokkliHelper.js

@@ -0,0 +1,95 @@
+import {
+  INJECT_EDIT_CONTEXT,
+  INJECT_MUTATED_FIELDS_MAP,
+  INJECT_PROVIDER_BLOCKS
+} from "#blokkli/helpers/symbols";
+import { inject, computed, watch, ref } from "#imports";
+import { FIELD_MAPPING } from "#blokkli-build/runtime-options";
+import { getActualBlock } from "#blokkli/helpers/runtimeHelpers";
+function walkBlocks(matches, callback, mutatedOptions, mutatedFieldsMap, list) {
+  if (!list) return;
+  for (let i = 0; i < list.length; i++) {
+    const item = list[i];
+    if (!item) continue;
+    if (!("bundle" in item) || !("uuid" in item)) continue;
+    const mutatedOptionsForBlock = mutatedOptions[item.uuid] ?? {};
+    const mappedItem = getActualBlock({
+      ...item,
+      options: { ...item.options, ...mutatedOptionsForBlock }
+    });
+    if (!mappedItem) continue;
+    const callbackResult = callback(mappedItem);
+    if (callbackResult === null || callbackResult === void 0) {
+      continue;
+    } else if (callbackResult.include) {
+      matches.push(mappedItem);
+    }
+    if (callbackResult.continueChildren === false) {
+      continue;
+    }
+    const nestedFieldMapping = FIELD_MAPPING[mappedItem.bundle];
+    if (!nestedFieldMapping) continue;
+    if (!("props" in mappedItem) || !mappedItem.props) continue;
+    const propNames = Object.keys(nestedFieldMapping);
+    for (const propName of propNames) {
+      const fieldName = nestedFieldMapping[propName];
+      const key = mappedItem.uuid + ":" + fieldName;
+      const value = mutatedFieldsMap ? mutatedFieldsMap[key]?.list : mappedItem.props?.[propName];
+      if (!value) continue;
+      const valueAsArray = Array.isArray(value) ? value : [value];
+      walkBlocks(
+        matches,
+        callback,
+        mutatedOptions,
+        mutatedFieldsMap,
+        valueAsArray
+      );
+    }
+  }
+}
+export function useBlokkliHelper() {
+  const rootBlocks = inject(
+    INJECT_PROVIDER_BLOCKS,
+    null
+  );
+  const editContext = inject(INJECT_EDIT_CONTEXT, null);
+  const mutatedOptions = ref({});
+  const mutatedFields = inject(
+    INJECT_MUTATED_FIELDS_MAP,
+    null
+  );
+  if (editContext?.mutatedOptions) {
+    watch(editContext.mutatedOptions, (options) => {
+      mutatedOptions.value = options;
+    });
+  }
+  function queryBlocks(bundlesOrCallback, providedList) {
+    const callback = typeof bundlesOrCallback === "function" ? bundlesOrCallback : (item) => {
+      if (bundlesOrCallback.includes(item.bundle)) {
+        return {
+          include: true,
+          continueChildren: true
+        };
+      }
+      return {
+        include: false,
+        continueChildren: true
+      };
+    };
+    return computed(() => {
+      const matches = [];
+      const list = providedList ? providedList : rootBlocks?.value;
+      if (!list) {
+        console.error(
+          "[bl\xF6kkli] - Failed to inject rootBlocks in queryBlocks. Automatic injection is only available when the useBlokkliHelper composable is called in a component inside <BlokkliField>. If this is not the case, pass the FieldListItemTyped array as the second argument to queryBlocks."
+        );
+        return [];
+      }
+      walkBlocks(matches, callback, mutatedOptions.value, mutatedFields, list);
+      return matches;
+    });
+  }
+  return {
+    queryBlocks
+  };
+}

package/dist/runtime/constants/index.d.ts

@@ -2,3 +2,6 @@ export declare const SETTINGS_GROUP: readonly ["appearance", "artboard", "behavi
 export declare const VIEWPORT: readonly ["mobile", "desktop"];
 export type SettingsGroup = (typeof SETTINGS_GROUP)[number];
 export type Viewport = (typeof VIEWPORT)[number];
+export declare const BUNDLE_FROM_LIBRARY = "from_library";
+export declare const BUNDLE_BLOKKLI_FRAGMENT = "blokkli_fragment";
+export declare const INTERNAL_BUNDLES: string[];

package/dist/runtime/constants/index.js

@@ -6,3 +6,6 @@ export const SETTINGS_GROUP = [
   "advanced"
 ];
 export const VIEWPORT = ["mobile", "desktop"];
+export const BUNDLE_FROM_LIBRARY = "from_library";
+export const BUNDLE_BLOKKLI_FRAGMENT = "blokkli_fragment";
+export const INTERNAL_BUNDLES = [BUNDLE_FROM_LIBRARY, BUNDLE_BLOKKLI_FRAGMENT];