@weaverse/react 1.0.52 → 1.0.54

package/dist/index.d.mts

@@ -0,0 +1,27 @@
+import * as _weaverse_core from '@weaverse/core';
+import { Weaverse, ElementCSS, WeaverseItemStore } from '@weaverse/core';
+export * from '@weaverse/core';
+import * as react from 'react';
+import react__default, { ReactElement, ReactNode } from 'react';
+
+declare let WeaverseContext: react.Context<Weaverse>;
+declare let WeaverseContextProvider: react.Provider<Weaverse>;
+declare let WeaverseContextConsumer: react.Consumer<Weaverse>;
+
+interface WeaverseElementProps extends Partial<ReactElement> {
+    css?: ElementCSS;
+    children?: ReactElement | ReactElement[] | ReactNode | ReactNode[];
+    className?: string;
+    ['data-wv-id']?: string;
+}
+type WeaverseRootPropsType = {
+    context: Weaverse;
+};
+type ItemComponentProps = {
+    instance: InstanceType<typeof WeaverseItemStore>;
+};
+
+declare let WeaverseRoot: react__default.MemoExoticComponent<({ context }: WeaverseRootPropsType) => react__default.JSX.Element | null>;
+declare let useWeaverse: () => _weaverse_core.Weaverse;
+
+export { ItemComponentProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, useWeaverse };

package/dist/index.js

