Hello world
Hello world
Hello world
'); + assert.strictEqual(deserialized, 'ShadowRoot:Hello world
'); }); it('handles RegExp', async () => { const serialized = await page.evaluate(() => (window as any)._serialize(/foo.*?\\/)); const deserialized = await deserialize(serialized); - expect(deserialized instanceof RegExp).to.be.true; - expect(deserialized.source).to.equal('foo.*?\\\\'); - expect(deserialized.flags).to.equal(''); + assert.strictEqual(deserialized instanceof RegExp, true); + assert.strictEqual(deserialized.source, 'foo.*?\\\\'); + assert.strictEqual(deserialized.flags, ''); }); it('handles RegExp with flags', async () => { @@ -145,9 +150,9 @@ describe('serialize deserialize', function () { (window as any)._serialize(new RegExp('foo.*?\\\\', 'g')), ); const deserialized = await deserialize(serialized); - expect(deserialized instanceof RegExp).to.be.true; - expect(deserialized.source).to.equal('foo.*?\\\\'); - expect(deserialized.flags).to.equal('g'); + assert.strictEqual(deserialized instanceof RegExp, true); + assert.strictEqual(deserialized.source, 'foo.*?\\\\'); + assert.strictEqual(deserialized.flags, 'g'); }); it('handles URL', async () => { @@ -155,7 +160,7 @@ describe('serialize deserialize', function () { (window as any)._serialize(new URL('https://www.example.com')), ); const deserialized = await deserialize(serialized); - expect(deserialized).to.equal('https://www.example.com/'); + assert.strictEqual(deserialized, 'https://www.example.com/'); }); it('handles URLSearchparams', async () => { @@ -163,7 +168,7 @@ describe('serialize deserialize', function () { (window as any)._serialize(new URLSearchParams('foo=bar&lorem=ipsum')), ); const deserialized = await deserialize(serialized); - expect(deserialized).to.equal('URLSearchParams: foo=bar&lorem=ipsum'); + assert.strictEqual(deserialized, 'URLSearchParams: foo=bar&lorem=ipsum'); }); it('handles classes', async () => { @@ -175,26 +180,27 @@ describe('serialize deserialize', function () { return (window as any)._serialize(new Foo()); }); const deserialized = await deserialize(serialized); - expect(deserialized).to.eql({ a: 1, b: 2 }); - expect(deserialized.constructor.name).to.equal('Foo'); + assert.strictEqual(deserialized.a, 1); + assert.strictEqual(deserialized.b, 2); + assert.strictEqual(deserialized.constructor.name, 'Foo'); }); it('handles objects', async () => { const serialized = await page.evaluate(() => (window as any)._serialize({ a: 1, b: 2 })); const deserialized = await deserialize(serialized); - expect(deserialized).to.eql({ a: 1, b: 2 }); + assert.deepStrictEqual(deserialized, { a: 1, b: 2 }); }); it('handles arrays', async () => { const serialized = await page.evaluate(() => (window as any)._serialize([1, 2, 3])); const deserialized = await deserialize(serialized); - expect(deserialized).to.eql([1, 2, 3]); + assert.deepStrictEqual(deserialized, [1, 2, 3]); }); it('handles objects', async () => { const serialized = await page.evaluate(() => (window as any)._serialize({ a: 1, b: 2 })); const deserialized = await deserialize(serialized); - expect(deserialized).to.eql({ a: 1, b: 2 }); + assert.deepStrictEqual(deserialized, { a: 1, b: 2 }); }); it('handles objects with methods', async () => { @@ -213,14 +219,14 @@ describe('serialize deserialize', function () { }), ); const deserialized = await deserialize(serialized); - expect(deserialized.foo).to.be.a('function'); - expect(deserialized.foo.name).to.equal('foo'); - expect(deserialized.bar).to.be.a('function'); - expect(deserialized.bar.name).to.equal('bar'); - expect(deserialized.baz).to.be.a('function'); - expect(deserialized.baz.name).to.equal('baz'); - expect(deserialized['my-element']).to.be.a('function'); - expect(deserialized['my-element'].name).to.equal('my-element'); + assert.strictEqual(typeof deserialized.foo, 'function'); + assert.strictEqual(deserialized.foo.name, 'foo'); + assert.strictEqual(typeof deserialized.bar, 'function'); + assert.strictEqual(deserialized.bar.name, 'bar'); + assert.strictEqual(typeof deserialized.baz, 'function'); + assert.strictEqual(deserialized.baz.name, 'baz'); + assert.strictEqual(typeof deserialized['my-element'], 'function'); + assert.strictEqual(deserialized['my-element'].name, 'my-element'); }); it('handles deep objects', async () => { @@ -239,14 +245,14 @@ describe('serialize deserialize', function () { }), ); const deserialized = await deserialize(serialized); - expect(deserialized.myNumber).to.equal(123); - expect(deserialized.myString).to.equal('foo'); - expect(deserialized.myObject.myUrl).to.equal('http://www.example.com/'); - expect(deserialized.myObject.myMethod).to.be.a('function'); - expect(deserialized.myObject.myMethod.name).to.equal('myMethod'); - expect(deserialized.myObject.myRegExp).to.a('RegExp'); - expect(deserialized.myObject.myRegExp.source).to.equal('x'); - expect(deserialized.myArray).to.eql([1, '2']); + assert.strictEqual(deserialized.myNumber, 123); + assert.strictEqual(deserialized.myString, 'foo'); + assert.strictEqual(deserialized.myObject.myUrl, 'http://www.example.com/'); + assert.strictEqual(typeof deserialized.myObject.myMethod, 'function'); + assert.strictEqual(deserialized.myObject.myMethod.name, 'myMethod'); + assert.ok(deserialized.myObject.myRegExp instanceof RegExp); + assert.strictEqual(deserialized.myObject.myRegExp.source, 'x'); + assert.deepStrictEqual(deserialized.myArray, [1, '2']); }); it('handles deep arrays', async () => { @@ -264,17 +270,17 @@ describe('serialize deserialize', function () { ]); }); const deserialized = await deserialize(serialized); - expect(deserialized[0]).to.equal(1); - expect(deserialized[1]).to.equal('2'); - expect(deserialized[2]).to.a('RegExp'); - expect(deserialized[2].source).to.equal('x'); - expect(deserialized[3]).to.equal('http://www.example.com/'); - expect(deserialized[4]).to.equal('Symbol(foo)'); - expect(deserialized[5].a).to.equal(1); - expect(deserialized[5].b).to.equal(2); - expect(deserialized[5].c).to.equal('URLSearchParams: x=y'); - expect(deserialized[5].d).to.eql({ x: 'y' }); - expect(deserialized[5].d.constructor.name).to.equal('Foo'); + assert.strictEqual(deserialized[0], 1); + assert.strictEqual(deserialized[1], '2'); + assert.ok(deserialized[2] instanceof RegExp); + assert.strictEqual(deserialized[2].source, 'x'); + assert.strictEqual(deserialized[3], 'http://www.example.com/'); + assert.strictEqual(deserialized[4], 'Symbol(foo)'); + assert.strictEqual(deserialized[5].a, 1); + assert.strictEqual(deserialized[5].b, 2); + assert.strictEqual(deserialized[5].c, 'URLSearchParams: x=y'); + assert.strictEqual(deserialized[5].d.x, 'y'); + assert.strictEqual(deserialized[5].d.constructor.name, 'Foo'); }); it('handles circular references', async () => { @@ -284,7 +290,7 @@ describe('serialize deserialize', function () { return (window as any)._serialize(foo); }); const deserialized = await deserialize(serialized); - expect(deserialized).to.eql({ + assert.deepStrictEqual(deserialized, { circular: '[Circular]', }); }); @@ -298,7 +304,7 @@ describe('serialize deserialize', function () { return (window as any)._serialize(foo); }); const deserialized = await deserialize(serialized); - expect(deserialized).to.eql({ + assert.deepStrictEqual(deserialized, { circular1: '[Circular]', x: { circular2: '[Circular]', @@ -321,7 +327,7 @@ describe('serialize deserialize', function () { return (window as any)._serialize(foo); }); const deserialized = await deserialize(serialized); - expect(deserialized).to.eql({ circulars: ['[Circular]', 'bar', '[Circular]'] }); + assert.deepStrictEqual(deserialized, { circulars: ['[Circular]', 'bar', '[Circular]'] }); }); it('handles generated circular references', async () => { @@ -332,8 +338,8 @@ describe('serialize deserialize', function () { return (window as any)._serialize(obj); }); const deserialized = await deserialize(serialized); - expect(deserialized.f).to.be.a('function'); - expect(deserialized.x).to.equal('[Circular]'); + assert.strictEqual(typeof deserialized.f, 'function'); + assert.strictEqual(deserialized.x, '[Circular]'); }); it('handles errors', async () => { @@ -344,12 +350,11 @@ describe('serialize deserialize', function () { return (window as any)._serialize(a()); }); const deserialized = await deserialize(serialized, defaultOptions); - expect(deserialized).to.be.a('string'); - expect(deserialized).to.include('my error msg'); - expect(deserialized).to.include('2:29'); - expect(deserialized).to.include('3:29'); - expect(deserialized).to.include('4:29'); - expect(deserialized).to.include('5:38'); + assert.strictEqual(typeof deserialized, 'string'); + assert.ok(deserialized.includes('my error msg')); + assert.ok(/2:\d+/.test(deserialized)); + assert.ok(/3:\d+/.test(deserialized)); + assert.ok(/4:\d+/.test(deserialized)); }); it('handles errors in objects', async () => { @@ -360,12 +365,11 @@ describe('serialize deserialize', function () { return (window as any)._serialize({ myError: a() }); }); const deserialized = await deserialize(serialized, defaultOptions); - expect(deserialized.myError).to.be.a('string'); - expect(deserialized.myError).to.include('my error msg'); - expect(deserialized.myError).to.include('2:29'); - expect(deserialized.myError).to.include('3:29'); - expect(deserialized.myError).to.include('4:29'); - expect(deserialized.myError).to.include('5:49'); + assert.strictEqual(typeof deserialized.myError, 'string'); + assert.ok(deserialized.myError.includes('my error msg')); + assert.ok(/2:\d+/.test(deserialized.myError)); + assert.ok(/3:\d+/.test(deserialized.myError)); + assert.ok(/4:\d+/.test(deserialized.myError)); }); it('handles errors in arrays', async () => { @@ -376,21 +380,18 @@ describe('serialize deserialize', function () { return (window as any)._serialize([a(), b(), c()]); }); const deserialized = await deserialize(serialized, defaultOptions); - expect(deserialized[0]).to.be.a('string'); - expect(deserialized[0]).to.include('my error msg'); - expect(deserialized[0]).to.include('2:29'); - expect(deserialized[0]).to.include('3:29'); - expect(deserialized[0]).to.include('4:29'); - expect(deserialized[0]).to.include('5:39'); - expect(deserialized[1]).to.be.a('string'); - expect(deserialized[1]).to.include('my error msg'); - expect(deserialized[1]).to.include('2:29'); - expect(deserialized[1]).to.include('3:29'); - expect(deserialized[1]).to.include('5:44'); - expect(deserialized[2]).to.be.a('string'); - expect(deserialized[2]).to.include('my error msg'); - expect(deserialized[2]).to.include('2:29'); - expect(deserialized[2]).to.include('5:49'); + assert.strictEqual(typeof deserialized[0], 'string'); + assert.ok(deserialized[0].includes('my error msg')); + assert.ok(/2:\d+/.test(deserialized[0])); + assert.ok(/3:\d+/.test(deserialized[0])); + assert.ok(/4:\d+/.test(deserialized[0])); + assert.strictEqual(typeof deserialized[1], 'string'); + assert.ok(deserialized[1].includes('my error msg')); + assert.ok(/2:\d+/.test(deserialized[1])); + assert.ok(/3:\d+/.test(deserialized[1])); + assert.strictEqual(typeof deserialized[2], 'string'); + assert.ok(deserialized[2].includes('my error msg')); + assert.ok(/2:\d+/.test(deserialized[2])); }); it('can map stack trace locations', async () => { @@ -404,9 +405,9 @@ describe('serialize deserialize', function () { ...defaultOptions, mapStackLocation: l => ({ ...l, filePath: `${l.filePath}__MAPPED__`, line: 1, column: 2 }), }); - expect(deserialized).to.be.a('string'); - expect(deserialized).to.include('my error msg'); - expect(deserialized).to.include(`__MAPPED__:1:2`); + assert.strictEqual(typeof deserialized, 'string'); + assert.ok(deserialized.includes('my error msg')); + assert.ok(deserialized.includes(`__MAPPED__:1:2`)); }); it('mapped stack traces can be async', async () => { @@ -423,9 +424,9 @@ describe('serialize deserialize', function () { return { ...l, filePath: `${l.filePath}__MAPPED__`, line: 1, column: 2 }; }, }); - expect(deserialized).to.be.a('string'); - expect(deserialized).to.include('my error msg'); - expect(deserialized).to.include(`__MAPPED__:1:2`); + assert.strictEqual(typeof deserialized, 'string'); + assert.ok(deserialized.includes('my error msg')); + assert.ok(deserialized.includes(`__MAPPED__:1:2`)); }); it('can define a cwd below current directory', async () => { @@ -439,12 +440,11 @@ describe('serialize deserialize', function () { ...defaultOptions, cwd: path.resolve(__dirname, '..'), }); - expect(deserialized).to.be.a('string'); - expect(deserialized).to.include('my error msg'); - expect(deserialized).to.include(`2:29`); - expect(deserialized).to.include(`3:29`); - expect(deserialized).to.include(`4:29`); - expect(deserialized).to.include(`5:38`); + assert.strictEqual(typeof deserialized, 'string'); + assert.ok(deserialized.includes('my error msg')); + assert.ok(/2:\d+/.test(deserialized)); + assert.ok(/3:\d+/.test(deserialized)); + assert.ok(/4:\d+/.test(deserialized)); }); it('can define a cwd above current directory', async () => { @@ -458,30 +458,29 @@ describe('serialize deserialize', function () { cwd: path.resolve(__dirname, '..', 'foo'), browserRootDir: path.resolve(__dirname, '..'), }); - expect(deserialized).to.be.a('string'); - expect(deserialized).to.include('my error msg'); - expect(deserialized).to.include(`2:29`); - expect(deserialized).to.include(`3:29`); - expect(deserialized).to.include(`4:29`); - expect(deserialized).to.include(`5:38`); + assert.strictEqual(typeof deserialized, 'string'); + assert.ok(deserialized.includes('my error msg')); + assert.ok(/2:\d+/.test(deserialized)); + assert.ok(/3:\d+/.test(deserialized)); + assert.ok(/4:\d+/.test(deserialized)); }); it('handles null', async () => { const serialized = await page.evaluate(() => (window as any)._serialize(null)); const deserialized = await deserialize(serialized); - expect(deserialized).to.equal(null); + assert.strictEqual(deserialized, null); }); it('handles undefined', async () => { const serialized = await page.evaluate(() => (window as any)._serialize(undefined)); const deserialized = await deserialize(serialized); - expect(deserialized).to.equal(undefined); + assert.strictEqual(deserialized, undefined); }); it('handles undefined in an object', async () => { const serialized = await page.evaluate(() => (window as any)._serialize({ x: undefined })); const deserialized = await deserialize(serialized); - expect(deserialized).to.eql({ x: undefined }); + assert.deepStrictEqual(deserialized, { x: undefined }); }); it('handles undefined in an array', async () => { @@ -489,7 +488,7 @@ describe('serialize deserialize', function () { (window as any)._serialize([1, undefined, '2', undefined]), ); const deserialized = await deserialize(serialized); - expect(deserialized).to.eql([1, undefined, '2', undefined]); + assert.deepStrictEqual(deserialized, [1, undefined, '2', undefined]); }); it('handles multiple undefined values', async () => { @@ -501,7 +500,7 @@ describe('serialize deserialize', function () { }), ); const deserialized = await deserialize(serialized); - expect(deserialized).to.eql({ + assert.deepStrictEqual(deserialized, { a: { a1: undefined, a2: undefined, a3: { x: undefined } }, b: undefined, c: { q: [1, undefined] }, @@ -513,7 +512,7 @@ describe('serialize deserialize', function () { (window as any)._serialize(new Promise(resolve => resolve(1))), ); const deserialized = await deserialize(serialized); - expect(deserialized).to.eql('Promise { }'); + assert.deepStrictEqual(deserialized, 'Promise { }'); }); it('handles errors thrown during serialization', async () => { @@ -525,6 +524,6 @@ describe('serialize deserialize', function () { }), ); const deserialized = await deserialize(serialized); - expect(deserialized).to.eql(null); + assert.deepStrictEqual(deserialized, null); }); }); diff --git a/packages/config-loader/index.mjs b/packages/config-loader/index.mjs deleted file mode 100644 index 95dbe7a033..0000000000 --- a/packages/config-loader/index.mjs +++ /dev/null @@ -1,4 +0,0 @@ -import cjsModule from './src/index.js'; - -const { readConfig, ConfigLoaderError } = cjsModule; -export { readConfig, ConfigLoaderError }; diff --git a/packages/config-loader/package.json b/packages/config-loader/package.json index 5e87c01312..1c29d02f76 100644 --- a/packages/config-loader/package.json +++ b/packages/config-loader/package.json @@ -14,19 +14,17 @@ "author": "modern-web", "homepage": "https://github.com/modernweb-dev/web/tree/master/packages/config-loader", "main": "src/index.js", - "type": "commonjs", "engines": { - "node": ">=18.0.0" + "node": ">=24.0.0" }, "scripts": { "build": "tsc", - "test:node": "mocha test/**/*.test.js --reporter dot", - "test:watch": "mocha test/**/*.test.js --watch --watch-files .,src,test --reporter dot" + "test:node": "node --experimental-transform-types --test --test-force-exit --test-timeout 120000 'test/**/*.test.mjs'", + "test:watch": "node --experimental-transform-types --test --test-force-exit --watch 'test/**/*.test.mjs'" }, "files": [ "*.d.ts", "*.js", - "*.mjs", "dist", "src" ], @@ -42,9 +40,8 @@ "types": "dist/index.d.ts", "exports": { ".": { - "types": "./index.d.ts", - "import": "./index.mjs", - "require": "./src/index.js" + "types": "./dist/index.d.ts", + "default": "./src/index.js" } } } diff --git a/packages/config-loader/test/fixtures/package-cjs/package.json b/packages/config-loader/test/fixtures/package-cjs/package.json new file mode 100644 index 0000000000..5bbefffbab --- /dev/null +++ b/packages/config-loader/test/fixtures/package-cjs/package.json @@ -0,0 +1,3 @@ +{ + "type": "commonjs" +} diff --git a/packages/config-loader/test/index.test.mjs b/packages/config-loader/test/index.test.mjs new file mode 100644 index 0000000000..b41db08c84 --- /dev/null +++ b/packages/config-loader/test/index.test.mjs @@ -0,0 +1,158 @@ +import assert from 'node:assert/strict'; +import { describe, it } from 'node:test'; +import path from 'path'; +import { readConfig } from '../src/index.js'; + +const __dirname = import.meta.dirname; +const configName = 'my-project.config'; +const packageCjsPath = path.resolve(__dirname, 'fixtures', 'package-cjs'); +const packageMjsPath = path.resolve(__dirname, 'fixtures', 'package-mjs'); + +async function expectThrowsOldNodeError(configPath) { + let thrown = false; + try { + await readConfig(configName, undefined, configPath); + } catch (error) { + thrown = true; + assert.ok(error.message.includes( + 'You are trying to load a config as es module but your version of node does not support it', + )); + } + assert.strictEqual(thrown, true); +} + +describe('cjs package', () => { + it('can load commonjs-in-.cjs', async () => { + const result = await readConfig( + configName, + undefined, + path.resolve(packageCjsPath, 'commonjs-in-.cjs'), + ); + assert.deepStrictEqual(result, { foo: 'bar' }); + }); + + it('can load commonjs-in-.js', async () => { + const result = await readConfig( + configName, + undefined, + path.resolve(packageCjsPath, 'commonjs-in-.js'), + ); + assert.deepStrictEqual(result, { foo: 'bar' }); + }); + + it('can load module-in-.mjs', async () => { + const result = await readConfig( + configName, + undefined, + path.resolve(packageCjsPath, 'module-in-.mjs'), + ); + assert.deepStrictEqual(result, { foo: 'bar' }); + }); + + it('throws when loading module-in-.cjs', async () => { + let thrown = false; + try { + await readConfig(configName, undefined, path.resolve(packageCjsPath, 'module-in-.cjs')); + } catch (error) { + thrown = true; + assert.ok(error.message.includes( + 'You are using es module syntax in a config loaded as CommonJS module.', + )); + } + assert.strictEqual(thrown, true); + }); + + it('throws when loading module-in-.js', async () => { + let thrown = false; + try { + await readConfig(configName, undefined, path.resolve(packageCjsPath, 'module-in-.js')); + } catch (error) { + thrown = true; + assert.ok(error.message.includes( + 'You are using es module syntax in a config loaded as CommonJS module.', + )); + } + assert.strictEqual(thrown, true); + }); + + it('throws when loading commonjs-in-.mjs', async () => { + let thrown = false; + try { + await readConfig(configName, undefined, path.resolve(packageCjsPath, 'commonjs-in-.mjs')); + } catch (error) { + thrown = true; + assert.ok(error.message.includes( + 'You are using CommonJS syntax such as "require" or "module.exports" in a config loaded as es module.', + )); + } + assert.strictEqual(thrown, true); + }); +}); + +describe('mjs package', () => { + it('can load commonjs-in-.cjs', async () => { + const result = await readConfig( + configName, + undefined, + path.resolve(packageMjsPath, 'commonjs-in-.cjs'), + ); + assert.deepStrictEqual(result, { foo: 'bar' }); + }); + + it('throws when loading commonjs-in-.js', async () => { + let thrown = false; + try { + await readConfig(configName, undefined, path.resolve(packageMjsPath, 'commonjs-in-.js')); + } catch (error) { + thrown = true; + assert.ok(error.message.includes( + 'You are using CommonJS syntax such as "require" or "module.exports" in a config loaded as es module.', + )); + } + assert.strictEqual(thrown, true); + }); + + it('throws when loading commonjs-in-.mjs', async () => { + let thrown = false; + try { + await readConfig(configName, undefined, path.resolve(packageMjsPath, 'commonjs-in-.mjs')); + } catch (error) { + thrown = true; + assert.ok(error.message.includes( + 'You are using CommonJS syntax such as "require" or "module.exports" in a config loaded as es module.', + )); + } + assert.strictEqual(thrown, true); + }); + + it('throws when loading module-in-.cjs', async () => { + let thrown = false; + try { + await readConfig(configName, undefined, path.resolve(packageCjsPath, 'module-in-.cjs')); + } catch (error) { + thrown = true; + assert.ok(error.message.includes( + 'You are using es module syntax in a config loaded as CommonJS module.', + )); + } + assert.strictEqual(thrown, true); + }); + + it('can load module-in-.js', async () => { + const result = await readConfig( + configName, + undefined, + path.resolve(packageMjsPath, 'module-in-.js'), + ); + assert.deepStrictEqual(result, { foo: 'bar' }); + }); + + it('can load module-in-.mjs', async () => { + const result = await readConfig( + configName, + undefined, + path.resolve(packageMjsPath, 'module-in-.mjs'), + ); + assert.deepStrictEqual(result, { foo: 'bar' }); + }); +}); diff --git a/packages/dev-server-core/index.mjs b/packages/dev-server-core/index.mjs deleted file mode 100644 index 784062c2e2..0000000000 --- a/packages/dev-server-core/index.mjs +++ /dev/null @@ -1,34 +0,0 @@ -// this file is autogenerated with the generate-mjs-dts-entrypoints script -import cjsEntrypoint from './dist/index.js'; - -const { - FSWatcher, - Koa, - Server, - WebSocket, - DevServer, - WebSocketsManager, - getRequestBrowserPath, - getRequestFilePath, - getResponseBody, - getHtmlPath, - isInlineScriptRequest, - PluginSyntaxError, - PluginError, -} = cjsEntrypoint; - -export { - FSWatcher, - Koa, - Server, - WebSocket, - DevServer, - WebSocketsManager, - getRequestBrowserPath, - getRequestFilePath, - getResponseBody, - getHtmlPath, - isInlineScriptRequest, - PluginSyntaxError, - PluginError, -}; diff --git a/packages/dev-server-core/package.json b/packages/dev-server-core/package.json index 549d96b291..64accca477 100644 --- a/packages/dev-server-core/package.json +++ b/packages/dev-server-core/package.json @@ -1,6 +1,5 @@ { "name": "@web/dev-server-core", - "type": "module", "version": "0.7.5", "publishConfig": { "access": "public" @@ -27,10 +26,6 @@ "./test-helpers": { "types": "./test-helpers.d.ts", "default": "./dist/test-helpers.js" - }, - "./test-helpers.js": { - "types": "./test-helpers.d.ts", - "default": "./dist/test-helpers.js" } }, "engines": { @@ -60,8 +55,8 @@ "core" ], "dependencies": { - "@types/koa": "^3.0.1", - "@types/ws": "^8.5.13", + "@types/koa": "^2.11.6", + "@types/ws": "^7.4.0", "@web/parse5-utils": "^2.1.0", "chokidar": "^4.0.1", "clone": "^2.1.2", @@ -69,7 +64,7 @@ "get-stream": "^6.0.0", "is-stream": "^2.0.0", "isbinaryfile": "^5.0.0", - "koa": "^3.1.1", + "koa": "^2.16.1", "koa-etag": "^4.0.0", "koa-send": "^5.0.1", "koa-static": "^5.0.0", @@ -77,15 +72,17 @@ "mime-types": "^2.1.27", "parse5": "^6.0.1", "picomatch": "^2.2.2", - "ws": "^8.18.3" + "ws": "^7.5.10" }, "devDependencies": { "@types/clone": "^2.1.0", - "@types/koa-etag": "^3.0.4", - "@types/koa-static": "^4.0.4", + "@types/koa-etag": "^3.0.0", + "@types/koa-static": "^4.0.1", + "@types/parse5": "^6.0.1", "abort-controller": "^3.0.0", "express": "^4.21.2", "nanoid": "^3.1.25", "portfinder": "^1.0.32" - } + }, + "type": "module" } diff --git a/packages/dev-server-core/src/index.ts b/packages/dev-server-core/src/index.ts index 648b3c019b..e1b57375ba 100644 --- a/packages/dev-server-core/src/index.ts +++ b/packages/dev-server-core/src/index.ts @@ -1,14 +1,15 @@ // reexports of types from internal libraries export { FSWatcher } from 'chokidar'; -export { default as Koa, Context, Middleware } from 'koa'; -export { Server } from 'net'; +export { default as Koa } from 'koa'; +export type { Context, Middleware } from 'koa'; +export type { Server } from 'net'; import WebSocket from 'ws'; export { WebSocket }; export { DevServer } from './server/DevServer.ts'; -export { Plugin, ServerStartParams, ResolveOptions } from './plugins/Plugin.ts'; -export { DevServerCoreConfig, MimeTypeMappings } from './server/DevServerCoreConfig.ts'; -export { WebSocketsManager, WebSocketData } from './web-sockets/WebSocketsManager.ts'; +export type { Plugin, ServerStartParams, ResolveOptions } from './plugins/Plugin.ts'; +export type { DevServerCoreConfig, MimeTypeMappings } from './server/DevServerCoreConfig.ts'; +export { WebSocketsManager } from './web-sockets/WebSocketsManager.ts'; export { getRequestBrowserPath, getRequestFilePath, @@ -16,6 +17,7 @@ export { getHtmlPath, isInlineScriptRequest, } from './utils.ts'; -export { Logger, ErrorWithLocation } from './logger/Logger.ts'; +export type { Logger, ErrorWithLocation } from './logger/Logger.ts'; export { PluginSyntaxError } from './logger/PluginSyntaxError.ts'; export { PluginError } from './logger/PluginError.ts'; +export type { WebSocketData } from './web-sockets/WebSocketsManager.ts'; diff --git a/packages/dev-server-core/src/server/createServer.ts b/packages/dev-server-core/src/server/createServer.ts index 3926f38936..4f11b66297 100644 --- a/packages/dev-server-core/src/server/createServer.ts +++ b/packages/dev-server-core/src/server/createServer.ts @@ -67,7 +67,7 @@ export function createServer( let server: Server; if (cfg.http2) { - const dir = path.join(__dirname, '..'); + const dir = path.join(import.meta.dirname, '..'); const options = { key: fs.readFileSync( cfg.sslKey diff --git a/packages/dev-server-core/src/test-helpers.ts b/packages/dev-server-core/src/test-helpers.ts index 989d0f03ae..f0f4bb8afa 100644 --- a/packages/dev-server-core/src/test-helpers.ts +++ b/packages/dev-server-core/src/test-helpers.ts @@ -3,9 +3,9 @@ import { expect } from 'chai'; import { green, red, yellow } from 'nanocolors'; import { DevServer } from './server/DevServer.ts'; -import { DevServerCoreConfig } from './server/DevServerCoreConfig.ts'; -import { Logger } from './logger/Logger.ts'; -import { Plugin } from './plugins/Plugin.ts'; +import { type DevServerCoreConfig } from './server/DevServerCoreConfig.ts'; +import { type Logger } from './logger/Logger.ts'; +import { type Plugin } from './plugins/Plugin.ts'; const defaultConfig: OmitHello world
');
+ const myDiv = utils.findElement(doc, e => getAttribute(e, 'id') === 'myDiv');
+ if (!myDiv) throw new Error();
+ assert.strictEqual(getTextContent(myDiv), 'Hello world');
+ });
+
+ it('returns multiple nodes text', () => {
+ const doc = parse(
+ 'Top level
',
+ );
+ const myDiv = utils.findElement(doc, e => getAttribute(e, 'id') === 'myDiv');
+ if (!myDiv) throw new Error();
+ assert.strictEqual(getTextContent(myDiv), 'Top levelBeforeABAfter');
+ });
+ });
+
+ describe('setTextContent()', () => {
+ it('sets the text of an element', () => {
+ const doc = parse('');
+ const el = utils.createElement('script');
+ utils.setTextContent(el, 'foo bar');
+ utils.appendChild(doc, el);
+ assert.strictEqual(
+ serialize(doc),
+ '',
+ );
+ });
+ });
+
+ describe('remove()', () => {
+ it('removes element from the AST', () => {
+ const doc = parse('');
+ const div = findElement(doc, e => utils.getAttribute(e, 'id') === 'myDiv');
+ if (!div) throw new Error('element not found');
+ utils.remove(div);
+ assert.strictEqual(serialize(doc), '');
+ });
+ });
+
+ describe('findElement()', () => {
+ it('returns a matching element', () => {
+ const doc = parse(`
+
+
+
+
+
+
+
+ `);
+ const found = utils.findElement(doc, el => utils.getAttribute(el, 'foo') === '2');
+ if (!found) {
+ throw new Error('No element found.');
+ }
+ assert.strictEqual(utils.getAttribute(found, 'foo'), '2');
+ });
+
+ it('returns the first match', () => {
+ const doc = parse(`
+
+
+
+
+
+
+
+ `);
+ const found = utils.findElement(doc, el => utils.getAttribute(el, 'foo') === 'bar');
+ if (!found) {
+ throw new Error('No element found.');
+ }
+ assert.strictEqual(utils.getAttribute(found, 'foo'), 'bar');
+ assert.strictEqual(utils.getAttribute(found, 'index'), '1');
+ });
+
+ it('returns nested elements', () => {
+ const doc = parse(`
+
+
+ Before
A
B
After
+
+
+
+
+
+
+ `);
+ const found = utils.findElement(doc, el => utils.getAttribute(el, 'id') === 'foo');
+ if (!found) {
+ throw new Error('No element found.');
+ }
+ assert.ok(found);
+ });
+ });
+
+ describe('findElements()', () => {
+ it('returns a single matched element', () => {
+ const doc = parse(`
+
+
+
+
+
+
+
+ `);
+ const found = utils.findElements(doc, el => utils.getAttribute(el, 'foo') === '2');
+ assert.strictEqual(found.length, 1);
+ assert.strictEqual(utils.getAttribute(found[0], 'foo'), '2');
+ });
+
+ it('returns multiple matched elements', () => {
+ const doc = parse(`
+
+
+
+
+
+
+
+ `);
+ const found = utils.findElements(doc, el => utils.getAttribute(el, 'foo') === 'bar');
+ assert.strictEqual(found.length, 3);
+ const indices = found.map(f => utils.getAttribute(f, 'index'));
+ assert.deepStrictEqual(indices, ['1', '2', '3']);
+ });
+
+ it('returns an empty array when there are no matches', () => {
+ const doc = parse(`
+
+
+
+
+
+
+
+ `);
+ const found = utils.findElements(doc, el => utils.hasAttribute(el, 'non-existing'));
+ assert.strictEqual(found.length, 0);
+ });
+
+ it('returns child elements within template elements', () => {
+ const doc = parse(`
+
+
+
+
+
+
+ Hello world
+ 
+
+
+
+ `);
+
+ const found = utils.findElements(doc, el => utils.hasAttribute(el, 'src'));
+ assert.strictEqual(found.length, 1);
+ });
+ });
+
+ describe('prependToDocument', () => {
+ it('injects a HTML snippet to the document', () => {
+ const document = '';
+ const result = utils.prependToDocument(document, 'Hello world
');
+ if (!result) throw new Error();
+ assert.strictEqual(result, 'Hello world
');
+ });
+
+ it('injects before other elements', () => {
+ const document =
+ 'A
B
C
';
+ const result = utils.prependToDocument(document, 'Hello world
');
+ if (!result) throw new Error();
+ assert.strictEqual(
+ result,
+ 'Hello world
A
B
C
',
+ );
+ });
+
+ it('injects into body if there is no head', () => {
+ const document = 'A
';
+ const result = utils.prependToDocument(document, 'Hello world
');
+ if (!result) throw new Error();
+ assert.strictEqual(result, 'Hello world
A
');
+ });
+
+ it('uses AST manipulation if there is no head or body', () => {
+ const document = '';
+ const result = utils.prependToDocument(document, 'A
B
');
+ assert.strictEqual(result, 'A
B
');
+ });
+ });
+
+ describe('appendToDocument', () => {
+ it('injects a HTML snippet to the document', () => {
+ const document = '';
+ const result = utils.appendToDocument(document, 'Hello world
');
+ if (!result) throw new Error();
+ assert.strictEqual(result, 'Hello world
');
+ });
+
+ it('injects after other elements', () => {
+ const document =
+ '';
+ const result = utils.appendToDocument(document, 'Hello world
');
+ if (!result) throw new Error();
+ assert.strictEqual(
+ result,
+ 'Hello world
',
+ );
+ });
+
+ it('injects into head if there is no body', () => {
+ const document = '';
+ const result = utils.appendToDocument(document, 'Hello world
');
+ if (!result) throw new Error();
+ assert.strictEqual(
+ result,
+ 'Hello world
',
+ );
+ });
+
+ it('returns null if there is no head or body', () => {
+ const document = '';
+ const result = utils.appendToDocument(document, 'A
B
');
+ assert.strictEqual(result, 'A
B
');
+ });
+ });
+});
diff --git a/packages/polyfills-loader/index.mjs b/packages/polyfills-loader/index.mjs
deleted file mode 100644
index 3dd11914bc..0000000000
--- a/packages/polyfills-loader/index.mjs
+++ /dev/null
@@ -1,20 +0,0 @@
-// this file is autogenerated with the generate-mjs-dts-entrypoints script
-import cjsEntrypoint from './dist/index.js';
-
-const {
- createPolyfillsData,
- createPolyfillsLoader,
- injectPolyfillsLoader,
- hasFileOfType,
- fileTypes,
- getScriptFileType,
-} = cjsEntrypoint;
-
-export {
- createPolyfillsData,
- createPolyfillsLoader,
- injectPolyfillsLoader,
- hasFileOfType,
- fileTypes,
- getScriptFileType,
-};
diff --git a/packages/polyfills-loader/package.json b/packages/polyfills-loader/package.json
index 1b100c3af4..b91c6570f8 100644
--- a/packages/polyfills-loader/package.json
+++ b/packages/polyfills-loader/package.json
@@ -1,6 +1,5 @@
{
"name": "@web/polyfills-loader",
- "type": "module",
"version": "2.3.1",
"publishConfig": {
"access": "public"
@@ -26,9 +25,9 @@
},
"scripts": {
"build": "tsc",
- "test:node": "mocha \"test/**/*.test.{ts,js,mjs,cjs}\" --require ts-node/register --reporter dot",
- "test:update-snapshots": "mocha \"test/**/*.test.{ts,js,mjs,cjs}\" --require ts-node/register --update-snapshots",
- "test:watch": "mocha \"test/**/*.test.{ts,js,mjs,cjs}\" --require ts-node/register --watch --watch-files src,test"
+ "test:node": "node --experimental-transform-types --test --test-force-exit --test-timeout 120000 test/**/*.test.ts",
+ "test:update-snapshots": "node --experimental-transform-types --test --test-force-exit --test-timeout 120000 test/**/*.test.ts",
+ "test:watch": "node --experimental-transform-types --test --test-force-exit --watch test/**/*.test.ts"
},
"files": [
"*.d.ts",
@@ -67,6 +66,8 @@
},
"devDependencies": {
"@types/babel__core": "^7.1.12",
+ "@types/parse5": "^6.0.1",
"@types/valid-url": "^1.0.3"
- }
+ },
+ "type": "module"
}
diff --git a/packages/polyfills-loader/src/createPolyfillsData.ts b/packages/polyfills-loader/src/createPolyfillsData.ts
index d2172d39a8..447fd72074 100644
--- a/packages/polyfills-loader/src/createPolyfillsData.ts
+++ b/packages/polyfills-loader/src/createPolyfillsData.ts
@@ -1,4 +1,5 @@
import path from 'path';
+import { fileURLToPath } from 'node:url';
import fs from 'fs';
import { minify } from 'terser';
import type { PolyfillsLoaderConfig, PolyfillConfig, PolyfillFile } from './types.ts';
@@ -25,47 +26,61 @@ export async function createPolyfillsData(cfg: PolyfillsLoaderConfig): Promiseimport(s);').call(); return false; } catch (_) { return true; } })()", - path: require.resolve('dynamic-import-polyfill/dist/dynamic-import-polyfill.umd.js'), + path: fileURLToPath(dynamicImportPath), initializer: "window.dynamicImportPolyfill.initialize({ importFunctionName: 'importShim' });", }); } if (polyfills.intersectionObserver) { + const intersectionObserverPath = await import.meta + .resolve('intersection-observer/intersection-observer.js'); addPolyfillConfig({ name: 'intersection-observer', test: "!('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype)", - path: require.resolve('intersection-observer/intersection-observer.js'), + path: fileURLToPath(intersectionObserverPath), minify: true, }); } if (polyfills.resizeObserver) { + const resizeObserverPath = await import.meta + .resolve('resize-observer-polyfill/dist/ResizeObserver.global.js'); addPolyfillConfig({ name: 'resize-observer', test: "!('ResizeObserver' in window)", - path: require.resolve('resize-observer-polyfill/dist/ResizeObserver.global.js'), + path: fileURLToPath(resizeObserverPath), minify: true, }); } if (polyfills.scopedCustomElementRegistry) { + const scopedRegistryPath = await import.meta + .resolve('@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js'); addPolyfillConfig({ name: 'scoped-custom-element-registry', test: "!('createElement' in ShadowRoot.prototype)", - path: require.resolve('@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js'), + path: fileURLToPath(scopedRegistryPath), }); } if (polyfills.webcomponents && !polyfills.shadyCssCustomStyle) { + const webcomponentsPath = await import.meta + .resolve('@webcomponents/webcomponentsjs/webcomponents-bundle.js'); addPolyfillConfig({ name: 'webcomponents', test: "!('attachShadow' in Element.prototype) || !('getRootNode' in Element.prototype) || (window.ShadyDOM && window.ShadyDOM.force)", - path: require.resolve('@webcomponents/webcomponentsjs/webcomponents-bundle.js'), + path: fileURLToPath(webcomponentsPath), }); // If a browser does not support nomodule attribute, but does support custom elements, we need // to load the custom elements es5 adapter. This is the case for Safari 10.1 + const es5AdapterPath = await import.meta + .resolve('@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'); addPolyfillConfig({ name: 'custom-elements-es5-adapter', test: "!('noModule' in HTMLScriptElement.prototype) && 'getRootNode' in Element.prototype", - path: require.resolve('@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'), + path: fileURLToPath(es5AdapterPath), }); } @@ -182,13 +206,20 @@ export async function createPolyfillsData(cfg: PolyfillsLoaderConfig): Promise
{ const polyfillFiles = await createPolyfillsData(config); for (const p of polyfillFiles) { - expect(p.content).to.be.a('string', `Polyfill ${p.name} has no content`); + assert.strictEqual(typeof p.content, 'string', `Polyfill ${p.name} has no content`); cleanupPolyfill(p); } - expect(polyfillFiles).to.eql([ + assert.deepStrictEqual(polyfillFiles, [ { name: 'core-js', type: fileTypes.SCRIPT, @@ -138,11 +141,11 @@ describe('polyfills', () => { }; const polyfillFiles = await createPolyfillsData(config); for (const p of polyfillFiles) { - expect(p.content).to.be.a('string', `Polyfill ${p.name} has no content`); + assert.strictEqual(typeof p.content, 'string', `Polyfill ${p.name} has no content`); cleanupPolyfill(p); } - expect(polyfillFiles).to.eql([ + assert.deepStrictEqual(polyfillFiles, [ { name: 'fetch', path: 'polyfills/fetch.js', @@ -165,11 +168,11 @@ describe('polyfills', () => { const polyfillFiles = await createPolyfillsData(config); for (const p of polyfillFiles) { - expect(p.content).to.be.a('string', `Polyfill ${p.name} has no content`); + assert.strictEqual(typeof p.content, 'string', `Polyfill ${p.name} has no content`); cleanupPolyfill(p); } - expect(polyfillFiles).to.eql([ + assert.deepStrictEqual(polyfillFiles, [ { name: 'webcomponents-shady-css-custom-style', type: fileTypes.SCRIPT, @@ -197,11 +200,11 @@ describe('polyfills', () => { const polyfillFiles = await createPolyfillsData(config); for (const p of polyfillFiles) { - expect(p.content).to.be.a('string', `Polyfill ${p.name} has no content`); + assert.strictEqual(typeof p.content, 'string', `Polyfill ${p.name} has no content`); cleanupPolyfill(p); } - expect(polyfillFiles).to.eql([ + assert.deepStrictEqual(polyfillFiles, [ { name: 'systemjs', type: fileTypes.SCRIPT, @@ -232,11 +235,11 @@ describe('polyfills', () => { const polyfillFiles = await createPolyfillsData(config); for (const p of polyfillFiles) { - expect(p.content).to.be.a('string', `Polyfill ${p.name} has no content`); + assert.strictEqual(typeof p.content, 'string', `Polyfill ${p.name} has no content`); cleanupPolyfill(p); } - expect(polyfillFiles).to.eql([ + assert.deepStrictEqual(polyfillFiles, [ { name: 'systemjs', type: fileTypes.SCRIPT, @@ -257,11 +260,11 @@ describe('polyfills', () => { const polyfillFiles = await createPolyfillsData(config); for (const p of polyfillFiles) { - expect(p.content).to.be.a('string', `Polyfill ${p.name} has no content`); + assert.strictEqual(typeof p.content, 'string', `Polyfill ${p.name} has no content`); cleanupPolyfill(p); } - expect(polyfillFiles).to.eql([ + assert.deepStrictEqual(polyfillFiles, [ { name: 'systemjs', type: fileTypes.SCRIPT, @@ -300,11 +303,11 @@ describe('polyfills', () => { const polyfillFiles = await createPolyfillsData(config); for (const p of polyfillFiles) { - expect(p.content).to.be.a('string', `Polyfill ${p.name} has no content`); + assert.strictEqual(typeof p.content, 'string', `Polyfill ${p.name} has no content`); cleanupPolyfill(p); } - expect(polyfillFiles).to.eql([ + assert.deepStrictEqual(polyfillFiles, [ { name: 'core-js', type: fileTypes.SCRIPT, @@ -338,11 +341,11 @@ describe('polyfills', () => { const polyfillFiles = await createPolyfillsData(config); for (const p of polyfillFiles) { - expect(p.content).to.be.a('string', `Polyfill ${p.name} has no content`); + assert.strictEqual(typeof p.content, 'string', `Polyfill ${p.name} has no content`); cleanupPolyfill(p); } - expect(polyfillFiles).to.eql([ + assert.deepStrictEqual(polyfillFiles, [ { name: 'systemjs', type: fileTypes.SCRIPT, diff --git a/packages/polyfills-loader/test/createPolyfillsLoader.test.ts b/packages/polyfills-loader/test/createPolyfillsLoader.test.ts index f3397978ec..0e66df7628 100644 --- a/packages/polyfills-loader/test/createPolyfillsLoader.test.ts +++ b/packages/polyfills-loader/test/createPolyfillsLoader.test.ts @@ -1,10 +1,12 @@ -import { expect } from 'chai'; +import assert from 'node:assert/strict'; +import { describe, it } from 'node:test'; import fs from 'fs'; import path from 'path'; -import { PolyfillsLoaderConfig } from '../src/types.ts'; +import type { PolyfillsLoaderConfig } from '../src/types.ts'; import { createPolyfillsLoader } from '../src/createPolyfillsLoader.ts'; import { noModuleSupportTest, fileTypes } from '../src/utils.ts'; +const __dirname = import.meta.dirname; const updateSnapshots = process.argv.includes('--update-snapshots'); interface TestSnapshotArgs { @@ -20,20 +22,20 @@ async function testSnapshot({ name, config, expectedFiles = [] }: TestSnapshotAr throw new Error('No loader was generated'); } - expect(loader.polyfillFiles.map(f => f.path)).to.eql(expectedFiles); + assert.deepStrictEqual( + loader.polyfillFiles.map(f => f.path), + expectedFiles, + ); if (updateSnapshots) { fs.writeFileSync(snapshotPath, loader.code, 'utf-8'); } else { const snapshot = fs.readFileSync(snapshotPath, 'utf-8'); - expect(loader.code.trim()).to.equal(snapshot.trim()); + assert.strictEqual(loader.code.trim(), snapshot.trim()); } } describe('createPolyfillsLoader', function describe() { - // bootup of the first test can take a long time in CI to load all the polyfills - this.timeout(5000); - it('generates a loader script with one module resource', async () => { await testSnapshot({ name: 'module-resource', diff --git a/packages/polyfills-loader/test/injectPolyfillsLoader.test.ts b/packages/polyfills-loader/test/injectPolyfillsLoader.test.ts index 5da46fa1da..189d531c17 100644 --- a/packages/polyfills-loader/test/injectPolyfillsLoader.test.ts +++ b/packages/polyfills-loader/test/injectPolyfillsLoader.test.ts @@ -1,10 +1,12 @@ -import { expect } from 'chai'; +import assert from 'node:assert/strict'; +import { describe, it } from 'node:test'; import path from 'path'; import fs from 'fs'; import { injectPolyfillsLoader } from '../src/injectPolyfillsLoader.ts'; import { noModuleSupportTest, fileTypes } from '../src/utils.ts'; -import { PolyfillsLoaderConfig } from '../src/types.ts'; +import type { PolyfillsLoaderConfig } from '../src/types.ts'; +const __dirname = import.meta.dirname; const updateSnapshots = process.argv.includes('--update-snapshots'); const defaultConfig = { @@ -22,7 +24,7 @@ async function testSnapshot(name: string, htmlString: string, config: PolyfillsL fs.writeFileSync(snapshotPath, result.htmlString, 'utf-8'); } else { const snapshot = fs.readFileSync(snapshotPath, 'utf-8'); - expect(result.htmlString.trim()).to.equal(snapshot.trim()); + assert.strictEqual(result.htmlString.trim(), snapshot.trim()); } } diff --git a/packages/polyfills-loader/test/snapshots/createPolyfillsLoader/minified.js b/packages/polyfills-loader/test/snapshots/createPolyfillsLoader/minified.js index ca5e3c2d4d..b9fcdf749f 100644 --- a/packages/polyfills-loader/test/snapshots/createPolyfillsLoader/minified.js +++ b/packages/polyfills-loader/test/snapshots/createPolyfillsLoader/minified.js @@ -1 +1 @@ -!function(){function e(e,t,n){return new Promise((function(o){var r=document.createElement("script");function i(){r.parentElement&&r.parentElement.removeChild(r),o()}r.fetchPriority="high",r.src=e,r.onload=i,n&&n.forEach((function(e){r.setAttribute(e.name,e.value)})),r.onerror=function(){console.error("[polyfills-loader] failed to load: "+e+" check the network tab for HTTP status."),i()},t&&(r.type=t),document.head.appendChild(r)}))}var t=[];function n(){e("/app.js","module",[])}"fetch"in window||t.push(e("./polyfills/fetch.js")),t.length?Promise.all(t).then(n):n()}(); \ No newline at end of file +!function(){function e(e,t,n){return new Promise(function(o){var r=document.createElement("script");function i(){r.parentElement&&r.parentElement.removeChild(r),o()}r.fetchPriority="high",r.src=e,r.onload=i,n&&n.forEach(function(e){r.setAttribute(e.name,e.value)}),r.onerror=function(){console.error("[polyfills-loader] failed to load: "+e+" check the network tab for HTTP status."),i()},t&&(r.type=t),document.head.appendChild(r)})}var t=[];function n(){e("/app.js","module",[])}"fetch"in window||t.push(e("./polyfills/fetch.js")),t.length?Promise.all(t).then(n):n()}(); \ No newline at end of file diff --git a/packages/rollup-plugin-copy/index.mjs b/packages/rollup-plugin-copy/index.mjs deleted file mode 100644 index a8d2bc082c..0000000000 --- a/packages/rollup-plugin-copy/index.mjs +++ /dev/null @@ -1,5 +0,0 @@ -import cjsEntrypoint from './src/copy.js'; - -const { copy } = cjsEntrypoint; - -export { copy }; diff --git a/packages/rollup-plugin-copy/package.json b/packages/rollup-plugin-copy/package.json index 268b25a6c7..17239dee90 100644 --- a/packages/rollup-plugin-copy/package.json +++ b/packages/rollup-plugin-copy/package.json @@ -20,22 +20,20 @@ "module": "index.mjs", "exports": { ".": { - "types": "./index.d.ts", - "import": "./index.mjs", - "require": "./src/copy.js" + "types": "./dist/copy.d.ts", + "default": "./src/copy.js" } }, "engines": { - "node": ">=18.0.0" + "node": ">=24.0.0" }, "scripts": { - "test:node": "mocha test/**/*.test.js --reporter dot", - "test:watch": "mocha test/**/*.test.js --watch --watch-files src,test --reporter dot" + "test:node": "node --experimental-transform-types --test --test-force-exit --test-timeout 120000 'test/**/*.test.mjs'", + "test:watch": "npm run test:node -- --watch" }, "files": [ "*.d.ts", "*.js", - "*.mjs", "dist", "src" ], diff --git a/packages/rollup-plugin-copy/test/integration.test.js b/packages/rollup-plugin-copy/test/integration.test.js deleted file mode 100644 index c4e5900d98..0000000000 --- a/packages/rollup-plugin-copy/test/integration.test.js +++ /dev/null @@ -1,23 +0,0 @@ -const path = require('path'); -const { expect } = require('chai'); -const rollup = require('rollup'); - -const { copy } = require('../src/copy.js'); - -describe('rollup-plugin-copy', () => { - it('adds files to rollup', async () => { - const bundle = await rollup.rollup({ - input: path.resolve(__dirname, './fixture/index.js'), - plugins: [copy({ patterns: '**/*.svg', rootDir: path.resolve(__dirname, './fixture/') })], - }); - const { output } = await bundle.generate({ format: 'es' }); - - expect(output.length).to.equal(5); - expect(output.map(x => x.fileName).filter(x => x.endsWith('.svg'))).to.have.members([ - 'a.svg', - 'b.svg', - `sub${path.sep}sub-a.svg`, - `sub${path.sep}sub-b.mark.svg`, - ]); - }); -}); diff --git a/packages/rollup-plugin-copy/test/integration.test.mjs b/packages/rollup-plugin-copy/test/integration.test.mjs new file mode 100644 index 0000000000..167e48baec --- /dev/null +++ b/packages/rollup-plugin-copy/test/integration.test.mjs @@ -0,0 +1,31 @@ +import path from 'path'; +import assert from 'node:assert/strict'; +import { describe, it } from 'node:test'; +import { rollup } from 'rollup'; + +import { copy } from '../src/copy.js'; + +const __dirname = import.meta.dirname; + +describe('rollup-plugin-copy', () => { + it('adds files to rollup', async () => { + const bundle = await rollup({ + input: path.resolve(__dirname, './fixture/index.js'), + plugins: [copy({ patterns: '**/*.svg', rootDir: path.resolve(__dirname, './fixture/') })], + }); + const { output } = await bundle.generate({ format: 'es' }); + + assert.strictEqual(output.length, 5); + const svgFiles = output + .map(x => x.fileName) + .filter(x => x.endsWith('.svg')) + .sort(); + const expectedFiles = [ + 'a.svg', + 'b.svg', + `sub${path.sep}sub-a.svg`, + `sub${path.sep}sub-b.mark.svg`, + ].sort(); + assert.deepStrictEqual(svgFiles, expectedFiles); + }); +}); diff --git a/packages/rollup-plugin-copy/test/listFiles.test.mjs b/packages/rollup-plugin-copy/test/listFiles.test.mjs new file mode 100644 index 0000000000..3ebf511db8 --- /dev/null +++ b/packages/rollup-plugin-copy/test/listFiles.test.mjs @@ -0,0 +1,37 @@ +import path from 'path'; +import assert from 'node:assert/strict'; +import { describe, it } from 'node:test'; + +import { listFiles } from '../src/listFiles.js'; + +const __dirname = import.meta.dirname; + +describe('listFiles', () => { + it('gives a list of files', async () => { + const files = await listFiles('*.svg', path.resolve(__dirname, './fixture/')); + assert.strictEqual(files.length, 2); + const expectedFiles = [ + path.join(__dirname, './fixture/a.svg'), + path.join(__dirname, './fixture/b.svg'), + ].sort(); + assert.deepStrictEqual(files.sort(), expectedFiles); + }); + + it('only gives files and no folders', async () => { + const files = await listFiles('**/*.svg', path.resolve(__dirname, './fixture/')); + assert.strictEqual(files.length, 4); + const expectedFiles = [ + path.join(__dirname, './fixture/a.svg'), + path.join(__dirname, './fixture/b.svg'), + path.join(__dirname, './fixture/sub/sub-b.mark.svg'), + path.join(__dirname, './fixture/sub/sub-a.svg'), + ].sort(); + assert.deepStrictEqual(files.sort(), expectedFiles); + }); + + it('will copy files inside dot folders', async () => { + const files = await listFiles('**/*.svg', path.resolve(__dirname, './fixtureDot/')); + assert.strictEqual(files.length, 1); + assert.match(files[0], /fixtureDot(\/|\\)\.folder(\/|\\)inside-dot-folder\.svg$/); + }); +}); diff --git a/packages/rollup-plugin-copy/test/patternsToFiles.test.mjs b/packages/rollup-plugin-copy/test/patternsToFiles.test.mjs new file mode 100644 index 0000000000..b07f9dc6bc --- /dev/null +++ b/packages/rollup-plugin-copy/test/patternsToFiles.test.mjs @@ -0,0 +1,33 @@ +import path from 'path'; +import assert from 'node:assert/strict'; +import { describe, it } from 'node:test'; + +import { patternsToFiles } from '../src/patternsToFiles.js'; + +const __dirname = import.meta.dirname; + +describe('patternsToFiles', () => { + it('works with a string', async () => { + const files = await patternsToFiles('*.svg', path.resolve(__dirname, './fixture/')); + assert.strictEqual(files.length, 2); + const expectedFiles = [ + path.join(__dirname, './fixture/a.svg'), + path.join(__dirname, './fixture/b.svg'), + ].sort(); + assert.deepStrictEqual(files.sort(), expectedFiles); + }); + + it('works with an array of strings ', async () => { + const files = await patternsToFiles( + ['*.svg', 'sub/*.mark.svg'], + path.resolve(__dirname, './fixture/'), + ); + assert.strictEqual(files.length, 3); + const expectedFiles = [ + path.join(__dirname, './fixture/a.svg'), + path.join(__dirname, './fixture/b.svg'), + path.join(__dirname, './fixture/sub/sub-b.mark.svg'), + ].sort(); + assert.deepStrictEqual(files.sort(), expectedFiles); + }); +}); diff --git a/packages/rollup-plugin-html/index.mjs b/packages/rollup-plugin-html/index.mjs deleted file mode 100644 index 4d19d569b8..0000000000 --- a/packages/rollup-plugin-html/index.mjs +++ /dev/null @@ -1,6 +0,0 @@ -// this file is autogenerated with the generate-mjs-dts-entrypoints script -import cjsEntrypoint from './dist/index.js'; - -const { rollupPluginHTML } = cjsEntrypoint; - -export { rollupPluginHTML }; diff --git a/packages/rollup-plugin-html/package.json b/packages/rollup-plugin-html/package.json index 94fbca244a..9252ba5bfc 100644 --- a/packages/rollup-plugin-html/package.json +++ b/packages/rollup-plugin-html/package.json @@ -1,6 +1,5 @@ { "name": "@web/rollup-plugin-html", - "type": "module", "version": "3.1.0", "publishConfig": { "access": "public" @@ -28,8 +27,8 @@ "demo:mpa": "rm -rf demo/dist && rollup -c demo/mpa/rollup.config.js --watch & npm run serve-demo", "demo:spa": "rm -rf demo/dist && rollup -c demo/spa/rollup.config.js --watch & npm run serve-demo", "serve-demo": "node ../dev-server/dist/bin.js --watch --root-dir demo/dist --app-index index.html --compatibility none --open", - "test:node": "mocha test/**/*.test.ts --require ts-node/register --reporter dot", - "test:watch": "mocha test/**/*.test.ts --require ts-node/register --watch --watch-files src,test" + "test:node": "node --experimental-transform-types --test --test-force-exit --test-timeout 120000 'test/**/*.test.ts'", + "test:watch": "node --experimental-transform-types --test --test-force-exit --watch 'test/**/*.test.ts'" }, "files": [ "*.js", @@ -51,8 +50,12 @@ "picomatch": "^2.2.2" }, "devDependencies": { + "@prettier/sync": "^0.6.1", "@types/html-minifier-terser": "^7.0.0", "@types/picomatch": "^2.2.1", + "@types/prettier": "^3.0.0", + "prettier": "^3.6.2", "rollup": "^4.4.0" - } + }, + "type": "module" } diff --git a/packages/rollup-plugin-html/src/index.ts b/packages/rollup-plugin-html/src/index.ts index 0a50fedb24..9ce0df5946 100644 --- a/packages/rollup-plugin-html/src/index.ts +++ b/packages/rollup-plugin-html/src/index.ts @@ -1,4 +1,6 @@ -import { rollupPluginHTML, type RollupPluginHtml } from './rollupPluginHTML.ts'; +import { rollupPluginHTML } from './rollupPluginHTML.ts'; +import type { RollupPluginHtml } from './rollupPluginHTML.ts'; + export type { InputHTMLOptions, RollupPluginHTMLOptions, @@ -9,5 +11,6 @@ export type { TransformAssetFunction, } from './RollupPluginHTMLOptions.ts'; -export { rollupPluginHTML, type RollupPluginHtml }; +export { rollupPluginHTML }; +export type { RollupPluginHtml }; export default rollupPluginHTML; diff --git a/packages/rollup-plugin-html/src/input/extract/extractAssets.ts b/packages/rollup-plugin-html/src/input/extract/extractAssets.ts index b1dfbf4131..413ca3af83 100644 --- a/packages/rollup-plugin-html/src/input/extract/extractAssets.ts +++ b/packages/rollup-plugin-html/src/input/extract/extractAssets.ts @@ -1,7 +1,9 @@ -import { type Document, serialize } from 'parse5'; +import { serialize } from 'parse5'; +import type { Document } from 'parse5'; import fs from 'fs'; import path from 'path'; -import { type InputAsset } from '../InputData.ts';import { +import { type InputAsset } from '../InputData.ts'; +import { findAssets, getSourcePaths, isHashedAsset, diff --git a/packages/rollup-plugin-html/src/input/extract/extractModules.ts b/packages/rollup-plugin-html/src/input/extract/extractModules.ts index 97990d4f5e..566562ecd5 100644 --- a/packages/rollup-plugin-html/src/input/extract/extractModules.ts +++ b/packages/rollup-plugin-html/src/input/extract/extractModules.ts @@ -5,6 +5,7 @@ import crypto from 'crypto'; import { resolveAssetFilePath } from '../../assets/utils.ts'; import { getAttributes } from '@web/parse5-utils'; import { type ScriptModuleTag } from '../../RollupPluginHTMLOptions.ts'; + export interface ExtractModulesParams { document: Document; htmlDir: string; diff --git a/packages/rollup-plugin-html/src/output/injectedUpdatedAssetPaths.ts b/packages/rollup-plugin-html/src/output/injectedUpdatedAssetPaths.ts index e0c9c6caf3..d53b7cc574 100644 --- a/packages/rollup-plugin-html/src/output/injectedUpdatedAssetPaths.ts +++ b/packages/rollup-plugin-html/src/output/injectedUpdatedAssetPaths.ts @@ -10,8 +10,11 @@ import { resolveAssetFilePath, createAssetPicomatchMatcher, } from '../assets/utils.ts'; -import { type InputData } from '../input/InputData.ts';import { createError } from '../utils.ts'; -import { type EmittedAssets } from './emitAssets.ts';import { toBrowserPath } from './utils.ts'; +import { type InputData } from '../input/InputData.ts'; +import { createError } from '../utils.ts'; +import { type EmittedAssets } from './emitAssets.ts'; +import { toBrowserPath } from './utils.ts'; + export interface InjectUpdatedAssetPathsArgs { document: Document; input: InputData; diff --git a/packages/rollup-plugin-html/src/utils.ts b/packages/rollup-plugin-html/src/utils.ts index fa91a1c4c2..56886a08b3 100644 --- a/packages/rollup-plugin-html/src/utils.ts +++ b/packages/rollup-plugin-html/src/utils.ts @@ -1,4 +1,4 @@ -import { ScriptModuleTag } from './RollupPluginHTMLOptions.ts'; +import { type ScriptModuleTag } from './RollupPluginHTMLOptions.ts'; const PLUGIN = '[@web/rollup-plugin-html]'; diff --git a/packages/rollup-plugin-html/test/input/InputData.test.ts b/packages/rollup-plugin-html/test/input/InputData.test.ts new file mode 100644 index 0000000000..4ab3165f35 --- /dev/null +++ b/packages/rollup-plugin-html/test/input/InputData.test.ts @@ -0,0 +1,361 @@ +import assert from 'node:assert/strict'; +import { describe, it } from 'node:test'; +import path from 'path'; + +import { getInputData } from '../../src/input/getInputData.ts'; +import type { InputData } from '../../src/input/InputData.ts'; + +const __dirname = import.meta.dirname; +const rootDir = path.join(__dirname, '..', 'fixtures', 'basic'); + +function cleanupHtml(str: string) { + return str.replace(/(\r\n|\n|\r| )/gm, ''); +} + +function cleanupResult(result: InputData[]) { + return result.map(item => ({ + ...item, + inlineModules: Array.from(item.inlineModules.entries()), + html: cleanupHtml(item.html), + })); +} + +describe('getInputData()', () => { + it('supports setting input as string', () => { + const result = getInputData({ input: 'index.html', rootDir }); + assert.deepStrictEqual(cleanupResult(result), [ + { + filePath: path.join(rootDir, 'index.html'), + html: '
Helloworld
', + inlineModules: [], + moduleImports: [{ importPath: path.join(rootDir, 'app.js'), attributes: [] }], + assets: [], + name: 'index.html', + }, + ]); + }); + + it('supports setting input as object', () => { + const result = getInputData({ input: { path: 'index.html' }, rootDir }); + assert.deepStrictEqual(cleanupResult(result), [ + { + filePath: path.join(rootDir, 'index.html'), + html: 'Helloworld
', + inlineModules: [], + moduleImports: [{ importPath: path.join(rootDir, 'app.js'), attributes: [] }], + assets: [], + name: 'index.html', + }, + ]); + }); + + it('supports changing file name', () => { + const result = getInputData({ input: { path: 'index.html', name: 'foo.html' }, rootDir }); + assert.deepStrictEqual(cleanupResult(result), [ + { + filePath: path.join(rootDir, 'index.html'), + html: 'Helloworld
', + inlineModules: [], + moduleImports: [{ importPath: path.join(rootDir, 'app.js'), attributes: [] }], + assets: [], + name: 'foo.html', + }, + ]); + }); + + it('supports setting multiple inputs', () => { + const result = getInputData({ + input: [{ path: 'index.html' }, { path: 'not-index.html' }], + rootDir, + }); + assert.deepStrictEqual(cleanupResult(result), [ + { + filePath: path.join(rootDir, 'index.html'), + html: 'Helloworld
', + inlineModules: [], + moduleImports: [{ importPath: path.join(rootDir, 'app.js'), attributes: [] }], + assets: [], + name: 'index.html', + }, + { + filePath: path.join(rootDir, 'not-index.html'), + html: 'not-index.html
', + inlineModules: [], + moduleImports: [], + assets: [], + name: 'not-index.html', + }, + ]); + }); + + it('resolves modules relative to HTML file', () => { + const result = getInputData({ input: 'src/index.html', rootDir }); + assert.deepStrictEqual(cleanupResult(result), [ + { + filePath: path.join(rootDir, 'src/index.html'), + html: 'Foo
', + inlineModules: [], + moduleImports: [{ importPath: path.join(rootDir, 'src', 'foo.js'), attributes: [] }], + assets: [], + name: 'index.html', + }, + ]); + }); + + it('supports setting input as rollup input string', () => { + const result = getInputData({ rootDir }, 'index.html'); + assert.deepStrictEqual(cleanupResult(result), [ + { + filePath: path.join(rootDir, 'index.html'), + html: 'Helloworld
', + inlineModules: [], + moduleImports: [{ importPath: path.join(rootDir, 'app.js'), attributes: [] }], + assets: [], + name: 'index.html', + }, + ]); + }); + + it('supports setting input as rollup input array', () => { + const result = getInputData({ rootDir }, ['index.html']); + assert.deepStrictEqual(cleanupResult(result), [ + { + filePath: path.join(rootDir, 'index.html'), + html: 'Helloworld
', + inlineModules: [], + moduleImports: [{ importPath: path.join(rootDir, 'app.js'), attributes: [] }], + assets: [], + name: 'index.html', + }, + ]); + }); + + it('supports setting input as rollup input array', () => { + const result = getInputData({ rootDir }, ['index.html', 'not-index.html']); + assert.deepStrictEqual(cleanupResult(result), [ + { + filePath: path.join(rootDir, 'index.html'), + html: 'Helloworld
', + inlineModules: [], + moduleImports: [{ importPath: path.join(rootDir, 'app.js'), attributes: [] }], + assets: [], + name: 'index.html', + }, + { + filePath: path.join(rootDir, 'not-index.html'), + html: 'not-index.html
', + inlineModules: [], + moduleImports: [], + assets: [], + name: 'not-index.html', + }, + ]); + }); + + it('supports setting input as rollup input object', () => { + const result = getInputData( + { rootDir }, + { 'a.html': 'index.html', 'b.html': 'not-index.html' }, + ); + assert.deepStrictEqual(cleanupResult(result), [ + { + filePath: path.join(rootDir, 'index.html'), + html: 'Helloworld
', + inlineModules: [], + moduleImports: [{ importPath: path.join(rootDir, 'app.js'), attributes: [] }], + assets: [], + name: 'a.html', + }, + { + filePath: path.join(rootDir, 'not-index.html'), + html: 'not-index.html
', + inlineModules: [], + moduleImports: [], + assets: [], + name: 'b.html', + }, + ]); + }); + + it('plugin input takes presedence over rollup input', () => { + const result = getInputData({ input: 'index.html', rootDir }, 'not-index.html'); + assert.deepStrictEqual(cleanupResult(result), [ + { + filePath: path.join(rootDir, 'index.html'), + html: 'Helloworld
', + inlineModules: [], + moduleImports: [{ importPath: path.join(rootDir, 'app.js'), attributes: [] }], + assets: [], + name: 'index.html', + }, + ]); + }); + + it('can set html string as input', () => { + const html = ` + + +HTML as string
+ + + + `; + const result = getInputData({ input: { html }, rootDir }); + assert.deepStrictEqual(cleanupResult(result), [ + { + filePath: undefined, + html: 'HTMLasstring
', + inlineModules: [], + moduleImports: [{ importPath: path.join(rootDir, 'app.js'), attributes: [] }], + assets: [], + name: 'index.html', + }, + ]); + }); + + it('can set multiple html strings as input', () => { + const html1 = ` + + +HTML1
+ + + + `; + const html2 = ` + + +HTML2
+ + + `; + const result = getInputData({ + input: [ + { html: html1, name: '1.html' }, + { html: html2, name: '2.html' }, + ], + rootDir, + }); + assert.deepStrictEqual(cleanupResult(result), [ + { + filePath: undefined, + html: 'HTML1
', + inlineModules: [], + moduleImports: [{ importPath: path.join(rootDir, 'app.js'), attributes: [] }], + assets: [], + name: '1.html', + }, + { + filePath: undefined, + html: 'HTML2
', + inlineModules: [], + moduleImports: [], + assets: [], + name: '2.html', + }, + ]); + }); + + it('supports setting input to a glob', () => { + const result = getInputData({ input: 'pages/**/*.html', rootDir }); + assert.deepStrictEqual(cleanupResult(result), [ + { + filePath: path.join(rootDir, 'pages', 'page-c.html'), + html: 'page-c.html
', + inlineModules: [], + moduleImports: [ + { importPath: path.join(rootDir, 'pages', 'page-c.js'), attributes: [] }, + { importPath: path.join(rootDir, 'pages', 'shared.js'), attributes: [] }, + ], + assets: [], + name: 'page-c.html', + }, + { + filePath: path.join(rootDir, 'pages', 'page-b.html'), + html: 'page-b.html
', + inlineModules: [], + moduleImports: [ + { importPath: path.join(rootDir, 'pages', 'page-b.js'), attributes: [] }, + { importPath: path.join(rootDir, 'pages', 'shared.js'), attributes: [] }, + ], + assets: [], + name: 'page-b.html', + }, + { + filePath: path.join(rootDir, 'pages', 'page-a.html'), + html: 'page-a.html
', + inlineModules: [], + moduleImports: [ + { importPath: path.join(rootDir, 'pages', 'page-a.js'), attributes: [] }, + { importPath: path.join(rootDir, 'pages', 'shared.js'), attributes: [] }, + ], + assets: [], + name: 'page-a.html', + }, + ]); + }); + + it('supports not flattening output directories', () => { + const result = getInputData({ input: 'pages/**/*.html', flattenOutput: false, rootDir }); + assert.deepStrictEqual(cleanupResult(result), [ + { + filePath: path.join(rootDir, 'pages', 'page-c.html'), + html: 'page-c.html
', + inlineModules: [], + moduleImports: [ + { importPath: path.join(rootDir, 'pages', 'page-c.js'), attributes: [] }, + { importPath: path.join(rootDir, 'pages', 'shared.js'), attributes: [] }, + ], + assets: [], + name: `pages${path.sep}page-c.html`, + }, + { + filePath: path.join(rootDir, 'pages', 'page-b.html'), + html: 'page-b.html
', + inlineModules: [], + moduleImports: [ + { importPath: path.join(rootDir, 'pages', 'page-b.js'), attributes: [] }, + { importPath: path.join(rootDir, 'pages', 'shared.js'), attributes: [] }, + ], + assets: [], + name: `pages${path.sep}page-b.html`, + }, + { + filePath: path.join(rootDir, 'pages', 'page-a.html'), + html: 'page-a.html
', + inlineModules: [], + moduleImports: [ + { importPath: path.join(rootDir, 'pages', 'page-a.js'), attributes: [] }, + { importPath: path.join(rootDir, 'pages', 'shared.js'), attributes: [] }, + ], + assets: [], + name: `pages${path.sep}page-a.html`, + }, + ]); + }); + + it('supports pure HTML files', () => { + const html = ` + + +pure HTML
+ + + `; + const result = getInputData({ input: { html }, rootDir }); + assert.deepStrictEqual(cleanupResult(result), [ + { + filePath: undefined, + html: 'pureHTML
', + inlineModules: [], + moduleImports: [], + assets: [], + name: 'index.html', + }, + ]); + }); + + it('throws when no files or html is given', () => { + assert.throws(() => getInputData({ rootDir })); + }); +}); diff --git a/packages/rollup-plugin-html/test/input/extract/extractAssets.test.ts b/packages/rollup-plugin-html/test/input/extract/extractAssets.test.ts new file mode 100644 index 0000000000..bad52491c5 --- /dev/null +++ b/packages/rollup-plugin-html/test/input/extract/extractAssets.test.ts @@ -0,0 +1,322 @@ +import assert from 'node:assert/strict'; +import { describe, it } from 'node:test'; +import { parse } from 'parse5'; +import path from 'path'; +import { extractAssets } from '../../../src/input/extract/extractAssets.ts'; + +const __dirname = import.meta.dirname; +const rootDir = path.resolve(__dirname, '..', '..', 'fixtures', 'assets'); + +describe('extractAssets', () => { + it('extracts assets from a document', () => { + const document = parse(` + + + + + + + + + + +
+
+ 
+
+
+
+ `);
+ const assets = extractAssets({
+ document,
+ htmlFilePath: path.join(rootDir, 'index.html'),
+ htmlDir: rootDir,
+ rootDir,
+ });
+
+ const assetsWithoutcontent = assets.map(a => ({ ...a, content: undefined }));
+ assert.deepStrictEqual(assetsWithoutcontent, [
+ {
+ content: undefined,
+ filePath: path.join(rootDir, 'image-a.png'),
+ hashed: false,
+ },
+ {
+ content: undefined,
+ filePath: path.join(rootDir, 'image-b.png'),
+ hashed: false,
+ },
+ {
+ content: undefined,
+ filePath: path.join(rootDir, 'webmanifest.json'),
+ hashed: false,
+ },
+ {
+ content: undefined,
+ filePath: path.join(rootDir, 'image-a.svg'),
+ hashed: false,
+ },
+ {
+ content: undefined,
+ filePath: path.join(rootDir, 'styles.css'),
+ hashed: true,
+ },
+ {
+ content: undefined,
+ filePath: path.join(rootDir, 'image-social.png'),
+ hashed: true,
+ },
+ {
+ content: undefined,
+ filePath: path.join(rootDir, 'image-c.png'),
+ hashed: true,
+ },
+ {
+ content: undefined,
+ filePath: path.join(rootDir, 'image-b.svg'),
+ hashed: true,
+ },
+ ]);
+ });
+
+ it('reads file sources', () => {
+ const document = parse(`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `);
+ const assets = extractAssets({
+ document,
+ htmlFilePath: path.join(rootDir, 'index.html'),
+ htmlDir: rootDir,
+ rootDir,
+ });
+
+ const transformedAssets = assets.map(asset => ({
+ ...asset,
+ content: asset.content.toString('utf-8').replace(/\s/g, ''),
+ }));
+ assert.deepStrictEqual(transformedAssets, [
+ {
+ content: '{"message":"helloworld"}',
+ filePath: path.join(rootDir, 'webmanifest.json'),
+ hashed: false,
+ },
+ {
+ content:
+ '
+ 
+ before
' +
+ '' +
+ '' +
+ 'after
',
+ );
+
+ const { moduleImports, inlineModules } = extractModules({
+ document,
+ htmlDir: '/',
+ rootDir: '/',
+ });
+ const htmlWithoutModules = serialize(document);
+
+ assert.strictEqual(inlineModules.length, 0);
+ assert.deepStrictEqual(moduleImports, [
+ { importPath: `${sep}foo.js`, attributes: [] },
+ { importPath: `${sep}bar.js`, attributes: [] },
+ ]);
+ assert.strictEqual(
+ htmlWithoutModules,
+ 'before
after
',
+ );
+ });
+
+ it('does not touch non module scripts', () => {
+ const document = parse(
+ 'before
' +
+ '' +
+ '' +
+ 'after
',
+ );
+
+ const { moduleImports, inlineModules } = extractModules({
+ document,
+ htmlDir: '/',
+ rootDir: '/',
+ });
+ const htmlWithoutModules = serialize(document);
+
+ assert.strictEqual(inlineModules.length, 0);
+ assert.deepStrictEqual(moduleImports, []);
+ assert.strictEqual(
+ htmlWithoutModules,
+ 'before
after
',
+ );
+ });
+
+ it('resolves imports relative to the root dir', () => {
+ const document = parse(
+ 'before
' +
+ '' +
+ '' +
+ 'after
',
+ );
+
+ const { moduleImports, inlineModules } = extractModules({
+ document,
+ htmlDir: '/',
+ rootDir: '/base/',
+ });
+ const htmlWithoutModules = serialize(document);
+
+ assert.strictEqual(inlineModules.length, 0);
+ assert.deepStrictEqual(moduleImports, [
+ { importPath: `${sep}foo.js`, attributes: [] },
+ { importPath: `${sep}base${sep}bar.js`, attributes: [] },
+ ]);
+ assert.strictEqual(
+ htmlWithoutModules,
+ 'before
after
',
+ );
+ });
+
+ it('resolves relative imports relative to the relative import base', () => {
+ const document = parse(
+ 'before
' +
+ '' +
+ '' +
+ 'after
',
+ );
+
+ const { moduleImports, inlineModules } = extractModules({
+ document,
+ htmlDir: '/base-1/base-2/',
+ rootDir: '/base-1/',
+ });
+ const htmlWithoutModules = serialize(document);
+
+ assert.strictEqual(inlineModules.length, 0);
+ assert.deepStrictEqual(moduleImports, [
+ { importPath: `${sep}base-1${sep}base-2${sep}foo.js`, attributes: [] },
+ { importPath: `${sep}base-1${sep}bar.js`, attributes: [] },
+ ]);
+ assert.strictEqual(
+ htmlWithoutModules,
+ 'before
after
',
+ );
+ });
+
+ it('extracts all inline modules from a html document', () => {
+ const document = parse(
+ 'before
' +
+ '' +
+ '' +
+ 'after
',
+ );
+
+ const { moduleImports, inlineModules } = extractModules({
+ document,
+ htmlDir: '/',
+ rootDir: '/',
+ });
+ const htmlWithoutModules = serialize(document);
+
+ assert.deepStrictEqual(inlineModules, [
+ {
+ importPath: '/inline-module-cce79ce714e2c3b250afef32e61fb003.js',
+ code: '/* my module 1 */',
+ attributes: [],
+ },
+ {
+ importPath: '/inline-module-d9a0918508784903d131c7c4eb98e424.js',
+ code: '/* my module 2 */',
+ attributes: [],
+ },
+ ]);
+ assert.deepStrictEqual(moduleImports, []);
+ assert.strictEqual(
+ htmlWithoutModules,
+ 'before
after
',
+ );
+ });
+
+ it('prefixes inline module with index.html directory', () => {
+ const document = parse(
+ 'before
' +
+ '' +
+ '' +
+ 'after
',
+ );
+
+ const { moduleImports, inlineModules } = extractModules({
+ document,
+ htmlDir: '/foo/bar/',
+ rootDir: '/',
+ });
+ const htmlWithoutModules = serialize(document);
+
+ assert.deepStrictEqual(inlineModules, [
+ {
+ importPath: '/foo/bar/inline-module-cce79ce714e2c3b250afef32e61fb003.js',
+ code: '/* my module 1 */',
+ attributes: [],
+ },
+ {
+ importPath: '/foo/bar/inline-module-d9a0918508784903d131c7c4eb98e424.js',
+ code: '/* my module 2 */',
+ attributes: [],
+ },
+ ]);
+ assert.deepStrictEqual(moduleImports, []);
+ assert.strictEqual(
+ htmlWithoutModules,
+ 'before
after
',
+ );
+ });
+
+ it('ignores absolute paths', () => {
+ const document = parse(
+ 'before
' +
+ '' +
+ '' +
+ 'after
',
+ );
+
+ const { moduleImports, inlineModules } = extractModules({
+ document,
+ htmlDir: '/',
+ rootDir: '/',
+ });
+ const htmlWithoutModules = serialize(document);
+
+ assert.strictEqual(inlineModules.length, 0);
+ assert.deepStrictEqual(moduleImports, [{ importPath: `${sep}bar.js`, attributes: [] }]);
+ assert.strictEqual(
+ htmlWithoutModules,
+ 'before
after
',
+ );
+ });
+});
diff --git a/packages/rollup-plugin-html/test/output/getEntrypointBundles.test.ts b/packages/rollup-plugin-html/test/output/getEntrypointBundles.test.ts
new file mode 100644
index 0000000000..bb7772df25
--- /dev/null
+++ b/packages/rollup-plugin-html/test/output/getEntrypointBundles.test.ts
@@ -0,0 +1,392 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import { getEntrypointBundles, createImportPath } from '../../src/output/getEntrypointBundles.ts';
+import type { GeneratedBundle, ScriptModuleTag } from '../../src/RollupPluginHTMLOptions.ts';
+
+describe('createImportPath()', () => {
+ it('creates a relative import path', () => {
+ assert.strictEqual(
+ createImportPath({
+ outputDir: 'dist',
+ fileOutputDir: 'dist',
+ htmlFileName: 'index.html',
+ fileName: 'foo.js',
+ }),
+ './foo.js',
+ );
+ });
+
+ it('handles files output in a different directory', () => {
+ assert.strictEqual(
+ createImportPath({
+ outputDir: 'dist',
+ fileOutputDir: 'dist/legacy',
+ htmlFileName: 'index.html',
+ fileName: 'foo.js',
+ }),
+ './legacy/foo.js',
+ );
+ });
+
+ it('handles directory in filename', () => {
+ assert.strictEqual(
+ createImportPath({
+ outputDir: 'dist',
+ fileOutputDir: 'dist',
+ htmlFileName: 'index.html',
+ fileName: 'legacy/foo.js',
+ }),
+ './legacy/foo.js',
+ );
+ });
+
+ it('allows configuring a public path', () => {
+ assert.strictEqual(
+ createImportPath({
+ publicPath: 'static',
+ outputDir: 'dist',
+ fileOutputDir: 'dist',
+ htmlFileName: 'index.html',
+ fileName: 'foo.js',
+ }),
+ './static/foo.js',
+ );
+ });
+
+ it('allows configuring an absolute public path', () => {
+ assert.strictEqual(
+ createImportPath({
+ publicPath: '/static',
+ outputDir: 'dist',
+ fileOutputDir: 'dist',
+ htmlFileName: 'index.html',
+ fileName: 'foo.js',
+ }),
+ '/static/foo.js',
+ );
+ });
+
+ it('allows configuring an absolute public path with just a /', () => {
+ assert.strictEqual(
+ createImportPath({
+ publicPath: '/',
+ outputDir: 'dist',
+ fileOutputDir: 'dist',
+ htmlFileName: 'index.html',
+ fileName: 'foo.js',
+ }),
+ '/foo.js',
+ );
+ });
+
+ it('allows configuring an absolute public path with a trailing /', () => {
+ assert.strictEqual(
+ createImportPath({
+ publicPath: '/static/public/',
+ outputDir: 'dist',
+ fileOutputDir: 'dist',
+ htmlFileName: 'index.html',
+ fileName: 'foo.js',
+ }),
+ '/static/public/foo.js',
+ );
+ });
+
+ it('respects a different output dir when configuring a public path', () => {
+ assert.strictEqual(
+ createImportPath({
+ publicPath: '/static',
+ outputDir: 'dist',
+ fileOutputDir: 'dist/legacy',
+ htmlFileName: 'index.html',
+ fileName: 'foo.js',
+ }),
+ '/static/legacy/foo.js',
+ );
+ });
+
+ it('when html is output in a directory, creates a relative path from the html file to the js file', () => {
+ assert.strictEqual(
+ createImportPath({
+ outputDir: 'dist',
+ fileOutputDir: 'dist',
+ htmlFileName: 'pages/index.html',
+ fileName: 'foo.js',
+ }),
+ '../foo.js',
+ );
+ });
+
+ it('when html is output in a directory and absolute path is set, creates a direct path from the root to the js file', () => {
+ assert.strictEqual(
+ createImportPath({
+ publicPath: '/static/',
+ outputDir: 'dist',
+ fileOutputDir: 'dist',
+ htmlFileName: 'pages/index.html',
+ fileName: 'foo.js',
+ }),
+ '/static/foo.js',
+ );
+ });
+});
+
+describe('getEntrypointBundles()', () => {
+ const defaultBundles: GeneratedBundle[] = [
+ {
+ name: 'default',
+ options: { format: 'es', dir: 'dist' },
+ bundle: {
+ // @ts-ignore
+ 'app.js': {
+ isEntry: true,
+ fileName: 'app.js',
+ facadeModuleId: '/root/app.js',
+ type: 'chunk',
+ },
+ },
+ },
+ ];
+
+ const inputModuleIds: ScriptModuleTag[] = [
+ { importPath: '/root/app.js' },
+ { importPath: '/root/foo.js' },
+ ];
+
+ const defaultOptions = {
+ pluginOptions: {},
+ inputModuleIds,
+ outputDir: 'dist',
+ htmlFileName: 'index.html',
+ generatedBundles: defaultBundles,
+ };
+
+ it('generates entrypoints for a simple project', async () => {
+ const output = await getEntrypointBundles(defaultOptions);
+ assert.strictEqual(Object.keys(output).length, 1);
+ assert.strictEqual(output.default.options, defaultBundles[0].options);
+ assert.strictEqual(output.default.bundle, defaultBundles[0].bundle);
+ assert.strictEqual(output.default.entrypoints.length, 1);
+ assert.strictEqual(output.default.entrypoints[0].chunk, defaultBundles[0].bundle['app.js']);
+ assert.deepStrictEqual(
+ output.default.entrypoints.map(e => e.importPath),
+ ['./app.js'],
+ );
+ });
+
+ it('does not output non-entrypoints', async () => {
+ const generatedBundles: GeneratedBundle[] = [
+ {
+ name: 'default',
+ options: { format: 'es', dir: 'dist' },
+ bundle: {
+ // @ts-ignore
+ 'app.js': {
+ isEntry: true,
+ fileName: 'app.js',
+ facadeModuleId: '/root/app.js',
+ type: 'chunk',
+ },
+ // @ts-ignore
+ 'not-app.js': {
+ isEntry: false,
+ fileName: 'not-app.js',
+ facadeModuleId: '/root/app.js',
+ type: 'chunk',
+ },
+ },
+ },
+ ];
+ const output = await getEntrypointBundles({
+ ...defaultOptions,
+ generatedBundles,
+ });
+ assert.strictEqual(Object.keys(output).length, 1);
+ assert.strictEqual(output.default.entrypoints.length, 1);
+ assert.deepStrictEqual(
+ output.default.entrypoints.map(e => e.importPath),
+ ['./app.js'],
+ );
+ });
+
+ it('does not output non-chunks', async () => {
+ const generatedBundles: GeneratedBundle[] = [
+ {
+ name: 'default',
+ options: { format: 'es', dir: 'dist' },
+ bundle: {
+ // @ts-ignore
+ 'app.js': {
+ isEntry: true,
+ fileName: 'app.js',
+ facadeModuleId: '/root/app.js',
+ type: 'chunk',
+ },
+ // @ts-ignore
+ 'not-app.js': {
+ // @ts-ignore
+ isEntry: true,
+ fileName: 'not-app.js',
+ facadeModuleId: '/root/app.js',
+ type: 'asset',
+ },
+ },
+ },
+ ];
+ const output = await getEntrypointBundles({
+ ...defaultOptions,
+ generatedBundles,
+ });
+ assert.strictEqual(Object.keys(output).length, 1);
+ assert.strictEqual(output.default.entrypoints.length, 1);
+ assert.deepStrictEqual(
+ output.default.entrypoints.map(e => e.importPath),
+ ['./app.js'],
+ );
+ });
+
+ it('matches on facadeModuleId', async () => {
+ const generatedBundles: GeneratedBundle[] = [
+ {
+ name: 'default',
+ options: { format: 'es', dir: 'dist' },
+ bundle: {
+ // @ts-ignore
+ 'app.js': {
+ isEntry: true,
+ fileName: 'app.js',
+ facadeModuleId: '/root/app.js',
+ type: 'chunk',
+ },
+ // @ts-ignore
+ 'not-app.js': {
+ isEntry: true,
+ fileName: 'not-app.js',
+ facadeModuleId: '/root/not-app.js',
+ type: 'chunk',
+ },
+ },
+ },
+ ];
+ const output = await getEntrypointBundles({
+ ...defaultOptions,
+ generatedBundles,
+ });
+ assert.strictEqual(Object.keys(output).length, 1);
+ assert.strictEqual(output.default.entrypoints.length, 1);
+ assert.deepStrictEqual(
+ output.default.entrypoints.map(e => e.importPath),
+ ['./app.js'],
+ );
+ });
+
+ it('returns all entrypoints when no input module ids are given', async () => {
+ const generatedBundles: GeneratedBundle[] = [
+ {
+ name: 'default',
+ options: { format: 'es', dir: 'dist' },
+ bundle: {
+ // @ts-ignore
+ 'app.js': {
+ isEntry: true,
+ fileName: 'app.js',
+ facadeModuleId: '/root/app.js',
+ type: 'chunk',
+ },
+ // @ts-ignore
+ 'not-app.js': {
+ isEntry: true,
+ fileName: 'not-app.js',
+ facadeModuleId: '/root/not-app.js',
+ type: 'chunk',
+ },
+ },
+ },
+ ];
+
+ const inputModuleIds: ScriptModuleTag[] = [
+ { importPath: '/root/app.js' },
+ { importPath: '/root/not-app.js' },
+ ];
+
+ const output = await getEntrypointBundles({
+ ...defaultOptions,
+ inputModuleIds,
+ generatedBundles,
+ });
+ assert.strictEqual(Object.keys(output).length, 1);
+ assert.strictEqual(output.default.entrypoints.length, 2);
+ assert.deepStrictEqual(
+ output.default.entrypoints.map(e => e.importPath),
+ ['./app.js', './not-app.js'],
+ );
+ });
+
+ it('generates entrypoint for multiple bundles', async () => {
+ const generatedBundles: GeneratedBundle[] = [
+ {
+ name: 'modern',
+ options: { format: 'es', dir: 'dist' },
+ bundle: {
+ // @ts-ignore
+ 'app.js': {
+ isEntry: true,
+ fileName: 'app.js',
+ facadeModuleId: '/root/app.js',
+ type: 'chunk',
+ },
+ },
+ },
+ {
+ name: 'legacy',
+ options: { format: 'es', dir: 'dist/legacy' },
+ bundle: {
+ // @ts-ignore
+ 'app.js': {
+ isEntry: true,
+ fileName: 'app.js',
+ facadeModuleId: '/root/app.js',
+ type: 'chunk',
+ },
+ },
+ },
+ ];
+
+ const output = await getEntrypointBundles({
+ ...defaultOptions,
+ generatedBundles,
+ });
+
+ assert.strictEqual(Object.keys(output).length, 2);
+ assert.strictEqual(output.modern.options, generatedBundles[0].options);
+ assert.strictEqual(output.legacy.options, generatedBundles[1].options);
+ assert.strictEqual(output.modern.bundle, generatedBundles[0].bundle);
+ assert.strictEqual(output.legacy.bundle, generatedBundles[1].bundle);
+ assert.strictEqual(output.modern.entrypoints.length, 1);
+ assert.strictEqual(output.modern.entrypoints[0].chunk, generatedBundles[0].bundle['app.js']);
+ assert.deepStrictEqual(
+ output.modern.entrypoints.map(e => e.importPath),
+ ['./app.js'],
+ );
+ assert.strictEqual(output.legacy.entrypoints.length, 1);
+ assert.strictEqual(output.legacy.entrypoints[0].chunk, generatedBundles[1].bundle['app.js']);
+ assert.deepStrictEqual(
+ output.legacy.entrypoints.map(e => e.importPath),
+ ['./legacy/app.js'],
+ );
+ });
+
+ it('allows configuring a public path', async () => {
+ const output = await getEntrypointBundles({
+ ...defaultOptions,
+ pluginOptions: { publicPath: '/static' },
+ });
+
+ assert.strictEqual(Object.keys(output).length, 1);
+ assert.strictEqual(output.default.entrypoints.length, 1);
+ assert.deepStrictEqual(
+ output.default.entrypoints.map(e => e.importPath),
+ ['/static/app.js'],
+ );
+ });
+});
diff --git a/packages/rollup-plugin-html/test/output/getOutputHTML.test.ts b/packages/rollup-plugin-html/test/output/getOutputHTML.test.ts
new file mode 100644
index 0000000000..cb3c97ba79
--- /dev/null
+++ b/packages/rollup-plugin-html/test/output/getOutputHTML.test.ts
@@ -0,0 +1,221 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import path from 'path';
+import type { GetOutputHTMLParams } from '../../src/output/getOutputHTML.ts';
+import { getOutputHTML } from '../../src/output/getOutputHTML.ts';
+import type { EntrypointBundle } from '../../src/RollupPluginHTMLOptions.ts';
+
+const __dirname = import.meta.dirname;
+
+describe('getOutputHTML()', () => {
+ const defaultEntrypointBundles: RecordInput HTML
', + name: 'index.html', + moduleImports: [], + assets: [], + inlineModules: [], + }, + defaultInjectDisabled: false, + injectServiceWorker: false, + serviceWorkerPath: '', + strictCSPInlineScripts: false, + }; + + it('injects output into the input HTML', async () => { + const output = await getOutputHTML(defaultOptions); + assert.strictEqual( + output, + 'Input HTML
' + + '' + + '' + + '', + ); + }); + + it('generates a HTML file for multiple rollup bundles', async () => { + const entrypointBundles: RecordInput HTML
' + + '' + + '' + + '' + + '' + + '', + ); + }); + + it('can transform html output', async () => { + const output = await getOutputHTML({ + ...defaultOptions, + pluginOptions: { + ...defaultOptions.pluginOptions, + transformHtml: html => html.replace('Input HTML', 'Transformed Input HTML'), + }, + }); + + assert.strictEqual( + output, + 'Transformed Input HTML
' + + '' + + '' + + '', + ); + }); + + it('allows setting multiple html transform functions', async () => { + const output = await getOutputHTML({ + ...defaultOptions, + pluginOptions: { + ...defaultOptions.pluginOptions, + transformHtml: [ + html => html.replace('Input HTML', 'Transformed Input HTML'), + html => html.replace(/h1/g, 'h2'), + ], + }, + }); + + assert.strictEqual( + output, + 'Transformed Input HTML
' + + '' + + '' + + '', + ); + }); + + it('can combine external and regular output transform functions', async () => { + const output = await getOutputHTML({ + ...defaultOptions, + pluginOptions: { + ...defaultOptions.pluginOptions, + transformHtml: html => html.replace('Input HTML', 'Transformed Input HTML'), + }, + outputExternalTransformHtmlFns: [html => html.replace(/h1/g, 'h2')], + }); + + assert.strictEqual( + output, + 'Transformed Input HTML
' + + '' + + '' + + '', + ); + }); + + it('can disable default injection', async () => { + const output = await getOutputHTML({ + ...defaultOptions, + defaultInjectDisabled: true, + }); + + assert.strictEqual(output, 'Input HTML
'); + }); + + it('can converts absolute urls to full absolute urls', async () => { + const rootDir = path.resolve(__dirname, '..', 'fixtures', 'assets'); + const hashed = new MapHello world
', + '', + '', + ].join(''), + ); + + injectBundles(document, [ + { + options: { format: 'es' }, + entrypoints: [ + { + importPath: 'app.js', + // @ts-ignore + chunk: {}, + }, + ], + }, + ]); + const expected = [ + // + '', + '', + '', + 'Hello world
', + '', + '', + '', + ].join(''); + + assert.strictEqual(serialize(document), expected); + }); + + it('can inject multiple bundles', () => { + const document = parse( + [ + // + '', + '', + '', + 'Hello world
', + '', + '', + ].join(''), + ); + + injectBundles(document, [ + // @ts-ignore + { + options: { format: 'es' }, + entrypoints: [ + { + importPath: './app.js', + // @ts-ignore + chunk: null, + }, + ], + }, + // @ts-ignore + { + options: { format: 'iife' }, + entrypoints: [ + { + importPath: '/scripts/script.js', + // @ts-ignore + chunk: null, + }, + ], + }, + ]); + const expected = [ + // + '', + '', + '', + 'Hello world
', + '', + '', + '', + '', + ].join(''); + + assert.strictEqual(serialize(document), expected); + }); +}); diff --git a/packages/rollup-plugin-html/test/output/injectedUpdatedAssetPaths.test.ts b/packages/rollup-plugin-html/test/output/injectedUpdatedAssetPaths.test.ts new file mode 100644 index 0000000000..8e94ba868b --- /dev/null +++ b/packages/rollup-plugin-html/test/output/injectedUpdatedAssetPaths.test.ts @@ -0,0 +1,353 @@ +import assert from 'node:assert/strict'; +import { describe, it } from 'node:test'; +import path from 'path'; +import { parse, serialize } from 'parse5'; +import type { InputData } from '../../src/input/InputData.ts'; + +import { injectedUpdatedAssetPaths } from '../../src/output/injectedUpdatedAssetPaths.ts'; + +describe('injectedUpdatedAssetPaths()', () => { + it('injects updated asset paths', () => { + const document = parse( + [ + '', + '', + '', + '
',
+ '
',
+ '',
+ '',
+ '',
+ ].join(''),
+ );
+
+ const input: InputData = {
+ html: '',
+ name: 'index.html',
+ moduleImports: [],
+ inlineModules: [],
+ assets: [],
+ filePath: '/root/index.html',
+ };
+ const hashed = new Map
',
+ '
',
+ '',
+ '',
+ '',
+ ].join('');
+
+ assert.strictEqual(serialize(document), expected);
+ });
+
+ it('handles a picture tag using source tags with srcset', () => {
+ const document = parse(
+ [
+ '',
+ ' ',
+ ' 
',
+ '',
+ '',
+ '',
+ '',
+ ].join(''),
+ );
+
+ const input: InputData = {
+ html: '',
+ name: 'index.html',
+ moduleImports: [],
+ inlineModules: [],
+ assets: [],
+ };
+ const hashed = new Map',
+ '',
+ '',
+ '',
+ ].join('');
+
+ assert.strictEqual(serialize(document), expected);
+ });
+
+ it('handles HTML files in a sub directory', () => {
+ const document = parse(
+ [
+ '',
+ '',
+ '',
+ '
',
+ '',
+ '',
+ '',
+ ].join(''),
+ );
+
+ const input: InputData = {
+ html: '',
+ name: 'foo/index.html',
+ moduleImports: [],
+ inlineModules: [],
+ assets: [],
+ filePath: '/root/foo/index.html',
+ };
+ const hashed = new Map
',
+ '
',
+ '',
+ '',
+ ].join('');
+
+ assert.strictEqual(serialize(document), expected);
+ });
+
+ it('handles virtual HTML files in a sub directory', () => {
+ const document = parse(
+ [
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ ].join(''),
+ );
+
+ const input: InputData = {
+ html: '',
+ name: 'foo/index.html',
+ moduleImports: [],
+ inlineModules: [],
+ assets: [],
+ };
+ const hashed = new Map',
+ '',
+ '',
+ '',
+ ].join('');
+
+ assert.strictEqual(serialize(document), expected);
+ });
+
+ it('prefixes a publicpath', () => {
+ const document = parse(
+ [
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ '',
+ ].join(''),
+ );
+
+ const input: InputData = {
+ html: '',
+ name: 'index.html',
+ moduleImports: [],
+ inlineModules: [],
+ assets: [],
+ filePath: '/root/index.html',
+ };
+ const hashed = new Map
',
+ '
',
+ '',
+ '',
+ ].join('');
+
+ assert.strictEqual(serialize(document), expected);
+ });
+});
diff --git a/packages/rollup-plugin-html/test/rollup-plugin-html.test.ts b/packages/rollup-plugin-html/test/rollup-plugin-html.test.ts
index 0327b8da7a..69b41bfeac 100644
--- a/packages/rollup-plugin-html/test/rollup-plugin-html.test.ts
+++ b/packages/rollup-plugin-html/test/rollup-plugin-html.test.ts
@@ -1,439 +1,242 @@
-import { rollup, OutputChunk, OutputOptions, Plugin } from 'rollup';
-import { expect } from 'chai';
+import {
+ rollup,
+ type Plugin,
+ type OutputChunk,
+ type OutputAsset,
+ type OutputOptions,
+} from 'rollup';
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
import path from 'path';
import { rollupPluginHTML } from '../src/index.ts';
-import { html, css, js, svg, generateTestBundle, createApp, cleanApp } from './utils.ts';
+
+const __dirname = import.meta.dirname;
+
+type Output = (OutputChunk | OutputAsset)[];
+
+function getChunk(output: Output, name: string) {
+ return output.find(o => o.fileName === name && o.type === 'chunk') as OutputChunk;
+}
+
+function getAsset(output: Output, name: string) {
+ return output.find(o => o.name === name && o.type === 'asset') as OutputAsset & {
+ source: string;
+ };
+}
const outputConfig: OutputOptions = {
format: 'es',
dir: 'dist',
};
-describe('rollup-plugin-html', () => {
- afterEach(() => {
- cleanApp();
- });
+function stripNewlines(str: string) {
+ return str.replace(/(\r\n|\n|\r)/gm, '');
+}
- it('can build with an input path as input', async () => {
- const rootDir = createApp({
- 'index.html': html`
-
-
-
-
-
-
-
- `,
- 'entrypoint-a.js': js`
- import './modules/module-a.js';
- console.log('entrypoint-a.js');
- `,
- 'entrypoint-b.js': js`
- import './modules/module-b.js';
- console.log('entrypoint-b.js');
- `,
- 'modules/module-a.js': js`
- import './shared-module.js';
- console.log('module-a.js');
- `,
- 'modules/module-b.js': js`
- import './shared-module.js';
- console.log('module-b.js');
- `,
- 'modules/shared-module.js': js`
- console.log('shared-module.js');
- `,
- });
+const rootDir = path.join(__dirname, 'fixtures', 'rollup-plugin-html');
+describe('rollup-plugin-html', () => {
+ it('can build with an input path as input', async () => {
const config = {
plugins: [
rollupPluginHTML({
+ input: path.resolve(__dirname, './fixtures/rollup-plugin-html/index.html'),
rootDir,
- input: './index.html',
}),
],
};
-
- const build = await rollup(config);
- const { chunks, assets } = await generateTestBundle(build, outputConfig);
-
- expect(Object.keys(chunks)).to.have.lengthOf(3);
- expect(Object.keys(assets)).to.have.lengthOf(1);
-
- expect(chunks['entrypoint-a.js']).to.include(js`console.log('entrypoint-a.js');`);
- expect(chunks['entrypoint-b.js']).to.include(js`console.log('entrypoint-b.js');`);
-
- expect(assets['index.html']).to.equal(html`
-
-
-
-
-
-
-
- `);
+ const bundle = await rollup(config);
+ const { output } = await bundle.generate(outputConfig);
+ assert.strictEqual(output.length, 4);
+ const { code: entryA } = getChunk(output, 'entrypoint-a.js');
+ const { code: entryB } = getChunk(output, 'entrypoint-b.js');
+ assert.ok(entryA.includes("console.log('entrypoint-a.js');"));
+ assert.ok(entryB.includes("console.log('entrypoint-b.js');"));
+ assert.strictEqual(
+ stripNewlines(getAsset(output, 'index.html').source),
+ 'hello world
' + + '' + + '' + + '', + ); }); it('can build with html file as rollup input', async () => { - const rootDir = createApp({ - 'index.html': html` - - - - - - - - `, - 'entrypoint-a.js': js` - import './modules/module-a.js'; - console.log('entrypoint-a.js'); - `, - 'entrypoint-b.js': js` - import './modules/module-b.js'; - console.log('entrypoint-b.js'); - `, - 'modules/module-a.js': js` - import './shared-module.js'; - console.log('module-a.js'); - `, - 'modules/module-b.js': js` - import './shared-module.js'; - console.log('module-b.js'); - `, - 'modules/shared-module.js': js` - console.log('shared-module.js'); - `, - }); - const config = { - input: './index.html', + input: path.resolve(__dirname, './fixtures/rollup-plugin-html/index.html'), plugins: [rollupPluginHTML({ rootDir })], }; - - const build = await rollup(config); - const { chunks, assets } = await generateTestBundle(build, outputConfig); - - expect(Object.keys(chunks)).to.have.lengthOf(3); - expect(Object.keys(assets)).to.have.lengthOf(1); - - expect(chunks['entrypoint-a.js']).to.include(js`console.log('entrypoint-a.js');`); - expect(chunks['entrypoint-b.js']).to.include(js`console.log('entrypoint-b.js');`); - - expect(assets['index.html']).to.equal(html` - - - - - - - - `); + const bundle = await rollup(config); + const { output } = await bundle.generate(outputConfig); + assert.strictEqual(output.length, 4); + const { code: entryA } = getChunk(output, 'entrypoint-a.js'); + const { code: entryB } = getChunk(output, 'entrypoint-b.js'); + assert.ok(entryA.includes("console.log('entrypoint-a.js');")); + assert.ok(entryB.includes("console.log('entrypoint-b.js');")); + assert.strictEqual( + stripNewlines(getAsset(output, 'index.html').source), + 'hello world
' + + '' + + '' + + '', + ); }); it('will retain attributes on script tags', async () => { - const rootDir = createApp({ - 'index.html': html` - - - - - - - - `, - 'entrypoint-a.js': js` - import './modules/module-a.js'; - console.log('entrypoint-a.js'); - `, - 'entrypoint-b.js': js` - import './modules/module-b.js'; - console.log('entrypoint-b.js'); - `, - 'modules/module-a.js': js` - import './shared-module.js'; - console.log('module-a.js'); - `, - 'modules/module-b.js': js` - import './shared-module.js'; - console.log('module-b.js'); - `, - 'modules/shared-module.js': js` - console.log('shared-module.js'); - `, - }); - const config = { - input: './index.html', + input: path.resolve(__dirname, './fixtures/rollup-plugin-html/retain-attributes.html'), plugins: [rollupPluginHTML({ rootDir })], }; - - const build = await rollup(config); - const { chunks, assets } = await generateTestBundle(build, outputConfig); - - expect(Object.keys(chunks)).to.have.lengthOf(3); - expect(Object.keys(assets)).to.have.lengthOf(1); - - expect(chunks['entrypoint-a.js']).to.include(js`console.log('entrypoint-a.js');`); - expect(chunks['entrypoint-b.js']).to.include(js`console.log('entrypoint-b.js');`); - - expect(assets['index.html']).to.equal(html` - - - - - - - - `); + const bundle = await rollup(config); + const { output } = await bundle.generate(outputConfig); + assert.strictEqual(output.length, 4); + const { code: entryA } = getChunk(output, 'entrypoint-a.js'); + const { code: entryB } = getChunk(output, 'entrypoint-b.js'); + assert.ok(entryA.includes("console.log('entrypoint-a.js');")); + assert.ok(entryB.includes("console.log('entrypoint-b.js');")); + assert.strictEqual( + stripNewlines(getAsset(output, 'retain-attributes.html').source), + 'hello world
' + + '' + + '' + + '', + ); }); it('can build with pure html file as rollup input', async () => { - const rootDir = createApp({ - 'index.html': html` - - - -hello world
- - - `, - }); - const config = { - input: './index.html', + input: path.resolve(__dirname, './fixtures/rollup-plugin-html/pure-index.html'), plugins: [rollupPluginHTML({ rootDir })], }; - - const build = await rollup(config); - const { chunks, assets } = await generateTestBundle(build, outputConfig); - - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); - - expect(assets['index.html']).to.equal(html` - - - -hello world
- - - `); + const bundle = await rollup(config); + const { output } = await bundle.generate(outputConfig); + assert.strictEqual( + stripNewlines(getAsset(output, 'pure-index.html').source), + 'hello world
', + ); }); it('can build with multiple pure html inputs', async () => { - const rootDir = createApp({ - 'index1.html': html` - - - -hello world
- - - `, - 'index2.html': html` - - - -hey there
- - - `, - }); - const config = { plugins: [ rollupPluginHTML({ + input: [ + path.resolve(__dirname, './fixtures/rollup-plugin-html/pure-index.html'), + path.resolve(__dirname, './fixtures/rollup-plugin-html/pure-index2.html'), + ], rootDir, - input: ['./index1.html', './index2.html'], }), ], }; - - const build = await rollup(config); - const { chunks, assets } = await generateTestBundle(build, outputConfig); - - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(2); - - expect(assets['index1.html']).to.equal(html` - - - -hello world
- - - `); - - expect(assets['index2.html']).to.equal(html` - - - -hey there
- - - `); + const bundle = await rollup(config); + const { output } = await bundle.generate(outputConfig); + assert.strictEqual( + stripNewlines(getAsset(output, 'pure-index.html').source), + 'hello world
', + ); + assert.strictEqual( + stripNewlines(getAsset(output, 'pure-index2.html').source), + 'hey there
', + ); }); it('can build with html string as input', async () => { - const rootDir = createApp({ - 'app.js': js` - console.log('app.js'); - `, - }); - const config = { plugins: [ rollupPluginHTML({ - rootDir, input: { name: 'index.html', - html: ``, + html: 'Hello world
', }, + rootDir, }), ], }; - const build = await rollup(config); - const { chunks, assets } = await generateTestBundle(build, outputConfig); - - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); - - expect(assets['index.html']).to.equal(html` - - - - - - - `); + const bundle = await rollup(config); + const { output } = await bundle.generate(outputConfig); + assert.strictEqual(output.length, 2); + assert.strictEqual( + stripNewlines(getAsset(output, 'index.html').source), + 'Hello world
' + + '', + ); }); it('resolves paths relative to virtual html filename', async () => { - const rootDir = createApp({ - 'app.js': js` - console.log('app.js'); - `, - }); - const config = { plugins: [ rollupPluginHTML({ - rootDir, input: { - name: 'nested/index.html', - html: ``, + name: 'pages/index.html', + html: 'Hello world
', }, + rootDir, }), ], }; - const build = await rollup(config); - const { chunks, assets } = await generateTestBundle(build, outputConfig); - - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); - - expect(assets['nested/index.html']).to.equal(html` - - - - - - - `); + const bundle = await rollup(config); + const { output } = await bundle.generate(outputConfig); + assert.strictEqual(output.length, 2); + assert.strictEqual( + stripNewlines(getAsset(output, 'pages/index.html').source), + 'Hello world
' + + '', + ); }); it('can build with inline modules', async () => { - const rootDir = createApp({ - 'app.js': js` - console.log('app.js'); - `, - }); - const config = { plugins: [ rollupPluginHTML({ rootDir, input: { name: 'index.html', - html: ``, + html: 'Hello world
', }, }), ], }; - const build = await rollup(config); - const { chunks, assets } = await generateTestBundle(build, outputConfig); - - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); - - const hash = '16165cb387fc14ed1fe1749d05f19f7b'; - - expect(chunks[`inline-module-${hash}.js`]).to.include(js`console.log('app.js');`); - - expect(assets['index.html']).to.equal(html` - - - - - - - `); + const bundle = await rollup(config); + const { output } = await bundle.generate(outputConfig); + assert.strictEqual(output.length, 2); + const hash = '5ec680a4efbb48ae254268ab1defe610'; + const { code: appCode } = getChunk(output, `inline-module-${hash}.js`); + assert.ok(appCode.includes("console.log('entrypoint-a.js');")); + assert.strictEqual( + stripNewlines(getAsset(output, 'index.html').source), + 'Hello world
' + + `` + + '', + ); }); it('resolves inline module imports relative to the HTML file', async () => { - const rootDir = createApp({ - 'nested/index.html': html` - - - - - - - `, - 'nested/app.js': js` - console.log('app.js'); - `, - }); - const config = { plugins: [ rollupPluginHTML({ + input: path.resolve(__dirname, './fixtures/rollup-plugin-html/foo/foo.html'), rootDir, - input: './nested/index.html', }), ], }; - - const build = await rollup(config); - const { chunks, assets } = await generateTestBundle(build, outputConfig); - - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); - - const hash = 'b774aefb8bf002b291fd54d27694a34d'; - expect(chunks[`inline-module-${hash}.js`]).to.include(js`console.log('app.js');`); + const bundle = await rollup(config); + const { output } = await bundle.generate(outputConfig); + assert.strictEqual(output.length, 2); + const { code: appCode } = getChunk(output, 'inline-module-1b13383486c70d87f4e2585ff87b147c.js'); + assert.ok(appCode.includes("console.log('foo');")); }); it('can build transforming final output', async () => { - const rootDir = createApp({ - 'app.js': js` - console.log('app.js'); - `, - }); - const config = { + input: path.resolve(__dirname, './fixtures/rollup-plugin-html/entrypoint-a.js'), plugins: [ rollupPluginHTML({ rootDir, input: { - html: `Hello world
`, + html: 'Hello world
', }, transformHtml(html) { return html.replace('Hello world', 'Goodbye world'); @@ -441,243 +244,139 @@ describe('rollup-plugin-html', () => { }), ], }; - - const build = await rollup(config); - const { chunks, assets } = await generateTestBundle(build, outputConfig); - - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); - - expect(assets['index.html']).to.equal(html` - - - -Goodbye world
- - - - `); + const bundle = await rollup(config); + const { output } = await bundle.generate(outputConfig); + assert.strictEqual(output.length, 2); + assert.strictEqual( + getAsset(output, 'index.html').source, + 'Goodbye world
' + + '', + ); }); it('can build with a public path', async () => { - const rootDir = createApp({ - 'app.js': js` - console.log('app.js'); - `, - }); - const config = { + input: path.resolve(__dirname, './fixtures/rollup-plugin-html/entrypoint-a.js'), plugins: [ rollupPluginHTML({ rootDir, - publicPath: '/static/', input: { - html: ``, + html: 'Hello world
', }, + publicPath: '/static/', }), ], }; - - const build = await rollup(config); - const { chunks, assets } = await generateTestBundle(build, outputConfig); - - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); - - expect(assets['index.html']).to.equal(html` - - - - - - - `); + const bundle = await rollup(config); + const { output } = await bundle.generate(outputConfig); + assert.strictEqual(output.length, 2); + assert.strictEqual( + getAsset(output, 'index.html').source, + 'Hello world
' + + '', + ); }); it('can build with a public path with a file in a directory', async () => { - const rootDir = createApp({ - 'app.js': js` - console.log('app.js'); - `, - }); - const config = { + input: path.resolve(__dirname, './fixtures/rollup-plugin-html/entrypoint-a.js'), plugins: [ rollupPluginHTML({ rootDir, - publicPath: '/static/', input: { - name: 'nested/index.html', - html: ``, + name: 'pages/index.html', + html: 'Hello world
', }, + publicPath: '/static/', }), ], }; - - const build = await rollup(config); - const { chunks, assets } = await generateTestBundle(build, outputConfig); - - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); - - expect(assets['nested/index.html']).to.equal(html` - - - - - - - `); + const bundle = await rollup(config); + const { output } = await bundle.generate(outputConfig); + assert.strictEqual(output.length, 2); + assert.strictEqual( + getAsset(output, 'pages/index.html').source, + 'Hello world
' + + '', + ); }); it('can build with multiple build outputs', async () => { - const rootDir = createApp({ - 'app.js': js` - import './modules/module.js'; - console.log('app.js'); - `, - 'modules/module.js': js` - console.log('module.js'); - `, - }); - const plugin = rollupPluginHTML({ rootDir, - publicPath: '/static/', input: { - html: ``, + html: 'Hello world
', }, + publicPath: '/static/', }); - const config = { - input: path.join(rootDir, 'app.js'), + input: path.resolve(__dirname, './fixtures/rollup-plugin-html/entrypoint-a.js'), plugins: [plugin], }; - const build = await rollup(config); - - const bundleA = generateTestBundle(build, { + const bundleA = build.generate({ format: 'system', dir: 'dist', plugins: [plugin.api.addOutput('legacy')], }); - - const bundleB = generateTestBundle(build, { + const bundleB = build.generate({ format: 'es', dir: 'dist', plugins: [plugin.api.addOutput('modern')], }); - - const { chunks: chunksA, assets: assetsA } = await bundleA; - const { chunks: chunksB, assets: assetsB } = await bundleB; - - expect(Object.keys(chunksA)).to.have.lengthOf(1); - expect(Object.keys(assetsA)).to.have.lengthOf(0); - expect(Object.keys(chunksB)).to.have.lengthOf(1); - expect(Object.keys(assetsB)).to.have.lengthOf(1); - - expect(chunksA['app.js']).to.include(js`console.log('app.js');`); - expect(chunksA['app.js']).to.include(js`console.log('module.js');`); - expect(chunksB['app.js']).to.include(js`console.log('app.js');`); - expect(chunksB['app.js']).to.include(js`console.log('module.js');`); - - expect(assetsA['index.html']).to.not.exist; - expect(assetsB['index.html']).to.equal(html` - - - - - - - - `); + const { output: outputA } = await bundleA; + const { output: outputB } = await bundleB; + assert.strictEqual(outputA.length, 1); + assert.strictEqual(outputB.length, 2); + const { code: entrypointA1 } = getChunk(outputA, 'entrypoint-a.js'); + const { code: entrypointA2 } = getChunk(outputB, 'entrypoint-a.js'); + assert.ok(entrypointA1.includes("console.log('entrypoint-a.js');")); + assert.ok(entrypointA1.includes("console.log('module-a.js');")); + assert.ok(entrypointA2.includes("console.log('entrypoint-a.js');")); + assert.ok(entrypointA2.includes("console.log('module-a.js');")); + assert.strictEqual(getAsset(outputA, 'index.html'), undefined); + assert.strictEqual( + getAsset(outputB, 'index.html').source, + 'Hello world
' + + '' + + '', + ); }); it('can build with index.html as input and an extra html file as output', async () => { - const rootDir = createApp({ - 'app.js': js` - console.log('app.js'); - `, - }); - const config = { plugins: [ rollupPluginHTML({ rootDir, input: { - html: ``, + html: 'Hello world
', }, }), rollupPluginHTML({ rootDir, input: { name: 'foo.html', - html: `foo.html
`, + html: 'foo.html
', }, }), ], }; - - const build = await rollup(config); - const { chunks, assets } = await generateTestBundle(build, outputConfig); - - expect(Object.keys(chunks)).to.have.lengthOf(2); - expect(Object.keys(assets)).to.have.lengthOf(2); - - expect(chunks['app.js']).to.exist; - - expect(assets['index.html']).to.equal(html` - - - - - - - `); - - expect(assets['foo.html']).to.equal(html` - - - -foo.html
- - - `); + const bundle = await rollup(config); + const { output } = await bundle.generate(outputConfig); + assert.strictEqual(output.length, 4); + assert.ok(getChunk(output, 'entrypoint-a.js')); + assert.strictEqual( + getAsset(output, 'index.html').source, + 'Hello world
' + + '', + ); + assert.strictEqual( + getAsset(output, 'foo.html').source, + 'foo.html
', + ); }); it('can build with multiple html inputs', async () => { - const rootDir = createApp({ - 'entrypoint-a.js': js` - import './modules/module-a.js'; - console.log('entrypoint-a.js'); - `, - 'entrypoint-b.js': js` - import './modules/module-b.js'; - console.log('entrypoint-b.js'); - `, - 'entrypoint-c.js': js` - import './modules/module-c.js'; - console.log('entrypoint-c.js'); - `, - 'modules/module-a.js': js` - import './shared-module.js'; - console.log('module-a.js'); - `, - 'modules/module-b.js': js` - import './shared-module.js'; - console.log('module-b.js'); - `, - 'modules/module-c.js': js` - import './shared-module.js'; - console.log('module-c.js'); - `, - 'modules/shared-module.js': js` - console.log('shared-module.js'); - `, - }); - const config = { plugins: [ rollupPluginHTML({ @@ -699,91 +398,27 @@ describe('rollup-plugin-html', () => { }), ], }; - - const build = await rollup(config); - const { chunks, assets } = await generateTestBundle(build, outputConfig); - - expect(Object.keys(chunks)).to.have.lengthOf(4); - expect(Object.keys(assets)).to.have.lengthOf(3); - - expect(chunks['entrypoint-a.js']).to.exist; - expect(chunks['entrypoint-b.js']).to.exist; - expect(chunks['entrypoint-c.js']).to.exist; - - expect(assets['page-a.html']).to.equal(html` - - - -Page A
- - - - `); - - expect(assets['page-b.html']).to.equal(html` - - - -Page B
- - - - `); - - expect(assets['page-c.html']).to.equal(html` - - - -Page C
- - - - `); + const bundle = await rollup(config); + const { output } = await bundle.generate(outputConfig); + assert.strictEqual(output.length, 7); + assert.ok(getChunk(output, 'entrypoint-a.js')); + assert.ok(getChunk(output, 'entrypoint-b.js')); + assert.ok(getChunk(output, 'entrypoint-c.js')); + assert.strictEqual( + getAsset(output, 'page-a.html').source, + 'Page A
', + ); + assert.strictEqual( + getAsset(output, 'page-b.html').source, + 'Page B
', + ); + assert.strictEqual( + getAsset(output, 'page-c.html').source, + 'Page C
', + ); }); it('can use a glob to build multiple pages', async () => { - const rootDir = createApp({ - 'pages/page-a.html': html` - - -page-a.html
- - - - - `, - 'pages/page-b.html': html` - - -page-b.html
- - - - - `, - 'pages/page-c.html': html` - - -page-c.html
- - - - - `, - 'pages/page-a.js': js` - export default 'page a'; - `, - 'pages/page-b.js': js` - export default 'page b'; - `, - 'pages/page-c.js': js` - export default 'page c'; - `, - 'pages/shared.js': js` - export default 'shared'; - `, - }); - const config = { plugins: [ rollupPluginHTML({ @@ -793,144 +428,85 @@ describe('rollup-plugin-html', () => { ], }; - const build = await rollup(config); - const { chunks, assets } = await generateTestBundle(build, outputConfig); - - expect(Object.keys(chunks)).to.have.lengthOf(4); - expect(Object.keys(assets)).to.have.lengthOf(3); - - expect(chunks['page-a.js']).to.exist; - expect(chunks['page-b.js']).to.exist; - expect(chunks['page-c.js']).to.exist; - - expect(assets['page-a.html']).to.equal(html` - - - -page-a.html
- - - - - `); - - expect(assets['page-b.html']).to.equal(html` - - - -page-b.html
- - - - - `); - - // TODO: investigate why shared.js is after page-c.js here but before in the others - expect(assets['page-c.html']).to.equal(html` - - - -page-c.html
- - - - - `); + const bundle = await rollup(config); + const { output } = await bundle.generate(outputConfig); + const pageA = getAsset(output, 'page-a.html').source; + const pageB = getAsset(output, 'page-b.html').source; + const pageC = getAsset(output, 'page-c.html').source; + assert.strictEqual(output.length, 7); + assert.ok(getChunk(output, 'page-a.js')); + assert.ok(getChunk(output, 'page-b.js')); + assert.ok(getChunk(output, 'page-c.js')); + assert.ok(pageA.includes('page-a.html
')); + assert.ok(pageA.includes('')); + assert.ok(pageA.includes('')); + assert.ok(pageB.includes('page-b.html
')); + assert.ok(pageB.includes('')); + assert.ok(pageB.includes('')); + assert.ok(pageC.includes('page-c.html
')); + assert.ok(pageC.includes('')); + assert.ok(pageC.includes('')); }); it('can exclude globs', async () => { - const rootDir = createApp({ - 'exclude/index.html': html``, - 'exclude/assets/partial.html': html``, - }); - const config = { plugins: [ rollupPluginHTML({ - rootDir, input: 'exclude/**/*.html', exclude: '**/partial.html', + rootDir, }), ], }; - const build = await rollup(config); - const { chunks, assets } = await generateTestBundle(build, outputConfig); - - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); - - expect(assets).to.have.keys(['index.html']); + const bundle = await rollup(config); + const { output } = await bundle.generate(outputConfig); + assert.strictEqual(output.length, 2); }); it('creates unique inline script names', async () => { - const rootDir = createApp({}); - const config = { plugins: [ rollupPluginHTML({ rootDir, input: [ { - name: 'nestedA/indexA.html', - html: `