@webspatial/react-sdk 0.1.10 → 0.1.11

package/dist/web/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/web/index.js

@@ -144,13 +144,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 +194,6 @@ function getSession() {
 
 // src/utils/debugTool.ts
 async function getStat() {
-  if (true) return;
   const statsInfo = await getSession()._getStats();
   return statsInfo;
 }
@@ -221,7 +248,6 @@ async function inspectRootWindowContainer(simple) {
   return rootWindowContainerInfo;
 }
 function enableDebugTool() {
-  if (true) return;
   const session = getSession();
   Object.assign(window, {
     session,
@@ -480,7 +506,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 +518,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();
@@ -759,8 +783,6 @@ var XRApp = class _XRApp {
       if (target && target !== "_self") {
         event.preventDefault();
         window.open(url, target);
-      } else {
-        window.location.href = url;
       }
     }
   }
@@ -849,9 +871,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";
@@ -1325,8 +1344,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 +2141,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 +2259,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 +2271,6 @@ var SpatialViewEl = forwardRef8(
         }
       });
       return () => {
-        if (true) return;
         runAsync(async () => {
           await activePromise.current;
           spatialEntity.current?.destroy();
@@ -2382,7 +2399,6 @@ var Model3DNative = class {
     return this.initPromise;
   }
   async initInternal(modelUrl, onSuccess, onFailure) {
-    if (true) return;
     var session = getSession();
     if (!session) {
       return;
@@ -3584,6 +3600,195 @@ 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();
+}
 export {
   CSSSpatialDiv,
   CSSSpatialPrimitive,
@@ -3599,6 +3804,7 @@ export {
   initScene,
   notifyUpdateStandInstanceLayout,
   parseCornerRadius,
+  spatialPolyfill,
   withCSSSpatial,
   withSpatial,
   withSpatialMonitor