@jackens/nnn 2024.2.27 → 2024.3.2

package/nnn.d.ts

@@ -1,3 +1,28 @@
+/**
+ * The type of arguments of the `c` helper.
+ */
+export type CNode = {
+    [attributeOrSelector: string]: string | number | CNode | undefined;
+};
+
+/**
+ * The type of arguments of the `c` helper.
+ */
+export type CRoot = Partial<Record<PropertyKey, CNode>>;
+
+/**
+ * A simple CSS-in-JS helper.
+ *
+ * The `root` parameter provides a hierarchical description of CSS rules.
+ *
+ * - Keys of sub-objects whose values are NOT objects are treated as CSS attribute, and values are treated as values of those CSS attributes; the concatenation of keys of all parent objects is a CSS rule.
+ * - All keys ignore the part starting with a splitter (default: `$$`) sign until the end of the key (e.g. `src$$1` → `src`, `@font-face$$1` → `@font-face`).
+ * - In keys specifying CSS attribute, all uppercase letters are replaced by lowercase letters with an additional `-` character preceding them (e.g. `fontFamily` → `font-family`).
+ * - Commas in keys that makes a CSS rule cause it to “split” and create separate rules for each part (e.g. `{div:{margin:1,'.a,.b,.c':{margin:2}}}` → `div{margin:1}div.a,div.b,div.c{margin:2}`).
+ * - Top-level keys that begin with `@` are not concatenated with sub-object keys.
+ */
+export declare const c: (root: CRoot, splitter?: string) => string;
+
 /**
  * A helper for creating a chart based on a table (conf. <https://jackens.github.io/nnn/chartable/>).
  *
@@ -126,31 +151,6 @@ export declare const is: {
     <T extends abstract new (...args: any[]) => any>(type: T, arg: any): arg is InstanceType<T>;
 };
 
-/**
- * The type of arguments of the `jcss` helper.
- */
-export type JcssNode = {
-    [attributeOrSelector: string]: string | number | JcssNode | undefined;
-};
-
-/**
- * The type of arguments of the `jcss` helper.
- */
-export type JcssRoot = Partial<Record<PropertyKey, JcssNode>>;
-
-/**
- * A simple CSS-in-JS helper.
- *
- * The `root` parameter provides a hierarchical description of CSS rules.
- *
- * - Keys of sub-objects whose values are NOT objects are treated as CSS attribute, and values are treated as values of those CSS attributes; the concatenation of keys of all parent objects is a CSS rule.
- * - All keys ignore the part starting with a splitter (default: `$$`) sign until the end of the key (e.g. `src$$1` → `src`, `@font-face$$1` → `@font-face`).
- * - In keys specifying CSS attribute, all uppercase letters are replaced by lowercase letters with an additional `-` character preceding them (e.g. `fontFamily` → `font-family`).
- * - Commas in keys that makes a CSS rule cause it to “split” and create separate rules for each part (e.g. `{div:{margin:1,'.a,.b,.c':{margin:2}}}` → `div{margin:1}div.a,div.b,div.c{margin:2}`).
- * - Top-level keys that begin with `@` are not concatenated with sub-object keys.
- */
-export declare const jcss: (root: JcssRoot, splitter?: string) => string;
-
 /**
  * `JSON.parse` with “JavaScript turned on”.
  *

package/nnn.js

@@ -1,6 +1,59 @@
 // src/nnn/is.ts
 var is = (type, arg) => arg?.constructor === type;
 
+// src/nnn/c.ts
+var _c = (node, prefix, result, split) => {
+  const queue = [[node, prefix]];
+  while (queue.length > 0) {
+    const [style0, prefix0] = queue.shift() ?? [];
+    if (style0 == null || prefix0 == null) {
+      continue;
+    }
+    if (is(Array, style0)) {
+      result.push(prefix0, prefix0 !== "" ? "{" : "", style0.join(";"), prefix0 !== "" ? "}" : "");
+    } else {
+      const todo = [];
+      let attributes = [];
+      let attributesPushed = false;
+      for (const key in style0) {
+        const value = style0[key];
+        if (is(String, value) || is(Number, value)) {
+          if (!attributesPushed) {
+            attributesPushed = true;
+            attributes = [];
+            todo.push([attributes, prefix0]);
+          }
+          attributes.push(`${split(key).replace(/([A-Z])/g, (_, letter) => "-" + letter.toLowerCase())}:${value}`);
+        } else if (value != null) {
+          attributesPushed = false;
+          const prefixN = [];
+          const keyChunks = key.split(",");
+          prefix0.split(",").forEach((prefixChunk) => keyChunks.forEach((keyChunk) => prefixN.push(prefixChunk + keyChunk)));
+          todo.push([value, prefixN.join(",")]);
+        }
+      }
+      queue.unshift(...todo);
+    }
+  }
+};
+var c = (root, splitter = "$$") => {
+  const split = (text) => text.split(splitter)[0];
+  const chunks = [];
+  for (const key in root) {
+    const value = root[key];
+    if (value != null) {
+      if (key[0] === "@") {
+        chunks.push(split(key) + "{");
+        _c(value, "", chunks, split);
+        chunks.push("}");
+      } else {
+        _c(value, split(key), chunks, split);
+      }
+    }
+  }
+  return chunks.join("");
+};
+
 // src/nnn/h.ts
 var NS = {
   xlink: "http://www.w3.org/1999/xlink"
@@ -88,9 +141,9 @@ var chartable = ({
   const zxValues = [];
   const xLabels = [];
   const zLabels = [];
-  table.querySelectorAll("tr").forEach((row, r) => row.querySelectorAll("td,th").forEach((col, c) => {
+  table.querySelectorAll("tr").forEach((row, r) => row.querySelectorAll("td,th").forEach((col, c2) => {
     const x = r - 1;
-    const z = c - +headerColumn;
+    const z = c2 - +headerColumn;
     const value = col.innerText;
     if (x >= 0 && z >= 0) {
       zxValues[z] = zxValues[z] ?? [];
@@ -215,11 +268,8 @@ var eq = (x, y) => {
 var escapeValues = (escapeMap, values) => values.map((value) => (escapeMap.get(value?.constructor) ?? escapeMap.get(undefined))?.(value) ?? "");
 var escape = (escapeMap, template, ...values) => String.raw(template, ...escapeValues(escapeMap, values));
 
-// src/nnn/has.ts
-var has = (key, ref) => (is(String, key) || is(Number, key) || is(Symbol, key)) && Object.hasOwnProperty.call(ref ?? Object, key);
-
 // src/nnn/fixTypography.ts
-var TAGS_TO_SKIP = { IFRAME: 1, NOSCRIPT: 1, PRE: 1, SCRIPT: 1, STYLE: 1, TEXTAREA: 1 };
+var TAGS_TO_SKIP = ["IFRAME", "NOSCRIPT", "PRE", "SCRIPT", "STYLE", "TEXTAREA"];
 var fixTypography = (node) => {
   const queue = [node];
   while (queue.length > 0) {
@@ -228,7 +278,7 @@ var fixTypography = (node) => {
       node0.childNodes.forEach((childNode) => {
         if (childNode instanceof Text) {
           queue.push(childNode);
-        } else if (childNode instanceof Element && !has(childNode.tagName, TAGS_TO_SKIP)) {
+        } else if (childNode instanceof Element && !TAGS_TO_SKIP.includes(childNode.tagName)) {
           queue.push(childNode);
         }
       });
@@ -250,58 +300,8 @@ var fixTypography = (node) => {
   }
 };
 
-// src/nnn/jcss.ts
-var _jcss = (node, prefix, result, split) => {
-  const queue = [[node, prefix]];
-  while (queue.length > 0) {
-    const [style0, prefix0] = queue.shift() ?? [];
-    if (style0 == null || prefix0 == null) {
-      continue;
-    }
-    if (is(Array, style0)) {
-      result.push(prefix0, prefix0 !== "" ? "{" : "", style0.join(";"), prefix0 !== "" ? "}" : "");
-    } else {
-      const todo = [];
-      let attributes = [];
-      let attributesPushed = false;
-      for (const key in style0) {
-        const value = style0[key];
-        if (is(String, value) || is(Number, value)) {
-          if (!attributesPushed) {
-            attributesPushed = true;
-            attributes = [];
-            todo.push([attributes, prefix0]);
-          }
-          attributes.push(`${split(key).replace(/([A-Z])/g, (_, letter) => "-" + letter.toLowerCase())}:${value}`);
-        } else if (value != null) {
-          attributesPushed = false;
-          const prefixN = [];
-          const keyChunks = key.split(",");
-          prefix0.split(",").forEach((prefixChunk) => keyChunks.forEach((keyChunk) => prefixN.push(prefixChunk + keyChunk)));
-          todo.push([value, prefixN.join(",")]);
-        }
-      }
-      queue.unshift(...todo);
-    }
-  }
-};
-var jcss = (root, splitter = "$$") => {
-  const split = (text) => text.split(splitter)[0];
-  const chunks = [];
-  for (const key in root) {
-    const value = root[key];
-    if (value != null) {
-      if (key[0] === "@") {
-        chunks.push(split(key) + "{");
-        _jcss(value, "", chunks, split);
-        chunks.push("}");
-      } else {
-        _jcss(value, split(key), chunks, split);
-      }
-    }
-  }
-  return chunks.join("");
-};
+// src/nnn/has.ts
+var has = (key, ref) => (is(String, key) || is(Number, key) || is(Symbol, key)) && Object.hasOwnProperty.call(ref ?? Object, key);
 
 // src/nnn/jsOnParse.ts
 var jsOnParse = (handlers, text) => JSON.parse(text, (key, value) => {
@@ -408,7 +408,6 @@ export {
   nanolight,
   locale,
   jsOnParse,
-  jcss,
   is,
   has,
   h,
@@ -416,5 +415,6 @@ export {
   escapeValues,
   escape,
   eq,
-  chartable
+  chartable,
+  c
 };

package/package.json

@@ -42,5 +42,5 @@
   "types": "nnn.d.ts",
   "name": "@jackens/nnn",
   "type": "module",
-  "version": "2024.2.27"
+  "version": "2024.3.2"
 }

package/readme.md

@@ -2,7 +2,15 @@
 
 Jackens’ JavaScript helpers.
 
-<sub>Version: <code class="version">2024.2.27</code></sub>
+<sub>Version: <code class="version">2024.3.2</code></sub>
+
+## Examples
+
+- [Chartable Demo](/nnn/chartable/)
+- [Chessboard Demo](/nnn/chessboard/)
+- [Documentation](/nnn/doc/)
+- [Gant Chart Demo](/nnn/gantt/)
+- [Responsive Web Design Demo](/nnn/rwd/)
 
 ## Installation
 
@@ -32,11 +40,12 @@ import { «something» } from './node_modules/@jackens/nnn/nnn.js'
 
 ## Exports
 
+- `CNode`: The type of arguments of the `c` helper.
+- `CRoot`: The type of arguments of the `c` helper.
 - `EscapeMap`: The type of arguments of the `escapeValues` and `escape` helpers.
 - `HArgs`: The type of arguments of the `h` and `s` helpers.
 - `HArgs1`: The type of arguments of the `h` and `s` helpers.
-- `JcssNode`: The type of arguments of the `jcss` helper.
-- `JcssRoot`: The type of arguments of the `jcss` helper.
+- `c`: A simple CSS-in-JS helper.
 - `chartable`: A helper for creating a chart based on a table (conf. <https://jackens.github.io/nnn/chartable/>).
 - `eq`: A helper that checks equality of the given arguments.
 - `escape`: A generic helper for escaping `values` by given `escapeMap` (in *TemplateStrings* flavor).
@@ -45,7 +54,6 @@ import { «something» } from './node_modules/@jackens/nnn/nnn.js'
 - `h`: A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style helper for creating and modifying `HTMLElement`s (see also `s`).
 - `has`: A replacement for the `in` operator (not to be confused with the `for-in` loop) that works properly.
 - `is`: A helper that checks if the given argument is of a certain type.
-- `jcss`: A simple CSS-in-JS helper.
 - `jsOnParse`: `JSON.parse` with “JavaScript turned on”.
 - `locale`: Language translations helper.
 - `nanolight`: A generic helper for syntax highlighting (see also `nanolightJs`).
@@ -58,6 +66,24 @@ import { «something» } from './node_modules/@jackens/nnn/nnn.js'
 - `s`: A lightweight [HyperScript](https://github.com/hyperhype/hyperscript)-style helper for creating and modifying `SVGElement`s (see also `h`).
 - `uuid1`: A helper that generates a UUID v1 identifier (with a creation timestamp).
 
+### CNode
+
+```ts
+type CNode = {
+    [attributeOrSelector: string]: string | number | CNode | undefined;
+};
+```
+
+The type of arguments of the `c` helper.
+
+### CRoot
+
+```ts
+type CRoot = Partial<Record<PropertyKey, CNode>>;
+```
+
+The type of arguments of the `c` helper.
+
 ### EscapeMap
 
 ```ts
@@ -82,23 +108,217 @@ type HArgs1 = Partial<Record<PropertyKey, any>> | null | undefined | Node | stri
 
 The type of arguments of the `h` and `s` helpers.
 
-### JcssNode
+### c
 
 ```ts
-type JcssNode = {
-    [attributeOrSelector: string]: string | number | JcssNode | undefined;
-};
+const c: (root: CRoot, splitter?: string) => string;
 ```
 
-The type of arguments of the `jcss` helper.
+A simple CSS-in-JS helper.
 
-### JcssRoot
+The `root` parameter provides a hierarchical description of CSS rules.
 
-```ts
-type JcssRoot = Partial<Record<PropertyKey, JcssNode>>;
+- Keys of sub-objects whose values are NOT objects are treated as CSS attribute, and values are treated as values of those CSS attributes; the concatenation of keys of all parent objects is a CSS rule.
+- All keys ignore the part starting with a splitter (default: `$$`) sign until the end of the key (e.g. `src$$1` → `src`, `@font-face$$1` → `@font-face`).
+- In keys specifying CSS attribute, all uppercase letters are replaced by lowercase letters with an additional `-` character preceding them (e.g. `fontFamily` → `font-family`).
+- Commas in keys that makes a CSS rule cause it to “split” and create separate rules for each part (e.g. `{div:{margin:1,'.a,.b,.c':{margin:2}}}` → `div{margin:1}div.a,div.b,div.c{margin:2}`).
+- Top-level keys that begin with `@` are not concatenated with sub-object keys.
+
+#### Usage Examples
+
+```js
+const actual = c({
+  a: {
+    color: 'red',
+    margin: 1,
+    '.c': { margin: 2, padding: 2 },
+    padding: 1
+  }
+})
+
+const expected = `
+a{
+  color:red;
+  margin:1
+}
+a.c{
+  margin:2;
+  padding:2
+}
+a{
+  padding:1
+}`.replace(/\n\s*/g, '')
+
+expect(actual).toStrictEqual(expected)
 ```
 
-The type of arguments of the `jcss` helper.
+```js
+const actual = c({
+  a: {
+    '.b': {
+      color: 'red',
+      margin: 1,
+      '.c': { margin: 2, padding: 2 },
+      padding: 1
+    }
+  }
+})
+
+const expected = `
+a.b{
+  color:red;
+  margin:1
+}
+a.b.c{
+  margin:2;
+  padding:2
+}
+a.b{
+  padding:1
+}`.replace(/\n\s*/g, '')
+
+expect(actual).toStrictEqual(expected)
+```
+
+```js
+const actual = c({
+  '@font-face$$1': {
+    fontFamily: 'Jackens',
+    src$$1: 'url(otf/jackens.otf)',
+    src$$2: "url(otf/jackens.otf) format('opentype')," +
+      "url(svg/jackens.svg) format('svg')",
+    fontWeight: 'normal',
+    fontStyle: 'normal'
+  },
+  '@font-face$$2': {
+    fontFamily: 'C64',
+    src: 'url(fonts/C64_Pro_Mono-STYLE.woff)'
+  },
+  '@keyframes spin': {
+    '0%': { transform: 'rotate(0deg)' },
+    '100%': { transform: 'rotate(360deg)' }
+  },
+  div: {
+    border: 'solid red 1px',
+    '.c1': { 'background-color': '#000' },
+    ' .c1': { backgroundColor: 'black' },
+    '.c2': { backgroundColor: 'rgb(0,0,0)' }
+  },
+  '@media(min-width:200px)': {
+    div: { margin: 0, padding: 0 },
+    span: { color: '#000' }
+  }
+})
+
+const expected = `
+@font-face{
+  font-family:Jackens;
+  src:url(otf/jackens.otf);
+  src:url(otf/jackens.otf) format('opentype'),url(svg/jackens.svg) format('svg');
+  font-weight:normal;
+  font-style:normal
+}
+@font-face{
+  font-family:C64;
+  src:url(fonts/C64_Pro_Mono-STYLE.woff)
+}
+@keyframes spin{
+  0%{
+    transform:rotate(0deg)
+  }
+  100%{
+    transform:rotate(360deg)
+  }
+}
+div{
+  border:solid red 1px
+}
+div.c1{
+  background-color:#000
+}
+div .c1{
+  background-color:black
+}
+div.c2{
+  background-color:rgb(0,0,0)
+}
+@media(min-width:200px){
+  div{
+    margin:0;
+    padding:0
+  }
+  span{
+    color:#000
+  }
+}`.replace(/\n\s*/g, '')
+
+expect(actual).toStrictEqual(expected)
+```
+
+```js
+const actual = c({
+  a: {
+    '.b,.c': {
+      margin: 1,
+      '.d': {
+        margin: 2
+      }
+    }
+  }
+})
+
+const expected = `
+a.b,a.c{
+  margin:1
+}
+a.b.d,a.c.d{
+  margin:2
+}`.replace(/\n\s*/g, '')
+
+expect(actual).toStrictEqual(expected)
+```
+
+```js
+const actual = c({
+  '.b,.c': {
+    margin: 1,
+    '.d': {
+      margin: 2
+    }
+  }
+})
+
+const expected = `
+.b,.c{
+  margin:1
+}
+.b.d,.c.d{
+  margin:2
+}`.replace(/\n\s*/g, '')
+
+expect(actual).toStrictEqual(expected)
+```
+
+```js
+const actual = c({
+  '.a,.b': {
+    margin: 1,
+    '.c,.d': {
+      margin: 2
+    }
+  }
+})
+
+const expected = `
+.a,.b{
+  margin:1
+}
+.a.c,.a.d,.b.c,.b.d{
+  margin:2
+}`.replace(/\n\s*/g, '')
+
+expect(actual).toStrictEqual(expected)
+```
 
 ### chartable
 
@@ -432,216 +652,17 @@ expect(is(Object, fakeFooBar)).toBeTrue()
 expect(iz(Object, fakeFooBar)).toBeFalse()
 ```
 
