@builder.io/sdk-qwik 0.0.8 → 0.0.11

package/src/components/render-block/render-component.jsx

@@ -0,0 +1,34 @@
+// GENERATED BY MITOSIS
+
+import BlockStyles from "./block-styles";
+import RenderBlock from "./render-block";
+import { Fragment, h } from "@builder.io/qwik";
+export const RenderComponent = (props) => {
+  return (
+    <>
+      {props.componentRef ? (
+        <props.componentRef {...props.componentOptions}>
+          {(props.blockChildren || []).map((child) => {
+            return (
+              <RenderBlock
+                key={"render-block-" + child.id}
+                block={child}
+                context={props.context}
+              ></RenderBlock>
+            );
+          })}
+          {(props.blockChildren || []).map((child) => {
+            return (
+              <BlockStyles
+                key={"block-style-" + child.id}
+                block={child}
+                context={props.context}
+              ></BlockStyles>
+            );
+          })}
+        </props.componentRef>
+      ) : null}
+    </>
+  );
+};
+export default RenderComponent;

package/src/components/render-block/render-repeated-block.jsx

@@ -0,0 +1,37 @@
+// GENERATED BY MITOSIS
+
+import BuilderContext from "../../context/builder.context";
+import RenderBlock from "./render-block";
+import {
+  Fragment,
+  component$,
+  h,
+  useContextProvider,
+  useStore,
+} from "@builder.io/qwik";
+export const RenderRepeatedBlock = component$((props) => {
+  useContextProvider(
+    BuilderContext,
+    useStore({
+      content: (() => {
+        return props.repeatContext.content;
+      })(),
+      state: (() => {
+        return props.repeatContext.state;
+      })(),
+      context: (() => {
+        return props.repeatContext.context;
+      })(),
+      apiKey: (() => {
+        return props.repeatContext.apiKey;
+      })(),
+      registeredComponents: (() => {
+        return props.repeatContext.registeredComponents;
+      })(),
+    })
+  );
+  return (
+    <RenderBlock block={props.block} context={props.context}></RenderBlock>
+  );
+});
+export default RenderRepeatedBlock;

package/src/components/render-blocks.jsx

@@ -0,0 +1,93 @@
+// GENERATED BY MITOSIS
+
+import BuilderContext from "../context/builder.context";
+import { isEditing } from "../functions/is-editing.js";
+import BlockStyles from "./render-block/block-styles";
+import RenderBlock from "./render-block/render-block";
+import {
+  Fragment,
+  component$,
+  h,
+  useContext,
+  useStylesScoped$,
+} from "@builder.io/qwik";
+export const className = function className(props, state, builderContext) {
+  return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+};
+export const onClick = function onClick(props, state, builderContext) {
+  if (isEditing() && !props.blocks?.length) {
+    window.parent?.postMessage(
+      {
+        type: "builder.clickEmptyBlocks",
+        data: {
+          parentElementId: props.parent,
+          dataPath: props.path,
+        },
+      },
+      "*"
+    );
+  }
+};
+export const onMouseEnter = function onMouseEnter(
+  props,
+  state,
+  builderContext
+) {
+  if (isEditing() && !props.blocks?.length) {
+    window.parent?.postMessage(
+      {
+        type: "builder.hoverEmptyBlocks",
+        data: {
+          parentElementId: props.parent,
+          dataPath: props.path,
+        },
+      },
+      "*"
+    );
+  }
+};
+export const RenderBlocks = component$((props) => {
+  useStylesScoped$(STYLES);
+  const builderContext = useContext(BuilderContext);
+  const state = {};
+  return (
+    <div
+      class={className(props, state, builderContext) + " div-RenderBlocks"}
+      builder-path={props.path}
+      builder-parent-id={props.parent}
+      dataSet={{
+        class: className(props, state, builderContext),
+      }}
+      onClick$={(event) => onClick(props, state, builderContext)}
+      onMouseEnter$={(event) => onMouseEnter(props, state, builderContext)}
+    >
+      {props.blocks
+        ? (props.blocks || []).map((block) => {
+            return (
+              <RenderBlock
+                key={"render-block-" + block.id}
+                block={block}
+                context={builderContext}
+              ></RenderBlock>
+            );
+          })
+        : null}
+      {props.blocks
+        ? (props.blocks || []).map((block) => {
+            return (
+              <BlockStyles
+                key={"block-style-" + block.id}
+                block={block}
+                context={builderContext}
+              ></BlockStyles>
+            );
+          })
+        : null}
+    </div>
+  );
+});
+export default RenderBlocks;
+export const STYLES = `.div-RenderBlocks { 
+display: flex;
+flex-direction: column;
+align-items: stretch; }`;

