tungsten 0.3.11 → 0.3.12

package/dist/.build-complete

@@ -1 +1 @@
-1786148285205
+1786886454316

package/dist/CssNames.d.ts

@@ -2,6 +2,7 @@ export declare class CssNames {
     moduleName: string;
     tags: Record<string, string>;
     classes: Record<string, string>;
+    keyframes: Record<string, string>;
     constructor(moduleName: string);
 }
 export type ComponentStylesheet = CssNames;

package/dist/CssNames.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CssNames.d.ts","sourceRoot":"","sources":["../src/CssNames.ts"],"names":[],"mappings":"AACA,qBAAa,QAAQ;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAK;IACjC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAK;gBACxB,UAAU,EAAE,MAAM;CAGjC;AAsBD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAA"}
+{"version":3,"file":"CssNames.d.ts","sourceRoot":"","sources":["../src/CssNames.ts"],"names":[],"mappings":"AACA,qBAAa,QAAQ;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAK;IACjC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAK;IAGpC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAK;gBAC1B,UAAU,EAAE,MAAM;CAGjC;AAsBD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAA"}

package/dist/CssNames.js

@@ -6,6 +6,9 @@ export class CssNames {
     _defineProperty(this, "moduleName", void 0);
     _defineProperty(this, "tags", {});
     _defineProperty(this, "classes", {});
+    // animation names, in their css form - they are referenced from css text (a style= or
+    // css= attribute) rather than from a class attribute, so they stay escaped
+    _defineProperty(this, "keyframes", {});
     this.moduleName = moduleName;
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"BabelTransformComponentStyles.d.ts","sourceRoot":"","sources":["../../src/babelPlugins/BabelTransformComponentStyles.ts"],"names":[],"mappings":"AAwCA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAc,MAAM,iBAAiB,CAAA;AAa7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAA;AAmPvD,KAAK,IAAI,GAAG;IACR,iBAAiB,EAAE,MAAM,CAAA;IACzB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,wBAAwB,EAAE,MAAM,CAAA;IAChC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IAKxB,YAAY,CAAC,EAAE,MAAM,CAAA;IAIrB,KAAK,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAID,wBAAgB,iCAAiC,CAAC,IAAI,EAAE,IAAI,IAkMV,OAAO,KAAK;;;;6BAMjC,MAAM;;mBAIZ,MAAM;;;uCAkBkB,QAAQ,CAAC,wBAAwB,CAAC;sBAf3D,MAAM;kBACV;gBACF,IAAI;qCATS,MAAM;kBASL;aACjB;+BACkB,MAAM;;;EAsLpC"}
+{"version":3,"file":"BabelTransformComponentStyles.d.ts","sourceRoot":"","sources":["../../src/babelPlugins/BabelTransformComponentStyles.ts"],"names":[],"mappings":"AAwCA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAc,MAAM,iBAAiB,CAAA;AAa7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAA;AAmQvD,KAAK,IAAI,GAAG;IACR,iBAAiB,EAAE,MAAM,CAAA;IACzB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,wBAAwB,EAAE,MAAM,CAAA;IAChC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IAKxB,YAAY,CAAC,EAAE,MAAM,CAAA;IAIrB,KAAK,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAID,wBAAgB,iCAAiC,CAAC,IAAI,EAAE,IAAI,IAkMV,OAAO,KAAK;;;;6BAMjC,MAAM;;mBAIZ,MAAM;;;uCAkBkB,QAAQ,CAAC,wBAAwB,CAAC;sBAf3D,MAAM;kBACV;gBACF,IAAI;qCATS,MAAM;kBASL;aACjB;+BACkB,MAAM;;;EAyJpC"}

package/dist/babelPlugins/BabelTransformComponentStyles.js

@@ -146,6 +146,12 @@ function triggerDependers(styleDependers, dependers) {
     }
   }
 }
