__COMPLEX__!@$#{}/()_REPLACEMENT__
7 | 8 | 9 | -------------------------------------------------------------------------------- /__tests__/tests.js: -------------------------------------------------------------------------------- 1 | import fs from "fs-extra"; 2 | import htmlTemplate from "../src"; 3 | import os from "os"; 4 | import path from "path"; 5 | import postcss from "rollup-plugin-postcss"; 6 | import { rollup } from "rollup"; 7 | 8 | let TEST_DIR; 9 | 10 | // @todo: This should really be broken out into a separate file, it's getting a bit outrageous. 11 | function getHtmlString( 12 | bundle = "bundle.js", 13 | prefix = "", 14 | attrs = [], 15 | replaceValues = [], 16 | title = "", 17 | css = [] 18 | ) { 19 | return ` 20 | ${ 21 | Boolean(css[0]) 22 | ? ` 23 |${replaceValues[1]}
` : ""} 37 | ${ 38 | typeof bundle !== "string" && bundle.length 39 | ? bundle 40 | .map( 41 | b => `` 42 | ) 43 | .join("") 44 | : `` 45 | } 46 | 47 | 48 | `.replace(/[\s]/gi, ""); 49 | } 50 | 51 | beforeEach(async () => { 52 | TEST_DIR = path.join(os.tmpdir(), "rollup-plugin-generate-html-template"); 53 | await fs.emptyDir(TEST_DIR); 54 | }); 55 | 56 | afterAll(async () => { 57 | await fs.emptyDir(TEST_DIR); 58 | }); 59 | 60 | it("getEntryPoints should return the entry point bundles", () => { 61 | const emptyResult = htmlTemplate.getEntryPoints(); 62 | expect(emptyResult).toHaveLength(0); 63 | 64 | const result = htmlTemplate.getEntryPoints({ 65 | "styles.css": { 66 | fileName: "styles.css", 67 | isAsset: true, 68 | source: "", 69 | }, 70 | "entry-main.js": { 71 | fileName: "entry-main.js", 72 | isDynamicEntry: false, 73 | isEntry: true, 74 | }, 75 | "entry-bar.js": { 76 | fileName: "entry-bar.js", 77 | isDynamicEntry: false, 78 | isEntry: true, 79 | }, 80 | "chunk-f1e52583.js": { 81 | fileName: "chunk-f1e52583.js", 82 | isDynamicEntry: true, 83 | isEntry: false, 84 | }, 85 | }); 86 | const expected = ["entry-main.js", "entry-bar.js"]; 87 | 88 | expect(result).toHaveLength(2); 89 | expect(result).toEqual(expect.arrayContaining(expected)); 90 | }); 91 | 92 | it("should correctly add the attributes to the injected script tag", async () => { 93 | const BUNDLE_PATH = path.join(TEST_DIR, "bundle.js"); 94 | // Defaults to not renaming the template. 95 | const TEMPLATE_PATH = path.join(TEST_DIR, "template.html"); 96 | 97 | const input = { 98 | input: `${__dirname}/fixtures/index.js`, 99 | plugins: [ 100 | htmlTemplate({ 101 | template: `${__dirname}/fixtures/template.html`, 102 | attrs: ["async", "defer"], 103 | }), 104 | ], 105 | }; 106 | const output = { 107 | file: BUNDLE_PATH, 108 | format: "iife", 109 | name: "test", 110 | }; 111 | const bundle = await rollup(input); 112 | await bundle.write(output); 113 | 114 | // Ensure files exist 115 | await expect(fs.pathExists(BUNDLE_PATH)).resolves.toEqual(true); 116 | await expect(fs.pathExists(TEMPLATE_PATH)).resolves.toEqual(true); 117 | 118 | // Ensure output has bundle injected 119 | const generatedTemplate = await fs.readFile(TEMPLATE_PATH, "utf8"); 120 | expect(generatedTemplate.replace(/[\s]/gi, "")).toEqual( 121 | getHtmlString("bundle.js", "", ["async", "defer"]) 122 | ); 123 | }); 124 | 125 | it("correctly replaces all HTML variables", async () => { 126 | const BUNDLE_PATH = path.join(TEST_DIR, "bundle.js"); 127 | // Defaults to not renaming the template. 128 | const TEMPLATE_PATH = path.join(TEST_DIR, "template_replace.html"); 129 | const input = { 130 | input: `${__dirname}/fixtures/index.js`, 131 | plugins: [ 132 | htmlTemplate({ 133 | template: `${__dirname}/fixtures/template_replace.html`, 134 | replaceVars: { 135 | __HOME_URL__: "cool.com", 136 | "__COMPLEX__!@$#{}/()_REPLACEMENT__": "complex replacement", 137 | }, 138 | }), 139 | ], 140 | }; 141 | const output = { 142 | file: BUNDLE_PATH, 143 | format: "iife", 144 | name: "test", 145 | }; 146 | const bundle = await rollup(input); 147 | await bundle.write(output); 148 | 149 | // Ensure files exist 150 | await expect(fs.pathExists(BUNDLE_PATH)).resolves.toEqual(true); 151 | await expect(fs.pathExists(TEMPLATE_PATH)).resolves.toEqual(true); 152 | 153 | // Ensure output has bundle injected 154 | const generatedTemplate = await fs.readFile(TEMPLATE_PATH, "utf8"); 155 | expect(generatedTemplate.replace(/[\s]/gi, "")).toEqual( 156 | getHtmlString("bundle.js", "", [], ["cool.com", "complex replacement"]) 157 | ); 158 | }); 159 | 160 | it("should copy the template to the output dir with an injected single bundle", async () => { 161 | const BUNDLE_PATH = path.join(TEST_DIR, "bundle.js"); 162 | // Defaults to not renaming the template. 163 | const TEMPLATE_PATH = path.join(TEST_DIR, "template.html"); 164 | 165 | const input = { 166 | input: `${__dirname}/fixtures/index.js`, 167 | plugins: [ 168 | htmlTemplate({ 169 | template: `${__dirname}/fixtures/template.html`, 170 | }), 171 | ], 172 | }; 173 | const output = { 174 | file: BUNDLE_PATH, 175 | format: "iife", 176 | name: "test", 177 | }; 178 | const bundle = await rollup(input); 179 | await bundle.write(output); 180 | 181 | // Ensure files exist 182 | await expect(fs.pathExists(BUNDLE_PATH)).resolves.toEqual(true); 183 | await expect(fs.pathExists(TEMPLATE_PATH)).resolves.toEqual(true); 184 | 185 | // Ensure output has bundle injected 186 | const generatedTemplate = await fs.readFile(TEMPLATE_PATH, "utf8"); 187 | expect(generatedTemplate.replace(/[\s]/gi, "")).toEqual( 188 | getHtmlString("bundle.js") 189 | ); 190 | }); 191 | 192 | it("should rename templates if provided a target option.", async () => { 193 | const BUNDLE_PATH = path.join(TEST_DIR, "bundle.js"); 194 | const TEMPLATE_PATH = path.join(TEST_DIR, "index.html"); 195 | 196 | const input = { 197 | input: `${__dirname}/fixtures/index.js`, 198 | plugins: [ 199 | htmlTemplate({ 200 | template: `${__dirname}/fixtures/template.html`, 201 | target: "index.html", 202 | }), 203 | ], 204 | }; 205 | const output = { 206 | file: BUNDLE_PATH, 207 | format: "iife", 208 | name: "test", 209 | }; 210 | const bundle = await rollup(input); 211 | await bundle.write(output); 212 | 213 | // Ensure files exist 214 | await expect(fs.pathExists(BUNDLE_PATH)).resolves.toEqual(true); 215 | await expect(fs.pathExists(TEMPLATE_PATH)).resolves.toEqual(true); 216 | }); 217 | 218 | it("should save template into directory if provided target option is a directory.", async () => { 219 | const BUNDLE_PATH = path.join(TEST_DIR, "public/build/bundle.js"); 220 | const TEMPLATE_PATH = path.join(TEST_DIR, "public/index.html"); 221 | 222 | const input = { 223 | input: `${__dirname}/fixtures/index.js`, 224 | plugins: [ 225 | htmlTemplate({ 226 | template: `${__dirname}/fixtures/template.html`, 227 | target: TEMPLATE_PATH, 228 | }), 229 | ], 230 | }; 231 | const output = { 232 | file: BUNDLE_PATH, 233 | format: "iife", 234 | name: "test", 235 | }; 236 | const bundle = await rollup(input); 237 | await bundle.write(output); 238 | 239 | // Ensure files exist 240 | expect(fs.pathExists(BUNDLE_PATH)).resolves.toEqual(true); 241 | expect(fs.pathExists(TEMPLATE_PATH)).resolves.toEqual(true); 242 | const resultHtml = await fs.readFile(TEMPLATE_PATH, "utf8"); 243 | const [, srcString] = resultHtml.match(/44 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 45 |
46 || File | 53 |54 | | Statements | 55 |56 | | Branches | 57 |58 | | Functions | 59 |60 | | Lines | 61 |62 | |
|---|---|---|---|---|---|---|---|---|---|
| index.js | 66 |100% | 68 |47/47 | 69 |93.33% | 70 |28/30 | 71 |100% | 72 |10/10 | 73 |100% | 74 |46/46 | 75 |
44 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 45 |
46 || 1 50 | 2 51 | 3 52 | 4 53 | 5 54 | 6 55 | 7 56 | 8 57 | 9 58 | 10 59 | 11 60 | 12 61 | 13 62 | 14 63 | 15 64 | 16 65 | 17 66 | 18 67 | 19 68 | 20 69 | 21 70 | 22 71 | 23 72 | 24 73 | 25 74 | 26 75 | 27 76 | 28 77 | 29 78 | 30 79 | 31 80 | 32 81 | 33 82 | 34 83 | 35 84 | 36 85 | 37 86 | 38 87 | 39 88 | 40 89 | 41 90 | 42 91 | 43 92 | 44 93 | 45 94 | 46 95 | 47 96 | 48 97 | 49 98 | 50 99 | 51 100 | 52 101 | 53 102 | 54 103 | 55 104 | 56 105 | 57 106 | 58 107 | 59 108 | 60 109 | 61 110 | 62 111 | 63 112 | 64 113 | 65 114 | 66 115 | 67 116 | 68 117 | 69 118 | 70 119 | 71 120 | 72 121 | 73 122 | 74 123 | 75 124 | 76 125 | 77 126 | 78 127 | 79 128 | 80 129 | 81 130 | 82 131 | 83 132 | 84 133 | 85 134 | 86 135 | 87 136 | 88 137 | 89 138 | 90 139 | 91 140 | 92 141 | 93 142 | 94 143 | 95 144 | 96 145 | 97 146 | 98 147 | 99 148 | 100 149 | 101 150 | 102 151 | 103 152 | 104 153 | 105 154 | 106 155 | 107 156 | 108 157 | 109 158 | 110 159 | 111 160 | 112 161 | 113 162 | 114 163 | 115 164 | 116 165 | 117 166 | 118 167 | 119 168 | 120 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 1x 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 10x 184 | 10x 185 | 10x 186 | 187 | 188 | 189 | 10x 190 | 10x 191 | 10x 192 | 10x 193 | 194 | 195 | 9x 196 | 197 | 9x 198 | 9x 199 | 200 | 9x 201 | 1x 202 | 1x 203 | 1x 204 | 205 | 206 | 207 | 9x 208 | 209 | 210 | 211 | 9x 212 | 213 | 214 | 9x 215 | 216 | 217 | 9x 218 | 9x 219 | 1x 220 | 1x 221 | 2x 222 | 2x 223 | 2x 224 | 225 | 226 | 227 | 9x 228 | 229 | 230 | 9x 231 | 232 | 233 | 9x 234 | 235 | 236 | 12x 237 | 238 | 239 | 1x 240 | 241 | 242 | 243 | 244 | 245 | 9x 246 | 247 | 248 | 9x 249 | 250 | 251 | 12x 252 | 253 | 254 | 11x 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 9x 263 | 9x 264 | 9x 265 | 9x 266 | 267 | 1x 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 2x 276 | 2x 277 | 4x 278 | 2x 279 | 280 | 4x 281 | 282 | 283 | 284 | 285 | 1x 286 | 1x 287 | | "use strict";
288 |
289 | import escapeStringRegexp from "escape-string-regexp";
290 | import fs from "fs-extra";
291 | import path from "path";
292 |
293 | const INVALID_ARGS_ERROR =
294 | "[rollup-plugin-generate-html-template] You did not provide a template or target!";
295 |
296 | /**
297 | * Takes an HTML file as a template then adds the bundle to the final file.
298 | * @param {Object} options The options object.
299 | * @return {Object} The rollup code object.
300 | */
301 | export default function htmlTemplate(options = {}) {
302 | const { template, target, prefix, attrs, replaceVars } = options;
303 | const scriptTagAttributes = attrs && attrs.length > 0 ? attrs : [];
304 | return {
305 | name: "html-template",
306 |
307 | async generateBundle(outputOptions, bundleInfo) {
308 | const bundleKeys = Object.keys(bundleInfo);
309 | return new Promise(async (resolve, reject) => {
310 | try {
311 | if (!target && !template) throw new Error(INVALID_ARGS_ERROR);
312 |
313 | const outputDir =
314 | outputOptions.dir || path.dirname(outputOptions.file);
315 |
316 | let targetDir = outputDir;
317 | let bundleDirString = "";
318 |
319 | if (target && path.dirname(target) !== ".") {
320 | targetDir = path.dirname(target);
321 | const bundleDir = path.relative(targetDir, outputDir);
322 | bundleDirString = bundleDir && `${bundleDir}/`;
323 | }
324 |
325 | // Get the target file name.
326 | const targetName = path.basename(target || template);
327 |
328 | // Add the file suffix if it isn't there.
329 | const targetFile =
330 | targetName.indexOf(".html") < 0 ? `${targetName}.html` : targetName;
331 |
332 | // Read the file
333 | const buffer = await fs.readFile(template);
334 |
335 | // Convert buffer to a string and get the </body> index
336 | let tmpl = buffer.toString("utf8");
337 | if (replaceVars) {
338 | const replacePairs = Object.entries(replaceVars);
339 | replacePairs.forEach(([pattern, replacement]) => {
340 | const escapedPattern = escapeStringRegexp(pattern);
341 | const regex = new RegExp(`${escapedPattern}`, "g");
342 | tmpl = tmpl.replace(regex, replacement);
343 | });
344 | }
345 |
346 | let injected = tmpl;
347 |
348 | // Inject the style tags before the head close tag
349 | const headCloseTag = injected.lastIndexOf("</head>");
350 |
351 | // Inject the script tags before the body close tag
352 | injected = [
353 | injected.slice(0, headCloseTag),
354 | ...bundleKeys
355 | .filter(f => path.extname(f) === ".css")
356 | .map(
357 | b =>
358 | `<link rel="stylesheet" type="text/css" href="${prefix ||
359 | ""}${b}">\n`
360 | ),
361 | injected.slice(headCloseTag, injected.length),
362 | ].join("");
363 |
364 | const bodyCloseTag = injected.lastIndexOf("</body>");
365 |
366 | // Inject the script tags before the body close tag
367 | injected = [
368 | injected.slice(0, bodyCloseTag),
369 | ...bundleKeys
370 | .filter(f => path.extname(f) === ".js")
371 | .map(
372 | b =>
373 | `<script ${scriptTagAttributes.join(
374 | " "
375 | )} src="${bundleDirString}${prefix || ""}${b}"></script>\n`
376 | ),
377 | injected.slice(bodyCloseTag, injected.length),
378 | ].join("");
379 |
380 | // write the injected template to a file
381 | const finalTarget = path.join(targetDir, targetFile);
382 | await fs.ensureFile(finalTarget);
383 | await fs.writeFile(finalTarget, injected);
384 | resolve();
385 | } catch (e) {
386 | reject(e);
387 | }
388 | });
389 | },
390 | };
391 | }
392 |
393 | function getEntryPoints(bundleInfo = {}) {
394 | const bundles = Object.keys(bundleInfo);
395 | return bundles.reduce((entryPoints, bundle) => {
396 | if (bundleInfo[bundle].isEntry === true) {
397 | entryPoints.push(bundle);
398 | }
399 | return entryPoints;
400 | }, []);
401 | }
402 |
403 | // Expose getEntryPoints for testing
404 | htmlTemplate.getEntryPoints = getEntryPoints;
405 | htmlTemplate.INVALID_ARGS_ERROR = INVALID_ARGS_ERROR;
406 | |