impl feat

rollup · Nov 22, 2024 · 78a92f5 · 78a92f5
1 parent 92daef0
commit 78a92f5
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 8 deletions.
diff --git a/packages/html/README.md b/packages/html/README.md
@@ -121,6 +121,13 @@ Default: `'Rollup Bundle'`
 
 Specifies the HTML document title.
 
+### `scriptsOnHead`
+
+Type: `Boolean`<br>
+Default: `false`
+
+Place scripts in head instead body.
+
 ## Exports
 
 ### `makeHtmlAttributes(attributes)`

diff --git a/packages/html/recipes/external-files/index.js b/packages/html/recipes/external-files/index.js
@@ -4,10 +4,10 @@
  * @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
+ * @return {Function} The template method required by plugin-html
  */
 export default function htmlTemplate(externals) {
-  return ({ attributes, files, meta, publicPath, title }) => {
+  return ({ attributes, files, meta, publicPath, title, scriptsOnHead }) => {
     let scripts = [...(files.js || [])];
     let links = [...(files.css || [])];
 
@@ -43,6 +43,11 @@ export default function htmlTemplate(externals) {
       })
       .join('\n');
 
+    if (scriptsOnHead === true) {
+      links += scripts;
+      scripts = '';
+    }
+
     const metas = meta
       .map((input) => {
         const attrs = makeHtmlAttributes(input);

diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
@@ -31,22 +31,28 @@ const defaultTemplate = async ({
   files,
   meta,
   publicPath,
-  title
+  title,
+  scriptsOnHead
 }: RollupHtmlTemplateOptions) => {
-  const scripts = (files.js || [])
+  let scripts = (files.js || [])
     .map(({ fileName }) => {
       const attrs = makeHtmlAttributes(attributes.script);
       return `<script src="${publicPath}${fileName}"${attrs}></script>`;
     })
     .join('\n');
 
-  const links = (files.css || [])
+  let links = (files.css || [])
     .map(({ fileName }) => {
       const attrs = makeHtmlAttributes(attributes.link);
       return `<link href="${publicPath}${fileName}" rel="stylesheet"${attrs}>`;
     })
     .join('\n');
 
+  if (scriptsOnHead === true) {
+    links += scripts;
+    scripts = '';
+  }
+
   const metas = meta
     .map((input) => {
       const attrs = makeHtmlAttributes(input);
@@ -80,11 +86,12 @@ const defaults = {
   meta: [{ charset: 'utf-8' }],
   publicPath: '',
   template: defaultTemplate,
-  title: 'Rollup Bundle'
+  title: 'Rollup Bundle',
+  scriptsOnHead: false
 };
 
 export default function html(opts: RollupHtmlOptions = {}): Plugin {
-  const { attributes, fileName, meta, publicPath, template, title } = Object.assign(
+  const { attributes, fileName, meta, publicPath, template, title, scriptsOnHead } = Object.assign(
     {},
     defaults,
     opts
@@ -117,7 +124,8 @@ export default function html(opts: RollupHtmlOptions = {}): Plugin {
         files,
         meta,
         publicPath,
-        title
+        title,
+        scriptsOnHead
       });
 
       const htmlFile: EmittedAsset = {

diff --git a/packages/html/test/snapshots/test.js.md b/packages/html/test/snapshots/test.js.md
@@ -353,3 +353,49 @@ Generated by [AVA](https://avajs.dev).
         source: '<html><body><main></main></body></html>',
       },
     ]
+
+## scripts on head
+
+> Snapshot 1
+
+    [
+      {
+        code: `(function (factory) {␊
+        	typeof define === 'function' && define.amd ? define(factory) :␊
+        	factory();␊
+        })((function () { 'use strict';␊
+        ␊
+        ␊
+        ␊
+        }));␊
+        `,
+        fileName: 'joker.js',
+        map: null,
+        source: undefined,
+      },
+      {
+        code: undefined,
+        fileName: 'joker.css',
+        map: undefined,
+        source: Buffer @Uint8Array [
+          2a207b20 77696474 683a2031 3030253b 207d0a
+        ],
+      },
+      {
+        code: undefined,
+        fileName: 'index.html',
+        map: undefined,
+        source: `␊
+        <!doctype html>␊
+        <html>␊
+          <head>␊
+            <meta charset="utf-8">␊
+            <title>Rollup Bundle</title>␊
+            <link href="joker.css" rel="stylesheet"><script src="joker.js" defer="true"></script>␊
+          </head>␊
+          <body>␊
+            ␊
+          </body>␊
+        </html>`,
+      },
+    ]
diff --git a/packages/html/test/snapshots/test.js.snap b/packages/html/test/snapshots/test.js.snap
diff --git a/packages/html/test/test.js b/packages/html/test/test.js
@@ -120,3 +120,20 @@ test.serial('template', async (t) => {
   const code = await getCode(bundle, output, true);
   t.snapshot(code);
 });
+
+test.serial('scripts on head', async (t) => {
+  const bundle = await rollup({
+    input: 'joker.js',
+    plugins: [
+      css({ extract: true }),
+      html({
+        attributes: {
+          script: { defer: true }
+        },
+        scriptsOnHead: true
+      })
+    ]
+  });
+  const code = await getCode(bundle, output, true);
+  t.snapshot(code);
+});
diff --git a/packages/html/types/index.d.ts b/packages/html/types/index.d.ts
@@ -7,6 +7,7 @@ export interface RollupHtmlTemplateOptions {
   meta: Record<string, any>[];
   bundle: OutputBundle;
   files: Record<string, (OutputChunk | OutputAsset)[]>;
+  scriptsOnHead?: boolean;
 }
 
 export interface RollupHtmlOptions {
@@ -16,6 +17,7 @@ export interface RollupHtmlOptions {
   meta?: Record<string, any>[];
   publicPath?: string;
   template?: (templateoptions: RollupHtmlTemplateOptions) => string;
+  scriptsOnHead?: boolean;
 }
 
 export function makeHtmlAttributes(attributes: Record<string, string>): string;