feat: support separate wasm file as well as inlined wasm file

isaac-mason · May 4, 2024 · 78cf5df · 78cf5df
1 parent c9ae76c
commit 78cf5df
Show file tree

Hide file tree

Showing 29 changed files with 172 additions and 140 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -12,7 +12,7 @@
     "node-cjs-example",
     "node-esm-example",
     "parcel-example",
-    "vite-example"
+    "vite-wasm-example"
   ],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true

diff --git a/.changeset/real-boxes-crash.md b/.changeset/real-boxes-crash.md
@@ -0,0 +1,29 @@
+---
+"@recast-navigation/core": minor
+"recast-navigation": minor
+---
+
+feat: support separate wasm file as well as inlined wasm file
+
+Progresses https://github.com/isaac-mason/recast-navigation-js/issues/164
+
+Now `init` can be optionally passed a default import of one of the `@recast-navigation/wasm` packages.
+
+Note that the other `wasm` flavor currently does not support node.js environments.
+
+```ts
+import { init } from 'recast-navigation';
+
+// import the 'wasm' flavor - has a separate wasm file, not inlined
+import RecastWasm from '@recast-navigation/wasm/wasm';
+
+await init(RecastWasm);
+```
+
+It's still possible to use the inlined wasm flavor by not passing anything to `init` as before.
+
+```ts
+import { init } from 'recast-navigation';
+
+await init();
+```
diff --git a/examples/vite-example/.gitignore → examples/vite-wasm-example/.gitignore b/examples/vite-example/.gitignore → examples/vite-wasm-example/.gitignore
diff --git a/examples/vite-example/.prettierrc.json → examples/vite-wasm-example/.prettierrc.json b/examples/vite-example/.prettierrc.json → examples/vite-wasm-example/.prettierrc.json
diff --git a/examples/vite-example/index.html → examples/vite-wasm-example/index.html b/examples/vite-example/index.html → examples/vite-wasm-example/index.html
diff --git a/examples/vite-example/package.json → examples/vite-wasm-example/package.json b/examples/vite-example/package.json → examples/vite-wasm-example/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "vite-example",
+  "name": "vite-wasm-example",
   "private": true,
   "type": "module",
   "scripts": {

diff --git a/examples/vite-example/src/app.tsx → examples/vite-wasm-example/src/app.tsx b/examples/vite-example/src/app.tsx → examples/vite-wasm-example/src/app.tsx
@@ -6,6 +6,7 @@ import { NavMeshHelper, threeToSoloNavMesh } from 'recast-navigation/three';
 import { suspend } from 'suspend-react';
 import { Color, Group, Mesh, MeshBasicMaterial, Vector2, Vector3 } from 'three';
 import { Line2, LineGeometry, LineMaterial } from 'three-stdlib';
+import RecastWasm from '@recast-navigation/wasm/wasm';
 
 const App = () => {
   const scene = useThree((state) => state.scene);
@@ -109,7 +110,7 @@ const App = () => {
 };
 
 const RecastInit = (props: { children: JSX.Element }) => {
-  suspend(() => init(), []);
+  suspend(() => init(RecastWasm), []);
 
   return props.children;
 };

diff --git a/examples/vite-example/src/index.css → examples/vite-wasm-example/src/index.css b/examples/vite-example/src/index.css → examples/vite-wasm-example/src/index.css
diff --git a/examples/vite-example/src/main.tsx → examples/vite-wasm-example/src/main.tsx b/examples/vite-example/src/main.tsx → examples/vite-wasm-example/src/main.tsx
diff --git a/examples/vite-example/src/vite-env.d.ts → examples/vite-wasm-example/src/vite-env.d.ts b/examples/vite-example/src/vite-env.d.ts → examples/vite-wasm-example/src/vite-env.d.ts
diff --git a/examples/vite-example/tsconfig.json → examples/vite-wasm-example/tsconfig.json b/examples/vite-example/tsconfig.json → examples/vite-wasm-example/tsconfig.json
diff --git a/examples/vite-example/tsconfig.node.json → ...ples/vite-wasm-example/tsconfig.node.json b/examples/vite-example/tsconfig.node.json → ...ples/vite-wasm-example/tsconfig.node.json
diff --git a/examples/vite-example/vite.config.ts → examples/vite-wasm-example/vite.config.ts b/examples/vite-example/vite.config.ts → examples/vite-wasm-example/vite.config.ts
diff --git a/packages/recast-navigation-core/rollup.config.js b/packages/recast-navigation-core/rollup.config.js
@@ -27,6 +27,7 @@ const babelOptions = {
 export default [
   {
     input: `./src/index.ts`,
+    external: ['@recast-navigation/wasm'],
     output: [
       {
         file: `dist/index.mjs`,

diff --git a/packages/recast-navigation-core/src/arrays.ts b/packages/recast-navigation-core/src/arrays.ts
@@ -1,5 +1,4 @@
-import { Raw } from './raw';
-import RawModule from './raw-module';
+import { Raw, RawModule } from './raw';
 
 type TypedArray =
   | typeof Int32Array

diff --git a/packages/recast-navigation-core/src/crowd.ts b/packages/recast-navigation-core/src/crowd.ts
@@ -1,7 +1,6 @@
 import type { NavMesh } from './nav-mesh';
 import { NavMeshQuery, QueryFilter } from './nav-mesh-query';
-import { Raw } from './raw';
-import type R from './raw-module';
+import { Raw, RawModule } from './raw';
 import { Vector3, vec3 } from './utils';
 
 const Epsilon = 0.001;
@@ -93,7 +92,7 @@ export const crowdAgentParamsDefaults: CrowdAgentParams = {
 };
 
 export class CrowdAgent implements CrowdAgentParams {
-  raw: R.dtCrowdAgent;
+  raw: RawModule.dtCrowdAgent;
 
   get radius(): number {
     return this.raw.params.radius;
@@ -387,7 +386,7 @@ export type CrowdParams = {
 };
 
 export class Crowd {
-  raw: R.dtCrowd;
+  raw: RawModule.dtCrowd;
 
   /**
    * The agents in the crowd.

diff --git a/packages/recast-navigation-core/src/detour.ts b/packages/recast-navigation-core/src/detour.ts
@@ -1,6 +1,5 @@
 import { UnsignedCharArray } from './arrays';
-import { Raw } from './raw';
-import type R from './raw-module';
+import { Raw, type RawModule } from './raw';
 import { RecastPolyMesh, RecastPolyMeshDetail } from './recast';
 import { Vector3, Vector3Tuple, array, vec3 } from './utils';
 
@@ -61,9 +60,9 @@ export const statusToReadableString = (status: number): string => {
 };
 
 export class DetourPolyDetail {
-  raw: R.dtPolyDetail;
+  raw: RawModule.dtPolyDetail;
 
-  constructor(raw: R.dtPolyDetail) {
+  constructor(raw: RawModule.dtPolyDetail) {
     this.raw = raw;
   }
 
@@ -85,9 +84,9 @@ export class DetourPolyDetail {
 }
 
 export class DetourLink {
-  raw: R.dtLink;
+  raw: RawModule.dtLink;
 
-  constructor(raw: R.dtLink) {
+  constructor(raw: RawModule.dtLink) {
     this.raw = raw;
   }
 
@@ -117,9 +116,9 @@ export class DetourLink {
 }
 
 export class DetourBVNode {
-  raw: R.dtBVNode;
+  raw: RawModule.dtBVNode;
 
-  constructor(raw: R.dtBVNode) {
+  constructor(raw: RawModule.dtBVNode) {
     this.raw = raw;
   }
 
@@ -137,9 +136,9 @@ export class DetourBVNode {
 }
 
 export class DetourOffMeshConnection {
-  raw: R.dtOffMeshConnection;
+  raw: RawModule.dtOffMeshConnection;
 
-  constructor(raw: R.dtOffMeshConnection) {
+  constructor(raw: RawModule.dtOffMeshConnection) {
     this.raw = raw;
   }
 
@@ -169,9 +168,9 @@ export class DetourOffMeshConnection {
 }
 
 export class DetourMeshHeader {
-  raw: R.dtMeshHeader;
+  raw: RawModule.dtMeshHeader;
 
-  constructor(raw: R.dtMeshHeader) {
+  constructor(raw: RawModule.dtMeshHeader) {
     this.raw = raw;
   }
 
@@ -261,9 +260,9 @@ export class DetourMeshHeader {
 }
 
 export class DetourPoly {
-  raw: R.dtPoly;
+  raw: RawModule.dtPoly;
 
-  constructor(raw: R.dtPoly) {
+  constructor(raw: RawModule.dtPoly) {
     this.raw = raw;
   }
 
@@ -297,9 +296,9 @@ export class DetourPoly {
 }
 
 export class DetourMeshTile {
-  raw: R.dtMeshTile;
+  raw: RawModule.dtMeshTile;
 
-  constructor(raw: R.dtMeshTile) {
+  constructor(raw: RawModule.dtMeshTile) {
     this.raw = raw;
   }
 
@@ -394,7 +393,7 @@ export type OffMeshConnectionParams = {
 };
 
 export class NavMeshCreateParams {
-  raw: R.dtNavMeshCreateParams;
+  raw: RawModule.dtNavMeshCreateParams;
 
   /**
    * Creates a new NavMeshCreateParams object.
@@ -404,9 +403,9 @@ export class NavMeshCreateParams {
   /**
    * Creates a wrapper around an existing raw NavMeshCreateParams object.
    */
-  constructor(raw: R.dtNavMeshCreateParams)
+  constructor(raw: RawModule.dtNavMeshCreateParams)
 
-  constructor(raw?: R.dtNavMeshCreateParams) {
+  constructor(raw?: RawModule.dtNavMeshCreateParams) {
     this.raw = raw ?? new Raw.Module.dtNavMeshCreateParams();
   }
 

diff --git a/packages/recast-navigation-core/src/index.ts b/packages/recast-navigation-core/src/index.ts
@@ -1,5 +1,3 @@
-import Wasm from './raw-module';
-
 export * from './arrays';
 export * from './crowd';
 export * from './detour';
@@ -10,4 +8,3 @@ export * from './recast';
 export * from './serdes';
 export * from './tile-cache';
 export * from './utils';
-export { Wasm };
diff --git a/packages/recast-navigation-core/src/nav-mesh-query.ts b/packages/recast-navigation-core/src/nav-mesh-query.ts
@@ -1,11 +1,10 @@
 import { FloatArray, UnsignedCharArray, UnsignedIntArray } from './arrays';
 import { NavMesh } from './nav-mesh';
-import { Raw } from './raw';
-import type R from './raw-module';
+import { Raw, type RawModule } from './raw';
 import { Vector3, array, vec3 } from './utils';
 
 export class QueryFilter {
-  raw: R.dtQueryFilter;
+  raw: RawModule.dtQueryFilter;
 
   get includeFlags(): number {
     return this.raw.getIncludeFlags();
@@ -32,9 +31,9 @@ export class QueryFilter {
    * Constructs a query filter wrapper for a raw dtQueryFilter object.
    * @param raw
    */
-  constructor(raw: R.dtQueryFilter);
+  constructor(raw: RawModule.dtQueryFilter);
 
-  constructor(raw?: R.dtQueryFilter) {
+  constructor(raw?: RawModule.dtQueryFilter) {
     this.raw = raw ?? new Raw.Module.dtQueryFilter();
   }
 
@@ -68,7 +67,7 @@ export type NavMeshQueryParams = {
 };
 
 export class NavMeshQuery {
-  raw: R.NavMeshQuery;
+  raw: RawModule.NavMeshQuery;
 
   /**
    * Default query filter.
@@ -101,9 +100,9 @@ export class NavMeshQuery {
    * Constructs a navigation mesh query object from a raw object.
    * @param raw
    */
-  constructor(raw: R.NavMeshQuery);
+  constructor(raw: RawModule.NavMeshQuery);
 
-  constructor(value: R.NavMeshQuery | NavMesh, params?: NavMeshQueryParams) {
+  constructor(value: RawModule.NavMeshQuery | NavMesh, params?: NavMeshQueryParams) {
     if (value instanceof Raw.Module.NavMeshQuery) {
       this.raw = value;
     } else {

diff --git a/packages/recast-navigation-core/src/nav-mesh.ts b/packages/recast-navigation-core/src/nav-mesh.ts
@@ -5,14 +5,13 @@ import {
   DetourPoly,
   statusSucceed,
 } from './detour';
-import { Raw } from './raw';
-import type R from './raw-module';
+import { Raw, type RawModule } from './raw';
 import { Vector3, array, vec3 } from './utils';
 
 export class NavMeshGetTilesAtResult {
-  raw: R.NavMeshGetTilesAtResult;
+  raw: RawModule.NavMeshGetTilesAtResult;
 
-  constructor(raw: R.NavMeshGetTilesAtResult) {
+  constructor(raw: RawModule.NavMeshGetTilesAtResult) {
     this.raw = raw;
   }
 
@@ -26,9 +25,9 @@ export class NavMeshGetTilesAtResult {
 }
 
 export class NavMeshRemoveTileResult {
-  raw: R.NavMeshRemoveTileResult;
+  raw: RawModule.NavMeshRemoveTileResult;
 
-  constructor(raw: R.NavMeshRemoveTileResult) {
+  constructor(raw: RawModule.NavMeshRemoveTileResult) {
     this.raw = raw;
   }
 
@@ -42,9 +41,9 @@ export class NavMeshRemoveTileResult {
 }
 
 export class NavMeshCalcTileLocResult {
-  raw: R.NavMeshCalcTileLocResult;
+  raw: RawModule.NavMeshCalcTileLocResult;
 
-  constructor(raw: R.NavMeshCalcTileLocResult) {
+  constructor(raw: RawModule.NavMeshCalcTileLocResult) {
     this.raw = raw;
   }
 
@@ -58,9 +57,9 @@ export class NavMeshCalcTileLocResult {
 }
 
 export class NavMeshStoreTileStateResult {
-  raw: R.NavMeshStoreTileStateResult;
+  raw: RawModule.NavMeshStoreTileStateResult;
 
-  constructor(raw: R.NavMeshStoreTileStateResult) {
+  constructor(raw: RawModule.NavMeshStoreTileStateResult) {
     this.raw = raw;
   }
 
@@ -99,7 +98,7 @@ export type NavMeshParamsType = {
 };
 
 export class NavMeshParams {
-  constructor(public raw: R.dtNavMeshParams) {}
+  constructor(public raw: RawModule.dtNavMeshParams) {}
 
   static create(params: NavMeshParamsType): NavMeshParams {
     const raw = new Raw.Module.dtNavMeshParams();
@@ -132,7 +131,7 @@ export class NavMeshParams {
 }
 
 export class NavMesh {
-  raw: R.NavMesh;
+  raw: RawModule.NavMesh;
 
   /**
    * Constructs a new NavMesh
@@ -143,9 +142,9 @@ export class NavMesh {
    * Creates a wrapper around a raw NavMesh object
    * @param raw raw object
    */
-  constructor(raw: R.NavMesh);
+  constructor(raw: RawModule.NavMesh);
 
-  constructor(raw?: R.NavMesh) {
+  constructor(raw?: RawModule.NavMesh) {
     this.raw = raw ?? new Raw.Module.NavMesh();
   }
 

diff --git a/packages/recast-navigation-core/src/raw-module.ts b/packages/recast-navigation-core/src/raw-module.ts
@@ -1,3 +0,0 @@
-import RawModule from '@recast-navigation/wasm';
-
-export default RawModule;

diff --git a/packages/recast-navigation-core/src/raw.ts b/packages/recast-navigation-core/src/raw.ts
@@ -1,6 +1,11 @@
-import RawModule from './raw-module';
+import type {
+  default as Module,
+  default as RawModule,
+} from '@recast-navigation/wasm';
 import type { Pretty } from './types';
 
+export type { RawModule };
+
 type ModuleKey = (keyof typeof RawModule)[][number];
 
 const instances = [
@@ -66,12 +71,17 @@ export const Raw = {
   },
 } satisfies Partial<RawApi> as RawApi;
 
-export const init = async () => {
+export const init = async (impl?: typeof Module) => {
   if (Raw.Module !== undefined) {
     return;
   }
 
-  Raw.Module = await RawModule();
+  if (impl) {
+    Raw.Module = await impl();
+  } else {
+    const defaultExport = (await import('@recast-navigation/wasm')).default;
+    Raw.Module = await defaultExport();
+  }
 
   for (const instance of instances) {
     (Raw as any)[instance] = new Raw.Module[instance]();
Original file line number	Diff line number	Diff line change
		@@ -1,3 +0,0 @@
		import RawModule from '@recast-navigation/wasm';

		export default RawModule;