🔮 use 8thwall standalone sdk

ref: https://www.8thwall.com/docs/migration/self-hosted/

Author: Platane

.github/workflows/main.yml

@@ -17,6 +17,7 @@ jobs:
       - run: bun type
       - run: bun lint
       - run: bun test
+      - run: bun run download-8th-sdk
       - run: bunx vite build --base yAR-htzee
         env:
           VITE_XR8_API_KEY: ${{ secrets.VITE_XR8_API_KEY }}

.gitignore

@@ -3,3 +3,4 @@ dist
 .env.local
 .dev.vars
 .wrangler
+public/8thwall-sdk

bun.lockb

@@ -19,7 +19,6 @@
   "devDependencies": {
     "@cloudflare/workers-types": "4.20250415.0",
     "@types/bun": "1.2.9",
-    "@types/loadable__component": "5.13.9",
     "@types/react": "19.1.2",
     "@types/react-dom": "19.1.2",
     "@types/three": "0.175.0",
@@ -30,6 +29,7 @@
     "wrangler": "4.11.0"
   },
   "scripts": {
+    "download-8th-sdk": "( mkdir -p public/8thwall-sdk ; cd public/8thwall-sdk ; wget https://github.com/8thwall/engine/raw/refs/heads/main/xr-standalone.zip?download= && unzip xr-standalone.zip?download= && rm xr-standalone.zip?download=)",
     "type": "tsc --noEmit",
     "lint": "prettier -c '**/*.{ts,tsx,js,jsx,json,md,html}' '!**/{build,web_modules}/**'",
     "dev": "vite",

package.json

@@ -20,8 +20,6 @@ import { LoadingScreen } from "./Ui/LoadingScreen";
 // @ts-ignore
 import { Visualizer } from "react-touch-visualizer";
 
-// @ts-ignore
-const xr8ApiKey: string | undefined = import.meta.env.VITE_XR8_API_KEY;
 const touchSupported =
   typeof document !== "undefined" && "ontouchend" in document;
 
@@ -76,7 +74,7 @@ export const App = () => {
 
   const startXR8 = () => {
     setState({ type: "xr8" });
-    loadXR8(xr8ApiKey)
+    loadXR8()
       .then((xr8) => setState({ type: "xr8", xr8 }))
       .catch(setError);
   };
@@ -85,7 +83,7 @@ export const App = () => {
 
   const webXRSupported = useIsWebXRSupported();
 
-  const xr8Supported = (!!xr8ApiKey || xr8Hosted) && touchSupported;
+  const xr8Supported = (xr8Hosted || true) && touchSupported;
 
   const sceneAssetLoaded = useProgress(({ active }) => !active);
 

src/App/App.tsx

@@ -1,4 +1,6 @@
 export type XR8 = {
+  loadChunk: (feature: "slam") => Promise<void>;
+
   run: (o: any) => void;
   stop: () => void;
   pause: () => void;

src/XR8Canvas/XR8.d.ts

@@ -15,21 +15,23 @@ export const xr8Hosted =
  * load 8th wall sdk once
  * resolve with XR8 when it's ready
  */
-export const loadXR8 = async (apiKey?: string) => {
+export const loadXR8 = async () => {
   // in 8thwall demo page, the script is loaded automatically
   if (!xr8Hosted) {
-    const src = `//apps.8thwall.com/xrweb?appKey=${apiKey}`;
-    await loadScript(src);
+    const xrUrl = "./8thwall-sdk/xr.js";
+    await loadScript(xrUrl);
   }
 
-  const xr8 = getXR8();
-  if (xr8) return xr8;
-  else {
+  let xr8 = getXR8();
+  if (!xr8) {
     await new Promise((resolve: any) =>
       window.addEventListener("xrloaded", resolve)
     );
-    return getXR8()!;
+    xr8 = getXR8()!;
   }
+  await xr8.loadChunk("slam");
+
+  return xr8;
 };
 
 export const loadScript = (src: string) =>