Improve minimal example projects readmes

Author: benitav

demos/example-nextjs/README.md

@@ -4,7 +4,7 @@ This example is built using [Next.js](https://nextjs.org/) and the [PowerSync JS
 
 To see it in action:
 
-1. Make sure to run `pnpm build:packages` in the root directory of this Git repo.
+1. Make sure to run `pnpm install` and `pnpm build:packages` in the root directory of this repo.
 2. Copy `.env.local.template` to `.env.local`, and complete the environment variables. You can generate a [temporary development token](https://docs.powersync.com/usage/installation/authentication-setup/development-tokens), or leave blank to test with local-only data.
-3. `pnpm start`
-4. Open the localhost URL in the browser displayed in the terminal output.
+3. cd into this directory and run `pnpm start`.
+4. Open the localhost URL displayed in the terminal output in your browser.

demos/example-vite/README.md

@@ -1,7 +1,9 @@
 # PowerSync Vite bundling test
 
+This is a minimal example demonstrating bundling with Vite. It attempts a connection to verify that web workers load correctly, but networks requests will fail since no credentials are configured. See [src/index.js](src/index.js) for details.
+
 To see it in action:
 
-1. Make sure to run `pnpm build:packages` in the root directory of this Git repo.
-2. `pnpm start`
-3. Open the localhost URL in the browser displayed in the terminal output.
+1. Make sure to run `pnpm install` and `pnpm build:packages` in the root directory of this repo.
+2. cd into this directory, and run `pnpm start`.
+3. Open the localhost URL displayed in the terminal output in your browser.

demos/example-vite/src/index.js

@@ -61,6 +61,5 @@ const openDatabase = async () => {
 };
 
 document.addEventListener('DOMContentLoaded', (event) => {
-  console.log('hello');
   openDatabase();
 });

demos/example-webpack/README.md

@@ -1,7 +1,9 @@
 # PowerSync Webpack bundling test
 
+This is a minimal example demonstrating bundling with Webpack. It attempts a connection to verify that web workers load correctly, but networks requests will fail since no credentials are configured. See [src/index.js](src/index.js) for details.
+
 To see it in action:
 
-1. Make sure to run `pnpm build:packages` in the root directory of this Git repo.
-2. `pnpm start`
-3. Open the localhost URL in the browser displayed in the terminal output.
+1. Make sure to run `pnpm install` and `pnpm build:packages` in the root directory of this repo.
+2. cd into this directory, and run `pnpm start`.
+3. Open the localhost URL displayed in the terminal output in your browser.

demos/example-webpack/src/index.js

@@ -6,6 +6,22 @@ import {
   Table
 } from '@journeyapps/powersync-sdk-web';
 
+/**
+ * A placeholder connector which doesn't do anything.
+ * This is just used to verify that the sync workers can be loaded
+ * when connecting.
+ */
+class DummyConnector {
+  async fetchCredentials() {
+    return {
+      endpoint: '',
+      token: ''
+    };
+  }
+
+  async uploadData(database) {}
+}
+
 export const AppSchema = new Schema([
   new Table({ name: 'customers', columns: [new Column({ name: 'name', type: ColumnType.TEXT })] })
 ]);
@@ -15,7 +31,11 @@ let PowerSync;
 const openDatabase = async () => {
   PowerSync = new WASQLitePowerSyncDatabaseOpenFactory({
     schema: AppSchema,
-    dbFilename: 'test.sqlite'
+    dbFilename: 'test.sqlite',
+    flags: {
+      // This is disabled once CSR+SSR functionality is verified to be working correctly
+      disableSSRWarning: true
+    }
   }).getInstance();
 
   await PowerSync.init();
@@ -25,8 +45,21 @@ const openDatabase = async () => {
 
   const result = await PowerSync.getAll('SELECT * FROM customers');
   console.log('contents of customers: ', result);
+
+  console.log(
+    `Attempting to connect in order to verify web workers are correctly loaded.
+    This doesn't use any actual network credentials. 
+    Network errors will be shown: these can be ignored.`
+  );
+
+  /**
+   * Try and connect, this will setup shared sync workers
+   * This will fail due to not having a valid endpoint,
+   * but it will try - which is all that matters.
+   */
+  await PowerSync.connect(new DummyConnector());
 };
 
 document.addEventListener('DOMContentLoaded', (event) => {
   openDatabase();
-});
+});