UNPKG

polymer-build/lib/test/html-transform_test.js

Version:

12.6 kBJavaScriptView Raw

1"use strict";
2/**
* @license
* Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
15Object.defineProperty(exports, "__esModule", { value: true });
16const chai_1 = require("chai");
17const dom5 = require("dom5/lib/index-next");
18const parse5 = require("parse5");
19const path = require("path");
20const html_transform_1 = require("../html-transform");
21const util_1 = require("./util");
22/**
* Replaces the Babel helpers, Require.js AMD loader, and WCT hack inline
* scripts into just some comments, to make test comparison simpler.
*/
26function replaceGiantScripts(html) {
  const document = parse5.parse(html);
  for (const script of dom5.queryAll(document, dom5.predicates.hasTagName('script'))) {
      const js = dom5.getTextContent(script);
      if (js.includes('window.define=')) {
          dom5.setTextContent(script, '// amd loader');
      }
      else if (js.includes('wrapNativeSuper=')) {
          dom5.setTextContent(script, '// babel helpers full');
      }
      else if (js.includes('interopRequireDefault=')) {
          dom5.setTextContent(script, '// babel helpers amd');
      }
      else if (js.includes('regeneratorRuntime')) {
          dom5.setTextContent(script, '// regenerator runtime');
      }
      else if (js.includes('window._wctCallback =')) {
          dom5.setTextContent(script, '// wct hack 1/2');
      }
      else if (js.includes('window._wctCallback()')) {
          dom5.setTextContent(script, '// wct hack 2/2');
      }
  }
  return parse5.serialize(document);
50}
51suite('htmlTransform', () => {
  const fixtureRoot = path.join(__dirname, '..', '..', 'test-fixtures', 'npm-modules');
  test('minifies html', () => {
      const input = `
    <html>
      <body>
        <!-- pointless comment -->
        <p>Hello World!</p>
      </body>
    </html>`;
      const expected = `<html><body><p>Hello World!</p></body></html>`;
      chai_1.assert.equal(html_transform_1.htmlTransform(input, { minifyHtml: true }), expected);
  });
  test('does not add unnecessary tags', () => {
      const input = `<p>Just me</p>`;
      chai_1.assert.equal(html_transform_1.htmlTransform(input, {}), input);
  });
  test('compiles inline JavaScript to ES5', () => {
      const input = `
    <html><head></head><body>
      <script>const foo = 3;</script>
    </body></html>`;
      const expected = `
    <html><head></head><body>
      <script>var foo = 3;</script>
    </body></html>`;
      util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, { js: { compile: true } }), expected);
  });
  test('minifies inline JavaScript', () => {
      const input = `
    <html><head></head><body>
      <script>const foo = 3;</script>
    </body></html>`;
      const expected = `
    <html><head></head><body>
      <script>const foo=3;</script>
    </body></html>`;
      util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, { js: { minify: true } }), expected);
  });
  test('injects full babel helpers', () => {
      const input = `
    <html><head></head><body>
      <script>const foo = 3;</script>
    </body></html>`;
      const expected = `
    <html><head></head><body>
      <script>// babel helpers full</script>
      <script>const foo = 3;</script>
    </body></html>`;
      const result = html_transform_1.htmlTransform(input, { injectBabelHelpers: 'full' });
      util_1.assertEqualIgnoringWhitespace(replaceGiantScripts(result), expected);
  });
  test('injects AMD babel helpers', () => {
      const input = `
    <html><head></head><body>
      <script>const foo = 3;</script>
    </body></html>`;
      const expected = `
    <html><head></head><body>
      <script>// babel helpers amd</script>
      <script>const foo = 3;</script>
    </body></html>`;
      const result = html_transform_1.htmlTransform(input, { injectBabelHelpers: 'amd' });
      util_1.assertEqualIgnoringWhitespace(replaceGiantScripts(result), expected);
  });
  test('injects regenerator runtime', () => {
      const input = `
    <html><head></head><body>
      <script>const foo = 3;</script>
    </body></html>`;
      const expected = `
    <html><head></head><body>
      <script>// regenerator runtime</script>
      <script>const foo = 3;</script>
    </body></html>`;
      const result = html_transform_1.htmlTransform(input, { injectRegeneratorRuntime: true });
      util_1.assertEqualIgnoringWhitespace(replaceGiantScripts(result), expected);
  });
  test('rewrites bare module specifiers to paths', () => {
      const filePath = path.join(fixtureRoot, 'foo.html');
      const input = `
    <html><head></head><body>
      <script type="module">
        import { dep1 } from 'dep1';
      </script>
    </body></html>`;
      const expected = `
    <html><head></head><body>
      <script type="module">
        import { dep1 } from "./node_modules/dep1/index.js";
      </script>
    </body></html>`;
      util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, { js: { moduleResolution: 'node', filePath } }), expected);
  });
  suite('transform ES modules to AMD', () => {
      test('external script', () => {
          const input = `
      <html><head></head><body>
        <script type="module" src="depA.js"></script>
      </body></html>`;
          const expected = `
      <html><head></head><body>
        <script>define(['depA.js']);</script>
      </body></html>`;
          util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, {
              js: {
                  transformModulesToAmd: true,
              }
          }), expected);
      });
      test('inline script', () => {
          const input = `
      <html><head></head><body>
        <script type="module">
          import { depA } from './depA.js';
          console.log(depA);
        </script>
      </body></html>`;
          const expected = `
      <html><head></head><body>
        <script>
          define(["./depA.js"], function (_depA) {
            "use strict";
            console.log(_depA.depA);
          });
        </script>
      </body></html>`;
          util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, {
              js: {
                  transformModulesToAmd: true,
                  filePath: path.join(fixtureRoot, 'foo.html'),
                  rootDir: fixtureRoot,
              },
          }), expected);
      });
      test('chains inline and external module scripts', () => {
          const input = `
      <html><head></head><body>
        <script type="module">import { depA } from './depA.js';</script>
        <script type="module" src="./depB.js"></script>
        <script type="module">import { depC } from './depC.js';</script>
        <script type="module">'no imports';</script>
        <script type="module" src="./depD.js"></script>
      </body></html>`;
          const expected = `
    <html><head></head><body>
      <script>define(["./depA.js"], function (_depA) {"use strict";});</script>
      <script>define(['./depB.js']);</script>
      <script>define(["./depC.js"], function (_depC) {"use strict";});</script>
      <script>define([], function () {"use strict";'no imports';});</script>
      <script>define(['./depD.js']);</script>
    </body></html>`;
          util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, {
              js: {
                  transformModulesToAmd: true,
                  filePath: path.join(fixtureRoot, 'foo.html'),
                  rootDir: fixtureRoot,
              }
          }), expected);
      });
      test('resolves names and does AMD transform', () => {
          const input = `
      <html><head></head><body>
        <script type="module">import { dep1 } from 'dep1';</script>
      </body></html>`;
          const expected = `
    <html><head></head><body>
      <script>define(["./node_modules/dep1/index.js"], function (_index) {"use strict";});</script>
    </body></html>`;
          util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, {
              js: {
                  transformModulesToAmd: true,
                  moduleResolution: 'node',
                  filePath: path.join(fixtureRoot, 'foo.html'),
                  rootDir: fixtureRoot,
              }
          }), expected);
      });
      test('compiles non-module script without AMD plugin', () => {
          const input = `
      <html><head></head><body>
        <script>const foo = 3;</script>
      </body></html>`;
          const expected = `
      <html><head></head><body>
        <script>var foo = 3;</script>
      </body></html>`;
          util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, {
              js: {
                  compile: true,
                  transformModulesToAmd: true,
              }
          }), expected);
      });
      test('does not transform when "nomodule" script present', () => {
          const input = `
      <html><head></head><body>
        <script type="module">
          import { depA } from './depA.js';
          console.log(depA);
        </script>
252
        <script nomodule="">
          // Handle browsers without ES modules some other way.
        </script>
      </body></html>`;
          util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, { js: { transformModulesToAmd: true } }), input);
      });
      test('adds AMD loader to entry point before first module', () => {
          const input = `
      <html><head></head><body>
        <script>console.log('non-module');</script>
263
        <script type="module" src="depA.js"></script>
      </body></html>`;
          const expected = `
      <html><head></head><body>
        <script>console.log('non-module');</script>
269
        <script>// amd loader</script>
271
        <script>define(['depA.js']);</script>
      </body></html>`;
          const result = html_transform_1.htmlTransform(input, {
              injectAmdLoader: true,
              js: {
                  transformModulesToAmd: true,
              },
          });
          util_1.assertEqualIgnoringWhitespace(replaceGiantScripts(result), expected);
      });
      test('does not add AMD loader when no modules', () => {
          const input = `
      <html><head></head><body>
        <script>console.log('non-module');</script>
        <script src="depA.js"></script>
      </body></html>`;
          const result = html_transform_1.htmlTransform(input, {
              injectAmdLoader: true,
              js: {
                  transformModulesToAmd: true,
              },
          });
          util_1.assertEqualIgnoringWhitespace(result, input);
      });
      test('adds hack for Web Component Tester', () => {
          const input = `
      <html><head></head><body>
        <script src="web-component-tester/browser.js"></script>
300
        <script type="module" src="depA.js"></script>
      </body></html>`;
          const expected = `
      <html><head></head><body>
        <script>// wct hack 1/2</script>
306
        <script src="web-component-tester/browser.js"></script>
308
        <script>// amd loader</script>
310
        <script>// wct hack 2/2</script>
312
        <script>define(['depA.js']);</script>
      </body></html>`;
          const result = html_transform_1.htmlTransform(input, {
              injectAmdLoader: true,
              js: {
                  transformModulesToAmd: true,
              },
          });
          util_1.assertEqualIgnoringWhitespace(replaceGiantScripts(result), expected);
      });
  });
