block65 · maxholman · Dec 15, 2024 · Dec 15, 2024 · Dec 15, 2024 · Dec 15, 2024
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -15,9 +15,9 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          cache: 'pnpm'
-          registry-url: 'https://registry.npmjs.org'
-          node-version-file: '.node-version'
+          cache: "pnpm"
+          registry-url: "https://registry.npmjs.org"
+          node-version-file: ".node-version"
 
       - run: make
 

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -2,13 +2,13 @@ name: Unit Tests (PR)
 
 on:
   pull_request:
-    branches: ['canary', 'master']
+    branches: ["canary", "master"]
 
 jobs:
   test:
     strategy:
       matrix:
-        node-version: ['18', '20', '22']
+        node-version: ["20", "22"]
 
     runs-on: ubuntu-latest
     steps:
@@ -19,8 +19,8 @@ jobs:
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
-          cache: 'pnpm'
-          registry-url: 'https://registry.npmjs.org'
+          cache: "pnpm"
+          registry-url: "https://registry.npmjs.org"
           node-version: ${{ matrix.node-version }}
 
       - run: make test
diff --git a/.node-version b/.node-version
@@ -1 +1 @@
-20
+22
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+public-hoist-pattern[]=workbox-window
diff --git a/Makefile b/Makefile
@@ -16,20 +16,18 @@ clean: node_modules
 distclean: clean
 	rm -rf node_modules
 
-.PHONY: lint
-lint: node_modules
-	pnpm exec eslint .
-	pnpm exec prettier --check .
-
 node_modules: package.json
 	pnpm install
 
 .PHONY: test
 test: node_modules
 	pnpm run -r test
 
-.PHONY: pretty
-pretty: node_modules
-	pnpm exec eslint --fix . || true
-	pnpm exec prettier --write .
-	pnpx sort-package-json package.json packages/*/package.json examples/*/package.json
+.PHONY: format
+format: node_modules
+	pnpm exec biome format . --fix
+
+.PHONY: lint
+lint: node_modules
+	pnpm exec biome lint . --fix
+	pnpx sort-package-json package.json packages/*/package.json examples/*/package.json
diff --git a/biome.jsonc b/biome.jsonc
@@ -0,0 +1,38 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": ["dev-dist"]
+  },
+  "json": {
+    "parser": {
+      "allowComments": true,
+      "allowTrailingCommas": true
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  }
+}
diff --git a/examples/browser/.env b/examples/browser/.env
@@ -1,3 +1,3 @@
 # WARN: these keys are not secure, generate your own!
 VITE_SERVER_VAPID_PUBLIC_KEY=BKKXE3jJV5UJ6c8HVPam6DvMPGZK26r-M7ojsO2T_KdjdeMT2d7oQpaO-VI3o3wn33mQ8JlHta3OSJ5f67Ac5ZY
-VITE_SERVER_URL=http://localhost:3000
+VITE_SERVER_URL=http://localhost:3065
diff --git a/examples/browser/index.html b/examples/browser/index.html
@@ -1,18 +1,29 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="color-scheme" content="dark" />
-  </head>
 
-  <style>
-    @import 'the-new-css-reset';
-    @import '@block65/react-design-system/css';
-  </style>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="color-scheme" content="dark" />
+
+  <!-- inter -->
+  <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+
+  <title>
+    Web Push Example
+  </title>
+
+</head>
+
+<style>
+  body {
+    font-family: 'Inter', sans-serif;
+  }
+</style>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
 
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
 </html>
diff --git a/examples/browser/package.json b/examples/browser/package.json
@@ -7,19 +7,20 @@
     "dev": "vite dev"
   },
   "dependencies": {
-    "@block65/react-design-system": "^0.32.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "the-new-css-reset": "^1.11.2",
-    "vite-plugin-pwa": "^0.20.0",
-    "workbox-window": "^7.1.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "the-new-css-reset": "^1.11.3"
   },
   "devDependencies": {
     "@block65/webcrypto-web-push": "workspace:*",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.13"
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.16",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
+    "vite-plugin-pwa": "^0.21.1"
   }
 }
