@webspatial/core-sdk 1.7.0 → 2.0.0

package/dist/spatial-host.js

@@ -0,0 +1,18 @@
+import { getPlatform, getPlatformSync } from "./platform-runtime";
+async function createNativeSpatialDiv() {
+  const platform = await getPlatform();
+  return platform.createNativeSpatialDiv();
+}
+async function createNativeAttachment(options) {
+  const platform = await getPlatform();
+  return platform.createNativeAttachment(options);
+}
+function openSpatialSceneSync(url, config, target, features) {
+  return getPlatformSync().openSpatialSceneSync(url, config, target, features);
+}
+export {
+  createNativeAttachment,
+  createNativeSpatialDiv,
+  openSpatialSceneSync
+};
+//# sourceMappingURL=spatial-host.js.map

package/dist/spatial-host.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spatial-host.ts"],"sourcesContent":["import type { WebSpatialProtocolResult } from './platform-adapter/interface'\nimport { getPlatform, getPlatformSync } from './platform-runtime'\nimport type { SpatialSceneCreationOptionsInternal } from './types/internal'\nimport type { AttachmentEntityOptions } from './types/types'\n\nexport async function createNativeSpatialDiv(): Promise<WebSpatialProtocolResult> {\n  const platform = await getPlatform()\n  return platform.createNativeSpatialDiv()\n}\n\nexport async function createNativeAttachment(\n  options: AttachmentEntityOptions,\n): Promise<WebSpatialProtocolResult> {\n  const platform = await getPlatform()\n  return platform.createNativeAttachment(options)\n}\n\nexport function openSpatialSceneSync(\n  url: string,\n  config: SpatialSceneCreationOptionsInternal | undefined,\n  target?: string,\n  features?: string,\n): WebSpatialProtocolResult {\n  return getPlatformSync().openSpatialSceneSync(url, config, target, features)\n}\n"],"mappings":"AACA,SAAS,aAAa,uBAAuB;AAI7C,eAAsB,yBAA4D;AAChF,QAAM,WAAW,MAAM,YAAY;AACnC,SAAO,SAAS,uBAAuB;AACzC;AAEA,eAAsB,uBACpB,SACmC;AACnC,QAAM,WAAW,MAAM,YAAY;AACnC,SAAO,SAAS,uBAAuB,OAAO;AAChD;AAEO,SAAS,qBACd,KACA,QACA,QACA,UAC0B;AAC1B,SAAO,gBAAgB,EAAE,qBAAqB,KAAK,QAAQ,QAAQ,QAAQ;AAC7E;","names":[]}

package/dist/spatial-window-polyfill.d.ts

@@ -0,0 +1,3 @@
+declare function spatialWindowPolyfill(): Promise<void>;
+
+export { spatialWindowPolyfill };

package/dist/spatial-window-polyfill.js

