@weaverse/react 2.2.5 → 2.4.0
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 +14 -9
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +13 -9
- package/dist/index.mjs.map +1 -1
- package/package.json +27 -27
package/dist/index.d.mts
CHANGED
|
@@ -22,5 +22,6 @@ type ItemComponentProps = {
|
|
|
22
22
|
|
|
23
23
|
declare let WeaverseRoot: react__default.MemoExoticComponent<({ context }: WeaverseRootPropsType) => react__default.JSX.Element | null>;
|
|
24
24
|
declare function useWeaverse<T = Weaverse>(): T;
|
|
25
|
+
declare let useItemInstance: (id: string) => any;
|
|
25
26
|
|
|
26
|
-
export { ItemComponentProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, useWeaverse };
|
|
27
|
+
export { ItemComponentProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, useItemInstance, useWeaverse };
|
package/dist/index.d.ts
CHANGED
|
@@ -22,5 +22,6 @@ type ItemComponentProps = {
|
|
|
22
22
|
|
|
23
23
|
declare let WeaverseRoot: react__default.MemoExoticComponent<({ context }: WeaverseRootPropsType) => react__default.JSX.Element | null>;
|
|
24
24
|
declare function useWeaverse<T = Weaverse>(): T;
|
|
25
|
+
declare let useItemInstance: (id: string) => any;
|
|
25
26
|
|
|
26
|
-
export { ItemComponentProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, useWeaverse };
|
|
27
|
+
export { ItemComponentProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, useItemInstance, useWeaverse };
|
package/dist/index.js
CHANGED
|
@@ -35,6 +35,7 @@ __export(src_exports, {
|
|
|
35
35
|
WeaverseContextConsumer: () => WeaverseContextConsumer,
|
|
36
36
|
WeaverseContextProvider: () => WeaverseContextProvider,
|
|
37
37
|
WeaverseRoot: () => WeaverseRoot,
|
|
38
|
+
useItemInstance: () => useItemInstance,
|
|
38
39
|
useWeaverse: () => useWeaverse
|
|
39
40
|
});
|
|
40
41
|
module.exports = __toCommonJS(src_exports);
|
|
@@ -92,11 +93,8 @@ var WeaverseRoot = (0, import_react2.memo)(({ context }) => {
|
|
|
92
93
|
let rootRef = (0, import_react2.useRef)();
|
|
93
94
|
let renderRoot = () => setData({});
|
|
94
95
|
(0, import_react2.useEffect)(() => {
|
|
95
|
-
context.subscribe(renderRoot);
|
|
96
96
|
context.contentRootElement = rootRef?.current || null;
|
|
97
|
-
return ()
|
|
98
|
-
context.unsubscribe(renderRoot);
|
|
99
|
-
};
|
|
97
|
+
return context.subscribe(renderRoot);
|
|
100
98
|
}, [context]);
|
|
101
99
|
let eventHandlers = context?.studioBridge?.eventHandlers || {};
|
|
102
100
|
let themeClass = context.stitchesInstance.theme.className;
|
|
@@ -115,7 +113,7 @@ var WeaverseRoot = (0, import_react2.memo)(({ context }) => {
|
|
|
115
113
|
return null;
|
|
116
114
|
});
|
|
117
115
|
var ItemComponent = (0, import_react2.memo)(({ instance }) => {
|
|
118
|
-
let context = (
|
|
116
|
+
let context = useWeaverse();
|
|
119
117
|
let { stitchesInstance, elementRegistry, platformType } = context;
|
|
120
118
|
let [data, setData] = (0, import_react2.useState)(instance.data);
|
|
121
119
|
let {
|
|
@@ -134,13 +132,12 @@ var ItemComponent = (0, import_react2.memo)(({ instance }) => {
|
|
|
134
132
|
} = data;
|
|
135
133
|
(0, import_react2.useEffect)(() => {
|
|
136
134
|
let render = (data2) => setData({ ...data2 });
|
|
137
|
-
instance.subscribe(render);
|
|
138
135
|
if (import_core.isBrowser && !instance.ref.current) {
|
|
139
136
|
Object.assign(instance.ref, {
|
|
140
137
|
current: document.querySelector(`[data-wv-id="${id}"]`)
|
|
141
138
|
});
|
|
142
139
|
}
|
|
143
|
-
return
|
|
140
|
+
return instance.subscribe(render);
|
|
144
141
|
}, [instance]);
|
|
145
142
|
let Element = elementRegistry.get(type);
|
|
146
143
|
if (Element?.Component) {
|
|
@@ -148,7 +145,7 @@ var ItemComponent = (0, import_react2.memo)(({ instance }) => {
|
|
|
148
145
|
if (Component.$$typeof === Symbol.for("react.forward_ref")) {
|
|
149
146
|
rest.ref = instance.ref;
|
|
150
147
|
}
|
|
151
|
-
let renderChildren = children
|
|
148
|
+
let renderChildren = (children.length ? children : childIds.length ? childIds.map((cid) => ({ id: cid })) : []).map((item) => /* @__PURE__ */ import_react2.default.createElement(ItemInstance, { key: item.id, id: item.id }));
|
|
152
149
|
let style = rest.style || {};
|
|
153
150
|
if (__hidden)
|
|
154
151
|
style.display = "none";
|
|
@@ -176,12 +173,19 @@ function useWeaverse() {
|
|
|
176
173
|
let weaverse = (0, import_react2.useContext)(WeaverseContext);
|
|
177
174
|
return weaverse;
|
|
178
175
|
}
|
|
179
|
-
var
|
|
176
|
+
var useItemInstance = (id) => {
|
|
180
177
|
let weaverse = useWeaverse();
|
|
181
178
|
let { itemInstances } = weaverse;
|
|
182
179
|
let instance = itemInstances.get(id);
|
|
183
180
|
if (!instance) {
|
|
184
181
|
console.warn(`Item instance ${id} not found`);
|
|
182
|
+
return null;
|
|
183
|
+
}
|
|
184
|
+
return instance;
|
|
185
|
+
};
|
|
186
|
+
var ItemInstance = (0, import_react2.memo)(({ id }) => {
|
|
187
|
+
let instance = useItemInstance(id);
|
|
188
|
+
if (!instance) {
|
|
185
189
|
return /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "none" } }, "Item instance ", id, " not found");
|
|
186
190
|
}
|
|
187
191
|
return /* @__PURE__ */ import_react2.default.createElement(ItemComponent, { key: id, instance });
|
|
@@ -192,6 +196,7 @@ var ItemInstance = (0, import_react2.memo)(({ id }) => {
|
|
|
192
196
|
WeaverseContextConsumer,
|
|
193
197
|
WeaverseContextProvider,
|
|
194
198
|
WeaverseRoot,
|
|
199
|
+
useItemInstance,
|
|
195
200
|
useWeaverse,
|
|
196
201
|
...require("@weaverse/core")
|
|
197
202
|
});
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/context.ts","../src/renderer.tsx","../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 {\n ElementData,\n Weaverse,\n WeaverseProjectDataType,\n} 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.
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/context.ts","../src/renderer.tsx","../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 {\n ElementData,\n Weaverse,\n WeaverseProjectDataType,\n} 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.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 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 = 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 }, [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 }) => <ItemInstance key={item.id} id={item.id} />)\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}\n />\n )\n } else {\n console.log(`❌ Unknown element: ${type}`)\n return null\n }\n})\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 { itemInstances } = weaverse\n let instance = itemInstances.get(id)\n if (!instance) {\n console.warn(`Item instance ${id} not found`)\n return null\n }\n return instance\n}\n\nlet ItemInstance = memo(({ id }: { id: string }) => {\n let instance = useItemInstance(id)\n if (!instance) {\n return <div style={{ display: 'none' }}>Item instance {id} not found</div>\n }\n return <ItemComponent key={id} instance={instance} />\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","clsx","import_clsx","React","data","clsx"]}
|
package/dist/index.mjs
CHANGED
|
@@ -53,11 +53,8 @@ var WeaverseRoot = memo(({ context }) => {
|
|
|
53
53
|
let rootRef = useRef();
|
|
54
54
|
let renderRoot = () => setData({});
|
|
55
55
|
useEffect(() => {
|
|
56
|
-
context.subscribe(renderRoot);
|
|
57
56
|
context.contentRootElement = rootRef?.current || null;
|
|
58
|
-
return ()
|
|
59
|
-
context.unsubscribe(renderRoot);
|
|
60
|
-
};
|
|
57
|
+
return context.subscribe(renderRoot);
|
|
61
58
|
}, [context]);
|
|
62
59
|
let eventHandlers = context?.studioBridge?.eventHandlers || {};
|
|
63
60
|
let themeClass = context.stitchesInstance.theme.className;
|
|
@@ -76,7 +73,7 @@ var WeaverseRoot = memo(({ context }) => {
|
|
|
76
73
|
return null;
|
|
77
74
|
});
|
|
78
75
|
var ItemComponent = memo(({ instance }) => {
|
|
79
|
-
let context =
|
|
76
|
+
let context = useWeaverse();
|
|
80
77
|
let { stitchesInstance, elementRegistry, platformType } = context;
|
|
81
78
|
let [data, setData] = useState(instance.data);
|
|
82
79
|
let {
|
|
@@ -95,13 +92,12 @@ var ItemComponent = memo(({ instance }) => {
|
|
|
95
92
|
} = data;
|
|
96
93
|
useEffect(() => {
|
|
97
94
|
let render = (data2) => setData({ ...data2 });
|
|
98
|
-
instance.subscribe(render);
|
|
99
95
|
if (isBrowser && !instance.ref.current) {
|
|
100
96
|
Object.assign(instance.ref, {
|
|
101
97
|
current: document.querySelector(`[data-wv-id="${id}"]`)
|
|
102
98
|
});
|
|
103
99
|
}
|
|
104
|
-
return
|
|
100
|
+
return instance.subscribe(render);
|
|
105
101
|
}, [instance]);
|
|
106
102
|
let Element = elementRegistry.get(type);
|
|
107
103
|
if (Element?.Component) {
|
|
@@ -109,7 +105,7 @@ var ItemComponent = memo(({ instance }) => {
|
|
|
109
105
|
if (Component.$$typeof === Symbol.for("react.forward_ref")) {
|
|
110
106
|
rest.ref = instance.ref;
|
|
111
107
|
}
|
|
112
|
-
let renderChildren = children
|
|
108
|
+
let renderChildren = (children.length ? children : childIds.length ? childIds.map((cid) => ({ id: cid })) : []).map((item) => /* @__PURE__ */ React.createElement(ItemInstance, { key: item.id, id: item.id }));
|
|
113
109
|
let style = rest.style || {};
|
|
114
110
|
if (__hidden)
|
|
115
111
|
style.display = "none";
|
|
@@ -137,12 +133,19 @@ function useWeaverse() {
|
|
|
137
133
|
let weaverse = useContext(WeaverseContext);
|
|
138
134
|
return weaverse;
|
|
139
135
|
}
|
|
140
|
-
var
|
|
136
|
+
var useItemInstance = (id) => {
|
|
141
137
|
let weaverse = useWeaverse();
|
|
142
138
|
let { itemInstances } = weaverse;
|
|
143
139
|
let instance = itemInstances.get(id);
|
|
144
140
|
if (!instance) {
|
|
145
141
|
console.warn(`Item instance ${id} not found`);
|
|
142
|
+
return null;
|
|
143
|
+
}
|
|
144
|
+
return instance;
|
|
145
|
+
};
|
|
146
|
+
var ItemInstance = memo(({ id }) => {
|
|
147
|
+
let instance = useItemInstance(id);
|
|
148
|
+
if (!instance) {
|
|
146
149
|
return /* @__PURE__ */ React.createElement("div", { style: { display: "none" } }, "Item instance ", id, " not found");
|
|
147
150
|
}
|
|
148
151
|
return /* @__PURE__ */ React.createElement(ItemComponent, { key: id, instance });
|
|
@@ -152,5 +155,6 @@ export {
|
|
|
152
155
|
WeaverseContextConsumer,
|
|
153
156
|
WeaverseContextProvider,
|
|
154
157
|
WeaverseRoot,
|
|
158
|
+
useItemInstance,
|
|
155
159
|
useWeaverse
|
|
156
160
|
};
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/context.ts","../src/renderer.tsx","../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 {\n ElementData,\n Weaverse,\n WeaverseProjectDataType,\n} 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.
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/context.ts","../src/renderer.tsx","../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 {\n ElementData,\n Weaverse,\n WeaverseProjectDataType,\n} 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.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 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 = 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 }, [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 }) => <ItemInstance key={item.id} id={item.id} />)\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}\n />\n )\n } else {\n console.log(`❌ Unknown element: ${type}`)\n return null\n }\n})\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 { itemInstances } = weaverse\n let instance = itemInstances.get(id)\n if (!instance) {\n console.warn(`Item instance ${id} not found`)\n return null\n }\n return instance\n}\n\nlet ItemInstance = memo(({ id }: { id: string }) => {\n let instance = useItemInstance(id)\n if (!instance) {\n return <div style={{ display: 'none' }}>Item instance {id} not found</div>\n }\n return <ItemComponent key={id} instance={instance} />\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":["clsx","data"]}
|
package/package.json
CHANGED
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version"
|
|
3
|
-
"license"
|
|
4
|
-
"main"
|
|
5
|
-
"typings"
|
|
6
|
-
"module"
|
|
7
|
-
"publishConfig"
|
|
8
|
-
"access"
|
|
2
|
+
"version": "2.4.0",
|
|
3
|
+
"license": "MIT",
|
|
4
|
+
"main": "dist/index.js",
|
|
5
|
+
"typings": "dist/index.d.ts",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
|
+
"publishConfig": {
|
|
8
|
+
"access": "public"
|
|
9
9
|
},
|
|
10
|
-
"files"
|
|
10
|
+
"files": [
|
|
11
11
|
"dist/*"
|
|
12
12
|
],
|
|
13
|
-
"engines"
|
|
14
|
-
"node"
|
|
13
|
+
"engines": {
|
|
14
|
+
"node": ">=16"
|
|
15
15
|
},
|
|
16
|
-
"scripts"
|
|
17
|
-
"start"
|
|
18
|
-
"dev"
|
|
19
|
-
"build"
|
|
20
|
-
"clean"
|
|
21
|
-
"prepublish"
|
|
16
|
+
"scripts": {
|
|
17
|
+
"start": "npm run dev",
|
|
18
|
+
"dev": "tsup src/index.ts --format esm,cjs --dts --outDir dist --watch --external react,clsx --sourcemap",
|
|
19
|
+
"build": "tsup src/index.ts --format esm,cjs --dts --outDir dist --external react,clsx",
|
|
20
|
+
"clean": "rimraf dist",
|
|
21
|
+
"prepublish": "npm run build"
|
|
22
22
|
},
|
|
23
|
-
"peerDependencies"
|
|
24
|
-
"react"
|
|
25
|
-
"react-dom"
|
|
23
|
+
"peerDependencies": {
|
|
24
|
+
"react": ">=16.8.0",
|
|
25
|
+
"react-dom": ">=16.8.0"
|
|
26
26
|
},
|
|
27
|
-
"prettier"
|
|
28
|
-
"printWidth"
|
|
29
|
-
"semi"
|
|
30
|
-
"singleQuote"
|
|
27
|
+
"prettier": {
|
|
28
|
+
"printWidth": 80,
|
|
29
|
+
"semi": false,
|
|
30
|
+
"singleQuote": true
|
|
31
31
|
},
|
|
32
|
-
"name"
|
|
33
|
-
"author"
|
|
34
|
-
"dependencies"
|
|
35
|
-
"@weaverse/core"
|
|
32
|
+
"name": "@weaverse/react",
|
|
33
|
+
"author": "Weaverse Team",
|
|
34
|
+
"dependencies": {
|
|
35
|
+
"@weaverse/core": "2.4.0"
|
|
36
36
|
}
|
|
37
37
|
}
|