@weaverse/next 0.1.0-alpha.0 → 0.1.0-alpha.1

package/dist/index.js

@@ -132,18 +132,53 @@ var NextClient = class {
 function createWeaverseNextClient(config) {
   return new NextClient(config);
 }
+
+// src/theme-settings-store.ts
+function createWeaverseNextThemeSettingsStore(options = {}) {
+  let listeners = /* @__PURE__ */ new Set();
+  let store = {
+    publicEnv: options.publicEnv,
+    schema: options.schema,
+    settings: { ...options.settings ?? {} },
+    getServerSnapshot: () => store.settings,
+    getSnapshot: () => store.settings,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    updateThemeSettings: (next) => {
+      store.settings = { ...store.settings, ...next };
+      for (let listener of listeners) {
+        listener();
+      }
+    }
+  };
+  return store;
+}
+var EMPTY_THEME_SETTINGS = {};
 var WeaverseNextContext = react$1.createContext(null);
 function WeaverseNextProvider(props) {
   let { children, client, rootData, pageData, commerce, themeSettings } = props;
+  let themeSettingsValue = themeSettings ?? client?.themeSettings ?? EMPTY_THEME_SETTINGS;
+  let themeSettingsStore = react$1.useMemo(
+    () => createWeaverseNextThemeSettingsStore({
+      schema: client?.themeSchema,
+      settings: themeSettingsValue
+    }),
+    [client?.themeSchema, themeSettingsValue]
+  );
   let value = react$1.useMemo(
     () => ({
       client,
       rootData,
       pageData,
       commerce: commerce ?? client?.commerce,
-      themeSettings: themeSettings ?? client?.themeSettings ?? {}
+      themeSettings: themeSettingsStore.getSnapshot(),
+      themeSettingsStore
     }),
-    [client, rootData, pageData, commerce, themeSettings]
+    [client, rootData, pageData, commerce, themeSettingsStore]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(WeaverseNextContext.Provider, { value, children });
 }
@@ -167,7 +202,12 @@ function useWeaverseCommerce() {
   return useWeaverseNextContext("useWeaverseCommerce").commerce;
 }
 function useThemeSettings() {
-  return useWeaverseNextContext("useThemeSettings").themeSettings;
+  let { themeSettingsStore } = useWeaverseNextContext("useThemeSettings");
+  return react$1.useSyncExternalStore(
+    themeSettingsStore.subscribe,
+    themeSettingsStore.getSnapshot,
+    themeSettingsStore.getServerSnapshot
+  );
 }
 
 // src/loader.ts
@@ -246,8 +286,262 @@ async function runWeaverseComponentLoaders(args) {
   await walk(items);
   return data;
 }
-var EMPTY_DATA_CONTEXT = {};
+
+// src/request-info.ts
+function toUrl(value) {
+  return typeof value === "string" ? new URL(value, "http://localhost") : value;
+}
+function getSearchParamsFromContext(context) {
+  if (context?.searchParams) {
+    return new URLSearchParams(context.searchParams);
+  }
+  if (context?.url) {
+    let url = toUrl(context.url);
+    return new URLSearchParams(url.searchParams);
+  }
+  return new URLSearchParams();
+}
+function getPathnameFromContext(context) {
+  if (context?.pathname) {
+    return context.pathname;
+  }
+  if (context?.url) {
+    let url = toUrl(context.url);
+    return url.pathname || "/";
+  }
+  return "/";
+}
+function coerceQueryValue(value) {
+  if (value === "true") {
+    return true;
+  }
+  if (value === "false") {
+    return false;
+  }
+  return value;
+}
+function toQueryRecord(searchParams) {
+  let queries = {};
+  for (let [key, value] of searchParams.entries()) {
+    queries[key] = coerceQueryValue(value);
+  }
+  return queries;
+}
+function buildWeaverseNextRequestInfo(context) {
+  let searchParams = getSearchParamsFromContext(context);
+  let search = searchParams.toString();
+  return {
+    pathname: getPathnameFromContext(context),
+    search: search ? `?${search}` : "",
+    queries: toQueryRecord(searchParams),
+    ...context?.i18n ? { i18n: context.i18n } : {}
+  };
+}
+
+// src/runtime.ts
+function getRuntimeWindow() {
+  return typeof window === "undefined" ? void 0 : window;
+}
 function getRenderablePage(data) {
+  let page = data.page;
+  let rootId = page.rootId ?? page.items.find((item) => item.type === "main")?.id ?? page.items[0]?.id ?? page.id;
+  return { ...page, rootId };
+}
+function getConfigString(configs, key) {
+  let value = configs?.[key];
+  return typeof value === "string" ? value : void 0;
+}
+function getRecordString(record, key) {
+  let value = record?.[key];
+  return typeof value === "string" ? value : void 0;
+}
+function resolveProjectId(client, data, fallback) {
+  let projectId = client?.projectId;
+  if (projectId) {
+    return projectId;
+  }
+  let configProjectId = getConfigString(data.configs, "projectId");
+  if (configProjectId) {
+    return configProjectId;
+  }
+  return getRecordString(data.project, "id") ?? fallback;
+}
+function resolveDataContext(config) {
+  if (config.dataContext) {
+    return config.dataContext;
+  }
+  if (config.client?.dataContext) {
+    return config.client.dataContext;
+  }
+  return {};
+}
+function getRuntimeKey(pageId, requestInfo) {
+  return `${pageId}:${requestInfo.pathname}:${requestInfo.search}`;
+}
+function registerRuntime(runtime) {
+  let runtimeWindow = getRuntimeWindow();
+  if (!runtimeWindow) {
+    return;
+  }
+  runtimeWindow.__weaverses ??= {};
+  runtimeWindow.__weaverses[runtime.pageId] = runtime;
+  runtimeWindow.__weaverse = runtime;
+}
+var WeaverseNextRuntime = class extends react.Weaverse {
+  pageId;
+  internal;
+  requestInfo;
+  isPreviewMode;
+  isRevisionPreview;
+  sectionType;
+  translationMap = {};
+  translationLocale = "";
+  translationLanguageId = "";
+  constructor(config) {
+    let { client, data } = config;
+    let page = getRenderablePage(data);
+    let configs = data.configs;
+    let requestContext = client?.requestContext;
+    let projectId = resolveProjectId(client, data, page.id);
+    ensureNextItemConstructor();
+    super({
+      projectId,
+      data: page,
+      isDesignMode: requestContext?.isDesignMode ?? false,
+      weaverseHost: getConfigString(configs, "weaverseHost"),
+      weaverseVersion: getConfigString(configs, "weaverseVersion")
+    });
+    this.pageId = page.id;
+    this.dataContext = resolveDataContext(config);
+    this.requestInfo = buildWeaverseNextRequestInfo(requestContext);
+    this.isDesignMode = requestContext?.isDesignMode ?? false;
+    this.isPreviewMode = requestContext?.isPreviewMode ?? false;
+    this.isRevisionPreview = requestContext?.isRevisionPreview ?? false;
+    this.sectionType = requestContext?.sectionType;
+    this.internal = {
+      navigate: config.navigate,
+      pageAssignment: data.pageAssignment,
+      project: data.project,
+      revalidate: config.revalidate,
+      themeSettingsStore: config.themeSettingsStore ?? createWeaverseNextThemeSettingsStore({
+        schema: client?.themeSchema,
+        settings: client?.themeSettings
+      })
+    };
+  }
+  extractTranslationSidecar = () => void 0;
+  setTranslationSidecar = (map = {}, locale = "", languageId = "") => {
+    this.translationMap = map;
+    this.translationLocale = locale;
+    this.translationLanguageId = languageId;
+  };
+  updateTranslation = () => void 0;
+  getTranslationChanges = () => void 0;
+};
+function createWeaverseNextRuntime(config) {
+  let requestInfo = buildWeaverseNextRequestInfo(config.client?.requestContext);
+  let page = getRenderablePage(config.data);
+  let runtimeWindow = getRuntimeWindow();
+  let existing = runtimeWindow?.__weaverses?.[page.id];
+  let requestKey = getRuntimeKey(page.id, requestInfo);
+  if (existing?.__weaverseNextRequestKey === requestKey) {
+    let nextIsDesignMode = config.client?.requestContext?.isDesignMode ?? false;
+    if (!(existing.isDesignMode || nextIsDesignMode)) {
+      existing.setProjectData(page);
+    }
+    existing.dataContext = resolveDataContext(config);
+    existing.requestInfo = requestInfo;
+    existing.projectId = resolveProjectId(config.client, config.data, page.id);
+    existing.isDesignMode = nextIsDesignMode;
+    existing.isPreviewMode = config.client?.requestContext?.isPreviewMode ?? false;
+    existing.isRevisionPreview = config.client?.requestContext?.isRevisionPreview ?? false;
+    existing.sectionType = config.client?.requestContext?.sectionType;
+    existing.weaverseHost = getConfigString(config.data.configs, "weaverseHost") ?? existing.weaverseHost;
+    existing.weaverseVersion = getConfigString(config.data.configs, "weaverseVersion") ?? existing.weaverseVersion;
+    existing.internal.pageAssignment = config.data.pageAssignment;
+    existing.internal.project = config.data.project;
+    if (config.navigate) {
+      existing.internal.navigate = config.navigate;
+    }
+    if (config.revalidate) {
+      existing.internal.revalidate = config.revalidate;
+    }
+    if (config.themeSettingsStore) {
+      existing.internal.themeSettingsStore = config.themeSettingsStore;
+    }
+    registerRuntime(existing);
+    return existing;
+  }
+  let runtime = new WeaverseNextRuntime(config);
+  runtime.__weaverseNextRequestKey = requestKey;
+  registerRuntime(runtime);
+  return runtime;
+}
+function bindWeaverseNextStudioRuntime(runtime) {
+  if (!runtime.isDesignMode) {
+    return false;
+  }
+  let studio = getRuntimeWindow()?.weaverseStudio;
+  if (!studio) {
+    return false;
+  }
+  let boundRuntime = runtime;
+  if (!boundRuntime.__weaverseNextStudioBound) {
+    studio.init?.(runtime);
+    boundRuntime.__weaverseNextStudioBound = true;
+    return true;
+  }
+  studio.refreshStudio?.({
+    data: runtime.data,
+    pageId: runtime.pageId,
+    requestInfo: runtime.requestInfo
+  });
+  return true;
+}
+var STUDIO_BIND_RETRY_INTERVAL_MS = 50;
+var STUDIO_BIND_MAX_ATTEMPTS = 100;
+function WeaverseNextStudioBridge(props) {
+  let { runtime, navigate, revalidate } = props;
+  let lastRuntimeRef = react$1.useRef(runtime);
+  let lastRuntimeDataRef = react$1.useRef(runtime.data);
+  let lastRequestInfoRef = react$1.useRef(runtime.requestInfo);
+  react$1.useEffect(() => {
+    if (navigate) {
+      runtime.internal.navigate = navigate;
+    }
+    if (revalidate) {
+      runtime.internal.revalidate = revalidate;
+    }
+    if (bindWeaverseNextStudioRuntime(runtime) || !runtime.isDesignMode) {
+      return;
+    }
+    let attempts = 0;
+    let interval = window.setInterval(() => {
+      attempts += 1;
+      if (bindWeaverseNextStudioRuntime(runtime) || attempts >= STUDIO_BIND_MAX_ATTEMPTS) {
+        window.clearInterval(interval);
+      }
+    }, STUDIO_BIND_RETRY_INTERVAL_MS);
+    return () => window.clearInterval(interval);
+  }, [runtime, navigate, revalidate]);
+  react$1.useEffect(() => {
+    if (lastRuntimeRef.current !== runtime) {
+      lastRuntimeRef.current = runtime;
+      lastRuntimeDataRef.current = runtime.data;
+      lastRequestInfoRef.current = runtime.requestInfo;
+      return;
+    }
+    if (lastRuntimeDataRef.current === runtime.data && lastRequestInfoRef.current === runtime.requestInfo) {
+      return;
+    }
+    lastRuntimeDataRef.current = runtime.data;
+    lastRequestInfoRef.current = runtime.requestInfo;
+    bindWeaverseNextStudioRuntime(runtime);
+  }, [runtime, runtime.data, runtime.requestInfo]);
+  return null;
+}
+var EMPTY_DATA_CONTEXT = {};
+function getRenderablePage2(data) {
   let page = data?.page;
   if (!page) {
     return null;
@@ -260,30 +554,136 @@ var WeaverseNextRenderer = react$1.memo(function WeaverseNextRendererComponent(p
   let client = props.client ?? context?.client;
   let data = props.data ?? client?.data ?? null;
   let dataContext = props.dataContext ?? client?.dataContext ?? EMPTY_DATA_CONTEXT;
-  let page = react$1.useMemo(() => getRenderablePage(data), [data]);
+  let page = react$1.useMemo(() => getRenderablePage2(data), [data]);
   let weaverse = react$1.useMemo(() => {
     if (!page) {
       return null;
     }
-    let instance = new react.Weaverse({
-      projectId: client?.projectId || page.id || "weaverse-next",
-      data: page
+    return createWeaverseNextRuntime({
+      client,
+      data: { ...data, page },
+      dataContext,
+      themeSettingsStore: context?.themeSettingsStore
     });
-    instance.dataContext = dataContext;
-    instance.isDesignMode = client?.requestContext?.isDesignMode ?? false;
-    return instance;
-  }, [
-    client?.projectId,
-    client?.requestContext?.isDesignMode,
-    page,
-    dataContext
-  ]);
+  }, [client, page, data, dataContext, context?.themeSettingsStore]);
   if (!weaverse) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(react.WeaverseRoot, { context: weaverse });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.WeaverseRoot, { context: weaverse }),
+    /* @__PURE__ */ jsxRuntime.jsx(WeaverseNextStudioBridge, { runtime: weaverse })
+  ] });
 });
 
