@weaverse/react 2.8.4 → 2.8.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +19 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +22 -4
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/readme.md +10 -10
package/dist/index.d.mts
CHANGED
|
@@ -14,6 +14,7 @@ declare function useWeaverse<T = Weaverse>(): T;
|
|
|
14
14
|
declare let useItemInstance: (id?: string) => WeaverseItemStore | null;
|
|
15
15
|
declare let useParentInstance: () => WeaverseItemStore | null;
|
|
16
16
|
declare let useChildInstances: (id?: string) => WeaverseItemStore[];
|
|
17
|
+
declare function usePixel(context: Weaverse): void;
|
|
17
18
|
|
|
18
19
|
interface WeaverseElementProps extends Partial<ReactElement> {
|
|
19
20
|
css?: ElementCSS;
|
|
@@ -30,4 +31,4 @@ type ItemComponentProps = {
|
|
|
30
31
|
|
|
31
32
|
declare let WeaverseRoot: react__default.MemoExoticComponent<({ context }: WeaverseRootPropsType) => react__default.JSX.Element | null>;
|
|
32
33
|
|
|
33
|
-
export { type ItemComponentProps, WeaverseContext, WeaverseContextProvider, type WeaverseElementProps, WeaverseItemContext, WeaverseRoot, type WeaverseRootPropsType, useChildInstances, useItemInstance, useParentInstance, useWeaverse };
|
|
34
|
+
export { type ItemComponentProps, WeaverseContext, WeaverseContextProvider, type WeaverseElementProps, WeaverseItemContext, WeaverseRoot, type WeaverseRootPropsType, useChildInstances, useItemInstance, useParentInstance, usePixel, useWeaverse };
|
package/dist/index.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ declare function useWeaverse<T = Weaverse>(): T;
|
|
|
14
14
|
declare let useItemInstance: (id?: string) => WeaverseItemStore | null;
|
|
15
15
|
declare let useParentInstance: () => WeaverseItemStore | null;
|
|
16
16
|
declare let useChildInstances: (id?: string) => WeaverseItemStore[];
|
|
17
|
+
declare function usePixel(context: Weaverse): void;
|
|
17
18
|
|
|
18
19
|
interface WeaverseElementProps extends Partial<ReactElement> {
|
|
19
20
|
css?: ElementCSS;
|
|
@@ -30,4 +31,4 @@ type ItemComponentProps = {
|
|
|
30
31
|
|
|
31
32
|
declare let WeaverseRoot: react__default.MemoExoticComponent<({ context }: WeaverseRootPropsType) => react__default.JSX.Element | null>;
|
|
32
33
|
|
|
33
|
-
export { type ItemComponentProps, WeaverseContext, WeaverseContextProvider, type WeaverseElementProps, WeaverseItemContext, WeaverseRoot, type WeaverseRootPropsType, useChildInstances, useItemInstance, useParentInstance, useWeaverse };
|
|
34
|
+
export { type ItemComponentProps, WeaverseContext, WeaverseContextProvider, type WeaverseElementProps, WeaverseItemContext, WeaverseRoot, type WeaverseRootPropsType, useChildInstances, useItemInstance, useParentInstance, usePixel, useWeaverse };
|
package/dist/index.js
CHANGED
|
@@ -38,6 +38,7 @@ __export(src_exports, {
|
|
|
38
38
|
useChildInstances: () => useChildInstances,
|
|
39
39
|
useItemInstance: () => useItemInstance,
|
|
40
40
|
useParentInstance: () => useParentInstance,
|
|
41
|
+
usePixel: () => usePixel,
|
|
41
42
|
useWeaverse: () => useWeaverse
|
|
42
43
|
});
|
|
43
44
|
module.exports = __toCommonJS(src_exports);
|
|
@@ -83,6 +84,22 @@ var useChildInstances = (id) => {
|
|
|
83
84
|
return itemInstances.get(id2);
|
|
84
85
|
});
|
|
85
86
|
};
|
|
87
|
+
var fetchingKey = "";
|
|
88
|
+
function usePixel(context) {
|
|
89
|
+
let { projectId, pageId, weaverseHost } = context;
|
|
90
|
+
(0, import_react2.useEffect)(() => {
|
|
91
|
+
if (!projectId || !pageId || !weaverseHost)
|
|
92
|
+
return;
|
|
93
|
+
let currentKey = `${projectId}-${pageId}-${globalThis.location.pathname}`;
|
|
94
|
+
if (fetchingKey === currentKey)
|
|
95
|
+
return;
|
|
96
|
+
fetchingKey = currentKey;
|
|
97
|
+
let url = `${weaverseHost}/api/public/px`;
|
|
98
|
+
let xhr = new XMLHttpRequest();
|
|
99
|
+
xhr.open("POST", url, true);
|
|
100
|
+
xhr.send(JSON.stringify({ projectId, pageId }));
|
|
101
|
+
}, []);
|
|
102
|
+
}
|
|
86
103
|
|
|
87
104
|
// src/renderer.tsx
|
|
88
105
|
var import_core = require("@weaverse/core");
|
|
@@ -133,6 +150,7 @@ var WeaverseRoot = (0, import_react3.memo)(({ context }) => {
|
|
|
133
150
|
context.contentRootElement = rootRef?.current || null;
|
|
134
151
|
return context.subscribe(renderRoot);
|
|
135
152
|
}, [context]);
|
|
153
|
+
usePixel(context);
|
|
136
154
|
let eventHandlers = context?.studioBridge?.eventHandlers || {};
|
|
137
155
|
let themeClass = context.stitchesInstance.theme.className;
|
|
138
156
|
if (context.projectId) {
|
|
@@ -230,6 +248,7 @@ var ItemInstance = (0, import_react3.memo)(
|
|
|
230
248
|
useChildInstances,
|
|
231
249
|
useItemInstance,
|
|
232
250
|
useParentInstance,
|
|
251
|
+
usePixel,
|
|
233
252
|
useWeaverse,
|
|
234
253
|
...require("@weaverse/core")
|
|
235
254
|
});
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/context.ts","../src/hooks.ts","../src/renderer.tsx","../src/utils/css.ts"],"sourcesContent":["export * from '@weaverse/core'\nexport * from './context'\nexport * from './hooks'\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 WeaverseItemContext = createContext<{\n id: string\n parentId: string\n}>({ id: '', parentId: '' })\n","import type { Weaverse, WeaverseItemStore } from '@weaverse/core'\nimport { useContext } from 'react'\n\nimport { WeaverseContext, WeaverseItemContext } from '~/context'\n\nexport function useWeaverse<T = Weaverse>() {\n let weaverse = useContext(WeaverseContext)\n return weaverse as T\n}\n\nexport let useItemInstance = (id?: string) => {\n let weaverse = useWeaverse()\n let { id: currentId } = useContext(WeaverseItemContext)\n let { itemInstances } = weaverse\n let instance = itemInstances.get(id || currentId)\n if (!instance) {\n console.warn(`Item instance ${id} not found`)\n return null\n }\n return instance as WeaverseItemStore\n}\n\nexport let useParentInstance = () => {\n let { parentId } = useContext(WeaverseItemContext)\n return useItemInstance(parentId || '')\n}\n\nexport let useChildInstances = (id?: string) => {\n let weaverse = useWeaverse()\n let currentInstance = useItemInstance(id)\n if (!currentInstance) return []\n let { itemInstances } = weaverse\n\n let {\n data: { children },\n } = currentInstance\n return children.map(({ id }: { id: string }) => {\n return itemInstances.get(id)\n }) as WeaverseItemStore[]\n}\n","/* eslint-disable react/no-children-prop */\nimport type { ElementData, WeaverseProjectDataType } from '@weaverse/core'\nimport { isBrowser } from '@weaverse/core'\nimport React, { memo, useEffect, useRef, useState } from 'react'\nimport clsx from 'clsx'\n\nimport { WeaverseContextProvider, WeaverseItemContext } from './context'\nimport type { ItemComponentProps, WeaverseRootPropsType } from './types'\nimport { generateItemClassName } from './utils/css'\n\nimport { useItemInstance, useWeaverse } from '~/hooks'\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.contentRootElement = rootRef?.current || null\n return context.subscribe(renderRoot)\n }, [context])\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\n id={context.data.rootId || context.projectId}\n parentId={''}\n />\n </WeaverseContextProvider>\n </div>\n )\n }\n return null\n})\n\nconst ItemComponent = memo(({ instance }: ItemComponentProps) => {\n let context = useWeaverse()\n let { stitchesInstance, elementRegistry, 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 __hidden,\n data: _,\n ...rest\n } = data\n\n useEffect(() => {\n let render = (data: ElementData) => setData({ ...data })\n\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.subscribe(render)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [instance])\n\n let Element = elementRegistry.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 = (\n children?.length\n ? children\n : childIds?.length\n ? childIds.map((cid: string) => ({ id: cid }))\n : []\n ).map((item: { id: string }) => (\n <ItemInstance key={item.id} id={item.id} parentId={id} />\n ))\n\n let style = rest.style || {}\n if (__hidden) style.display = 'none'\n\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 style={style}\n {...rest}\n children={renderChildren.length ? renderChildren : undefined}\n />\n )\n } else {\n console.log(`❌ Unknown element: ${type}`)\n return null\n }\n})\n\nlet ItemInstance = memo(\n ({ id, parentId }: { id: string; parentId: string }) => {\n let instance = useItemInstance(id)\n if (!instance) {\n return <div style={{ display: 'none' }}>Item instance {id} not found</div>\n }\n return (\n <WeaverseItemContext.Provider value={{ parentId, id }}>\n <ItemComponent key={id} instance={instance} />\n </WeaverseItemContext.Provider>\n )\n },\n)\n","import type Stitches from '@stitches/react/types/stitches'\nimport type { ElementCSS, WeaverseItemStore } from '@weaverse/core'\nimport clsx from 'clsx'\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","id","import_react","import_clsx","clsx","React","data","clsx"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/context.ts","../src/hooks.ts","../src/renderer.tsx","../src/utils/css.ts"],"sourcesContent":["export * from '@weaverse/core'\nexport * from './context'\nexport * from './hooks'\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 WeaverseItemContext = createContext<{\n id: string\n parentId: string\n}>({ id: '', parentId: '' })\n","import type { Weaverse, WeaverseItemStore } from '@weaverse/core'\nimport { useContext, useEffect } from 'react'\n\nimport { WeaverseContext, WeaverseItemContext } from '~/context'\n\nexport function useWeaverse<T = Weaverse>() {\n let weaverse = useContext(WeaverseContext)\n return weaverse as T\n}\n\nexport let useItemInstance = (id?: string) => {\n let weaverse = useWeaverse()\n let { id: currentId } = useContext(WeaverseItemContext)\n let { itemInstances } = weaverse\n let instance = itemInstances.get(id || currentId)\n if (!instance) {\n console.warn(`Item instance ${id} not found`)\n return null\n }\n return instance as WeaverseItemStore\n}\n\nexport let useParentInstance = () => {\n let { parentId } = useContext(WeaverseItemContext)\n return useItemInstance(parentId || '')\n}\n\nexport let useChildInstances = (id?: string) => {\n let weaverse = useWeaverse()\n let currentInstance = useItemInstance(id)\n if (!currentInstance) return []\n let { itemInstances } = weaverse\n\n let {\n data: { children },\n } = currentInstance\n return children.map(({ id }: { id: string }) => {\n return itemInstances.get(id)\n }) as WeaverseItemStore[]\n}\n\nlet fetchingKey = ''\n\nexport function usePixel(context: Weaverse) {\n // @ts-expect-error\n let { projectId, pageId, weaverseHost } = context\n\n useEffect(() => {\n if (!projectId || !pageId || !weaverseHost) return\n let currentKey = `${projectId}-${pageId}-${globalThis.location.pathname}`\n if (fetchingKey === currentKey) return\n fetchingKey = currentKey\n let url = `${weaverseHost}/api/public/px`\n let xhr = new XMLHttpRequest()\n xhr.open('POST', url, true)\n xhr.send(JSON.stringify({ projectId, pageId }))\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n}\n","/* eslint-disable react/no-children-prop */\nimport type { ElementData, WeaverseProjectDataType } from '@weaverse/core'\nimport { isBrowser } from '@weaverse/core'\nimport React, { memo, useEffect, useRef, useState } from 'react'\nimport clsx from 'clsx'\n\nimport { WeaverseContextProvider, WeaverseItemContext } from './context'\nimport type { ItemComponentProps, WeaverseRootPropsType } from './types'\nimport { generateItemClassName } from './utils/css'\n\nimport { useItemInstance, usePixel, useWeaverse } from '~/hooks'\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.contentRootElement = rootRef?.current || null\n return context.subscribe(renderRoot)\n }, [context])\n usePixel(context)\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\n id={context.data.rootId || context.projectId}\n parentId={''}\n />\n </WeaverseContextProvider>\n </div>\n )\n }\n return null\n})\n\nconst ItemComponent = memo(({ instance }: ItemComponentProps) => {\n let context = useWeaverse()\n let { stitchesInstance, elementRegistry, 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 __hidden,\n data: _,\n ...rest\n } = data\n\n useEffect(() => {\n let render = (data: ElementData) => setData({ ...data })\n\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.subscribe(render)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [instance])\n\n let Element = elementRegistry.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 = (\n children?.length\n ? children\n : childIds?.length\n ? childIds.map((cid: string) => ({ id: cid }))\n : []\n ).map((item: { id: string }) => (\n <ItemInstance key={item.id} id={item.id} parentId={id} />\n ))\n\n let style = rest.style || {}\n if (__hidden) style.display = 'none'\n\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 style={style}\n {...rest}\n children={renderChildren.length ? renderChildren : undefined}\n />\n )\n } else {\n console.log(`❌ Unknown element: ${type}`)\n return null\n }\n})\n\nlet ItemInstance = memo(\n ({ id, parentId }: { id: string; parentId: string }) => {\n let instance = useItemInstance(id)\n if (!instance) {\n return <div style={{ display: 'none' }}>Item instance {id} not found</div>\n }\n return (\n <WeaverseItemContext.Provider value={{ parentId, id }}>\n <ItemComponent key={id} instance={instance} />\n </WeaverseItemContext.Provider>\n )\n },\n)\n","import type Stitches from '@stitches/react/types/stitches'\nimport type { ElementCSS, WeaverseItemStore } from '@weaverse/core'\nimport clsx from 'clsx'\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","id","import_react","import_clsx","clsx","React","data","clsx"]}
|
package/dist/index.mjs
CHANGED
|
@@ -8,7 +8,7 @@ var WeaverseContextProvider = WeaverseContext.Provider;
|
|
|
8
8
|
var WeaverseItemContext = createContext({ id: "", parentId: "" });
|
|
9
9
|
|
|
10
10
|
// src/hooks.ts
|
|
11
|
-
import { useContext } from "react";
|
|
11
|
+
import { useContext, useEffect } from "react";
|
|
12
12
|
function useWeaverse() {
|
|
13
13
|
let weaverse = useContext(WeaverseContext);
|
|
14
14
|
return weaverse;
|
|
@@ -41,10 +41,26 @@ var useChildInstances = (id) => {
|
|
|
41
41
|
return itemInstances.get(id2);
|
|
42
42
|
});
|
|
43
43
|
};
|
|
44
|
+
var fetchingKey = "";
|
|
45
|
+
function usePixel(context) {
|
|
46
|
+
let { projectId, pageId, weaverseHost } = context;
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
if (!projectId || !pageId || !weaverseHost)
|
|
49
|
+
return;
|
|
50
|
+
let currentKey = `${projectId}-${pageId}-${globalThis.location.pathname}`;
|
|
51
|
+
if (fetchingKey === currentKey)
|
|
52
|
+
return;
|
|
53
|
+
fetchingKey = currentKey;
|
|
54
|
+
let url = `${weaverseHost}/api/public/px`;
|
|
55
|
+
let xhr = new XMLHttpRequest();
|
|
56
|
+
xhr.open("POST", url, true);
|
|
57
|
+
xhr.send(JSON.stringify({ projectId, pageId }));
|
|
58
|
+
}, []);
|
|
59
|
+
}
|
|
44
60
|
|
|
45
61
|
// src/renderer.tsx
|
|
46
62
|
import { isBrowser } from "@weaverse/core";
|
|
47
|
-
import React, { memo, useEffect, useRef, useState } from "react";
|
|
63
|
+
import React, { memo, useEffect as useEffect2, useRef, useState } from "react";
|
|
48
64
|
import clsx2 from "clsx";
|
|
49
65
|
|
|
50
66
|
// src/utils/css.ts
|
|
@@ -87,10 +103,11 @@ var WeaverseRoot = memo(({ context }) => {
|
|
|
87
103
|
let [, setData] = useState(context.data);
|
|
88
104
|
let rootRef = useRef();
|
|
89
105
|
let renderRoot = () => setData({});
|
|
90
|
-
|
|
106
|
+
useEffect2(() => {
|
|
91
107
|
context.contentRootElement = rootRef?.current || null;
|
|
92
108
|
return context.subscribe(renderRoot);
|
|
93
109
|
}, [context]);
|
|
110
|
+
usePixel(context);
|
|
94
111
|
let eventHandlers = context?.studioBridge?.eventHandlers || {};
|
|
95
112
|
let themeClass = context.stitchesInstance.theme.className;
|
|
96
113
|
if (context.projectId) {
|
|
@@ -131,7 +148,7 @@ var ItemComponent = memo(({ instance }) => {
|
|
|
131
148
|
data: _,
|
|
132
149
|
...rest
|
|
133
150
|
} = data;
|
|
134
|
-
|
|
151
|
+
useEffect2(() => {
|
|
135
152
|
let render = (data2) => setData({ ...data2 });
|
|
136
153
|
if (isBrowser && !instance.ref.current) {
|
|
137
154
|
Object.assign(instance.ref, {
|
|
@@ -187,5 +204,6 @@ export {
|
|
|
187
204
|
useChildInstances,
|
|
188
205
|
useItemInstance,
|
|
189
206
|
useParentInstance,
|
|
207
|
+
usePixel,
|
|
190
208
|
useWeaverse
|
|
191
209
|
};
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/context.ts","../src/hooks.ts","../src/renderer.tsx","../src/utils/css.ts"],"sourcesContent":["export * from '@weaverse/core'\nexport * from './context'\nexport * from './hooks'\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 WeaverseItemContext = createContext<{\n id: string\n parentId: string\n}>({ id: '', parentId: '' })\n","import type { Weaverse, WeaverseItemStore } from '@weaverse/core'\nimport { useContext } from 'react'\n\nimport { WeaverseContext, WeaverseItemContext } from '~/context'\n\nexport function useWeaverse<T = Weaverse>() {\n let weaverse = useContext(WeaverseContext)\n return weaverse as T\n}\n\nexport let useItemInstance = (id?: string) => {\n let weaverse = useWeaverse()\n let { id: currentId } = useContext(WeaverseItemContext)\n let { itemInstances } = weaverse\n let instance = itemInstances.get(id || currentId)\n if (!instance) {\n console.warn(`Item instance ${id} not found`)\n return null\n }\n return instance as WeaverseItemStore\n}\n\nexport let useParentInstance = () => {\n let { parentId } = useContext(WeaverseItemContext)\n return useItemInstance(parentId || '')\n}\n\nexport let useChildInstances = (id?: string) => {\n let weaverse = useWeaverse()\n let currentInstance = useItemInstance(id)\n if (!currentInstance) return []\n let { itemInstances } = weaverse\n\n let {\n data: { children },\n } = currentInstance\n return children.map(({ id }: { id: string }) => {\n return itemInstances.get(id)\n }) as WeaverseItemStore[]\n}\n","/* eslint-disable react/no-children-prop */\nimport type { ElementData, WeaverseProjectDataType } from '@weaverse/core'\nimport { isBrowser } from '@weaverse/core'\nimport React, { memo, useEffect, useRef, useState } from 'react'\nimport clsx from 'clsx'\n\nimport { WeaverseContextProvider, WeaverseItemContext } from './context'\nimport type { ItemComponentProps, WeaverseRootPropsType } from './types'\nimport { generateItemClassName } from './utils/css'\n\nimport { useItemInstance, useWeaverse } from '~/hooks'\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.contentRootElement = rootRef?.current || null\n return context.subscribe(renderRoot)\n }, [context])\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\n id={context.data.rootId || context.projectId}\n parentId={''}\n />\n </WeaverseContextProvider>\n </div>\n )\n }\n return null\n})\n\nconst ItemComponent = memo(({ instance }: ItemComponentProps) => {\n let context = useWeaverse()\n let { stitchesInstance, elementRegistry, 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 __hidden,\n data: _,\n ...rest\n } = data\n\n useEffect(() => {\n let render = (data: ElementData) => setData({ ...data })\n\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.subscribe(render)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [instance])\n\n let Element = elementRegistry.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 = (\n children?.length\n ? children\n : childIds?.length\n ? childIds.map((cid: string) => ({ id: cid }))\n : []\n ).map((item: { id: string }) => (\n <ItemInstance key={item.id} id={item.id} parentId={id} />\n ))\n\n let style = rest.style || {}\n if (__hidden) style.display = 'none'\n\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 style={style}\n {...rest}\n children={renderChildren.length ? renderChildren : undefined}\n />\n )\n } else {\n console.log(`❌ Unknown element: ${type}`)\n return null\n }\n})\n\nlet ItemInstance = memo(\n ({ id, parentId }: { id: string; parentId: string }) => {\n let instance = useItemInstance(id)\n if (!instance) {\n return <div style={{ display: 'none' }}>Item instance {id} not found</div>\n }\n return (\n <WeaverseItemContext.Provider value={{ parentId, id }}>\n <ItemComponent key={id} instance={instance} />\n </WeaverseItemContext.Provider>\n )\n },\n)\n","import type Stitches from '@stitches/react/types/stitches'\nimport type { ElementCSS, WeaverseItemStore } from '@weaverse/core'\nimport clsx from 'clsx'\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":["id","clsx","data","clsx"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/context.ts","../src/hooks.ts","../src/renderer.tsx","../src/utils/css.ts"],"sourcesContent":["export * from '@weaverse/core'\nexport * from './context'\nexport * from './hooks'\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 WeaverseItemContext = createContext<{\n id: string\n parentId: string\n}>({ id: '', parentId: '' })\n","import type { Weaverse, WeaverseItemStore } from '@weaverse/core'\nimport { useContext, useEffect } from 'react'\n\nimport { WeaverseContext, WeaverseItemContext } from '~/context'\n\nexport function useWeaverse<T = Weaverse>() {\n let weaverse = useContext(WeaverseContext)\n return weaverse as T\n}\n\nexport let useItemInstance = (id?: string) => {\n let weaverse = useWeaverse()\n let { id: currentId } = useContext(WeaverseItemContext)\n let { itemInstances } = weaverse\n let instance = itemInstances.get(id || currentId)\n if (!instance) {\n console.warn(`Item instance ${id} not found`)\n return null\n }\n return instance as WeaverseItemStore\n}\n\nexport let useParentInstance = () => {\n let { parentId } = useContext(WeaverseItemContext)\n return useItemInstance(parentId || '')\n}\n\nexport let useChildInstances = (id?: string) => {\n let weaverse = useWeaverse()\n let currentInstance = useItemInstance(id)\n if (!currentInstance) return []\n let { itemInstances } = weaverse\n\n let {\n data: { children },\n } = currentInstance\n return children.map(({ id }: { id: string }) => {\n return itemInstances.get(id)\n }) as WeaverseItemStore[]\n}\n\nlet fetchingKey = ''\n\nexport function usePixel(context: Weaverse) {\n // @ts-expect-error\n let { projectId, pageId, weaverseHost } = context\n\n useEffect(() => {\n if (!projectId || !pageId || !weaverseHost) return\n let currentKey = `${projectId}-${pageId}-${globalThis.location.pathname}`\n if (fetchingKey === currentKey) return\n fetchingKey = currentKey\n let url = `${weaverseHost}/api/public/px`\n let xhr = new XMLHttpRequest()\n xhr.open('POST', url, true)\n xhr.send(JSON.stringify({ projectId, pageId }))\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n}\n","/* eslint-disable react/no-children-prop */\nimport type { ElementData, WeaverseProjectDataType } from '@weaverse/core'\nimport { isBrowser } from '@weaverse/core'\nimport React, { memo, useEffect, useRef, useState } from 'react'\nimport clsx from 'clsx'\n\nimport { WeaverseContextProvider, WeaverseItemContext } from './context'\nimport type { ItemComponentProps, WeaverseRootPropsType } from './types'\nimport { generateItemClassName } from './utils/css'\n\nimport { useItemInstance, usePixel, useWeaverse } from '~/hooks'\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.contentRootElement = rootRef?.current || null\n return context.subscribe(renderRoot)\n }, [context])\n usePixel(context)\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\n id={context.data.rootId || context.projectId}\n parentId={''}\n />\n </WeaverseContextProvider>\n </div>\n )\n }\n return null\n})\n\nconst ItemComponent = memo(({ instance }: ItemComponentProps) => {\n let context = useWeaverse()\n let { stitchesInstance, elementRegistry, 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 __hidden,\n data: _,\n ...rest\n } = data\n\n useEffect(() => {\n let render = (data: ElementData) => setData({ ...data })\n\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.subscribe(render)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [instance])\n\n let Element = elementRegistry.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 = (\n children?.length\n ? children\n : childIds?.length\n ? childIds.map((cid: string) => ({ id: cid }))\n : []\n ).map((item: { id: string }) => (\n <ItemInstance key={item.id} id={item.id} parentId={id} />\n ))\n\n let style = rest.style || {}\n if (__hidden) style.display = 'none'\n\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 style={style}\n {...rest}\n children={renderChildren.length ? renderChildren : undefined}\n />\n )\n } else {\n console.log(`❌ Unknown element: ${type}`)\n return null\n }\n})\n\nlet ItemInstance = memo(\n ({ id, parentId }: { id: string; parentId: string }) => {\n let instance = useItemInstance(id)\n if (!instance) {\n return <div style={{ display: 'none' }}>Item instance {id} not found</div>\n }\n return (\n <WeaverseItemContext.Provider value={{ parentId, id }}>\n <ItemComponent key={id} instance={instance} />\n </WeaverseItemContext.Provider>\n )\n },\n)\n","import type Stitches from '@stitches/react/types/stitches'\nimport type { ElementCSS, WeaverseItemStore } from '@weaverse/core'\nimport clsx from 'clsx'\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":["id","useEffect","clsx","useEffect","data","clsx"]}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@weaverse/react",
|
|
3
3
|
"author": "Weaverse Team",
|
|
4
4
|
"description": "React bindings for Weaverse",
|
|
5
|
-
"version": "2.8.
|
|
5
|
+
"version": "2.8.6",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"typings": "dist/index.d.ts",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"singleQuote": true
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@weaverse/core": "2.8.
|
|
41
|
+
"@weaverse/core": "2.8.6",
|
|
42
42
|
"clsx": "^2.0.0"
|
|
43
43
|
}
|
|
44
|
-
}
|
|
44
|
+
}
|
package/readme.md
CHANGED
|
@@ -24,12 +24,12 @@ npm install @weaverse/react
|
|
|
24
24
|
First, initialize a Weaverse Core instance with the necessary parameters:
|
|
25
25
|
|
|
26
26
|
```jsx
|
|
27
|
-
import { Weaverse } from '@weaverse/core'
|
|
27
|
+
import { Weaverse } from '@weaverse/core'
|
|
28
28
|
|
|
29
29
|
let weaverse = new Weaverse({
|
|
30
30
|
projectId: 'your_project_id',
|
|
31
|
-
data: 'WeaverseProjectDataType' // fetched from Weaverse CMS
|
|
32
|
-
})
|
|
31
|
+
data: 'WeaverseProjectDataType', // fetched from Weaverse CMS
|
|
32
|
+
})
|
|
33
33
|
```
|
|
34
34
|
|
|
35
35
|
Next, register your React components with the Weaverse instance:
|
|
@@ -43,9 +43,9 @@ weaverse.registerElement({
|
|
|
43
43
|
type: 'Button',
|
|
44
44
|
inspector: {
|
|
45
45
|
// define settings inputs for customizing the Component here
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
})
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
})
|
|
49
49
|
```
|
|
50
50
|
|
|
51
51
|
## Usage
|
|
@@ -54,16 +54,16 @@ After initializing and registering elements, use the `WeaverseRoot` component to
|
|
|
54
54
|
Weaverse context:
|
|
55
55
|
|
|
56
56
|
```jsx
|
|
57
|
-
import React from 'react'
|
|
58
|
-
import { WeaverseRoot } from '@weaverse/react'
|
|
57
|
+
import React from 'react'
|
|
58
|
+
import { WeaverseRoot } from '@weaverse/react'
|
|
59
59
|
|
|
60
60
|
function App() {
|
|
61
61
|
// ... your other React component logic
|
|
62
62
|
|
|
63
|
-
return <WeaverseRoot context={weaverse}
|
|
63
|
+
return <WeaverseRoot context={weaverse} />
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
-
export default App
|
|
66
|
+
export default App
|
|
67
67
|
```
|
|
68
68
|
|
|
69
69
|
## Best Practices
|