feat: allow to include html partials using <webpack-include src="./partial.html" />

src/index.js

@@ -26,6 +26,7 @@ export default async function loader(content) {
   if (options.sources) {
     plugins.push(
       sourcesPlugin({
+        defaultFormat: options.esModule ? 'url' : 'require',
         sources: options.sources,
         resourcePath: this.resourcePath,
         context: this.context,

src/plugins/sources-plugin.js

@@ -101,7 +101,14 @@ export default (options) =>
     let offset = 0;
 
     for (const source of sources) {
-      const { name, value, isValueQuoted, startOffset, endOffset } = source;
+      const {
+        name,
+        value,
+        isValueQuoted,
+        format,
+        startOffset,
+        endOffset,
+      } = source;
 
       let normalizedUrl = value;
       let prefix = '';
@@ -138,6 +145,8 @@ export default (options) =>
         imports.set(importKey, importName);
 
         options.imports.push({
+          format:
+            typeof format !== 'undefined' ? format : options.defaultFormat,
           importName,
           source: stringifyRequest(options.context, newUrl),
         });

src/utils.js

@@ -781,6 +781,36 @@ function metaContentType(options) {
   return srcType(options);
 }
 
+function webpackIncludeType(options) {
+  let source;
+
+  try {
+    source = parseSrc(options.value);
+  } catch (error) {
+    throw new HtmlSourceError(
+      `Bad value for attribute "${options.attribute}" on element "${options.tag}": ${error.message}`,
+      options.attributeStartOffset,
+      options.attributeEndOffset,
+      options.html
+    );
+  }
+
+  source = c0ControlCodesExclude(source);
+
+  if (!isUrlRequestable(source.value)) {
+    return [];
+  }
+
+  return [
+    {
+      format: 'import',
+      value: source.value,
+      startOffset: options.tagStartOffset,
+      endOffset: options.tagEndOffset,
+    },
+  ];
+}
+
 const defaultSources = new Map([
   [
     'audio',
@@ -981,6 +1011,17 @@ const defaultSources = new Map([
       ],
     ]),
   ],
+  [
+    'webpack-import',
+    new Map([
+      [
+        'src',
+        {
+          type: webpackIncludeType,
+        },
+      ],
+    ]),
+  ],
 ]);
 
 function normalizeSourcesList(sources) {
@@ -1109,11 +1150,20 @@ export function getImportCode(html, loaderContext, imports, options) {
     : `var ${GET_SOURCE_FROM_IMPORT_NAME} = require(${stringifiedHelperRequest});\n`;
 
   for (const item of imports) {
-    const { importName, source } = item;
+    const { format, importName, source } = item;
 
-    code += options.esModule
-      ? `var ${importName} = new URL(${source}, import.meta.url);\n`
-      : `var ${importName} = require(${source});\n`;
+    switch (format) {
+      case 'require':
+        code += `var ${importName} = require(${source});\n`;
+        break;
+      case 'import':
+        code += `import ${importName} from ${source};\n`;
+        break;
+      case 'url':
+      default:
+        code += `var ${importName} = new URL(${source}, import.meta.url);\n`;
+        break;
+    }
   }
 
   return `// Imports\n${code}`;

test/fixtures/webpack-import.html

@@ -0,0 +1,38 @@
+<div>
+  <article>
+    BeforeHeaderText<webpack-import src="./webpack-import-header.html" />AfterHeaderText
+    <ol>
+      <li>Grow a long, majestic beard.</li>
+      <li>Wear a tall, pointed hat.</li>
+      <li>Have I mentioned the beard?</li>
+    </ol>
+    BeforeFooterText<webpack-import src="./webpack-import-footer.html" />AfterFooterText
+    TextBeforeOpenDiv<div>TextAfterOpenDiv<webpack-import src="./webpack-import-content.html" />TextBeforeCloseDiv</div>TextAfterCloseDiv
+  </article>
+</div>
+
+<div>
+  <img src="./image.png" alt="test">
+</div>
+
+<div>
+  <webpack-import src="./webpack-import-content.html" />
+  <webpack-import   src   =   "./webpack-import-content.html"   />
+</div>
+
+<!-- Future improvements -->
+<!--
+BEFORE
+<webpack-import src="./include-content.html">
+  <header partial="header">Header</header>
+  <div partial="content">Header</div>
+  <footer partial="footer">Footer</footer>
+</webpack-import>
+AFTER
+
+<div>TEXT</div>
+<div>
+  <webpack-import   src="./include-content.html"   ></webpack-import   >
+</div>
+<div>TEXT</div>
+-->

test/fixtures/webpack-import.js

@@ -0,0 +1,3 @@
+import html from './webpack-import.html';
+
+export default html;

test/sources-option.test.js

@@ -137,21 +137,13 @@ describe("'sources' option", () => {
     expect(getErrors(stats)).toMatchSnapshot('errors');
   });
 
-  it.skip('should handle the "include" tags', async () => {
-    const compiler = getCompiler('include.js', {
-      sources: {
-        list: [
-          {
-            tag: 'include',
-            attribute: 'src',
-            type: 'include',
-          },
-        ],
-      },
-    });
+  it.only('should handle the "webpack-include" tags', async () => {
+    const compiler = getCompiler('webpack-import.js');
     const stats = await compile(compiler);
 
-    expect(getModuleSource('./include.html', stats)).toMatchSnapshot('module');
+    expect(getModuleSource('./webpack-import.html', stats)).toMatchSnapshot(
+      'module'
+    );
     expect(
       execute(readAsset('main.bundle.js', compiler, stats))
     ).toMatchSnapshot('result');