@@ -0,0 +1,155 @@
+import { parseCornerRadius } from "./utils";
+import { Spatial } from "./Spatial";
+const spatial = new Spatial();
+let session = void 0;
+const SpatialGlobalCustomVars = {
+  backgroundMaterial: "--xr-background-material"
+};
+let htmlBackgroundMaterial = "";
+function setCurrentWindowStyle(backgroundMaterial) {
+  if (backgroundMaterial !== htmlBackgroundMaterial) {
+    session?.getSpatialScene()?.updateSpatialProperties({
+      material: backgroundMaterial
+    });
+    htmlBackgroundMaterial = backgroundMaterial;
+  }
+}
+function checkHtmlBackgroundMaterial() {
+  const computedStyle = getComputedStyle(document.documentElement);
+  const backgroundMaterial = computedStyle.getPropertyValue(
+    SpatialGlobalCustomVars.backgroundMaterial
+  );
+  setCurrentWindowStyle(backgroundMaterial || "none");
+}
+let 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) {
+    session?.getSpatialScene()?.updateSpatialProperties({
+      cornerRadius
+    });
+    htmlCornerRadius.topLeading = cornerRadius.topLeading;
+    htmlCornerRadius.bottomLeading = cornerRadius.bottomLeading;
+    htmlCornerRadius.topTrailing = cornerRadius.topTrailing;
+    htmlCornerRadius.bottomTrailing = cornerRadius.bottomTrailing;
+  }
+}
+function setOpacity(opacity) {
+  session?.getSpatialScene().updateSpatialProperties({
+    opacity
+  });
+}
+function checkOpacity() {
+  const computedStyle = getComputedStyle(document.documentElement);
+  const opacity = parseFloat(computedStyle.getPropertyValue("opacity"));
+  setOpacity(opacity);
+}
+function hijackDocumentElementStyle() {
+  const rawDocumentStyle = document.documentElement.style;
+  const styleProxy = new Proxy(rawDocumentStyle, {
+    set: function(target, key, value) {
+      let ret;
+      if (key === SpatialGlobalCustomVars.backgroundMaterial) {
+        target.setProperty(
+          SpatialGlobalCustomVars.backgroundMaterial,
+          String(value)
+        );
+        ret = true;
+      } else {
+        ret = Reflect.set(target, key, value);
+      }
+      if (key === SpatialGlobalCustomVars.backgroundMaterial) {
+        setCurrentWindowStyle(String(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();
+      }
+      return ret;
+    },
+    get: function(target, prop) {
+      if (prop === SpatialGlobalCustomVars.backgroundMaterial) {
+        return target.getPropertyValue(
+          SpatialGlobalCustomVars.backgroundMaterial
+        );
+      }
+      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(checkCSSProperties);
+  headObserver.observe(document.head, { childList: true, subtree: true });
+}
+function checkCSSProperties() {
+  checkHtmlBackgroundMaterial();
+  checkCornerRadius();
+  checkOpacity();
+}
+function monitorHTMLAttributeChange() {
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === "attributes" && mutation.attributeName) {
+        checkCSSProperties();
+      }
+    });
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["style", "class"]
+  });
+}
+async function spatialWindowPolyfill() {
+  if (!spatial.runInSpatialWeb()) {
+    return;
+  }
+  session = await spatial.requestSession();
+  if (document.readyState === "complete") {
+    checkCSSProperties();
+  } else {
+    window.addEventListener("load", () => {
+      checkCSSProperties();
+    });
+  }
+  hijackDocumentElementStyle();
+  monitorExternalStyleChange();
+  monitorHTMLAttributeChange();
+}
+export {
+  spatialWindowPolyfill
+};
+//# sourceMappingURL=spatial-window-polyfill.js.map

