@builder.io/sdk-qwik 0.0.16 → 0.0.17

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

@@ -1,35 +0,0 @@
-// GENERATED BY MITOSIS
-
-import { markPropsMutable } from "../../functions/mark-mutable.js";
-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 {...markPropsMutable(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

@@ -1,40 +0,0 @@
-// 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.repeatContext}
-    ></RenderBlock>
-  );
-});
-export default RenderRepeatedBlock;

package/src/components/render-blocks.jsx

@@ -1,93 +0,0 @@
-// 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

@@ -1,76 +0,0 @@
-// 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

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

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

@@ -1,368 +0,0 @@
-// 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 { markMutable } from "../../functions/mark-mutable.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) {
-  if (!props.content && !state.overrideContent) {
-    return undefined;
-  }
-
-  const mergedContent = {
-    ...props.content,
-    ...state.overrideContent,
-    data: {
-      ...props.content?.data,
-      ...props.data,
-      ...state.overrideContent?.data,
-    },
-  };
-  return mergedContent;
-};
-export const canTrackToUse = function canTrackToUse(props, state, elementRef) {
-  return props.canTrack || true;
-};
-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;
-          state.forceReRenderCount = state.forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
-        }
-
-        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)) {
-    track({
-      type: "click",
-      canTrack: canTrackToUse(props, state, elementRef),
-      contentId: useContent(props, state, elementRef).id,
-      orgId: props.apiKey,
-    });
-  }
-};
-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 = state.forceReRenderCount + 1;
-        _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)) {
-        track({
-          type: "impression",
-          canTrack: canTrackToUse(props, state, elementRef),
-          contentId: useContent(props, state, elementRef).id,
-          orgId: props.apiKey,
-        });
-      } // 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={markMutable(
-              useContent(props, state, elementRef)?.data?.blocks
-            )}
-            key={state.forceReRenderCount}
-          ></RenderBlocks>
-        </div>
-      ) : null}
-    </>
-  );
-});
-export default RenderContent;

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

@@ -1,26 +0,0 @@
-// GENERATED BY MITOSIS
-
-import { TARGET } from "../constants/target.js";
-import { Fragment, 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 = (props) => {
-  const state = {};
-  state.tagName = tagName(props, 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

@@ -1,51 +0,0 @@
-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.js";
-import { default as Columns } from "../blocks/columns/columns.jsx";
-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.jsx";
-import { componentInfo as imageComponentInfo } from "../blocks/image/component-info.js";
-import { default as Image } from "../blocks/image/image.jsx";
-import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info.js";
-import { default as Section } from "../blocks/section/section.jsx";
-import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info.js";
-import { default as Symbol } from "../blocks/symbol/symbol.jsx";
-import { componentInfo as textComponentInfo } from "../blocks/text/component-info.js";
-import { default as Text } from "../blocks/text/text.jsx";
-import { componentInfo as videoComponentInfo } from "../blocks/video/component-info.js";
-import { default as Video } from "../blocks/video/video.jsx";
-import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info.js";
-import { default as embed } from "../blocks/embed/embed.jsx";
-import { default as Img } from "../blocks/img/img.jsx";
-import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.js";
-const getDefaultRegisteredComponents = () => [
-  __spreadValues({ component: Columns }, columnsComponentInfo),
-  __spreadValues({ component: Image }, imageComponentInfo),
-  __spreadValues({ component: Img }, imgComponentInfo),
-  __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
-};