@builder.io/sdk-vue 0.5.9 → 0.6.1-0

package/vue2/src/constants/builder-registered-components.ts

@@ -0,0 +1,62 @@
+import { default as Button } from '../blocks/button/button.vue';
+import { componentInfo as buttonComponentInfo } from '../blocks/button/component-info.js';
+import { default as Columns } from '../blocks/columns/columns.vue';
+import { componentInfo as columnsComponentInfo } from '../blocks/columns/component-info.js';
+import { componentInfo as fragmentComponentInfo } from '../blocks/fragment/component-info.js';
+import { default as Fragment } from '../blocks/fragment/fragment.vue';
+import { componentInfo as imageComponentInfo } from '../blocks/image/component-info.js';
+import { default as Image } from '../blocks/image/image.vue';
+import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
+import { default as Section } from '../blocks/section/section.vue';
+import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component-info.js';
+import { default as Symbol } from '../blocks/symbol/symbol.vue';
+import { componentInfo as textComponentInfo } from '../blocks/text/component-info.js';
+import { default as Text } from '../blocks/text/text.vue';
+import { componentInfo as videoComponentInfo } from '../blocks/video/component-info.js';
+import { default as Video } from '../blocks/video/video.vue';
+import type { RegisteredComponent } from '../context/types.js';
+import { componentInfo as embedComponentInfo } from '../blocks/embed/component-info.js';
+import { default as embed } from '../blocks/embed/embed.vue';
+import { default as Img } from '../blocks/img/img.vue';
+import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.js';
+import { default as customCode } from '../blocks/custom-code/custom-code.vue';
+import { componentInfo as customCodeInfo } from '../blocks/custom-code/component-info.js';
+
+/**
+ * Returns a list of all registered components.
+ * NOTE: This needs to be a function to work around ESM circular dependencies.
+ */
+export const getDefaultRegisteredComponents: () => RegisteredComponent[] = () => [{
+  component: Button,
+  ...buttonComponentInfo
+}, {
+  component: Columns,
+  ...columnsComponentInfo
+}, {
+  component: customCode,
+  ...customCodeInfo
+}, {
+  component: embed,
+  ...embedComponentInfo
+}, {
+  component: Fragment,
+  ...fragmentComponentInfo
+}, {
+  component: Image,
+  ...imageComponentInfo
+}, {
+  component: Img,
+  ...imgComponentInfo
+}, {
+  component: Section,
+  ...sectionComponentInfo
+}, {
+  component: Symbol,
+  ...symbolComponentInfo
+}, {
+  component: Text,
+  ...textComponentInfo
+}, {
+  component: Video,
+  ...videoComponentInfo
+}]

package/vue2/src/constants/device-sizes.ts

