feat: add initial test setup

.github/workflows/build.yaml

@@ -4,9 +4,12 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
       - name: install dependencies
-        run: yarn
+        run: yarn install
       - name: Run build
         run: yarn build
       - name: Detect unwanted changes
@@ -15,8 +18,22 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
       - name: install dependencies
-        run: yarn
+        run: yarn install
       - name: Run lint
         run: yarn lint
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - name: install dependencies
+        run: yarn install
+      - name: Run test
+        run: yarn test

lib/cjs/index.js

@@ -164,26 +164,25 @@ const htmlPlugin = (configuration = { files: [], }) => {
             };
             if (ext === '.js') {
                 const scriptTag = document.createElement('script');
-                if (htmlFileConfiguration.scriptLoading === 'module') {
-                    // If module, add type="module"
-                    scriptTag.setAttribute('type', 'module');
-                }
-                else if (!htmlFileConfiguration.inline && (!htmlFileConfiguration.scriptLoading || htmlFileConfiguration.scriptLoading === 'defer')) {
-                    // if scriptLoading is unset or defer, use defer
-                    scriptTag.setAttribute('defer', '');
-                }
                 // Check if the JavaScript should be inlined.
                 if (isInline()) {
                     logInfo && console.log('Inlining script', filepath);
                     // Read the content of the JavaScript file, then append to the script tag
                     const scriptContent = await fs_1.default.promises.readFile(filepath, 'utf-8');
                     scriptTag.textContent = scriptContent;
-                    document.body.append(scriptTag);
-                    // no need to set any attributes
-                    continue;
                 }
-                // If not inlined, set the 'src' attribute as usual.
-                scriptTag.setAttribute('src', targetPath);
+                else {
+                    // If not inlined, set the 'src' attribute as usual.
+                    scriptTag.setAttribute('src', targetPath);
+                }
+                if (htmlFileConfiguration.scriptLoading === 'module') {
+                    // If module, add type="module"
+                    scriptTag.setAttribute('type', 'module');
+                }
+                else if (!isInline() && (!htmlFileConfiguration.scriptLoading || htmlFileConfiguration.scriptLoading === 'defer')) {
+                    // if scriptLoading is unset or defer, use defer
+                    scriptTag.setAttribute('defer', '');
+                }
                 document.body.append(scriptTag);
             }
             else if (ext === '.css') {

package.json

@@ -8,7 +8,8 @@
   },
   "scripts": {
     "build": "tsc",
-    "lint": "eslint src/**"
+    "lint": "eslint src/**",
+    "test": "node --test \"**/*.test.mjs\""
   },
   "author": "Fabian Siegel <[email protected]>",
   "license": "MIT",
@@ -25,7 +26,7 @@
     "@types/node": "^16.9.1",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
-    "esbuild": "^0.15.10",
+    "esbuild": "^0.21.1",
     "eslint": "^8.8.0",
     "typescript": "^4.5.5"
   },

src/index.ts

@@ -219,16 +219,6 @@ export const htmlPlugin = (configuration: Configuration = { files: [], }): esbui
             if (ext === '.js') {
                 const scriptTag = document.createElement('script')
 
-                if (htmlFileConfiguration.scriptLoading === 'module') {
-                    // If module, add type="module"
-                    scriptTag.setAttribute('type', 'module')
-                } else if (
-                    !htmlFileConfiguration.inline && (!htmlFileConfiguration.scriptLoading || htmlFileConfiguration.scriptLoading === 'defer')
-                ) {
-                    // if scriptLoading is unset or defer, use defer
-                    scriptTag.setAttribute('defer', '')
-                }
-
                 // Check if the JavaScript should be inlined.
                 if (isInline()) {
                     logInfo && console.log('Inlining script', filepath)
@@ -238,14 +228,20 @@ export const htmlPlugin = (configuration: Configuration = { files: [], }): esbui
                         'utf-8'
                     )
                     scriptTag.textContent = scriptContent
-                    document.body.append(scriptTag)
-
-                    // no need to set any attributes
-                    continue
+                } else {
+                    // If not inlined, set the 'src' attribute as usual.
+                    scriptTag.setAttribute('src', targetPath)
                 }
 
