@keyline-icons/cli 0.1.4 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyline-icons/cli",
-  "version": "0.1.4",
+  "version": "0.3.0",
   "description": "Search Keyline Icons and copy them into your project from the terminal.",
   "license": "MIT",
   "publishConfig": {

package/src/index.mjs

@@ -22,9 +22,11 @@ import { existsSync } from "node:fs"
 const data = JSON.parse(
   await readFile(new URL("../icons.json", import.meta.url), "utf8")
 )
-const { icons, styles, keywords = {} } = data
+// `corners` defaults for a bundle generated before the axis existed, so an
+// older icons.json still runs rather than reading `undefined.includes`.
+const { icons, styles, corners = ["regular"], keywords = {} } = data
 const NAMES = Object.keys(icons)
-const VERSION = "0.1.4"
+const VERSION = "0.3.0"
 
 /** Colour only when a human is looking. Piped output stays clean. */
 const tty = process.stdout.isTTY
@@ -49,7 +51,7 @@ function die(msg) {
  * positional, which is what lets `add a b c --style fill` work in any order.
  */
 function parseArgs(argv) {
-  const alias = { s: "style", o: "out", l: "limit", h: "help", v: "version" }
+  const alias = { s: "style", c: "corners", o: "out", l: "limit", h: "help", v: "version" }
   const flags = {}
   const positional = []
   for (let i = 0; i < argv.length; i++) {
@@ -89,10 +91,25 @@ const styleOf = (flags) => {
   return s
 }
 
+const cornersOf = (flags) => {
+  const k = flags.corners ?? "regular"
+  if (!corners.includes(k))
+    die(`unknown corner treatment \`${k}\`. One of: ${corners.join(", ")}`)
+  return k
+}
+
 /* ------------------------------------------------------------------ icons */
 
-function svgFor(name, style) {
-  const art = icons[name]?.[style]
+/**
+ * A drawing in one style and one treatment.
+ *
+ * The rounded half sits at `icons[name][style]` where it has always sat, and
+ * the sharp half one level down under `sharp`, so a project pinned to an older
+ * bundle reads the same shape it read before.
+ */
+function svgFor(name, style, corners = "regular") {
+  const art =
+    corners === "sharp" ? icons[name]?.sharp?.[style] : icons[name]?.[style]
   if (!art) return null
   const attrs = Object.entries(art.root)
     .map(([k, v]) => ` ${k}="${v}"`)
@@ -142,32 +159,71 @@ function keywordsFor(name) {
 
 const haystackFor = (name) => `${name} ${keywordsFor(name).join(" ")}`
 
-function search(query, style, limit) {
+/**
+ * What another set calls a drawing here: `message-square` for `message`,
+ * `arrow-big-up` for `arrow-up`, `loader-2` for `loader`.
+ *
+ * Matched against the whole query and never split into words, which is the
+ * entire reason it is a map of its own rather than more keywords. Folded into
+ * the vocabulary instead, `message-square` puts "square" in the message icon's
+ * words, and a search for `square` answers with every message in the set —
+ * measured on the site's own grid, where the first row of a `square` search
+ * came back holding no squares at all.
+ */
+const foreign = data.names ?? {}
+
+/**
+ * Whether `hay` carries `needle` as a whole word, hyphen or space delimited.
+ *
+ * The rule here used to be a plain substring, and a substring lands inside
+ * words that have nothing to do with the query: `box` matched `inbox`, `ad`
+ * matched `upload`, `car` matched `caret-up`, `monitor` matched `activity`
+ * through its words. Run another set's 1775 names through this and 140 came back
+ * holding an icon that shares no word with what was asked for. That reads as a
+ * hit, which is worse than an empty result twice over: it hides the gap from
+ * anyone counting, and it hands the caller a drawing they did not ask for.
+ *
+ * The site keeps the looser rule on purpose. It answers every keystroke, and
+ * someone typing `arro` has not finished the word yet. Nothing types here. An
+ * agent sends a whole name, and the honest answer to a name this set does not
+ * have is nothing at all.
+ */
+const wholeWord = (hay, needle) => {
+  for (let i = hay.indexOf(needle); i !== -1; i = hay.indexOf(needle, i + 1)) {
+    const before = hay[i - 1] ?? "-"
+    const after = hay[i + needle.length] ?? "-"
+    if ((before === "-" || before === " ") && (after === "-" || after === " "))
+      return true
+  }
+  return false
+}
+
+function search(query, style, limit, corners = "regular") {
   const q = query.toLowerCase().trim()
   const words = wordsOf(query)
   if (!words.length) return []
 
   return NAMES.filter(
     (n) =>
-      (!style || icons[n][style]) &&
-      (n.includes(q) ||
-        words.every((w) => n.includes(w)) ||
-        words.every((w) => haystackFor(n).includes(w)))
+      (!style || svgFor(n, style, corners)) &&
+      (foreign[q] === n ||
+        wholeWord(n, q) ||
+        words.every((w) => wholeWord(n, w)) ||
+        words.every((w) => wholeWord(haystackFor(n), w)))
   )
     .map((n) => {
-      const i = n.indexOf(q)
       const rank =
-        i === -1
-          ? words.every((w) => n.includes(w))
-            ? 4
-            : 5
-          : n === q
-            ? 0
-            : n.startsWith(q)
-              ? 1
-              : /(^|-)/.test(n[i - 1] ?? "-")
-                ? 2
-                : 3
+        n === q
+          ? 0
+          : foreign[q] === n
+            ? 1
+            : n.startsWith(q + "-")
+              ? 2
+              : wholeWord(n, q)
+                ? 3
+                : words.every((w) => wholeWord(n, w))
+                  ? 4
+                  : 5
       return { n, rank }
     })
     .sort(
@@ -216,17 +272,20 @@ function nearest(name) {
     .map((h) => h.n)
 }
 
-function resolveOrDie(name, style) {
+function resolveOrDie(name, style, corners = "regular") {
   if (!icons[name]) {
     const near = nearest(name)
     die(
       `no icon named \`${name}\`.${near.length ? ` Did you mean: ${near.join(", ")}?` : ""}`
     )
   }
-  const svg = svgFor(name, style)
+  const svg = svgFor(name, style, corners)
   if (!svg) {
+    // `Object.keys` would list `sharp` here as though it were a fourth style,
+    // which is the axis leaking into a sentence about coverage.
+    const has = styles.filter((s) => svgFor(name, s, corners))
     die(
-      `\`${name}\` has no ${style} style. It has: ${Object.keys(icons[name]).join(", ")}.\n` +
+      `\`${name}\` has no ${style} style. It has: ${has.join(", ")}.\n` +
         `      Duotone and fill need a fillable region, and this glyph has none.`
     )
   }
@@ -249,13 +308,14 @@ ${bold("COMMANDS")}
 
 ${bold("OPTIONS")}
   -s, --style <s>    ${styles.join(" | ")}   (default: stroke)
+  -c, --corners <c>  ${corners.join(" | ")}          (default: regular)
   -o, --out <dir>    Where \`add\` writes         (default: ./icons)
   -l, --limit <n>    Max results for \`search\`   (default: 25)
 
 ${bold("EXAMPLES")}
   keyline-icons search arrow
   keyline-icons search mail --style fill
-  keyline-icons show check > check.svg
+  keyline-icons show check --corners sharp > check-sharp.svg
   keyline-icons add circle-arrow-down bell --out src/icons
   keyline-icons list | grep chart
 
@@ -270,7 +330,8 @@ const commands = {
 
   list({ flags }) {
     const style = flags.style ? styleOf(flags) : null
-    const names = style ? NAMES.filter((n) => icons[n][style]) : NAMES
+    const treatment = cornersOf(flags)
+    const names = style ? NAMES.filter((n) => svgFor(n, style, treatment)) : NAMES
     for (const n of names) out(n)
     note(dim(`\n${names.length} icons${style ? ` in ${style}` : ""}`))
   },
@@ -290,7 +351,7 @@ const commands = {
        is not a number at all earns the default. */
     const raw = parseInt(flags.limit ?? "25", 10)
     const limit = Math.min(Math.max(Number.isNaN(raw) ? 25 : raw, 1), 200)
-    const hits = search(query, style, limit)
+    const hits = search(query, style, limit, cornersOf(flags))
     if (!hits.length) {
       const near = nearest(query)
       die(
@@ -298,7 +359,7 @@ const commands = {
       )
     }
     for (const n of hits) {
-      const has = styles.filter((s) => icons[n][s])
+      const has = styles.filter((s) => svgFor(n, s, cornersOf(flags)))
       out(`${n}${tty ? "  " + dim(`[${has.join(", ")}]`) : ""}`)
     }
     note(dim(`\n${hits.length} shown${style ? ` in ${style}` : ""}`))
@@ -307,17 +368,27 @@ const commands = {
   show({ flags, positional }) {
     const [name] = positional
     if (!name) die("show needs an icon name. Try: keyline-icons show check")
-    process.stdout.write(resolveOrDie(name, styleOf(flags)))
+    process.stdout.write(resolveOrDie(name, styleOf(flags), cornersOf(flags)))
   },
 
   async add({ flags, positional }) {
     if (!positional.length) die("add needs at least one icon name.")
     const style = styleOf(flags)
+    const treatment = cornersOf(flags)
     const dir = resolve(flags.out === true || !flags.out ? "icons" : flags.out)
 
+    // The treatment rides in the filename, for the reason the style does not:
+    // two treatments of one drawing are the same name and the same style, so
+    // adding both would otherwise write one file twice and leave whichever ran
+    // last. Rounded keeps the bare name, which is what everyone means by it.
+    const suffix = treatment === "regular" ? "" : `-${treatment}`
+
     // Every name is resolved before anything is written, so a typo in the
     // third of five does not leave two files on disk and an error.
-    const files = positional.map((name) => [name, resolveOrDie(name, style)])
+    const files = positional.map((name) => [
+      `${name}${suffix}`,
+      resolveOrDie(name, style, treatment),
+    ])
 
     await mkdir(dir, { recursive: true })
     for (const [name, svg] of files) {
@@ -330,7 +401,8 @@ const commands = {
     }
     note(
       dim(
-        `\n${files.length} ${style} icon${files.length === 1 ? "" : "s"} to ${dir}`
+        `\n${files.length} ${treatment === "sharp" ? "sharp " : ""}${style} ` +
+          `icon${files.length === 1 ? "" : "s"} to ${dir}`
       )
     )
   },