@@ -0,0 +1,59 @@
+import { fastClone } from '../functions/fast-clone.js';
+export type SizeName = 'large' | 'medium' | 'small';
+interface Size {
+  min: number;
+  default: number;
+  max: number;
+}
+const SIZES: Record<SizeName, Size> = {
+  small: {
+    min: 320,
+    default: 321,
+    max: 640
+  },
+  medium: {
+    min: 641,
+    default: 642,
+    max: 991
+  },
+  large: {
+    min: 990,
+    default: 991,
+    max: 1200
+  }
+};
+export const getMaxWidthQueryForSize = (size: SizeName, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
+interface Breakpoints {
+  small?: number;
+  medium?: number;
+}
+export const getSizesForBreakpoints = ({
+  small,
+  medium
+}: Breakpoints) => {
+  const newSizes = fastClone(SIZES); // Note: this helps to get a deep clone of fields like small, medium etc
+
+  if (!small || !medium) {
+    return newSizes;
+  }
+  const smallMin = Math.floor(small / 2);
+  newSizes.small = {
+    max: small,
+    min: smallMin,
+    default: smallMin + 1
+  };
+  const mediumMin = newSizes.small.max + 1;
+  newSizes.medium = {
+    max: medium,
+    min: mediumMin,
+    default: mediumMin + 1
+  };
+  const largeMin = newSizes.medium.max + 1;
+  newSizes.large = {
+    max: 2000,
+    // TODO: decide upper limit
+    min: largeMin,
+    default: largeMin + 1
+  };
+  return newSizes;
+}

package/vue2/src/constants/sdk-version.ts

@@ -0,0 +1 @@
+export const SDK_VERSION = "0.6.1-0"

package/vue2/src/constants/target.ts

@@ -0,0 +1,4 @@
+type Target = import('../types/targets.js').Target;
+
+/** This file should be overriden for each framework. Ideally this would be implemented in Mitosis.  */
+export const TARGET = 'vue2' as Target;

package/vue2/src/context/builder.context.ts

@@ -0,0 +1,16 @@
+const key = Symbol();
+
+export default {
+  Builder: {
+    content: null,
+    context: {},
+    localState: undefined,
+    rootSetState() {},
+    rootState: {},
+    apiKey: null,
+    apiVersion: undefined,
+    componentInfos: {},
+    inheritedStyles: {},
+  },
+  key,
+};

package/vue2/src/context/components.context.ts

@@ -0,0 +1,6 @@
+const key = Symbol();
+
+export default {
+  Components: { registeredComponents: {} },
+  key,
+};

package/vue2/src/context/types.ts

@@ -0,0 +1,36 @@
+import type { BuilderContent } from '../types/builder-content.js';
+import type { ComponentInfo } from '../types/components.js';
+import type { Dictionary, Nullable } from '../types/typescript.js';
+import type { ApiVersion } from '../types/api-version.js';
+export type RegisteredComponent = ComponentInfo & {
+  component: any;
+};
+export type RegisteredComponents = Dictionary<RegisteredComponent>;
+export type BuilderRenderState = Record<string, unknown>;
+export type BuilderRenderContext = Record<string, unknown>;
+export interface BuilderContextInterface {
+  content: Nullable<BuilderContent>;
+  context: BuilderRenderContext;
+  /**
+   * The state of the application.
+   *
+   * NOTE: see `localState` below to understand how it is different from `rootState`.
+   */
+  rootState: BuilderRenderState;
+  /**
+   * Some frameworks have a `setState` function which needs to be invoked to notify
+   * the framework of state change. (other frameworks don't in which case it is `undefined')
+   */
+  rootSetState: ((rootState: BuilderRenderState) => void) | undefined;
+  /**
+   * The local state of the current component. This is different from `rootState` in that
+   * it can be a child state created by a repeater containing local state.
+   * The `rootState` is where all of the state mutations are actually stored.
+   */
+  localState: BuilderRenderState | undefined;
+  apiKey: string | null;
+  apiVersion: ApiVersion | undefined;
+  componentInfos: Dictionary<ComponentInfo>;
+  // Used to recursively store all CSS coming from a parent that would apply to a Text block
+  inheritedStyles: Record<string, unknown>;
+}

package/vue2/src/functions/apply-patch-with-mutation.ts

@@ -0,0 +1,61 @@
+export type Patch = {
+  path: string;
+  op: 'add' | 'remove' | 'replace';
+  value: any;
+};
+export const applyPatchWithMinimalMutationChain = <T extends object,>(obj: T, patch: {
+  path: string;
+  op: 'add' | 'remove' | 'replace';
+  value: any;
+}, preserveRoot = false): T => {
+  if (Object(obj) !== obj) {
+    return obj;
+  }
+  const {
+    path,
+    op,
+    value
+  } = patch;
+  const pathArr: string[] = path.split(/\//);
+  if (pathArr[0] === '') {
+    pathArr.shift();
+  }
+  const newObj = preserveRoot ? obj : {
+    ...obj
+  };
+  let objPart = (newObj as any);
+  for (let i = 0; i < pathArr.length; i++) {
+    const isLast = i === pathArr.length - 1;
+    const property = pathArr[i];
+    if (isLast) {
+      if (op === 'replace') {
+        objPart[property] = value;
+      } else if (op === 'add') {
+        const index = Number(property);
+        if (Array.isArray(objPart)) {
+          if (property === '-') {
+            objPart.push(value);
+          } else {
+            objPart.splice(index, 0, value);
+          }
+        } else {
+          objPart[property] = value;
+        }
+      } else if (op === 'remove') {
+        const index = Number(property);
+        if (Array.isArray(objPart)) {
+          objPart.splice(index, 1);
+        } else {
+          delete objPart[property];
+        }
+      }
+    } else {
+      const nextProperty = pathArr[i + 1];
+      const newPart = Object(objPart[property]) === objPart[property] ? objPart[property] : String(Number(nextProperty)) === nextProperty ? [] : {};
+      objPart = objPart[property] = Array.isArray(newPart) ? [...newPart] : {
+        ...newPart
+      };
+    }
+  }
+  return newObj;
+}

package/vue2/src/functions/camel-to-kebab-case.ts

@@ -0,0 +1 @@
+export const camelToKebabCase = (string: string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()

package/vue2/src/functions/deopt.ts

@@ -0,0 +1,6 @@
+/**
+ * Workaround until https://github.com/BuilderIO/qwik/issues/5017 is fixed.
+ */
+export function deoptSignal<T>(value: T): T {
+  return value;
+}

package/vue2/src/functions/evaluate/browser-runtime/browser.ts

@@ -0,0 +1,41 @@
+import type { BuilderRenderState } from '../../../context/types.js';
+import type { ExecutorArgs } from '../helpers.js';
+import { getFunctionArguments } from '../helpers.js';
+export const runInBrowser = ({
+  code,
+  builder,
+  context,
+  event,
+  localState,
+  rootSetState,
+  rootState
+}: ExecutorArgs) => {
+  const functionArgs = getFunctionArguments({
+    builder,
+    context,
+    event,
+    state: flattenState(rootState, localState, rootSetState)
+  });
+  return new Function(...functionArgs.map(([name]) => name), code)(...functionArgs.map(([, value]) => value));
+};
+export function flattenState(rootState: Record<string | symbol, any>, localState: Record<string | symbol, any> | undefined, rootSetState: ((rootState: BuilderRenderState) => void) | undefined): BuilderRenderState {
+  if (rootState === localState) {
+    throw new Error('rootState === localState');
+  }
+  return new Proxy(rootState, {
+    get: (_, prop) => {
+      if (localState && prop in localState) {
+        return localState[prop];
+      }
+      return rootState[(prop as string)];
+    },
+    set: (_, prop, value) => {
+      if (localState && prop in localState) {
+        throw new Error('Writing to local state is not allowed as it is read-only.');
+      }
+      rootState[(prop as string)] = value;
+      rootSetState?.(rootState);
+      return true;
+    }
+  });
+}

package/vue2/src/functions/evaluate/browser-runtime/index.ts

@@ -0,0 +1 @@
+export { runInBrowser as evaluator } from './browser.js'