324});
325//# sourceMappingURL=html-transform_test.js.map
\No newline at end of file

1	`"use strict";`
2	`/**`
3	`* @license`
4	`* Copyright (c) 2018 The Polymer Project Authors. All rights reserved.`
5	`* This code may only be used under the BSD style license found at`
6	`* http://polymer.github.io/LICENSE.txt`
7	`* The complete set of authors may be found at`
8	`* http://polymer.github.io/AUTHORS.txt`
9	`* The complete set of contributors may be found at`
10	`* http://polymer.github.io/CONTRIBUTORS.txt`
11	`* Code distributed by Google as part of the polymer project is also`
12	`* subject to an additional IP rights grant found at`
13	`* http://polymer.github.io/PATENTS.txt`
14	`*/`
15	`Object.defineProperty(exports, "__esModule", { value: true });`
16	`const chai_1 = require("chai");`
17	`const dom5 = require("dom5/lib/index-next");`
18	`const parse5 = require("parse5");`
19	`const path = require("path");`
20	`const html_transform_1 = require("../html-transform");`
21	`const util_1 = require("./util");`
22	`/**`
23	`* Replaces the Babel helpers, Require.js AMD loader, and WCT hack inline`
24	`* scripts into just some comments, to make test comparison simpler.`
25	`*/`
26	`function replaceGiantScripts(html) {`
27	`const document = parse5.parse(html);`
28	`for (const script of dom5.queryAll(document, dom5.predicates.hasTagName('script'))) {`
29	`const js = dom5.getTextContent(script);`
30	`if (js.includes('window.define=')) {`
31	`dom5.setTextContent(script, '// amd loader');`
32	`}`
33	`else if (js.includes('wrapNativeSuper=')) {`
34	`dom5.setTextContent(script, '// babel helpers full');`
35	`}`
36	`else if (js.includes('interopRequireDefault=')) {`
37	`dom5.setTextContent(script, '// babel helpers amd');`
38	`}`
39	`else if (js.includes('regeneratorRuntime')) {`
40	`dom5.setTextContent(script, '// regenerator runtime');`
41	`}`
42	`else if (js.includes('window._wctCallback =')) {`
43	`dom5.setTextContent(script, '// wct hack 1/2');`
44	`}`
45	`else if (js.includes('window._wctCallback()')) {`
46	`dom5.setTextContent(script, '// wct hack 2/2');`
47	`}`
48	`}`
49	`return parse5.serialize(document);`
50	`}`
51	`suite('htmlTransform', () => {`
52	`const fixtureRoot = path.join(__dirname, '..', '..', 'test-fixtures', 'npm-modules');`
53	`test('minifies html', () => {`
54	const input = `
55	`<html>`
56	`<body>`
57	`<!-- pointless comment -->`
58	`<p>Hello World!</p>`
59	`</body>`
60	</html>`;
61	const expected = `<html><body><p>Hello World!</p></body></html>`;
62	`chai_1.assert.equal(html_transform_1.htmlTransform(input, { minifyHtml: true }), expected);`
63	`});`
64	`test('does not add unnecessary tags', () => {`
65	const input = `<p>Just me</p>`;
66	`chai_1.assert.equal(html_transform_1.htmlTransform(input, {}), input);`
67	`});`
68	`test('compiles inline JavaScript to ES5', () => {`
69	const input = `
70	`<html><head></head><body>`
71	`<script>const foo = 3;</script>`
72	</body></html>`;
73	const expected = `
74	`<html><head></head><body>`
75	`<script>var foo = 3;</script>`
76	</body></html>`;
77	`util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, { js: { compile: true } }), expected);`
78	`});`
79	`test('minifies inline JavaScript', () => {`
80	const input = `
81	`<html><head></head><body>`
82	`<script>const foo = 3;</script>`
83	</body></html>`;
84	const expected = `
85	`<html><head></head><body>`
86	`<script>const foo=3;</script>`
87	</body></html>`;
88	`util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, { js: { minify: true } }), expected);`
89	`});`
90	`test('injects full babel helpers', () => {`
91	const input = `
92	`<html><head></head><body>`
93	`<script>const foo = 3;</script>`
94	</body></html>`;
95	const expected = `
96	`<html><head></head><body>`
97	`<script>// babel helpers full</script>`
98	`<script>const foo = 3;</script>`
99	</body></html>`;
100	`const result = html_transform_1.htmlTransform(input, { injectBabelHelpers: 'full' });`
101	`util_1.assertEqualIgnoringWhitespace(replaceGiantScripts(result), expected);`
102	`});`
103	`test('injects AMD babel helpers', () => {`
104	const input = `
105	`<html><head></head><body>`
106	`<script>const foo = 3;</script>`
107	</body></html>`;
108	const expected = `
109	`<html><head></head><body>`
110	`<script>// babel helpers amd</script>`
111	`<script>const foo = 3;</script>`
112	</body></html>`;
113	`const result = html_transform_1.htmlTransform(input, { injectBabelHelpers: 'amd' });`
114	`util_1.assertEqualIgnoringWhitespace(replaceGiantScripts(result), expected);`
115	`});`
116	`test('injects regenerator runtime', () => {`
117	const input = `
118	`<html><head></head><body>`
119	`<script>const foo = 3;</script>`
120	</body></html>`;
121	const expected = `
122	`<html><head></head><body>`
123	`<script>// regenerator runtime</script>`
124	`<script>const foo = 3;</script>`
125	</body></html>`;
126	`const result = html_transform_1.htmlTransform(input, { injectRegeneratorRuntime: true });`
127	`util_1.assertEqualIgnoringWhitespace(replaceGiantScripts(result), expected);`
128	`});`
129	`test('rewrites bare module specifiers to paths', () => {`
130	`const filePath = path.join(fixtureRoot, 'foo.html');`
131	const input = `
132	`<html><head></head><body>`
133	`<script type="module">`
134	`import { dep1 } from 'dep1';`
135	`</script>`
136	</body></html>`;
137	const expected = `
138	`<html><head></head><body>`
139	`<script type="module">`
140	`import { dep1 } from "./node_modules/dep1/index.js";`
141	`</script>`
142	</body></html>`;
143	`util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, { js: { moduleResolution: 'node', filePath } }), expected);`
144	`});`
145	`suite('transform ES modules to AMD', () => {`
146	`test('external script', () => {`
147	const input = `
148	`<html><head></head><body>`
149	`<script type="module" src="depA.js"></script>`
150	</body></html>`;
151	const expected = `
152	`<html><head></head><body>`
153	`<script>define(['depA.js']);</script>`
154	</body></html>`;
155	`util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, {`
156	`js: {`
157	`transformModulesToAmd: true,`
158	`}`
159	`}), expected);`
160	`});`
161	`test('inline script', () => {`
162	const input = `
163	`<html><head></head><body>`
164	`<script type="module">`
165	`import { depA } from './depA.js';`
166	`console.log(depA);`
167	`</script>`
168	</body></html>`;
169	const expected = `
170	`<html><head></head><body>`
171	`<script>`
172	`define(["./depA.js"], function (_depA) {`
173	`"use strict";`
174	`console.log(_depA.depA);`
175	`});`
176	`</script>`
177	</body></html>`;
178	`util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, {`
179	`js: {`
180	`transformModulesToAmd: true,`
181	`filePath: path.join(fixtureRoot, 'foo.html'),`
182	`rootDir: fixtureRoot,`
183	`},`
184	`}), expected);`
185	`});`
186	`test('chains inline and external module scripts', () => {`
187	const input = `
188	`<html><head></head><body>`
189	`<script type="module">import { depA } from './depA.js';</script>`
190	`<script type="module" src="./depB.js"></script>`
191	`<script type="module">import { depC } from './depC.js';</script>`
192	`<script type="module">'no imports';</script>`
193	`<script type="module" src="./depD.js"></script>`
194	</body></html>`;
195	const expected = `
196	`<html><head></head><body>`
197	`<script>define(["./depA.js"], function (_depA) {"use strict";});</script>`
198	`<script>define(['./depB.js']);</script>`
199	`<script>define(["./depC.js"], function (_depC) {"use strict";});</script>`
200	`<script>define([], function () {"use strict";'no imports';});</script>`
201	`<script>define(['./depD.js']);</script>`
202	</body></html>`;
203	`util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, {`
204	`js: {`
205	`transformModulesToAmd: true,`
206	`filePath: path.join(fixtureRoot, 'foo.html'),`
207	`rootDir: fixtureRoot,`
208	`}`
209	`}), expected);`
210	`});`
211	`test('resolves names and does AMD transform', () => {`
212	const input = `
213	`<html><head></head><body>`
214	`<script type="module">import { dep1 } from 'dep1';</script>`
215	</body></html>`;
216	const expected = `
217	`<html><head></head><body>`
218	`<script>define(["./node_modules/dep1/index.js"], function (_index) {"use strict";});</script>`
219	</body></html>`;
220	`util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, {`
221	`js: {`
222	`transformModulesToAmd: true,`
223	`moduleResolution: 'node',`
224	`filePath: path.join(fixtureRoot, 'foo.html'),`
225	`rootDir: fixtureRoot,`
226	`}`
227	`}), expected);`
228	`});`
229	`test('compiles non-module script without AMD plugin', () => {`
230	const input = `
231	`<html><head></head><body>`
232	`<script>const foo = 3;</script>`
233	</body></html>`;
234	const expected = `
235	`<html><head></head><body>`
236	`<script>var foo = 3;</script>`
237	</body></html>`;
238	`util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, {`
239	`js: {`
240	`compile: true,`
241	`transformModulesToAmd: true,`
242	`}`
243	`}), expected);`
244	`});`
245	`test('does not transform when "nomodule" script present', () => {`
246	const input = `
247	`<html><head></head><body>`
248	`<script type="module">`
249	`import { depA } from './depA.js';`
250	`console.log(depA);`
251	`</script>`
252
253	`<script nomodule="">`
254	`// Handle browsers without ES modules some other way.`
255	`</script>`
256	</body></html>`;
257	`util_1.assertEqualIgnoringWhitespace(html_transform_1.htmlTransform(input, { js: { transformModulesToAmd: true } }), input);`
258	`});`
259	`test('adds AMD loader to entry point before first module', () => {`
260	const input = `
261	`<html><head></head><body>`
262	`<script>console.log('non-module');</script>`
263
264	`<script type="module" src="depA.js"></script>`
265	</body></html>`;
266	const expected = `
267	`<html><head></head><body>`
268	`<script>console.log('non-module');</script>`
269
270	`<script>// amd loader</script>`
271
272	`<script>define(['depA.js']);</script>`
273	</body></html>`;
274	`const result = html_transform_1.htmlTransform(input, {`
275	`injectAmdLoader: true,`
276	`js: {`
277	`transformModulesToAmd: true,`
278	`},`
279	`});`
280	`util_1.assertEqualIgnoringWhitespace(replaceGiantScripts(result), expected);`
281	`});`
282	`test('does not add AMD loader when no modules', () => {`
283	const input = `
284	`<html><head></head><body>`
285	`<script>console.log('non-module');</script>`
286	`<script src="depA.js"></script>`
287	</body></html>`;
288	`const result = html_transform_1.htmlTransform(input, {`
289	`injectAmdLoader: true,`
290	`js: {`
291	`transformModulesToAmd: true,`
292	`},`
293	`});`
294	`util_1.assertEqualIgnoringWhitespace(result, input);`
295	`});`
296	`test('adds hack for Web Component Tester', () => {`
297	const input = `
298	`<html><head></head><body>`
299	`<script src="web-component-tester/browser.js"></script>`
300
301	`<script type="module" src="depA.js"></script>`
302	</body></html>`;
303	const expected = `
304	`<html><head></head><body>`
305	`<script>// wct hack 1/2</script>`
306
307	`<script src="web-component-tester/browser.js"></script>`
308
309	`<script>// amd loader</script>`
310
311	`<script>// wct hack 2/2</script>`
312
313	`<script>define(['depA.js']);</script>`
314	</body></html>`;
315	`const result = html_transform_1.htmlTransform(input, {`
316	`injectAmdLoader: true,`
317	`js: {`
318	`transformModulesToAmd: true,`
319	`},`
320	`});`
321	`util_1.assertEqualIgnoringWhitespace(replaceGiantScripts(result), expected);`
322	`});`
323	`});`
324	`});`
325	`//# sourceMappingURL=html-transform_test.js.map`
\	No newline at end of file