chore: build with typescript

.changeset/cool-parents-rescue.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": minor
+---
+
+Ship components unbundled

.eleventy.cjs

@@ -128,8 +128,10 @@ module.exports = function(eleventyConfig) {
     [`${path.dirname(require.resolve('@patternfly/pfe-styles'))}/*.{css,css.map}`]: 'assets'
   });
 
+  // generate a bundle that packs all of rhds with all dependencies
+  // into a single large javascript file
   eleventyConfig.on('eleventy.before', async () =>
-    import('./scripts/build.js')
+    import('./scripts/bundle.js')
       .then(m => m.build({
         outfile: '_site/assets/rhds.min.js',
         external: [],

.gitignore

@@ -7,6 +7,7 @@ docs/pfe.min*
 
 # Build artifacts
 elements/*/*.js
+lib/**/*.js
 !elements/**/demo/*.css
 *.map
 *.d.ts

package.json

@@ -39,15 +39,16 @@
     "watch:docs": "run-p watch:docs:*",
     "watch:docs:analyze": "npm run watch:analyze",
     "watch:docs:eleventy": "npm run build:docs -- --serve",
-    "watch:types": "tsc --watch",
+    "watch:compile": "ttsc --watch",
     "new": "npm init @patternfly/element",
     "-----BUILD------": "Prepare dist artifacts",
     "analyze": "cem analyze",
     "watch:analyze": "npm run analyze -- --watch",
     "build": "run-s build:*",
     "build:analyze": "npm run analyze",
-    "build:elements": "scripts/build.js",
-    "build:types": "tsc",
+    "build:compile": "ttsc",
+    "build:styles": "node scripts/transform-css.js",
+    "build:bundle": "node scripts/bundle.js",
     "build:docs": "eleventy --config=.eleventy.cjs",
     "-----TEST-------": "Test packages",
     "test": "wtr --group default",
@@ -128,6 +129,7 @@
     "sassdoc": "^2.7.4",
     "spandx": "^2.2.5",
     "stylelint": "^14.9.0",
-    "stylelint-config-sass-guidelines": "^9.0.1"
+    "stylelint-config-sass-guidelines": "^9.0.1",
+    "ttypescript": "^1.5.13"
   }
 }

scripts/build.js → scripts/bundle.js

@@ -2,10 +2,7 @@
 import { readdir } from 'node:fs/promises';
 import { fileURLToPath } from 'node:url';
 
-import { build as esBuild } from 'esbuild';
-import { litCssPlugin } from 'esbuild-plugin-lit-css';
 import { singleFileBuild } from '@patternfly/pfe-tools/esbuild.js';
-// import { minifyHTMLLiteralsPlugin } from 'esbuild-plugin-minify-html-literals';
 
 const external = [
   '@*',
@@ -29,43 +26,23 @@ export async function build(options) {
     `${entryPoints.reduce(toExportStatements, '')}
 ${additionalPackages.reduce(toExportStatements, '')}`;
 
-  const litCssOptions = {
-    include: /elements\/rh-(.*)\/(.*)\.css$/,
-    uglify: true,
-  };
-
   await singleFileBuild({
     componentsEntryPointContents,
     outfile: options?.outfile ?? 'rhds.min.js',
-    litCssOptions,
     allowOverwrite: true,
     external: options?.external ?? external,
     minify: false,
-  });
-
-  await esBuild({
-    entryPoints,
-    outdir: 'elements',
-    outbase: 'elements',
-    entryNames: '[dir]/[name]',
-    allowOverwrite: true,
-    bundle: true,
-    external,
-    format: 'esm',
-    sourcemap: 'linked',
-    minify: false,
-    legalComments: 'linked',
-    plugins: [
-      // BUG: https://github.com/asyncLiz/minify-html-literals/issues/37
-      // minifyHTMLLiteralsPlugin(),
-      litCssPlugin(litCssOptions),
-    ],
+    litCssOptions: {
+      include: /elements\/rh-(.*)\/(.*)\.css$/,
+      uglify: true,
+    },
   });
 }
 
 const stripExtension = x => x.replace(/\.\w+$/, '');
 const eqeqeq = (x, y) => x === y;
 
+/* eslint-env node */
 /** Was the module was run directly? */
 const INVOKED_VIA_CLI = [process.argv[1], fileURLToPath(import.meta.url)]
   .map(stripExtension) // fun with functional programming

scripts/transform-css.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+/* eslint-env node */
+import { fileURLToPath } from 'node:url';
+import { readFile, writeFile } from 'node:fs/promises';
+import { promisify } from 'node:util';
+import { transform } from '@pwrs/lit-css';
+
+import _glob from 'glob';
+const glob = promisify(_glob);
+
+export async function build() {
+  const entryPoints = await glob('./elements/**/*.css', {
+    ignore: ['./elements/**/*lightdom.css', './elements/**/demo/*.css'],
+    absolute: true,
+  });
+
+  await Promise.all(entryPoints.map(async inPath => {
+    const outPath = `${inPath}.js`;
+
+    const styleSheet = await readFile(inPath, 'utf8');
+    const result = await transform({ css: styleSheet, filePath: outPath });
+    await writeFile(outPath, result, 'utf8');
+  }));
+}
+
+const stripExtension = x => x.replace(/\.\w+$/, '');
+const eqeqeq = (x, y) => x === y;
+
+/** Was the module was run directly? */
+const INVOKED_VIA_CLI = [process.argv[1], fileURLToPath(import.meta.url)]
+  .map(stripExtension) // fun with functional programming
+  .reduce(eqeqeq);
+
+if (INVOKED_VIA_CLI) {
+  await build();
+}

transformers/css-import-specifiers.cjs

@@ -0,0 +1,28 @@
+// @ts-check
+const ts = require('typescript');
+
+/**
+ * Replace .css import specifiers with .css.js import specifiers
+ */
+module.exports = () =>
+  /** @param {import('typescript').TransformationContext} ctx */
+  ctx => {
+    /** @param {import('typescript').Node} node */
+    function visitor(node) {
+      if (ts.isImportDeclaration(node) && !node.importClause?.isTypeOnly) {
+        const specifier = node.moduleSpecifier.getText().replace(/^'(.*)'$/, '$1');
+        if (specifier.endsWith('.css')) {
+          return ctx.factory.createImportDeclaration(
+            node.decorators,
+            node.modifiers,
+            node.importClause,
+            ctx.factory.createStringLiteral(`${specifier}.js`)
+          );
+        }
+      }
+      return ts.visitEachChild(node, visitor, ctx);
+    }
+
+    /** @param {import('typescript').SourceFile} sourceFile */
+    return sourceFile => ts.visitEachChild(sourceFile, visitor, ctx);
+  };

tsconfig.json

@@ -10,19 +10,20 @@
     "docs/**/*.js",
     "scripts/*.js",
     "elements/**/*.js",
+    "**/*.spec.ts",
+    "**/*.e2e.ts",
     "lib/**/*.js",
     "./*.config.js"
   ],
   "compilerOptions": {
-    "allowJs": true,
     "allowSyntheticDefaultImports": true,
     "baseUrl": ".",
     "composite": true,
     "declaration": true,
     "downlevelIteration": true,
-    "emitDeclarationOnly": true,
+    "emitDeclarationOnly": false,
     "experimentalDecorators": true,
-    "importHelpers": false,
+    "importHelpers": true,
     "incremental": true,
     "inlineSources": true,
     "module": "es2020",
@@ -34,13 +35,14 @@
     "strict": true,
     "target": "es2020",
     "useDefineForClassFields": false,
+    "typeRoots": [
+      "./node_modules/@types",
+      "./@types"
+    ],
     "plugins": [
-      {
-        "name": "typescript-lit-html-plugin"
-      },
-      {
-        "name": "ts-lit-plugin"
-      }
+      { "transform": "./transformers/css-import-specifiers.cjs" },
+      { "name": "typescript-lit-html-plugin" },
+      { "name": "ts-lit-plugin" }
     ],
     "lib": [
       "DOM.iterable",