@builder.io/sdk-solid 0.0.3 → 0.0.6

package/src/components/render-blocks.js

@@ -1,104 +0,0 @@
-import { template as _$template } from "solid-js/web";
-import { delegateEvents as _$delegateEvents } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
-import { effect as _$effect } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
-
-const _tmpl$ = /*#__PURE__*/_$template(`<div></div>`, 2);
-
-import { Show, For } from "solid-js";
-import { createMutable } from "solid-js/store";
-import { css } from "solid-styled-components";
-import { isEditing } from "../functions/is-editing";
-import RenderBlock from "./render-block";
-export default function RenderBlocks(props) {
-  const state = createMutable({
-    get className() {
-      return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
-    },
-
-    onClick() {
-      if (isEditing() && !props.blocks?.length) {
-        window.parent?.postMessage({
-          type: "builder.clickEmptyBlocks",
-          data: {
-            parentElementId: props.parent,
-            dataPath: props.path
-          }
-        }, "*");
-      }
-    },
-
-    onMouseEnter() {
-      if (isEditing() && !props.blocks?.length) {
-        window.parent?.postMessage({
-          type: "builder.hoverEmptyBlocks",
-          data: {
-            parentElementId: props.parent,
-            dataPath: props.path
-          }
-        }, "*");
-      }
-    }
-
-  });
-  return (() => {
-    const _el$ = _tmpl$.cloneNode(true);
-
-    _el$.addEventListener("mouseenter", event => state.onMouseEnter());
-
-    _el$.$$click = event => state.onClick();
-
-    _$insert(_el$, _$createComponent(Show, {
-      get when() {
-        return props.blocks;
-      },
-
-      get children() {
-        return _$createComponent(For, {
-          get each() {
-            return props.blocks;
-          },
-
-          children: (block, index) => _$createComponent(RenderBlock, {
-            get key() {
-              return block.id;
-            },
-
-            block: block
-          })
-        });
-      }
-
-    }));
-
-    _$effect(_p$ => {
-      const _v$ = state.className + " " + css({
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "stretch"
-      }),
-            _v$2 = props.path,
-            _v$3 = props.parent,
-            _v$4 = {
-        class: state.className
-      };
-
-      _v$ !== _p$._v$ && (_el$.className = _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && _$setAttribute(_el$, "builder-path", _p$._v$2 = _v$2);
-      _v$3 !== _p$._v$3 && _$setAttribute(_el$, "builder-parent-id", _p$._v$3 = _v$3);
-      _v$4 !== _p$._v$4 && _$setAttribute(_el$, "dataset", _p$._v$4 = _v$4);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined,
-      _v$3: undefined,
-      _v$4: undefined
-    });
-
-    return _el$;
-  })();
-}
-
-_$delegateEvents(["click"]);

package/src/components/render-content.js

@@ -1,314 +0,0 @@
-import { template as _$template } from "solid-js/web";
-import { delegateEvents as _$delegateEvents } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
-import { effect as _$effect } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
-
-const _tmpl$ = /*#__PURE__*/_$template(`<style></style>`, 2),
-      _tmpl$2 = /*#__PURE__*/_$template(`<div></div>`, 2);
-
-import { Show, onMount } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { createMutable } from "solid-js/store";
-import { isBrowser } from "../functions/is-browser";
-import BuilderContext from "../context/builder.context";
-import { track } from "../functions/track";
-import { isReactNative } from "../functions/is-react-native";
-import { isEditing } from "../functions/is-editing";
-import { isPreviewing } from "../functions/is-previewing";
-import { previewingModelName } from "../functions/previewing-model-name";
-import { getContent } from "../functions/get-content";
-import { convertSearchParamsToQueryObject, getBuilderSearchParams } from "../functions/get-builder-search-params";
-import RenderBlocks from "./render-blocks";
-import { evaluate } from "../functions/evaluate";
-import { getFetch } from "../functions/get-fetch";
-export default function RenderContent(props) {
-  const state = createMutable({
-    get useContent() {
-      const mergedContent = { ...props.content,
-        ...state.overrideContent,
-        data: { ...props.content?.data,
-          ...props.data,
-          ...state.overrideContent?.data
-        }
-      };
-      return mergedContent;
-    },
-
-    overrideContent: null,
-    update: 0,
-    overrideState: {},
-
-    get state() {
-      return { ...props.content?.data?.state,
-        ...props.data,
-        ...state.overrideState
-      };
-    },
-
-    get context() {
-      return {};
-    },
-
-    getCssFromFont(font, data) {
-      // 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;
-    },
-
-    getFontCss(data) {
-      // TODO: flag for this
-      // if (!this.builder.allowCustomFonts) {
-      //   return '';
-      // }
-      // TODO: separate internal data from external
-      return data?.customFonts?.map(font => this.getCssFromFont(font, data))?.join(" ") || "";
-    },
-
-    processMessage(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;
-            }
-        }
-      }
-    },
-
-    evaluateJsCode() {
-      // run any dynamic JS code attached to content
-      const jsCode = state.useContent?.data?.jsCode;
-
-      if (jsCode) {
-        evaluate({
-          code: jsCode,
-          context: state.context,
-          state: state.state
-        });
-      }
-    },
-
-    get httpReqsData() {
-      return {};
-    },
-
-    evalExpression(expression) {
-      return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
-        code: group,
-        context: state.context,
-        state: state.state
-      }));
-    },
-
-    handleRequest({
-      url,
-      key
-    }) {
-      const fetchAndSetState = async () => {
-        const response = await getFetch()(url);
-        const json = await response.json();
-        const newOverrideState = { ...state.overrideState,
-          [key]: json
-        };
-        state.overrideState = newOverrideState;
-      };
-
-      fetchAndSetState();
-    },
-
-    runHttpRequests() {
-      const requests = state.useContent?.data?.httpRequests ?? {};
-      Object.entries(requests).forEach(([key, url]) => {
-        if (url && (!state.httpReqsData[key] || isEditing())) {
-          const evaluatedUrl = state.evalExpression(url);
-          state.handleRequest({
-            url: evaluatedUrl,
-            key
-          });
-        }
-      });
-    },
-
-    emitStateUpdate() {
-      window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
-        detail: {
-          state: state.state,
-          ref: {
-            name: props.model
-          }
-        }
-      }));
-    }
-
-  });
-  onMount(() => {
-    if (isBrowser()) {
-      if (isEditing()) {
-        window.addEventListener("message", state.processMessage);
-        window.addEventListener("builder:component:stateChangeListenerActivated", state.emitStateUpdate);
-      }
-
-      if (state.useContent) {
-        track("impression", {
-          contentId: state.useContent.id
-        });
-      } // override normal content in preview mode
-
-
-      if (isPreviewing()) {
-        if (props.model && previewingModelName() === props.model) {
-          const currentUrl = new URL(location.href);
-          const previewApiKey = currentUrl.searchParams.get("apiKey");
-
-          if (previewApiKey) {
-            getContent({
-              model: props.model,
-              apiKey: previewApiKey,
-              options: getBuilderSearchParams(convertSearchParamsToQueryObject(currentUrl.searchParams))
-            }).then(content => {
-              if (content) {
-                state.overrideContent = content;
-              }
-            });
-          }
-        }
-      }
-
-      state.evaluateJsCode();
-      state.runHttpRequests();
-      state.emitStateUpdate();
-    }
-  });
-  return _$createComponent(Dynamic, {
-    value: {
-      get content() {
-        return state.useContent;
-      },
-
-      get state() {
-        return state.state;
-      },
-
-      get context() {
-        return state.context;
-      },
-
-      get apiKey() {
-        return props.apiKey;
-      }
-
-    },
-
-    get component() {
-      return BuilderContext.Provider;
-    },
-
-    get children() {
-      return _$createComponent(Show, {
-        get when() {
-          return state.useContent;
-        },
-
-        get children() {
-          const _el$ = _tmpl$2.cloneNode(true);
-
-          _el$.$$click = event => track("click", {
-            contentId: state.useContent.id
-          });
-
-          _$insert(_el$, _$createComponent(Show, {
-            get when() {
-              return _$memo(() => !!(state.useContent?.data?.cssCode || state.useContent?.data?.customFonts?.length), true)() && !isReactNative();
-            },
-
-            get children() {
-              const _el$2 = _tmpl$.cloneNode(true);
-
-              _$insert(_el$2, () => state.useContent.data.cssCode, null);
-
-              _$insert(_el$2, () => state.getFontCss(state.useContent.data), null);
-
-              return _el$2;
-            }
-
-          }), null);
-
-          _$insert(_el$, _$createComponent(RenderBlocks, {
-            get blocks() {
-              return state.useContent?.data?.blocks;
-            }
-
-          }), null);
-
-          _$effect(() => _$setAttribute(_el$, "data-builder-content-id", state.useContent?.id));
-
-          return _el$;
-        }
-
-      });
-    }
-
-  });
-}
-
-_$delegateEvents(["click"]);

package/src/functions/get-target.js

@@ -1,6 +0,0 @@
-function getTarget(_) {
-  return "reactNative";
-}
-export {
-  getTarget
-};

package/src/functions/is-react-native.js

@@ -1,6 +0,0 @@
-function isReactNative() {
-  return false;
-}
-export {
-  isReactNative
-};