Isolated Demo Tests

.github/workflows/test-isolated.yaml

@@ -0,0 +1,69 @@
+# Ensures packages and demos test correctly
+name: Test Isolated Demos
+
+on:
+  push:
+
+jobs:
+  test:
+    name: Test Isolated Demos
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+
+      - name: Setup NodeJS
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          # Pnpm 9.4 introduces this https://github.com/pnpm/pnpm/pull/7633
+          # which causes workspace:^1.2.0 to be converted to 1.2.0^1.2.0
+          version: 9.3
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install
+        run: pnpm install
+
+      - name: Build Packages
+        run: pnpm build:packages
+
+      - name: Start Verdaccio
+        run: |
+          npm install -g verdaccio
+          nohup verdaccio -c verdaccio-config.yaml &
+          sleep 10 # Give Verdaccio some time to start
+
+      - name: Prepare For Test Publish
+        run: npx tsx scripts/test-publish-helper.ts
+
+      - name: Registry login
+        run: npx npm-cli-login -u test -p test -e [email protected] -r http://localhost:4873
+
+      - name: Config Temporary Registry
+        run: echo "@powersync:registry=http://localhost:4873" >> ~/.npmrc
+
+      # No actual auth is ever supplied to this action.
+      # It should never be able to publish to NPMJS
+      - name: Test publish
+        run: pnpm -r publish --no-git-checks
+
+      - name: Test Demos
+        run: npx tsx scripts/isolated-demo-test.ts

demos/angular-supabase-todolist/.env.template

@@ -0,0 +1,4 @@
+# See the local demo at https://github.com/powersync-ja/self-host-demo/tree/main/demos/supabase
+WEBPACK_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
+WEBPACK_PUBLIC_SUPABASE_ANON_KEY=
+WEBPACK_PUBLIC_POWERSYNC_URL=http://localhost:8080

demos/angular-supabase-todolist/.gitignore

@@ -166,5 +166,3 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
-
-environment.ts

demos/angular-supabase-todolist/README.md

