@vxna/mini-html-webpack-template
Advanced tools
@vxna/mini-html-webpack-template - npm Package Compare versions
Comparing version 0.0.2 to 0.0.5
40
index.js
@@ -15,12 +15,16 @@ const { | ||
| function template(ctx) { | ||
| const { css, js, title, container, minify } = ctx | ||
| const { css, js, lang, title, head, body, container, minify } = ctx | ||
| const doc = html` | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <html ${lang && `lang=${lang}`}> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"/> | ||
| <title>${title || 'default'}</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <title>${title || 'sample-app'}</title> | ||
| ${generateMetaTags(head.meta)} | ||
| ${generateLinkTags(head.links)} | ||
| ${generateRawTags(head.raw)} | ||
| ${generateScriptTags(head.scripts)} | ||
| ${generateCSSReferences(css)} | ||
@@ -30,2 +34,4 @@ </head> | ||
| ${container && `<div id="${container}"></div>`} | ||
| ${generateRawTags(body.raw)} | ||
| ${generateScriptTags(body.scripts)} | ||
| ${generateJSReferences(js)} | ||
@@ -45,2 +51,26 @@ </body> | ||
| const wrap = item => | ||
| Object.entries(item) | ||
| .map(([key, val]) => `${key}="${val}"`) | ||
| .join(' ') | ||
| function generateMetaTags(items) { | ||
| return items.map(item => `<meta ${wrap(item)}>`) | ||
| } | ||
| function generateLinkTags(items) { | ||
| return items.map(item => `<link ${wrap(item)}>`) | ||
| } | ||
| function generateScriptTags(items) { | ||
| return items.map(item => `<script ${wrap(item)}></script>`) | ||
| } | ||
| function generateRawTags(items) { | ||
| if (typeof items === 'string' || items instanceof String) { | ||
| return items | ||
| } | ||
| return items.map(item => item) | ||
| } | ||
| module.exports = template |
| { | ||
| "name": "@vxna/mini-html-webpack-template", | ||
| "version": "0.0.2", | ||
| "version": "0.0.5", | ||
| "description": "Minimum viable template for mini-html-webpack-plugin", | ||
@@ -5,0 +5,0 @@ "author": "@vxna", |
| # @vxna/mini-html-webpack-template | ||
| Minimum viable template for [mini-html-webpack-plugin](https://github.com/bebraw/mini-html-webpack-plugin) | ||
| Template for [mini-html-webpack-plugin](https://github.com/bebraw/mini-html-webpack-plugin), that extends default features with html minification and useful subset of options | ||
@@ -9,3 +9,3 @@ ## Warning | ||
| ## Usage | ||
| ## Common usage | ||
@@ -21,3 +21,3 @@ **webpack.config.js** | ||
| context: { | ||
| title: 'sample-app', | ||
| title: 'common-usage', | ||
| container: 'root', | ||
@@ -32,12 +32,69 @@ minify: false | ||
| ## Options | ||
| ## Common options | ||
| | Name | Type | Default | Description | | ||
| | :-------------: | :---------: | :------------: | :----------------------------------------------------- | | ||
| | **`title`** | `{String}` | `'sample-app'` | Generated document title | | ||
| | **`container`** | `{String}` | `undefined` | Application mount point, e.g.: `<div id="root"></div>` | | ||
| | **`minify`** | `{Boolean}` | `true` | Non-configurable & safe HTML minification | | ||
| | Name | Type | Default | Description | | ||
| | :-------------: | :---------: | :------------: | :---------------------- | | ||
| | **`lang`** | `{String}` | `undefined` | Document language | | ||
| | **`title`** | `{String}` | `'sample-app'` | Document title | | ||
| | **`container`** | `{String}` | `undefined` | Application mount point | | ||
| | **`minify`** | `{Boolean}` | `true` | Safe HTML minification | | ||
| ## Extended usage | ||
| **webpack.config.js** | ||
| ```js | ||
| const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin') | ||
| module.exports = { | ||
| plugins: [ | ||
| new MiniHtmlWebpackPlugin({ | ||
| context: { | ||
| title: 'extended-usage', | ||
| head: { | ||
| meta: [ | ||
| { | ||
| name: 'description', | ||
| content: 'mini-html-webpack-template' | ||
| }, | ||
| { | ||
| property: 'og:description', | ||
| content: 'mini-html-webpack-template' | ||
| } | ||
| ], | ||
| links: [ | ||
| { | ||
| rel: 'shortcut icon', | ||
| href: 'https://assets-cdn.github.com/favicon.ico', | ||
| type: 'image/x-icon' | ||
| } | ||
| ] | ||
| }, | ||
| body: { | ||
| raw: '<div id="root"></div>' | ||
| } | ||
| }, | ||
| template: require('@vxna/mini-html-webpack-template') | ||
| }) | ||
| ] | ||
| } | ||
| ``` | ||
| ## Extended options | ||
| | Name | Type | Default | Description | | ||
| | :----------------: | :--------------: | :---------: | :-------------------------------------- | | ||
| | **`head.meta`** | `{Array}` | `undefined` | Array of objects with key + value pairs | | ||
| | **`head.links`** | `{Array}` | `undefined` | Array of objects with key + value pairs | | ||
| | **`head.scripts`** | `{Array}` | `undefined` | Array of objects with key + value pairs | | ||
| | **`head.raw`** | `{Array\|String}` | `undefined` | Raw document markup | | ||
| | **`body.scripts`** | `{Array}` | `undefined` | Array of objects with key + value pairs | | ||
| | **`body.raw`** | `{Array\|String}` | `undefined` | Raw document markup | | ||
| ## Inspired by | ||
| [html-webpack-template](https://github.com/jaketrent/html-webpack-template) | ||
| ## License | ||
| MIT (http://www.opensource.org/licenses/mit-license.php) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by55.93%
7463
- Lines of code
- increased by67.57%
62
- Number of lines in readme file
- increased by139.02%
98
No dependency changes