refactor(html): refactor to typescript (#634)

* feat(html): add type declaration to html package

* chore(html): add rollup config to transform ts source

* refactor(html): refactor html plugin to typescript

* fix(html): lint src directory

* fix(html): use shared rollup config to enable default cjs export

* fix(html): fix ci lint

* fix(html): implement change requests

Co-authored-by: Andrew Powell <shellscape@users.noreply.github.com>

packages/html/package.json

@@ -10,20 +10,24 @@
   "author": "Andrew Powell <andrew@shellscape.org>",
   "homepage": "https://github.com/rollup/plugins/tree/master/packages/html#readme",
   "bugs": "https://github.com/rollup/plugins/issues",
-  "main": "lib/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
   "engines": {
     "node": ">= 8.0.0"
   },
   "scripts": {
+    "build": "rollup -c",
     "ci:coverage": "nyc pnpm run test && nyc report --reporter=text-lcov > coverage.lcov",
-    "ci:lint": "pnpm run lint",
+    "ci:lint": "pnpm run build && pnpm run lint",
     "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 --arrow-parens avoid --trailing-comma none --write *.md",
-    "lint:js": "eslint --fix --cache lib test --ext .js,.ts",
+    "lint:js": "eslint --fix --cache src test --ext .js,.ts",
     "lint:package": "prettier --write package.json --plugin=prettier-plugin-package",
+    "prebuild": "del-cli dist",
     "prepublishOnly": "pnpm run lint",
+    "pretest": "pnpm run build",
     "test": "ava"
   },
   "files": [
@@ -41,9 +45,12 @@
     "rollup": "^1.20.0||^2.0.0"
   },
   "devDependencies": {
+    "@rollup/plugin-typescript": "^6.1.0",
     "rollup": "^2.23.0",
-    "rollup-plugin-postcss": "^3.1.3"
+    "rollup-plugin-postcss": "^3.1.3",
+    "typescript": "^4.0.5"
   },
+  "types": "types/index.d.ts",
   "ava": {
     "babel": {
       "compileEnhancements": false

packages/html/rollup.config.js

@@ -0,0 +1,10 @@
+import typescript from '@rollup/plugin-typescript';
+
+import { createConfig } from '../../shared/rollup.config';
+
+import pkg from './package.json';
+
+export default {
+  ...createConfig(pkg),
+  plugins: [typescript({ sourceMap: false })]
+};

packages/html/lib/index.js → packages/html/src/index.ts

@@ -1,20 +1,27 @@
-const { extname } = require('path');
+import { extname } from 'path';
 
-const getFiles = (bundle) => {
+import { Plugin, NormalizedOutputOptions, OutputBundle, EmittedAsset } from 'rollup';
+
+import { RollupHtmlOptions, RollupHtmlTemplateOptions } from '../types';
+
+const getFiles = (bundle: OutputBundle): RollupHtmlTemplateOptions['files'] => {
   const files = Object.values(bundle).filter(
-    (file) => file.isEntry || (typeof file.type === 'string' ? file.type === 'asset' : file.isAsset)
+    (file) =>
+      file.type === 'chunk' ||
+      (typeof file.type === 'string' ? file.type === 'asset' : file.isAsset)
   );
-  const result = {};
+  const result = {} as ReturnType<typeof getFiles>;
   for (const file of files) {
     const { fileName } = file;
     const extension = extname(fileName).substring(1);
+
     result[extension] = (result[extension] || []).concat(file);
   }
 
   return result;
 };
 
-const makeHtmlAttributes = (attributes) => {
+export const makeHtmlAttributes = (attributes: Record<string, any>): string => {
   if (!attributes) {
     return '';
   }
@@ -24,7 +31,13 @@ const makeHtmlAttributes = (attributes) => {
   return keys.reduce((result, key) => (result += ` ${key}="${attributes[key]}"`), '');
 };
 
-const defaultTemplate = async ({ attributes, files, meta, publicPath, title }) => {
+const defaultTemplate = async ({
+  attributes,
+  files,
+  meta,
+  publicPath,
+  title
+}: RollupHtmlTemplateOptions) => {
   const scripts = (files.js || [])
     .map(({ fileName }) => {
       const attrs = makeHtmlAttributes(attributes.script);
@@ -75,7 +88,7 @@ const defaults = {
   title: 'Rollup Bundle'
 };
 
-const html = (opts = {}) => {
+export default function html(opts: RollupHtmlOptions = {}): Plugin {
   const { attributes, fileName, meta, publicPath, template, title } = Object.assign(
     {},
     defaults,
@@ -85,7 +98,7 @@ const html = (opts = {}) => {
   return {
     name: 'html',
 
-    async generateBundle(output, bundle) {
+    async generateBundle(output: NormalizedOutputOptions, bundle: OutputBundle) {
       if (!supportedFormats.includes(output.format) && !opts.template) {
         this.warn(
           `plugin-html: The output format '${
@@ -96,14 +109,23 @@ const html = (opts = {}) => {
         );
       }
 
-      if (output.format === 'esm' || output.format === 'es') {
-        attributes.script = Object.assign({}, attributes.script, { type: 'module' });
+      if (output.format === 'es') {
+        attributes.script = Object.assign({}, attributes.script, {
+          type: 'module'
+        });
       }
 
       const files = getFiles(bundle);
-      const source = await template({ attributes, bundle, files, meta, publicPath, title });
-
-      const htmlFile = {
+      const source = await template({
+        attributes,
+        bundle,
+        files,
+        meta,
+        publicPath,
+        title
+      });
+
+      const htmlFile: EmittedAsset = {
         type: 'asset',
         source,
         name: 'Rollup HTML Asset',
@@ -113,7 +135,4 @@ const html = (opts = {}) => {
       this.emitFile(htmlFile);
     }
   };
-};
-
-module.exports = html;
-module.exports.makeHtmlAttributes = makeHtmlAttributes;
+}

packages/html/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src/**/*", "types/**/*"]
+}

packages/html/types/index.d.ts

@@ -0,0 +1,28 @@
+import { Plugin, OutputChunk, OutputAsset, OutputBundle } from 'rollup';
+
+export interface RollupHtmlOptions {
+  title?: string;
+  attributes?: Record<string, any>;
+  fileName?: string;
+  meta?: Record<string, any>[];
+  publicPath?: string;
+  template?: (templateOptions: RollupHtmlTemplateOptions) => string;
+}
+
+export interface RollupHtmlTemplateOptions {
+  title: string;
+  attributes: Record<string, any>;
+  publicPath: string;
+  meta: Record<string, any>[];
+  bundle: OutputBundle;
+  files: Record<string, (OutputChunk | OutputAsset)[]>;
+}
+
+export function makeHtmlAttributes(attributes: Record<string, string>): string;
+
+/**
+ * A Rollup plugin which creates HTML files to serve Rollup bundles.
+ * @param options - Plugin options.
+ * @returns Plugin instance.
+ */
+export default function html(options: RollupHtmlOptions): Plugin;