@webspatial/react-sdk 0.1.10 → 0.1.11

package/dist/default/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { ReactNode, CSSProperties, ElementType, ForwardedRef } from 'react';
-import { BackgroundMaterialType, CornerRadius, SpatialEntity, Vec3, SpatialSession } from '@webspatial/core-sdk';
+import { BackgroundMaterialType, CornerRadius, SpatialEntity, Vec3, SpatialSession, WindowContainerOptions as WindowContainerOptions$1 } from '@webspatial/core-sdk';
 import { ModelViewerElement } from '@google/model-viewer';
 import { WindowContainerOptions } from '@webspatial/core-sdk/';
 
@@ -159,6 +159,9 @@ declare class XRApp {
     open: (url?: string, target?: string, features?: string) => Window | null;
     initScene(name: string, callback: (pre: WindowContainerOptions) => WindowContainerOptions): void;
 }
-declare function initScene(name: string, callback: (pre: WindowContainerOptions) => WindowContainerOptions): void;
 
-export { CSSSpatialDiv, CSSSpatialPrimitive, Model, type ModelProps, SpatialDiv, type SpatialReactComponentProps as SpatialDivProps, type SpatialReactComponentRef as SpatialDivRef, SpatialMonitor, SpatialPrimitive, type SpatialReactComponentProps, type SpatialReactComponentRef, SpatialView, type SpatialViewRef, XRApp, defaultSceneConfig, enableDebugTool, getSession, initScene, notifyUpdateStandInstanceLayout, parseCornerRadius, withCSSSpatial, withSpatial, withSpatialMonitor };
+declare function initScene(name: string, callback: (pre: WindowContainerOptions$1) => WindowContainerOptions$1): void;
+
+declare function spatialPolyfill(): void;
+
+export { CSSSpatialDiv, CSSSpatialPrimitive, Model, type ModelProps, SpatialDiv, type SpatialReactComponentProps as SpatialDivProps, type SpatialReactComponentRef as SpatialDivRef, SpatialMonitor, SpatialPrimitive, type SpatialReactComponentProps, type SpatialReactComponentRef, SpatialView, type SpatialViewRef, XRApp, defaultSceneConfig, enableDebugTool, getSession, initScene, notifyUpdateStandInstanceLayout, parseCornerRadius, spatialPolyfill, withCSSSpatial, withSpatial, withSpatialMonitor };

package/dist/default/index.js