@@ -107,6 +107,7 @@ function generateItemClassName(instance, stitchesInstance) {
 
 // src/renderer.tsx
 var WeaverseRoot = (0, import_react2.memo)(({ context }) => {
+  console.log("\u{1F4BF} Weaverse root", context);
   let [, setData] = (0, import_react2.useState)(context.data);
   let rootRef = (0, import_react2.useRef)();
   let renderRoot = () => setData({});
@@ -186,12 +187,12 @@ var ItemComponent = (0, import_react2.memo)(({ instance }) => {
   }
 });
 var useWeaverse = () => {
-  let context = (0, import_react2.useContext)(WeaverseContext);
-  return context;
+  let weaverse = (0, import_react2.useContext)(WeaverseContext);
+  return weaverse;
 };
 var ItemInstance = (0, import_react2.memo)(({ id }) => {
-  let context = useWeaverse();
-  let { itemInstances } = context;
+  let weaverse = useWeaverse();
+  let { itemInstances } = weaverse;
   let instance = itemInstances.get(id);
   if (!instance) {
     console.warn(`Item instance ${id} not found`);

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/context.ts","../src/renderer.tsx","../../../node_modules/clsx/dist/clsx.m.js","../src/utils/css.ts"],"sourcesContent":["export * from '@weaverse/core'\nexport * from './context'\nexport * from './renderer'\nexport * from './types'\n","import { type Weaverse } from '@weaverse/core'\nimport { createContext } from 'react'\n\nexport let WeaverseContext = createContext<Weaverse>({} as Weaverse)\nexport let WeaverseContextProvider = WeaverseContext.Provider\nexport let WeaverseContextConsumer = WeaverseContext.Consumer\n","/* eslint-disable react/no-children-prop */\nimport type { ElementData, WeaverseProjectDataType } from '@weaverse/core'\nimport { isBrowser } from '@weaverse/core'\nimport React, { memo, useContext, useEffect, useRef, useState } from 'react'\nimport { WeaverseContext, WeaverseContextProvider } from './context'\nimport type { ItemComponentProps, WeaverseRootPropsType } from './types'\nimport { generateItemClassName } from './utils/css'\nimport clsx from 'clsx'\n\nexport let WeaverseRoot = memo(({ context }: WeaverseRootPropsType) => {\n  let [, setData] = useState<WeaverseProjectDataType | unknown>(context.data)\n  let rootRef = useRef<HTMLElement>()\n  let renderRoot = () => setData({})\n\n  useEffect(() => {\n    context.subscribe(renderRoot)\n    context.contentRootElement = rootRef.current\n    return () => {\n      context.unsubscribe(renderRoot)\n    }\n  }, [])\n\n  let eventHandlers = context?.studioBridge?.eventHandlers || {}\n  let themeClass = context.stitchesInstance.theme.className\n\n  if (context.projectId) {\n    return (\n      <div\n        className={`weaverse-content-root ${themeClass}`}\n        {...eventHandlers}\n        ref={rootRef}\n        data-weaverse-project-id={context.projectId}\n      >\n        <WeaverseContextProvider value={context}>\n          <ItemInstance id={context.data.rootId || context.projectId} />\n        </WeaverseContextProvider>\n      </div>\n    )\n  }\n  return null\n})\n\nconst ItemComponent = memo(({ instance }: ItemComponentProps) => {\n  let context = useContext(WeaverseContext)\n  let { stitchesInstance, elementInstances, platformType } = context\n  let [data, setData] = useState<ElementData>(instance.data)\n  let {\n    id,\n    type,\n    childIds = [],\n    children = [],\n    parentId,\n    createdAt,\n    updatedAt,\n    deletedAt,\n    css,\n    ...rest\n  } = data\n\n  useEffect(() => {\n    let render = (data: ElementData) => setData({ ...data })\n    instance.subscribe(render)\n    if (isBrowser && !instance.ref.current) {\n      // Fallback `ref` if the element isn't created by `React.forwardRef`\n      Object.assign(instance.ref, {\n        current: document.querySelector(`[data-wv-id=\"${id}\"]`),\n      })\n    }\n    return () => instance.unsubscribe(render)\n  }, [])\n\n  let Element = elementInstances.get(type)\n\n  if (Element?.Component) {\n    let Component = Element.Component\n    if (Component.$$typeof === Symbol.for('react.forward_ref')) {\n      rest.ref = instance.ref\n    }\n    let renderChildren = children?.length\n      ? children.map((item: any) => <ItemInstance key={item.id} id={item.id} />)\n      : childIds.length\n      ? childIds.map((cid) => <ItemInstance key={cid} id={cid} />)\n      : null\n    return (\n      <Component\n        key={id}\n        data-wv-type={type}\n        data-wv-id={id}\n        className={clsx(\n          platformType !== 'shopify-hydrogen' &&\n            generateItemClassName(instance, stitchesInstance),\n          rest?.data?.className\n        )}\n        {...rest}\n        children={renderChildren}\n      />\n    )\n  } else {\n    console.log(`❌ Unknown element: ${type}`)\n    return null\n  }\n})\n\nexport let useWeaverse = () => {\n  let context = useContext(WeaverseContext)\n  return context\n}\n\nlet ItemInstance = memo(({ id }: { id: string | number }) => {\n  let context = useWeaverse()\n  let { itemInstances } = context\n  let instance = itemInstances.get(id)\n  if (!instance) {\n    console.warn(`Item instance ${id} not found`)\n    return <div style={{ display: 'none' }}>Item instance {id} not found</div>\n  }\n  return <ItemComponent key={id} instance={instance} />\n})\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f);else for(t in e)e[t]&&(n&&(n+=\" \"),n+=t);return n}export function clsx(){for(var e,t,f=0,n=\"\";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import type Stitches from '@stitches/react/types/stitches'\nimport type { ElementCSS, WeaverseItemStore } from '@weaverse/core'\nimport clsx from 'clsx'\nimport type { LinkHTMLAttributes } from 'react'\n\n// Make the css data formatted to correct order (desktop, tablet, mobile)\nfunction formatCSS(css: ElementCSS) {\n  return {\n    '@desktop': css['@desktop'],\n    '@mobile': css['@mobile'],\n  }\n}\n\nlet permanentClasses: Record<string, string> = {}\nexport function generateItemClassName(\n  instance: WeaverseItemStore,\n  stitchesInstance: Stitches\n) {\n  let { css, type, className: cls = '' } = instance.data\n  let className = ''\n  let permanentClass = ''\n  let perCss = instance.Element?.permanentCss\n  if (perCss) {\n    if (type in permanentClasses) {\n      permanentClass = permanentClasses[type]\n    } else {\n      // @ts-ignore\n      let { className: perCls } = stitchesInstance.css(perCss)()\n      Object.assign(permanentClasses, { [type]: perCls })\n      permanentClass = perCls\n    }\n  }\n  className = permanentClass\n  if (css) {\n    // let stitches create the style from css object and\n    // then return the classname, so we can use it in the render\n    let formattedCss = formatCSS(css)\n    let newStitchesClass = stitchesInstance.css(formattedCss)().className || ''\n    let { stitchesClass } = instance\n    let otherClass = (instance.ref.current?.className || '')\n      .replace(stitchesClass, '')\n      .replace(cls, '')\n      .replace(permanentClass, '')\n      .trim()\n    className = clsx(permanentClass, cls, newStitchesClass, otherClass)\n    instance.stitchesClass = newStitchesClass\n  }\n  return className\n}\n"],"mappings":"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","names":["import_react","React","data"]}
+{"version":3,"sources":["../src/index.ts","../src/context.ts","../src/renderer.tsx","../../../node_modules/clsx/dist/clsx.m.js","../src/utils/css.ts"],"sourcesContent":["export * from '@weaverse/core'\nexport * from './context'\nexport * from './renderer'\nexport * from './types'\n","import { type Weaverse } from '@weaverse/core'\nimport { createContext } from 'react'\n\nexport let WeaverseContext = createContext<Weaverse>({} as Weaverse)\nexport let WeaverseContextProvider = WeaverseContext.Provider\nexport let WeaverseContextConsumer = WeaverseContext.Consumer\n","/* eslint-disable react/no-children-prop */\nimport type { ElementData, WeaverseProjectDataType } from '@weaverse/core'\nimport { isBrowser } from '@weaverse/core'\nimport React, { memo, useContext, useEffect, useRef, useState } from 'react'\nimport { WeaverseContext, WeaverseContextProvider } from './context'\nimport type { ItemComponentProps, WeaverseRootPropsType } from './types'\nimport { generateItemClassName } from './utils/css'\nimport clsx from 'clsx'\n\nexport let WeaverseRoot = memo(({ context }: WeaverseRootPropsType) => {\n  console.log('💿 Weaverse root', context)\n  let [, setData] = useState<WeaverseProjectDataType | unknown>(context.data)\n  let rootRef = useRef<HTMLElement>()\n  let renderRoot = () => setData({})\n\n  useEffect(() => {\n    context.subscribe(renderRoot)\n    context.contentRootElement = rootRef.current\n    return () => {\n      context.unsubscribe(renderRoot)\n    }\n  }, [])\n\n  let eventHandlers = context?.studioBridge?.eventHandlers || {}\n  let themeClass = context.stitchesInstance.theme.className\n\n  if (context.projectId) {\n    return (\n      <div\n        className={`weaverse-content-root ${themeClass}`}\n        {...eventHandlers}\n        ref={rootRef}\n        data-weaverse-project-id={context.projectId}\n      >\n        <WeaverseContextProvider value={context}>\n          <ItemInstance id={context.data.rootId || context.projectId} />\n        </WeaverseContextProvider>\n      </div>\n    )\n  }\n  return null\n})\n\nconst ItemComponent = memo(({ instance }: ItemComponentProps) => {\n  let context = useContext(WeaverseContext)\n  let { stitchesInstance, elementInstances, platformType } = context\n  let [data, setData] = useState<ElementData>(instance.data)\n  let {\n    id,\n    type,\n    childIds = [],\n    children = [],\n    parentId,\n    createdAt,\n    updatedAt,\n    deletedAt,\n    css,\n    ...rest\n  } = data\n\n  useEffect(() => {\n    let render = (data: ElementData) => setData({ ...data })\n    instance.subscribe(render)\n    if (isBrowser && !instance.ref.current) {\n      // Fallback `ref` if the element isn't created by `React.forwardRef`\n      Object.assign(instance.ref, {\n        current: document.querySelector(`[data-wv-id=\"${id}\"]`),\n      })\n    }\n    return () => instance.unsubscribe(render)\n  }, [])\n\n  let Element = elementInstances.get(type)\n\n  if (Element?.Component) {\n    let Component = Element.Component\n    if (Component.$$typeof === Symbol.for('react.forward_ref')) {\n      rest.ref = instance.ref\n    }\n    let renderChildren = children?.length\n      ? children.map((item: any) => <ItemInstance key={item.id} id={item.id} />)\n      : childIds.length\n      ? childIds.map((cid) => <ItemInstance key={cid} id={cid} />)\n      : null\n    return (\n      <Component\n        key={id}\n        data-wv-type={type}\n        data-wv-id={id}\n        className={clsx(\n          platformType !== 'shopify-hydrogen' &&\n            generateItemClassName(instance, stitchesInstance),\n          rest?.data?.className\n        )}\n        {...rest}\n        children={renderChildren}\n      />\n    )\n  } else {\n    console.log(`❌ Unknown element: ${type}`)\n    return null\n  }\n})\n\nexport let useWeaverse = () => {\n  let weaverse = useContext(WeaverseContext)\n  return weaverse\n}\n\nlet ItemInstance = memo(({ id }: { id: string | number }) => {\n  let weaverse = useWeaverse()\n  let { itemInstances } = weaverse\n  let instance = itemInstances.get(id)\n  if (!instance) {\n    console.warn(`Item instance ${id} not found`)\n    return <div style={{ display: 'none' }}>Item instance {id} not found</div>\n  }\n  return <ItemComponent key={id} instance={instance} />\n})\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f);else for(t in e)e[t]&&(n&&(n+=\" \"),n+=t);return n}export function clsx(){for(var e,t,f=0,n=\"\";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import type Stitches from '@stitches/react/types/stitches'\nimport type { ElementCSS, WeaverseItemStore } from '@weaverse/core'\nimport clsx from 'clsx'\nimport type { LinkHTMLAttributes } from 'react'\n\n// Make the css data formatted to correct order (desktop, tablet, mobile)\nfunction formatCSS(css: ElementCSS) {\n  return {\n    '@desktop': css['@desktop'],\n    '@mobile': css['@mobile'],\n  }\n}\n\nlet permanentClasses: Record<string, string> = {}\nexport function generateItemClassName(\n  instance: WeaverseItemStore,\n  stitchesInstance: Stitches\n) {\n  let { css, type, className: cls = '' } = instance.data\n  let className = ''\n  let permanentClass = ''\n  let perCss = instance.Element?.permanentCss\n  if (perCss) {\n    if (type in permanentClasses) {\n      permanentClass = permanentClasses[type]\n    } else {\n      // @ts-ignore\n      let { className: perCls } = stitchesInstance.css(perCss)()\n      Object.assign(permanentClasses, { [type]: perCls })\n      permanentClass = perCls\n    }\n  }\n  className = permanentClass\n  if (css) {\n    // let stitches create the style from css object and\n    // then return the classname, so we can use it in the render\n    let formattedCss = formatCSS(css)\n    let newStitchesClass = stitchesInstance.css(formattedCss)().className || ''\n    let { stitchesClass } = instance\n    let otherClass = (instance.ref.current?.className || '')\n      .replace(stitchesClass, '')\n      .replace(cls, '')\n      .replace(permanentClass, '')\n      .trim()\n    className = clsx(permanentClass, cls, newStitchesClass, otherClass)\n    instance.stitchesClass = newStitchesClass\n  }\n  return className\n}\n"],"mappings":"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","names":["import_react","React","data"]}

package/dist/index.mjs

@@ -68,6 +68,7 @@ function generateItemClassName(instance, stitchesInstance) {
 
 // src/renderer.tsx
 var WeaverseRoot = memo(({ context }) => {
+  console.log("\u{1F4BF} Weaverse root", context);
   let [, setData] = useState(context.data);
   let rootRef = useRef();
   let renderRoot = () => setData({});
@@ -147,12 +148,12 @@ var ItemComponent = memo(({ instance }) => {
   }
 });
 var useWeaverse = () => {
-  let context = useContext(WeaverseContext);
-  return context;
+  let weaverse = useContext(WeaverseContext);
+  return weaverse;
 };
 var ItemInstance = memo(({ id }) => {
-  let context = useWeaverse();
-  let { itemInstances } = context;
+  let weaverse = useWeaverse();
+  let { itemInstances } = weaverse;
   let instance = itemInstances.get(id);
   if (!instance) {
     console.warn(`Item instance ${id} not found`);

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/context.ts","../src/renderer.tsx","../../../node_modules/clsx/dist/clsx.m.js","../src/utils/css.ts"],"sourcesContent":["export * from '@weaverse/core'\nexport * from './context'\nexport * from './renderer'\nexport * from './types'\n","import { type Weaverse } from '@weaverse/core'\nimport { createContext } from 'react'\n\nexport let WeaverseContext = createContext<Weaverse>({} as Weaverse)\nexport let WeaverseContextProvider = WeaverseContext.Provider\nexport let WeaverseContextConsumer = WeaverseContext.Consumer\n","/* eslint-disable react/no-children-prop */\nimport type { ElementData, WeaverseProjectDataType } from '@weaverse/core'\nimport { isBrowser } from '@weaverse/core'\nimport React, { memo, useContext, useEffect, useRef, useState } from 'react'\nimport { WeaverseContext, WeaverseContextProvider } from './context'\nimport type { ItemComponentProps, WeaverseRootPropsType } from './types'\nimport { generateItemClassName } from './utils/css'\nimport clsx from 'clsx'\n\nexport let WeaverseRoot = memo(({ context }: WeaverseRootPropsType) => {\n  let [, setData] = useState<WeaverseProjectDataType | unknown>(context.data)\n  let rootRef = useRef<HTMLElement>()\n  let renderRoot = () => setData({})\n\n  useEffect(() => {\n    context.subscribe(renderRoot)\n    context.contentRootElement = rootRef.current\n    return () => {\n      context.unsubscribe(renderRoot)\n    }\n  }, [])\n\n  let eventHandlers = context?.studioBridge?.eventHandlers || {}\n  let themeClass = context.stitchesInstance.theme.className\n\n  if (context.projectId) {\n    return (\n      <div\n        className={`weaverse-content-root ${themeClass}`}\n        {...eventHandlers}\n        ref={rootRef}\n        data-weaverse-project-id={context.projectId}\n      >\n        <WeaverseContextProvider value={context}>\n          <ItemInstance id={context.data.rootId || context.projectId} />\n        </WeaverseContextProvider>\n      </div>\n    )\n  }\n  return null\n})\n\nconst ItemComponent = memo(({ instance }: ItemComponentProps) => {\n  let context = useContext(WeaverseContext)\n  let { stitchesInstance, elementInstances, platformType } = context\n  let [data, setData] = useState<ElementData>(instance.data)\n  let {\n    id,\n    type,\n    childIds = [],\n    children = [],\n    parentId,\n    createdAt,\n    updatedAt,\n    deletedAt,\n    css,\n    ...rest\n  } = data\n\n  useEffect(() => {\n    let render = (data: ElementData) => setData({ ...data })\n    instance.subscribe(render)\n    if (isBrowser && !instance.ref.current) {\n      // Fallback `ref` if the element isn't created by `React.forwardRef`\n      Object.assign(instance.ref, {\n        current: document.querySelector(`[data-wv-id=\"${id}\"]`),\n      })\n    }\n    return () => instance.unsubscribe(render)\n  }, [])\n\n  let Element = elementInstances.get(type)\n\n  if (Element?.Component) {\n    let Component = Element.Component\n    if (Component.$$typeof === Symbol.for('react.forward_ref')) {\n      rest.ref = instance.ref\n    }\n    let renderChildren = children?.length\n      ? children.map((item: any) => <ItemInstance key={item.id} id={item.id} />)\n      : childIds.length\n      ? childIds.map((cid) => <ItemInstance key={cid} id={cid} />)\n      : null\n    return (\n      <Component\n        key={id}\n        data-wv-type={type}\n        data-wv-id={id}\n        className={clsx(\n          platformType !== 'shopify-hydrogen' &&\n            generateItemClassName(instance, stitchesInstance),\n          rest?.data?.className\n        )}\n        {...rest}\n        children={renderChildren}\n      />\n    )\n  } else {\n    console.log(`❌ Unknown element: ${type}`)\n    return null\n  }\n})\n\nexport let useWeaverse = () => {\n  let context = useContext(WeaverseContext)\n  return context\n}\n\nlet ItemInstance = memo(({ id }: { id: string | number }) => {\n  let context = useWeaverse()\n  let { itemInstances } = context\n  let instance = itemInstances.get(id)\n  if (!instance) {\n    console.warn(`Item instance ${id} not found`)\n    return <div style={{ display: 'none' }}>Item instance {id} not found</div>\n  }\n  return <ItemComponent key={id} instance={instance} />\n})\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f);else for(t in e)e[t]&&(n&&(n+=\" \"),n+=t);return n}export function clsx(){for(var e,t,f=0,n=\"\";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import type Stitches from '@stitches/react/types/stitches'\nimport type { ElementCSS, WeaverseItemStore } from '@weaverse/core'\nimport clsx from 'clsx'\nimport type { LinkHTMLAttributes } from 'react'\n\n// Make the css data formatted to correct order (desktop, tablet, mobile)\nfunction formatCSS(css: ElementCSS) {\n  return {\n    '@desktop': css['@desktop'],\n    '@mobile': css['@mobile'],\n  }\n}\n\nlet permanentClasses: Record<string, string> = {}\nexport function generateItemClassName(\n  instance: WeaverseItemStore,\n  stitchesInstance: Stitches\n) {\n  let { css, type, className: cls = '' } = instance.data\n  let className = ''\n  let permanentClass = ''\n  let perCss = instance.Element?.permanentCss\n  if (perCss) {\n    if (type in permanentClasses) {\n      permanentClass = permanentClasses[type]\n    } else {\n      // @ts-ignore\n      let { className: perCls } = stitchesInstance.css(perCss)()\n      Object.assign(permanentClasses, { [type]: perCls })\n      permanentClass = perCls\n    }\n  }\n  className = permanentClass\n  if (css) {\n    // let stitches create the style from css object and\n    // then return the classname, so we can use it in the render\n    let formattedCss = formatCSS(css)\n    let newStitchesClass = stitchesInstance.css(formattedCss)().className || ''\n    let { stitchesClass } = instance\n    let otherClass = (instance.ref.current?.className || '')\n      .replace(stitchesClass, '')\n      .replace(cls, '')\n      .replace(permanentClass, '')\n      .trim()\n    className = clsx(permanentClass, cls, newStitchesClass, otherClass)\n    instance.stitchesClass = newStitchesClass\n  }\n  return className\n}\n"],"mappings":"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","names":["data"]}
+{"version":3,"sources":["../src/index.ts","../src/context.ts","../src/renderer.tsx","../../../node_modules/clsx/dist/clsx.m.js","../src/utils/css.ts"],"sourcesContent":["export * from '@weaverse/core'\nexport * from './context'\nexport * from './renderer'\nexport * from './types'\n","import { type Weaverse } from '@weaverse/core'\nimport { createContext } from 'react'\n\nexport let WeaverseContext = createContext<Weaverse>({} as Weaverse)\nexport let WeaverseContextProvider = WeaverseContext.Provider\nexport let WeaverseContextConsumer = WeaverseContext.Consumer\n","/* eslint-disable react/no-children-prop */\nimport type { ElementData, WeaverseProjectDataType } from '@weaverse/core'\nimport { isBrowser } from '@weaverse/core'\nimport React, { memo, useContext, useEffect, useRef, useState } from 'react'\nimport { WeaverseContext, WeaverseContextProvider } from './context'\nimport type { ItemComponentProps, WeaverseRootPropsType } from './types'\nimport { generateItemClassName } from './utils/css'\nimport clsx from 'clsx'\n\nexport let WeaverseRoot = memo(({ context }: WeaverseRootPropsType) => {\n  console.log('💿 Weaverse root', context)\n  let [, setData] = useState<WeaverseProjectDataType | unknown>(context.data)\n  let rootRef = useRef<HTMLElement>()\n  let renderRoot = () => setData({})\n\n  useEffect(() => {\n    context.subscribe(renderRoot)\n    context.contentRootElement = rootRef.current\n    return () => {\n      context.unsubscribe(renderRoot)\n    }\n  }, [])\n\n  let eventHandlers = context?.studioBridge?.eventHandlers || {}\n  let themeClass = context.stitchesInstance.theme.className\n\n  if (context.projectId) {\n    return (\n      <div\n        className={`weaverse-content-root ${themeClass}`}\n        {...eventHandlers}\n        ref={rootRef}\n        data-weaverse-project-id={context.projectId}\n      >\n        <WeaverseContextProvider value={context}>\n          <ItemInstance id={context.data.rootId || context.projectId} />\n        </WeaverseContextProvider>\n      </div>\n    )\n  }\n  return null\n})\n\nconst ItemComponent = memo(({ instance }: ItemComponentProps) => {\n  let context = useContext(WeaverseContext)\n  let { stitchesInstance, elementInstances, platformType } = context\n  let [data, setData] = useState<ElementData>(instance.data)\n  let {\n    id,\n    type,\n    childIds = [],\n    children = [],\n    parentId,\n    createdAt,\n    updatedAt,\n    deletedAt,\n    css,\n    ...rest\n  } = data\n\n  useEffect(() => {\n    let render = (data: ElementData) => setData({ ...data })\n    instance.subscribe(render)\n    if (isBrowser && !instance.ref.current) {\n      // Fallback `ref` if the element isn't created by `React.forwardRef`\n      Object.assign(instance.ref, {\n        current: document.querySelector(`[data-wv-id=\"${id}\"]`),\n      })\n    }\n    return () => instance.unsubscribe(render)\n  }, [])\n\n  let Element = elementInstances.get(type)\n\n  if (Element?.Component) {\n    let Component = Element.Component\n    if (Component.$$typeof === Symbol.for('react.forward_ref')) {\n      rest.ref = instance.ref\n    }\n    let renderChildren = children?.length\n      ? children.map((item: any) => <ItemInstance key={item.id} id={item.id} />)\n      : childIds.length\n      ? childIds.map((cid) => <ItemInstance key={cid} id={cid} />)\n      : null\n    return (\n      <Component\n        key={id}\n        data-wv-type={type}\n        data-wv-id={id}\n        className={clsx(\n          platformType !== 'shopify-hydrogen' &&\n            generateItemClassName(instance, stitchesInstance),\n          rest?.data?.className\n        )}\n        {...rest}\n        children={renderChildren}\n      />\n    )\n  } else {\n    console.log(`❌ Unknown element: ${type}`)\n    return null\n  }\n})\n\nexport let useWeaverse = () => {\n  let weaverse = useContext(WeaverseContext)\n  return weaverse\n}\n\nlet ItemInstance = memo(({ id }: { id: string | number }) => {\n  let weaverse = useWeaverse()\n  let { itemInstances } = weaverse\n  let instance = itemInstances.get(id)\n  if (!instance) {\n    console.warn(`Item instance ${id} not found`)\n    return <div style={{ display: 'none' }}>Item instance {id} not found</div>\n  }\n  return <ItemComponent key={id} instance={instance} />\n})\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f);else for(t in e)e[t]&&(n&&(n+=\" \"),n+=t);return n}export function clsx(){for(var e,t,f=0,n=\"\";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import type Stitches from '@stitches/react/types/stitches'\nimport type { ElementCSS, WeaverseItemStore } from '@weaverse/core'\nimport clsx from 'clsx'\nimport type { LinkHTMLAttributes } from 'react'\n\n// Make the css data formatted to correct order (desktop, tablet, mobile)\nfunction formatCSS(css: ElementCSS) {\n  return {\n    '@desktop': css['@desktop'],\n    '@mobile': css['@mobile'],\n  }\n}\n\nlet permanentClasses: Record<string, string> = {}\nexport function generateItemClassName(\n  instance: WeaverseItemStore,\n  stitchesInstance: Stitches\n) {\n  let { css, type, className: cls = '' } = instance.data\n  let className = ''\n  let permanentClass = ''\n  let perCss = instance.Element?.permanentCss\n  if (perCss) {\n    if (type in permanentClasses) {\n      permanentClass = permanentClasses[type]\n    } else {\n      // @ts-ignore\n      let { className: perCls } = stitchesInstance.css(perCss)()\n      Object.assign(permanentClasses, { [type]: perCls })\n      permanentClass = perCls\n    }\n  }\n  className = permanentClass\n  if (css) {\n    // let stitches create the style from css object and\n    // then return the classname, so we can use it in the render\n    let formattedCss = formatCSS(css)\n    let newStitchesClass = stitchesInstance.css(formattedCss)().className || ''\n    let { stitchesClass } = instance\n    let otherClass = (instance.ref.current?.className || '')\n      .replace(stitchesClass, '')\n      .replace(cls, '')\n      .replace(permanentClass, '')\n      .trim()\n    className = clsx(permanentClass, cls, newStitchesClass, otherClass)\n    instance.stitchesClass = newStitchesClass\n  }\n  return className\n}\n"],"mappings":"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","names":["data"]}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.52",
+  "version": "1.0.54",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -32,6 +32,6 @@
   "name": "@weaverse/react",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/core": "1.0.52"
+    "@weaverse/core": "1.0.54"
   }
 }