-### jcss
-
-```ts
-const jcss: (root: JcssRoot, splitter?: string) => string;
-```
-
-A simple CSS-in-JS helper.
-
-The `root` parameter provides a hierarchical description of CSS rules.
-
-- Keys of sub-objects whose values are NOT objects are treated as CSS attribute, and values are treated as values of those CSS attributes; the concatenation of keys of all parent objects is a CSS rule.
-- All keys ignore the part starting with a splitter (default: `$$`) sign until the end of the key (e.g. `src$$1` → `src`, `@font-face$$1` → `@font-face`).
-- In keys specifying CSS attribute, all uppercase letters are replaced by lowercase letters with an additional `-` character preceding them (e.g. `fontFamily` → `font-family`).
-- Commas in keys that makes a CSS rule cause it to “split” and create separate rules for each part (e.g. `{div:{margin:1,'.a,.b,.c':{margin:2}}}` → `div{margin:1}div.a,div.b,div.c{margin:2}`).
-- Top-level keys that begin with `@` are not concatenated with sub-object keys.
-
-#### Usage Examples
-
-```js
-const actual = jcss({
-  a: {
-    color: 'red',
-    margin: 1,
-    '.c': { margin: 2, padding: 2 },
-    padding: 1
-  }
-})
-
-const expected = `
-a{
-  color:red;
-  margin:1
-}
-a.c{
-  margin:2;
-  padding:2
-}
-a{
-  padding:1
-}`.replace(/\n\s*/g, '')
-
-expect(actual).toStrictEqual(expected)
-```
-
-```js
-const actual = jcss({
-  a: {
-    '.b': {
-      color: 'red',
-      margin: 1,
-      '.c': { margin: 2, padding: 2 },
-      padding: 1
-    }
-  }
-})
-
-const expected = `
-a.b{
-  color:red;
-  margin:1
-}
-a.b.c{
-  margin:2;
-  padding:2
-}
-a.b{
-  padding:1
-}`.replace(/\n\s*/g, '')
-
-expect(actual).toStrictEqual(expected)
-```
-
-```js
-const actual = jcss({
-  '@font-face$$1': {
-    fontFamily: 'Jackens',
-    src$$1: 'url(otf/jackens.otf)',
-    src$$2: "url(otf/jackens.otf) format('opentype')," +
-      "url(svg/jackens.svg) format('svg')",
-    fontWeight: 'normal',
-    fontStyle: 'normal'
-  },
-  '@font-face$$2': {
-    fontFamily: 'C64',
-    src: 'url(fonts/C64_Pro_Mono-STYLE.woff)'
-  },
-  '@keyframes spin': {
-    '0%': { transform: 'rotate(0deg)' },
-    '100%': { transform: 'rotate(360deg)' }
-  },
-  div: {
-    border: 'solid red 1px',
-    '.c1': { 'background-color': '#000' },
-    ' .c1': { backgroundColor: 'black' },
-    '.c2': { backgroundColor: 'rgb(0,0,0)' }
-  },
-  '@media(min-width:200px)': {
-    div: { margin: 0, padding: 0 },
-    span: { color: '#000' }
-  }
-})
-
-const expected = `
-@font-face{
-  font-family:Jackens;
-  src:url(otf/jackens.otf);
-  src:url(otf/jackens.otf) format('opentype'),url(svg/jackens.svg) format('svg');
-  font-weight:normal;
-  font-style:normal
-}
-@font-face{
-  font-family:C64;
-  src:url(fonts/C64_Pro_Mono-STYLE.woff)
-}
-@keyframes spin{
-  0%{
-    transform:rotate(0deg)
-  }
-  100%{
-    transform:rotate(360deg)
-  }
-}
-div{
-  border:solid red 1px
-}
-div.c1{
-  background-color:#000
-}
-div .c1{
-  background-color:black
-}
-div.c2{
-  background-color:rgb(0,0,0)
-}
-@media(min-width:200px){
-  div{
-    margin:0;
-    padding:0
-  }
-  span{
-    color:#000
-  }
-}`.replace(/\n\s*/g, '')
-
-expect(actual).toStrictEqual(expected)
-```
-
-```js
-const actual = jcss({
-  a: {
-    '.b,.c': {
-      margin: 1,
-      '.d': {
-        margin: 2
-      }
-    }
-  }
-})
-
-const expected = `
-a.b,a.c{
-  margin:1
-}
-a.b.d,a.c.d{
-  margin:2
-}`.replace(/\n\s*/g, '')
-
-expect(actual).toStrictEqual(expected)
-```
-
 ```js
-const actual = jcss({
-  '.b,.c': {
-    margin: 1,
-    '.d': {
-      margin: 2
-    }
-  }
-})
+const num = 42
+const str = '42'
 
-const expected = `
-.b,.c{
-  margin:1
-}
-.b.d,.c.d{
-  margin:2
-}`.replace(/\n\s*/g, '')
-
-expect(actual).toStrictEqual(expected)
-```
+expect(is(Number, num)).toBeTrue()
 
-```js
-const actual = jcss({
-  '.a,.b': {
-    margin: 1,
-    '.c,.d': {
-      margin: 2
-    }
-  }
-})
-
-const expected = `
-.a,.b{
-  margin:1
-}
-.a.c,.a.d,.b.c,.b.d{
-  margin:2
-}`.replace(/\n\s*/g, '')
+try {
+  num.constructor = str.constructor
+} catch { /* empty */ }
 
-expect(actual).toStrictEqual(expected)
+expect(is(Number, num)).toBeTrue()
 ```
 
 ### jsOnParse