@webspatial/react-sdk 0.1.16 → 0.1.18

package/dist/jsx/jsx-dev-runtime.d.ts

@@ -53,6 +53,7 @@ declare module 'react' {
         '--xr-background-material'?: string;
         '--xr-back'?: number | string;
         '--xr-z-index'?: number | string;
+        enableXr?: boolean;
     }
 }
 declare global {
@@ -66,6 +67,7 @@ declare global {
         '--xr-background-material'?: string;
         '--xr-back'?: number | string;
         '--xr-z-index'?: number | string;
+        enableXr?: boolean;
     }
 }
 

package/dist/jsx/jsx-dev-runtime.js

@@ -2,7 +2,7 @@
       (function(){
         if(typeof window === 'undefined') return;
         if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
-        window.__webspatialsdk__['react-sdk-version'] = "0.1.16"
+        window.__webspatialsdk__['react-sdk-version'] = "0.1.18"
         window.__webspatialsdk__['XR_ENV'] = "avp"
     })()
       
@@ -184,6 +184,19 @@ function hijackGetComputedStyle() {
 function hijackWindowOpen() {
   XRApp2.getInstance().init();
 }
+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"]
+  });
+}
 function spatialPolyfill() {
   if (!isWebSpatialEnv) {
     return;
@@ -194,6 +207,7 @@ function spatialPolyfill() {
   hijackGetComputedStyle();
   hijackDocumentElementStyle();
   monitorExternalStyleChange();
+  monitorHTMLAttributeChange();
 }
 
 // src/jsx/jsx-dev-runtime.ts

package/dist/jsx/jsx-dev-runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/polyfill/spatialPolyfill.ts","../../src/polyfill/injectSceneHook.ts","../../src/jsx/jsx-dev-runtime.ts","../../src/jsx/jsx-shared.ts"],"sourcesContent":["//@ts-ignore\nimport { parseCornerRadius, getSession, XRApp } from '@webspatial/react-sdk'\nimport { injectSceneHook } from './injectSceneHook'\n\nconst isWebSpatialEnv = getSession() !== null\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    const session = getSession()!\n    session.getCurrentWindowComponent().setStyle({\n      material: { type: backgroundMaterial as any },\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}\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    const session = getSession()!\n    if (!session) return\n    session.getCurrentWindowComponent().setStyle({\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  const session = getSession()!\n  if (!session) return\n  session.getCurrentWindowComponent().setOpacity(opacity)\n}\n\nfunction checkOpacity() {\n  const computedStyle = getComputedStyle(document.documentElement)\n  const opacity = parseFloat(computedStyle.getPropertyValue('opacity'))\n  setOpacity(opacity)\n}\n\nasync function setHtmlVisible(visible: boolean) {\n  const session = getSession()!\n  if (!session) return\n  const wc = session.getCurrentWindowComponent()\n  const ent = await wc.getEntity()\n  ent?.setVisible(visible)\n}\n\nfunction checkHtmlVisible() {\n  const computedStyle = getComputedStyle(document.documentElement)\n  const visibility = computedStyle.getPropertyValue('visibility') !== 'hidden'\n  const widthGtZero = parseFloat(computedStyle.getPropertyValue('width')) > 0\n  setHtmlVisible(visibility && widthGtZero)\n}\n\nfunction hijackDocumentElementStyle() {\n  const rawDocumentStyle = document.documentElement.style\n  const styleProxy = new Proxy(rawDocumentStyle, {\n    set: function (target, key, value) {\n      const ret = Reflect.set(target, key, value)\n\n      if (key === SpatialGlobalCustomVars.backgroundMaterial) {\n        setCurrentWindowStyle(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      if (key === 'visibility' || key === 'display') {\n        checkHtmlVisible()\n      }\n\n      return ret\n    },\n    get: function (target, prop: string) {\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(function (mutationsList) {\n    checkCSSProperties()\n  })\n\n  headObserver.observe(document.head, { childList: true, subtree: true })\n}\n\nfunction checkCSSProperties() {\n  checkHtmlBackgroundMaterial()\n  checkCornerRadius()\n  checkOpacity()\n  checkHtmlVisible()\n  window.addEventListener('resize', checkHtmlVisible)\n}\n\nfunction hijackGetComputedStyle() {\n  const rawFn = window.getComputedStyle.bind(window)\n  window.getComputedStyle = (element, pseudoElt) => {\n    if ((element as any).__isSpatialDiv) {\n      return (element as any).__getComputedStyle(rawFn, pseudoElt)\n    }\n    return rawFn(element, pseudoElt)\n  }\n}\n\nfunction hijackWindowOpen() {\n  XRApp.getInstance().init()\n}\n\nexport function spatialPolyfill() {\n  if (!isWebSpatialEnv) {\n    return\n  }\n\n  injectSceneHook()\n  hijackWindowOpen()\n  checkCSSProperties()\n  hijackGetComputedStyle()\n  hijackDocumentElementStyle()\n  monitorExternalStyleChange()\n}\n","//@ts-ignore\nimport { getSession } from '@webspatial/react-sdk'\n//@ts-ignore\nimport { defaultSceneConfig, XRApp } from '@webspatial/react-sdk'\n\nexport async function injectSceneHook() {\n  if (!window.opener) return\n  if ((window as any)._SceneHookOff) return\n\n  await getSession()?.setLoading('show')\n  // see this flag, we have done create the root scene\n\n  function onContentLoaded(callback: any) {\n    if (\n      document.readyState === 'interactive' ||\n      document.readyState === 'complete'\n    ) {\n      callback()\n    } else {\n      document.addEventListener('DOMContentLoaded', callback)\n    }\n  }\n\n  onContentLoaded(async () => {\n    let cfg = defaultSceneConfig\n    if (typeof (window as any).xrCurrentSceneDefaults === 'function') {\n      try {\n        cfg = await (window as any).xrCurrentSceneDefaults?.()\n      } catch (error) {\n        console.error(error)\n      }\n    }\n    // fixme: this duration is too short so that hide and show is at racing, so add a little delay to avoid\n    await new Promise((resolve, reject) => {\n      setTimeout(() => {\n        resolve(null)\n      }, 1000)\n    })\n    await getSession()?.setLoading('hide')\n    await XRApp.getInstance().show(window, cfg)\n  })\n}\n","import { spatialPolyfill } from '../polyfill'\n\nspatialPolyfill()\n\nexport { Fragment } from 'react/jsx-runtime'\nexport { jsxDEV, jsx } from './jsx-shared'\n\nexport type { WebSpatialJSX as JSX } from './jsx-namespace'\nexport * from './xr-css-extension'\n","import { jsxDEV as _jsxDEV, JSXSource } from 'react/jsx-dev-runtime'\nimport reactJSXRuntime from 'react/jsx-runtime'\n//@ts-ignore bypass ts check for external\nimport { withCSSSpatial, withSpatialMonitor } from '@webspatial/react-sdk'\nconst attributeFlag = 'enable-xr'\nconst styleFlag = 'enableXr'\nconst classFlag = '__enableXr__'\nconst xrMonitorFlag = 'enable-xr-monitor'\n\nexport function replaceToSpatialPrimitiveType(\n  type: React.ElementType,\n  props: unknown,\n) {\n  const propsObject = props as Record<string, any>\n  if (attributeFlag in propsObject) {\n    delete propsObject[attributeFlag]\n    return withCSSSpatial(type)\n  }\n\n  if (xrMonitorFlag in propsObject) {\n    delete propsObject[xrMonitorFlag]\n    return withSpatialMonitor(type)\n  }\n\n  if (propsObject && propsObject.style && styleFlag in propsObject.style) {\n    delete propsObject.style[styleFlag]\n    return withCSSSpatial(type)\n  }\n\n  if (propsObject && propsObject.className) {\n    const originalClassNames = propsObject.className.split(' ')\n    const idx = originalClassNames.indexOf(classFlag)\n    if (idx !== -1) {\n      originalClassNames.splice(idx, 1)\n      propsObject.className = originalClassNames.join(' ')\n      return withCSSSpatial(type)\n    }\n  }\n\n  return type\n}\n\nexport function jsxs(type: React.ElementType, props: unknown, key?: React.Key) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return reactJSXRuntime.jsxs(type, props, key)\n}\n\nexport function jsx(type: React.ElementType, props: unknown, key?: React.Key) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return reactJSXRuntime.jsx(type, props, key)\n}\n\nexport function jsxDEV(\n  type: React.ElementType,\n  props: unknown,\n  key: React.Key,\n  isStatic: boolean,\n  source?: JSXSource,\n  self?: unknown,\n) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return _jsxDEV(type, props, key, isStatic, source, self)\n}\n"],"mappings":"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","names":["getSession","XRApp","getSession","XRApp"]}
+{"version":3,"sources":["../../src/polyfill/spatialPolyfill.ts","../../src/polyfill/injectSceneHook.ts","../../src/jsx/jsx-dev-runtime.ts","../../src/jsx/jsx-shared.ts"],"sourcesContent":["//@ts-ignore\nimport { parseCornerRadius, getSession, XRApp } from '@webspatial/react-sdk'\nimport { injectSceneHook } from './injectSceneHook'\n\nconst isWebSpatialEnv = getSession() !== null\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    const session = getSession()!\n    session.getCurrentWindowComponent().setStyle({\n      material: { type: backgroundMaterial as any },\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}\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    const session = getSession()!\n    if (!session) return\n    session.getCurrentWindowComponent().setStyle({\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  const session = getSession()!\n  if (!session) return\n  session.getCurrentWindowComponent().setOpacity(opacity)\n}\n\nfunction checkOpacity() {\n  const computedStyle = getComputedStyle(document.documentElement)\n  const opacity = parseFloat(computedStyle.getPropertyValue('opacity'))\n  setOpacity(opacity)\n}\n\nasync function setHtmlVisible(visible: boolean) {\n  const session = getSession()!\n  if (!session) return\n  const wc = session.getCurrentWindowComponent()\n  const ent = await wc.getEntity()\n  ent?.setVisible(visible)\n}\n\nfunction checkHtmlVisible() {\n  const computedStyle = getComputedStyle(document.documentElement)\n  const visibility = computedStyle.getPropertyValue('visibility') !== 'hidden'\n  const widthGtZero = parseFloat(computedStyle.getPropertyValue('width')) > 0\n  setHtmlVisible(visibility && widthGtZero)\n}\n\nfunction hijackDocumentElementStyle() {\n  const rawDocumentStyle = document.documentElement.style\n  const styleProxy = new Proxy(rawDocumentStyle, {\n    set: function (target, key, value) {\n      const ret = Reflect.set(target, key, value)\n\n      if (key === SpatialGlobalCustomVars.backgroundMaterial) {\n        setCurrentWindowStyle(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      if (key === 'visibility' || key === 'display') {\n        checkHtmlVisible()\n      }\n\n      return ret\n    },\n    get: function (target, prop: string) {\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(function (mutationsList) {\n    checkCSSProperties()\n  })\n\n  headObserver.observe(document.head, { childList: true, subtree: true })\n}\n\nfunction checkCSSProperties() {\n  checkHtmlBackgroundMaterial()\n  checkCornerRadius()\n  checkOpacity()\n  checkHtmlVisible()\n  window.addEventListener('resize', checkHtmlVisible)\n}\n\nfunction hijackGetComputedStyle() {\n  const rawFn = window.getComputedStyle.bind(window)\n  window.getComputedStyle = (element, pseudoElt) => {\n    if ((element as any).__isSpatialDiv) {\n      return (element as any).__getComputedStyle(rawFn, pseudoElt)\n    }\n    return rawFn(element, pseudoElt)\n  }\n}\n\nfunction hijackWindowOpen() {\n  XRApp.getInstance().init()\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 function spatialPolyfill() {\n  if (!isWebSpatialEnv) {\n    return\n  }\n\n  injectSceneHook()\n  hijackWindowOpen()\n  checkCSSProperties()\n  hijackGetComputedStyle()\n  hijackDocumentElementStyle()\n  monitorExternalStyleChange()\n  monitorHTMLAttributeChange()\n}\n","//@ts-ignore\nimport { getSession } from '@webspatial/react-sdk'\n//@ts-ignore\nimport { defaultSceneConfig, XRApp } from '@webspatial/react-sdk'\n\nexport async function injectSceneHook() {\n  if (!window.opener) return\n  if ((window as any)._SceneHookOff) return\n\n  await getSession()?.setLoading('show')\n  // see this flag, we have done create the root scene\n\n  function onContentLoaded(callback: any) {\n    if (\n      document.readyState === 'interactive' ||\n      document.readyState === 'complete'\n    ) {\n      callback()\n    } else {\n      document.addEventListener('DOMContentLoaded', callback)\n    }\n  }\n\n  onContentLoaded(async () => {\n    let cfg = defaultSceneConfig\n    if (typeof (window as any).xrCurrentSceneDefaults === 'function') {\n      try {\n        cfg = await (window as any).xrCurrentSceneDefaults?.()\n      } catch (error) {\n        console.error(error)\n      }\n    }\n    // fixme: this duration is too short so that hide and show is at racing, so add a little delay to avoid\n    await new Promise((resolve, reject) => {\n      setTimeout(() => {\n        resolve(null)\n      }, 1000)\n    })\n    await getSession()?.setLoading('hide')\n    await XRApp.getInstance().show(window, cfg)\n  })\n}\n","import { spatialPolyfill } from '../polyfill'\n\nspatialPolyfill()\n\nexport { Fragment } from 'react/jsx-runtime'\nexport { jsxDEV, jsx } from './jsx-shared'\n\nexport type { WebSpatialJSX as JSX } from './jsx-namespace'\nexport * from './xr-css-extension'\n","import { jsxDEV as _jsxDEV, JSXSource } from 'react/jsx-dev-runtime'\nimport reactJSXRuntime from 'react/jsx-runtime'\n//@ts-ignore bypass ts check for external\nimport { withCSSSpatial, withSpatialMonitor } from '@webspatial/react-sdk'\nconst attributeFlag = 'enable-xr'\nconst styleFlag = 'enableXr'\nconst classFlag = '__enableXr__'\nconst xrMonitorFlag = 'enable-xr-monitor'\n\nexport function replaceToSpatialPrimitiveType(\n  type: React.ElementType,\n  props: unknown,\n) {\n  const propsObject = props as Record<string, any>\n  if (attributeFlag in propsObject) {\n    delete propsObject[attributeFlag]\n    return withCSSSpatial(type)\n  }\n\n  if (xrMonitorFlag in propsObject) {\n    delete propsObject[xrMonitorFlag]\n    return withSpatialMonitor(type)\n  }\n\n  if (propsObject && propsObject.style && styleFlag in propsObject.style) {\n    delete propsObject.style[styleFlag]\n    return withCSSSpatial(type)\n  }\n\n  if (propsObject && propsObject.className) {\n    const originalClassNames = propsObject.className.split(' ')\n    const idx = originalClassNames.indexOf(classFlag)\n    if (idx !== -1) {\n      originalClassNames.splice(idx, 1)\n      propsObject.className = originalClassNames.join(' ')\n      return withCSSSpatial(type)\n    }\n  }\n\n  return type\n}\n\nexport function jsxs(type: React.ElementType, props: unknown, key?: React.Key) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return reactJSXRuntime.jsxs(type, props, key)\n}\n\nexport function jsx(type: React.ElementType, props: unknown, key?: React.Key) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return reactJSXRuntime.jsx(type, props, key)\n}\n\nexport function jsxDEV(\n  type: React.ElementType,\n  props: unknown,\n  key: React.Key,\n  isStatic: boolean,\n  source?: JSXSource,\n  self?: unknown,\n) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return _jsxDEV(type, props, key, isStatic, source, self)\n}\n"],"mappings":";;;;;;;;;;AACA,SAAS,mBAAmB,cAAAA,aAAY,SAAAC,cAAa;;;ACArD,SAAS,kBAAkB;AAE3B,SAAS,oBAAoB,aAAa;AAE1C,eAAsB,kBAAkB;AACtC,MAAI,CAAC,OAAO,OAAQ;AACpB,MAAK,OAAe,cAAe;AAEnC,QAAM,WAAW,GAAG,WAAW,MAAM;AAGrC,WAAS,gBAAgB,UAAe;AACtC,QACE,SAAS,eAAe,iBACxB,SAAS,eAAe,YACxB;AACA,eAAS;AAAA,IACX,OAAO;AACL,eAAS,iBAAiB,oBAAoB,QAAQ;AAAA,IACxD;AAAA,EACF;AAEA,kBAAgB,YAAY;AAC1B,QAAI,MAAM;AACV,QAAI,OAAQ,OAAe,2BAA2B,YAAY;AAChE,UAAI;AACF,cAAM,MAAO,OAAe,yBAAyB;AAAA,MACvD,SAAS,OAAO;AACd,gBAAQ,MAAM,KAAK;AAAA,MACrB;AAAA,IACF;AAEA,UAAM,IAAI,QAAQ,CAAC,SAAS,WAAW;AACrC,iBAAW,MAAM;AACf,gBAAQ,IAAI;AAAA,MACd,GAAG,GAAI;AAAA,IACT,CAAC;AACD,UAAM,WAAW,GAAG,WAAW,MAAM;AACrC,UAAM,MAAM,YAAY,EAAE,KAAK,QAAQ,GAAG;AAAA,EAC5C,CAAC;AACH;;;ADrCA,IAAM,kBAAkBC,YAAW,MAAM;AAEzC,IAAM,0BAA0B;AAAA,EAC9B,oBAAoB;AACtB;AAGA,IAAI,yBAAyB;AAC7B,SAAS,sBAAsB,oBAA4B;AACzD,MAAI,uBAAuB,wBAAwB;AACjD,UAAM,UAAUA,YAAW;AAC3B,YAAQ,0BAA0B,EAAE,SAAS;AAAA,MAC3C,UAAU,EAAE,MAAM,mBAA0B;AAAA,IAC9C,CAAC;AACD,6BAAyB;AAAA,EAC3B;AACF;AAEA,SAAS,8BAA8B;AACrC,QAAM,gBAAgB,iBAAiB,SAAS,eAAe;AAE/D,QAAM,qBAAqB,cAAc;AAAA,IACvC,wBAAwB;AAAA,EAC1B;AAEA,wBAAsB,sBAAsB,MAAM;AACpD;AAGA,IAAI,mBAAmB;AAAA,EACrB,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,aAAa;AAAA,EACb,gBAAgB;AAClB;AACA,SAAS,oBAAoB;AAC3B,QAAM,gBAAgB,iBAAiB,SAAS,eAAe;AAC/D,QAAM,eAAe,kBAAkB,aAAa;AACpD,kBAAgB,YAAY;AAC9B;AAEA,SAAS,gBAAgB,cAAmB;AAC1C,MACE,iBAAiB,eAAe,aAAa,cAC7C,iBAAiB,kBAAkB,aAAa,iBAChD,iBAAiB,gBAAgB,aAAa,eAC9C,iBAAiB,mBAAmB,aAAa,gBACjD;AACA,UAAM,UAAUA,YAAW;AAC3B,QAAI,CAAC,QAAS;AACd,YAAQ,0BAA0B,EAAE,SAAS;AAAA,MAC3C;AAAA,IACF,CAAC;AACD,qBAAiB,aAAa,aAAa;AAC3C,qBAAiB,gBAAgB,aAAa;AAC9C,qBAAiB,cAAc,aAAa;AAC5C,qBAAiB,iBAAiB,aAAa;AAAA,EACjD;AACF;AAEA,SAAS,WAAW,SAAiB;AACnC,QAAM,UAAUA,YAAW;AAC3B,MAAI,CAAC,QAAS;AACd,UAAQ,0BAA0B,EAAE,WAAW,OAAO;AACxD;AAEA,SAAS,eAAe;AACtB,QAAM,gBAAgB,iBAAiB,SAAS,eAAe;AAC/D,QAAM,UAAU,WAAW,cAAc,iBAAiB,SAAS,CAAC;AACpE,aAAW,OAAO;AACpB;AAEA,eAAe,eAAe,SAAkB;AAC9C,QAAM,UAAUA,YAAW;AAC3B,MAAI,CAAC,QAAS;AACd,QAAM,KAAK,QAAQ,0BAA0B;AAC7C,QAAM,MAAM,MAAM,GAAG,UAAU;AAC/B,OAAK,WAAW,OAAO;AACzB;AAEA,SAAS,mBAAmB;AAC1B,QAAM,gBAAgB,iBAAiB,SAAS,eAAe;AAC/D,QAAM,aAAa,cAAc,iBAAiB,YAAY,MAAM;AACpE,QAAM,cAAc,WAAW,cAAc,iBAAiB,OAAO,CAAC,IAAI;AAC1E,iBAAe,cAAc,WAAW;AAC1C;AAEA,SAAS,6BAA6B;AACpC,QAAM,mBAAmB,SAAS,gBAAgB;AAClD,QAAM,aAAa,IAAI,MAAM,kBAAkB;AAAA,IAC7C,KAAK,SAAU,QAAQ,KAAK,OAAO;AACjC,YAAM,MAAM,QAAQ,IAAI,QAAQ,KAAK,KAAK;AAE1C,UAAI,QAAQ,wBAAwB,oBAAoB;AACtD,8BAAsB,KAAK;AAAA,MAC7B;AAEA,UACE,QAAQ,mBACR,QAAQ,kBACR,QAAQ,4BACR,QAAQ,yBACR,QAAQ,6BACR,QAAQ,0BACR,QAAQ,+BACR,QAAQ,4BACR,QAAQ,gCACR,QAAQ,2BACR;AACA,0BAAkB;AAAA,MACpB;AAEA,UAAI,QAAQ,WAAW;AACrB,qBAAa;AAAA,MACf;AAEA,UAAI,QAAQ,gBAAgB,QAAQ,WAAW;AAC7C,yBAAiB;AAAA,MACnB;AAEA,aAAO;AAAA,IACT;AAAA,IACA,KAAK,SAAU,QAAQ,MAAc;AACnC,UAAI,OAAO,OAAO,IAAiC,MAAM,YAAY;AACnE,eAAO,YAAwB,MAAa;AAC1C,cAAI,SAAS,eAAe;AAC1B,kBAAM,CAAC,UAAU,KAAK,IAAI;AAC1B,gBAAI,aAAa,wBAAwB,oBAAoB;AAC3D,oCAAsB,KAAK;AAAA,YAC7B;AAAA,UACF,WAAW,SAAS,kBAAkB;AACpC,kBAAM,CAAC,QAAQ,IAAI;AACnB,gBAAI,aAAa,wBAAwB,oBAAoB;AAC3D,oCAAsB,MAAM;AAAA,YAC9B;AAAA,UACF;AACA,iBAAQ,OAAO,IAAiC;AAAA,YAC9C,GAAG;AAAA,UACL;AAAA,QACF;AAAA,MACF;AACA,aAAO,QAAQ,IAAI,QAAQ,IAAI;AAAA,IACjC;AAAA,EACF,CAAC;AACD,SAAO,eAAe,SAAS,iBAAiB,SAAS;AAAA,IACvD,KAAK,WAAY;AACf,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AACH;AAEA,SAAS,6BAA6B;AACpC,QAAM,eAAe,IAAI,iBAAiB,SAAU,eAAe;AACjE,uBAAmB;AAAA,EACrB,CAAC;AAED,eAAa,QAAQ,SAAS,MAAM,EAAE,WAAW,MAAM,SAAS,KAAK,CAAC;AACxE;AAEA,SAAS,qBAAqB;AAC5B,8BAA4B;AAC5B,oBAAkB;AAClB,eAAa;AACb,mBAAiB;AACjB,SAAO,iBAAiB,UAAU,gBAAgB;AACpD;AAEA,SAAS,yBAAyB;AAChC,QAAM,QAAQ,OAAO,iBAAiB,KAAK,MAAM;AACjD,SAAO,mBAAmB,CAAC,SAAS,cAAc;AAChD,QAAK,QAAgB,gBAAgB;AACnC,aAAQ,QAAgB,mBAAmB,OAAO,SAAS;AAAA,IAC7D;AACA,WAAO,MAAM,SAAS,SAAS;AAAA,EACjC;AACF;AAEA,SAAS,mBAAmB;AAC1B,EAAAC,OAAM,YAAY,EAAE,KAAK;AAC3B;AAEA,SAAS,6BAA6B;AACpC,QAAM,WAAW,IAAI,iBAAiB,eAAa;AACjD,cAAU,QAAQ,cAAY;AAC5B,UAAI,SAAS,SAAS,gBAAgB,SAAS,eAAe;AAC5D,2BAAmB;AAAA,MACrB;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,WAAS,QAAQ,SAAS,iBAAiB;AAAA,IACzC,YAAY;AAAA,IACZ,iBAAiB,CAAC,SAAS,OAAO;AAAA,EACpC,CAAC;AACH;AAEO,SAAS,kBAAkB;AAChC,MAAI,CAAC,iBAAiB;AACpB;AAAA,EACF;AAEA,kBAAgB;AAChB,mBAAiB;AACjB,qBAAmB;AACnB,yBAAuB;AACvB,6BAA2B;AAC3B,6BAA2B;AAC3B,6BAA2B;AAC7B;;;AEhNA,SAAS,gBAAgB;;;ACJzB,SAAS,UAAU,eAA0B;AAC7C,OAAO,qBAAqB;AAE5B,SAAS,gBAAgB,0BAA0B;AACnD,IAAM,gBAAgB;AACtB,IAAM,YAAY;AAClB,IAAM,YAAY;AAClB,IAAM,gBAAgB;AAEf,SAAS,8BACd,MACA,OACA;AACA,QAAM,cAAc;AACpB,MAAI,iBAAiB,aAAa;AAChC,WAAO,YAAY,aAAa;AAChC,WAAO,eAAe,IAAI;AAAA,EAC5B;AAEA,MAAI,iBAAiB,aAAa;AAChC,WAAO,YAAY,aAAa;AAChC,WAAO,mBAAmB,IAAI;AAAA,EAChC;AAEA,MAAI,eAAe,YAAY,SAAS,aAAa,YAAY,OAAO;AACtE,WAAO,YAAY,MAAM,SAAS;AAClC,WAAO,eAAe,IAAI;AAAA,EAC5B;AAEA,MAAI,eAAe,YAAY,WAAW;AACxC,UAAM,qBAAqB,YAAY,UAAU,MAAM,GAAG;AAC1D,UAAM,MAAM,mBAAmB,QAAQ,SAAS;AAChD,QAAI,QAAQ,IAAI;AACd,yBAAmB,OAAO,KAAK,CAAC;AAChC,kBAAY,YAAY,mBAAmB,KAAK,GAAG;AACnD,aAAO,eAAe,IAAI;AAAA,IAC5B;AAAA,EACF;AAEA,SAAO;AACT;AAOO,SAAS,IAAI,MAAyB,OAAgB,KAAiB;AAC5E,SAAO,8BAA8B,MAAM,KAAK;AAChD,SAAO,gBAAgB,IAAI,MAAM,OAAO,GAAG;AAC7C;AAEO,SAAS,OACd,MACA,OACA,KACA,UACA,QACA,MACA;AACA,SAAO,8BAA8B,MAAM,KAAK;AAChD,SAAO,QAAQ,MAAM,OAAO,KAAK,UAAU,QAAQ,IAAI;AACzD;;;AD5DA,gBAAgB;","names":["getSession","XRApp","getSession","XRApp"]}

package/dist/jsx/jsx-dev-runtime.web.js

@@ -2,7 +2,7 @@
       (function(){
         if(typeof window === 'undefined') return;
         if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
-        window.__webspatialsdk__['react-sdk-version'] = "0.1.16"
+        window.__webspatialsdk__['react-sdk-version'] = "0.1.18"
         window.__webspatialsdk__['XR_ENV'] = "web"
     })()
       

package/dist/jsx/jsx-runtime.js

@@ -2,7 +2,7 @@
       (function(){
         if(typeof window === 'undefined') return;
         if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
-        window.__webspatialsdk__['react-sdk-version'] = "0.1.16"
+        window.__webspatialsdk__['react-sdk-version'] = "0.1.18"
         window.__webspatialsdk__['XR_ENV'] = "avp"
     })()
       
@@ -184,6 +184,19 @@ function hijackGetComputedStyle() {
 function hijackWindowOpen() {
   XRApp2.getInstance().init();
 }
+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"]
+  });
+}
 function spatialPolyfill() {
   if (!isWebSpatialEnv) {
     return;
@@ -194,6 +207,7 @@ function spatialPolyfill() {
   hijackGetComputedStyle();
   hijackDocumentElementStyle();
   monitorExternalStyleChange();
+  monitorHTMLAttributeChange();
 }
 
 // src/jsx/jsx-runtime.ts

package/dist/jsx/jsx-runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/polyfill/spatialPolyfill.ts","../../src/polyfill/injectSceneHook.ts","../../src/jsx/jsx-runtime.ts","../../src/jsx/jsx-shared.ts"],"sourcesContent":["//@ts-ignore\nimport { parseCornerRadius, getSession, XRApp } from '@webspatial/react-sdk'\nimport { injectSceneHook } from './injectSceneHook'\n\nconst isWebSpatialEnv = getSession() !== null\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    const session = getSession()!\n    session.getCurrentWindowComponent().setStyle({\n      material: { type: backgroundMaterial as any },\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}\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    const session = getSession()!\n    if (!session) return\n    session.getCurrentWindowComponent().setStyle({\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  const session = getSession()!\n  if (!session) return\n  session.getCurrentWindowComponent().setOpacity(opacity)\n}\n\nfunction checkOpacity() {\n  const computedStyle = getComputedStyle(document.documentElement)\n  const opacity = parseFloat(computedStyle.getPropertyValue('opacity'))\n  setOpacity(opacity)\n}\n\nasync function setHtmlVisible(visible: boolean) {\n  const session = getSession()!\n  if (!session) return\n  const wc = session.getCurrentWindowComponent()\n  const ent = await wc.getEntity()\n  ent?.setVisible(visible)\n}\n\nfunction checkHtmlVisible() {\n  const computedStyle = getComputedStyle(document.documentElement)\n  const visibility = computedStyle.getPropertyValue('visibility') !== 'hidden'\n  const widthGtZero = parseFloat(computedStyle.getPropertyValue('width')) > 0\n  setHtmlVisible(visibility && widthGtZero)\n}\n\nfunction hijackDocumentElementStyle() {\n  const rawDocumentStyle = document.documentElement.style\n  const styleProxy = new Proxy(rawDocumentStyle, {\n    set: function (target, key, value) {\n      const ret = Reflect.set(target, key, value)\n\n      if (key === SpatialGlobalCustomVars.backgroundMaterial) {\n        setCurrentWindowStyle(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      if (key === 'visibility' || key === 'display') {\n        checkHtmlVisible()\n      }\n\n      return ret\n    },\n    get: function (target, prop: string) {\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(function (mutationsList) {\n    checkCSSProperties()\n  })\n\n  headObserver.observe(document.head, { childList: true, subtree: true })\n}\n\nfunction checkCSSProperties() {\n  checkHtmlBackgroundMaterial()\n  checkCornerRadius()\n  checkOpacity()\n  checkHtmlVisible()\n  window.addEventListener('resize', checkHtmlVisible)\n}\n\nfunction hijackGetComputedStyle() {\n  const rawFn = window.getComputedStyle.bind(window)\n  window.getComputedStyle = (element, pseudoElt) => {\n    if ((element as any).__isSpatialDiv) {\n      return (element as any).__getComputedStyle(rawFn, pseudoElt)\n    }\n    return rawFn(element, pseudoElt)\n  }\n}\n\nfunction hijackWindowOpen() {\n  XRApp.getInstance().init()\n}\n\nexport function spatialPolyfill() {\n  if (!isWebSpatialEnv) {\n    return\n  }\n\n  injectSceneHook()\n  hijackWindowOpen()\n  checkCSSProperties()\n  hijackGetComputedStyle()\n  hijackDocumentElementStyle()\n  monitorExternalStyleChange()\n}\n","//@ts-ignore\nimport { getSession } from '@webspatial/react-sdk'\n//@ts-ignore\nimport { defaultSceneConfig, XRApp } from '@webspatial/react-sdk'\n\nexport async function injectSceneHook() {\n  if (!window.opener) return\n  if ((window as any)._SceneHookOff) return\n\n  await getSession()?.setLoading('show')\n  // see this flag, we have done create the root scene\n\n  function onContentLoaded(callback: any) {\n    if (\n      document.readyState === 'interactive' ||\n      document.readyState === 'complete'\n    ) {\n      callback()\n    } else {\n      document.addEventListener('DOMContentLoaded', callback)\n    }\n  }\n\n  onContentLoaded(async () => {\n    let cfg = defaultSceneConfig\n    if (typeof (window as any).xrCurrentSceneDefaults === 'function') {\n      try {\n        cfg = await (window as any).xrCurrentSceneDefaults?.()\n      } catch (error) {\n        console.error(error)\n      }\n    }\n    // fixme: this duration is too short so that hide and show is at racing, so add a little delay to avoid\n    await new Promise((resolve, reject) => {\n      setTimeout(() => {\n        resolve(null)\n      }, 1000)\n    })\n    await getSession()?.setLoading('hide')\n    await XRApp.getInstance().show(window, cfg)\n  })\n}\n","import { spatialPolyfill } from '../polyfill'\n\nspatialPolyfill()\n\nexport { Fragment } from 'react/jsx-runtime'\nexport { jsx, jsxs } from './jsx-shared'\n\nexport type { WebSpatialJSX as JSX } from './jsx-namespace'\nexport * from './xr-css-extension'\n","import { jsxDEV as _jsxDEV, JSXSource } from 'react/jsx-dev-runtime'\nimport reactJSXRuntime from 'react/jsx-runtime'\n//@ts-ignore bypass ts check for external\nimport { withCSSSpatial, withSpatialMonitor } from '@webspatial/react-sdk'\nconst attributeFlag = 'enable-xr'\nconst styleFlag = 'enableXr'\nconst classFlag = '__enableXr__'\nconst xrMonitorFlag = 'enable-xr-monitor'\n\nexport function replaceToSpatialPrimitiveType(\n  type: React.ElementType,\n  props: unknown,\n) {\n  const propsObject = props as Record<string, any>\n  if (attributeFlag in propsObject) {\n    delete propsObject[attributeFlag]\n    return withCSSSpatial(type)\n  }\n\n  if (xrMonitorFlag in propsObject) {\n    delete propsObject[xrMonitorFlag]\n    return withSpatialMonitor(type)\n  }\n\n  if (propsObject && propsObject.style && styleFlag in propsObject.style) {\n    delete propsObject.style[styleFlag]\n    return withCSSSpatial(type)\n  }\n\n  if (propsObject && propsObject.className) {\n    const originalClassNames = propsObject.className.split(' ')\n    const idx = originalClassNames.indexOf(classFlag)\n    if (idx !== -1) {\n      originalClassNames.splice(idx, 1)\n      propsObject.className = originalClassNames.join(' ')\n      return withCSSSpatial(type)\n    }\n  }\n\n  return type\n}\n\nexport function jsxs(type: React.ElementType, props: unknown, key?: React.Key) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return reactJSXRuntime.jsxs(type, props, key)\n}\n\nexport function jsx(type: React.ElementType, props: unknown, key?: React.Key) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return reactJSXRuntime.jsx(type, props, key)\n}\n\nexport function jsxDEV(\n  type: React.ElementType,\n  props: unknown,\n  key: React.Key,\n  isStatic: boolean,\n  source?: JSXSource,\n  self?: unknown,\n) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return _jsxDEV(type, props, key, isStatic, source, self)\n}\n"],"mappings":"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","names":["getSession","XRApp","getSession","XRApp"]}
+{"version":3,"sources":["../../src/polyfill/spatialPolyfill.ts","../../src/polyfill/injectSceneHook.ts","../../src/jsx/jsx-runtime.ts","../../src/jsx/jsx-shared.ts"],"sourcesContent":["//@ts-ignore\nimport { parseCornerRadius, getSession, XRApp } from '@webspatial/react-sdk'\nimport { injectSceneHook } from './injectSceneHook'\n\nconst isWebSpatialEnv = getSession() !== null\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    const session = getSession()!\n    session.getCurrentWindowComponent().setStyle({\n      material: { type: backgroundMaterial as any },\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}\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    const session = getSession()!\n    if (!session) return\n    session.getCurrentWindowComponent().setStyle({\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  const session = getSession()!\n  if (!session) return\n  session.getCurrentWindowComponent().setOpacity(opacity)\n}\n\nfunction checkOpacity() {\n  const computedStyle = getComputedStyle(document.documentElement)\n  const opacity = parseFloat(computedStyle.getPropertyValue('opacity'))\n  setOpacity(opacity)\n}\n\nasync function setHtmlVisible(visible: boolean) {\n  const session = getSession()!\n  if (!session) return\n  const wc = session.getCurrentWindowComponent()\n  const ent = await wc.getEntity()\n  ent?.setVisible(visible)\n}\n\nfunction checkHtmlVisible() {\n  const computedStyle = getComputedStyle(document.documentElement)\n  const visibility = computedStyle.getPropertyValue('visibility') !== 'hidden'\n  const widthGtZero = parseFloat(computedStyle.getPropertyValue('width')) > 0\n  setHtmlVisible(visibility && widthGtZero)\n}\n\nfunction hijackDocumentElementStyle() {\n  const rawDocumentStyle = document.documentElement.style\n  const styleProxy = new Proxy(rawDocumentStyle, {\n    set: function (target, key, value) {\n      const ret = Reflect.set(target, key, value)\n\n      if (key === SpatialGlobalCustomVars.backgroundMaterial) {\n        setCurrentWindowStyle(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      if (key === 'visibility' || key === 'display') {\n        checkHtmlVisible()\n      }\n\n      return ret\n    },\n    get: function (target, prop: string) {\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(function (mutationsList) {\n    checkCSSProperties()\n  })\n\n  headObserver.observe(document.head, { childList: true, subtree: true })\n}\n\nfunction checkCSSProperties() {\n  checkHtmlBackgroundMaterial()\n  checkCornerRadius()\n  checkOpacity()\n  checkHtmlVisible()\n  window.addEventListener('resize', checkHtmlVisible)\n}\n\nfunction hijackGetComputedStyle() {\n  const rawFn = window.getComputedStyle.bind(window)\n  window.getComputedStyle = (element, pseudoElt) => {\n    if ((element as any).__isSpatialDiv) {\n      return (element as any).__getComputedStyle(rawFn, pseudoElt)\n    }\n    return rawFn(element, pseudoElt)\n  }\n}\n\nfunction hijackWindowOpen() {\n  XRApp.getInstance().init()\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 function spatialPolyfill() {\n  if (!isWebSpatialEnv) {\n    return\n  }\n\n  injectSceneHook()\n  hijackWindowOpen()\n  checkCSSProperties()\n  hijackGetComputedStyle()\n  hijackDocumentElementStyle()\n  monitorExternalStyleChange()\n  monitorHTMLAttributeChange()\n}\n","//@ts-ignore\nimport { getSession } from '@webspatial/react-sdk'\n//@ts-ignore\nimport { defaultSceneConfig, XRApp } from '@webspatial/react-sdk'\n\nexport async function injectSceneHook() {\n  if (!window.opener) return\n  if ((window as any)._SceneHookOff) return\n\n  await getSession()?.setLoading('show')\n  // see this flag, we have done create the root scene\n\n  function onContentLoaded(callback: any) {\n    if (\n      document.readyState === 'interactive' ||\n      document.readyState === 'complete'\n    ) {\n      callback()\n    } else {\n      document.addEventListener('DOMContentLoaded', callback)\n    }\n  }\n\n  onContentLoaded(async () => {\n    let cfg = defaultSceneConfig\n    if (typeof (window as any).xrCurrentSceneDefaults === 'function') {\n      try {\n        cfg = await (window as any).xrCurrentSceneDefaults?.()\n      } catch (error) {\n        console.error(error)\n      }\n    }\n    // fixme: this duration is too short so that hide and show is at racing, so add a little delay to avoid\n    await new Promise((resolve, reject) => {\n      setTimeout(() => {\n        resolve(null)\n      }, 1000)\n    })\n    await getSession()?.setLoading('hide')\n    await XRApp.getInstance().show(window, cfg)\n  })\n}\n","import { spatialPolyfill } from '../polyfill'\n\nspatialPolyfill()\n\nexport { Fragment } from 'react/jsx-runtime'\nexport { jsx, jsxs } from './jsx-shared'\n\nexport type { WebSpatialJSX as JSX } from './jsx-namespace'\nexport * from './xr-css-extension'\n","import { jsxDEV as _jsxDEV, JSXSource } from 'react/jsx-dev-runtime'\nimport reactJSXRuntime from 'react/jsx-runtime'\n//@ts-ignore bypass ts check for external\nimport { withCSSSpatial, withSpatialMonitor } from '@webspatial/react-sdk'\nconst attributeFlag = 'enable-xr'\nconst styleFlag = 'enableXr'\nconst classFlag = '__enableXr__'\nconst xrMonitorFlag = 'enable-xr-monitor'\n\nexport function replaceToSpatialPrimitiveType(\n  type: React.ElementType,\n  props: unknown,\n) {\n  const propsObject = props as Record<string, any>\n  if (attributeFlag in propsObject) {\n    delete propsObject[attributeFlag]\n    return withCSSSpatial(type)\n  }\n\n  if (xrMonitorFlag in propsObject) {\n    delete propsObject[xrMonitorFlag]\n    return withSpatialMonitor(type)\n  }\n\n  if (propsObject && propsObject.style && styleFlag in propsObject.style) {\n    delete propsObject.style[styleFlag]\n    return withCSSSpatial(type)\n  }\n\n  if (propsObject && propsObject.className) {\n    const originalClassNames = propsObject.className.split(' ')\n    const idx = originalClassNames.indexOf(classFlag)\n    if (idx !== -1) {\n      originalClassNames.splice(idx, 1)\n      propsObject.className = originalClassNames.join(' ')\n      return withCSSSpatial(type)\n    }\n  }\n\n  return type\n}\n\nexport function jsxs(type: React.ElementType, props: unknown, key?: React.Key) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return reactJSXRuntime.jsxs(type, props, key)\n}\n\nexport function jsx(type: React.ElementType, props: unknown, key?: React.Key) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return reactJSXRuntime.jsx(type, props, key)\n}\n\nexport function jsxDEV(\n  type: React.ElementType,\n  props: unknown,\n  key: React.Key,\n  isStatic: boolean,\n  source?: JSXSource,\n  self?: unknown,\n) {\n  type = replaceToSpatialPrimitiveType(type, props)\n  return _jsxDEV(type, props, key, isStatic, source, self)\n}\n"],"mappings":"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","names":["getSession","XRApp","getSession","XRApp"]}

package/dist/jsx/jsx-runtime.web.js

@@ -2,7 +2,7 @@
       (function(){
         if(typeof window === 'undefined') return;
         if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
-        window.__webspatialsdk__['react-sdk-version'] = "0.1.16"
+        window.__webspatialsdk__['react-sdk-version'] = "0.1.18"
         window.__webspatialsdk__['XR_ENV'] = "web"
     })()
       

package/dist/web/index.d.ts

@@ -3,6 +3,7 @@ import React__default, { ReactNode, CSSProperties, ElementType, ForwardedRef } f
 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/';
+export { WindowContainerOptions } from '@webspatial/core-sdk/';
 
 type vecType = {
     x: number;

package/dist/web/index.js

@@ -2,7 +2,7 @@
       (function(){
         if(typeof window === 'undefined') return;
         if(!window.__webspatialsdk__) window.__webspatialsdk__ = {}
-        window.__webspatialsdk__['react-sdk-version'] = "0.1.16"
+        window.__webspatialsdk__['react-sdk-version'] = "0.1.18"
         window.__webspatialsdk__['XR_ENV'] = "web"
     })()
       
@@ -1580,15 +1580,18 @@ function parseTransform(computedStyle) {
   const idxOfMatrix = transform.indexOf(matrixFlagString);
   if (idxOfMatrix !== -1) {
     const transformDataArray = transform.substring(matrixFlagString.length, transform.length - 1).split(",").map((item) => parseFloat(item));
-    return parse2dMatrix(transformDataArray);
+    return { transformExist: true, matrix: parse2dMatrix(transformDataArray) };
   } else {
     const matrix3dFlagString = "matrix3d(";
     const idxOfMatrix3d = transform.indexOf(matrix3dFlagString);
     if (idxOfMatrix3d !== -1) {
       const transform3dDataArray = transform.substring(matrix3dFlagString.length, transform.length - 1).split(",").map((item) => parseFloat(item));
-      return parse3dMatrix(transform3dDataArray);
+      return {
+        transformExist: true,
+        matrix: parse3dMatrix(transform3dDataArray)
+      };
     } else {
-      return new Matrix4();
+      return { transformExist: false, matrix: new Matrix4() };
     }
   }
 }
@@ -1615,7 +1618,7 @@ function parseXRZIndex(computedStyle) {
 function parseSpatialStyle(node) {
   const computedStyle = getComputedStyle(node);
   const mat4ForBack = parseBack(computedStyle);
-  const mat4ForTransform = parseTransform(computedStyle);
+  const { transformExist, matrix: mat4ForTransform } = parseTransform(computedStyle);
   const resultMatrix = new Matrix4();
   resultMatrix.multiplyMatrices(mat4ForBack, mat4ForTransform);
   const position = new Vector3();
@@ -1640,7 +1643,8 @@ function parseSpatialStyle(node) {
     material: {
       type: backgroundMaterialType || "none"
     },
-    visible
+    visible,
+    transformExist
   };
 }
 function useSpatialStyle() {
@@ -1653,7 +1657,8 @@ function useSpatialStyle() {
     material: {
       type: "none"
     },
-    visible: true
+    visible: true,
+    transformExist: false
   });
   const [ready, setReady] = useState3(false);
   const checkSpatialStyleUpdate = useCallback2(() => {
@@ -2043,7 +2048,7 @@ function renderRootCSSSpatialComponent(inProps, refIn) {
   };
   const spatialDivStyle = {
     ...style,
-    transform: "none"
+    transform: spatialStyle.transformExist ? "translateZ(0)" : "none"
   };
   const El = inProps.component || "div";
   const spatialDivRef = useHijackSpatialDivRef(refIn, ref);
@@ -2117,7 +2122,7 @@ function renderInPortalInstance(cssSpatialRootContextObject, cssSpatialID, inPro
   };
   const spatialDivStyle = {
     ...style,
-    transform: "none"
+    transform: spatialStyle.transformExist ? "translateZ(0)" : "none"
   };
   const El = inProps.component || "div";
   const divRefClassName = className + " " + InjectClassName;
@@ -3281,7 +3286,7 @@ function renderCSSModel3DNotInSpatialDiv(inProps, refIn) {
   const visible = spatialStyle.visible;
   const model3DStyle = {
     ...style,
-    transform: "none"
+    transform: spatialStyle.transformExist ? "translateZ(0)" : "none"
   };
   return /* @__PURE__ */ jsxs4(Fragment3, { children: [
     ready && /* @__PURE__ */ jsx13(
@@ -3359,7 +3364,7 @@ function renderCSSModel3DPortalInstance(spatialId, inProps) {
   };
   const model3DStyle = {
     ...style,
-    transform: "none"
+    transform: spatialStyle.transformExist ? "translateZ(0)" : "none"
   };
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
     ready && /* @__PURE__ */ jsx15(
@@ -3787,6 +3792,19 @@ function hijackGetComputedStyle() {
 function hijackWindowOpen() {
   XRApp.getInstance().init();
 }
+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"]
+  });
+}
 function spatialPolyfill() {
   if (!isWebSpatialEnv) {
     return;
@@ -3797,10 +3815,11 @@ function spatialPolyfill() {
   hijackGetComputedStyle();
   hijackDocumentElementStyle();
   monitorExternalStyleChange();
+  monitorHTMLAttributeChange();
 }
 
 // src/index.ts
-var version = "0.1.16";
+var version = "0.1.18";
 export {
   CSSSpatialDiv,
   CSSSpatialPrimitive,