Merge pull request #38 from chialab/next

Migrate to DNA 4

.changeset/brave-pugs-change.md

@@ -0,0 +1,5 @@
+---
+"@chialab/synapse": major
+---
+
+Remove node server support.

.changeset/lovely-lamps-remain.md

@@ -0,0 +1,5 @@
+---
+"@chialab/synapse": major
+---
+
+Migrate to DNA 4.

.changeset/pre.json

@@ -0,0 +1,11 @@
+{
+  "mode": "exit",
+  "tag": "alpha",
+  "initialVersions": {
+    "@chialab/synapse": "3.0.3"
+  },
+  "changesets": [
+    "brave-pugs-change",
+    "lovely-lamps-remain"
+  ]
+}

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "@chialab/eslint-config"
+  "extends": "@chialab/eslint-config",
+  "env": {
+    "browser": true
+  }
 }

.github/workflows/main.yml

@@ -45,8 +45,8 @@ jobs:
       - name: Run build script
         run: yarn build
 
-  test-browser:
-    name: Test Browsers
+  test:
+    name: Test
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
@@ -64,32 +64,7 @@ jobs:
         run: yarn playwright install --with-deps chromium
 
       - name: Run tests
-        run: yarn test:browser --coverage
-
-      - name: Upload coverage to codecov
-        uses: codecov/codecov-action@v3
-        if: always()
-        with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          file: coverage/clover.xml
-
-  test-node:
-    name: Test Node
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          cache: yarn
-
-      - name: Install project dependencies
-        run: yarn install
-
-      - name: Run tests
-        run: yarn test:node --coverage
+        run: yarn test --coverage
 
       - name: Upload coverage to codecov
         uses: codecov/codecov-action@v3
@@ -105,8 +80,7 @@ jobs:
     needs:
       - lint
       - build
-      - test-browser
-      - test-node
+      - test
     steps:
       - name: Checkout the repository
         uses: actions/checkout@v4

.github/workflows/pr.yml

@@ -43,8 +43,8 @@ jobs:
       - name: Run build script
         run: yarn build
 
-  test-browser:
-    name: Test Browsers
+  test:
+    name: Test
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
@@ -58,33 +58,11 @@ jobs:
       - name: Install project dependencies
         run: yarn install
 
-      - name: Run tests
-        run: yarn test:browser --coverage
-
-      - name: Upload coverage to codecov
-        uses: codecov/codecov-action@v3
-        if: always()
-        with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          file: coverage/clover.xml
-
-  test-node:
-    name: Test Node
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v4
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          cache: yarn
-
-      - name: Install project dependencies
-        run: yarn install
+      - name: Install chromium
+        run: yarn playwright install --with-deps chromium
 
       - name: Run tests
-        run: yarn test:node --coverage
+        run: yarn test --coverage
 
       - name: Upload coverage to codecov
         uses: codecov/codecov-action@v3

CHANGELOG.md

@@ -1,5 +1,12 @@
 # [2.5.0](https://github.com/chialab/synapse/compare/v2.4.0...v2.5.0) (2022-05-24)
 
+## 4.0.0-alpha.0
+
+### Major Changes
+
+- 4dc995f: Remove node server support.
+- 4dc995f: Migrate to DNA 4.
+
 ## 3.0.3
 
 ### Patch Changes

examples/navigation/App.js

@@ -1,27 +1,29 @@
-import { customElements, html } from '@chialab/dna';
+import { define, html } from '@chialab/dna';
 import { App, DocumentMetaMiddleware } from '@chialab/synapse';
 import { Link } from './Elements/Link.js';
 import { Dashboard } from './Pages/Dashboard.js';
 import { NotFound } from './Pages/NotFound.js';
 import { Projects } from './Pages/Projects.js';
 import { Team } from './Pages/Team.js';
 
