feat(webpack-plugin): allow to inject custom meta and link tags (#30)

jmjuanes · Dec 21, 2024 · 05f3662 · 05f3662
1 parent 2f35f5b
commit 05f3662
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/packages/mikel-webpack-plugin/README.md b/packages/mikel-webpack-plugin/README.md
@@ -51,6 +51,8 @@ This plugin accepts the following options:
 | `templateContent` | `String` | Template content as a string. | `null` |
 | `chunks` | `Array` | List of entry names to include in the HTML. | `["main"]` |
 | `publicPath` | `String` | Public path for the assets. | `"./"` |
+| `meta` | `Object` | Additional `<meta>` tags to include in the `<head>`. Example: `{author: "John Doe"}`. | `{}` |
+| `link` | `Array` | List of `<link>` tags to include in the `<head>`. Example: `[{rel: "icon", href: "/favicon.ico"}] `. |
 | `templateData` | `Object` | Additional data for the template that will be passes to Mikel. | `{}` |
 | `templateOptions` | `Object` | Additional options for the Mikel templating (partials, helpers, and functions). | `{}` |
 

diff --git a/packages/mikel-webpack-plugin/index.js b/packages/mikel-webpack-plugin/index.js
@@ -5,6 +5,16 @@ import mikel from "mikel";
 // @description global variables
 const PLUGIN_NAME = "MikelWebpackPlugin";
 
+// @description get an array value
+const getArrayValue = (value, defaultValue) => {
+    return value && Array.isArray(value) ? value : defaultValue;
+};
+
+// @description get object value
+const getObjectValue = (value, defaultValue) => {
+    return value && typeof value === "object" ? value : defaultValue;
+};
+
 // @description returns the template content from the given options
 const getTemplateContent = options => {
     // using options.template to specify the the absolute path to the template file
@@ -57,7 +67,7 @@ export default class MikelWebpackPlugin {
     }
 
     apply(compiler) {
-        const includeChunks = this.options.chunks || ["main"];
+        const includeChunks = getArrayValue(this.options.chunks, ["main"]);
         const filename = this.options.filename || "index.html";
         const template = getTemplateContent(this.options);
         compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
@@ -74,6 +84,8 @@ export default class MikelWebpackPlugin {
                         ...(this.options.templateData || {}),
                         options: this.options,
                         assets: assets,
+                        metaTags: getObjectValue(this.options.meta, {}),
+                        linkTags: getArrayValue(this.options.link, []),
                     };
                     const content = mikel(template, pluginData, this.options.templateOptions || {});
                     // emit the HTML file as a new asset

diff --git a/packages/mikel-webpack-plugin/template.html b/packages/mikel-webpack-plugin/template.html
@@ -3,10 +3,16 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    {{#each metaTags}}
+    <meta name="{{@key}}" content="{{@value}}">
+    {{/each}}
     <title>{{options.title}}</title>
     {{#each assets.css}}
     <link rel="stylesheet" href="{{.}}" />
     {{/each}}
+    {{#each linkTags}}
+    <link{{#each .}} {{@key}}="{{@value}}"{{/each}} />
+    {{/each}}
 </head>
 <body>
     {{#each assets.js}}