+// src/studio-script-src.ts
+var TRUSTED_STUDIO_DOMAINS = ["weaverse.io", "weaverse.dev"];
+function isLoopbackHostname(hostname) {
+  return hostname === "localhost" || hostname === "127.0.0.1" || hostname.endsWith(".localhost");
+}
+function normalizeOrigin(value) {
+  if (!value) {
+    return null;
+  }
+  try {
+    return new URL(value).origin;
+  } catch {
+    return null;
+  }
+}
+function isTrustedStudioOrigin(origin, storefrontHostname) {
+  let parsed;
+  try {
+    parsed = new URL(origin);
+  } catch {
+    return false;
+  }
+  let { hostname, protocol } = parsed;
+  if (isLoopbackHostname(storefrontHostname) && isLoopbackHostname(hostname)) {
+    return protocol === "http:" || protocol === "https:";
+  }
+  if (protocol !== "https:") {
+    return false;
+  }
+  return TRUSTED_STUDIO_DOMAINS.some(
+    (domain) => hostname === domain || hostname.endsWith(`.${domain}`)
+  );
+}
+function toSearchParams(context) {
+  if (context?.searchParams) {
+    return new URLSearchParams(context.searchParams);
+  }
+  if (context?.url) {
+    let url = typeof context.url === "string" ? new URL(context.url, "http://localhost") : context.url;
+    return new URLSearchParams(url.searchParams);
+  }
+  return new URLSearchParams();
+}
+function last(searchParams, key) {
+  let values = searchParams.getAll(key);
+  return values.length ? values.at(-1) ?? null : null;
+}
+function resolveWeaverseNextStudioScriptSrc(context, options = {}) {
+  let searchParams = toSearchParams(context);
+  let isDesignMode = context?.isDesignMode ?? last(searchParams, "isDesignMode") === "true";
+  let isPreviewMode = context?.isPreviewMode ?? last(searchParams, "isPreviewMode") === "true";
+  let isRevisionPreview = context?.isRevisionPreview ?? Boolean(last(searchParams, "__revisionId"));
+  if (!(isDesignMode || isPreviewMode || isRevisionPreview)) {
+    return null;
+  }
+  let origin = normalizeOrigin(last(searchParams, "weaverseHost"));
+  if (!origin) {
+    return null;
+  }
+  let storefrontHostname = options.storefrontHostname ?? "";
+  if (!isTrustedStudioOrigin(origin, storefrontHostname)) {
+    return null;
+  }
+  let framework = options.framework ?? "hydrogen";
+  let bundle = isDesignMode ? "index.js" : "preview.js";
+  let version = last(searchParams, "weaverseVersion");
+  let url = `${origin}/static/studio/${framework}/${bundle}`;
+  return version ? `${url}?v=${encodeURIComponent(version)}` : url;
+}
+
+// src/studio-connect.tsx
+var loadedScriptSrcs = /* @__PURE__ */ new Set();
+function loadScript(src) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (loadedScriptSrcs.has(src)) {
+    return;
+  }
+  let existing = document.querySelector(`script[src="${src}"]`);
+  if (existing) {
+    loadedScriptSrcs.add(src);
+    return;
+  }
+  let script = document.createElement("script");
+  script.async = true;
+  script.src = src;
+  document.head.appendChild(script);
+  loadedScriptSrcs.add(src);
+}
+function WeaverseNextStudioConnect(props) {
+  react$1.useEffect(() => {
+    let context = props.context;
+    if (!context && typeof window !== "undefined") {
+      context = {
+        searchParams: new URLSearchParams(window.location.search),
+        url: window.location.href
+      };
+    }
+    let src = resolveWeaverseNextStudioScriptSrc(context, {
+      storefrontHostname: props.storefrontHostname ?? (typeof window === "undefined" ? void 0 : window.location.hostname)
+    });
+    if (src) {
+      loadScript(src);
+    }
+  }, [props.context, props.storefrontHostname]);
+  return null;
+}
+
 Object.defineProperty(exports, "isBrowser", {
   enumerable: true,
   get: function () { return react.isBrowser; }
@@ -314,7 +714,15 @@ Object.defineProperty(exports, "createSchema", {
 });
 exports.WeaverseNextProvider = WeaverseNextProvider;
 exports.WeaverseNextRenderer = WeaverseNextRenderer;
+exports.WeaverseNextRuntime = WeaverseNextRuntime;
+exports.WeaverseNextStudioBridge = WeaverseNextStudioBridge;
+exports.WeaverseNextStudioConnect = WeaverseNextStudioConnect;
+exports.bindWeaverseNextStudioRuntime = bindWeaverseNextStudioRuntime;
+exports.buildWeaverseNextRequestInfo = buildWeaverseNextRequestInfo;
 exports.createWeaverseNextClient = createWeaverseNextClient;
+exports.createWeaverseNextRuntime = createWeaverseNextRuntime;
+exports.createWeaverseNextThemeSettingsStore = createWeaverseNextThemeSettingsStore;
+exports.resolveWeaverseNextStudioScriptSrc = resolveWeaverseNextStudioScriptSrc;
 exports.runWeaverseComponentLoaders = runWeaverseComponentLoaders;
 exports.useThemeSettings = useThemeSettings;
 exports.useWeaverseCommerce = useWeaverseCommerce;