@weaverse/hydrogen 5.0.0-next.0 → 5.1.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 +10 -8
- package/dist/index.d.ts +10 -8
- package/dist/index.js +281 -222
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +282 -223
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -6
- package/readme.md +37 -20
package/dist/index.d.mts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { SelectedOptionInput } from '@shopify/hydrogen/storefront-api-types';
|
|
2
2
|
import { EventEmitter, BasicInput as BasicInput$1, ElementData, WeaverseElement, ElementSchema, WeaverseProjectDataType, WeaverseCoreParams, WeaverseResourcePickerData, Weaverse, PlatformTypeEnum, WeaverseItemStore } from '@weaverse/react';
|
|
3
3
|
export { InputType, PositionInputValue, WeaverseImage, WeaverseVideo, isBrowser, isIframe, useChildInstances, useItemInstance, useParentInstance, useWeaverse } from '@weaverse/react';
|
|
4
|
-
import { NavigateFunction } from 'react-router';
|
|
5
4
|
import { createWithCache, I18nBase, HydrogenContext } from '@shopify/hydrogen';
|
|
6
5
|
import { LoaderFunctionArgs, AppLoadContext } from '@shopify/remix-oxygen';
|
|
7
|
-
import * as
|
|
6
|
+
import * as React$1 from 'react';
|
|
8
7
|
import { ForwardRefExoticComponent, ComponentType, JSX } from 'react';
|
|
8
|
+
import { NavigateFunction } from 'react-router';
|
|
9
9
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
10
10
|
|
|
11
11
|
type WeaverseThemeData = {
|
|
@@ -81,7 +81,8 @@ interface HydrogenComponentData extends ElementData {
|
|
|
81
81
|
}
|
|
82
82
|
interface HydrogenComponentSchema extends ElementSchema {
|
|
83
83
|
childTypes?: string[];
|
|
84
|
-
inspector
|
|
84
|
+
inspector?: InspectorGroup[];
|
|
85
|
+
settings?: InspectorGroup[];
|
|
85
86
|
presets?: Omit<HydrogenComponentPresets, 'type'>;
|
|
86
87
|
limit?: number;
|
|
87
88
|
enabledOn?: {
|
|
@@ -106,7 +107,7 @@ interface InspectorGroup {
|
|
|
106
107
|
interface HydrogenComponentProps<L = any> extends WeaverseElement {
|
|
107
108
|
className?: string;
|
|
108
109
|
loaderData?: L;
|
|
109
|
-
children?: React.JSX.Element[];
|
|
110
|
+
children?: React$1.JSX.Element[];
|
|
110
111
|
}
|
|
111
112
|
type WeaverseLoaderRequestInfo = {
|
|
112
113
|
search: string;
|
|
@@ -138,7 +139,7 @@ type HydrogenComponentPresets = {
|
|
|
138
139
|
[key: string]: any;
|
|
139
140
|
};
|
|
140
141
|
interface HydrogenElement {
|
|
141
|
-
Component: ForwardRefExoticComponent<HydrogenComponentProps
|
|
142
|
+
Component: ForwardRefExoticComponent<HydrogenComponentProps> | ((props: HydrogenComponentProps) => React$1.JSX.Element);
|
|
142
143
|
type: string;
|
|
143
144
|
schema?: HydrogenComponentSchema;
|
|
144
145
|
loader?: (args: ComponentLoaderArgs) => Promise<unknown>;
|
|
@@ -150,7 +151,7 @@ interface WeaverseHydrogenParams extends Omit<WeaverseCoreParams, 'ItemConstruct
|
|
|
150
151
|
requestInfo: WeaverseLoaderRequestInfo;
|
|
151
152
|
}
|
|
152
153
|
interface HydrogenComponent<T extends HydrogenComponentProps = any> {
|
|
153
|
-
default: ForwardRefExoticComponent<T
|
|
154
|
+
default: ForwardRefExoticComponent<T> | ((props: T) => React$1.JSX.Element);
|
|
154
155
|
schema: HydrogenComponentSchema;
|
|
155
156
|
loader?: (args: ComponentLoaderArgs) => Promise<unknown>;
|
|
156
157
|
}
|
|
@@ -212,7 +213,8 @@ interface HydrogenThemeSchema {
|
|
|
212
213
|
documentationUrl: string;
|
|
213
214
|
supportUrl: string;
|
|
214
215
|
};
|
|
215
|
-
inspector
|
|
216
|
+
inspector?: InspectorGroup[];
|
|
217
|
+
settings?: InspectorGroup[];
|
|
216
218
|
i18n?: {
|
|
217
219
|
urlStructure: 'url-path' | 'subdomain' | 'top-level-domain';
|
|
218
220
|
defaultLocale: WeaverseI18n;
|
|
@@ -290,7 +292,7 @@ declare class WeaverseHydrogen extends Weaverse {
|
|
|
290
292
|
constructor(params: WeaverseHydrogenParams);
|
|
291
293
|
}
|
|
292
294
|
declare function registerComponent(element: HydrogenElement): void;
|
|
293
|
-
declare let WeaverseHydrogenRoot:
|
|
295
|
+
declare let WeaverseHydrogenRoot: React$1.MemoExoticComponent<({ components, errorComponent: ErrorComponent, }: {
|
|
294
296
|
components: HydrogenComponent[];
|
|
295
297
|
errorComponent?: React.FC<{
|
|
296
298
|
error: any;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { SelectedOptionInput } from '@shopify/hydrogen/storefront-api-types';
|
|
2
2
|
import { EventEmitter, BasicInput as BasicInput$1, ElementData, WeaverseElement, ElementSchema, WeaverseProjectDataType, WeaverseCoreParams, WeaverseResourcePickerData, Weaverse, PlatformTypeEnum, WeaverseItemStore } from '@weaverse/react';
|
|
3
3
|
export { InputType, PositionInputValue, WeaverseImage, WeaverseVideo, isBrowser, isIframe, useChildInstances, useItemInstance, useParentInstance, useWeaverse } from '@weaverse/react';
|
|
4
|
-
import { NavigateFunction } from 'react-router';
|
|
5
4
|
import { createWithCache, I18nBase, HydrogenContext } from '@shopify/hydrogen';
|
|
6
5
|
import { LoaderFunctionArgs, AppLoadContext } from '@shopify/remix-oxygen';
|
|
7
|
-
import * as
|
|
6
|
+
import * as React$1 from 'react';
|
|
8
7
|
import { ForwardRefExoticComponent, ComponentType, JSX } from 'react';
|
|
8
|
+
import { NavigateFunction } from 'react-router';
|
|
9
9
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
10
10
|
|
|
11
11
|
type WeaverseThemeData = {
|
|
@@ -81,7 +81,8 @@ interface HydrogenComponentData extends ElementData {
|
|
|
81
81
|
}
|
|
82
82
|
interface HydrogenComponentSchema extends ElementSchema {
|
|
83
83
|
childTypes?: string[];
|
|
84
|
-
inspector
|
|
84
|
+
inspector?: InspectorGroup[];
|
|
85
|
+
settings?: InspectorGroup[];
|
|
85
86
|
presets?: Omit<HydrogenComponentPresets, 'type'>;
|
|
86
87
|
limit?: number;
|
|
87
88
|
enabledOn?: {
|
|
@@ -106,7 +107,7 @@ interface InspectorGroup {
|
|
|
106
107
|
interface HydrogenComponentProps<L = any> extends WeaverseElement {
|
|
107
108
|
className?: string;
|
|
108
109
|
loaderData?: L;
|
|
109
|
-
children?: React.JSX.Element[];
|
|
110
|
+
children?: React$1.JSX.Element[];
|
|
110
111
|
}
|
|
111
112
|
type WeaverseLoaderRequestInfo = {
|
|
112
113
|
search: string;
|
|
@@ -138,7 +139,7 @@ type HydrogenComponentPresets = {
|
|
|
138
139
|
[key: string]: any;
|
|
139
140
|
};
|
|
140
141
|
interface HydrogenElement {
|
|
141
|
-
Component: ForwardRefExoticComponent<HydrogenComponentProps
|
|
142
|
+
Component: ForwardRefExoticComponent<HydrogenComponentProps> | ((props: HydrogenComponentProps) => React$1.JSX.Element);
|
|
142
143
|
type: string;
|
|
143
144
|
schema?: HydrogenComponentSchema;
|
|
144
145
|
loader?: (args: ComponentLoaderArgs) => Promise<unknown>;
|
|
@@ -150,7 +151,7 @@ interface WeaverseHydrogenParams extends Omit<WeaverseCoreParams, 'ItemConstruct
|
|
|
150
151
|
requestInfo: WeaverseLoaderRequestInfo;
|
|
151
152
|
}
|
|
152
153
|
interface HydrogenComponent<T extends HydrogenComponentProps = any> {
|
|
153
|
-
default: ForwardRefExoticComponent<T
|
|
154
|
+
default: ForwardRefExoticComponent<T> | ((props: T) => React$1.JSX.Element);
|
|
154
155
|
schema: HydrogenComponentSchema;
|
|
155
156
|
loader?: (args: ComponentLoaderArgs) => Promise<unknown>;
|
|
156
157
|
}
|
|
@@ -212,7 +213,8 @@ interface HydrogenThemeSchema {
|
|
|
212
213
|
documentationUrl: string;
|
|
213
214
|
supportUrl: string;
|
|
214
215
|
};
|
|
215
|
-
inspector
|
|
216
|
+
inspector?: InspectorGroup[];
|
|
217
|
+
settings?: InspectorGroup[];
|
|
216
218
|
i18n?: {
|
|
217
219
|
urlStructure: 'url-path' | 'subdomain' | 'top-level-domain';
|
|
218
220
|
defaultLocale: WeaverseI18n;
|
|
@@ -290,7 +292,7 @@ declare class WeaverseHydrogen extends Weaverse {
|
|
|
290
292
|
constructor(params: WeaverseHydrogenParams);
|
|
291
293
|
}
|
|
292
294
|
declare function registerComponent(element: HydrogenElement): void;
|
|
293
|
-
declare let WeaverseHydrogenRoot:
|
|
295
|
+
declare let WeaverseHydrogenRoot: React$1.MemoExoticComponent<({ components, errorComponent: ErrorComponent, }: {
|
|
294
296
|
components: HydrogenComponent[];
|
|
295
297
|
errorComponent?: React.FC<{
|
|
296
298
|
error: any;
|
package/dist/index.js
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
var hydrogen = require('@shopify/hydrogen');
|
|
4
4
|
var react = require('@weaverse/react');
|
|
5
|
-
var reactRouter = require('react-router');
|
|
6
5
|
var react$1 = require('react');
|
|
7
6
|
var reactErrorBoundary = require('react-error-boundary');
|
|
7
|
+
var reactRouter = require('react-router');
|
|
8
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
9
|
|
|
10
10
|
var __defProp = Object.defineProperty;
|
|
@@ -13,7 +13,52 @@ var __export = (target, all) => {
|
|
|
13
13
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
14
14
|
};
|
|
15
15
|
|
|
16
|
+
// src/components/main.tsx
|
|
17
|
+
var main_exports = {};
|
|
18
|
+
__export(main_exports, {
|
|
19
|
+
default: () => main_default,
|
|
20
|
+
schema: () => schema
|
|
21
|
+
});
|
|
22
|
+
function Main(props) {
|
|
23
|
+
let { children, dangerouslySetInnerHTML, ...rest } = props;
|
|
24
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
25
|
+
"div",
|
|
26
|
+
{
|
|
27
|
+
...rest,
|
|
28
|
+
children,
|
|
29
|
+
dangerouslySetInnerHTML: children ? void 0 : dangerouslySetInnerHTML
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
var main_default = Main;
|
|
34
|
+
var schema = {
|
|
35
|
+
type: "main",
|
|
36
|
+
title: "Main",
|
|
37
|
+
settings: []
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
// src/components/index.ts
|
|
41
|
+
var defaultComponents = [main_exports];
|
|
42
|
+
|
|
16
43
|
// src/utils/index.ts
|
|
44
|
+
var warnedTypes = /* @__PURE__ */ new Set();
|
|
45
|
+
function logOnce(type, message) {
|
|
46
|
+
if (!warnedTypes.has(type)) {
|
|
47
|
+
console.warn(message);
|
|
48
|
+
warnedTypes.add(type);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
function deepMergeArrays(target, source) {
|
|
52
|
+
return [...target, ...source];
|
|
53
|
+
}
|
|
54
|
+
function mergeInspectorSettings(settings, inspector, type) {
|
|
55
|
+
if (!inspector?.length) return settings;
|
|
56
|
+
if (!settings?.length) return inspector;
|
|
57
|
+
console.info(
|
|
58
|
+
`Schema "${type}": Both 'settings' and 'inspector' found. Using 'settings' with 'inspector' as fallback.`
|
|
59
|
+
);
|
|
60
|
+
return deepMergeArrays(settings, inspector);
|
|
61
|
+
}
|
|
17
62
|
function getRequestQueries(request) {
|
|
18
63
|
let url = new URL(request.url);
|
|
19
64
|
return Array.from(url.searchParams.entries()).reduce(
|
|
@@ -59,9 +104,53 @@ function getWeaverseConfigs(request, env) {
|
|
|
59
104
|
}
|
|
60
105
|
function generateDataFromSchema(schema2) {
|
|
61
106
|
let data = {};
|
|
62
|
-
let
|
|
63
|
-
|
|
64
|
-
|
|
107
|
+
let inspectorGroups = [];
|
|
108
|
+
const isComponentSchema = (s) => {
|
|
109
|
+
return "type" in s && typeof s.type === "string";
|
|
110
|
+
};
|
|
111
|
+
if (isComponentSchema(schema2)) {
|
|
112
|
+
if (schema2.settings) {
|
|
113
|
+
inspectorGroups = schema2.settings;
|
|
114
|
+
}
|
|
115
|
+
if (schema2.inspector) {
|
|
116
|
+
if (schema2.settings?.length) {
|
|
117
|
+
inspectorGroups = mergeInspectorSettings(
|
|
118
|
+
schema2.settings,
|
|
119
|
+
schema2.inspector,
|
|
120
|
+
schema2.type || "unknown"
|
|
121
|
+
);
|
|
122
|
+
} else {
|
|
123
|
+
inspectorGroups = schema2.inspector;
|
|
124
|
+
if (schema2.type) {
|
|
125
|
+
logOnce(
|
|
126
|
+
schema2.type,
|
|
127
|
+
`\u26A0\uFE0F Schema "${schema2.type}": The 'inspector' property is deprecated. Please use 'settings' instead.`
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
} else {
|
|
133
|
+
if (schema2.settings) {
|
|
134
|
+
inspectorGroups = schema2.settings;
|
|
135
|
+
}
|
|
136
|
+
if (schema2.inspector) {
|
|
137
|
+
if (schema2.settings?.length) {
|
|
138
|
+
inspectorGroups = mergeInspectorSettings(
|
|
139
|
+
schema2.settings,
|
|
140
|
+
schema2.inspector,
|
|
141
|
+
"Theme Schema"
|
|
142
|
+
);
|
|
143
|
+
} else {
|
|
144
|
+
inspectorGroups = schema2.inspector;
|
|
145
|
+
logOnce(
|
|
146
|
+
"ThemeSchema",
|
|
147
|
+
`\u26A0\uFE0F Theme Schema: The 'inspector' property is deprecated. Please use 'settings' instead.`
|
|
148
|
+
);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
if (inspectorGroups?.length) {
|
|
153
|
+
for (let group of inspectorGroups) {
|
|
65
154
|
for (let input of group.inputs) {
|
|
66
155
|
let { name, defaultValue } = input;
|
|
67
156
|
if (name && defaultValue !== null && defaultValue !== void 0) {
|
|
@@ -133,8 +222,195 @@ function getPreviewData(type, components, weaverseHost) {
|
|
|
133
222
|
}
|
|
134
223
|
};
|
|
135
224
|
}
|
|
225
|
+
var ThemeSettingsStore = class extends react.EventEmitter {
|
|
226
|
+
settings = {};
|
|
227
|
+
schema;
|
|
228
|
+
publicEnv;
|
|
229
|
+
constructor(data) {
|
|
230
|
+
super();
|
|
231
|
+
let { theme, schema: schema2, publicEnv } = data || {};
|
|
232
|
+
this.settings = { ...theme };
|
|
233
|
+
this.schema = schema2;
|
|
234
|
+
this.publicEnv = publicEnv;
|
|
235
|
+
if (react.isBrowser) {
|
|
236
|
+
window.__weaverseThemeSettingsStore = this;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
updateThemeSettings = (newSettings) => {
|
|
240
|
+
this.settings = {
|
|
241
|
+
...this.settings,
|
|
242
|
+
...newSettings
|
|
243
|
+
};
|
|
244
|
+
this.emit(this.settings);
|
|
245
|
+
};
|
|
246
|
+
getSnapshot = () => {
|
|
247
|
+
return this.settings;
|
|
248
|
+
};
|
|
249
|
+
getServerSnapshot = () => {
|
|
250
|
+
return this.settings;
|
|
251
|
+
};
|
|
252
|
+
};
|
|
253
|
+
function useThemeSettingsStore() {
|
|
254
|
+
let data = reactRouter.useRouteLoaderData("root");
|
|
255
|
+
if (react.isBrowser && window.__weaverseThemeSettingsStore) {
|
|
256
|
+
return window.__weaverseThemeSettingsStore;
|
|
257
|
+
}
|
|
258
|
+
return new ThemeSettingsStore(data?.weaverseTheme);
|
|
259
|
+
}
|
|
136
260
|
|
|
137
|
-
// src/
|
|
261
|
+
// src/utils/use-studio.ts
|
|
262
|
+
function useStudio(weaverse) {
|
|
263
|
+
let { revalidate } = reactRouter.useRevalidator();
|
|
264
|
+
let navigation = reactRouter.useNavigation();
|
|
265
|
+
let { pathname, search } = reactRouter.useLocation();
|
|
266
|
+
let navigate = reactRouter.useNavigate();
|
|
267
|
+
let themeSettingsStore = useThemeSettingsStore();
|
|
268
|
+
let { isDesignMode, weaverseHost, weaverseVersion, isPreviewMode } = weaverse;
|
|
269
|
+
react$1.useEffect(() => {
|
|
270
|
+
if (navigation.state === "idle") {
|
|
271
|
+
if (isPreviewMode) {
|
|
272
|
+
let previewSrc = `${weaverseHost}/static/studio/hydrogen/preview.js?v=${weaverseVersion}`;
|
|
273
|
+
react.loadScript(previewSrc).catch(console.error);
|
|
274
|
+
} else if (isDesignMode) {
|
|
275
|
+
weaverse.internal = {
|
|
276
|
+
...weaverse.internal,
|
|
277
|
+
navigate,
|
|
278
|
+
revalidate,
|
|
279
|
+
themeSettingsStore
|
|
280
|
+
};
|
|
281
|
+
let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
|
|
282
|
+
react.loadScript(studioSrc).then(() => {
|
|
283
|
+
window.weaverseStudio?.init(weaverse);
|
|
284
|
+
}).catch(console.error);
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
}, [pathname, search, navigation.state]);
|
|
288
|
+
usePixel(weaverse);
|
|
289
|
+
}
|
|
290
|
+
function usePixel(context) {
|
|
291
|
+
let { projectId, pageId, weaverseHost, isDesignMode } = context;
|
|
292
|
+
react$1.useEffect(() => {
|
|
293
|
+
if (!projectId || !pageId || !weaverseHost || isDesignMode) return;
|
|
294
|
+
let url = `${weaverseHost}/api/public/px`;
|
|
295
|
+
let img = new Image();
|
|
296
|
+
img.onload = () => img.remove();
|
|
297
|
+
img.src = `${url}?projectId=${projectId}&pageId=${pageId}`;
|
|
298
|
+
}, []);
|
|
299
|
+
}
|
|
300
|
+
var WeaverseHydrogenItem = class extends react.WeaverseItemStore {
|
|
301
|
+
constructor(initialData, weaverse) {
|
|
302
|
+
super(initialData, weaverse);
|
|
303
|
+
let { data, ...rest } = initialData;
|
|
304
|
+
if (!this.Element?.schema) {
|
|
305
|
+
console.error("Element is missing schema or not found!");
|
|
306
|
+
return;
|
|
307
|
+
}
|
|
308
|
+
let schemaData = generateDataFromSchema(this.Element.schema);
|
|
309
|
+
Object.assign(this._store, schemaData, data, rest);
|
|
310
|
+
}
|
|
311
|
+
get Element() {
|
|
312
|
+
return super.Element;
|
|
313
|
+
}
|
|
314
|
+
};
|
|
315
|
+
react.Weaverse.ItemConstructor = WeaverseHydrogenItem;
|
|
316
|
+
var WeaverseHydrogen = class extends react.Weaverse {
|
|
317
|
+
platformType = "shopify-hydrogen";
|
|
318
|
+
pageId;
|
|
319
|
+
internal;
|
|
320
|
+
requestInfo;
|
|
321
|
+
static itemInstances;
|
|
322
|
+
static elementRegistry;
|
|
323
|
+
constructor(params) {
|
|
324
|
+
let { internal, pageId, requestInfo, ...coreParams } = params;
|
|
325
|
+
super({ ...coreParams });
|
|
326
|
+
this.internal = internal;
|
|
327
|
+
this.pageId = pageId;
|
|
328
|
+
this.requestInfo = requestInfo;
|
|
329
|
+
}
|
|
330
|
+
};
|
|
331
|
+
function createWeaverseInstance(params) {
|
|
332
|
+
if (react.isBrowser) {
|
|
333
|
+
window.__weaverses = window.__weaverses || {};
|
|
334
|
+
let weaverse = window.__weaverses[params.pageId];
|
|
335
|
+
if (!weaverse || weaverse?.requestInfo?.pathname !== params.requestInfo.pathname || weaverse?.requestInfo?.search !== params.requestInfo.search) {
|
|
336
|
+
weaverse = new WeaverseHydrogen(params);
|
|
337
|
+
window.__weaverses[params.pageId] = weaverse;
|
|
338
|
+
}
|
|
339
|
+
if (weaverse?.isDesignMode) {
|
|
340
|
+
weaverse.requestInfo = params.requestInfo;
|
|
341
|
+
window.weaverseStudio?.refreshStudio(params);
|
|
342
|
+
}
|
|
343
|
+
return weaverse;
|
|
344
|
+
}
|
|
345
|
+
return new WeaverseHydrogen(params);
|
|
346
|
+
}
|
|
347
|
+
var StudioBridge = react$1.memo(({ context }) => {
|
|
348
|
+
useStudio(context);
|
|
349
|
+
return null;
|
|
350
|
+
});
|
|
351
|
+
function RenderRoot(props) {
|
|
352
|
+
let { data, components } = props;
|
|
353
|
+
for (let comp of [...components, ...defaultComponents]) {
|
|
354
|
+
comp?.schema?.type && registerComponent({
|
|
355
|
+
type: comp?.schema.type,
|
|
356
|
+
Component: comp.default,
|
|
357
|
+
schema: comp.schema,
|
|
358
|
+
loader: comp.loader
|
|
359
|
+
});
|
|
360
|
+
}
|
|
361
|
+
let { page, configs, project, pageAssignment } = data || {};
|
|
362
|
+
let weaverse = createWeaverseInstance({
|
|
363
|
+
...configs,
|
|
364
|
+
data: page,
|
|
365
|
+
pageId: page?.id,
|
|
366
|
+
internal: { project, pageAssignment }
|
|
367
|
+
});
|
|
368
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
369
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.WeaverseRoot, { context: weaverse }),
|
|
370
|
+
/* @__PURE__ */ jsxRuntime.jsx(StudioBridge, { context: weaverse })
|
|
371
|
+
] });
|
|
372
|
+
}
|
|
373
|
+
function registerComponent(element) {
|
|
374
|
+
WeaverseHydrogen.registerElement(element);
|
|
375
|
+
}
|
|
376
|
+
var WeaverseHydrogenRoot = react$1.memo(
|
|
377
|
+
({
|
|
378
|
+
components,
|
|
379
|
+
errorComponent: ErrorComponent = ({ error }) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: error?.message || "An unexpected error occurred" })
|
|
380
|
+
}) => {
|
|
381
|
+
let loaderData = reactRouter.useLoaderData();
|
|
382
|
+
let data = loaderData?.weaverseData;
|
|
383
|
+
if (data) {
|
|
384
|
+
if (data instanceof Promise) {
|
|
385
|
+
return /* @__PURE__ */ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, { fallbackRender: ErrorComponent, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Suspense, { children: /* @__PURE__ */ jsxRuntime.jsx(reactRouter.Await, { resolve: data, children: (resolvedData) => /* @__PURE__ */ jsxRuntime.jsx(RenderRoot, { data: resolvedData, components }) }) }) });
|
|
386
|
+
}
|
|
387
|
+
return /* @__PURE__ */ jsxRuntime.jsx(RenderRoot, { data, components });
|
|
388
|
+
}
|
|
389
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
390
|
+
ErrorComponent,
|
|
391
|
+
{
|
|
392
|
+
error: { message: "No Weaverse data return from route loader!" }
|
|
393
|
+
}
|
|
394
|
+
);
|
|
395
|
+
}
|
|
396
|
+
);
|
|
397
|
+
var ThemeSettingsProvider = react$1.createContext(null);
|
|
398
|
+
ThemeSettingsProvider.displayName = "WeaverseThemeSettingsProvider";
|
|
399
|
+
function withWeaverse(Component) {
|
|
400
|
+
return (props) => {
|
|
401
|
+
let { settings } = useThemeSettingsStore();
|
|
402
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ThemeSettingsProvider.Provider, { value: settings, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props }) });
|
|
403
|
+
};
|
|
404
|
+
}
|
|
405
|
+
function useThemeSettings() {
|
|
406
|
+
let themeSettingsStore = useThemeSettingsStore();
|
|
407
|
+
let settings = react.useSafeExternalStore(
|
|
408
|
+
themeSettingsStore.subscribe,
|
|
409
|
+
themeSettingsStore.getSnapshot,
|
|
410
|
+
themeSettingsStore.getServerSnapshot
|
|
411
|
+
);
|
|
412
|
+
return settings;
|
|
413
|
+
}
|
|
138
414
|
var API_PATH = "api/public";
|
|
139
415
|
var DEFAULT_CACHE_STRATEGY = {
|
|
140
416
|
maxAge: 10,
|
|
@@ -383,223 +659,6 @@ var WeaverseClient = class {
|
|
|
383
659
|
};
|
|
384
660
|
};
|
|
385
661
|
|
|
386
|
-
// src/components/main.tsx
|
|
387
|
-
var main_exports = {};
|
|
388
|
-
__export(main_exports, {
|
|
389
|
-
default: () => main_default,
|
|
390
|
-
schema: () => schema
|
|
391
|
-
});
|
|
392
|
-
var Main = react$1.forwardRef((props, ref) => {
|
|
393
|
-
let { children, dangerouslySetInnerHTML, ...rest } = props;
|
|
394
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
395
|
-
"div",
|
|
396
|
-
{
|
|
397
|
-
ref,
|
|
398
|
-
...rest,
|
|
399
|
-
children,
|
|
400
|
-
dangerouslySetInnerHTML: children ? void 0 : dangerouslySetInnerHTML
|
|
401
|
-
}
|
|
402
|
-
);
|
|
403
|
-
});
|
|
404
|
-
var main_default = Main;
|
|
405
|
-
var schema = {
|
|
406
|
-
type: "main",
|
|
407
|
-
title: "Main",
|
|
408
|
-
inspector: []
|
|
409
|
-
};
|
|
410
|
-
|
|
411
|
-
// src/components/index.ts
|
|
412
|
-
var defaultComponents = [main_exports];
|
|
413
|
-
var ThemeSettingsStore = class extends react.EventEmitter {
|
|
414
|
-
settings = {};
|
|
415
|
-
schema;
|
|
416
|
-
publicEnv;
|
|
417
|
-
constructor(data) {
|
|
418
|
-
super();
|
|
419
|
-
let { theme, schema: schema2, publicEnv } = data || {};
|
|
420
|
-
this.settings = { ...theme };
|
|
421
|
-
this.schema = schema2;
|
|
422
|
-
this.publicEnv = publicEnv;
|
|
423
|
-
if (react.isBrowser) {
|
|
424
|
-
window.__weaverseThemeSettingsStore = this;
|
|
425
|
-
}
|
|
426
|
-
}
|
|
427
|
-
updateThemeSettings = (newSettings) => {
|
|
428
|
-
this.settings = {
|
|
429
|
-
...this.settings,
|
|
430
|
-
...newSettings
|
|
431
|
-
};
|
|
432
|
-
this.emit(this.settings);
|
|
433
|
-
};
|
|
434
|
-
getSnapshot = () => {
|
|
435
|
-
return this.settings;
|
|
436
|
-
};
|
|
437
|
-
getServerSnapshot = () => {
|
|
438
|
-
return this.settings;
|
|
439
|
-
};
|
|
440
|
-
};
|
|
441
|
-
function useThemeSettingsStore() {
|
|
442
|
-
let data = reactRouter.useRouteLoaderData("root");
|
|
443
|
-
if (react.isBrowser && window.__weaverseThemeSettingsStore) {
|
|
444
|
-
return window.__weaverseThemeSettingsStore;
|
|
445
|
-
}
|
|
446
|
-
return new ThemeSettingsStore(data?.weaverseTheme);
|
|
447
|
-
}
|
|
448
|
-
|
|
449
|
-
// src/utils/use-studio.ts
|
|
450
|
-
function useStudio(weaverse) {
|
|
451
|
-
let { revalidate } = reactRouter.useRevalidator();
|
|
452
|
-
let navigation = reactRouter.useNavigation();
|
|
453
|
-
let { pathname, search } = reactRouter.useLocation();
|
|
454
|
-
let navigate = reactRouter.useNavigate();
|
|
455
|
-
let themeSettingsStore = useThemeSettingsStore();
|
|
456
|
-
let { isDesignMode, weaverseHost, weaverseVersion, isPreviewMode } = weaverse;
|
|
457
|
-
react$1.useEffect(() => {
|
|
458
|
-
if (navigation.state === "idle") {
|
|
459
|
-
if (isPreviewMode) {
|
|
460
|
-
let previewSrc = `${weaverseHost}/static/studio/hydrogen/preview.js?v=${weaverseVersion}`;
|
|
461
|
-
react.loadScript(previewSrc).catch(console.error);
|
|
462
|
-
} else if (isDesignMode) {
|
|
463
|
-
weaverse.internal = {
|
|
464
|
-
...weaverse.internal,
|
|
465
|
-
navigate,
|
|
466
|
-
revalidate,
|
|
467
|
-
themeSettingsStore
|
|
468
|
-
};
|
|
469
|
-
let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
|
|
470
|
-
react.loadScript(studioSrc).then(() => {
|
|
471
|
-
window.weaverseStudio?.init(weaverse);
|
|
472
|
-
}).catch(console.error);
|
|
473
|
-
}
|
|
474
|
-
}
|
|
475
|
-
}, [pathname, search, navigation.state]);
|
|
476
|
-
usePixel(weaverse);
|
|
477
|
-
}
|
|
478
|
-
function usePixel(context) {
|
|
479
|
-
let { projectId, pageId, weaverseHost, isDesignMode } = context;
|
|
480
|
-
react$1.useEffect(() => {
|
|
481
|
-
if (!projectId || !pageId || !weaverseHost || isDesignMode) return;
|
|
482
|
-
let url = `${weaverseHost}/api/public/px`;
|
|
483
|
-
let img = new Image();
|
|
484
|
-
img.onload = () => img.remove();
|
|
485
|
-
img.src = `${url}?projectId=${projectId}&pageId=${pageId}`;
|
|
486
|
-
}, []);
|
|
487
|
-
}
|
|
488
|
-
var WeaverseHydrogenItem = class extends react.WeaverseItemStore {
|
|
489
|
-
constructor(initialData, weaverse) {
|
|
490
|
-
super(initialData, weaverse);
|
|
491
|
-
let { data, ...rest } = initialData;
|
|
492
|
-
if (!this.Element?.schema) {
|
|
493
|
-
console.error("Element is missing schema or not found!");
|
|
494
|
-
return;
|
|
495
|
-
}
|
|
496
|
-
let schemaData = generateDataFromSchema(this.Element.schema);
|
|
497
|
-
Object.assign(this._store, schemaData, data, rest);
|
|
498
|
-
}
|
|
499
|
-
get Element() {
|
|
500
|
-
return super.Element;
|
|
501
|
-
}
|
|
502
|
-
};
|
|
503
|
-
react.Weaverse.ItemConstructor = WeaverseHydrogenItem;
|
|
504
|
-
var WeaverseHydrogen = class extends react.Weaverse {
|
|
505
|
-
platformType = "shopify-hydrogen";
|
|
506
|
-
pageId;
|
|
507
|
-
internal;
|
|
508
|
-
requestInfo;
|
|
509
|
-
static itemInstances;
|
|
510
|
-
static elementRegistry;
|
|
511
|
-
constructor(params) {
|
|
512
|
-
let { internal, pageId, requestInfo, ...coreParams } = params;
|
|
513
|
-
super({ ...coreParams });
|
|
514
|
-
this.internal = internal;
|
|
515
|
-
this.pageId = pageId;
|
|
516
|
-
this.requestInfo = requestInfo;
|
|
517
|
-
}
|
|
518
|
-
};
|
|
519
|
-
function createWeaverseInstance(params) {
|
|
520
|
-
if (react.isBrowser) {
|
|
521
|
-
window.__weaverses = window.__weaverses || {};
|
|
522
|
-
let weaverse = window.__weaverses[params.pageId];
|
|
523
|
-
if (!weaverse || weaverse?.requestInfo?.pathname !== params.requestInfo.pathname || weaverse?.requestInfo?.search !== params.requestInfo.search) {
|
|
524
|
-
weaverse = new WeaverseHydrogen(params);
|
|
525
|
-
window.__weaverses[params.pageId] = weaverse;
|
|
526
|
-
}
|
|
527
|
-
if (weaverse?.isDesignMode) {
|
|
528
|
-
weaverse.requestInfo = params.requestInfo;
|
|
529
|
-
window.weaverseStudio?.refreshStudio(params);
|
|
530
|
-
}
|
|
531
|
-
return weaverse;
|
|
532
|
-
}
|
|
533
|
-
return new WeaverseHydrogen(params);
|
|
534
|
-
}
|
|
535
|
-
var StudioBridge = react$1.memo(({ context }) => {
|
|
536
|
-
useStudio(context);
|
|
537
|
-
return null;
|
|
538
|
-
});
|
|
539
|
-
function RenderRoot(props) {
|
|
540
|
-
let { data, components } = props;
|
|
541
|
-
for (let comp of [...components, ...defaultComponents]) {
|
|
542
|
-
comp?.schema?.type && registerComponent({
|
|
543
|
-
type: comp?.schema.type,
|
|
544
|
-
Component: comp.default,
|
|
545
|
-
schema: comp.schema,
|
|
546
|
-
loader: comp.loader
|
|
547
|
-
});
|
|
548
|
-
}
|
|
549
|
-
let { page, configs, project, pageAssignment } = data || {};
|
|
550
|
-
let weaverse = createWeaverseInstance({
|
|
551
|
-
...configs,
|
|
552
|
-
data: page,
|
|
553
|
-
pageId: page?.id,
|
|
554
|
-
internal: { project, pageAssignment }
|
|
555
|
-
});
|
|
556
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
557
|
-
/* @__PURE__ */ jsxRuntime.jsx(react.WeaverseRoot, { context: weaverse }),
|
|
558
|
-
/* @__PURE__ */ jsxRuntime.jsx(StudioBridge, { context: weaverse })
|
|
559
|
-
] });
|
|
560
|
-
}
|
|
561
|
-
function registerComponent(element) {
|
|
562
|
-
WeaverseHydrogen.registerElement(element);
|
|
563
|
-
}
|
|
564
|
-
var WeaverseHydrogenRoot = react$1.memo(
|
|
565
|
-
({
|
|
566
|
-
components,
|
|
567
|
-
errorComponent: ErrorComponent = ({ error }) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: error?.message || "An unexpected error occurred" })
|
|
568
|
-
}) => {
|
|
569
|
-
let loaderData = reactRouter.useLoaderData();
|
|
570
|
-
let data = loaderData?.weaverseData;
|
|
571
|
-
if (data) {
|
|
572
|
-
if (data instanceof Promise) {
|
|
573
|
-
return /* @__PURE__ */ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, { fallbackRender: ErrorComponent, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Suspense, { children: /* @__PURE__ */ jsxRuntime.jsx(reactRouter.Await, { resolve: data, children: (resolvedData) => /* @__PURE__ */ jsxRuntime.jsx(RenderRoot, { data: resolvedData, components }) }) }) });
|
|
574
|
-
}
|
|
575
|
-
return /* @__PURE__ */ jsxRuntime.jsx(RenderRoot, { data, components });
|
|
576
|
-
}
|
|
577
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
578
|
-
ErrorComponent,
|
|
579
|
-
{
|
|
580
|
-
error: { message: "No Weaverse data return from route loader!" }
|
|
581
|
-
}
|
|
582
|
-
);
|
|
583
|
-
}
|
|
584
|
-
);
|
|
585
|
-
var ThemeSettingsProvider = react$1.createContext(null);
|
|
586
|
-
ThemeSettingsProvider.displayName = "WeaverseThemeSettingsProvider";
|
|
587
|
-
function withWeaverse(Component) {
|
|
588
|
-
return (props) => {
|
|
589
|
-
let { settings } = useThemeSettingsStore();
|
|
590
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ThemeSettingsProvider.Provider, { value: settings, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props }) });
|
|
591
|
-
};
|
|
592
|
-
}
|
|
593
|
-
function useThemeSettings() {
|
|
594
|
-
let themeSettingsStore = useThemeSettingsStore();
|
|
595
|
-
let settings = react.useSafeExternalStore(
|
|
596
|
-
themeSettingsStore.subscribe,
|
|
597
|
-
themeSettingsStore.getSnapshot,
|
|
598
|
-
themeSettingsStore.getServerSnapshot
|
|
599
|
-
);
|
|
600
|
-
return settings;
|
|
601
|
-
}
|
|
602
|
-
|
|
603
662
|
// src/index.ts
|
|
604
663
|
function getSelectedProductOptions(request) {
|
|
605
664
|
let options = hydrogen.getSelectedProductOptions(request);
|