+// one `name: { source: transformed, ... }` property of the component's $style object
+function namesProperty(t, property, names) {
+  return t.objectProperty(t.stringLiteral(property), t.objectExpression(objectMapToArray(
+  // from sxy-standard library
+  names, (key, value) => t.objectProperty(t.stringLiteral(key), t.stringLiteral(value)))));
+}
 function cssToLocalClassNames(data, file, moduleName) {
   //console.log('cssToLocalClassNames')
   const names = new CssNames(moduleName);
@@ -435,16 +441,7 @@ export function MakeBabelTransformComponentStyles(opts) {
             //     path.parentPath.remove()// replaceWith(t.identifier('undefined'))
             //     return
             // }
-            const props = [t.objectProperty(t.stringLiteral('moduleName'), t.stringLiteral(names.moduleName))];
-            //if (names.tags !== undefined) 
-            props.push(t.objectProperty(t.stringLiteral('tags'), t.objectExpression(objectMapToArray(
-            // from sxy-standard library
-            names.tags, (key, value) => t.objectProperty(t.stringLiteral(key), t.stringLiteral(value))))));
-            //if (names.classes !== undefined)
-            props.push(t.objectProperty(t.stringLiteral('classes'), t.objectExpression(objectMapToArray(
-            // from sxy-standard library
-            names.classes, (key, value) => t.objectProperty(t.stringLiteral(key), t.stringLiteral(value))))));
-            const obj = t.objectExpression(props);
+            const obj = t.objectExpression([t.objectProperty(t.stringLiteral('moduleName'), t.stringLiteral(names.moduleName)), namesProperty(t, 'tags', names.tags), namesProperty(t, 'classes', names.classes), namesProperty(t, 'keyframes', names.keyframes)]);
             path.replaceWith(obj);
           }
         }

package/dist/bin/commands/dev.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../../src/bin/commands/dev.ts"],"names":[],"mappings":"AAuDA,OAAO,EAAE,CAAA"}
+{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../../src/bin/commands/dev.ts"],"names":[],"mappings":"AAsDA,OAAO,EAAE,CAAA"}

package/dist/bin/commands/dev.js

@@ -8,7 +8,6 @@ import { createTimeProfiler } from "../../timeProfiler.js";
 const args = process.argv.slice(3);
 const boot = !args.includes('--no-boot');
 const profile = args.includes('--profile');
-cliOut(`Starting dev mode`);
 //// prep the app
 const sxyFramework = new Framework();
 sxyFramework.profiler = createTimeProfiler(profile);

package/dist/bin/commands/speed.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=speed.d.ts.map

package/dist/bin/commands/speed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"speed.d.ts","sourceRoot":"","sources":["../../../src/bin/commands/speed.ts"],"names":[],"mappings":""}

package/dist/bin/commands/speed.js

@@ -0,0 +1,2 @@
+console.log('speed');
+export {};

package/dist/bin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/bin/index.ts"],"names":[],"mappings":"AAwDA,OAAO,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/bin/index.ts"],"names":[],"mappings":"AA4DA,OAAO,EAAE,CAAA"}

package/dist/bin/index.js

@@ -1,10 +1,14 @@
-import { cliWarn } from "../cliOutput.js";
+import { cliOut, cliWarn } from "../cliOutput.js";
 // get command line args
 const args = process.argv.slice(2);
 const command = args[0];
