feat: Web CLI utility for copying assets from node_modules to public (#409)

Author: Chriztiaan

.changeset/curly-poets-explode.md

@@ -0,0 +1,5 @@
+---
+'@powersync/web': patch
+---
+
+Added a bin/cli utilty that can be invoked with `npx powersync-web copy-assets` or `pnpm powersync-web copy-assets`.

demos/react-native-web-supabase-todolist/README.md

@@ -50,7 +50,7 @@ bucket_definitions:
 
 ### Configure the app
 
-#### 1. Set up environment variables: 
+#### 1. Set up environment variables:
 
 Copy the `.env.local.template` file:
 
@@ -65,7 +65,7 @@ Then edit `.env.local` to insert your Supabase and PowerSync project credentials
 This is required for the React Native Web implementation. Learn more in [our docs](https://docs.powersync.com/client-sdk-references/react-native-and-expo/react-native-web-support).
 
 ```bash
-mkdir -p public/@powersync && cp -r node_modules/@powersync/web/dist/* public/@powersync/
+pnpm powersync-web copy-assets
 ```
 
 ### Run the app
@@ -88,4 +88,4 @@ Run on Android:
 
 ```sh
 pnpm android
-```
+```

packages/web/README.md

@@ -4,7 +4,7 @@
 
 # PowerSync SDK for Web
 
-*[PowerSync](https://www.powersync.com) is a sync engine for building local-first apps with instantly-responsive UI/UX and simplified state transfer. Syncs between SQLite on the client-side and Postgres, MongoDB or MySQL on the server-side.*
+_[PowerSync](https://www.powersync.com) is a sync engine for building local-first apps with instantly-responsive UI/UX and simplified state transfer. Syncs between SQLite on the client-side and Postgres, MongoDB or MySQL on the server-side._
 
 This package (`packages/web`) is the PowerSync SDK for JavaScript Web clients. It is an extension of `packages/common`.
 
@@ -40,6 +40,15 @@ See the [example Vite config](https://github.com/powersync-ja/powersync-js/blob/
 
 Our [full SDK reference](https://docs.powersync.com/client-sdk-references/js-web) contains everything you need to know to get started implementing PowerSync in your project.
 
+# Public Workers
+
+For some frameworks, it may be required to configure the web workers ([see the docs](https://docs.powersync.com/client-sdk-references/react-native-and-expo/react-native-web-support)).
+The `@powersync/web` package includes a CLI utility which can copy the required assets to the `public` directory (configurable with the `--output` option).
+
+```bash
+pnpm powersync-web copy-assets
+```
+
 # Changelog
 
 A changelog for this SDK is available [here](https://releases.powersync.com/announcements/powersync-js-web-client-sdk).

packages/web/bin/powersync.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+
+const { Command } = require('commander');
+const program = new Command();
+const path = require('path');
+const fsPromise = require('fs/promises');
+const { version } = require('../package.json');
+  
+program
+  .name('powersync-web')
+  .description('CLI for PowerSync Web SDK utilities')
+  .version(version);
+
+program
+  .command('copy-assets')
+  .description('Copy assets to the specified output directory')
+  .option('-o, --output <directory>', 'output directory for assets', 'public')
+  .action(async(options) => {
+    const outputDir = options.output;
+    
+    console.log(`Target directory: ${outputDir}`);
+    
+    const cwd = process.cwd();
+    const source = path.join(cwd, 'node_modules', '@powersync', 'web', 'dist');
+    const destination = path.join(cwd, outputDir, '@powersync');
+    
+    await fsPromise.rm(destination, { recursive: true, force: true }); // Clear old assets
+
+    await copyDirectory(source, destination)
+  });
+
+
+program.parse(process.argv);
+
+async function copyDirectory(source, destination) {
+  try {
+    await fsPromise.cp(source, destination, { recursive: true });
+    console.log(`Assets copied from ${source} to ${destination}`);
+  } catch (err) {
+    console.error(`Error copying assets: ${err.message}`);
+    process.exit(1);
+  }
+}

packages/web/package.json

@@ -4,7 +4,11 @@
   "description": "A Web SDK for JourneyApps PowerSync",
   "main": "lib/src/index.js",
   "types": "lib/src/index.d.ts",
+  "bin": {
+    "powersync-web": "bin/powersync.js"
+  },
   "files": [
+    "bin",
     "lib",
     "!lib/tests",
     "dist"
@@ -64,6 +68,7 @@
     "async-mutex": "^0.4.0",
     "bson": "^6.6.0",
     "comlink": "^4.4.1",
+    "commander": "^12.1.0",
     "js-logger": "^1.6.1"
   },
   "devDependencies": {