package/src/components/render-content/components/render-styles.jsx

@@ -0,0 +1,76 @@
+// GENERATED BY MITOSIS
+
+import RenderInlinedStyles from "../../render-inlined-styles";
+import { Fragment, component$, h } from "@builder.io/qwik";
+export const getCssFromFont = function getCssFromFont(props, state, font) {
+  // TODO: compute what font sizes are used and only load those.......
+  const family =
+    font.family +
+    (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+  const name = family.split(",")[0];
+  const url = font.fileUrl ?? font?.files?.regular;
+  let str = "";
+
+  if (url && family && name) {
+    str += `
+  @font-face {
+    font-family: "${family}";
+    src: local("${name}"), url('${url}') format('woff2');
+    font-display: fallback;
+    font-weight: 400;
+  }
+          `.trim();
+  }
+
+  if (font.files) {
+    for (const weight in font.files) {
+      const isNumber = String(Number(weight)) === weight;
+
+      if (!isNumber) {
+        continue;
+      } // TODO: maybe limit number loaded
+
+      const weightUrl = font.files[weight];
+
+      if (weightUrl && weightUrl !== url) {
+        str += `
+  @font-face {
+    font-family: "${family}";
+    src: url('${weightUrl}') format('woff2');
+    font-display: fallback;
+    font-weight: ${weight};
+  }
+            `.trim();
+      }
+    }
+  }
+
+  return str;
+};
+export const getFontCss = function getFontCss(props, state, { customFonts }) {
+  // TODO: flag for this
+  // if (!this.builder.allowCustomFonts) {
+  //   return '';
+  // }
+  // TODO: separate internal data from external
+  return (
+    customFonts?.map((font) => getCssFromFont(props, state, font))?.join(" ") ||
+    ""
+  );
+};
+export const injectedStyles = function injectedStyles(props, state) {
+  return `
+${props.cssCode || ""}
+${getFontCss(props, state, {
+  customFonts: props.customFonts,
+})}`;
+};
+export const RenderContentStyles = component$((props) => {
+  const state = {};
+  return (
+    <RenderInlinedStyles
+      styles={injectedStyles(props, state)}
+    ></RenderInlinedStyles>
+  );
+});
+export default RenderContentStyles;

package/src/components/render-content/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./render-content.jsx";
+export {
+  default2 as default
+};

package/src/components/render-content/render-content.jsx

@@ -0,0 +1,351 @@
+// GENERATED BY MITOSIS
+
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import { TARGET } from "../../constants/target.js";
+import BuilderContext from "../../context/builder.context";
+import { evaluate } from "../../functions/evaluate.js";
+import { getContent } from "../../functions/get-content/index.js";
+import { getFetch } from "../../functions/get-fetch.js";
+import { isBrowser } from "../../functions/is-browser.js";
+import { isEditing } from "../../functions/is-editing.js";
+import { isPreviewing } from "../../functions/is-previewing.js";
+import {
+  components,
+  createRegisterComponentMessage,
+} from "../../functions/register-component.js";
+import { track } from "../../functions/track.js";
+import {
+  registerInsertMenu,
+  setupBrowserForEditing,
+} from "../../scripts/init-editing.js";
+import RenderBlocks from "../render-blocks";
+import RenderContentStyles from "./components/render-styles";
+import {
+  Fragment,
+  _useMutableProps,
+  component$,
+  h,
+  useCleanup$,
+  useClientEffect$,
+  useContextProvider,
+  useRef,
+  useStore,
+  useWatch$,
+} from "@builder.io/qwik";
+export const useContent = function useContent(props, state, elementRef) {
+  const mergedContent = {
+    ...props.content,
+    ...state.overrideContent,
+    data: {
+      ...props.content?.data,
+      ...props.data,
+      ...state.overrideContent?.data,
+    },
+  };
+  return mergedContent;
+};
+export const contentState = function contentState(props, state, elementRef) {
+  return {
+    ...props.content?.data?.state,
+    ...props.data,
+    ...state.overrideState,
+  };
+};
+export const contextContext = function contextContext(
+  props,
+  state,
+  elementRef
+) {
+  return props.context || {};
+};
+export const allRegisteredComponents = function allRegisteredComponents(
+  props,
+  state,
+  elementRef
+) {
+  const allComponentsArray = [
+    ...getDefaultRegisteredComponents(), // While this `components` object is deprecated, we must maintain support for it.
+    // Since users are able to override our default components, we need to make sure that we do not break such
+    // existing usage.
+    // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+    // which is the new standard way of providing custom components, and must therefore take precedence.
+    ...components,
+    ...(props.customComponents || []),
+  ];
+  const allComponents = allComponentsArray.reduce(
+    (acc, curr) => ({ ...acc, [curr.name]: curr }),
+    {}
+  );
+  return allComponents;
+};
+export const processMessage = function processMessage(
+  props,
+  state,
+  elementRef,
+  event
+) {
+  const { data } = event;
+
+  if (data) {
+    switch (data.type) {
+      case "builder.contentUpdate": {
+        const messageContent = data.data;
+        const key =
+          messageContent.key ||
+          messageContent.alias ||
+          messageContent.entry ||
+          messageContent.modelName;
+        const contentData = messageContent.data;
+
+        if (key === props.model) {
+          state.overrideContent = contentData;
+        }
+
+        break;
+      }
+
+      case "builder.patchUpdates": {
+        // TODO
+        break;
+      }
+    }
+  }
+};
+export const evaluateJsCode = function evaluateJsCode(
+  props,
+  state,
+  elementRef
+) {
+  // run any dynamic JS code attached to content
+  const jsCode = useContent(props, state, elementRef)?.data?.jsCode;
+
+  if (jsCode) {
+    evaluate({
+      code: jsCode,
+      context: contextContext(props, state, elementRef),
+      state: contentState(props, state, elementRef),
+    });
+  }
+};
+export const httpReqsData = function httpReqsData(props, state, elementRef) {
+  return {};
+};
+export const onClick = function onClick(props, state, elementRef, _event) {
+  if (useContent(props, state, elementRef) && props.canTrack !== false) {
+    track("click", {
+      contentId: useContent(props, state, elementRef).id,
+    });
+  }
+};
+export const evalExpression = function evalExpression(
+  props,
+  state,
+  elementRef,
+  expression
+) {
+  return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
+    evaluate({
+      code: group,
+      context: contextContext(props, state, elementRef),
+      state: contentState(props, state, elementRef),
+    })
+  );
+};
+export const handleRequest = function handleRequest(
+  props,
+  state,
+  elementRef,
+  { url, key }
+) {
+  const fetchAndSetState = async () => {
+    const fetch = await getFetch();
+    const response = await fetch(url);
+    const json = await response.json();
+    const newOverrideState = { ...state.overrideState, [key]: json };
+    state.overrideState = newOverrideState;
+  };
+
+  fetchAndSetState();
+};
+export const runHttpRequests = function runHttpRequests(
+  props,
+  state,
+  elementRef
+) {
+  const requests =
+    useContent(props, state, elementRef)?.data?.httpRequests ?? {};
+  Object.entries(requests).forEach(([key, url]) => {
+    if (url && (!httpReqsData(props, state, elementRef)[key] || isEditing())) {
+      const evaluatedUrl = evalExpression(props, state, elementRef, url);
+      handleRequest(props, state, elementRef, {
+        url: evaluatedUrl,
+        key,
+      });
+    }
+  });
+};
+export const emitStateUpdate = function emitStateUpdate(
+  props,
+  state,
+  elementRef
+) {
+  if (isEditing()) {
+    window.dispatchEvent(
+      new CustomEvent("builder:component:stateChange", {
+        detail: {
+          state: contentState(props, state, elementRef),
+          ref: {
+            name: props.model,
+          },
+        },
+      })
+    );
+  }
+};
+export const shouldRenderContentStyles = function shouldRenderContentStyles(
+  props,
+  state,
+  elementRef
+) {
+  return Boolean(
+    (useContent(props, state, elementRef)?.data?.cssCode ||
+      useContent(props, state, elementRef)?.data?.customFonts?.length) &&
+      TARGET !== "reactNative"
+  );
+};
+export const RenderContent = component$((props) => {
+  const elementRef = useRef();
+  const state = useStore({
+    forceReRenderCount: 0,
+    overrideContent: null,
+    update: 0,
+    overrideState: {},
+  });
+  useContextProvider(
+    BuilderContext,
+    useStore({
+      content: (() => {
+        return useContent(props, state, elementRef);
+      })(),
+      state: (() => {
+        return contentState(props, state, elementRef);
+      })(),
+      context: (() => {
+        return contextContext(props, state, elementRef);
+      })(),
+      apiKey: (() => {
+        return props.apiKey;
+      })(),
+      registeredComponents: (() => {
+        return allRegisteredComponents(props, state, elementRef);
+      })(),
+    })
+  );
+  useClientEffect$(() => {
+    if (isBrowser()) {
+      if (isEditing()) {
+        state.forceReRenderCount++;
+        _useMutableProps(elementRef.current, true);
+
+        registerInsertMenu();
+        setupBrowserForEditing();
+        Object.values(
+          allRegisteredComponents(props, state, elementRef)
+        ).forEach((registeredComponent) => {
+          const message = createRegisterComponentMessage(registeredComponent);
+          window.parent?.postMessage(message, "*");
+        });
+        window.addEventListener(
+          "message",
+          processMessage.bind(null, props, state, elementRef)
+        );
+        window.addEventListener(
+          "builder:component:stateChangeListenerActivated",
+          emitStateUpdate.bind(null, props, state, elementRef)
+        );
+      }
+
+      if (useContent(props, state, elementRef) && props.canTrack !== false) {
+        track("impression", {
+          contentId: useContent(props, state, elementRef).id,
+        });
+      } // override normal content in preview mode
+
+      if (isPreviewing()) {
+        const searchParams = new URL(location.href).searchParams;
+
+        if (
+          props.model &&
+          searchParams.get("builder.preview") === props.model
+        ) {
+          const previewApiKey =
+            searchParams.get("apiKey") || searchParams.get("builder.space");
+
+          if (previewApiKey) {
+            getContent({
+              model: props.model,
+              apiKey: previewApiKey,
+            }).then((content) => {
+              if (content) {
+                state.overrideContent = content;
+              }
+            });
+          }
+        }
+      }
+
+      evaluateJsCode(props, state, elementRef);
+      runHttpRequests(props, state, elementRef);
+      emitStateUpdate(props, state, elementRef);
+    }
+  });
+  useWatch$(({ track }) => {
+    state.useContent?.data && track(state.useContent?.data, "jsCode");
+    evaluateJsCode(props, state, elementRef);
+  });
+  useWatch$(({ track }) => {
+    state.useContent?.data && track(state.useContent?.data, "httpRequests");
+    runHttpRequests(props, state, elementRef);
+  });
+  useWatch$(({ track }) => {
+    state && track(state, "contentState");
+    emitStateUpdate(props, state, elementRef);
+  });
+  useCleanup$(() => {
+    if (isBrowser()) {
+      window.removeEventListener(
+        "message",
+        processMessage.bind(null, props, state, elementRef)
+      );
+      window.removeEventListener(
+        "builder:component:stateChangeListenerActivated",
+        emitStateUpdate.bind(null, props, state, elementRef)
+      );
+    }
+  });
+  return (
+    <>
+      {useContent(props, state, elementRef) ? (
+        <div
+          ref={elementRef}
+          onClick$={(event) => onClick(props, state, elementRef, event)}
+          builder-content-id={useContent(props, state, elementRef)?.id}
+        >
+          {shouldRenderContentStyles(props, state, elementRef) ? (
+            <RenderContentStyles
+              cssCode={useContent(props, state, elementRef)?.data?.cssCode}
+              customFonts={
+                useContent(props, state, elementRef)?.data?.customFonts
+              }
+            ></RenderContentStyles>
+          ) : null}
+          <RenderBlocks
+            blocks={useContent(props, state, elementRef)?.data?.blocks}
+            key={state.forceReRenderCount}
+          ></RenderBlocks>
+        </div>
+      ) : null}
+    </>
+  );
+});
+export default RenderContent;

