[squash] feat(index): add support to export HTML as a template {Function} (options.template)

michael-ciniawsky · michael-ciniawsky · commit 9d9db02b9077 · 2017-12-11T04:30:57.000+01:00
diff --git a/src/index.js b/src/index.js
@@ -49,18 +49,24 @@ export default function loader(html) {
           .join('\n');
       }
 
-      // TODO
+      const imports = '\n';
+
       // #120 - Support exporting a template function
       //
       // import template from 'file.html'
       //
       // const html = template({...locals})
+      const locals = typeof options.template === 'string'
+        ? options.template
+        : '_';
 
-      const imports = '\n';
+      const html = options.template
+        ? `function (${locals}) { return \`${result.html}\`; }`
+        : `\`${result.html}\``
 
       result = [
         `// HTML Imports\n${imports}\n`,
-        `// HTML Content\nexport default \`${result.html}\``,
+        `// HTML Content\nexport default ${html}`,
       ].join('\n');
 
       cb(null, result);
diff --git a/src/options.json b/src/options.json
@@ -8,7 +8,7 @@
       "type": "boolean"
     },
     "template": {
-      "type": ["boolean", "object"]
+      "type": [ "boolean", "string" ]
     }
   },
   "additionalProperties": false
diff --git a/test/__snapshots__/Errors.test.js.snap b/test/__snapshots__/Errors.test.js.snap
@@ -5,6 +5,6 @@ exports[`Errors Validation Error 1`] = `
 
 HTML Loader Invalid Options
 
-options.template should be boolean,object
+options.template should be boolean,string
 "
 `;
diff --git a/test/fixtures/templates/fixture.html b/test/fixtures/templates/fixture.html
@@ -5,7 +5,10 @@
   <title>HTML Loader</title>
 </head>
 <body>
-  <!-- I'm a comment -->
+  <import src="./file.html"></import>
+  <!-- Interpolate -->
   <div id="app">${ _.hello }</div>
+
+  <img src="./file.png">
 </body>
 </html>
diff --git a/test/options/__snapshots__/template.test.js.snap b/test/options/__snapshots__/template.test.js.snap
@@ -6,16 +6,42 @@ exports[`Options template {Boolean} 1`] = `
 
 
 // HTML Content
-export default \`<!DOCTYPE html>
+export default function (_) { return \`<!DOCTYPE html>
 <html lang=\\"en\\">
 <head>
   <meta charset=\\"utf-8\\">
   <title>HTML Loader</title>
 </head>
 <body>
-  <!-- I'm a comment -->
+  \${HTML__IMPORT__0}
+  <!-- Interpolate -->
   <div id=\\"app\\">\${ _.hello }</div>
+
+  <img src=\\"\${HTML__URL__0}\\">
+</body>
+</html>
+\`; }"
+`;
+
+exports[`Options template {String} 1`] = `
+"// HTML Imports
+
+
+
+// HTML Content
+export default function ($) { return \`<!DOCTYPE html>
+<html lang=\\"en\\">
+<head>
+  <meta charset=\\"utf-8\\">
+  <title>HTML Loader</title>
+</head>
+<body>
+  \${HTML__IMPORT__0}
+  <!-- Interpolate -->
+  <div id=\\"app\\">\${ _.hello }</div>
+
+  <img src=\\"\${HTML__URL__0}\\">
 </body>
 </html>
-\`"
+\`; }"
 `;
diff --git a/test/options/template.test.js b/test/options/template.test.js
@@ -9,7 +9,25 @@ describe('Options', () => {
       const config = {
         loader: {
           test: /\.html$/,
-          options: {},
+          options: {
+            template: true,
+          },
+        },
+      };
+
+      const stats = await webpack('templates/fixture.js', config);
+      const { source } = stats.toJson().modules[1];
+
+      expect(source).toMatchSnapshot();
+    });
+
+    test('{String}', async () => {
+      const config = {
+        loader: {
+          test: /\.html$/,
+          options: {
+            template: '$',
+          },
         },
       };
 

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`"type": "boolean"`
`9`	`9`	`},`
`10`	`10`	`"template": {`
`11`		`- "type": ["boolean", "object"]`
	`11`	`+ "type": [ "boolean", "string" ]`
`12`	`12`	`}`
`13`	`13`	`},`
`14`	`14`	`"additionalProperties": false`
Original file line number	Diff line number	Diff line change
@@ -5,6 +5,6 @@ exports[`Errors Validation Error 1`] = `
`5`	`5`
`6`	`6`	`HTML Loader Invalid Options`
`7`	`7`
`8`		`-options.template should be boolean,object`
	`8`	`+options.template should be boolean,string`
`9`	`9`	`"`
`10`	`10`	`;