Converted @rollup/html to a standalone package (out of the original monorepo) and made it ESM-native

2023-04-17 21:04:05 +02:00
commit 2dc701c5b7
21 changed files with 4923 additions and 0 deletions
--- a/recipes/external-files/ReadMe.md
+++ b/recipes/external-files/ReadMe.md
@@ -0,0 +1,64 @@
+This method provides the ability to reference external css/js files for the generated html, and supports adjusting the file loading sequence.
+
+when using it:
+
+```js
+import html from '@rollup/plugin-html';
+import templateExternalFiles from '@rollup/plugin-html/recipes/external-files';
+import postcss from 'rollup-plugin-postcss';
+
+export default [
+  {
+    input: ['demo/demo.ts'],
+    output: [{ file: 'dist/demo.js' }],
+    plugins: [
+      postcss({
+        extract: 'demo.css',
+        minimize: false,
+        use: ['sass'],
+        extensions: ['.scss', '.css']
+      }),
+      html({
+        title: 'sdk demo page',
+        publicPath: './',
+        fileName: 'demo.html',
+        attributes: { html: { lang: 'zh-cn' } },
+        template: templateExternalFiles([
+          { type: 'js', file: 'example1.js', pos: 'before' },
+          { type: 'js', file: 'example2.js', pos: 'before' },
+          { type: 'js', file: 'example3.js' },
+          { type: 'js', file: 'example4.js', pos: 'before' },
+          { type: 'css', file: 'example1.css', pos: 'before' },
+          { type: 'css', file: 'example2.css', pos: 'before' },
+          { type: 'css', file: 'example3.css' },
+          { type: 'css', file: 'example4.css', pos: 'before' }
+        ])
+      })
+    ]
+  }
+];
+```
+
+The content of the generated html file:
+
+```html
+<!DOCTYPE html>
+<html lang="zh-cn">
+  <head>
+    <meta charset="utf-8" />
+    <title>sdk demo page</title>
+    <link href="./example1.css" rel="stylesheet" />
+    <link href="./example2.css" rel="stylesheet" />
+    <link href="./example4.css" rel="stylesheet" />
+    <link href="./demo.css" rel="stylesheet" />
+    <link href="./example3.css" rel="stylesheet" />
+  </head>
+  <body>
+    <script src="./example1.js"></script>
+    <script src="./example2.js"></script>
+    <script src="./example4.js"></script>
+    <script src="./demo.js"></script>
+    <script src="./example3.js"></script>
+  </body>
+</html>
+```
--- a/recipes/external-files/index.js
+++ b/recipes/external-files/index.js
@@ -0,0 +1,76 @@
+/**
+ * Provides the ability to reference external css/js files for the generated html
+ * Method source once issues: https://github.com/rollup/plugins/issues/755
+ * @param {Array} externals List of external files.
+ *   The format is: [{ type: 'js', file: '//xxxx1.js', pos: 'before' }, { type: 'css', file: '//xxxx1.css' }]
+ *
+ * @return {Function} The templae method required by plugin-html
+ */
+export default function htmlTemplate(externals) {
+  return ({ attributes, files, meta, publicPath, title }) => {
+    let scripts = [...(files.js || [])];
+    let links = [...(files.css || [])];
+
+    // externals = [{ type: 'js', file: '//xxxx1.js', pos: 'before' }, { type: 'css', file: '//xxxx1.css' }]
+    if (Array.isArray(externals)) {
+      const beforeLinks = [];
+      const beforeScripts = [];
+      externals.forEach((node) => {
+        let fileList;
+        const isCssFile = node.type === 'css';
+        if (node.pos === 'before') {
+          fileList = isCssFile ? beforeLinks : beforeScripts;
+        } else {
+          fileList = isCssFile ? links : scripts;
+        }
+        fileList.push({ fileName: node.file });
+      });
+      scripts = beforeScripts.concat(scripts);
+      links = beforeLinks.concat(links);
+    }
+
+    scripts = scripts
+      .map(({ fileName }) => {
+        const attrs = makeHtmlAttributes(attributes.script);
+        return `<script src="${publicPath}${fileName}"${attrs}></script>`;
+      })
+      .join('\n');
+
+    links = links
+      .map(({ fileName }) => {
+        const attrs = makeHtmlAttributes(attributes.link);
+        return `<link href="${publicPath}${fileName}" rel="stylesheet"${attrs}>`;
+      })
+      .join('\n');
+
+    const metas = meta
+      .map((input) => {
+        const attrs = makeHtmlAttributes(input);
+        return `<meta${attrs}>`;
+      })
+      .join('\n');
+
+    return `
+  <!doctype html>
+  <html${makeHtmlAttributes(attributes.html)}>
+    <head>
+      ${metas}
+      <title>${title}</title>
+      ${links}
+    </head>
+    <body>
+      ${scripts}
+    </body>
+  </html>`;
+  };
+}
+
+function 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]}"`), '');
+}