+if (command === undefined || command === '') {
+  cliWarn(`Please choose a command, e.g. "tungsten dev"`);
+}
 switch (command) {
   case 'dev':
     {
+      cliOut(`Starting Tungsten dev mode`);
       // set env before loading the next file, to set the env before file imports
       process.env.__TUNGSTEN_ENV = 'development';
       await import("./commands/dev.js");
@@ -12,12 +16,14 @@ switch (command) {
     }
   case 'devmon':
     {
+      cliOut(`Starting Tungsten auto-restart dev mode`);
       process.env.__TUNGSTEN_ENV = 'development';
       await import("./commands/devmon.js");
       break;
     }
   case 'build':
     {
+      cliOut(`Starting Tungsten production build`);
       process.env.__TUNGSTEN_ENV = 'production';
       process.env.__TUNGSTEN_DEBUG = 'true';
       await import("./commands/build.js");
@@ -25,12 +31,14 @@ switch (command) {
     }
   case 'start':
     {
+      cliOut(`Starting Tungsten server`);
       process.env.__TUNGSTEN_ENV = 'production';
       await import("./commands/start.js");
       break;
     }
   case 'static':
     {
+      cliOut(`Starting Tungsten static site preview`);
       //process.env.__TUNGSTEN_ENV = 'production'
       await import("./commands/static.js");
       break;
@@ -53,10 +61,6 @@ switch (command) {
     }
   default:
     {
-      if (!command) {
-        cliWarn(`Please choose a command, e.g. "tungsten dev"`);
-      } else {
-        cliWarn(`tungsten: unknown command "${command}"`);
-      }
+      cliWarn(`tungsten: unknown command "${command}"`);
     }
 }

package/dist/componentCss/tungsten.css

@@ -1,2 +1,2 @@
-@import "i/T-components-library-__StatefulMessage-StatefulMessage.css";
-@import "i/T-components-library-RichTextEditor-RichTextEditor.css";
+@import "i/T-components-library-RichTextEditor-RichTextEditor.css";
+@import "i/T-components-library-__StatefulMessage-StatefulMessage.css";

package/dist/components/library/RichTextEditor/RichTextEditor.js

@@ -451,7 +451,8 @@ export class RichTextEditor extends TungstenStatefulComponent {
         "source-toggle": "T#-components-library-RichTextEditor-RichTextEditor_source-toggle",
         "surface": "T#-components-library-RichTextEditor-RichTextEditor_surface",
         "source": "T#-components-library-RichTextEditor-RichTextEditor_source"
-      }
+      },
+      "keyframes": {}
     });
   }
   static $stylesheet = "i/T-components-library-RichTextEditor-RichTextEditor.css";

package/dist/components/library/__StatefulMessage/StatefulMessage.js

@@ -81,7 +81,8 @@ export class StatefulMessage extends TungstenStatefulComponent {
         "warning": "T#-components-library-__StatefulMessage-StatefulMessage_warning",
         "error": "T#-components-library-__StatefulMessage-StatefulMessage_error",
         "exception": "T#-components-library-__StatefulMessage-StatefulMessage_exception"
-      }
+      },
+      "keyframes": {}
     });
   }
   static $stylesheet = "i/T-components-library-__StatefulMessage-StatefulMessage.css";

