@webspatial/react-sdk 0.1.10 → 0.1.13

package/dist/web/index.js

@@ -1,3 +1,12 @@
+
+      (function(){
+        if(typeof window === 'undefined') return;
+        if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
+        window.__webspatialsdk__['react-sdk-version'] = "0.1.13"
+        window.__webspatialsdk__['XR_ENV'] = "web"
+    })()
+      
+
 // src/spatial-react-components/SpatialPrimitive.tsx
 import { forwardRef as forwardRef3 } from "react";
 
@@ -144,13 +153,41 @@ import { forwardRef as forwardRef2, useMemo as useMemo2, useContext as useContex
 
 // src/noRuntime.ts
 var SpatialHelper = {};
-var Spatial = {};
+var Spatial = class {
+  /**
+   * Requests a session object from the browser
+   * @returns The session or null if not availible in the current browser
+   * [TODO] discuss implications of this not being async
+   */
+  requestSession() {
+    return null;
+  }
+  /**
+   * @returns true if web spatial is supported by this webpage
+   */
+  isSupported() {
+    return false;
+  }
+  /**
+   * Gets the native version, format is "x.x.x"
+   * @returns native version string
+   */
+  getNativeVersion() {
+    return null;
+  }
+  /**
+   * Gets the client version, format is "x.x.x"
+   * @returns client version string
+   */
+  getClientVersion() {
+    return null;
+  }
+};
 
 // src/utils/getSession.ts
 var spatial = null;
 var _currentSession = null;
 function getSession() {
-  if (true) return null;
   if (!spatial) {
     spatial = new Spatial();
   }
@@ -166,7 +203,6 @@ function getSession() {
 
 // src/utils/debugTool.ts
 async function getStat() {
-  if (true) return;
   const statsInfo = await getSession()._getStats();
   return statsInfo;
 }
@@ -221,7 +257,6 @@ async function inspectRootWindowContainer(simple) {
   return rootWindowContainerInfo;
 }
 function enableDebugTool() {
-  if (true) return;
   const session = getSession();
   Object.assign(window, {
     session,
@@ -480,7 +515,6 @@ var SpatialWindowManager = class {
     this.entity?._setName(debugName);
   }
   async initInternal(url) {
-    if (true) return;
     this.entity = await getSession().createEntity();
     this.webview = await getSession().createWindowComponent();
     await this.webview.loadURL(url);
@@ -493,7 +527,6 @@ var SpatialWindowManager = class {
     await this.entity.setParent(ent);
   }
   async initInternalFromWindow() {
-    if (true) return;
     var w = await getSession().createWindowContext();
     this.window = w;
     this.entity = await getSession().createEntity();
@@ -667,7 +700,8 @@ function getInheritedStyleProps(computedStyle) {
     // position also need to be synced
     "position",
     "width",
-    "height"
+    "height",
+    "display"
   ];
   var props = {};
   for (var cssName of propNames) {
@@ -759,8 +793,6 @@ var XRApp = class _XRApp {
       if (target && target !== "_self") {
         event.preventDefault();
         window.open(url, target);
-      } else {
-        window.location.href = url;
       }
     }
   }
@@ -849,9 +881,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";
@@ -868,8 +897,7 @@ function renderJSXPortalInstance(inProps, inheritedPortalStyle, className) {
     marginTop: "0px",
     marginBottom: "0px",
     borderRadius: "0px",
-    overflow: "",
-    display: "block"
+    overflow: ""
   };
   const style = {
     ...inStyle,
@@ -1325,8 +1353,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);
@@ -2122,7 +2150,7 @@ function renderInPortalInstance(cssSpatialRootContextObject, cssSpatialID, inPro
 }
 function CSSSpatialComponentBase(inProps, ref) {
   const { [CSSSpatialID]: cssSpatialID, ...props } = inProps;
-  const isWebEnv = true;
+  const isWebEnv = !getSession();
   if (isWebEnv) {
     return renderInWebEnv(props, ref);
   } else {
@@ -2240,7 +2268,6 @@ var SpatialViewEl = forwardRef8(
       return /* @__PURE__ */ jsx9("div", { ref: divRef, ...props, children: "WebSpatial is not supported in this browser" });
     }
     useEffect8(() => {
-      if (true) return;
       activePromise.current = runAsync(async () => {
         if (activePromise.current) {
           await activePromise.current;
@@ -2253,7 +2280,6 @@ var SpatialViewEl = forwardRef8(
         }
       });
       return () => {
-        if (true) return;
         runAsync(async () => {
           await activePromise.current;
           spatialEntity.current?.destroy();
@@ -2382,7 +2408,6 @@ var Model3DNative = class {
     return this.initPromise;
   }
   async initInternal(modelUrl, onSuccess, onFailure) {
-    if (true) return;
     var session = getSession();
     if (!session) {
       return;
@@ -3584,6 +3609,198 @@ function ModelBase(inProps, ref) {
 }
 var Model = forwardRef11(ModelBase);
 Model.displayName = "Model";
+
+// src/initScene.web.ts
+function initScene(name, callback) {
+  return;
+}
+
+// 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();
+}
+
+// src/index.ts
+var version = "0.1.13";
 export {
   CSSSpatialDiv,
   CSSSpatialPrimitive,
@@ -3599,6 +3816,8 @@ export {
   initScene,
   notifyUpdateStandInstanceLayout,
   parseCornerRadius,
+  spatialPolyfill,
+  version,
   withCSSSpatial,
   withSpatial,
   withSpatialMonitor