@vizij/runtime-react 0.0.5 → 0.0.9

package/README.md

@@ -12,6 +12,27 @@ pnpm add @vizij/runtime-react @vizij/render @vizij/orchestrator-react react reac
 
 Those three Vizij packages must stay in lock-step; always upgrade them together.
 
+> **Bundler configuration:** The runtime depends on `@vizij/orchestrator-wasm`, `@vizij/node-graph-wasm`, and `@vizij/animation-wasm`, all of which emit `.wasm` assets. Enable async WebAssembly and treat `.wasm` files as emitted resources in your bundler. For Next.js:
+>
+> ```js
+> // next.config.js
+> module.exports = {
+>   webpack: (config) => {
+>     config.experiments = {
+>       ...(config.experiments ?? {}),
+>       asyncWebAssembly: true,
+>     };
+>     config.module.rules.push({
+>       test: /\.wasm$/,
+>       type: "asset/resource",
+>     });
+>     return config;
+>   },
+> };
+> ```
+
+When overriding the default wasm location, pass string URLs to the underlying `init()` helpers so Webpack doesn’t wrap them in `RelativeURL`.
+
 ## Getting Started
 
 ```tsx

package/dist/index.js

@@ -291,6 +291,122 @@ function convertBundleAnimations(entries) {
     clip: entry.clip
   }));
 }
+function resolveChannelId(track) {
+  if (typeof track.componentId !== "string" || track.componentId.length === 0) {
+    return null;
+  }
+  if (typeof track.component === "string" && track.component.length > 0) {
+    return `${track.componentId}:${track.component}`;
+  }
+  const rawIndex = track.componentIndex != null ? Number(track.componentIndex) : void 0;
+  const valueSize = track.valueSize != null ? Number(track.valueSize) : void 0;
+  if (Number.isInteger(rawIndex) && Number.isFinite(rawIndex) && rawIndex >= 0 && Number.isFinite(valueSize) && valueSize > 1) {
+    return `${track.componentId}:${rawIndex}`;
+  }
+  return track.componentId;
+}
+function convertExtractedAnimations(clips) {
+  if (!Array.isArray(clips) || clips.length === 0) {
+    return [];
+  }
+  const assets = [];
+  clips.forEach((clip) => {
+    const clipTracks = Array.isArray(clip.tracks) ? clip.tracks : [];
+    if (clipTracks.length === 0) {
+      return;
+    }
+    const convertedTracks = [];
+    clipTracks.forEach((track) => {
+      const channelId = resolveChannelId(track);
+      if (!channelId) {
+        return;
+      }
+      const rawTimes = Array.isArray(track.times) ? track.times : [];
+      const rawValues = Array.isArray(track.values) ? track.values : [];
+      if (rawTimes.length === 0 || rawValues.length === 0) {
+        return;
+      }
+      const times = [];
+      for (const entry of rawTimes) {
+        const time = Number(entry);
+        if (!Number.isFinite(time)) {
+          return;
+        }
+        times.push(time);
+      }
+      const values = [];
+      for (const entry of rawValues) {
+        const value = Number(entry);
+        if (!Number.isFinite(value)) {
+          return;
+        }
+        values.push(value);
+      }
+      const parsedValueSize = track.valueSize != null ? Number(track.valueSize) : NaN;
+      const valueSize = Number.isFinite(parsedValueSize) && parsedValueSize > 0 ? parsedValueSize : 1;
+      if (values.length !== times.length * valueSize) {
+        return;
+      }
+      const rawIndex = track.componentIndex != null ? Number(track.componentIndex) : 0;
+      const componentIndex = Number.isInteger(rawIndex) && rawIndex >= 0 ? Math.min(rawIndex, valueSize - 1) : 0;
+      const keyframes = [];
+      times.forEach((time, index) => {
+        const base = index * valueSize + componentIndex;
+        const value = values[base];
+        if (!Number.isFinite(value)) {
+          return;
+        }
+        keyframes.push({ time, value });
+      });
+      if (keyframes.length === 0) {
+        return;
+      }
+      convertedTracks.push({
+        channel: channelId,
+        keyframes
+      });
+    });
+    if (convertedTracks.length === 0) {
+      return;
+    }
+    const durationFromTracks = convertedTracks.reduce((maxTime, track) => {
+      const keyframes = Array.isArray(track.keyframes) ? track.keyframes : [];
+      if (keyframes.length === 0) {
+        return maxTime;
+      }
+      const lastKeyframe = keyframes[keyframes.length - 1];
+      const time = Number(lastKeyframe?.time ?? 0);
+      if (!Number.isFinite(time)) {
+        return maxTime;
+      }
+      return time > maxTime ? time : maxTime;
+    }, 0);
+    const duration = typeof clip.duration === "number" && Number.isFinite(clip.duration) ? clip.duration : durationFromTracks;
+    const clipId = typeof clip.id === "string" && clip.id.length > 0 ? clip.id : typeof clip.name === "string" && clip.name.length > 0 ? clip.name : `gltf-animation-${assets.length}`;
+    const metadata = clip.metadata && typeof clip.metadata === "object" && !Array.isArray(clip.metadata) ? clip.metadata : void 0;
+    assets.push({
+      id: clipId,
+      clip: {
+        id: clipId,
+        name: typeof clip.name === "string" ? clip.name : clipId,
+        duration,
+        tracks: convertedTracks,
+        metadata
+      }
+    });
+  });
+  return assets;
+}
+function pickExtractedAnimations(asset) {
+  if (!asset || typeof asset !== "object") {
+    return void 0;
+  }
+  const animations = asset.animations;
+  if (!Array.isArray(animations)) {
+    return void 0;
+  }
+  return animations;
+}
 function mergeAnimationLists(explicit, fromBundle) {
   if (!explicit?.length && fromBundle.length === 0) {
     return void 0;
@@ -314,7 +430,7 @@ function mergeAnimationLists(explicit, fromBundle) {
   }
   return changed ? merged : explicit;
 }
-function mergeAssetBundle(base, extracted) {
+function mergeAssetBundle(base, extracted, extractedAnimations) {
   const resolvedBundle = base.bundle ?? extracted ?? null;
   const rigFromBundle = convertBundleGraph(
     pickBundleGraph(resolvedBundle, ["rig"])
@@ -354,10 +470,17 @@ function mergeAssetBundle(base, extracted) {
   const animationsFromBundle = convertBundleAnimations(
     resolvedBundle?.animations
   );
-  const resolvedAnimations = mergeAnimationLists(
+  let resolvedAnimations = mergeAnimationLists(
     base.animations,
     animationsFromBundle
   );
+  const animationsFromAsset = extractedAnimations && extractedAnimations.length > 0 ? extractedAnimations : [];
+  if (animationsFromAsset.length > 0) {
+    resolvedAnimations = mergeAnimationLists(
+      resolvedAnimations,
+      animationsFromAsset
+    );
+  }
   const merged = {
     ...base
   };
@@ -430,6 +553,7 @@ function VizijRuntimeProviderInner({
     }
     return null;
   });
+  const [extractedAnimations, setExtractedAnimations] = (0, import_react2.useState)([]);
   (0, import_react2.useEffect)(() => {
     if (initialAssetBundle.bundle) {
       setExtractedBundle(initialAssetBundle.bundle);
@@ -442,8 +566,12 @@ function VizijRuntimeProviderInner({
     }
   }, [initialAssetBundle]);
   const assetBundle = (0, import_react2.useMemo)(
-    () => mergeAssetBundle(initialAssetBundle, extractedBundle),
-    [initialAssetBundle, extractedBundle]
+    () => mergeAssetBundle(
+      initialAssetBundle,
+      extractedBundle,
+      extractedAnimations
+    ),
+    [initialAssetBundle, extractedBundle, extractedAnimations]
   );
   const {
     ready,
@@ -562,11 +690,13 @@ function VizijRuntimeProviderInner({
       outputPaths: [],
       controllers: { graphs: [], anims: [] }
     }));
+    setExtractedAnimations([]);
     const loadAssets = async () => {
       try {
         let world;
         let animatables;
         let bundle = baseBundle;
+        let gltfAnimations;
         if (glbAsset.kind === "url") {
           const loaded = await (0, import_render.loadGLTFWithBundle)(
             glbAsset.src,
@@ -577,6 +707,7 @@ function VizijRuntimeProviderInner({
           world = loaded.world;
           animatables = loaded.animatables;
           bundle = loaded.bundle ?? bundle;
+          gltfAnimations = pickExtractedAnimations(loaded);
         } else if (glbAsset.kind === "blob") {
           const loaded = await (0, import_render.loadGLTFFromBlobWithBundle)(
             glbAsset.blob,
@@ -587,15 +718,18 @@ function VizijRuntimeProviderInner({
           world = loaded.world;
           animatables = loaded.animatables;
           bundle = loaded.bundle ?? bundle;
+          gltfAnimations = pickExtractedAnimations(loaded);
         } else {
           world = glbAsset.world;
           animatables = glbAsset.animatables;
           bundle = glbAsset.bundle ?? bundle;
+          gltfAnimations = void 0;
         }
         if (cancelled) {
           return;
         }
         setExtractedBundle(bundle ?? null);
+        setExtractedAnimations(convertExtractedAnimations(gltfAnimations));
         const rootId = findRootId(world);
         store.getState().addWorldElements(world, animatables, true);
         reportStatus((prev) => ({
@@ -634,7 +768,8 @@ function VizijRuntimeProviderInner({
     pushError,
     reportStatus,
     resetErrors,
-    setExtractedBundle
+    setExtractedBundle,
+    setExtractedAnimations
   ]);
   (0, import_react2.useEffect)(() => {
     if (!ready && autoCreate) {

package/dist/index.mjs

@@ -284,6 +284,122 @@ function convertBundleAnimations(entries) {
     clip: entry.clip
   }));
 }
+function resolveChannelId(track) {
+  if (typeof track.componentId !== "string" || track.componentId.length === 0) {
+    return null;
+  }
+  if (typeof track.component === "string" && track.component.length > 0) {
+    return `${track.componentId}:${track.component}`;
+  }
+  const rawIndex = track.componentIndex != null ? Number(track.componentIndex) : void 0;
+  const valueSize = track.valueSize != null ? Number(track.valueSize) : void 0;
+  if (Number.isInteger(rawIndex) && Number.isFinite(rawIndex) && rawIndex >= 0 && Number.isFinite(valueSize) && valueSize > 1) {
+    return `${track.componentId}:${rawIndex}`;
+  }
+  return track.componentId;
+}
+function convertExtractedAnimations(clips) {
+  if (!Array.isArray(clips) || clips.length === 0) {
+    return [];
+  }
+  const assets = [];
+  clips.forEach((clip) => {
+    const clipTracks = Array.isArray(clip.tracks) ? clip.tracks : [];
+    if (clipTracks.length === 0) {
+      return;
+    }
+    const convertedTracks = [];
+    clipTracks.forEach((track) => {
+      const channelId = resolveChannelId(track);
+      if (!channelId) {
+        return;
+      }
+      const rawTimes = Array.isArray(track.times) ? track.times : [];
+      const rawValues = Array.isArray(track.values) ? track.values : [];
+      if (rawTimes.length === 0 || rawValues.length === 0) {
+        return;
+      }
+      const times = [];
+      for (const entry of rawTimes) {
+        const time = Number(entry);
+        if (!Number.isFinite(time)) {
+          return;
+        }
+        times.push(time);
+      }
+      const values = [];
+      for (const entry of rawValues) {
+        const value = Number(entry);
+        if (!Number.isFinite(value)) {
+          return;
+        }
+        values.push(value);
+      }
+      const parsedValueSize = track.valueSize != null ? Number(track.valueSize) : NaN;
+      const valueSize = Number.isFinite(parsedValueSize) && parsedValueSize > 0 ? parsedValueSize : 1;
+      if (values.length !== times.length * valueSize) {
+        return;
+      }
+      const rawIndex = track.componentIndex != null ? Number(track.componentIndex) : 0;
+      const componentIndex = Number.isInteger(rawIndex) && rawIndex >= 0 ? Math.min(rawIndex, valueSize - 1) : 0;
+      const keyframes = [];
+      times.forEach((time, index) => {
+        const base = index * valueSize + componentIndex;
+        const value = values[base];
+        if (!Number.isFinite(value)) {
+          return;
+        }
+        keyframes.push({ time, value });
+      });
+      if (keyframes.length === 0) {
+        return;
+      }
+      convertedTracks.push({
+        channel: channelId,
+        keyframes
+      });
+    });
+    if (convertedTracks.length === 0) {
+      return;
+    }
+    const durationFromTracks = convertedTracks.reduce((maxTime, track) => {
+      const keyframes = Array.isArray(track.keyframes) ? track.keyframes : [];
+      if (keyframes.length === 0) {
+        return maxTime;
+      }
+      const lastKeyframe = keyframes[keyframes.length - 1];
+      const time = Number(lastKeyframe?.time ?? 0);
+      if (!Number.isFinite(time)) {
+        return maxTime;
+      }
+      return time > maxTime ? time : maxTime;
+    }, 0);
+    const duration = typeof clip.duration === "number" && Number.isFinite(clip.duration) ? clip.duration : durationFromTracks;
+    const clipId = typeof clip.id === "string" && clip.id.length > 0 ? clip.id : typeof clip.name === "string" && clip.name.length > 0 ? clip.name : `gltf-animation-${assets.length}`;
+    const metadata = clip.metadata && typeof clip.metadata === "object" && !Array.isArray(clip.metadata) ? clip.metadata : void 0;
+    assets.push({
+      id: clipId,
+      clip: {
+        id: clipId,
+        name: typeof clip.name === "string" ? clip.name : clipId,
+        duration,
+        tracks: convertedTracks,
+        metadata
+      }
+    });
+  });
+  return assets;
+}
+function pickExtractedAnimations(asset) {
+  if (!asset || typeof asset !== "object") {
+    return void 0;
+  }
+  const animations = asset.animations;
+  if (!Array.isArray(animations)) {
+    return void 0;
+  }
+  return animations;
+}
 function mergeAnimationLists(explicit, fromBundle) {
   if (!explicit?.length && fromBundle.length === 0) {
     return void 0;
@@ -307,7 +423,7 @@ function mergeAnimationLists(explicit, fromBundle) {
   }
   return changed ? merged : explicit;
 }
-function mergeAssetBundle(base, extracted) {
+function mergeAssetBundle(base, extracted, extractedAnimations) {
   const resolvedBundle = base.bundle ?? extracted ?? null;
   const rigFromBundle = convertBundleGraph(
     pickBundleGraph(resolvedBundle, ["rig"])
@@ -347,10 +463,17 @@ function mergeAssetBundle(base, extracted) {
   const animationsFromBundle = convertBundleAnimations(
     resolvedBundle?.animations
   );
-  const resolvedAnimations = mergeAnimationLists(
+  let resolvedAnimations = mergeAnimationLists(
     base.animations,
     animationsFromBundle
   );
+  const animationsFromAsset = extractedAnimations && extractedAnimations.length > 0 ? extractedAnimations : [];
+  if (animationsFromAsset.length > 0) {
+    resolvedAnimations = mergeAnimationLists(
+      resolvedAnimations,
+      animationsFromAsset
+    );
+  }
   const merged = {
     ...base
   };
@@ -423,6 +546,7 @@ function VizijRuntimeProviderInner({
     }
     return null;
   });
+  const [extractedAnimations, setExtractedAnimations] = useState([]);
   useEffect(() => {
     if (initialAssetBundle.bundle) {
       setExtractedBundle(initialAssetBundle.bundle);
@@ -435,8 +559,12 @@ function VizijRuntimeProviderInner({
     }
   }, [initialAssetBundle]);
   const assetBundle = useMemo(
-    () => mergeAssetBundle(initialAssetBundle, extractedBundle),
-    [initialAssetBundle, extractedBundle]
+    () => mergeAssetBundle(
+      initialAssetBundle,
+      extractedBundle,
+      extractedAnimations
+    ),
+    [initialAssetBundle, extractedBundle, extractedAnimations]
   );
   const {
     ready,
@@ -555,11 +683,13 @@ function VizijRuntimeProviderInner({
       outputPaths: [],
       controllers: { graphs: [], anims: [] }
     }));
+    setExtractedAnimations([]);
     const loadAssets = async () => {
       try {
         let world;
         let animatables;
         let bundle = baseBundle;
+        let gltfAnimations;
         if (glbAsset.kind === "url") {
           const loaded = await loadGLTFWithBundle(
             glbAsset.src,
@@ -570,6 +700,7 @@ function VizijRuntimeProviderInner({
           world = loaded.world;
           animatables = loaded.animatables;
           bundle = loaded.bundle ?? bundle;
+          gltfAnimations = pickExtractedAnimations(loaded);
         } else if (glbAsset.kind === "blob") {
           const loaded = await loadGLTFFromBlobWithBundle(
             glbAsset.blob,
@@ -580,15 +711,18 @@ function VizijRuntimeProviderInner({
           world = loaded.world;
           animatables = loaded.animatables;
           bundle = loaded.bundle ?? bundle;
+          gltfAnimations = pickExtractedAnimations(loaded);
         } else {
           world = glbAsset.world;
           animatables = glbAsset.animatables;
           bundle = glbAsset.bundle ?? bundle;
+          gltfAnimations = void 0;
         }
         if (cancelled) {
           return;
         }
         setExtractedBundle(bundle ?? null);
+        setExtractedAnimations(convertExtractedAnimations(gltfAnimations));
         const rootId = findRootId(world);
         store.getState().addWorldElements(world, animatables, true);
         reportStatus((prev) => ({
@@ -627,7 +761,8 @@ function VizijRuntimeProviderInner({
     pushError,
     reportStatus,
     resetErrors,
-    setExtractedBundle
+    setExtractedBundle,
+    setExtractedAnimations
   ]);
   useEffect(() => {
     if (!ready && autoCreate) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vizij/runtime-react",
   "description": "Runtime provider that bridges Vizij renderer assets with orchestrator controllers for React apps.",
-  "version": "0.0.5",
+  "version": "0.0.9",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -25,9 +25,9 @@
   ],
   "dependencies": {
     "@vizij/value-json": "^0.1.0",
-    "@vizij/utils": "^0.0.2",
     "@vizij/orchestrator-react": "^0.0.2",
-    "@vizij/render": "^0.0.4"
+    "@vizij/render": "^0.0.4",
+    "@vizij/utils": "^0.0.2"
   },
   "peerDependencies": {
     "react": ">=18",