[release/typescript]: Fixed the react router issue and added a new test app to test for it (#3428)

This PR fixes #3359.
Additionally I have add a new test app to test for this issue and I
changed a perl script to be portable on windows.

The issue was that `useTable` had it's own `isActive` state that it was
incorrectly maintaining, when it should just have been using the
connections `isActive` state directly.

This fixes a critical bug and should be pushed ASAP.

None, fixes a critical bug.

2, quite straightforward fix after figuring it out.

- [x] I added a test app and tested the fix in my browser.

---------

Co-authored-by: Zeke Foppa <[email protected]>

Author: cloutiertyler

Cargo.lock

@@ -49,6 +49,7 @@ members = [
   "tools/upgrade-version",
   "tools/license-check",
   "crates/bindings-typescript/test-app/server",
+  "crates/bindings-typescript/test-react-router-app/server",
 ]
 default-members = ["crates/cli", "crates/standalone", "crates/update"]
 # cargo feature graph resolver. v3 is default in edition2024 but workspace

Cargo.toml

@@ -292,7 +292,6 @@ export function useTable<
       | undefined;
   }
   const [subscribeApplied, setSubscribeApplied] = useState(false);
-  const [isActive, setIsActive] = useState(false);
   let spacetime: DbConnection | undefined;
   try {
     spacetime = useSpacetimeDB<DbConnection>();
@@ -329,27 +328,7 @@ export function useTable<
   }, [client, tableName, whereKey, subscribeApplied]);
 
   useEffect(() => {
-    const onConnect = () => {
-      setIsActive(client.isActive);
-    };
-    const onDisconnect = () => {
-      setIsActive(client.isActive);
-    };
-    const onConnectError = () => {
-      setIsActive(client.isActive);
-    };
-    client['on']('connect', onConnect);
-    client['on']('disconnect', onDisconnect);
-    client['on']('connectError', onConnectError);
-    return () => {
-      client['off']('connect', onConnect);
-      client['off']('disconnect', onDisconnect);
-      client['off']('connectError', onConnectError);
-    };
-  }, [client]);
-
-  useEffect(() => {
-    if (isActive) {
+    if (client.isActive) {
       const cancel = client
         .subscriptionBuilder()
         .onApplied(() => {
@@ -360,7 +339,7 @@ export function useTable<
         cancel.unsubscribe();
       };
     }
-  }, [query, isActive, client]);
+  }, [query, client.isActive, client]);
 
   const subscribe = useCallback(
     (onStoreChange: () => void) => {

crates/bindings-typescript/src/react/useTable.ts

@@ -12,7 +12,7 @@
     "format": "prettier . --write --ignore-path ../../../.prettierignore",
     "lint": "eslint . && prettier . --check --ignore-path ../../../.prettierignore",
     "preview": "vite preview",
-    "generate": "cargo build -p spacetimedb-standalone && cargo run -p spacetimedb-cli generate --lang typescript --out-dir src/module_bindings --project-path server && prettier --write src/module_bindings && find src/module_bindings -type f -exec perl -pi -e 's#spacetimedb#../../../src/index#g' {} + && prettier --write src/module_bindings",
+    "generate": "cargo build -p spacetimedb-standalone && cargo run -p spacetimedb-cli generate --lang typescript --out-dir src/module_bindings --project-path server && prettier --write src/module_bindings && node ./replace-spacetimedb.js && prettier --write src/module_bindings",
     "spacetime:generate": "spacetime generate --lang typescript --out-dir src/module_bindings --project-path server",
     "spacetime:start": "spacetime start server",
     "spacetime:publish:local": "spacetime publish game --project-path server --server local",

crates/bindings-typescript/test-app/package.json

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+
+/**
+ * Cross-platform replacement script
+ * Equivalent to:
+ * find src/module_bindings -type f -exec perl -pi -e 's#spacetimedb#../../../src/index#g' {}
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+const ROOT = path.resolve('src/module_bindings');
+const SEARCH = /spacetimedb/g;
+const REPLACEMENT = '../../../src/index';
+
+function replaceInFile(filePath) {
+  try {
+    let content = fs.readFileSync(filePath, 'utf8');
+    if (SEARCH.test(content)) {
+      const updated = content.replace(SEARCH, REPLACEMENT);
+      fs.writeFileSync(filePath, updated, 'utf8');
+      console.log(`✔ Updated: ${filePath}`);
+    }
+  } catch (err) {
+    console.error(`✖ Error processing ${filePath}:`, err);
+  }
+}
+
+function walkDir(dir) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) walkDir(fullPath);
+    else if (entry.isFile()) replaceInFile(fullPath);
+  }
+}
+
+walkDir(ROOT);
+console.log('✅ Replacement complete.');

crates/bindings-typescript/test-app/replace-spacetimedb.js

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

crates/bindings-typescript/test-react-router-app/.gitignore

@@ -0,0 +1,29 @@
+# @clockworklabs/test-app
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`cf7b7d8`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/cf7b7d89a1547fb3863f6641f5b2eb40a27c05d8), [`941cf4e`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/941cf4eba6b7df934d74696b373b89cc62764673), [`a501f5c`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/a501f5ccf9a0a926eb4f345ddeb01ffcb872d67e), [`9032269`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/9032269004d4dae587c39ccd85da0a32fb9a0114), [`6547882`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/6547882bb28ed9a1ca436335745e9997328026ff), [`5d7304b`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/5d7304bd3e05dd7a032cfb7069aab97b881f0179)]:
+  - @clockworklabs/spacetimedb-sdk@1.2.0
+
+## 0.0.3-rc1.0
+
+### Patch Changes
+
+- Updated dependencies [[`cf7b7d8`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/cf7b7d89a1547fb3863f6641f5b2eb40a27c05d8), [`a501f5c`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/a501f5ccf9a0a926eb4f345ddeb01ffcb872d67e), [`9032269`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/9032269004d4dae587c39ccd85da0a32fb9a0114), [`6547882`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/6547882bb28ed9a1ca436335745e9997328026ff), [`5d7304b`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/5d7304bd3e05dd7a032cfb7069aab97b881f0179)]:
+  - @clockworklabs/spacetimedb-sdk@1.0.0-rc1.0
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [[`2f6c82c`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/2f6c82c724b9f9407c7bedee13252ca8ffab8f7d), [`b9db9b6`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/b9db9b6e46d8c98b29327d97c12c07b7a2fc96bf), [`79c278b`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/79c278be71b2dfd82106ada983fd81d395b1d912)]:
+  - @clockworklabs/spacetimedb-sdk@0.12.1
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`5adb557`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/5adb55776c81d0760cf0268df0fa5dee600f0ef8), [`ab1f463`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/ab1f463d7da6e530a6cd47e2433141bfd16addd1), [`b8c944c`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/b8c944cd23d3b53c72131803a775127bf0a95213), [`17227c0`](https://github.com/clockworklabs/spacetimedb-typescript-sdk/commit/17227c0f65def3a9d5e767756ccf46777210041a)]:
+  - @clockworklabs/spacetimedb-sdk@0.12.0

crates/bindings-typescript/test-react-router-app/CHANGELOG.md

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json', './tsconfig.app.json'],
+    tsconfigRootDir: __dirname,
+  },
+};
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

crates/bindings-typescript/test-react-router-app/README.md

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

crates/bindings-typescript/test-react-router-app/index.html

@@ -0,0 +1,33 @@
+{
+  "name": "@clockworklabs/test-app",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "format": "prettier . --write --ignore-path ../../../.prettierignore",
+    "lint": "eslint . && prettier . --check --ignore-path ../../../.prettierignore",
+    "preview": "vite preview",
+    "generate": "cargo build -p spacetimedb-standalone && cargo run -p spacetimedb-cli generate --lang typescript --out-dir src/module_bindings --project-path server && prettier --write src/module_bindings && node ./replace-spacetimedb.js && prettier --write src/module_bindings",
+    "spacetime:generate": "spacetime generate --lang typescript --out-dir src/module_bindings --project-path server",
+    "spacetime:start": "spacetime start server",
+    "spacetime:publish:local": "spacetime publish game --project-path server --server local",
+    "spacetime:publish": "spacetime publish game --project-path server --server testnet"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.9.4"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.2.2",
+    "vite": "^7.1.5"
+  }
+}