@@ -13,9 +13,11 @@ A step-by-step guide on Supabase<>PowerSync integration is available [here](http
 ## Quick Start
 
 1. Run `pnpm install`
-2. Run `pnpm watch` to build application and check for code changes
-3. In a new terminal run `pnpm start` to start the server
-4. Go to <http://localhost:8080>
+2. Create a `.env` file by copying the template `cp .env.template .env`
+3. Populate the `.env` file with PowerSync and Supabase details
+4. Run `pnpm watch` to build application and check for code changes
+5. In a new terminal run `pnpm start` to start the server
+6. Go to <http://localhost:8080>
 
 **Note:** The Angular development server (`pnpm serve`) doesn't support service worker applications
 

demos/angular-supabase-todolist/extra-webpack.config.js

@@ -1,8 +1,11 @@
 const webpack = require('webpack');
 const pkg = require('./package.json');
-const { inspect } = require('util');
 const path = require('path');
 
+const dotenv = require('dotenv');
+
+dotenv.config();
+
 module.exports = (config, options, targetOptions) => {
   delete config.optimization;
   return {
@@ -11,7 +14,15 @@ module.exports = (config, options, targetOptions) => {
       rules: config.module.rules
     },
     resolve: config.resolve,
-    plugins: config.plugins,
+    plugins: [
+      ...config.plugins,
+      new webpack.DefinePlugin({
+        // Embed environment variables starting with `WEBPACK_PUBLIC_`
+        'process.env': JSON.stringify(
+          Object.fromEntries(Object.entries(process.env).filter(([key]) => key.startsWith('WEBPACK_PUBLIC_')))
+        )
+      })
+    ],
     output: {
       filename: config.filename,
       path: config.path,

demos/angular-supabase-todolist/package.json

@@ -7,6 +7,7 @@
     "start": "http-server -p 8080 -c-1 dist/",
     "build": "ng build",
     "format": "prettier --write .",
+    "test:build": "pnpm build",
     "watch": "ng build --watch --configuration development"
   },
   "private": true,
@@ -20,8 +21,8 @@
     "@angular/platform-browser-dynamic": "^18.1.1",
     "@angular/router": "^18.1.1",
     "@angular/service-worker": "^18.1.1",
-    "@powersync/web": "workspace:*",
     "@journeyapps/wa-sqlite": "^0.2.0",
+    "@powersync/web": "workspace:*",
     "@supabase/supabase-js": "^2.44.4",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.3",
@@ -32,6 +33,7 @@
     "@angular-devkit/build-angular": "^18.1.1",
     "@angular/cli": "^18.1.1",
     "@angular/compiler-cli": "^18.1.1",
+    "dotenv": "^16.4.5",
     "http-server": "^14.1.1",
     "typescript": "~5.5.3"
   }

demos/angular-supabase-todolist/src/app/supabase.service.ts

@@ -7,7 +7,7 @@ import {
   type SupabaseClient,
   type User
 } from '@supabase/supabase-js';
-import { environment } from '../../environment';
+import { environment } from '../environment';
 import { type AbstractPowerSyncDatabase, type CrudEntry, UpdateType, PowerSyncBackendConnector } from '@powersync/web';
 
 /// Postgres Response codes that we cannot recover from by retrying.

demos/angular-supabase-todolist/src/env.d.ts

@@ -0,0 +1,8 @@
+declare namespace NodeJS {
+  // These are injected in the Webpack config
+  interface ProcessEnv {
+    WEBPACK_PUBLIC_SUPABASE_URL: string;
+    WEBPACK_PUBLIC_SUPABASE_ANON_KEY: string;
+    WEBPACK_PUBLIC_POWERSYNC_URL: string;
+  }
+}

demos/angular-supabase-todolist/src/environment.ts

@@ -0,0 +1,5 @@
+export const environment = {
+  supabaseUrl: process.env.WEBPACK_PUBLIC_SUPABASE_URL,
+  supabaseKey: process.env.WEBPACK_PUBLIC_SUPABASE_ANON_KEY,
+  powersyncUrl: process.env.WEBPACK_PUBLIC_POWERSYNC_URL
+};

demos/django-react-native-todolist/.env

@@ -0,0 +1,3 @@
+# Replace the credentials below with your Supabase, PowerSync and Expo project details.
+EXPO_PUBLIC_DJANGO_URL=http://localhost:6061
+EXPO_PUBLIC_POWERSYNC_URL=http://localhost:8080

demos/django-react-native-todolist/.gitignore

@@ -3,9 +3,6 @@
 # idea
 .idea
 
-# Credentials
-library/django/AppConfig.ts
-
 # dependencies
 node_modules/
 

demos/django-react-native-todolist/README.md

@@ -13,6 +13,8 @@ Install the dependencies, including the React Native SDK:
 pnpm install
 ```
 
+Update the `.env` file with PowerSync and Django details
+
 Run on iOS
 
 ```sh

demos/django-react-native-todolist/library/django/AppConfig.ts

@@ -0,0 +1,4 @@
+export const AppConfig = {
+  djangoUrl: process.env.EXPO_PUBLIC_DJANGO_URL, // This is base url to the Django project
+  powersyncUrl: process.env.EXPO_PUBLIC_POWERSYNC_URL // This is the PowerSync instance url provided in the PowerSync dashboard
+};

demos/django-react-native-todolist/library/widgets/Drawer.tsx

@@ -4,13 +4,16 @@ import { createDrawerNavigator, DrawerNavigationOptions } from '@react-navigatio
 
 import { withLayoutContext } from 'expo-router';
 import { HeaderWidget } from './HeaderWidget';
+import { EventMapBase, NavigationState } from '@react-navigation/native';
 
 const DrawerNavigator = createDrawerNavigator().Navigator as React.ComponentType<any>;
 
-export const Drawer = withLayoutContext<DrawerNavigationOptions, typeof DrawerNavigator>(DrawerNavigator, (options) =>
-  _.chain(options)
-    .map((o) => ({ ...o, options: { ...o.options, header: () => <HeaderWidget title={o.options?.title || ''} /> } }))
-    .value()
+export const Drawer = withLayoutContext<DrawerNavigationOptions, typeof DrawerNavigator, NavigationState, EventMapBase>(
+  DrawerNavigator,
+  (options) =>
+    _.chain(options)
+      .map((o) => ({ ...o, options: { ...o.options, header: () => <HeaderWidget title={o.options?.title || ''} /> } }))
+      .value()
 );
 
 export default Drawer;

demos/django-react-native-todolist/process-env.d.ts

@@ -0,0 +1,11 @@
+export {};
+
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      [key: string]: string | undefined;
+      EXPO_PUBLIC_DJANGO_URL: string;
+      EXPO_PUBLIC_POWERSYNC_URL: string;
+    }
+  }
+}

demos/django-react-native-todolist/tsconfig.test.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./node_modules/expo/tsconfig.base.json",
+  "compilerOptions": {
+    "strict": true,
+    "composite": true
+  }
+}

demos/example-nextjs/package.json

@@ -7,7 +7,8 @@
     "clean": "rm -rf .next",
     "watch": "next dev",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test:build": "pnpm build"
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",

demos/example-vite/package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "start": "pnpm build && pnpm preview"
+    "start": "pnpm build && pnpm preview",
+    "test:build": "pnpm build"
   },
   "dependencies": {
     "@powersync/web": "workspace:*"

demos/example-webpack/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "build": "webpack",
     "serve": "serve ./dist",
-    "start": "pnpm build && pnpm serve"
+    "start": "pnpm build && pnpm serve",
+    "test:build": "pnpm build"
   },
   "dependencies": {
     "@powersync/web": "workspace:*"

demos/react-multi-client/package.json

@@ -6,7 +6,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "preview": "vite preview",
-    "start": "pnpm build && pnpm preview"
+    "start": "pnpm build && pnpm preview",
+    "test:build": "pnpm build"
   },
   "dependencies": {
     "@journeyapps/wa-sqlite": "~0.2.0",

demos/vue-supabase-todolist/package.json

@@ -7,7 +7,8 @@
     "dev": "vue-tsc --noEmit --watch & vite dev",
     "build": "vue-tsc && vite build",
     "preview": "vite preview",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit",
+    "test:build": "pnpm build"
   },
   "dependencies": {
     "@powersync/web": "workspace:*",

package.json

@@ -30,7 +30,9 @@
     "node": ">=20.9.0"
   },
   "devDependencies": {
+    "@actions/core": "^1.10.1",
     "@changesets/cli": "2.27.2",
+    "@pnpm/workspace.find-packages": "^4.0.2",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5"