package/dist/postcssPlugins/TransformCssNames.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TransformCssNames.d.ts","sourceRoot":"","sources":["../../src/postcssPlugins/TransformCssNames.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,IAAI,EAAQ,MAAM,SAAS,CAAA;AACzC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAkE9C,KAAK,IAAI,GAAG;IACR,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,QAAQ,CAAA;CACrB,CAAA;AAKD,eAAO,MAAM,iBAAiB;WAAU,IAAI;;mBAezB,IAAI;;;CAoHtB,CAAA"}
+{"version":3,"file":"TransformCssNames.d.ts","sourceRoot":"","sources":["../../src/postcssPlugins/TransformCssNames.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,IAAI,EAAQ,MAAM,SAAS,CAAA;AACzC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAoE9C,KAAK,IAAI,GAAG;IACR,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,QAAQ,CAAA;CACrB,CAAA;AAYD,eAAO,MAAM,iBAAiB;WAAU,IAAI;;mBAezB,IAAI;;;CAqJtB,CAAA"}

package/dist/postcssPlugins/TransformCssNames.js

@@ -10,8 +10,10 @@ extract classes -> localise
 .span       ->  NavItem_span
 */
 import { parseSelectorsRich } from "./parseSelectorsRich.js";
+import { scopeAnimationValue } from "./scopeAnimationValue.js";
 import { componentBumpClass } from "../componentClassName.js";
-import { throwError } from "../throwError.js";
+import { throwError, warnMessage } from "../throwError.js";
+import { warn } from "../output.js";
 function debug(...texts) {
   //console.log(...texts)
 }
@@ -56,6 +58,11 @@ function separatePseudo(selector) {
   const colonIndex = selector.indexOf(':');
   if (colonIndex === -1) return [selector, ''];else return [selector.slice(0, colonIndex), selector.slice(colonIndex)];
 }
+// matches @keyframes and its vendor prefixed forms, e.g. @-webkit-keyframes
+// at-rule and property names are case insensitive in css, hence the i flag on both
+const keyframesAtRule = /(^|-)keyframes$/i;
+// the declarations that name an animation, e.g. `animation: fade 2s` / `animation-name: fade`
+const animationDecl = /^animation(-name)?$/i;
 const bump = '.' + componentBumpClass + '.' + componentBumpClass + '.' + componentBumpClass;
 export const TransformCssNames = opts => {
   //console.log('TransformCssNames')
@@ -70,11 +77,36 @@ export const TransformCssNames = opts => {
     Once(root) {
       const moduleName = opts.moduleName;
       const names = opts.outNames;
+      const sourceFile = root.source?.input.file;
       names.moduleName = moduleName;
       names.tags = {};
       names.classes = {};
+      names.keyframes = {};
+      // keyframe offsets (0%, from, to) are Rules within the at-rule, but they are positions
+      // rather than selectors, so they are collected here and passed over by the selector walk
+      const keyframeOffsets = new Set();
+      // the animation name is scoped like a class, so two modules can each define `fade`
+      root.walkAtRules(keyframesAtRule, atRule => {
+        const name = atRule.params.trim();
+        if (name === '') return;
+        const newName = transformClass(escapeModuleName(moduleName), name);
+        names.keyframes[name] = newName;
+        atRule.params = newName;
+        atRule.walkRules(offset => {
+          keyframeOffsets.add(offset);
+        });
+      });
+      // an animation name is module scoped wherever it appears, exactly as a class is. A name
+      // with no @keyframes in the module cannot resolve to anything, so it is warned about
+      root.walkDecls(animationDecl, decl => {
+        decl.value = scopeAnimationValue(decl.value, name => {
+          if (!(name in names.keyframes)) warn(warnMessage('TransformCssNames', `animation '${name}' in module '${moduleName}' has no @keyframes of that` + ` name in the module, so it will not run` + (sourceFile === undefined ? '' : ` (${sourceFile})`)));
+          return transformClass(escapeModuleName(moduleName), name);
+        });
+      });
       // Transform CSS AST here
       root.walkRules(rule => {
+        if (keyframeOffsets.has(rule)) return;
         const selectorLine = rule.selector;
         const selectorGroups = selectorLine.split(',').map(x => x.trim());
         const newSelectorGroups = [];

package/dist/postcssPlugins/scopeAnimationValue.d.ts

@@ -0,0 +1,2 @@
+export declare function scopeAnimationValue(value: string, scopeName: (name: string) => string): string;
+//# sourceMappingURL=scopeAnimationValue.d.ts.map

package/dist/postcssPlugins/scopeAnimationValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scopeAnimationValue.d.ts","sourceRoot":"","sources":["../../src/postcssPlugins/scopeAnimationValue.ts"],"names":[],"mappings":"AA2BA,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAW9F"}

package/dist/postcssPlugins/scopeAnimationValue.js

@@ -0,0 +1,37 @@
+import { splitCssValue } from "./splitCssValue.js";
+// every keyword the animation shorthand accepts. A word that is none of these, and does not
+// read as a time, a number or a function, is the animation name
+const animationKeywords = new Set(['none', 'forwards', 'backwards', 'both',
+// fill mode
+'normal', 'reverse', 'alternate', 'alternate-reverse',
+// direction
+'running', 'paused',
+// play state
+'infinite',
+// iteration count
+'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out',
+// timing function
+'step-start', 'step-end', 'initial', 'inherit', 'unset', 'revert', 'revert-layer' // css wide keywords
+]);
+// an identifier starts with a letter, _, - or an escape - which rules out `2s`, `-1s` and `0.5`
+const identifierStart = /^-?[a-zA-Z_\\]/;
+function isAnimationName(word) {
+  if (word.includes('(')) return false; // a function, e.g. steps(4, end)
+  if (animationKeywords.has(word.toLowerCase())) return false;
+  return identifierStart.test(word);
+}
+// Scopes the animation names in an `animation` or `animation-name` value, e.g.
+// `fade 2s linear, slide 1s` -> `Card_fade 2s linear, Card_slide 1s`.
+// A value may list several animations, separated by commas, but names only one per list entry.
+export function scopeAnimationValue(value, scopeName) {
+  let named = false;
+  return splitCssValue(value).map(part => {
+    if (part === ',') {
+      named = false;
+      return part;
+    }
+    if (named || !isAnimationName(part)) return part;
+    named = true;
+    return scopeName(part);
+  }).join('');
+}

package/dist/postcssPlugins/splitCssValue.d.ts

@@ -0,0 +1,2 @@
+export declare function splitCssValue(value: string): string[];
+//# sourceMappingURL=splitCssValue.d.ts.map

package/dist/postcssPlugins/splitCssValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitCssValue.d.ts","sourceRoot":"","sources":["../../src/postcssPlugins/splitCssValue.ts"],"names":[],"mappings":"AAIA,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CA2CrD"}

package/dist/postcssPlugins/splitCssValue.js

@@ -0,0 +1,44 @@
+// splits a css value into its top level words, whitespace and commas, so it can be rebuilt
+// exactly by joining the parts back together. Brackets, quotes and escapes are opaque, so
+// `steps(4, end)` stays one word rather than becoming three parts
+export function splitCssValue(value) {
+  const parts = [];
+  let word = '';
+  let depth = 0;
+  let quote = '';
+  let escaped = false;
+  function endWord() {
+    if (word !== '') parts.push(word);
+    word = '';
+  }
+  for (const char of value) {
+    if (escaped) {
+      word += char;
+      escaped = false;
+    } else if (char === '\\') {
+      word += char;
+      escaped = true;
+    } else if (quote !== '') {
+      word += char;
+      if (char === quote) quote = '';
+    } else if (char === '"' || char === '\'') {
+      word += char;
+      quote = char;
+    } else if (char === '(') {
+      word += char;
+      depth += 1;
+    } else if (char === ')') {
+      word += char;
+      if (depth > 0) depth -= 1;
+    } else if (depth > 0) {
+      word += char;
+    } else if (char === ',' || /\s/.test(char)) {
+      endWord();
+      parts.push(char);
+    } else {
+      word += char;
+    }
+  }
+  endWord();
+  return parts;
+}

package/dist/throwError.d.ts

@@ -1,3 +1,4 @@
 export declare function throwError(location: string, message: string): never;
 export declare function errorMessage(location: string, message: string): string;
+export declare function warnMessage(location: string, message: string): string;
 //# sourceMappingURL=throwError.d.ts.map

package/dist/throwError.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"throwError.d.ts","sourceRoot":"","sources":["../src/throwError.ts"],"names":[],"mappings":"AAGA,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,KAAK,CAEnE;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAEtE"}
+{"version":3,"file":"throwError.d.ts","sourceRoot":"","sources":["../src/throwError.ts"],"names":[],"mappings":"AAGA,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,KAAK,CAEnE;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAEtE;AAED,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAErE"}

package/dist/throwError.js

@@ -5,4 +5,7 @@ export function throwError(location, message) {
 }
 export function errorMessage(location, message) {
   return `${packageNameCapitalized} ${location} error: ${message}`;
+}
+export function warnMessage(location, message) {
+  return `${packageNameCapitalized} ${location} warning: ${message}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tungsten",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "description": "",
   "type": "module",
   "bin": {
@@ -115,7 +115,7 @@
     "prop-types": "^15.8.1",
     "rimraf": "^5.0.10",
     "rollup-plugin-visualizer": "^5.14.0",
-    "sxy-test-runner": "^2.3.12",
+    "sxy-test-runner": "^2.4.3",
     "sxy-types": "^1.0.23",
     "typescript": "^6.0.3"
   },