tungsten 0.2.17 → 0.2.18

package/dist/_client/cjsHelpers.sxyt.js

@@ -22,13 +22,15 @@ describe('_client/cjsHelpers loadDeps()', ({
   it(`loads a dependency cycle instead of hanging`, async () => {
     const dir = await mkdtemp(join(tmpdir(), 'tungsten-load-deps-'));
     try {
-      const a = pathToFileURL(join(dir, 'a.js')).href;
-      const b = pathToFileURL(join(dir, 'b.js')).href;
-      const c = pathToFileURL(join(dir, 'c.js')).href;
+      // .mjs so that node does not have to guess the module type of a file in a
+      // temp dir with no package.json
+      const a = pathToFileURL(join(dir, 'a.mjs')).href;
+      const b = pathToFileURL(join(dir, 'b.mjs')).href;
+      const c = pathToFileURL(join(dir, 'c.mjs')).href;
       // a <-> b is circular, and both reach c
-      await writeFile(join(dir, 'a.js'), moduleSource([b, c]));
-      await writeFile(join(dir, 'b.js'), moduleSource([a, c]));
-      await writeFile(join(dir, 'c.js'), moduleSource([]));
+      await writeFile(join(dir, 'a.mjs'), moduleSource([b, c]));
+      await writeFile(join(dir, 'b.mjs'), moduleSource([a, c]));
+      await writeFile(join(dir, 'c.mjs'), moduleSource([]));
       const timeout = new Promise(resolve => setTimeout(() => resolve('timed out'), 5000).unref());
       const loaded = await Promise.race([loadDeps([a]), timeout]);
       expect(loaded).not.to.equal('timed out');

package/dist/babelPlugins/BabelTransformRemoveDevBlocks.d.ts

@@ -0,0 +1,9 @@
+import { NodePath } from '@babel/core';
+import type { ConditionalExpression, IfStatement } from '@babel/types';
+export declare function MakeBabelTransformRemoveDevBlocks(): () => {
+    visitor: {
+        IfStatement(path: NodePath<IfStatement>): void;
+        ConditionalExpression(path: NodePath<ConditionalExpression>): void;
+    };
+};
+//# sourceMappingURL=BabelTransformRemoveDevBlocks.d.ts.map

package/dist/babelPlugins/BabelTransformRemoveDevBlocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BabelTransformRemoveDevBlocks.d.ts","sourceRoot":"","sources":["../../src/babelPlugins/BabelTransformRemoveDevBlocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,KAAK,EAAE,qBAAqB,EAAc,WAAW,EAAE,MAAM,cAAc,CAAA;AAOlF,wBAAgB,iCAAiC;;0BAef,QAAQ,CAAC,WAAW,CAAC;oCAUX,QAAQ,CAAC,qBAAqB,CAAC;;EAS1E"}

package/dist/babelPlugins/BabelTransformRemoveDevBlocks.js

@@ -0,0 +1,38 @@
+// Removes dev only branches from the production client bundle.
+// `isDev` is false in production, so `if (isDev) {...}` blocks and `isDev ? a : b`
+// expressions collapse to their alternate (or disappear entirely).
+// This also lets rollup tree shake modules that are only imported by dev branches.
+export function MakeBabelTransformRemoveDevBlocks() {
+  return function BabelTransformRemoveDevBlocks(/*babel*/
+  ) {
+    function investigationCondition(test) {
+      if (test.type === 'Identifier' && test.name === 'isDev') {
+        return true;
+      } else if (test.type === 'LogicalExpression' && test.operator === '&&') {
+        // false && anything is false
+        return investigationCondition(test.left) || investigationCondition(test.right);
+      }
+      return false;
+    }
+    return {
+      visitor: {
+        IfStatement(path) {
+          const test = path.node.test;
+          if (investigationCondition(test)) {
+            if (path.node.alternate) {
+              path.replaceWith(path.node.alternate);
+            } else {
+              path.remove();
+            }
+          }
+        },
+        ConditionalExpression(path) {
+          const test = path.node.test;
+          if (investigationCondition(test)) {
+            path.replaceWith(path.node.alternate);
+          }
+        }
+      }
+    };
+  };
+}

package/dist/build/rollup.user.prod.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rollup.user.prod.config.d.ts","sourceRoot":"","sources":["../../src/build/rollup.user.prod.config.ts"],"names":[],"mappings":"AAaA,KAAK,YAAY,GAAG;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACrB,CAAA;AAeD,QAAA,MAAM,YAAY,EAAE,YAkBnB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"rollup.user.prod.config.d.ts","sourceRoot":"","sources":["../../src/build/rollup.user.prod.config.ts"],"names":[],"mappings":"AAcA,KAAK,YAAY,GAAG;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACrB,CAAA;AAeD,QAAA,MAAM,YAAY,EAAE,YAkBnB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/build/rollup.user.prod.config.js

@@ -6,6 +6,7 @@ import { terser } from "rollup-plugin-terser";
 //import gzip from "rollup-plugin-gzip"
 import jsonModule from "@rollup/plugin-json";
 import { MakeBabelTransformRemoveServerBlocks } from "../babelPlugins/BabelTransformRemoveServerBlocks.js";
+import { MakeBabelTransformRemoveDevBlocks } from "../babelPlugins/BabelTransformRemoveDevBlocks.js";
 const json = typeof jsonModule === "function" ? jsonModule : jsonModule.default;
 function replaceProductionNodeEnv() {
   return {
@@ -25,7 +26,7 @@ const rollupConfig = {
   replaceProductionNodeEnv(), babel({
     babelHelpers: 'bundled',
     exclude: '**/node_modules/**',
-    plugins: [MakeBabelTransformRemoveServerBlocks()]
+    plugins: [MakeBabelTransformRemoveServerBlocks(), MakeBabelTransformRemoveDevBlocks()]
   }),
   // must be after commonjs
   terser({

package/dist/style/styleContentSxy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styleContentSxy.d.ts","sourceRoot":"","sources":["../../src/style/styleContentSxy.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,KAAK,WAAW,EAAsF,MAAM,mBAAmB,CAAA;AAWxI,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,eAIrE"}
+{"version":3,"file":"styleContentSxy.d.ts","sourceRoot":"","sources":["../../src/style/styleContentSxy.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EACH,KAAK,WAAW,EACnB,MAAM,mBAAmB,CAAA;AAa1B,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,eAIrE"}

package/dist/style/styleContentSxy.js

@@ -4,15 +4,17 @@ import { warn } from "../output.js";
 import { TungstenError } from "../TungstenError.js";
 import { componentBumpClass } from "../componentClassName.js";
 import { $props, $type } from "../contentNodeSymbols.js";
+import { isDev } from "../isDev.js";
+import { getStyleUsage } from "./unusedStyles.js";
 function debug(...texts) {
   //console.log(...texts)
 }
 export function styleContentSxy(content, styles) {
   if (count(styles.tags) === 0 && count(styles.classes) === 0) return content; // optimization short circuit
-  processElement(content, styles);
+  processElement(content, styles, isDev ? getStyleUsage(styles) : undefined);
   return content;
 }
-function processElement(element, styles) {
+function processElement(element, styles, usage) {
   //console.log('element', element)
   debug('styles', styles);
   //debug(`---- style element ----`)
@@ -37,14 +39,15 @@ function processElement(element, styles) {
   if (Array.isArray(element)) {
     //debug('**** array element ****', element)
     for (const e of element) {
-      processElement(e, styles);
+      processElement(e, styles, usage);
     }
     return;
   }
   debug('Element must be an element. Type: ', typeof element);
   // element is a ContentNodeElement
   let tagName;
-  if (element[$props] !== undefined && element[$props].tagName !== undefined) {
+  //if (element[$props] !== undefined && element[$props].tagName !== undefined) {
+  if (element[$props].tagName !== undefined) {
     if (typeof element[$props].tagName !== 'string') {
       throw new TungstenError(`styleContentSxy() error: ${ContentNodeElementIsHtml(element) ? element[$type] : getComponentName(element)}` + ` component tagName field should be type string. Received ${typeof element[$props].tagName}`);
     }
@@ -97,6 +100,7 @@ function processElement(element, styles) {
   let newClassName = '';
   if (tagName in styles.tags) {
     newClassName += ' ' + componentBumpClass + ' ' + styles.tags[tagName];
+    usage?.usedTags.add(tagName);
   }
   //console.log(element.props.className)
   //if (element.props.className !== undefined) console.log(element.props.className)
@@ -110,6 +114,7 @@ function processElement(element, styles) {
     for (const cn of classNames) {
       if (cn in styles.classes) {
         newClassName += ` ${styles.classes[cn]}`;
+        usage?.usedClasses.add(cn);
       }
     }
   }
@@ -120,7 +125,7 @@ function processElement(element, styles) {
   if (element[$props].children !== undefined) {
     //debug(tagName + '^^^^children', element.props.children)
     //element.props.children = element.props.children as ContentNode
-    processElement(element[$props].children, styles);
+    processElement(element[$props].children, styles, usage);
   }
   //console.log('element after mods', tagName, element)
 }

package/dist/style/unusedStyles.d.ts

@@ -0,0 +1,11 @@
+import type { CssNames } from '../CssNames.js';
+export type StyleUsage = {
+    styles: CssNames;
+    usedTags: Set<string>;
+    usedClasses: Set<string>;
+    reportedTags: Set<string>;
+    reportedClasses: Set<string>;
+};
+export declare function getStyleUsage(styles: CssNames): StyleUsage;
+export declare function reportUnusedStyles(): void;
+//# sourceMappingURL=unusedStyles.d.ts.map

package/dist/style/unusedStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unusedStyles.d.ts","sourceRoot":"","sources":["../../src/style/unusedStyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAU9C,MAAM,MAAM,UAAU,GAAG;IACrB,MAAM,EAAE,QAAQ,CAAA;IAChB,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACrB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACxB,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAC/B,CAAA;AAUD,wBAAgB,aAAa,CAAC,MAAM,EAAE,QAAQ,cAc7C;AASD,wBAAgB,kBAAkB,SA0BjC"}

package/dist/style/unusedStyles.js

@@ -0,0 +1,43 @@
+import { warn } from "../output.js";
+// component stylesheets are module level singletons, so holding them here is not a leak
+const usageByStyles = new Map();
+// wait for render activity to settle before reporting, so that content rendered a little
+// later (async components, route changes) doesn't get reported as unused
+const reportDelayMs = 5000;
+let reportHandle;
+export function getStyleUsage(styles) {
+  let usage = usageByStyles.get(styles);
+  if (usage === undefined) {
+    usage = {
+      styles,
+      usedTags: new Set(),
+      usedClasses: new Set(),
+      reportedTags: new Set(),
+      reportedClasses: new Set()
+    };
+    usageByStyles.set(styles, usage);
+  }
+  scheduleUnusedStylesReport();
+  return usage;
+}
+function scheduleUnusedStylesReport() {
+  if (reportHandle !== undefined) clearTimeout(reportHandle);
+  reportHandle = setTimeout(reportUnusedStyles, reportDelayMs);
+  // don't hold a node process open just for the report
+  if (typeof reportHandle === 'object' && typeof reportHandle.unref === 'function') reportHandle.unref();
+}
+export function reportUnusedStyles() {
+  if (reportHandle !== undefined) {
+    clearTimeout(reportHandle);
+    reportHandle = undefined;
+  }
+  for (const usage of usageByStyles.values()) {
+    const tags = Object.keys(usage.styles.tags).filter(tag => !usage.usedTags.has(tag) && !usage.reportedTags.has(tag));
+    const classes = Object.keys(usage.styles.classes).filter(className => !usage.usedClasses.has(className) && !usage.reportedClasses.has(className));
+    if (tags.length === 0 && classes.length === 0) continue;
+    // only report each selector once, otherwise every later render repeats the warning
+    for (const tag of tags) usage.reportedTags.add(tag);
+    for (const className of classes) usage.reportedClasses.add(className);
+    warn(`Tungsten dev: styles in module "${usage.styles.moduleName}" have not matched any content:` + (tags.length > 0 ? `\n    tag/component names: ${tags.join(', ')}` : '') + (classes.length > 0 ? `\n    class names: ${classes.join(', ')}` : ''));
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tungsten",
-  "version": "0.2.17",
+  "version": "0.2.18",
   "description": "",
   "type": "module",
   "bin": {