rollup · shellscape · Nov 29, 2019 · Nov 27, 2019 · Nov 27, 2019 · Nov 27, 2019
@@ -28,14 +28,14 @@ npm install @rollup/plugin-inject --save-dev
 Create a `rollup.config.js` [configuration file](https://www.rollupjs.org/guide/en/#configuration-files) and import the plugin:
 
 ```js
-import auto from "@rollup/plugin-auto-install";
-import resolve from "rollup-plugin-node-resolve";
+import auto from '@rollup/plugin-auto-install';
+import resolve from 'rollup-plugin-node-resolve';
 
 export default {
-  input: "src/index.js",
+  input: 'src/index.js',
   output: {
-    dir: "output",
-    format: "cjs"
+    dir: 'output',
+    format: 'cjs'
   },
   plugins: [auto(), resolve()]
 };

@@ -0,0 +1,136 @@
+[npm]: https://img.shields.io/npm/v/@rollup/plugin-html
+[npm-url]: https://www.npmjs.com/package/@rollup/plugin-html
+[size]: https://packagephobia.now.sh/badge?p=@rollup/plugin-html
+[size-url]: https://packagephobia.now.sh/result?p=@rollup/plugin-html
+
+[![npm][npm]][npm-url]
+[![size][size]][size-url]
+[![libera manifesto](https://img.shields.io/badge/libera-manifesto-lightgrey.svg)](https://liberamanifesto.com)
+
+# @rollup/plugin-html
+
+🍣 A Rollup plugin which creates HTML files to serve Rollup bundles
+
+## Requirements
+
+This plugin requires an [LTS](https://github.com/nodejs/Release) Node version (v8.0.0+) and Rollup v1.20.0+.
+
+## Install
+
+Using npm:
+
+```console
+npm install @rollup/plugin-html --save-dev
+```
+
+## Usage
+
+Create a `rollup.config.js` [configuration file](https://www.rollupjs.org/guide/en/#configuration-files) and import the plugin:
+
+```js
+const html = require('@rollup/plugin-html');
+
+module.exports = {
+  input: 'src/index.js',
+  output: {
+    dir: 'output',
+    format: 'cjs'
+  },
+  plugins: [html()]
+};
+```
+
+Then call `rollup` either via the [CLI](https://www.rollupjs.org/guide/en/#command-line-reference) or the [API](https://www.rollupjs.org/guide/en/#javascript-api).
+
+Once run successfully, an HTML file should be written to the bundle output destination.
+
+## Options
+
+### `attributes`
+
+Type: `Object`<br>
+Default: `{ html: { lang: 'en' }, link: null, script: null }`
+
+Specifies additional attributes for `html`, `link`, and `script` elements. For each property, provide an object with key-value pairs that represent an HTML element attribute name and value. By default, the `html` element is rendered with an attribute of `lang="en"`.
+
+### `fileName`
+
+Type: `String`<br>
+Default: `'index.html'`
+
+Specifies the name of the HTML to emit.
+
+### `publicPath`
+
+Type: `String`<br>
+Default: `''`
+
+Specifies a path to prepend to all bundle assets (files) in the HTML output.
+
+### `template`
+
+Type: `Fumction`<br>
+Default: `internal function`
+Returns: `String`
+
+Specifies a function that provides the rendered source for the HTML output. The function should be in the form of:
+
+```js
+const template = ({ attributes, files, publicPath, title }) => { ... }
+```
+
+- `attributes`: corresponds to the `attributes` option passed to the plugin
+- `files`: An `Array` of `String` containing the assets (files) in the bundle that will be emitted
+- `publicPath`: corresponds to the `publicPath` option passed to the plugin
+- `title`: corresponds to the `title` option passed to the plugin
+
+By default this is handled internally and produces HTML in the following format:
+
+```html
+<!DOCTYPE html>
+<html ${attributes}>
+  <head>
+    <meta charset="utf-8" />
+    <title>${title}</title>
+    ${links}
+  </head>
+  <body>
+    ${scripts}
+  </body>
+</html>
+```
+
+Where `${links}` represents all `<link ..` tags for CSS and `${scripts}` represents all `<script...` tags for JavaScript files.
+
+### `title`
+
+Type: `String`<br>
+Default: `'Rollup Bundle'`
+
+Specifies the HTML document title.
+
+## Exports
+
+### `makeHtmlAttributes(attributes)`
+
+Parameters: `attributes`, Type: `Object`<br>
+Returns: `String`
+
+Consumes an object with key-value pairs that represent an HTML element attribute name and value. The function returns all pairs as a space-separated string of valid HTML element attributes. e.g.
+
+```js
+const { makeHtmlAttributes } = require('@rollup/plugin-html');
+
+makeHtmlAttributes({ lang: 'en', 'data-batcave': 'secret' });
+// -> 'lang="en" data-batcave="secret"'
+```
+
+## Attribution
+
+This plugin was inspired by and is based upon [mini-html-webpack-plugin](https://github.com/styleguidist/mini-html-webpack-plugin) by Juho Vepsalainen, with permission.
+
+## Meta
+
+[CONTRIBUTING](/.github/CONTRIBUTING.md)
+
+[LICENSE (MIT)](/LICENSE)
@@ -0,0 +1,87 @@
+const { extname } = require('path');
+
+const getFiles = (bundle) => {
+  const fileNames = Object.values(bundle).map(({ fileName }) => fileName);
+  const files = {};
+  for (const fileName of fileNames) {
+    const extension = extname(fileName).substring(1);
+    files[extension] = (files[extension] || []).concat(fileName);
+  }
+
+  return files;
+};
+
+const makeHtmlAttributes = (attributes) => {
+  if (!attributes) {
+    return '';
+  }
+
+  const keys = Object.keys(attributes);
+  // eslint-disable-next-line no-param-reassign
+  return keys.reduce((result, key) => (result += ` ${key}="${attributes[key]}"`), '');
+};
+
+const defaultTemplate = async ({ attributes, files, publicPath, title }) => {
+  const scripts = (files.js || [])
+    .map((fileName) => {
+      const attrs = makeHtmlAttributes(attributes.script);
+      return `<script src="${publicPath}${fileName}"${attrs}></script>`;
+    })
+    .join('\n');
+
+  const links = (files.css || [])
+    .map((fileName) => {
+      const attrs = makeHtmlAttributes(attributes.link);
+      return `<link href="${publicPath}${fileName}" rel="stylesheet"${attrs}>`;
+    })
+    .join('\n');
+
+  return `
+<!doctype html>
+<html${makeHtmlAttributes(attributes.html)}>
+  <head>
+    <meta charset="utf-8">
+    <title>${title}</title>
+    ${links}
+  </head>
+  <body>
+    ${scripts}
+  </body>
+</html>`;
+};
+
+const defaults = {
+  attributes: {
+    link: null,
+    html: { lang: 'en' },
+    script: null
+  },
+  fileName: 'index.html',
+  publicPath: '',
+  template: defaultTemplate,
+  title: 'Rollup Bundle'
+};
+
+const html = (opts) => {
+  const { attributes, fileName, publicPath, template, title } = Object.assign({}, defaults, opts);
+  return {
+    name: 'html',
+
+    async generateBundle(output, bundle) {
+      const files = getFiles(bundle);
+      const source = await template({ attributes, files, publicPath, title });
+
+      const htmlFile = {
+        type: 'asset',
+        source,
+        name: 'Rollup HTML Asset',
+        fileName
+      };
+
+      this.emitFile(htmlFile);
+    }
+  };
+};
+
+module.exports = html;
+module.exports.makeHtmlAttributes = makeHtmlAttributes;
@@ -0,0 +1,57 @@
+{
+  "name": "@rollup/plugin-html",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Creates HTML files to serve Rollup bundles",
+  "license": "MIT",
+  "repository": "rollup/plugins",
+  "author": "Andrew Powell <[email protected]>",
+  "homepage": "https://github.com/rollup/plugins/packages/beep",
+  "bugs": "https://github.com/rollup/plugins/issues",
+  "main": "lib/index.js",
+  "engines": {
+    "node": ">= 8.0.0"
+  },
+  "scripts": {
+    "ci:coverage": "nyc pnpm run test && nyc report --reporter=text-lcov > coverage.lcov",
+    "ci:lint": "pnpm run lint && pnpm run security",
+    "ci:lint:commits": "commitlint --from=${CIRCLE_BRANCH} --to=${CIRCLE_SHA1}",
+    "ci:test": "pnpm run test -- --verbose",
+    "lint": "pnpm run lint:js && pnpm run lint:docs && pnpm run lint:package",
+    "lint:docs": "prettier --single-quote --write *.md",
+    "lint:js": "eslint --fix --cache lib test",
+    "lint:package": "prettier --write package.json --plugin=prettier-plugin-package",
+    "prepublishOnly": "pnpm run lint",
+    "security": "echo 'pnpm needs `npm audit` support'",
+    "test": "ava"
+  },
+  "files": [
+    "lib",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "rollup",
+    "plugin",
+    "html",
+    "template"
+  ],
+  "peerDependencies": {
+    "rollup": "^1.20.0"
+  },
+  "devDependencies": {
+    "del": "^5.1.0",
+    "rollup": "^1.27.5",
+    "rollup-plugin-postcss": "^2.0.3"
+  },
+  "ava": {
+    "files": [
+      "!**/fixtures/**",
+      "!**/helpers/**",
+      "!**/recipes/**",
+      "!**/types.ts"
+    ]
+  }
+}
diff --git a/packages/html/rollup.config.js b/packages/html/rollup.config.js
@@ -0,0 +1,16 @@
+const css = require('rollup-plugin-postcss');
+
+const pkg = require('./package.json');
+
+const dependencies = Object.keys(pkg.dependencies || {});
+
+const html = require('.');
+
+export default [
+  {
+    input: ['test/fixtures/joker.js'],
+    output: { dir: 'dist', format: 'cjs' },
+    external: [...dependencies],
+    plugins: [css({ extract: true }), html()]
+  }
+];
@@ -0,0 +1 @@
+* { width: 100%; }
@@ -0,0 +1,2 @@
+// eslint-disable-next-line
+import style from './joker.css';
@@ -0,0 +1,2 @@
+// eslint-disable-next-line
+import * as batman from './batman.js';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// eslint-disable-next-line
		import style from './joker.css';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// eslint-disable-next-line
		import * as batman from './batman.js';