fix: parcel and react-scripts support, add examples

isaac-mason · Sep 23, 2023 · 9b8ea41 · 9b8ea41
1 parent 9d0f6d8
commit 9b8ea41
Show file tree

Hide file tree

Showing 32 changed files with 15,345 additions and 9,043 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -9,9 +9,11 @@
   "updateInternalDependencies": "patch",
   "ignore": [
     "navmesh-website",
-    "node-cjs-recast-navigation-example",
-    "node-esm-recast-navigation-example",
-    "vite-recast-navigation-three-example"
+    "node-cjs-example",
+    "node-esm-example",
+    "parcel-example",
+    "react-scripts-example",
+    "vite-example"
   ],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true

diff --git a/.changeset/cool-olives-obey.md b/.changeset/cool-olives-obey.md
@@ -0,0 +1,5 @@
+---
+'@recast-navigation/wasm': patch
+---
+
+fix: parcel and react-scripts support
diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,4 @@ dist
 .vscode
 .vercel
 emsdk
+.parcel-cache
diff --git a/...s-recast-navigation-example/src/index.cjs → examples/node-cjs-example/index.cjs b/...s-recast-navigation-example/src/index.cjs → examples/node-cjs-example/index.cjs
diff --git a/...js-recast-navigation-example/package.json → examples/node-cjs-example/package.json b/...js-recast-navigation-example/package.json → examples/node-cjs-example/package.json
@@ -1,10 +1,10 @@
 {
-  "name": "node-cjs-recast-navigation-example",
+  "name": "node-cjs-example",
   "private": true,
   "version": "1.0.0",
   "description": "example of using recast-navigation in node",
   "scripts": {
-    "start": "node src/index.cjs"
+    "start": "node index.cjs"
   },
   "author": "",
   "license": "ISC",

diff --git a/...sm-recast-navigation-example/src/index.js → examples/node-esm-example/index.mjs b/...sm-recast-navigation-example/src/index.js → examples/node-esm-example/index.mjs
diff --git a/...sm-recast-navigation-example/package.json → examples/node-esm-example/package.json b/...sm-recast-navigation-example/package.json → examples/node-esm-example/package.json
@@ -1,11 +1,11 @@
 {
-  "name": "node-esm-recast-navigation-example",
+  "name": "node-esm-example",
   "private": true,
   "type": "module",
   "version": "1.0.0",
   "description": "example of using recast-navigation in node",
   "scripts": {
-    "start": "node src/index.js"
+    "start": "node index.mjs"
   },
   "author": "",
   "license": "ISC",

diff --git a/examples/node-esm-recast-navigation-example/.prettierrc.json b/examples/node-esm-recast-navigation-example/.prettierrc.json
diff --git a/examples/parcel-example/index.html b/examples/parcel-example/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head> </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.jsx"></script>
+  </body>
+</html>
diff --git a/examples/parcel-example/index.jsx b/examples/parcel-example/index.jsx
@@ -0,0 +1,72 @@
+import { OrbitControls } from '@react-three/drei';
+import { Canvas } from '@react-three/fiber';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { init } from 'recast-navigation';
+import { NavMeshHelper, threeToSoloNavMesh } from 'recast-navigation/three';
+import { suspend } from 'suspend-react';
+import { Mesh } from 'three';
+import './styles.css';
+
+const NavMesh = ({ children }) => {
+  const group = useRef();
+  const [navMesh, setNavMesh] = useState();
+
+  const navMeshHelper = useMemo(() => {
+    if (!navMesh) return null;
+
+    return new NavMeshHelper({ navMesh });
+  }, [navMesh]);
+
+  useEffect(() => {
+    const meshes = [];
+
+    group.current.traverse((object) => {
+      if (object instanceof Mesh) {
+        meshes.push(object);
+      }
+    });
+
+    const { success, navMesh } = threeToSoloNavMesh(meshes);
+
+    if (!success) return;
+
+    setNavMesh(navMesh);
+
+    return () => {
+      setNavMesh(undefined);
+      navMesh.destroy();
+    };
+  }, []);
+
+  return (
+    <group>
+      <group ref={group}>{children}</group>
+
+      {navMeshHelper && <primitive object={navMeshHelper} />}
+    </group>
+  );
+};
+
+function App() {
+  suspend(() => init(), []);
+
+  return (
+    <Canvas camera={{ position: [10, 10, 10] }}>
+      <NavMesh>
+        <mesh>
+          <boxGeometry args={[10, 0.2, 10]} />
+          <meshBasicMaterial color="#333" />
+        </mesh>
+      </NavMesh>
+
+      <ambientLight intensity={0.5} />
+      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
+      <pointLight position={[-10, -10, -10]} />
+
+      <OrbitControls />
+    </Canvas>
+  );
+}
+
+createRoot(document.getElementById('root')).render(<App />);
diff --git a/examples/parcel-example/package.json b/examples/parcel-example/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "parcel-example",
+  "packageManager": "yarn@3.5.0",
+  "scripts": {
+    "start": "parcel index.html"
+  },
+  "dependencies": {
+    "@react-three/drei": "^9.84.2",
+    "@react-three/fiber": "^8.14.2",
+    "recast-navigation": "workspace:^",
+    "three": "^0.156.1"
+  },
+  "devDependencies": {
+    "parcel": "^2.9.3"
+  }
+}
diff --git a/examples/parcel-example/styles.css b/examples/parcel-example/styles.css
@@ -0,0 +1,9 @@
+#root,
+canvas {
+  width: 100%;
+  height: 100vh;
+}
+
+body {
+  margin: 0;
+}
diff --git a/examples/react-scripts-example/package.json b/examples/react-scripts-example/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "react-scripts-example",
+  "private": true,
+  "main": "src/index.js",
+  "dependencies": {
+    "@react-three/drei": "^9.83.9",
+    "@react-three/fiber": "^8.12.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "recast-navigation": "0.9.2",
+    "suspend-react": "^0.1.3",
+    "three": "^0.156.1"
+  },
+  "scripts": {
+    "start": "react-scripts start"
+  },
+  "browserslist": [
+    ">1%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/examples/react-scripts-example/public/index.html b/examples/react-scripts-example/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/examples/react-scripts-example/src/index.jsx b/examples/react-scripts-example/src/index.jsx
@@ -0,0 +1,72 @@
+import { OrbitControls } from '@react-three/drei';
+import { Canvas } from '@react-three/fiber';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { init } from 'recast-navigation';
+import { NavMeshHelper, threeToSoloNavMesh } from 'recast-navigation/three';
+import { suspend } from 'suspend-react';
+import { Mesh } from 'three';
+import './styles.css';
+
+const NavMesh = ({ children }) => {
+  const group = useRef();
+  const [navMesh, setNavMesh] = useState();
+
+  const navMeshHelper = useMemo(() => {
+    if (!navMesh) return null;
+
+    return new NavMeshHelper({ navMesh });
+  }, [navMesh]);
+
+  useEffect(() => {
+    const meshes = [];
+
+    group.current.traverse((object) => {
+      if (object instanceof Mesh) {
+        meshes.push(object);
+      }
+    });
+
+    const { success, navMesh } = threeToSoloNavMesh(meshes);
+
+    if (!success) return;
+
+    setNavMesh(navMesh);
+
+    return () => {
+      setNavMesh(undefined);
+      navMesh.destroy();
+    };
+  }, []);
+
+  return (
+    <group>
+      <group ref={group}>{children}</group>
+
+      {navMeshHelper && <primitive object={navMeshHelper} />}
+    </group>
+  );
+};
+
+function App() {
+  suspend(() => init(), []);
+
+  return (
+    <Canvas camera={{ position: [10, 10, 10] }}>
+      <NavMesh>
+        <mesh>
+          <boxGeometry args={[10, 0.2, 10]} />
+          <meshBasicMaterial color="#333" />
+        </mesh>
+      </NavMesh>
+
+      <ambientLight intensity={0.5} />
+      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
+      <pointLight position={[-10, -10, -10]} />
+
+      <OrbitControls />
+    </Canvas>
+  );
+}
+
+createRoot(document.getElementById('root')).render(<App />);
diff --git a/examples/react-scripts-example/src/styles.css b/examples/react-scripts-example/src/styles.css
@@ -0,0 +1,9 @@
+#root,
+canvas {
+  width: 100%;
+  height: 100vh;
+}
+
+body {
+  margin: 0;
+}
diff --git a/...ecast-navigation-three-example/.gitignore → examples/vite-example/.gitignore b/...ecast-navigation-three-example/.gitignore → examples/vite-example/.gitignore
diff --git a/...ecast-navigation-example/.prettierrc.json → examples/vite-example/.prettierrc.json b/...ecast-navigation-example/.prettierrc.json → examples/vite-example/.prettierrc.json
diff --git a/...ecast-navigation-three-example/index.html → examples/vite-example/index.html b/...ecast-navigation-three-example/index.html → examples/vite-example/index.html
diff --git a/...ast-navigation-three-example/package.json → examples/vite-example/package.json b/...ast-navigation-three-example/package.json → examples/vite-example/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "vite-recast-navigation-three-example",
+  "name": "vite-example",
   "private": true,
   "type": "module",
   "scripts": {

diff --git a/...cast-navigation-three-example/src/app.tsx → examples/vite-example/src/app.tsx b/...cast-navigation-three-example/src/app.tsx → examples/vite-example/src/app.tsx
diff --git a/...st-navigation-three-example/src/index.css → examples/vite-example/src/index.css b/...st-navigation-three-example/src/index.css → examples/vite-example/src/index.css
diff --git a/...ast-navigation-three-example/src/main.tsx → examples/vite-example/src/main.tsx b/...ast-navigation-three-example/src/main.tsx → examples/vite-example/src/main.tsx
diff --git a/...avigation-three-example/src/vite-env.d.ts → examples/vite-example/src/vite-env.d.ts b/...avigation-three-example/src/vite-env.d.ts → examples/vite-example/src/vite-env.d.ts
diff --git a/...st-navigation-three-example/tsconfig.json → examples/vite-example/tsconfig.json b/...st-navigation-three-example/tsconfig.json → examples/vite-example/tsconfig.json
diff --git a/...vigation-three-example/tsconfig.node.json → examples/vite-example/tsconfig.node.json b/...vigation-three-example/tsconfig.node.json → examples/vite-example/tsconfig.node.json
diff --git a/...t-navigation-three-example/vite.config.ts → examples/vite-example/vite.config.ts b/...t-navigation-three-example/vite.config.ts → examples/vite-example/vite.config.ts
diff --git a/examples/vite-recast-navigation-three-example/.prettierrc.json b/examples/vite-recast-navigation-three-example/.prettierrc.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "build:navmesh-website": "(cd apps/navmesh-website && yarn build)",
     "test": "concurrently --kill-others-on-fail \"yarn test:unit-tests\" \"yarn test:node-smoke-test\"",
     "test:unit-tests": "yarn workspaces foreach -t --include @recast-navigation/core run test",
-    "test:node-smoke-test": "(cd ./examples/node-cjs-recast-navigation-example && yarn start) && (cd ./examples/node-esm-recast-navigation-example && yarn start)",
+    "test:node-smoke-test": "(cd ./examples/node-cjs-example && yarn start) && (cd ./examples/node-esm-example && yarn start)",
     "change": "yarn changeset",
     "release": "yarn build && yarn test",
     "publish": "changeset publish",

diff --git a/packages/recast-navigation-wasm/CMakeLists.txt b/packages/recast-navigation-wasm/CMakeLists.txt
@@ -81,7 +81,7 @@ set(EMCC_ARGS
   -s EXPORTED_RUNTIME_METHODS=["UTF8ToString","addFunction"]
   -s EXPORT_NAME="Recast"
   -s MODULARIZE=1
-  -s ENVIRONMENT='web,node'
+  -s ENVIRONMENT='web'
   -s NO_EXIT_RUNTIME=1
   -s NO_FILESYSTEM=1
   -s FILESYSTEM=0

diff --git a/packages/recast-navigation/package.json b/packages/recast-navigation/package.json
@@ -30,11 +30,13 @@
   "exports": {
     ".": {
       "import": "./index.mjs",
-      "require": "./index.cjs"
+      "require": "./index.cjs",
+      "types": "./index.d.ts"
     },
     "./three": {
       "import": "./three.mjs",
-      "require": "./index.cjs"
+      "require": "./index.cjs",
+      "types": "./three.d.ts"
     }
   },
   "files": [
@@ -48,7 +50,7 @@
     "README.md"
   ],
   "scripts": {
-    "clean": "(rm index.js index.d.ts three.js three.d.ts || true)",
+    "clean": "(rm index.mjs index.cjs index.d.ts three.mjs three.cjs three.d.ts || true)",
     "build": "yarn clean && rollup --config rollup.config.js --bundleConfigAsCjs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"