package/src/components/render-inlined-styles.jsx

@@ -0,0 +1,25 @@
+// GENERATED BY MITOSIS
+
+import { TARGET } from "../constants/target.js";
+import { Fragment, component$, h } from "@builder.io/qwik";
+export const injectedStyleScript = function injectedStyleScript(props, state) {
+  return `<${tagName(props, state)}>${props.styles}</${tagName(props, state)}>`;
+};
+export const tagName = function tagName(props, state) {
+  // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+  // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
+  return "sty" + "le";
+};
+export const RenderInlinedStyles = component$((props) => {
+  const state = {};
+  return (
+    <>
+      {TARGET === "svelte" ? (
+        <div dangerouslySetInnerHTML={injectedStyleScript(props, state)}></div>
+      ) : (
+        <state.tagName>{props.styles}</state.tagName>
+      )}
+    </>
+  );
+});
+export default RenderInlinedStyles;

package/src/constants/builder-registered-components.js

@@ -0,0 +1,48 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { default as Button } from "../blocks/button/button.jsx";
+import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info";
+import { default as Columns } from "../blocks/columns/columns.jsx";
+import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info";
+import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info";
+import { default as Fragment } from "../blocks/fragment/fragment.jsx";
+import { componentInfo as imageComponentInfo } from "../blocks/image/component-info";
+import { default as Image } from "../blocks/image/image.jsx";
+import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info";
+import { default as Section } from "../blocks/section/section.jsx";
+import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info";
+import { default as Symbol } from "../blocks/symbol/symbol.jsx";
+import { componentInfo as textComponentInfo } from "../blocks/text/component-info";
+import { default as Text } from "../blocks/text/text.jsx";
+import { componentInfo as videoComponentInfo } from "../blocks/video/component-info";
+import { default as Video } from "../blocks/video/video.jsx";
+import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info";
+import { default as embed } from "../blocks/embed/embed.jsx";
+const getDefaultRegisteredComponents = () => [
+  __spreadValues({ component: Columns }, columnsComponentInfo),
+  __spreadValues({ component: Image }, imageComponentInfo),
+  __spreadValues({ component: Text }, textComponentInfo),
+  __spreadValues({ component: Video }, videoComponentInfo),
+  __spreadValues({ component: Symbol }, symbolComponentInfo),
+  __spreadValues({ component: Button }, buttonComponentInfo),
+  __spreadValues({ component: Section }, sectionComponentInfo),
+  __spreadValues({ component: Fragment }, fragmentComponentInfo),
+  __spreadValues({ component: embed }, embedComponentInfo)
+];
+export {
+  getDefaultRegisteredComponents
+};

package/src/constants/device-sizes.js

@@ -0,0 +1,21 @@
+const SIZES = {
+  small: {
+    min: 320,
+    default: 321,
+    max: 640
+  },
+  medium: {
+    min: 641,
+    default: 642,
+    max: 991
+  },
+  large: {
+    min: 990,
+    default: 991,
+    max: 1200
+  }
+};
+const getMaxWidthQueryForSize = (size) => `@media (max-width: ${SIZES[size].max}px)`;
+export {
+  getMaxWidthQueryForSize
+};

package/src/constants/target.js

@@ -0,0 +1,4 @@
+const TARGET = "qwik";
+export {
+  TARGET
+};