package/dist/spatial-window-polyfill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spatial-window-polyfill.ts"],"sourcesContent":["import { parseCornerRadius } from './utils'\nimport { Spatial } from './Spatial'\nimport { SpatialSession } from './SpatialSession'\nimport { BackgroundMaterialType } from './types/types'\n\nconst spatial = new Spatial()\nlet session: SpatialSession | undefined = undefined\n\nconst SpatialGlobalCustomVars = {\n  backgroundMaterial: '--xr-background-material',\n}\n\n// keep track of current html background material\nlet htmlBackgroundMaterial = ''\nfunction setCurrentWindowStyle(backgroundMaterial: string) {\n  if (backgroundMaterial !== htmlBackgroundMaterial) {\n    session?.getSpatialScene()?.updateSpatialProperties({\n      material: backgroundMaterial as BackgroundMaterialType,\n    })\n    htmlBackgroundMaterial = backgroundMaterial\n  }\n}\n\nfunction checkHtmlBackgroundMaterial() {\n  const computedStyle = getComputedStyle(document.documentElement)\n\n  const backgroundMaterial = computedStyle.getPropertyValue(\n    SpatialGlobalCustomVars.backgroundMaterial,\n  )\n\n  setCurrentWindowStyle(backgroundMaterial || 'none')\n}\n\n// keep track of current corner radius\nlet htmlCornerRadius = {\n  topLeading: 0,\n  bottomLeading: 0,\n  topTrailing: 0,\n  bottomTrailing: 0,\n}\n\nfunction checkCornerRadius() {\n  const computedStyle = getComputedStyle(document.documentElement)\n  const cornerRadius = parseCornerRadius(computedStyle)\n  setCornerRadius(cornerRadius)\n}\n\nfunction setCornerRadius(cornerRadius: any) {\n  if (\n    htmlCornerRadius.topLeading !== cornerRadius.topLeading ||\n    htmlCornerRadius.bottomLeading !== cornerRadius.bottomLeading ||\n    htmlCornerRadius.topTrailing !== cornerRadius.topTrailing ||\n    htmlCornerRadius.bottomTrailing !== cornerRadius.bottomTrailing\n  ) {\n    session?.getSpatialScene()?.updateSpatialProperties({\n      cornerRadius,\n    })\n    htmlCornerRadius.topLeading = cornerRadius.topLeading\n    htmlCornerRadius.bottomLeading = cornerRadius.bottomLeading\n    htmlCornerRadius.topTrailing = cornerRadius.topTrailing\n    htmlCornerRadius.bottomTrailing = cornerRadius.bottomTrailing\n  }\n}\n\nfunction setOpacity(opacity: number) {\n  session?.getSpatialScene().updateSpatialProperties({\n    opacity,\n  })\n}\n\nfunction checkOpacity() {\n  const computedStyle = getComputedStyle(document.documentElement)\n  const opacity = parseFloat(computedStyle.getPropertyValue('opacity'))\n  setOpacity(opacity)\n}\n\nfunction hijackDocumentElementStyle() {\n  const rawDocumentStyle = document.documentElement.style\n  const styleProxy = new Proxy(rawDocumentStyle, {\n    set: function (target, key, value) {\n      let ret: boolean\n\n      if (key === SpatialGlobalCustomVars.backgroundMaterial) {\n        target.setProperty(\n          SpatialGlobalCustomVars.backgroundMaterial,\n          String(value),\n        )\n        ret = true\n      } else {\n        ret = Reflect.set(target, key, value)\n      }\n\n      if (key === SpatialGlobalCustomVars.backgroundMaterial) {\n        setCurrentWindowStyle(String(value))\n      }\n\n      if (\n        key === 'border-radius' ||\n        key === 'borderRadius' ||\n        key === 'border-top-left-radius' ||\n        key === 'borderTopLeftRadius' ||\n        key === 'border-top-right-radius' ||\n        key === 'borderTopRightRadius' ||\n        key === 'border-bottom-left-radius' ||\n        key === 'borderBottomLeftRadius' ||\n        key === 'border-bottom-right-radius' ||\n        key === 'borderBottomRightRadius'\n      ) {\n        checkCornerRadius()\n      }\n\n      if (key === 'opacity') {\n        checkOpacity()\n      }\n\n      return ret\n    },\n    get: function (target, prop: string) {\n      if (prop === SpatialGlobalCustomVars.backgroundMaterial) {\n        return target.getPropertyValue(\n          SpatialGlobalCustomVars.backgroundMaterial,\n        )\n      }\n\n      if (typeof target[prop as keyof CSSStyleDeclaration] === 'function') {\n        return function (this: any, ...args: any[]) {\n          if (prop === 'setProperty') {\n            const [property, value] = args\n            if (property === SpatialGlobalCustomVars.backgroundMaterial) {\n              setCurrentWindowStyle(value)\n            }\n          } else if (prop === 'removeProperty') {\n            const [property] = args\n            if (property === SpatialGlobalCustomVars.backgroundMaterial) {\n              setCurrentWindowStyle('none')\n            }\n          }\n          return (target[prop as keyof CSSStyleDeclaration] as Function)(\n            ...args,\n          )\n        }\n      }\n      return Reflect.get(target, prop)\n    },\n  })\n  Object.defineProperty(document.documentElement, 'style', {\n    get: function () {\n      return styleProxy\n    },\n  })\n}\n\nfunction monitorExternalStyleChange() {\n  const headObserver = new MutationObserver(checkCSSProperties)\n\n  headObserver.observe(document.head, { childList: true, subtree: true })\n}\n\nfunction checkCSSProperties() {\n  checkHtmlBackgroundMaterial()\n  checkCornerRadius()\n  checkOpacity()\n}\n\nfunction monitorHTMLAttributeChange() {\n  const observer = new MutationObserver(mutations => {\n    mutations.forEach(mutation => {\n      if (mutation.type === 'attributes' && mutation.attributeName) {\n        checkCSSProperties()\n      }\n    })\n  })\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['style', 'class'],\n  })\n}\n\nexport async function spatialWindowPolyfill() {\n  if (!spatial.runInSpatialWeb()) {\n    return\n  }\n\n  session = await spatial.requestSession()!\n\n  if (document.readyState === 'complete') {\n    checkCSSProperties()\n  } else {\n    window.addEventListener('load', () => {\n      checkCSSProperties()\n    })\n  }\n\n  hijackDocumentElementStyle()\n  monitorExternalStyleChange()\n  monitorHTMLAttributeChange()\n}\n"],"mappings":"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","names":[]}