diff --git a/examples/browser/public/push-sw.ts b/examples/browser/public/push-sw.ts
@@ -1,16 +1,12 @@
-/// <reference lib="webworker" />
-
-declare const selfie: ServiceWorkerGlobalScope;
-
-selfie.addEventListener('push', async (event) => {
+self.addEventListener('push', async (event) => {
   // Keep the service worker alive until the notification is shown.
   event.waitUntil(
-    selfie.registration.pushManager.getSubscription().then((subscription) => {
+    self.registration.pushManager.getSubscription().then((subscription) => {
       if (!subscription) {
         throw new Error('No subscription found.');
       }
 
-      selfie.registration.showNotification('Web Push', {
+      self.registration.showNotification('Web Push', {
         // event.data?.json()
         body: event.data?.text() || '<empty>',
         requireInteraction: false, // can dismiss itself automatically

diff --git a/examples/browser/src/App.tsx b/examples/browser/src/App.tsx
@@ -1,26 +1,7 @@
-import {
-  Block,
-  Button,
-  Code,
-  DesignSystem,
-  Heading,
-  Panel,
-  Strong,
-  Text,
-  interFontThemeClassName,
-} from '@block65/react-design-system';
 import type { PushMessage } from '@block65/webcrypto-web-push';
-import { useCallback, useState, type FC } from 'react';
+import { type FC, useCallback, useState } from 'react';
 import { useRegisterSW } from 'virtual:pwa-register/react';
-
-function invariant<T>(
-  condition: T | undefined | null | '' | 0 | false,
-  message: string,
-): asserts condition {
-  if (!condition) {
-    throw new Error(message);
-  }
-}
+import { invariant } from './utils.ts';
 
 async function getSubscription(
   registration: ServiceWorkerRegistration | undefined,
@@ -144,55 +125,54 @@ export const App: FC = () => {
   }, [subscription]);
 
   return (
-    <DesignSystem
-      flexDirection="column"
-      className={interFontThemeClassName}
-      style={{ minHeight: '100%' }}
-    >
-      <Block
-        flexGrow
-        alignSelf="center"
-        margin="10"
-        style={{ maxWidth: '30rem' }}
-      >
-        <Heading level="2">Web Push</Heading>
-
-        <Panel>
-          <Strong>Server Public Key</Strong>
-          <Code>{publicKey}</Code>
-        </Panel>
-
-        <Panel>
-          <Text>
-            <Strong>Service Worker Registered</Strong>: {String(!!registration)}
-          </Text>
-
-          <Text>
-            <Strong>Subscribed</Strong>: {String(!!subscription)}
-          </Text>
-
-          <Button
-            busy={subscribeBusy}
+    <div className="flex-grow mx-auto m-15 max-w-screen-sm gap-4 flex flex-col">
+      <h1 className="my-4 font-semibold text-xl">Web Push Example</h1>
+
+      <div className="flex flex-col">
+        <b>Server Public Key</b>
+        <code className="font-mono fg">{publicKey}</code>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <p className="flex flex-row gap-1">
+          <span className="font-semibold">Service Worker Registered:</span>
+          {registration ? 'Yes' : <span className="text-orange-600 ">No</span>}
+        </p>
+
+        <p className="flex flex-row gap-1">
+          <span className="font-semibold">Subscribed:</span>{' '}
+          {subscription ? 'Yes' : 'No'}
+        </p>
+
+        <div className="flex flex-row gap-4">
+          <button
+            className="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded cursor-pointer flex-grow disabled:opacity-50"
+            type="button"
             disabled={!registration || !!subscription}
             onClick={() => subscribe()}
           >
-            Subscribe
-          </Button>
-          <Button
+            {subscribeBusy ? 'busy' : 'Subscribe'}
+          </button>
+
+          <button
+            className="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded cursor-pointer flex-grow disabled:opacity-50"
+            type="button"
             disabled={!registration || !subscription}
             onClick={() => unsubscribe()}
           >
             Unsubscribe
-          </Button>
-        </Panel>
+          </button>
+        </div>
 
-        <Button
+        <button
+          className="bg-gray-500 hover:bg-gray-700 text-white py-2 px-4 rounded cursor-pointer flex-grow disabled:opacity-50"
+          type="button"
           disabled={!registration || !subscription}
           onClick={() => send()}
         >
           Send Myself A Push Message
-        </Button>
-      </Block>
-    </DesignSystem>
+        </button>
+      </div>
+    </div>
   );
 };
diff --git a/examples/browser/src/input.css b/examples/browser/src/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;