@weaverse/hydrogen 1.0.52 → 1.0.54
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 +139 -0
- package/dist/index.d.ts +38 -17
- package/dist/index.js +58 -65
- package/dist/index.mjs +57 -64
- package/package.json +3 -3
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import React, { ForwardRefExoticComponent } from 'react';
|
|
2
|
+
import { LoaderArgs, AppLoadContext } from '@shopify/remix-oxygen';
|
|
3
|
+
import { ElementData, ElementSchema, BasicInput, WeaverseElement, Weaverse, WeaverseItemStore } from '@weaverse/react';
|
|
4
|
+
export * from '@weaverse/react';
|
|
5
|
+
|
|
6
|
+
type TODO = any;
|
|
7
|
+
declare module '@shopify/remix-oxygen' {
|
|
8
|
+
interface AppLoadContext {
|
|
9
|
+
waitUntil: ExecutionContext['waitUntil'];
|
|
10
|
+
session: TODO;
|
|
11
|
+
storefront: TODO;
|
|
12
|
+
env: TODO;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
type WeaverseLoaderArgs = LoaderArgs & {
|
|
16
|
+
itemData: HydrogenComponentData;
|
|
17
|
+
configs: {
|
|
18
|
+
projectId: string;
|
|
19
|
+
weaverseHost: string;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
interface HydrogenComponentData extends Omit<ElementData, 'childIds' | 'css'> {
|
|
23
|
+
id: string;
|
|
24
|
+
type: string;
|
|
25
|
+
createdAt: string;
|
|
26
|
+
updatedAt: string;
|
|
27
|
+
deletedAt: string;
|
|
28
|
+
parentId: string;
|
|
29
|
+
children: {
|
|
30
|
+
id: string;
|
|
31
|
+
}[];
|
|
32
|
+
loaderData: unknown;
|
|
33
|
+
data: Record<string, unknown>;
|
|
34
|
+
}
|
|
35
|
+
type ComponentFlags = Partial<Record<'isSection', boolean>>;
|
|
36
|
+
interface HydrogenComponentSchema extends Omit<ElementSchema, 'parentTypes' | 'flags' | 'inspector'> {
|
|
37
|
+
flags?: ComponentFlags;
|
|
38
|
+
childTypes?: string[];
|
|
39
|
+
inspector: InspectorGroup[];
|
|
40
|
+
presets?: Omit<HydrogenComponentPresets, 'type'>;
|
|
41
|
+
}
|
|
42
|
+
interface InspectorGroup {
|
|
43
|
+
group: string;
|
|
44
|
+
inputs: BasicInput[];
|
|
45
|
+
}
|
|
46
|
+
interface HydrogenComponentProps<L = any> extends WeaverseElement {
|
|
47
|
+
className?: string;
|
|
48
|
+
loaderData?: L;
|
|
49
|
+
children?: React.JSX.Element[];
|
|
50
|
+
}
|
|
51
|
+
interface WeaverseHydrogen extends Omit<Weaverse, 'itemInstances' | 'elementInstances' | 'registerElement'> {
|
|
52
|
+
itemInstances: Map<string | number, HydrogenComponentInstance>;
|
|
53
|
+
elementInstances: Map<string, HydrogenElement>;
|
|
54
|
+
registerElement(element: HydrogenElement): void;
|
|
55
|
+
internal: WeaverseInternal;
|
|
56
|
+
}
|
|
57
|
+
type WeaverseInternal = {
|
|
58
|
+
themeSchema: HydrogenThemeSchema;
|
|
59
|
+
pageAssignment: any;
|
|
60
|
+
project: {
|
|
61
|
+
config: {
|
|
62
|
+
theme: Record<string, any>;
|
|
63
|
+
};
|
|
64
|
+
[key: string]: any;
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
type HydrogenComponentPresets = {
|
|
68
|
+
type: string;
|
|
69
|
+
children?: HydrogenComponentPresets[];
|
|
70
|
+
};
|
|
71
|
+
interface HydrogenElement {
|
|
72
|
+
Component: ForwardRefExoticComponent<HydrogenComponentProps>;
|
|
73
|
+
type: string;
|
|
74
|
+
schema?: HydrogenComponentSchema;
|
|
75
|
+
}
|
|
76
|
+
interface HydrogenComponentInstance extends Omit<WeaverseItemStore, '_flags' | 'data' | 'Element'> {
|
|
77
|
+
get _element(): HTMLElement | null;
|
|
78
|
+
get _flags(): ComponentFlags;
|
|
79
|
+
get Element(): HydrogenElement | undefined;
|
|
80
|
+
get data(): HydrogenComponentData;
|
|
81
|
+
_store: HydrogenComponentData;
|
|
82
|
+
}
|
|
83
|
+
interface HydrogenComponent<T extends HydrogenComponentProps = any> {
|
|
84
|
+
default: ForwardRefExoticComponent<T>;
|
|
85
|
+
schema: HydrogenComponentSchema;
|
|
86
|
+
loader?: (args: WeaverseLoaderArgs) => Promise<unknown>;
|
|
87
|
+
}
|
|
88
|
+
type HydrogenPageConfigs = {
|
|
89
|
+
projectId: string;
|
|
90
|
+
weaverseHost: string;
|
|
91
|
+
version?: string;
|
|
92
|
+
isDesignMode?: boolean;
|
|
93
|
+
[key: string]: any;
|
|
94
|
+
};
|
|
95
|
+
interface HydrogenPageData {
|
|
96
|
+
configs: HydrogenPageConfigs;
|
|
97
|
+
page: any;
|
|
98
|
+
project: any;
|
|
99
|
+
pageAssignment: any;
|
|
100
|
+
}
|
|
101
|
+
interface WeaverseHydrogenRootProps {
|
|
102
|
+
weaverseData: HydrogenPageData;
|
|
103
|
+
components: Record<string, HydrogenComponent>;
|
|
104
|
+
themeSchema: HydrogenThemeSchema;
|
|
105
|
+
}
|
|
106
|
+
type HydrogenThemeInfo = {
|
|
107
|
+
name: string;
|
|
108
|
+
version: string;
|
|
109
|
+
author: string;
|
|
110
|
+
documentationUrl: string;
|
|
111
|
+
supportUrl: string;
|
|
112
|
+
};
|
|
113
|
+
interface HydrogenThemeSchema {
|
|
114
|
+
info: HydrogenThemeInfo;
|
|
115
|
+
inspector: InspectorGroup[];
|
|
116
|
+
}
|
|
117
|
+
type PageType = (typeof PageType)[keyof typeof PageType];
|
|
118
|
+
type WeaverseLoaderConfigs = {
|
|
119
|
+
language?: string;
|
|
120
|
+
type?: PageType;
|
|
121
|
+
handle?: string;
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
declare function useThemeSettings(): any[];
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* Fetch with server cache requires a storefront.cache instance which is Cloudflare Cache and a waitUntil function, otherwise it will just fetch the url.
|
|
128
|
+
*/
|
|
129
|
+
declare let fetchWithServerCache: ({ url, options, context, }: {
|
|
130
|
+
url: string;
|
|
131
|
+
options?: Request | RequestInit | undefined;
|
|
132
|
+
context: AppLoadContext;
|
|
133
|
+
}) => Promise<any>;
|
|
134
|
+
|
|
135
|
+
declare function weaverseLoader(args: LoaderArgs, components: Record<string, HydrogenComponent>, loaderConfigs?: WeaverseLoaderConfigs): Promise<HydrogenPageData | null>;
|
|
136
|
+
|
|
137
|
+
declare function WeaverseHydrogenRoot(props: WeaverseHydrogenRootProps): React.JSX.Element;
|
|
138
|
+
|
|
139
|
+
export { ComponentFlags, HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageConfigs, HydrogenPageData, HydrogenThemeInfo, HydrogenThemeSchema, InspectorGroup, PageType, TODO, WeaverseHydrogen, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderArgs, WeaverseLoaderConfigs, fetchWithServerCache, useThemeSettings, weaverseLoader };
|
package/dist/index.d.ts
CHANGED
|
@@ -13,7 +13,7 @@ declare module '@shopify/remix-oxygen' {
|
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
type WeaverseLoaderArgs = LoaderArgs & {
|
|
16
|
-
|
|
16
|
+
itemData: HydrogenComponentData;
|
|
17
17
|
configs: {
|
|
18
18
|
projectId: string;
|
|
19
19
|
weaverseHost: string;
|
|
@@ -52,7 +52,18 @@ interface WeaverseHydrogen extends Omit<Weaverse, 'itemInstances' | 'elementInst
|
|
|
52
52
|
itemInstances: Map<string | number, HydrogenComponentInstance>;
|
|
53
53
|
elementInstances: Map<string, HydrogenElement>;
|
|
54
54
|
registerElement(element: HydrogenElement): void;
|
|
55
|
+
internal: WeaverseInternal;
|
|
55
56
|
}
|
|
57
|
+
type WeaverseInternal = {
|
|
58
|
+
themeSchema: HydrogenThemeSchema;
|
|
59
|
+
pageAssignment: any;
|
|
60
|
+
project: {
|
|
61
|
+
config: {
|
|
62
|
+
theme: Record<string, any>;
|
|
63
|
+
};
|
|
64
|
+
[key: string]: any;
|
|
65
|
+
};
|
|
66
|
+
};
|
|
56
67
|
type HydrogenComponentPresets = {
|
|
57
68
|
type: string;
|
|
58
69
|
children?: HydrogenComponentPresets[];
|
|
@@ -69,7 +80,7 @@ interface HydrogenComponentInstance extends Omit<WeaverseItemStore, '_flags' | '
|
|
|
69
80
|
get data(): HydrogenComponentData;
|
|
70
81
|
_store: HydrogenComponentData;
|
|
71
82
|
}
|
|
72
|
-
interface HydrogenComponent<T =
|
|
83
|
+
interface HydrogenComponent<T extends HydrogenComponentProps = any> {
|
|
73
84
|
default: ForwardRefExoticComponent<T>;
|
|
74
85
|
schema: HydrogenComponentSchema;
|
|
75
86
|
loader?: (args: WeaverseLoaderArgs) => Promise<unknown>;
|
|
@@ -82,25 +93,35 @@ type HydrogenPageConfigs = {
|
|
|
82
93
|
[key: string]: any;
|
|
83
94
|
};
|
|
84
95
|
interface HydrogenPageData {
|
|
85
|
-
page: any;
|
|
86
96
|
configs: HydrogenPageConfigs;
|
|
97
|
+
page: any;
|
|
87
98
|
project: any;
|
|
88
|
-
|
|
99
|
+
pageAssignment: any;
|
|
89
100
|
}
|
|
90
|
-
type WeaverseHydrogenLoaderData = {
|
|
91
|
-
weaverseData?: HydrogenPageData;
|
|
92
|
-
[key: string]: any;
|
|
93
|
-
};
|
|
94
101
|
interface WeaverseHydrogenRootProps {
|
|
102
|
+
weaverseData: HydrogenPageData;
|
|
95
103
|
components: Record<string, HydrogenComponent>;
|
|
96
|
-
|
|
97
|
-
themeSchema?: InspectorGroup[];
|
|
104
|
+
themeSchema: HydrogenThemeSchema;
|
|
98
105
|
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
106
|
+
type HydrogenThemeInfo = {
|
|
107
|
+
name: string;
|
|
108
|
+
version: string;
|
|
109
|
+
author: string;
|
|
110
|
+
documentationUrl: string;
|
|
111
|
+
supportUrl: string;
|
|
103
112
|
};
|
|
113
|
+
interface HydrogenThemeSchema {
|
|
114
|
+
info: HydrogenThemeInfo;
|
|
115
|
+
inspector: InspectorGroup[];
|
|
116
|
+
}
|
|
117
|
+
type PageType = (typeof PageType)[keyof typeof PageType];
|
|
118
|
+
type WeaverseLoaderConfigs = {
|
|
119
|
+
language?: string;
|
|
120
|
+
type?: PageType;
|
|
121
|
+
handle?: string;
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
declare function useThemeSettings(): any[];
|
|
104
125
|
|
|
105
126
|
/**
|
|
106
127
|
* Fetch with server cache requires a storefront.cache instance which is Cloudflare Cache and a waitUntil function, otherwise it will just fetch the url.
|
|
@@ -111,8 +132,8 @@ declare let fetchWithServerCache: ({ url, options, context, }: {
|
|
|
111
132
|
context: AppLoadContext;
|
|
112
133
|
}) => Promise<any>;
|
|
113
134
|
|
|
114
|
-
declare function weaverseLoader(args: LoaderArgs, components: Record<string, HydrogenComponent
|
|
135
|
+
declare function weaverseLoader(args: LoaderArgs, components: Record<string, HydrogenComponent>, loaderConfigs?: WeaverseLoaderConfigs): Promise<HydrogenPageData | null>;
|
|
115
136
|
|
|
116
|
-
declare
|
|
137
|
+
declare function WeaverseHydrogenRoot(props: WeaverseHydrogenRootProps): React.JSX.Element;
|
|
117
138
|
|
|
118
|
-
export { ComponentFlags, HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageConfigs, HydrogenPageData, InspectorGroup, TODO, WeaverseHydrogen,
|
|
139
|
+
export { ComponentFlags, HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageConfigs, HydrogenPageData, HydrogenThemeInfo, HydrogenThemeSchema, InspectorGroup, PageType, TODO, WeaverseHydrogen, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderArgs, WeaverseLoaderConfigs, fetchWithServerCache, useThemeSettings, weaverseLoader };
|
package/dist/index.js
CHANGED
|
@@ -33,7 +33,7 @@ var src_exports = {};
|
|
|
33
33
|
__export(src_exports, {
|
|
34
34
|
WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
|
|
35
35
|
fetchWithServerCache: () => fetchWithServerCache,
|
|
36
|
-
|
|
36
|
+
useThemeSettings: () => useThemeSettings,
|
|
37
37
|
weaverseLoader: () => weaverseLoader
|
|
38
38
|
});
|
|
39
39
|
module.exports = __toCommonJS(src_exports);
|
|
@@ -42,31 +42,28 @@ var import_react5 = __toESM(require("react"));
|
|
|
42
42
|
|
|
43
43
|
// src/context.ts
|
|
44
44
|
var import_react = require("@weaverse/react");
|
|
45
|
-
function
|
|
46
|
-
return new import_react.Weaverse(init);
|
|
47
|
-
}
|
|
48
|
-
function createCachedContext(init) {
|
|
45
|
+
function createCachedWeaverseInstance(init) {
|
|
49
46
|
if (import_react.isBrowser) {
|
|
50
47
|
window.__weaverses = window.__weaverses || {};
|
|
51
48
|
let pathname = window.location.pathname;
|
|
52
49
|
if (!window.__weaverses[pathname]) {
|
|
53
|
-
window.__weaverses[pathname] =
|
|
50
|
+
window.__weaverses[pathname] = new import_react.Weaverse(init);
|
|
54
51
|
}
|
|
55
52
|
return window.__weaverses[pathname];
|
|
56
53
|
}
|
|
57
|
-
return
|
|
54
|
+
return new import_react.Weaverse(init);
|
|
58
55
|
}
|
|
59
|
-
function
|
|
60
|
-
|
|
61
|
-
let { page
|
|
62
|
-
let weaverse =
|
|
56
|
+
function createWeaverseInstance(weaverseData, components) {
|
|
57
|
+
console.log("\u{1F4BF} Weaverse data", weaverseData);
|
|
58
|
+
let { page, configs = {}, project, pageAssignment } = weaverseData || {};
|
|
59
|
+
let weaverse = createCachedWeaverseInstance({
|
|
63
60
|
...configs,
|
|
64
|
-
data: page,
|
|
61
|
+
data: page || {},
|
|
65
62
|
pageId: page?.id,
|
|
66
63
|
platformType: "shopify-hydrogen"
|
|
67
64
|
});
|
|
68
65
|
weaverse.internal.project = project;
|
|
69
|
-
weaverse.internal.
|
|
66
|
+
weaverse.internal.pageAssignment = pageAssignment;
|
|
70
67
|
Object.entries(components).forEach(([key, component]) => {
|
|
71
68
|
weaverse.registerElement({
|
|
72
69
|
type: component?.schema?.type || key,
|
|
@@ -714,42 +711,41 @@ Weaverse2.WeaverseItemStore = WeaverseItemStore;
|
|
|
714
711
|
|
|
715
712
|
// src/hooks/use-studio.ts
|
|
716
713
|
var import_react2 = require("react");
|
|
717
|
-
function useStudio(
|
|
714
|
+
function useStudio(weaverse, themeSchema) {
|
|
718
715
|
(0, import_react2.useEffect)(() => {
|
|
719
|
-
if (
|
|
716
|
+
if (isIframe && weaverse.isDesignMode && !window.weaverseStudioInitialized) {
|
|
720
717
|
window.weaverseStudioInitialized = true;
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
let
|
|
724
|
-
let version = weaverseCore.weaverseVersion || Date.now();
|
|
718
|
+
weaverse.internal.themeSchema = themeSchema;
|
|
719
|
+
let host = weaverse.weaverseHost;
|
|
720
|
+
let version = weaverse.weaverseVersion || Date.now();
|
|
725
721
|
loadScript(`${host}/assets/studio/studio-bridge.js?v=${version}`).then(
|
|
726
722
|
() => {
|
|
727
|
-
window?.createWeaverseStudioBridge(
|
|
723
|
+
window?.createWeaverseStudioBridge(weaverse);
|
|
728
724
|
setTimeout(() => {
|
|
729
|
-
|
|
725
|
+
weaverse.triggerUpdate();
|
|
730
726
|
}, 2e3);
|
|
731
727
|
}
|
|
732
728
|
);
|
|
733
729
|
}
|
|
734
|
-
window.__weaverse =
|
|
735
|
-
}, [
|
|
730
|
+
window.__weaverse = weaverse;
|
|
731
|
+
}, [weaverse]);
|
|
736
732
|
}
|
|
737
733
|
|
|
738
734
|
// src/hooks/use-theme-setting.ts
|
|
739
735
|
var import_react3 = require("@weaverse/react");
|
|
740
|
-
|
|
741
|
-
let
|
|
742
|
-
let
|
|
743
|
-
let
|
|
744
|
-
|
|
736
|
+
function useThemeSettings() {
|
|
737
|
+
let weaverse = (0, import_react3.useWeaverse)();
|
|
738
|
+
let settings = weaverse?.internal?.project?.config?.theme;
|
|
739
|
+
let updateSettings = (newSettings) => {
|
|
740
|
+
weaverse.internal.project.config.theme = Object.assign(
|
|
745
741
|
{},
|
|
746
|
-
|
|
747
|
-
|
|
742
|
+
settings,
|
|
743
|
+
newSettings
|
|
748
744
|
);
|
|
749
|
-
|
|
745
|
+
weaverse.triggerUpdate();
|
|
750
746
|
};
|
|
751
|
-
return
|
|
752
|
-
}
|
|
747
|
+
return [settings, updateSettings];
|
|
748
|
+
}
|
|
753
749
|
|
|
754
750
|
// src/fetch.ts
|
|
755
751
|
var import_hydrogen = require("@shopify/hydrogen");
|
|
@@ -813,15 +809,13 @@ var fetchWithServerCache = async ({
|
|
|
813
809
|
};
|
|
814
810
|
|
|
815
811
|
// src/loader.ts
|
|
816
|
-
async function weaverseLoader(args, components) {
|
|
817
|
-
let { request, context
|
|
818
|
-
let {
|
|
819
|
-
env,
|
|
820
|
-
storefront: { i18n }
|
|
821
|
-
} = context;
|
|
812
|
+
async function weaverseLoader(args, components, loaderConfigs = {}) {
|
|
813
|
+
let { request, context } = args;
|
|
822
814
|
let queries = getRequestQueries(request);
|
|
823
|
-
let
|
|
824
|
-
let weaverseHost
|
|
815
|
+
let { WEAVERSE_PROJECT_ID, WEAVERSE_HOST } = context?.env || {};
|
|
816
|
+
let { weaverseProjectId, weaverseHost: hostInQueries } = queries;
|
|
817
|
+
let projectId = weaverseProjectId || WEAVERSE_PROJECT_ID;
|
|
818
|
+
let weaverseHost = hostInQueries || WEAVERSE_HOST || "https://weaverse.io";
|
|
825
819
|
if (!projectId) {
|
|
826
820
|
console.log("\u274C Missing `projectId`!");
|
|
827
821
|
return null;
|
|
@@ -832,47 +826,47 @@ async function weaverseLoader(args, components) {
|
|
|
832
826
|
...queries
|
|
833
827
|
};
|
|
834
828
|
try {
|
|
835
|
-
let
|
|
836
|
-
|
|
837
|
-
let { page, project, pageTemplateAssignment } = await fetchWithServerCache({
|
|
838
|
-
url: projectAPI,
|
|
829
|
+
let { page, project, pageAssignment } = await fetchWithServerCache({
|
|
830
|
+
url: `${weaverseHost}/api/public/project`,
|
|
839
831
|
options: {
|
|
840
832
|
method: "POST",
|
|
841
|
-
body: JSON.stringify({
|
|
833
|
+
body: JSON.stringify({
|
|
834
|
+
projectId,
|
|
835
|
+
url: request.url,
|
|
836
|
+
i18n: context?.storefront?.i18n,
|
|
837
|
+
...loaderConfigs
|
|
838
|
+
})
|
|
842
839
|
},
|
|
843
840
|
context
|
|
844
841
|
}).then((r2) => r2.json()).catch((err) => {
|
|
845
842
|
console.log(`\u274C Error fetching project data: ${err?.toString()}`);
|
|
846
843
|
return {};
|
|
847
844
|
});
|
|
848
|
-
console.log("page", { page, project, pageTemplateAssignment });
|
|
849
845
|
if (page?.items) {
|
|
850
846
|
let items = page.items;
|
|
851
847
|
page.items = await Promise.all(
|
|
852
|
-
items.map(async (
|
|
853
|
-
let loader = components[
|
|
848
|
+
items.map(async (itemData) => {
|
|
849
|
+
let loader = components[itemData.type]?.loader;
|
|
854
850
|
if (loader && typeof loader === "function") {
|
|
855
851
|
try {
|
|
856
852
|
return {
|
|
857
|
-
...
|
|
853
|
+
...itemData,
|
|
858
854
|
loaderData: await loader({
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
request,
|
|
863
|
-
configs
|
|
855
|
+
itemData,
|
|
856
|
+
configs,
|
|
857
|
+
...args
|
|
864
858
|
})
|
|
865
859
|
};
|
|
866
860
|
} catch (err) {
|
|
867
|
-
console.log(`\u274C Loader run failed! Item: ${
|
|
868
|
-
return
|
|
861
|
+
console.log(`\u274C Loader run failed! Item: ${itemData}: ${err}`);
|
|
862
|
+
return itemData;
|
|
869
863
|
}
|
|
870
864
|
}
|
|
871
|
-
return
|
|
865
|
+
return itemData;
|
|
872
866
|
})
|
|
873
867
|
);
|
|
874
868
|
}
|
|
875
|
-
return { page, configs, project,
|
|
869
|
+
return { page, configs, project, pageAssignment };
|
|
876
870
|
} catch (err) {
|
|
877
871
|
console.log(`\u274C Error fetching Weaverse data: ${err?.toString()}`);
|
|
878
872
|
return null;
|
|
@@ -881,18 +875,17 @@ async function weaverseLoader(args, components) {
|
|
|
881
875
|
|
|
882
876
|
// src/index.tsx
|
|
883
877
|
__reExport(src_exports, require("@weaverse/react"), module.exports);
|
|
884
|
-
|
|
885
|
-
let { components,
|
|
886
|
-
|
|
887
|
-
let weaverse = createWeaverseHydrogenContext(data, components);
|
|
878
|
+
function WeaverseHydrogenRoot(props) {
|
|
879
|
+
let { components, weaverseData, themeSchema } = props;
|
|
880
|
+
let weaverse = createWeaverseInstance(weaverseData, components);
|
|
888
881
|
useStudio(weaverse, themeSchema);
|
|
889
882
|
return /* @__PURE__ */ import_react5.default.createElement(import_react4.WeaverseRoot, { context: weaverse });
|
|
890
|
-
}
|
|
883
|
+
}
|
|
891
884
|
// Annotate the CommonJS export names for ESM import in node:
|
|
892
885
|
0 && (module.exports = {
|
|
893
886
|
WeaverseHydrogenRoot,
|
|
894
887
|
fetchWithServerCache,
|
|
895
|
-
|
|
888
|
+
useThemeSettings,
|
|
896
889
|
weaverseLoader,
|
|
897
890
|
...require("@weaverse/react")
|
|
898
891
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -4,31 +4,28 @@ import React from "react";
|
|
|
4
4
|
|
|
5
5
|
// src/context.ts
|
|
6
6
|
import { Weaverse, isBrowser } from "@weaverse/react";
|
|
7
|
-
function
|
|
8
|
-
return new Weaverse(init);
|
|
9
|
-
}
|
|
10
|
-
function createCachedContext(init) {
|
|
7
|
+
function createCachedWeaverseInstance(init) {
|
|
11
8
|
if (isBrowser) {
|
|
12
9
|
window.__weaverses = window.__weaverses || {};
|
|
13
10
|
let pathname = window.location.pathname;
|
|
14
11
|
if (!window.__weaverses[pathname]) {
|
|
15
|
-
window.__weaverses[pathname] =
|
|
12
|
+
window.__weaverses[pathname] = new Weaverse(init);
|
|
16
13
|
}
|
|
17
14
|
return window.__weaverses[pathname];
|
|
18
15
|
}
|
|
19
|
-
return
|
|
16
|
+
return new Weaverse(init);
|
|
20
17
|
}
|
|
21
|
-
function
|
|
22
|
-
|
|
23
|
-
let { page
|
|
24
|
-
let weaverse =
|
|
18
|
+
function createWeaverseInstance(weaverseData, components) {
|
|
19
|
+
console.log("\u{1F4BF} Weaverse data", weaverseData);
|
|
20
|
+
let { page, configs = {}, project, pageAssignment } = weaverseData || {};
|
|
21
|
+
let weaverse = createCachedWeaverseInstance({
|
|
25
22
|
...configs,
|
|
26
|
-
data: page,
|
|
23
|
+
data: page || {},
|
|
27
24
|
pageId: page?.id,
|
|
28
25
|
platformType: "shopify-hydrogen"
|
|
29
26
|
});
|
|
30
27
|
weaverse.internal.project = project;
|
|
31
|
-
weaverse.internal.
|
|
28
|
+
weaverse.internal.pageAssignment = pageAssignment;
|
|
32
29
|
Object.entries(components).forEach(([key, component]) => {
|
|
33
30
|
weaverse.registerElement({
|
|
34
31
|
type: component?.schema?.type || key,
|
|
@@ -676,42 +673,41 @@ Weaverse2.WeaverseItemStore = WeaverseItemStore;
|
|
|
676
673
|
|
|
677
674
|
// src/hooks/use-studio.ts
|
|
678
675
|
import { useEffect } from "react";
|
|
679
|
-
function useStudio(
|
|
676
|
+
function useStudio(weaverse, themeSchema) {
|
|
680
677
|
useEffect(() => {
|
|
681
|
-
if (
|
|
678
|
+
if (isIframe && weaverse.isDesignMode && !window.weaverseStudioInitialized) {
|
|
682
679
|
window.weaverseStudioInitialized = true;
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
let
|
|
686
|
-
let version = weaverseCore.weaverseVersion || Date.now();
|
|
680
|
+
weaverse.internal.themeSchema = themeSchema;
|
|
681
|
+
let host = weaverse.weaverseHost;
|
|
682
|
+
let version = weaverse.weaverseVersion || Date.now();
|
|
687
683
|
loadScript(`${host}/assets/studio/studio-bridge.js?v=${version}`).then(
|
|
688
684
|
() => {
|
|
689
|
-
window?.createWeaverseStudioBridge(
|
|
685
|
+
window?.createWeaverseStudioBridge(weaverse);
|
|
690
686
|
setTimeout(() => {
|
|
691
|
-
|
|
687
|
+
weaverse.triggerUpdate();
|
|
692
688
|
}, 2e3);
|
|
693
689
|
}
|
|
694
690
|
);
|
|
695
691
|
}
|
|
696
|
-
window.__weaverse =
|
|
697
|
-
}, [
|
|
692
|
+
window.__weaverse = weaverse;
|
|
693
|
+
}, [weaverse]);
|
|
698
694
|
}
|
|
699
695
|
|
|
700
696
|
// src/hooks/use-theme-setting.ts
|
|
701
697
|
import { useWeaverse } from "@weaverse/react";
|
|
702
|
-
|
|
703
|
-
let
|
|
704
|
-
let
|
|
705
|
-
let
|
|
706
|
-
|
|
698
|
+
function useThemeSettings() {
|
|
699
|
+
let weaverse = useWeaverse();
|
|
700
|
+
let settings = weaverse?.internal?.project?.config?.theme;
|
|
701
|
+
let updateSettings = (newSettings) => {
|
|
702
|
+
weaverse.internal.project.config.theme = Object.assign(
|
|
707
703
|
{},
|
|
708
|
-
|
|
709
|
-
|
|
704
|
+
settings,
|
|
705
|
+
newSettings
|
|
710
706
|
);
|
|
711
|
-
|
|
707
|
+
weaverse.triggerUpdate();
|
|
712
708
|
};
|
|
713
|
-
return
|
|
714
|
-
}
|
|
709
|
+
return [settings, updateSettings];
|
|
710
|
+
}
|
|
715
711
|
|
|
716
712
|
// src/fetch.ts
|
|
717
713
|
import { CacheShort, generateCacheControlHeader } from "@shopify/hydrogen";
|
|
@@ -775,15 +771,13 @@ var fetchWithServerCache = async ({
|
|
|
775
771
|
};
|
|
776
772
|
|
|
777
773
|
// src/loader.ts
|
|
778
|
-
async function weaverseLoader(args, components) {
|
|
779
|
-
let { request, context
|
|
780
|
-
let {
|
|
781
|
-
env,
|
|
782
|
-
storefront: { i18n }
|
|
783
|
-
} = context;
|
|
774
|
+
async function weaverseLoader(args, components, loaderConfigs = {}) {
|
|
775
|
+
let { request, context } = args;
|
|
784
776
|
let queries = getRequestQueries(request);
|
|
785
|
-
let
|
|
786
|
-
let weaverseHost
|
|
777
|
+
let { WEAVERSE_PROJECT_ID, WEAVERSE_HOST } = context?.env || {};
|
|
778
|
+
let { weaverseProjectId, weaverseHost: hostInQueries } = queries;
|
|
779
|
+
let projectId = weaverseProjectId || WEAVERSE_PROJECT_ID;
|
|
780
|
+
let weaverseHost = hostInQueries || WEAVERSE_HOST || "https://weaverse.io";
|
|
787
781
|
if (!projectId) {
|
|
788
782
|
console.log("\u274C Missing `projectId`!");
|
|
789
783
|
return null;
|
|
@@ -794,47 +788,47 @@ async function weaverseLoader(args, components) {
|
|
|
794
788
|
...queries
|
|
795
789
|
};
|
|
796
790
|
try {
|
|
797
|
-
let
|
|
798
|
-
|
|
799
|
-
let { page, project, pageTemplateAssignment } = await fetchWithServerCache({
|
|
800
|
-
url: projectAPI,
|
|
791
|
+
let { page, project, pageAssignment } = await fetchWithServerCache({
|
|
792
|
+
url: `${weaverseHost}/api/public/project`,
|
|
801
793
|
options: {
|
|
802
794
|
method: "POST",
|
|
803
|
-
body: JSON.stringify({
|
|
795
|
+
body: JSON.stringify({
|
|
796
|
+
projectId,
|
|
797
|
+
url: request.url,
|
|
798
|
+
i18n: context?.storefront?.i18n,
|
|
799
|
+
...loaderConfigs
|
|
800
|
+
})
|
|
804
801
|
},
|
|
805
802
|
context
|
|
806
803
|
}).then((r2) => r2.json()).catch((err) => {
|
|
807
804
|
console.log(`\u274C Error fetching project data: ${err?.toString()}`);
|
|
808
805
|
return {};
|
|
809
806
|
});
|
|
810
|
-
console.log("page", { page, project, pageTemplateAssignment });
|
|
811
807
|
if (page?.items) {
|
|
812
808
|
let items = page.items;
|
|
813
809
|
page.items = await Promise.all(
|
|
814
|
-
items.map(async (
|
|
815
|
-
let loader = components[
|
|
810
|
+
items.map(async (itemData) => {
|
|
811
|
+
let loader = components[itemData.type]?.loader;
|
|
816
812
|
if (loader && typeof loader === "function") {
|
|
817
813
|
try {
|
|
818
814
|
return {
|
|
819
|
-
...
|
|
815
|
+
...itemData,
|
|
820
816
|
loaderData: await loader({
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
request,
|
|
825
|
-
configs
|
|
817
|
+
itemData,
|
|
818
|
+
configs,
|
|
819
|
+
...args
|
|
826
820
|
})
|
|
827
821
|
};
|
|
828
822
|
} catch (err) {
|
|
829
|
-
console.log(`\u274C Loader run failed! Item: ${
|
|
830
|
-
return
|
|
823
|
+
console.log(`\u274C Loader run failed! Item: ${itemData}: ${err}`);
|
|
824
|
+
return itemData;
|
|
831
825
|
}
|
|
832
826
|
}
|
|
833
|
-
return
|
|
827
|
+
return itemData;
|
|
834
828
|
})
|
|
835
829
|
);
|
|
836
830
|
}
|
|
837
|
-
return { page, configs, project,
|
|
831
|
+
return { page, configs, project, pageAssignment };
|
|
838
832
|
} catch (err) {
|
|
839
833
|
console.log(`\u274C Error fetching Weaverse data: ${err?.toString()}`);
|
|
840
834
|
return null;
|
|
@@ -843,16 +837,15 @@ async function weaverseLoader(args, components) {
|
|
|
843
837
|
|
|
844
838
|
// src/index.tsx
|
|
845
839
|
export * from "@weaverse/react";
|
|
846
|
-
|
|
847
|
-
let { components,
|
|
848
|
-
|
|
849
|
-
let weaverse = createWeaverseHydrogenContext(data, components);
|
|
840
|
+
function WeaverseHydrogenRoot(props) {
|
|
841
|
+
let { components, weaverseData, themeSchema } = props;
|
|
842
|
+
let weaverse = createWeaverseInstance(weaverseData, components);
|
|
850
843
|
useStudio(weaverse, themeSchema);
|
|
851
844
|
return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
|
|
852
|
-
}
|
|
845
|
+
}
|
|
853
846
|
export {
|
|
854
847
|
WeaverseHydrogenRoot,
|
|
855
848
|
fetchWithServerCache,
|
|
856
|
-
|
|
849
|
+
useThemeSettings,
|
|
857
850
|
weaverseLoader
|
|
858
851
|
};
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.0.
|
|
2
|
+
"version": "1.0.54",
|
|
3
3
|
"license": "MIT",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"typings": "dist/index.d.ts",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
"name": "@weaverse/hydrogen",
|
|
33
33
|
"author": "Weaverse Team",
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@shopify/hydrogen": "2023.4.
|
|
36
|
-
"@weaverse/react": "1.0.
|
|
35
|
+
"@shopify/hydrogen": "2023.4.6",
|
|
36
|
+
"@weaverse/react": "1.0.54"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@shopify/remix-oxygen": "^1.1.1"
|