@weaverse/hydrogen 1.0.51 → 1.0.53
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 +40 -12
- package/dist/index.js +71 -53
- package/dist/index.mjs +65 -49
- 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,18 +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;
|
|
98
|
+
project: any;
|
|
99
|
+
pageAssignment: any;
|
|
87
100
|
}
|
|
88
|
-
type WeaverseHydrogenLoaderData = {
|
|
89
|
-
weaverseData?: HydrogenPageData;
|
|
90
|
-
[key: string]: any;
|
|
91
|
-
};
|
|
92
101
|
interface WeaverseHydrogenRootProps {
|
|
102
|
+
weaverseData: HydrogenPageData;
|
|
93
103
|
components: Record<string, HydrogenComponent>;
|
|
94
|
-
|
|
95
|
-
themeSchema?: InspectorGroup[];
|
|
104
|
+
themeSchema: HydrogenThemeSchema;
|
|
96
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[];
|
|
97
125
|
|
|
98
126
|
/**
|
|
99
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.
|
|
@@ -104,8 +132,8 @@ declare let fetchWithServerCache: ({ url, options, context, }: {
|
|
|
104
132
|
context: AppLoadContext;
|
|
105
133
|
}) => Promise<any>;
|
|
106
134
|
|
|
107
|
-
declare function weaverseLoader(args: LoaderArgs, components: Record<string, HydrogenComponent
|
|
135
|
+
declare function weaverseLoader(args: LoaderArgs, components: Record<string, HydrogenComponent>, loaderConfigs?: WeaverseLoaderConfigs): Promise<HydrogenPageData | null>;
|
|
108
136
|
|
|
109
|
-
declare
|
|
137
|
+
declare function WeaverseHydrogenRoot(props: WeaverseHydrogenRootProps): React.JSX.Element;
|
|
110
138
|
|
|
111
|
-
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,37 +33,37 @@ var src_exports = {};
|
|
|
33
33
|
__export(src_exports, {
|
|
34
34
|
WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
|
|
35
35
|
fetchWithServerCache: () => fetchWithServerCache,
|
|
36
|
+
useThemeSettings: () => useThemeSettings,
|
|
36
37
|
weaverseLoader: () => weaverseLoader
|
|
37
38
|
});
|
|
38
39
|
module.exports = __toCommonJS(src_exports);
|
|
39
|
-
var
|
|
40
|
-
var
|
|
40
|
+
var import_react4 = require("@weaverse/react");
|
|
41
|
+
var import_react5 = __toESM(require("react"));
|
|
41
42
|
|
|
42
43
|
// src/context.ts
|
|
43
44
|
var import_react = require("@weaverse/react");
|
|
44
|
-
function
|
|
45
|
-
return new import_react.Weaverse(init);
|
|
46
|
-
}
|
|
47
|
-
function createCachedContext(init) {
|
|
45
|
+
function createCachedWeaverseInstance(init) {
|
|
48
46
|
if (import_react.isBrowser) {
|
|
49
47
|
window.__weaverses = window.__weaverses || {};
|
|
50
48
|
let pathname = window.location.pathname;
|
|
51
49
|
if (!window.__weaverses[pathname]) {
|
|
52
|
-
window.__weaverses[pathname] =
|
|
50
|
+
window.__weaverses[pathname] = new import_react.Weaverse(init);
|
|
53
51
|
}
|
|
54
52
|
return window.__weaverses[pathname];
|
|
55
53
|
}
|
|
56
|
-
return
|
|
54
|
+
return new import_react.Weaverse(init);
|
|
57
55
|
}
|
|
58
|
-
function
|
|
59
|
-
|
|
60
|
-
let { page = {},
|
|
61
|
-
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({
|
|
62
60
|
...configs,
|
|
63
|
-
data: page,
|
|
61
|
+
data: page || {},
|
|
64
62
|
pageId: page?.id,
|
|
65
63
|
platformType: "shopify-hydrogen"
|
|
66
64
|
});
|
|
65
|
+
weaverse.internal.project = project;
|
|
66
|
+
weaverse.internal.pageAssignment = pageAssignment;
|
|
67
67
|
Object.entries(components).forEach(([key, component]) => {
|
|
68
68
|
weaverse.registerElement({
|
|
69
69
|
type: component?.schema?.type || key,
|
|
@@ -623,6 +623,7 @@ var Weaverse2 = class {
|
|
|
623
623
|
this.weaverseVersion = "";
|
|
624
624
|
this.projectId = "";
|
|
625
625
|
this.pageId = "";
|
|
626
|
+
this.internal = {};
|
|
626
627
|
this.data = {
|
|
627
628
|
rootId: "",
|
|
628
629
|
items: [],
|
|
@@ -710,24 +711,40 @@ Weaverse2.WeaverseItemStore = WeaverseItemStore;
|
|
|
710
711
|
|
|
711
712
|
// src/hooks/use-studio.ts
|
|
712
713
|
var import_react2 = require("react");
|
|
713
|
-
function useStudio(
|
|
714
|
+
function useStudio(weaverse, themeSchema) {
|
|
714
715
|
(0, import_react2.useEffect)(() => {
|
|
715
|
-
if (
|
|
716
|
+
if (isIframe && weaverse.isDesignMode && !window.weaverseStudioInitialized) {
|
|
716
717
|
window.weaverseStudioInitialized = true;
|
|
717
|
-
|
|
718
|
-
let host =
|
|
719
|
-
let version =
|
|
718
|
+
weaverse.internal.themeSchema = themeSchema;
|
|
719
|
+
let host = weaverse.weaverseHost;
|
|
720
|
+
let version = weaverse.weaverseVersion || Date.now();
|
|
720
721
|
loadScript(`${host}/assets/studio/studio-bridge.js?v=${version}`).then(
|
|
721
722
|
() => {
|
|
722
|
-
window?.createWeaverseStudioBridge(
|
|
723
|
+
window?.createWeaverseStudioBridge(weaverse);
|
|
723
724
|
setTimeout(() => {
|
|
724
|
-
|
|
725
|
+
weaverse.triggerUpdate();
|
|
725
726
|
}, 2e3);
|
|
726
727
|
}
|
|
727
728
|
);
|
|
728
729
|
}
|
|
729
|
-
window.__weaverse =
|
|
730
|
-
}, [
|
|
730
|
+
window.__weaverse = weaverse;
|
|
731
|
+
}, [weaverse]);
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
// src/hooks/use-theme-setting.ts
|
|
735
|
+
var import_react3 = require("@weaverse/react");
|
|
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(
|
|
741
|
+
{},
|
|
742
|
+
settings,
|
|
743
|
+
newSettings
|
|
744
|
+
);
|
|
745
|
+
weaverse.triggerUpdate();
|
|
746
|
+
};
|
|
747
|
+
return [settings, updateSettings];
|
|
731
748
|
}
|
|
732
749
|
|
|
733
750
|
// src/fetch.ts
|
|
@@ -792,15 +809,13 @@ var fetchWithServerCache = async ({
|
|
|
792
809
|
};
|
|
793
810
|
|
|
794
811
|
// src/loader.ts
|
|
795
|
-
async function weaverseLoader(args, components) {
|
|
796
|
-
let { request, context
|
|
797
|
-
let {
|
|
798
|
-
env,
|
|
799
|
-
storefront: { i18n }
|
|
800
|
-
} = context;
|
|
812
|
+
async function weaverseLoader(args, components, loaderConfigs = {}) {
|
|
813
|
+
let { request, context } = args;
|
|
801
814
|
let queries = getRequestQueries(request);
|
|
802
|
-
let
|
|
803
|
-
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";
|
|
804
819
|
if (!projectId) {
|
|
805
820
|
console.log("\u274C Missing `projectId`!");
|
|
806
821
|
return null;
|
|
@@ -811,13 +826,16 @@ async function weaverseLoader(args, components) {
|
|
|
811
826
|
...queries
|
|
812
827
|
};
|
|
813
828
|
try {
|
|
814
|
-
let
|
|
815
|
-
|
|
816
|
-
let page = await fetchWithServerCache({
|
|
817
|
-
url: projectAPI,
|
|
829
|
+
let { page, project, pageAssignment } = await fetchWithServerCache({
|
|
830
|
+
url: `${weaverseHost}/api/public/project`,
|
|
818
831
|
options: {
|
|
819
832
|
method: "POST",
|
|
820
|
-
body: JSON.stringify({
|
|
833
|
+
body: JSON.stringify({
|
|
834
|
+
projectId,
|
|
835
|
+
url: request.url,
|
|
836
|
+
i18n: context?.storefront?.i18n,
|
|
837
|
+
...loaderConfigs
|
|
838
|
+
})
|
|
821
839
|
},
|
|
822
840
|
context
|
|
823
841
|
}).then((r2) => r2.json()).catch((err) => {
|
|
@@ -827,30 +845,28 @@ async function weaverseLoader(args, components) {
|
|
|
827
845
|
if (page?.items) {
|
|
828
846
|
let items = page.items;
|
|
829
847
|
page.items = await Promise.all(
|
|
830
|
-
items.map(async (
|
|
831
|
-
let loader = components[
|
|
848
|
+
items.map(async (itemData) => {
|
|
849
|
+
let loader = components[itemData.type]?.loader;
|
|
832
850
|
if (loader && typeof loader === "function") {
|
|
833
851
|
try {
|
|
834
852
|
return {
|
|
835
|
-
...
|
|
853
|
+
...itemData,
|
|
836
854
|
loaderData: await loader({
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
request,
|
|
841
|
-
configs
|
|
855
|
+
itemData,
|
|
856
|
+
configs,
|
|
857
|
+
...args
|
|
842
858
|
})
|
|
843
859
|
};
|
|
844
860
|
} catch (err) {
|
|
845
|
-
console.log(`\u274C Loader run failed! Item: ${
|
|
846
|
-
return
|
|
861
|
+
console.log(`\u274C Loader run failed! Item: ${itemData}: ${err}`);
|
|
862
|
+
return itemData;
|
|
847
863
|
}
|
|
848
864
|
}
|
|
849
|
-
return
|
|
865
|
+
return itemData;
|
|
850
866
|
})
|
|
851
867
|
);
|
|
852
868
|
}
|
|
853
|
-
return { page, configs };
|
|
869
|
+
return { page, configs, project, pageAssignment };
|
|
854
870
|
} catch (err) {
|
|
855
871
|
console.log(`\u274C Error fetching Weaverse data: ${err?.toString()}`);
|
|
856
872
|
return null;
|
|
@@ -859,15 +875,17 @@ async function weaverseLoader(args, components) {
|
|
|
859
875
|
|
|
860
876
|
// src/index.tsx
|
|
861
877
|
__reExport(src_exports, require("@weaverse/react"), module.exports);
|
|
862
|
-
|
|
863
|
-
let { components,
|
|
864
|
-
let weaverse =
|
|
878
|
+
function WeaverseHydrogenRoot(props) {
|
|
879
|
+
let { components, weaverseData, themeSchema } = props;
|
|
880
|
+
let weaverse = createWeaverseInstance(weaverseData, components);
|
|
865
881
|
useStudio(weaverse, themeSchema);
|
|
866
|
-
return /* @__PURE__ */
|
|
867
|
-
}
|
|
882
|
+
return /* @__PURE__ */ import_react5.default.createElement(import_react4.WeaverseRoot, { context: weaverse });
|
|
883
|
+
}
|
|
868
884
|
// Annotate the CommonJS export names for ESM import in node:
|
|
869
885
|
0 && (module.exports = {
|
|
870
886
|
WeaverseHydrogenRoot,
|
|
871
887
|
fetchWithServerCache,
|
|
872
|
-
|
|
888
|
+
useThemeSettings,
|
|
889
|
+
weaverseLoader,
|
|
890
|
+
...require("@weaverse/react")
|
|
873
891
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -4,29 +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
|
});
|
|
27
|
+
weaverse.internal.project = project;
|
|
28
|
+
weaverse.internal.pageAssignment = pageAssignment;
|
|
30
29
|
Object.entries(components).forEach(([key, component]) => {
|
|
31
30
|
weaverse.registerElement({
|
|
32
31
|
type: component?.schema?.type || key,
|
|
@@ -586,6 +585,7 @@ var Weaverse2 = class {
|
|
|
586
585
|
this.weaverseVersion = "";
|
|
587
586
|
this.projectId = "";
|
|
588
587
|
this.pageId = "";
|
|
588
|
+
this.internal = {};
|
|
589
589
|
this.data = {
|
|
590
590
|
rootId: "",
|
|
591
591
|
items: [],
|
|
@@ -673,24 +673,40 @@ Weaverse2.WeaverseItemStore = WeaverseItemStore;
|
|
|
673
673
|
|
|
674
674
|
// src/hooks/use-studio.ts
|
|
675
675
|
import { useEffect } from "react";
|
|
676
|
-
function useStudio(
|
|
676
|
+
function useStudio(weaverse, themeSchema) {
|
|
677
677
|
useEffect(() => {
|
|
678
|
-
if (
|
|
678
|
+
if (isIframe && weaverse.isDesignMode && !window.weaverseStudioInitialized) {
|
|
679
679
|
window.weaverseStudioInitialized = true;
|
|
680
|
-
|
|
681
|
-
let host =
|
|
682
|
-
let version =
|
|
680
|
+
weaverse.internal.themeSchema = themeSchema;
|
|
681
|
+
let host = weaverse.weaverseHost;
|
|
682
|
+
let version = weaverse.weaverseVersion || Date.now();
|
|
683
683
|
loadScript(`${host}/assets/studio/studio-bridge.js?v=${version}`).then(
|
|
684
684
|
() => {
|
|
685
|
-
window?.createWeaverseStudioBridge(
|
|
685
|
+
window?.createWeaverseStudioBridge(weaverse);
|
|
686
686
|
setTimeout(() => {
|
|
687
|
-
|
|
687
|
+
weaverse.triggerUpdate();
|
|
688
688
|
}, 2e3);
|
|
689
689
|
}
|
|
690
690
|
);
|
|
691
691
|
}
|
|
692
|
-
window.__weaverse =
|
|
693
|
-
}, [
|
|
692
|
+
window.__weaverse = weaverse;
|
|
693
|
+
}, [weaverse]);
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
// src/hooks/use-theme-setting.ts
|
|
697
|
+
import { useWeaverse } from "@weaverse/react";
|
|
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(
|
|
703
|
+
{},
|
|
704
|
+
settings,
|
|
705
|
+
newSettings
|
|
706
|
+
);
|
|
707
|
+
weaverse.triggerUpdate();
|
|
708
|
+
};
|
|
709
|
+
return [settings, updateSettings];
|
|
694
710
|
}
|
|
695
711
|
|
|
696
712
|
// src/fetch.ts
|
|
@@ -755,15 +771,13 @@ var fetchWithServerCache = async ({
|
|
|
755
771
|
};
|
|
756
772
|
|
|
757
773
|
// src/loader.ts
|
|
758
|
-
async function weaverseLoader(args, components) {
|
|
759
|
-
let { request, context
|
|
760
|
-
let {
|
|
761
|
-
env,
|
|
762
|
-
storefront: { i18n }
|
|
763
|
-
} = context;
|
|
774
|
+
async function weaverseLoader(args, components, loaderConfigs = {}) {
|
|
775
|
+
let { request, context } = args;
|
|
764
776
|
let queries = getRequestQueries(request);
|
|
765
|
-
let
|
|
766
|
-
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";
|
|
767
781
|
if (!projectId) {
|
|
768
782
|
console.log("\u274C Missing `projectId`!");
|
|
769
783
|
return null;
|
|
@@ -774,13 +788,16 @@ async function weaverseLoader(args, components) {
|
|
|
774
788
|
...queries
|
|
775
789
|
};
|
|
776
790
|
try {
|
|
777
|
-
let
|
|
778
|
-
|
|
779
|
-
let page = await fetchWithServerCache({
|
|
780
|
-
url: projectAPI,
|
|
791
|
+
let { page, project, pageAssignment } = await fetchWithServerCache({
|
|
792
|
+
url: `${weaverseHost}/api/public/project`,
|
|
781
793
|
options: {
|
|
782
794
|
method: "POST",
|
|
783
|
-
body: JSON.stringify({
|
|
795
|
+
body: JSON.stringify({
|
|
796
|
+
projectId,
|
|
797
|
+
url: request.url,
|
|
798
|
+
i18n: context?.storefront?.i18n,
|
|
799
|
+
...loaderConfigs
|
|
800
|
+
})
|
|
784
801
|
},
|
|
785
802
|
context
|
|
786
803
|
}).then((r2) => r2.json()).catch((err) => {
|
|
@@ -790,30 +807,28 @@ async function weaverseLoader(args, components) {
|
|
|
790
807
|
if (page?.items) {
|
|
791
808
|
let items = page.items;
|
|
792
809
|
page.items = await Promise.all(
|
|
793
|
-
items.map(async (
|
|
794
|
-
let loader = components[
|
|
810
|
+
items.map(async (itemData) => {
|
|
811
|
+
let loader = components[itemData.type]?.loader;
|
|
795
812
|
if (loader && typeof loader === "function") {
|
|
796
813
|
try {
|
|
797
814
|
return {
|
|
798
|
-
...
|
|
815
|
+
...itemData,
|
|
799
816
|
loaderData: await loader({
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
request,
|
|
804
|
-
configs
|
|
817
|
+
itemData,
|
|
818
|
+
configs,
|
|
819
|
+
...args
|
|
805
820
|
})
|
|
806
821
|
};
|
|
807
822
|
} catch (err) {
|
|
808
|
-
console.log(`\u274C Loader run failed! Item: ${
|
|
809
|
-
return
|
|
823
|
+
console.log(`\u274C Loader run failed! Item: ${itemData}: ${err}`);
|
|
824
|
+
return itemData;
|
|
810
825
|
}
|
|
811
826
|
}
|
|
812
|
-
return
|
|
827
|
+
return itemData;
|
|
813
828
|
})
|
|
814
829
|
);
|
|
815
830
|
}
|
|
816
|
-
return { page, configs };
|
|
831
|
+
return { page, configs, project, pageAssignment };
|
|
817
832
|
} catch (err) {
|
|
818
833
|
console.log(`\u274C Error fetching Weaverse data: ${err?.toString()}`);
|
|
819
834
|
return null;
|
|
@@ -822,14 +837,15 @@ async function weaverseLoader(args, components) {
|
|
|
822
837
|
|
|
823
838
|
// src/index.tsx
|
|
824
839
|
export * from "@weaverse/react";
|
|
825
|
-
|
|
826
|
-
let { components,
|
|
827
|
-
let weaverse =
|
|
840
|
+
function WeaverseHydrogenRoot(props) {
|
|
841
|
+
let { components, weaverseData, themeSchema } = props;
|
|
842
|
+
let weaverse = createWeaverseInstance(weaverseData, components);
|
|
828
843
|
useStudio(weaverse, themeSchema);
|
|
829
844
|
return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
|
|
830
|
-
}
|
|
845
|
+
}
|
|
831
846
|
export {
|
|
832
847
|
WeaverseHydrogenRoot,
|
|
833
848
|
fetchWithServerCache,
|
|
849
|
+
useThemeSettings,
|
|
834
850
|
weaverseLoader
|
|
835
851
|
};
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.0.
|
|
2
|
+
"version": "1.0.53",
|
|
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.53"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@shopify/remix-oxygen": "^1.1.1"
|