-export class DemoApp extends App {
-    static get routes() {
-        return [
-            new Dashboard({ pattern: '/' }),
-            new Team({ pattern: '/team' }),
-            new Projects({ pattern: '/projects' }),
-            new NotFound({ pattern: '*' }),
-        ];
-    }
+export const DemoApp = define(
+    'demo-app',
+    class DemoApp extends App {
+        static get routes() {
+            return [
+                new Dashboard({ pattern: '/' }),
+                new Team({ pattern: '/team' }),
+                new Projects({ pattern: '/projects' }),
+                new NotFound({ pattern: '*' }),
+            ];
+        }
 
-    static get middlewares() {
-        return [new DocumentMetaMiddleware()];
-    }
+        static get middlewares() {
+            return [new DocumentMetaMiddleware()];
+        }
 
-    render() {
-        return html`<div class="min-h-full flex flex-col">
+        render() {
+            return html`<div class="min-h-full flex flex-col">
             <nav class="bg-gray-800 flex-none">
                 <div class="px-4">
                     <div class="flex h-16 items-center justify-between">
@@ -48,7 +50,6 @@ export class DemoApp extends App {
                 </div>
             </main>
         </div>`;
+        }
     }
-}
-
-customElements.define('demo-app', DemoApp);
+);

examples/navigation/Elements/Link.js

@@ -1,7 +1,7 @@
 import { html } from '@chialab/dna';
 import { getRouter } from '@chialab/synapse';
 
-export function Link({ children, href }, context) {
+export function Link({ children, href }, hooks, context) {
     const router = getRouter(context);
     const isCurrentPage = href === router?.current;
 

examples/navigation/index.js

@@ -1,4 +1,4 @@
-import { document, html, render, window } from '@chialab/dna';
+import { html, render } from '@chialab/dna';
 import { BrowserHistory } from '@chialab/synapse';
 import './App.js';
 

index.html

@@ -32,18 +32,7 @@
         </style>
     </head>
     <body></body>
-    <script type="module">
-        import { document, html, render, window } from '@chialab/dna';
-        import { BrowserHistory } from './src/index.ts';
-        import './examples/navigation/App.js';
-
-        const app = render(
-            html`<demo-app
-                base=${`${window.location.pathname}#!/`}
-                history=${new BrowserHistory()} />`,
-            document.body
-        );
-
-        app.start();
-    </script>
+    <script
+        type="module"
+        src="./examples/navigation/index.js"></script>
 </html>

package.json

@@ -1,31 +1,25 @@
 {
   "name": "@chialab/synapse",
-  "version": "3.0.3",
+  "version": "4.0.0-alpha.0",
   "type": "module",
   "description": "Application framework built on the top of DNA Web Components.",
   "main": "dist/synapse.cjs",
   "module": "dist/synapse.js",
-  "browser": {
-    "node-fetch": false
-  },
   "types": "types/index.d.ts",
   "exports": {
     ".": {
+      "types": "./types/index.d.ts",
       "require": "./dist/synapse.cjs",
-      "node": "./dist/synapse.node.js",
       "default": "./dist/synapse.js"
     }
   },
   "scripts": {
     "dev": "vite",
-    "build": "rimraf 'dist' 'types' && yarn types && yarn build:esm && yarn build:node && yarn build:cjs",
+    "build": "rimraf 'dist' 'types' && yarn types && yarn build:esm && yarn build:cjs",
     "build:esm": "esbuild src/index.ts --outfile=dist/synapse.js --format=esm --bundle --packages=external --sourcemap --platform=browser",
-    "build:node": "esbuild src/index.ts --outfile=dist/synapse.node.js --format=esm --bundle --packages=external --sourcemap --platform=node",
-    "build:cjs": "esbuild src/index.ts --outfile=dist/synapse.cjs --format=cjs --bundle --packages=external --sourcemap --platform=node",
+    "build:cjs": "esbuild src/index.ts --outfile=dist/synapse.cjs --format=cjs --bundle --packages=external --sourcemap --platform=browser",
     "types": "tsc",
-    "test": "yarn test:browser && yarn test:node",
-    "test:browser": "vitest run --config vitest.browser.ts",
-    "test:node": "vitest run --config vitest.node.ts",
+    "test": "vitest run",
     "lint": "prettier --check . && eslint src test",
     "pages:build": "vite build",
     "prepack": "yarn build && publint"
@@ -43,20 +37,18 @@
   },
   "author": "Chialab <[email protected]> (https://www.chialab.it)",
   "dependencies": {
-    "@chialab/dna": "^3.20.0",
-    "node-fetch": "^3.0.0",
-    "tslib": "^2.0.0"
+    "@chialab/dna": "^4.0.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.22.0",
     "@chialab/eslint-config": "^4.0.0",
     "@chialab/prettier-config": "^1.2.2",
+    "@types/node": "^20.11.21",
     "@vitest/browser": "^1.2.2",
     "@vitest/coverage-istanbul": "^1.2.2",
     "@vitest/coverage-v8": "^1.2.2",
     "esbuild": "^0.20.0",
     "eslint": "^8.0.0",
-    "jsdom": "^16.0.0",
     "playwright": "^1.41.1",
     "prettier": "^3.2.4",
     "publint": "^0.2.7",

src/App.tsx

@@ -1,4 +1,4 @@
-import { Component, customElementPrototype, listen, observe, property, state, window } from '@chialab/dna';
+import { Component, listen, observe, property, state } from '@chialab/dna';
 import { Page } from './Components/Page';
 import { History, NavigationDirection } from './Router/History';
 import type { Middleware } from './Router/Middleware';
@@ -12,7 +12,6 @@ import type { State } from './Router/State';
 /**
  * A Web Component which handles routing.
  */
-@customElementPrototype
 export class App extends Component {
     /**
      * Default routes to connect.
@@ -146,8 +145,8 @@ export class App extends Component {
     /**
      * @inheritdoc
      */
-    constructor(...args: any[]) {
-        super(...args);
+    initialize() {
+        super.initialize();
 
         this.routes = (this.constructor as typeof App).routes;
         this.middlewares = (this.constructor as typeof App).middlewares;