@weaverse/hydrogen 1.0.48 → 1.0.50

package/dist/index.d.ts

@@ -1,11 +1,8 @@
 import React, { ForwardRefExoticComponent } from 'react';
 import { LoaderArgs, AppLoadContext } from '@shopify/remix-oxygen';
-import { ElementData, ElementSchema, WeaverseElement, Weaverse, WeaverseItemStore } from '@weaverse/react';
+import { ElementData, ElementSchema, BasicInput, WeaverseElement, Weaverse, WeaverseItemStore } from '@weaverse/react';
 export * from '@weaverse/react';
 
-/**
- * Declare local additions to `AppLoadContext` to include the session utilities we injected in `server.ts`.
- */
 type TODO = any;
 declare module '@shopify/remix-oxygen' {
     interface AppLoadContext {
@@ -24,6 +21,7 @@ type WeaverseLoaderArgs = LoaderArgs & {
 };
 interface HydrogenComponentData extends Omit<ElementData, 'childIds' | 'css'> {
     id: string;
+    type: string;
     createdAt: string;
     updatedAt: string;
     deletedAt: string;
@@ -34,27 +32,35 @@ interface HydrogenComponentData extends Omit<ElementData, 'childIds' | 'css'> {
     loaderData: unknown;
     data: Record<string, unknown>;
 }
-type ComponentFlags = Partial<Record<'isSection', boolean>>;
-interface HydrogenComponentSchema extends Omit<ElementSchema, 'parentTypes' | 'flags'> {
+type ComponentFlags = Partial<Record<string, boolean>>;
+interface HydrogenComponentSchema extends Omit<ElementSchema, 'parentTypes' | 'flags' | 'inspector'> {
     flags?: ComponentFlags;
     childTypes?: string[];
+    inspector: InspectorGroup[];
+    presets?: Omit<HydrogenComponentPresets, 'type'>;
 }
-interface HydrogenComponentProps<D = unknown, L = unknown> extends WeaverseElement {
-    data: D & {
-        className?: string;
-    };
+interface InspectorGroup {
+    group: string;
+    inputs: BasicInput[];
+}
+interface HydrogenComponentProps<L = any> extends WeaverseElement {
+    className?: string;
     loaderData?: L;
     children?: React.JSX.Element[];
 }
-interface WeaverseHydrogen extends Omit<Weaverse, 'itemInstances'> {
+interface WeaverseHydrogen extends Omit<Weaverse, 'itemInstances' | 'elementInstances' | 'registerElement'> {
     itemInstances: Map<string | number, HydrogenComponentInstance>;
+    elementInstances: Map<string, HydrogenElement>;
+    registerElement(element: HydrogenElement): void;
 }
-type HydrogenComponentTemplate = any;
+type HydrogenComponentPresets = {
+    type: string;
+    children?: HydrogenComponentPresets[];
+};
 interface HydrogenElement {
-    Component: ForwardRefExoticComponent<any>;
+    Component: ForwardRefExoticComponent<HydrogenComponentProps>;
     type: string;
     schema?: HydrogenComponentSchema;
-    template?: HydrogenComponentTemplate;
 }
 interface HydrogenComponentInstance extends Omit<WeaverseItemStore, '_flags' | 'data' | 'Element'> {
     get _element(): HTMLElement | null;
@@ -78,12 +84,14 @@ interface HydrogenPageData {
     page: any;
     configs: HydrogenPageConfigs;
 }
+type WeaverseHydrogenLoaderData = {
+    weaverseData?: HydrogenPageData;
+    [key: string]: any;
+};
 interface WeaverseHydrogenRootProps {
     components: Record<string, HydrogenComponent>;
-    data: {
-        weaverseData?: HydrogenPageData;
-        [key: string]: any;
-    };
+    data: WeaverseHydrogenLoaderData;
+    themeSchema?: InspectorGroup[];
 }
 
 /**
@@ -99,4 +107,4 @@ declare function weaverseLoader(args: LoaderArgs, components: Record<string, Hyd
 
 declare let WeaverseHydrogenRoot: (props: WeaverseHydrogenRootProps) => React.JSX.Element;
 
-export { ComponentFlags, HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentProps, HydrogenComponentSchema, HydrogenComponentTemplate, HydrogenElement, HydrogenPageConfigs, HydrogenPageData, TODO, WeaverseHydrogen, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseLoaderArgs, fetchWithServerCache, weaverseLoader };
+export { ComponentFlags, HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageConfigs, HydrogenPageData, InspectorGroup, TODO, WeaverseHydrogen, WeaverseHydrogenLoaderData, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseLoaderArgs, fetchWithServerCache, weaverseLoader };

package/dist/index.js

@@ -41,34 +41,34 @@ var import_react4 = __toESM(require("react"));
 
 // src/context.ts
 var import_react = require("@weaverse/react");
-var createRootContext = (init) => new import_react.Weaverse(init);
+function createRootContext(init) {
+  return new import_react.Weaverse(init);
+}
 function createCachedContext(init) {
-  if (import_react.isBrowser && init.pageId) {
+  if (import_react.isBrowser) {
     window.__weaverses = window.__weaverses || {};
-    if (!window.__weaverses[init.pageId]) {
-      window.__weaverses[init.pageId] = createRootContext(init);
+    let pathname = window.location.pathname;
+    if (!window.__weaverses[pathname]) {
+      window.__weaverses[pathname] = createRootContext(init);
     }
-    return window.__weaverses[init.pageId];
+    return window.__weaverses[pathname];
   }
   return createRootContext(init);
 }
-function createWeaverseHydrogenContext({ weaverseData }, components) {
-  let { page = {}, configs = {} } = weaverseData || {};
+function createWeaverseHydrogenContext(data, components) {
+  let weaverseData = data?.weaverseData || {};
+  let { page = {}, configs = {} } = weaverseData;
   let weaverse = createCachedContext({
     ...configs,
     data: page,
     pageId: page?.id,
     platformType: "shopify-hydrogen"
   });
-  weaverse.elementInstances.clear();
   Object.entries(components).forEach(([key, component]) => {
     weaverse.registerElement({
       type: component?.schema?.type || key,
       Component: component?.default,
-      // @ts-ignore
-      schema: component?.schema,
-      // @ts-ignore
-      template: component?.template
+      schema: component?.schema
     });
   });
   return weaverse;
@@ -710,10 +710,11 @@ Weaverse2.WeaverseItemStore = WeaverseItemStore;
 
 // src/hooks/use-studio.ts
 var import_react2 = require("react");
-function useStudio(weaverseCore) {
+function useStudio(weaverseCore, themeSchema) {
   (0, import_react2.useEffect)(() => {
     if (weaverseCore.isDesignMode && isIframe && !window.weaverseStudioInitialized) {
       window.weaverseStudioInitialized = true;
+      weaverseCore.themeSchema = themeSchema;
       let host = weaverseCore.weaverseHost;
       let version = weaverseCore.weaverseVersion || Date.now();
       loadScript(`${host}/assets/studio/studio-bridge.js?v=${version}`).then(
@@ -725,10 +726,8 @@ function useStudio(weaverseCore) {
         }
       );
     }
-    window.requestAnimationFrame(() => {
-      window.__weaverse = weaverseCore;
-    });
-  }, []);
+    window.__weaverse = weaverseCore;
+  }, [weaverseCore]);
 }
 
 // src/fetch.ts
@@ -795,12 +794,15 @@ var fetchWithServerCache = async ({
 // src/loader.ts
 async function weaverseLoader(args, components) {
   let { request, context, params } = args;
-  let { env } = context;
+  let {
+    env,
+    storefront: { i18n }
+  } = context;
   let queries = getRequestQueries(request);
-  let projectId = env?.WEAVERSE_PROJECT_ID;
-  let weaverseHost = env?.WEAVERSE_HOST;
-  if (!projectId || !weaverseHost) {
-    console.log("\u274C Missing `WEAVERSE_PROJECT_ID` or `WEAVERSE_HOST`!");
+  let projectId = queries?.projectId || env?.WEAVERSE_PROJECT_ID;
+  let weaverseHost = env?.WEAVERSE_HOST || "https://weaverse.io";
+  if (!projectId) {
+    console.log("\u274C Missing `projectId`!");
     return null;
   }
   let configs = {
@@ -809,14 +811,13 @@ async function weaverseLoader(args, components) {
     ...queries
   };
   try {
+    let projectAPI = `${weaverseHost}/api/public/project`;
+    let url = request.url;
     let page = await fetchWithServerCache({
-      url: `${weaverseHost}/api/public/project`,
+      url: projectAPI,
       options: {
         method: "POST",
-        body: JSON.stringify({
-          projectId,
-          url: request.url
-        })
+        body: JSON.stringify({ projectId, url, i18n })
       },
       context
     }).then((r2) => r2.json()).catch((err) => {
@@ -859,11 +860,9 @@ async function weaverseLoader(args, components) {
 // src/index.tsx
 __reExport(src_exports, require("@weaverse/react"), module.exports);
 var WeaverseHydrogenRoot = (props) => {
-  let { components, data } = props;
+  let { components, data, themeSchema } = props;
   let weaverse = createWeaverseHydrogenContext(data, components);
-  useStudio(weaverse);
-  if (!weaverse?.data)
-    return /* @__PURE__ */ import_react4.default.createElement("div", null, "No Weaverse data!");
+  useStudio(weaverse, themeSchema);
   return /* @__PURE__ */ import_react4.default.createElement(import_react3.WeaverseRoot, { context: weaverse });
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -4,34 +4,34 @@ import React from "react";
 
 // src/context.ts
 import { Weaverse, isBrowser } from "@weaverse/react";
-var createRootContext = (init) => new Weaverse(init);
+function createRootContext(init) {
+  return new Weaverse(init);
+}
 function createCachedContext(init) {
-  if (isBrowser && init.pageId) {
+  if (isBrowser) {
     window.__weaverses = window.__weaverses || {};
-    if (!window.__weaverses[init.pageId]) {
-      window.__weaverses[init.pageId] = createRootContext(init);
+    let pathname = window.location.pathname;
+    if (!window.__weaverses[pathname]) {
+      window.__weaverses[pathname] = createRootContext(init);
     }
-    return window.__weaverses[init.pageId];
+    return window.__weaverses[pathname];
   }
   return createRootContext(init);
 }
-function createWeaverseHydrogenContext({ weaverseData }, components) {
-  let { page = {}, configs = {} } = weaverseData || {};
+function createWeaverseHydrogenContext(data, components) {
+  let weaverseData = data?.weaverseData || {};
+  let { page = {}, configs = {} } = weaverseData;
   let weaverse = createCachedContext({
     ...configs,
     data: page,
     pageId: page?.id,
     platformType: "shopify-hydrogen"
   });
-  weaverse.elementInstances.clear();
   Object.entries(components).forEach(([key, component]) => {
     weaverse.registerElement({
       type: component?.schema?.type || key,
       Component: component?.default,
-      // @ts-ignore
-      schema: component?.schema,
-      // @ts-ignore
-      template: component?.template
+      schema: component?.schema
     });
   });
   return weaverse;
@@ -673,10 +673,11 @@ Weaverse2.WeaverseItemStore = WeaverseItemStore;
 
 // src/hooks/use-studio.ts
 import { useEffect } from "react";
-function useStudio(weaverseCore) {
+function useStudio(weaverseCore, themeSchema) {
   useEffect(() => {
     if (weaverseCore.isDesignMode && isIframe && !window.weaverseStudioInitialized) {
       window.weaverseStudioInitialized = true;
+      weaverseCore.themeSchema = themeSchema;
       let host = weaverseCore.weaverseHost;
       let version = weaverseCore.weaverseVersion || Date.now();
       loadScript(`${host}/assets/studio/studio-bridge.js?v=${version}`).then(
@@ -688,10 +689,8 @@ function useStudio(weaverseCore) {
         }
       );
     }
-    window.requestAnimationFrame(() => {
-      window.__weaverse = weaverseCore;
-    });
-  }, []);
+    window.__weaverse = weaverseCore;
+  }, [weaverseCore]);
 }
 
 // src/fetch.ts
@@ -758,12 +757,15 @@ var fetchWithServerCache = async ({
 // src/loader.ts
 async function weaverseLoader(args, components) {
   let { request, context, params } = args;
-  let { env } = context;
+  let {
+    env,
+    storefront: { i18n }
+  } = context;
   let queries = getRequestQueries(request);
-  let projectId = env?.WEAVERSE_PROJECT_ID;
-  let weaverseHost = env?.WEAVERSE_HOST;
-  if (!projectId || !weaverseHost) {
-    console.log("\u274C Missing `WEAVERSE_PROJECT_ID` or `WEAVERSE_HOST`!");
+  let projectId = queries?.projectId || env?.WEAVERSE_PROJECT_ID;
+  let weaverseHost = env?.WEAVERSE_HOST || "https://weaverse.io";
+  if (!projectId) {
+    console.log("\u274C Missing `projectId`!");
     return null;
   }
   let configs = {
@@ -772,14 +774,13 @@ async function weaverseLoader(args, components) {
     ...queries
   };
   try {
+    let projectAPI = `${weaverseHost}/api/public/project`;
+    let url = request.url;
     let page = await fetchWithServerCache({
-      url: `${weaverseHost}/api/public/project`,
+      url: projectAPI,
       options: {
         method: "POST",
-        body: JSON.stringify({
-          projectId,
-          url: request.url
-        })
+        body: JSON.stringify({ projectId, url, i18n })
       },
       context
     }).then((r2) => r2.json()).catch((err) => {
@@ -822,11 +823,9 @@ async function weaverseLoader(args, components) {
 // src/index.tsx
 export * from "@weaverse/react";
 var WeaverseHydrogenRoot = (props) => {
-  let { components, data } = props;
+  let { components, data, themeSchema } = props;
   let weaverse = createWeaverseHydrogenContext(data, components);
-  useStudio(weaverse);
-  if (!weaverse?.data)
-    return /* @__PURE__ */ React.createElement("div", null, "No Weaverse data!");
+  useStudio(weaverse, themeSchema);
   return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
 };
 export {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.48",
+  "version": "1.0.50",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -32,10 +32,10 @@
   "name": "@weaverse/hydrogen",
   "author": "Weaverse Team",
   "dependencies": {
-    "@shopify/hydrogen": "2023.4.3",
-    "@weaverse/react": "1.0.48"
+    "@shopify/hydrogen": "2023.4.5",
+    "@weaverse/react": "1.0.50"
   },
   "devDependencies": {
-    "@shopify/remix-oxygen": "^1.0.7"
+    "@shopify/remix-oxygen": "^1.1.1"
   }
 }