refactor: support Node.js 20.x.x (#8)

* fix: use optional chaining for accessing importAttributes

otherwise Node 20.x will fail since it has been introduced after

* feat: support node 20/21

* ci: remove 22 from ci for now

* chore: add changeset

Author: Julien-R44

.changeset/wise-scissors-breathe.md

@@ -0,0 +1,7 @@
+---
+"@hot-hook/dump-viewer": patch
+"hot-hook": patch
+"@hot-hook/runner": patch
+---
+
+Add support for Node.js 20. We removed the direct usage of `importAttributes` that was only introduced in Node.js 20.9. Hot-hook should works fine with Node.js 20.0.0 and above.

.github/workflows/check.yml

@@ -7,74 +7,75 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v4
+      - uses: actions/checkout@v4
 
-    - name: Setup Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version: 21
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 21
 
-    - name: Install pnpm
-      run: |
-        corepack enable
-        corepack prepare pnpm@latest --activate
+      - name: Install pnpm
+        run: |
+          corepack enable
+          corepack prepare pnpm@latest --activate
 
-    - name: Install dependencies
-      run: pnpm install
+      - name: Install dependencies
+        run: pnpm install
 
-    - name: Lint
-      run: pnpm lint
+      - name: Lint
+        run: pnpm lint
 
   typecheck:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v4
+      - uses: actions/checkout@v4
 
-    - name: Setup Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version: 21
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 21
 
-    - name: Install pnpm
-      run: |
-        corepack enable
-        corepack prepare pnpm@latest --activate
+      - name: Install pnpm
+        run: |
+          corepack enable
+          corepack prepare pnpm@latest --activate
 
-    - name: Install dependencies
-      run: |
-        pnpm install
-        pnpm -r build
+      - name: Install dependencies
+        run: |
+          pnpm install
+          pnpm -r build
 
-    - name: Typecheck
-      run: pnpm typecheck
+      - name: Typecheck
+        run: pnpm typecheck
 
   tests:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest]
+        node: [20, 21]
     runs-on: ${{ matrix.os }}
     timeout-minutes: 10
 
     steps:
-    - uses: actions/checkout@v4
-
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: 21
-
-    - name: Install pnpm
-      run: |
-        corepack enable
-        corepack prepare pnpm@latest --activate
-
-    - name: Install dependencies
-      run: |
-        pnpm install
-        pnpm -r build
-
-    - name: Run tests
-      env:
-        FORCE_COLOR: 1
-      run: pnpm test
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install pnpm
+        run: |
+          corepack enable
+          corepack prepare pnpm@latest --activate
+
+      - name: Install dependencies
+        run: |
+          pnpm install
+          pnpm -r build
+
+      - name: Run tests
+        env:
+          FORCE_COLOR: 1
+        run: pnpm test

package.json

@@ -25,6 +25,7 @@
     "@types/supertest": "^6.0.2",
     "c8": "^9.1.0",
     "del-cli": "^5.1.0",
+    "desm": "^1.3.1",
     "eslint": "^8.57.0",
     "execa": "^8.0.1",
     "fs-extra": "^11.2.0",

packages/dump_viewer/package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@unocss/reset": "^0.59.0",
+    "desm": "^1.3.1",
     "preact": "^10.19.6",
     "vis-data": "^7.1.9",
     "vis-network": "^9.1.9"

packages/dump_viewer/src/dump_viewer.ts

@@ -1,4 +1,4 @@
-import { join } from 'node:path'
+import { join } from 'desm'
 import { readFile } from 'node:fs/promises'
 
 /**
@@ -14,7 +14,7 @@ export async function dumpViewer() {
   /**
    * Load the HTML content and replace the placeholder with the dump
    */
-  const htmlLocation = join(import.meta.dirname, 'index.html')
+  const htmlLocation = join(import.meta.url, 'index.html')
   let html = await readFile(htmlLocation, 'utf8')
   html = html.replace('$__hot_hook_placeholder__', JSON.stringify(dump))
 

packages/hot_hook/bin/test.ts

@@ -1,15 +1,15 @@
-import { configure, processCLIArgs, run } from '@japa/runner'
+import { join } from 'desm'
 import { assert } from '@japa/assert'
-import { fileSystem } from '@japa/file-system'
 import { snapshot } from '@japa/snapshot'
-import { join } from 'node:path'
+import { fileSystem } from '@japa/file-system'
+import { configure, processCLIArgs, run } from '@japa/runner'
 
 processCLIArgs(process.argv.splice(2))
 configure({
   files: ['tests/**/*.spec.ts'],
   plugins: [
     assert(),
-    fileSystem({ basePath: join(import.meta.dirname, '../tmp'), autoClean: true }),
+    fileSystem({ basePath: join(import.meta.url, '../tmp'), autoClean: true }),
     snapshot(),
   ],
 })

packages/hot_hook/src/loader.ts

@@ -143,7 +143,7 @@ export class HotHookLoader {
       url = parsedUrl.href
     }
 
-    if (context.importAttributes.hot) {
+    if (context.importAttributes?.hot) {
       delete context.importAttributes.hot
     }
 
@@ -183,7 +183,7 @@ export class HotHookLoader {
     } else {
       const parentPath = fileURLToPath(parentUrl)
       const isHardcodedBoundary = this.#hardcodedBoundaryMatcher.match(resultPath)
-      const reloadable = context.importAttributes.hot === 'true' ? true : isHardcodedBoundary
+      const reloadable = context.importAttributes?.hot === 'true' ? true : isHardcodedBoundary
 
       this.#dependencyTree.addDependency(parentPath, { path: resultPath, reloadable })
     }

packages/hot_hook/tests/helpers.ts

@@ -1,11 +1,12 @@
 import fs from 'fs-extra'
+import { join } from 'desm'
+import path from 'node:path'
 import pTimeout from 'p-timeout'
 import { pEvent } from 'p-event'
-import path, { join } from 'node:path'
 import { getActiveTest } from '@japa/runner'
 import { NodeOptions, execaNode } from 'execa'
 
-export const projectRoot = join(import.meta.dirname, '../')
+export const projectRoot = join(import.meta.url, '../')
 
 export async function fakeInstall(destination: string) {
   const { name: packageName, bin = {} } = await fs.readJson(

packages/runner/bin/test.ts

@@ -1,15 +1,15 @@
-import { configure, processCLIArgs, run } from '@japa/runner'
+import { join } from 'desm'
 import { assert } from '@japa/assert'
-import { fileSystem } from '@japa/file-system'
 import { snapshot } from '@japa/snapshot'
-import { join } from 'node:path'
+import { fileSystem } from '@japa/file-system'
+import { configure, processCLIArgs, run } from '@japa/runner'
 
 processCLIArgs(process.argv.splice(2))
 configure({
   files: ['tests/**/*.spec.ts'],
   plugins: [
     assert(),
-    fileSystem({ basePath: join(import.meta.dirname, '../tmp'), autoClean: true }),
+    fileSystem({ basePath: join(import.meta.url, '../tmp'), autoClean: true }),
     snapshot(),
   ],
 })