-                // If not inlined, set the 'src' attribute as usual.
-                scriptTag.setAttribute('src', targetPath)
+                if (htmlFileConfiguration.scriptLoading === 'module') {
+                    // If module, add type="module"
+                    scriptTag.setAttribute('type', 'module')
+                } else if (
+                    !isInline() && (!htmlFileConfiguration.scriptLoading || htmlFileConfiguration.scriptLoading === 'defer')
+                ) {
+                    // if scriptLoading is unset or defer, use defer
+                    scriptTag.setAttribute('defer', '')
+                }
 
                 document.body.append(scriptTag)
             } else if (ext === '.css') {

test/e2e/index.test.mjs

@@ -0,0 +1,187 @@
+import { describe, it, beforeEach, afterEach } from 'node:test'
+import * as fsPromises from 'fs/promises'
+import * as fs from 'fs'
+import * as os from 'os'
+import * as path from 'path'
+import * as assert from 'assert'
+import * as esbuild from 'esbuild'
+const { htmlPlugin } = await import('../../lib/cjs/index.js')
+
+describe('esbuild-plugin-html', () => {
+    let savedDir
+    beforeEach(async () => {
+        savedDir = process.cwd()
+        const testDir = await fsPromises.mkdtemp(path.join(os.tmpdir(), 'esbuild-plugin-html_'))
+        process.chdir(testDir)
+    })
+    afterEach(() => {
+        process.chdir(savedDir)
+    })
+
+    const helper = async (/** @type {import('../../lib/cjs/index').HtmlFileConfiguration } */ htmlOptions) => {
+        await fsPromises.mkdir('src/')
+        await fsPromises.writeFile('src/index.ts', '')
+
+        await esbuild.build({
+            // esbuild should default to the current cwd, but during import, so we need to specifcy a working directory here.
+            absWorkingDir: process.cwd(),
+            entryPoints: ['src/index.ts'],
+            metafile: true,
+            outdir: './out',
+            plugins: [htmlPlugin({
+                files: [
+                    {
+                        filename: 'index.html',
+                        entryPoints: ['src/index.ts'],
+                        ...htmlOptions
+                    },
+                ],
+            })]
+        })
+
+
+        assert.ok(fs.existsSync('out/index.html'))
+        return await fsPromises.readFile('out/index.html', 'utf8')
+    }
+
+    it('creates html file with a script tag', async () => {
+        const result = await helper({})
+
+        assert.strictEqual(result, `<!DOCTYPE html><html><head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+
+
+<script src="index.js" defer=""></script></body></html>`
+        )
+    })
+
+
+    it('inserts a title into the html file', async () => {
+        const result = await helper({ title: 'Hallo Welt!' })
+
+        assert.strictEqual(result, `<!DOCTYPE html><html><head>
+    <meta charset="utf-8">
+  <title>Hallo Welt!</title></head>
+  <body>
+
+
+<script src="index.js" defer=""></script></body></html>`
+        )
+    })
+
+    describe('scriptLoading', () => {
+        it('blocking', async () => {
+            const result = await helper({ scriptLoading: 'blocking' })
+
+            assert.strictEqual(result, `<!DOCTYPE html><html><head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+
+
+<script src="index.js"></script></body></html>`
+            )
+        })
+
+        it('defer', async () => {
+            const result = await helper({ scriptLoading: 'defer' })
+
+            assert.strictEqual(result, `<!DOCTYPE html><html><head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+
+
+<script src="index.js" defer=""></script></body></html>`
+            )
+        })
+
+        it('module', async () => {
+            const result = await helper({ scriptLoading: 'module' })
+
+            assert.strictEqual(result, `<!DOCTYPE html><html><head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+
+
+<script src="index.js" type="module"></script></body></html>`
+            )
+        })
+
+
+        it('module, inline', async () => {
+            const result = await helper({ inline: true, scriptLoading: 'module' })
+
+            assert.strictEqual(result, `<!DOCTYPE html><html><head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+
+
+<script type="module"></script></body></html>`
+            )
+        })
+    })
+
+
+    it('creates html file containing the js inline', async () => {
+        const result = await helper({ inline: true })
+
+        assert.strictEqual(result, `<!DOCTYPE html><html><head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+
+
+<script></script></body></html>`
+        )
+    })
+
+
+    it('extraScripts', async () => {
+        const result = await helper({ extraScripts: [{ src: 'https://example.com/what', attrs: { "type": "module" } }] })
+
+        assert.strictEqual(result, `<!DOCTYPE html><html><head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+
+
+<script src="https://example.com/what" type="module"></script><script src="index.js" defer=""></script></body></html>`
+        )
+    })
+
+
+    it('creates a html file for a empty template', async () => {
+
+        const result = await helper({
+            htmlTemplate: '',
+        })
+
+        assert.strictEqual(result, `<!DOCTYPE html><html><head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+
+
+<script src="index.js" defer=""></script></body></html>`
+        )
+    })
+
+
+
+    it('lodash / define', async () => {
+
+        const result = await helper({
+            htmlTemplate: '<%- define.value %>',
+            define: {
+                value: 'hallo',
+            }
+        })
+
+        assert.strictEqual(result, '<html><head></head><body>hallo<script src="index.js" defer=""></script></body></html>')
+    })
+})