@@ -147,7 +147,6 @@ import { Spatial } from "@webspatial/core-sdk";
 var spatial = null;
 var _currentSession = null;
 function getSession() {
-  if (false) return null;
   if (!spatial) {
     spatial = new Spatial();
   }
@@ -163,7 +162,6 @@ function getSession() {
 
 // src/utils/debugTool.ts
 async function getStat() {
-  if (false) return;
   const statsInfo = await getSession()._getStats();
   return statsInfo;
 }
@@ -218,7 +216,6 @@ async function inspectRootWindowContainer(simple) {
   return rootWindowContainerInfo;
 }
 function enableDebugTool() {
-  if (false) return;
   const session = getSession();
   Object.assign(window, {
     session,
@@ -477,7 +474,6 @@ var SpatialWindowManager = class {
     this.entity?._setName(debugName);
   }
   async initInternal(url) {
-    if (false) return;
     this.entity = await getSession().createEntity();
     this.webview = await getSession().createWindowComponent();
     await this.webview.loadURL(url);
@@ -490,7 +486,6 @@ var SpatialWindowManager = class {
     await this.entity.setParent(ent);
   }
   async initInternalFromWindow() {
-    if (false) return;
     var w = await getSession().createWindowContext();
     this.window = w;
     this.entity = await getSession().createEntity();
@@ -756,8 +751,6 @@ var XRApp = class _XRApp {
       if (target && target !== "_self") {
         event.preventDefault();
         window.open(url, target);
-      } else {
-        window.location.href = url;
       }
     }
   }
@@ -846,9 +839,6 @@ var XRApp = class _XRApp {
     this.configMap[name] = callback({ ...defaultSceneConfig });
   }
 };
-function initScene(name, callback) {
-  return XRApp.getInstance().initScene(name, callback);
-}
 
 // src/spatial-react-components/SpatialReactComponent/PortalInstance.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
@@ -1322,8 +1312,8 @@ function SpatialReactComponentRefactor(inProps, ref) {
 }
 function renderContentInLayer(inProps, ref) {
   const isInStandardInstance = useContext4(SpatialIsStandardInstanceContext);
-  const isWebSpatialEnv = getSession() !== null;
-  if (isInStandardInstance || !isWebSpatialEnv) {
+  const isWebSpatialEnv2 = getSession() !== null;
+  if (isInStandardInstance || !isWebSpatialEnv2) {
     return renderWebReactComponent(inProps, ref);
   } else {
     const parentSpatialReactContextObject = useContext4(SpatialReactContext);
@@ -2238,7 +2228,6 @@ var SpatialViewEl = forwardRef8(
       return /* @__PURE__ */ jsx9("div", { ref: divRef, ...props, children: "WebSpatial is not supported in this browser" });
     }
     useEffect8(() => {
-      if (false) return;
       activePromise.current = runAsync(async () => {
         if (activePromise.current) {
           await activePromise.current;
@@ -2251,7 +2240,6 @@ var SpatialViewEl = forwardRef8(
         }
       });
       return () => {
-        if (false) return;
         runAsync(async () => {
           await activePromise.current;
           spatialEntity.current?.destroy();
@@ -2380,7 +2368,6 @@ var Model3DNative = class {
     return this.initPromise;
   }
   async initInternal(modelUrl, onSuccess, onFailure) {
-    if (false) return;
     var session = getSession();
     if (!session) {
       return;
@@ -3582,6 +3569,195 @@ function ModelBase(inProps, ref) {
 }
 var Model = forwardRef11(ModelBase);
 Model.displayName = "Model";
+
+// src/initScene.ts
+function initScene(name, callback) {
+  return XRApp.getInstance().initScene(name, callback);
+}
+
+// src/polyfill/injectSceneHook.ts
+async function injectSceneHook() {
+  if (!window.opener) return;
+  if (window._SceneHookOff) return;
+  await getSession()?.setLoading("show");
+  function onContentLoaded(callback) {
+    if (document.readyState === "interactive" || document.readyState === "complete") {
+      callback();
+    } else {
+      document.addEventListener("DOMContentLoaded", callback);
+    }
+  }
+  onContentLoaded(async () => {
+    let cfg = defaultSceneConfig;
+    if (typeof window.xrCurrentSceneDefaults === "function") {
+      try {
+        cfg = await window.xrCurrentSceneDefaults?.();
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    await new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve(null);
+      }, 1e3);
+    });
+    await getSession()?.setLoading("hide");
+    await XRApp.getInstance().show(window, cfg);
+  });
+}
+
+// src/polyfill/spatialPolyfill.ts
+var isWebSpatialEnv = getSession() !== null;
+var SpatialGlobalCustomVars = {
+  backgroundMaterial: "--xr-background-material"
+};
+var htmlBackgroundMaterial = "";
+function setCurrentWindowStyle(backgroundMaterial) {
+  if (backgroundMaterial !== htmlBackgroundMaterial) {
+    const session = getSession();
+    session.getCurrentWindowComponent().setStyle({
+      material: { type: backgroundMaterial }
+    });
+    htmlBackgroundMaterial = backgroundMaterial;
+  }
+}
+function checkHtmlBackgroundMaterial() {
+  const computedStyle = getComputedStyle(document.documentElement);
+  const backgroundMaterial = computedStyle.getPropertyValue(
+    SpatialGlobalCustomVars.backgroundMaterial
+  );
+  setCurrentWindowStyle(backgroundMaterial || "none");
+}
+var htmlCornerRadius = {
+  topLeading: 0,
+  bottomLeading: 0,
+  topTrailing: 0,
+  bottomTrailing: 0
+};
+function checkCornerRadius() {
+  const computedStyle = getComputedStyle(document.documentElement);
+  const cornerRadius = parseCornerRadius(computedStyle);
+  setCornerRadius(cornerRadius);
+}
+function setCornerRadius(cornerRadius) {
+  if (htmlCornerRadius.topLeading !== cornerRadius.topLeading || htmlCornerRadius.bottomLeading !== cornerRadius.bottomLeading || htmlCornerRadius.topTrailing !== cornerRadius.topTrailing || htmlCornerRadius.bottomTrailing !== cornerRadius.bottomTrailing) {
+    const session = getSession();
+    if (!session) return;
+    session.getCurrentWindowComponent().setStyle({
+      cornerRadius
+    });
+    htmlCornerRadius.topLeading = cornerRadius.topLeading;
+    htmlCornerRadius.bottomLeading = cornerRadius.bottomLeading;
+    htmlCornerRadius.topTrailing = cornerRadius.topTrailing;
+    htmlCornerRadius.bottomTrailing = cornerRadius.bottomTrailing;
+  }
+}
+function setOpacity(opacity) {
+  const session = getSession();
+  if (!session) return;
+  session.getCurrentWindowComponent().setOpacity(opacity);
+}
+function checkOpacity() {
+  const computedStyle = getComputedStyle(document.documentElement);
+  const opacity = parseFloat(computedStyle.getPropertyValue("opacity"));
+  setOpacity(opacity);
+}
+async function setHtmlVisible(visible) {
+  const session = getSession();
+  if (!session) return;
+  const wc = session.getCurrentWindowComponent();
+  const ent = await wc.getEntity();
+  ent?.setVisible(visible);
+}
+function checkHtmlVisible() {
+  const computedStyle = getComputedStyle(document.documentElement);
+  const visibility = computedStyle.getPropertyValue("visibility") !== "hidden";
+  const widthGtZero = parseFloat(computedStyle.getPropertyValue("width")) > 0;
+  setHtmlVisible(visibility && widthGtZero);
+}
+function hijackDocumentElementStyle() {
+  const rawDocumentStyle = document.documentElement.style;
+  const styleProxy = new Proxy(rawDocumentStyle, {
+    set: function(target, key, value) {
+      const ret = Reflect.set(target, key, value);
+      if (key === SpatialGlobalCustomVars.backgroundMaterial) {
+        setCurrentWindowStyle(value);
+      }
+      if (key === "border-radius" || key === "borderRadius" || key === "border-top-left-radius" || key === "borderTopLeftRadius" || key === "border-top-right-radius" || key === "borderTopRightRadius" || key === "border-bottom-left-radius" || key === "borderBottomLeftRadius" || key === "border-bottom-right-radius" || key === "borderBottomRightRadius") {
+        checkCornerRadius();
+      }
+      if (key === "opacity") {
+        checkOpacity();
+      }
+      if (key === "visibility" || key === "display") {
+        checkHtmlVisible();
+      }
+      return ret;
+    },
+    get: function(target, prop) {
+      if (typeof target[prop] === "function") {
+        return function(...args) {
+          if (prop === "setProperty") {
+            const [property, value] = args;
+            if (property === SpatialGlobalCustomVars.backgroundMaterial) {
+              setCurrentWindowStyle(value);
+            }
+          } else if (prop === "removeProperty") {
+            const [property] = args;
+            if (property === SpatialGlobalCustomVars.backgroundMaterial) {
+              setCurrentWindowStyle("none");
+            }
+          }
+          return target[prop](
+            ...args
+          );
+        };
+      }
+      return Reflect.get(target, prop);
+    }
+  });
+  Object.defineProperty(document.documentElement, "style", {
+    get: function() {
+      return styleProxy;
+    }
+  });
+}
+function monitorExternalStyleChange() {
+  const headObserver = new MutationObserver(function(mutationsList) {
+    checkCSSProperties();
+  });
+  headObserver.observe(document.head, { childList: true, subtree: true });
+}
+function checkCSSProperties() {
+  checkHtmlBackgroundMaterial();
+  checkCornerRadius();
+  checkOpacity();
+  checkHtmlVisible();
+  window.addEventListener("resize", checkHtmlVisible);
+}
+function hijackGetComputedStyle() {
+  const rawFn = window.getComputedStyle.bind(window);
+  window.getComputedStyle = (element, pseudoElt) => {
+    if (element.__isSpatialDiv) {
+      return element.__getComputedStyle(rawFn, pseudoElt);
+    }
+    return rawFn(element, pseudoElt);
+  };
+}
+function hijackWindowOpen() {
+  XRApp.getInstance().init();
+}
+function spatialPolyfill() {
+  if (!isWebSpatialEnv) {
+    return;
+  }
+  injectSceneHook();
+  hijackWindowOpen();
+  checkCSSProperties();
+  hijackGetComputedStyle();
+  hijackDocumentElementStyle();
+  monitorExternalStyleChange();
+}
 export {
   CSSSpatialDiv,
   CSSSpatialPrimitive,
@@ -3597,6 +3773,7 @@ export {
   initScene,
   notifyUpdateStandInstanceLayout,
   parseCornerRadius,
+  spatialPolyfill,
   withCSSSpatial,
   withSpatial,
   withSpatialMonitor