Merge pull request #83 from powersync-ja/todolist-demo-vite

Switch from NextJS -> Vite for demos

Author: rkistner

.changeset/fair-flowers-type.md

@@ -0,0 +1,7 @@
+---
+"@journeyapps/powersync-sdk-react-native": minor
+"@journeyapps/powersync-sdk-common": minor
+"@journeyapps/powersync-sdk-web": minor
+---
+
+Fix PowerSyncBackendConnector.fetchCredentials type to allow returning null

README.md

@@ -39,12 +39,13 @@ _Bad connectivity is everywhere, and we're tired of it. PowerSync is on a missio
 
 Demo applications are located in the [`demos/`](./demos/) directory. Also see our [Demo Apps / Example Projects](https://docs.powersync.com/resources/demo-apps-example-projects) gallery which lists all projects by the backend and client-side framework they use.
 
-- [demos/nextjs-supabase-todolist](./demos/nextjs-supabase-todolist/): A Next.js to-do list example app using the PowerSync Web SDK and a Supabase backend.
-- [demos/yjs-nextjs-supabase-text-collab](./demos/yjs-nextjs-supabase-text-collab/README.md): A Next.js real-time text editing collaboration example app powered by [Yjs](https://github.com/yjs/yjs) CRDTs and [Tiptap](https://tiptap.dev/), using the PowerSync Web SDK and a Supabase backend.
+- [demos/react-supabase-todolist](./demos/react-supabase-todolist/): A React to-do list example app using the PowerSync Web SDK and a Supabase backend.
+- [demos/yjs-react-supabase-text-collab](./demos/yjs-react-supabase-text-collab/README.md): A React real-time text editing collaboration example app powered by [Yjs](https://github.com/yjs/yjs) CRDTs and [Tiptap](https://tiptap.dev/), using the PowerSync Web SDK and a Supabase backend.
 - [demos/react-native-supabase-todolist](./demos/react-native-supabase-todolist): A React Native to-do list example app using a Supabase backend.
 - [demos/angular-supabase-todolist](./demos/angular-supabase-todolist/README.md) An Angular to-do list example app using the PowerSync Web SDK and a Supabase backend.
 - [demos/example-webpack](./demos/example-webpack/README.md): A minimal example demonstrating bundling with Webpack.
 - [demos/example-vite](./demos/example-vite/README.md): A minimal example demonstrating bundling with Vite.
+- [demos/example-nextjs](./demos/example-nextjs/README.md): An example demonstrating setup with Next.js.
 
 # Development
 

demos/example-nextjs/.env.local.template

@@ -0,0 +1,4 @@
+# Copy to .env.local, and complete these variables.
+# Leave blank to test local-only.
+NEXT_PUBLIC_POWERSYNC_URL=
+NEXT_PUBLIC_POWERSYNC_TOKEN=

demos/nextjs-supabase-todolist/.eslintrc.json renamed to demos/example-nextjs/.eslintrc.json

@@ -0,0 +1,10 @@
+# PowerSync Next.js example
+
+This example is built using [Next.js](https://nextjs.org/) and the [PowerSync JS web SDK](https://docs.powersync.com/client-sdk-references/js-web).
+
+To see it in action:
+
+1. Make sure to run `pnpm build:packages` in the root directory of this Git 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.

demos/yjs-nextjs-supabase-text-collab/.gitignore renamed to demos/example-nextjs/.gitignore

@@ -0,0 +1,56 @@
+{
+  "name": "@journeyapps/powersync-example-nextjs",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "clean": "rm -rf .next",
+    "watch": "next dev",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.12",
+    "@journeyapps/powersync-react": "workspace:*",
+    "@journeyapps/powersync-sdk-web": "workspace:*",
+    "@journeyapps/wa-sqlite": "~0.1.1",
+    "@lexical/react": "^0.11.3",
+    "@mui/icons-material": "^5.15.12",
+    "@mui/material": "^5.15.12",
+    "fast-glob": "^3.3.2",
+    "formik": "^2.4.5",
+    "highlight.js": "^11.9.0",
+    "js-logger": "^1.6.1",
+    "lato-font": "^3.0.0",
+    "lexical": "^0.11.3",
+    "lodash": "^4.17.21",
+    "lowlight": "^2.9.0",
+    "next": "14.1.0",
+    "next-images": "1.8.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "remixicon": "^2.5.0",
+    "shiki": "^0.10.1",
+    "simplify-js": "^1.2.4",
+    "uuid": "9.0.1"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@types/uuid": "9.0.8",
+    "autoprefixer": "^10.4.18",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^6.10.0",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.0.0",
+    "postcss": "^8.4.35",
+    "sass": "^1.71.1",
+    "sass-loader": "^13.3.3",
+    "style-loader": "^3.3.4",
+    "tailwindcss": "^3.4.1"
+  }
+}