tosijs-ui 1.16.17 → 1.16.18

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 1.16.18
+
+- **A `defineIcons` name for a stacked composition draws the stack.** `defineIcons({
+  cloudSync: 'spin120Loader40s_30x$cloud' })` made `icons.cloudSync()` draw the placeholder
+  square and log "icon cloudSync does not exist", although the same string used directly as
+  an icon name worked. The icons page documents exactly this pattern for building an app's
+  icon vocabulary, so every such name was silently a square, in every version since
+  composites shipped. A redirect's target now goes through the whole icon pipeline, stacking
+  included. closes #224, reported by tosijs-virta.
+- **A named composite answers to its name.** Its `data-icon` is the name you defined
+  (`cloudSync`), not the composition it stands for, and suffixes and rules apply to it as
+  to any icon (`cloudSync50o`, `spin90CloudSync`).
+- **A redirect cycle says so.** `a: 'b'` with `b: 'a'` now logs "icon a redirects in a
+  cycle" and draws the placeholder, instead of claiming the icon does not exist; a
+  composite that names itself (`a: 'a$check'`) draws the placeholder in place of the
+  cycling layer. A long redirect chain that ends in a drawing is no longer cut off at ten
+  hops.
+- The named-composition example on the icons page is now a live example with a test, so
+  the documented pattern is checked on every build.
+
 ## 1.16.17
 
 - **The pinned tjs-lang is 0.14.0-rc.5; it was 0.13.13.** That is the devDependency this

package/dist/icons.js

@@ -485,16 +485,36 @@ Now `removeUser`, `removeFile`, `removeProject` all just work — and
 they're consistent. If you redesign the trash icon or change
 `--action-color`, every "remove" icon updates automatically.
 
-You can also use `defineIcons` for one-off named compositions:
+You can also use `defineIcons` for one-off named compositions. Then just
+use `icons.cloudSync()` or `<tosi-icon icon="cloudSync">`: the composition
+is invisible to consumers of the icon.
 
-    defineIcons({
-      cloudSync: 'spin120Loader40s_30x$cloud',
-      secureShield: 'lock50s75o_10y$shield',
-      newFile: 'plus75o60s25x25y$file',
-    })
+```js
+import { defineIcons, icons } from 'tosijs-ui'
 
-Then just use `icons.cloudSync()` or `<tosi-icon icon="cloudSync">` —
-the composition is invisible to consumers of the icon.
+defineIcons({
+  cloudSync: 'spin120Loader40s_30x$cloud',
+  secureShield: 'lock50s75o_10y$shield',
+  newFile: 'plus75o60s25x25y$file',
+})
+
+preview.style.setProperty('--tosi-icon-size', '48px')
+preview.append(icons.cloudSync(), icons.secureShield(), icons.newFile())
+```
+```test
+test('named compositions draw their composites, not the placeholder', () => {
+  // A spin layer is a composite of its own, so count only the outer ones.
+  const composites = preview.querySelectorAll(':scope > .tosi-icon-composite')
+  expect([...composites].map((icon) => icon.dataset.icon)).toEqual([
+    'cloudSync',
+    'secureShield',
+    'newFile',
+  ])
+  for (const composite of composites) {
+    expect(composite.querySelectorAll('svg').length).toBeGreaterThan(1)
+  }
+})
+```
 
 ### Composites and `svg2DataUrl`
 
@@ -767,7 +787,8 @@ function composeIcon(prop, parts) {
     }
     return null;
 }
-const MAX_REDIRECTS = 10;
+// Redirect names being resolved right now, so a redirect cycle ends instead of recursing.
+const expanding = new Set();
 // Style suffixes — value then letter code:
 //   50o (opacity), 75s (scale), 20x (translateX%), _10y (translateY%)
 //   90r (rotate 90°), _45r (rotate -45°), 0f (flipH), 1f (flipV)
@@ -857,24 +878,41 @@ export function resolveIcon(prop, parts) {
     const data = iconData;
     // Direct match or redirect chain
     let name = prop;
-    for (let i = 0; i < MAX_REDIRECTS; i++) {
-        const spec = data[name];
-        if (!spec)
-            break;
+    const seen = new Set();
+    for (let spec = data[name]; spec; spec = data[name]) {
         if (spec.startsWith('<'))
             return makeIcon(spec, parts);
+        seen.add(name);
         name = spec;
+        if (seen.has(name)) {
+            console.warn(`icon ${prop} redirects in a cycle`);
+            return makeIcon(iconData.square, parts);
+        }
     }
     if (name !== prop) {
-        const composed = composeIcon(name, parts);
-        if (composed)
-            return composed;
-        const parsed = parseStyleSuffixes(name);
-        if (parsed) {
-            const icon = resolveIcon(parsed.baseName, parts);
-            Object.assign(icon.style, parsed.style);
-            return icon;
+        /*
+        A redirect's target goes through the WHOLE pipeline, stacking included. Handling rules
+        and suffixes here and leaving `$` to the checks below tested `prop`, which has no `$`, so
+        every named composite drew the placeholder (#224). `expanding` stops a redirect that
+        names itself (`a: 'a$b'`) from recursing forever.
+        */
+        if (!expanding.has(prop)) {
+            expanding.add(prop);
+            try {
+                const icon = resolveIcon(name, parts);
+                // A named composite answers to its name, not to the composition it stands for.
+                if (icon.classList.contains('tosi-icon-composite')) {
+                    ;
+                    icon.dataset.icon = prop;
+                }
+                return icon;
+            }
+            finally {
+                expanding.delete(prop);
+            }
         }
+        console.warn(`icon ${prop} redirects in a cycle`);
+        return makeIcon(iconData.square, parts);
     }
     // Stack: foo$bar$baz → baz on bottom, bar on top, foo on top
     if (prop.includes('$')) {