refactor: monorepo + tsc + examples + deps

.eslintrc.cjs

@@ -1,10 +1,49 @@
 module.exports = {
   root: true,
-  extends: ['@block65/eslint-config'],
+  extends: [
+    '@block65/eslint-config',
+    '@block65/eslint-config/typescript',
+    '@block65/eslint-config/react',
+  ],
   parserOptions: {
-    project: ['./tsconfig-eslint.json'],
+    project: [
+      './tsconfig.json',
+
+      './examples/browser/tsconfig.json',
+      './examples/browser/tsconfig-sw.json',
+      './examples/browser/tsconfig.node.json',
+      './examples/nodejs/tsconfig.json',
+      './examples/cloudflare-workers/tsconfig.json',
+
+      './packages/web-push/tsconfig.json',
+      './packages/web-push/test/tsconfig.json',
+    ],
   },
   rules: {
     'no-console': 'off',
   },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
+      rules: {
+        'no-restricted-syntax': 'off',
+        '@typescript-eslint/no-import-type-side-effects': 'error',
+      },
+    },
+
+    {
+      files: ['**/*.test.ts', '**/*.test.tsx', '**/test/*.ts'],
+      rules: {
+        '@typescript-eslint/consistent-type-imports': 'off',
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
+
+    {
+      files: ['*.config.js', '*.config.ts'],
+      rules: {
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
+  ],
 };

.github/workflows/deploy.yml

@@ -9,16 +9,18 @@ jobs:
   publish-npm:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 7
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
           cache: 'pnpm'
+          registry-url: 'https://registry.npmjs.org'
+          node-version-file: '.node-version'
+
       - run: make
-      - run: pnpm publish --access=public --no-git-checks
+
+      - run: pnpm publish -r --filter @block65/webcrypto-web-push --access=public --no-git-checks
         env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/pr.yml

@@ -6,15 +6,21 @@ on:
 
 jobs:
   test:
+    strategy:
+      matrix:
+        node-version: ['18', '20', '22']
+
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 7
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
           cache: 'pnpm'
+          registry-url: 'https://registry.npmjs.org'
+          node-version: ${{ matrix.node-version }}
+
       - run: make test

.gitignore

@@ -1,3 +1,10 @@
 node_modules
 dist
 coverage
+
+.wrangler
+
+*.tsbuildinfo
+
+sqlite.db
+**/migrations/meta/

.node-version

@@ -1 +1 @@
-16
+20

.prettierignore

@@ -0,0 +1 @@
+pnpm-lock.yaml

Makefile

@@ -1,36 +1,35 @@
+.DEFAULT_GOAL := build
 
-SRCS = $(wildcard lib/**)
+.PHONY: build
+build: node_modules
+	pnpm exec tsc -b
 
-all: dist
+.PHONY: dev
+dev: node_modules
+	pnpm exec tsc -b -w
 
 .PHONY: clean
-clean:
-	pnpm tsc -b --clean
+clean: node_modules
+	pnpm exec tsc -b --clean
 
-.PHONY: test
-test: node_modules
-	pnpm exec vitest
-	$(MAKE) smoketest
+.PHONY: distclean
+distclean: clean
+	rm -rf node_modules
+
+.PHONY: lint
+lint: node_modules
+	pnpm exec eslint .
+	pnpm exec prettier --check .
 
 node_modules: package.json
 	pnpm install
 
-dist: node_modules tsconfig-lib.json $(SRCS)
-	pnpm exec tsc -b tsconfig-lib.json
-
-.PHONY: dist-watch
-dist-watch:
-	pnpm exec tsc -w --preserveWatchOutput
+.PHONY: test
+test: node_modules
+	pnpm run -r test
 
 .PHONY: pretty
 pretty: node_modules
-	pnpm exec eslint --fix .
+	pnpm exec eslint --fix . || true
 	pnpm exec prettier --write .
-
-.PHONY: dev-server
-dev-server: node_modules
-	pnpm exec wrangler dev src/worker.ts
-
-.PHONY: smoketest
-smoketest: dist
-	pnpm exec node -e "import('@block65/webcrypto-web-push').then(() => console.log('smoketest ok')).catch(console.error)"
+	pnpx sort-package-json package.json packages/*/package.json examples/*/package.json

examples/browser/.env

@@ -0,0 +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

examples/browser/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+dev-dist
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/browser/index.html

@@ -0,0 +1,18 @@
+<!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>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/browser/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "browser-example",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "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"
+  },
+  "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"
+  }
+}

examples/browser/public/push-sw.ts

@@ -0,0 +1,20 @@
+/// <reference lib="webworker" />
+
+declare const selfie: ServiceWorkerGlobalScope;
+
+selfie.addEventListener('push', async (event) => {
+  // Keep the service worker alive until the notification is shown.
+  event.waitUntil(
+    selfie.registration.pushManager.getSubscription().then((subscription) => {
+      if (!subscription) {
+        throw new Error('No subscription found.');
+      }
+
+      selfie.registration.showNotification('Web Push', {
+        // event.data?.json()
+        body: event.data?.text() || '<empty>',
+        requireInteraction: false, // can dismiss itself automatically
+      });
+    }),
+  );
+});