@atlaspack/transformer-html 2.12.1-dev.3401 → 2.12.1-dev.3443

package/lib/HTMLTransformer.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+exports.parseHTML = parseHTML;
+exports.transformerOpts = void 0;
 function _plugin() {
   const data = require("@atlaspack/plugin");
   _plugin = function () {
@@ -56,7 +58,19 @@ function _diagnostic() {
   return data;
 }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = exports.default = new (_plugin().Transformer)({
+function parseHTML(code, xmlMode) {
+  return {
+    type: 'posthtml',
+    version: '0.4.1',
+    program: (0, _posthtmlParser().parser)(code, {
+      lowerCaseTags: true,
+      lowerCaseAttributeNames: true,
+      sourceLocations: true,
+      xmlMode
+    })
+  };
+}
+const transformerOpts = exports.transformerOpts = {
   canReuseAST({
     ast
   }) {
@@ -65,16 +79,9 @@ var _default = exports.default = new (_plugin().Transformer)({
   async parse({
     asset
   }) {
-    return {
-      type: 'posthtml',
-      version: '0.4.1',
-      program: (0, _posthtmlParser().parser)(await asset.getCode(), {
-        lowerCaseTags: true,
-        lowerCaseAttributeNames: true,
-        sourceLocations: true,
-        xmlMode: asset.type === 'xhtml'
-      })
-    };
+    const code = await asset.getCode();
+    const xmlMode = asset.type === 'xhtml';
+    return parseHTML(code, xmlMode);
   },
   async transform({
     asset,
@@ -153,7 +160,8 @@ var _default = exports.default = new (_plugin().Transformer)({
       })
     };
   }
-});
+};
+var _default = exports.default = new (_plugin().Transformer)(transformerOpts);
 function findFirstMatch(ast, expressions) {
   let found;
   for (const expression of expressions) {

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@atlaspack/transformer-html",
-  "version": "2.12.1-dev.3401+b483af77f",
-  "license": "MIT",
+  "version": "2.12.1-dev.3443+d1170cfc7",
+  "license": "(MIT OR Apache-2.0)",
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "test": "mocha"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/atlassian-labs/atlaspack.git"
@@ -13,12 +16,12 @@
   "source": "src/HTMLTransformer.js",
   "engines": {
     "node": ">= 16.0.0",
-    "parcel": "^2.12.1-dev.3401+b483af77f"
+    "parcel": "^2.12.1-dev.3443+d1170cfc7"
   },
   "dependencies": {
-    "@atlaspack/diagnostic": "2.12.1-dev.3401+b483af77f",
-    "@atlaspack/plugin": "2.12.1-dev.3401+b483af77f",
-    "@atlaspack/rust": "2.12.1-dev.3401+b483af77f",
+    "@atlaspack/diagnostic": "2.12.1-dev.3443+d1170cfc7",
+    "@atlaspack/plugin": "2.12.1-dev.3443+d1170cfc7",
+    "@atlaspack/rust": "2.12.1-dev.3443+d1170cfc7",
     "nullthrows": "^1.1.1",
     "posthtml": "^0.16.5",
     "posthtml-parser": "^0.10.1",
@@ -26,5 +29,8 @@
     "semver": "^7.5.2",
     "srcset": "4"
   },
-  "gitHead": "b483af77f02d1258c8dad156e097b94f83671d8e"
+  "devDependencies": {
+    "@atlaspack/core": "2.12.1-dev.3443+d1170cfc7"
+  },
+  "gitHead": "d1170cfc79beb290b2a066f472f68f71f7d7cb23"
 }

package/src/HTMLTransformer.js

@@ -1,7 +1,7 @@
 // @flow
 
 import {Transformer} from '@atlaspack/plugin';
-import type {AST} from '@atlaspack/types';
+import type {AST, Transformer as TransformerOpts} from '@atlaspack/types';
 import {parser as parse} from 'posthtml-parser';
 import nullthrows from 'nullthrows';
 import type {PostHTMLExpression, PostHTMLNode} from 'posthtml';
@@ -12,22 +12,28 @@ import collectDependencies from './dependencies';
 import extractInlineAssets from './inline';
 import ThrowableDiagnostic from '@atlaspack/diagnostic';
 
-export default (new Transformer({
+export function parseHTML(code: string, xmlMode: boolean): AST {
+  return {
+    type: 'posthtml',
+    version: '0.4.1',
+    program: parse(code, {
+      lowerCaseTags: true,
+      lowerCaseAttributeNames: true,
+      sourceLocations: true,
+      xmlMode,
+    }),
+  };
+}
+
+export const transformerOpts: TransformerOpts<void> = {
   canReuseAST({ast}) {
     return ast.type === 'posthtml' && semver.satisfies(ast.version, '^0.4.0');
   },
 
   async parse({asset}) {
-    return {
-      type: 'posthtml',
-      version: '0.4.1',
-      program: parse(await asset.getCode(), {
-        lowerCaseTags: true,
-        lowerCaseAttributeNames: true,
-        sourceLocations: true,
-        xmlMode: asset.type === 'xhtml',
-      }),
-    };
+    const code = await asset.getCode();
+    const xmlMode = asset.type === 'xhtml';
+    return parseHTML(code, xmlMode);
   },
 
   async transform({asset, options}) {
@@ -106,7 +112,8 @@ export default (new Transformer({
       }),
     };
   },
-}): Transformer);
+};
+export default (new Transformer(transformerOpts): Transformer);
 
 function findFirstMatch(
   ast: AST,

package/test/HTMLTransformer.test.js

@@ -0,0 +1,361 @@
+// @flow strict-local
+
+import {type PostHTMLNode, render} from 'posthtml-render';
+import {parseHTML, transformerOpts} from '../src/HTMLTransformer';
+import assert from 'assert';
+import type {PluginOptions} from '../../../core/types-internal/src';
+
+function normalizeHTML(code: string): string {
+  const ast = parseHTML(code, true);
+  // $FlowFixMe
+  const result = renderHTML(ast);
+  const lines = result
+    .split('\n')
+    .map(line => line.trim())
+    .filter(line => line);
+  return lines.join('');
+}
+
+function renderHTML(newAST: {|program: PostHTMLNode|}): string {
+  return render(newAST.program, {
+    closingSingleTag: 'slash',
+  });
+}
+
+async function runTestTransform(
+  code: string,
+  options: {|
+    shouldScopeHoist: boolean,
+    supportsEsmodules: boolean,
+    hmrOptions: PluginOptions['hmrOptions'],
+  |} = {
+    shouldScopeHoist: true,
+    supportsEsmodules: true,
+    hmrOptions: null,
+  },
+) {
+  const dependencies = [];
+  let newAST = null;
+  const asset = {
+    getAST: () => parseHTML(code, true),
+    setAST: n => {
+      newAST = n;
+    },
+    addURLDependency(url, opts) {
+      dependencies.push({url, opts});
+      return `dependency-id::${url}`;
+    },
+    env: {
+      shouldScopeHoist: options.shouldScopeHoist,
+      supports(tag: string, defaultValue: boolean) {
+        assert.equal(tag, 'esmodules');
+        assert.equal(defaultValue, true);
+        return options.supportsEsmodules;
+      },
+    },
+    addDependency(specifier, specifierType) {
+      dependencies.push({specifier, specifierType});
+      return 'dependency-id';
+    },
+  };
+
+  const transformInput = {
+    asset,
+    options: {
+      hmrOptions: options.hmrOptions,
+    },
+  };
+  // $FlowFixMe
+  const transformResult = await transformerOpts.transform(transformInput);
+
+  // $FlowFixMe
+  const outputCode = renderHTML(newAST);
+
+  return {dependencies, newAST, outputCode, transformResult, inputAsset: asset};
+}
+
+function normalizeDependencies(dependencies) {
+  return dependencies.map(dependency => ({
+    ...dependency,
+    opts: {
+      ...dependency.opts,
+      env: {
+        // $FlowFixMe
+        ...dependency.opts.env,
+        loc: null,
+      },
+    },
+  }));
+}
+
+function normalizeAssets(assets) {
+  return assets.map(asset => {
+    // $FlowFixMe
+    return {
+      ...asset,
+      env: null,
+      meta: null,
+    };
+  });
+}
+
+describe('HTMLTransformer', () => {
+  it('transform simple script tag', async () => {
+    const code = `
+<html>
+  <body>
+    <script src="input.js"></script>
+  </body>
+</html>
+    `;
+    const {dependencies, outputCode, transformResult, inputAsset} =
+      await runTestTransform(code);
+    assert.equal(
+      outputCode,
+      `
+<html>
+  <body>
+    <script src="dependency-id::input.js"></script>
+  </body>
+</html>
+    `,
+    );
+    assert.deepEqual(normalizeDependencies(dependencies), [
+      {
+        url: 'input.js',
+        opts: {
+          bundleBehavior: 'isolated',
+          env: {
+            loc: null,
+            outputFormat: 'global',
+            sourceType: 'script',
+          },
+          priority: 'parallel',
+        },
+      },
+    ]);
+
+    assert.deepEqual(transformResult, [inputAsset]);
+  });
+
+  it('transforms simple inline script', async () => {
+    const code = `
+<html>
+  <body>
+    <script>console.log('blah'); require('path');</script>
+  </body>
+</html>
+    `;
+    const {transformResult, inputAsset} = await runTestTransform(code);
+    assert(transformResult.includes(inputAsset));
+    const assets = normalizeAssets(transformResult);
+    assert.deepEqual(assets[1], {
+      type: 'js',
+      content: "console.log('blah'); require('path');",
+      uniqueKey: 'a8a37984d2e520b9',
+      bundleBehavior: 'inline',
+      env: null,
+      meta: null,
+    });
+  });
+
+  it('we will get one dependency per asset', async () => {
+    const code = `
+<html>
+  <body>
+    <script src="input1.js"></script>
+    <script src="input2.js"></script>
+  </body>
+</html>
+    `;
+    const {dependencies, outputCode, transformResult, inputAsset} =
+      await runTestTransform(code);
+    assert.equal(
+      outputCode,
+      `
+<html>
+  <body>
+    <script src="dependency-id::input1.js"></script>
+    <script src="dependency-id::input2.js"></script>
+  </body>
+</html>
+    `,
+    );
+    const opts = {
+      bundleBehavior: 'isolated',
+      env: {
+        loc: null,
+        outputFormat: 'global',
+        sourceType: 'script',
+      },
+      priority: 'parallel',
+    };
+    assert.deepEqual(normalizeDependencies(dependencies), [
+      {
+        url: 'input1.js',
+        opts,
+      },
+      {
+        url: 'input2.js',
+        opts,
+      },
+    ]);
+
+    assert.deepEqual(transformResult, [inputAsset]);
+  });
+
+  it('transform simple module tag', async () => {
+    const code = `
+<html>
+  <body>
+    <script src="input.js" type="module"></script>
+  </body>
+</html>
+    `;
+    const {dependencies, outputCode, transformResult, inputAsset} =
+      await runTestTransform(code);
+    assert.equal(
+      outputCode,
+      `
+<html>
+  <body>
+    <script src="dependency-id::input.js" type="module"></script>
+  </body>
+</html>
+    `,
+    );
+    assert.deepEqual(normalizeDependencies(dependencies), [
+      {
+        url: 'input.js',
+        opts: {
+          bundleBehavior: undefined,
+          env: {
+            loc: null,
+            outputFormat: 'esmodule',
+            sourceType: 'module',
+          },
+          priority: 'parallel',
+        },
+      },
+    ]);
+
+    assert.deepEqual(transformResult, [inputAsset]);
+  });
+
+  it('transform simple module tag if there is no support for esmodules', async () => {
+    const code = `
+<html>
+  <body>
+    <script src="input.js" type="module"></script>
+  </body>
+</html>
+    `;
+    const {dependencies, outputCode, transformResult, inputAsset} =
+      await runTestTransform(code, {
+        shouldScopeHoist: true,
+        supportsEsmodules: false,
+        hmrOptions: null,
+      });
+    assert.equal(
+      normalizeHTML(outputCode),
+      normalizeHTML(`
+<html>
+  <body>
+    <script src="dependency-id::input.js" type="module"></script>
+    <script src="dependency-id::input.js" nomodule="" defer=""></script>
+  </body>
+</html>
+    `),
+    );
+    assert.deepEqual(normalizeDependencies(dependencies), [
+      {
+        url: 'input.js',
+        opts: {
+          bundleBehavior: undefined,
+          env: {
+            loc: null,
+            outputFormat: 'global',
+            sourceType: 'module',
+          },
+          priority: 'parallel',
+        },
+      },
+      {
+        url: 'input.js',
+        opts: {
+          bundleBehavior: undefined,
+          env: {
+            loc: null,
+            outputFormat: 'esmodule',
+            sourceType: 'module',
+          },
+          priority: 'parallel',
+        },
+      },
+    ]);
+
+    assert.deepEqual(transformResult, [inputAsset]);
+  });
+
+  it('adds an HMR tag if there are HMR options set', async () => {
+    const code = `
+<html>
+  <body>
+    <script src="input.js"></script>
+  </body>
+</html>
+    `;
+    const {dependencies, outputCode, transformResult, inputAsset} =
+      await runTestTransform(code, {
+        shouldScopeHoist: true,
+        supportsEsmodules: true,
+        hmrOptions: {
+          port: 1234,
+          host: 'localhost',
+        },
+      });
+    assert.equal(
+      normalizeHTML(outputCode),
+      normalizeHTML(`
+<html>
+  <body>
+    <script src="dependency-id::input.js"></script>
+    <script src="dependency-id::hmr.js"></script>
+  </body>
+</html>
+    `),
+    );
+    assert.deepEqual(normalizeDependencies(dependencies), [
+      {
+        url: 'input.js',
+        opts: {
+          bundleBehavior: 'isolated',
+          env: {
+            loc: null,
+            outputFormat: 'global',
+            sourceType: 'script',
+          },
+          priority: 'parallel',
+        },
+      },
+      {
+        url: 'hmr.js',
+        opts: {
+          env: {
+            loc: null,
+          },
+          priority: 'parallel',
+        },
+      },
+    ]);
+
+    assert.deepEqual(transformResult, [
+      inputAsset,
+      {
+        content: '',
+        type: 'js',
+        uniqueKey: 'hmr.js',
+      },
+    ]);
+  });
+});