@munsonlabs/sigil 0.0.1

package/README.md

@@ -0,0 +1,38 @@
+# @munsonlabs/sigil
+
+A framework-free icon registry with a `<ml-sigil>` custom element. Describe where icons come from once - an SVG set on a CDN, an icon font, a JSON map, your own source - then render them anywhere by name and swap them at runtime, even from a script the app didn't bundle. No dependencies; `vue` is optional, for the `/vue` entry.
+
+## Installation
+
+```bash
+npm install @munsonlabs/sigil
+```
+
+## Usage
+
+```ts
+import { register, override } from '@munsonlabs/sigil'
+import '@munsonlabs/sigil/element'
+
+register(
+  'lucide',
+  {
+    resolver: (name) => `https://cdn.jsdelivr.net/npm/lucide-static/icons/${name}.svg`,
+  },
+  { default: true },
+)
+
+override('logo', '<svg viewBox="0 0 24 24">…</svg>')
+```
+
+```html
+<ml-sigil name="rocket"></ml-sigil>
+<!-- the pinned override -->
+<ml-sigil name="logo"></ml-sigil>
+```
+
+The registry is one shared instance per page, so a separately loaded script can register or replace icons and every mounted `<ml-sigil>` (or Vue `<Sigil>`) follows.
+
+## Docs
+
+Every kind of source, resolution order, variants, the element and Vue component, other frameworks, third-party scripts and the full API: **https://munsonlabs.github.io/packages/sigil/getting-started/introduction**

package/dist/chunks/cached-KC2ort2O.mjs

@@ -0,0 +1 @@
+function e({name:e,variant:t}){return JSON.stringify([e,t??null])}function t(t){let n=new Map,r=new Map;return{resolveSync(r){return n.get(e(r))??t.resolveSync?.(r)},async resolve(i){let a=e(i),o=n.get(a)??t.resolveSync?.(i);if(o)return o;if(!t.resolve)return;let s=r.get(a);return s||(s=t.resolve(i).then(e=>(e&&n.set(a,e),e)).finally(()=>{r.delete(a)}),r.set(a,s)),s},dispose(){n.clear(),r.clear(),t.dispose?.()}}}export{t};

package/dist/chunks/font-KFHs3p_4.mjs

@@ -0,0 +1 @@
+const e=/^[0-9a-f]{4,6}$/i;function t(t){return e.test(t)?String.fromCodePoint(parseInt(t,16)):t}function n(e,t,n){return typeof e==`function`?e(t,n):e[t]}function r({className:e,mapping:r,glyphs:i}){return{resolveSync({name:a,variant:o}){let s;if(r!==void 0){if(s=n(r,a,o),s===void 0)return}else i===void 0&&(s=a);let c;if(i!==void 0){let e=n(i,a,o);if(e===void 0)return;c=t(e)}return{tag:`i`,className:s===void 0?e:`${e} ${s}`,text:c}}}}export{r as fontLibrary};

package/dist/chunks/registry-DhOqpL9m.d.mts

@@ -0,0 +1,45 @@
+//#region src/types/font.d.ts
+interface FontLibraryOptions {
+  className: string;
+  mapping?: Record<string, string> | ((name: string, variant?: string) => string | undefined);
+  glyphs?: Record<string, string> | ((name: string, variant?: string) => string | undefined);
+}
+//#endregion
+//#region src/types/svg.d.ts
+type ResolvedSvg = string | {
+  default: string;
+};
+type SvgMap = Record<string, string | Record<string, string>>;
+interface SvgLibraryOptions {
+  resolver?: (name: string, variant?: string) => ResolvedSvg | Promise<ResolvedSvg>;
+  icons?: SvgMap | Promise<SvgMap>;
+  mutator?: (svg: SVGSVGElement) => void;
+}
+//#endregion
+//#region src/types/registry.d.ts
+interface IconQuery {
+  library?: string;
+  variant?: string;
+}
+interface IconRequest {
+  name: string;
+  variant?: string;
+}
+interface ResolvedIcon {
+  tag: string;
+  className?: string;
+  html?: string;
+  text?: string;
+}
+interface IconSource {
+  resolveSync?(request: IconRequest): ResolvedIcon | undefined;
+  resolve?(request: IconRequest): Promise<ResolvedIcon | undefined>;
+  dispose?(): void;
+}
+interface OverrideRequest extends IconRequest {
+  library?: string;
+}
+type IconOverride = string | ((request: OverrideRequest) => string);
+type LibraryConfig = IconSource | SvgLibraryOptions | FontLibraryOptions;
+//#endregion
+export { LibraryConfig as a, ResolvedSvg as c, FontLibraryOptions as d, IconSource as i, SvgLibraryOptions as l, IconQuery as n, OverrideRequest as o, IconRequest as r, ResolvedIcon as s, IconOverride as t, SvgMap as u };

package/dist/chunks/svg-C5y9tsRK.mjs

@@ -0,0 +1 @@
+import{t as e}from"./cached-KC2ort2O.mjs";const t=/^(?:https?:\/\/|\/|\.\/)/,n=/^\s*(?:<\?xml[^>]*>\s*)?(?:<!--[\s\S]*?-->\s*)*<svg[\s>]/i;async function r(e){let n=typeof e==`object`&&e&&`default`in e?e.default:e;if(typeof n!=`string`)throw TypeError(`SVG resolver must return markup, a URL, or a module with a default string export`);if(!t.test(n))return n;let r=await fetch(n);if(!r.ok)throw Error(`Failed to fetch icon (${r.status}): ${n}`);return r.text()}function i(e,t){let n=new DOMParser().parseFromString(e,`image/svg+xml`).documentElement;if(n.nodeName!==`svg`)throw Error(`Icon "${t}" did not resolve to an <svg> document`);return n}function a(e){return async(t,n=`default`)=>{let r=(await e)[t];if(r===void 0)throw Error(`Icon "${t}" is not in this library`);if(typeof r==`string`)return r;let i=r[n]??r.default;if(i===void 0)throw Error(`Icon "${t}" has no "${n}" variant`);return i}}function o(e){return{tag:`span`,className:`icon-svg`,html:e}}function s(t){let s=t.resolver??(t.icons?a(t.icons):void 0);if(!s)throw Error(`svgLibrary needs a resolver or an icons map`);let{mutator:c}=t;return typeof DOMParser>`u`?{async resolve({name:e,variant:t}){let i=await r(await s(e,t));if(!n.test(i))throw Error(`Icon "${e}" did not resolve to an <svg> document`);return o(i)}}:e({async resolve({name:e,variant:t}){let n=await r(await s(e,t)),a=i(n,e);return c?(c(a),o(new XMLSerializer().serializeToString(a))):o(n)}})}export{s as svgLibrary};

package/dist/chunks/watch-CLr9iYPg.mjs

@@ -0,0 +1 @@
+function e(e,t){if(t.library!==void 0)return t.library;if(e.defaultLibrary!==null)return e.defaultLibrary;if(e.libraries.size===1)return e.libraries.keys().next().value}function t(e,t,n){return{tag:`span`,className:`icon-svg`,html:typeof e==`function`?e({...t,library:n}):e}}function n(n,r,i){let a={name:r,variant:i.variant},o=e(n,i),s=n.overrides.get(r);return{request:a,source:o===void 0?void 0:n.libraries.get(o),override:s===void 0?void 0:t(s,a,o)}}function r({request:e,source:t,override:n}){return n||t?.resolveSync?.(e)}function i(e,t){return e?.resolveSync?.(t)||e?.resolve?.(t)}function a(e,t){let n,r=!1,a=e.then(e=>{if(r){e.dispose?.();return}n=e,t(e)});return[{resolveSync(e){return n?.resolveSync?.(e)},async resolve(e){return await a,i(n,e)},dispose(){r=!0,n?.dispose?.()}},a]}function o(e){return`resolveSync`in e||`resolve`in e}async function s(e,t){if(`resolver`in t||`icons`in t){let{svgLibrary:e}=await import(`./svg-C5y9tsRK.mjs`);return e(t)}if(`className`in t){let{fontLibrary:e}=await import(`./font-KFHs3p_4.mjs`);return e(t)}throw Error(`Unrecognised library config for "${e}"`)}function c(){return{overrides:new Map,libraries:new Map,listeners:new Set,defaultLibrary:null}}function l({listeners:e}){for(let t of e)t()}function u(){let e=c();function t(){l(e)}return{version:`0.0.1`,get defaultLibrary(){return e.defaultLibrary},get libraries(){return[...e.libraries.keys()]},register(n,r,i={}){if(e.libraries.get(n)?.dispose?.(),i.default&&(e.defaultLibrary=n),o(r))return e.libraries.set(n,r),t(),Promise.resolve();let[c,l]=a(s(n,r),r=>{e.libraries.get(n)===c&&(e.libraries.set(n,r),t())});return e.libraries.set(n,c),t(),l.catch(r=>{throw e.defaultLibrary===n&&(e.defaultLibrary=null,t()),r})},unregister(n){e.libraries.get(n)?.dispose?.(),e.libraries.delete(n),e.defaultLibrary===n&&(e.defaultLibrary=null),t()},use(n){e.defaultLibrary=n,t()},override(n,r){let i=typeof n==`string`?[[n,r??null]]:Object.entries(n);for(let[t,n]of i)n===null?e.overrides.delete(t):e.overrides.set(t,n);t()},getIconSync(t,i={}){return r(n(e,t,i))},async getIcon(t,r={}){let{request:a,source:o,override:s}=n(e,t,r);if(s)return s;try{return await i(o,a)}catch(e){import.meta.env?.DEV&&console.warn(`[sigil] "${t}" failed to resolve`,e);return}},subscribe(t){return e.listeners.add(t),()=>{e.listeners.delete(t)}},clear(){for(let t of e.libraries.values())t.dispose?.();e.overrides.clear(),e.libraries.clear(),e.defaultLibrary=null,t()}}}const d=Symbol.for(`@munsonlabs/sigil`),f=globalThis,p=f[d]??=u(),{register:m,unregister:h,override:g,use:_,getIcon:v,getIconSync:y,subscribe:b,clear:x}=p;function S(e,t,n,r=p){let i=0;function a(){let a=++i,o=r.getIconSync(e,t);if(o){n(o);return}r.getIcon(e,t).then(e=>{a===i&&n(e)})}let o=r.subscribe(a);return a(),()=>{i++,o()}}export{y as a,p as c,_ as d,v as i,b as l,x as n,g as o,u as r,m as s,S as t,h as u};

package/dist/element.d.mts

@@ -0,0 +1,21 @@
+import { s as ResolvedIcon } from "./chunks/registry-DhOqpL9m.mjs";
+//#region src/element/SigilElement.d.ts
+declare const Base: typeof HTMLElement;
+export declare class SigilElement extends Base {
+  #private;
+  static readonly observedAttributes: readonly ["name", "library", "variant"];
+  get name(): string;
+  set name(value: string);
+  get library(): string | undefined;
+  set library(value: string | undefined);
+  get variant(): string | undefined;
+  set variant(value: string | undefined);
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  attributeChangedCallback(): void;
+}
+export declare function defineElements(tag?: string): void;
+//#endregion
+//#region src/element/render.d.ts
+export declare function createIconNode({ tag, className, html, text }: ResolvedIcon, doc?: Document): HTMLElement;
+//#endregion

package/dist/element.mjs

@@ -0,0 +1 @@
+import{t as e}from"./chunks/watch-CLr9iYPg.mjs";function t({tag:e,className:t,html:n,text:r},i=document){let a=i.createElement(e);return a.setAttribute(`aria-hidden`,`true`),t&&(a.className=t),n===void 0?r!==void 0&&(a.textContent=r):a.innerHTML=n,a}const n=[`name`,`library`,`variant`],r=typeof HTMLElement>`u`?class{}:HTMLElement;var i=class extends r{static observedAttributes=n;#e;get name(){return this.getAttribute(`name`)??``}set name(e){this.#t(`name`,e)}get library(){return this.getAttribute(`library`)??void 0}set library(e){this.#t(`library`,e)}get variant(){return this.getAttribute(`variant`)??void 0}set variant(e){this.#t(`variant`,e)}connectedCallback(){this.#n()}disconnectedCallback(){this.#e?.(),this.#e=void 0}attributeChangedCallback(){this.isConnected&&this.#n()}#t(e,t){t==null?this.removeAttribute(e):this.setAttribute(e,t)}#n(){this.#e?.(),this.#e=void 0;let n=this.name;if(!n){this.replaceChildren();return}this.#e=e(n,{library:this.library,variant:this.variant},e=>{e?this.replaceChildren(t(e,this.ownerDocument)):this.replaceChildren()})}};function a(e=`ml-sigil`){typeof customElements>`u`||customElements.get(e)||customElements.define(e,i)}typeof import.meta.url==`string`&&new URL(import.meta.url).searchParams.has(`defer`)||a();export{i as SigilElement,t as createIconNode,a as defineElements};

package/dist/index.d.mts

@@ -0,0 +1,34 @@
+import { a as LibraryConfig, c as ResolvedSvg, d as FontLibraryOptions, i as IconSource, l as SvgLibraryOptions, n as IconQuery, o as OverrideRequest, r as IconRequest, s as ResolvedIcon, t as IconOverride, u as SvgMap } from "./chunks/registry-DhOqpL9m.mjs";
+//#region src/registry/index.d.ts
+interface Sigil {
+  readonly version: string;
+  readonly defaultLibrary: string | null;
+  readonly libraries: string[];
+  register(name: string, config: LibraryConfig, options?: {
+    default?: boolean;
+  }): Promise<void>;
+  unregister(name: string): void;
+  use(name: string | null): void;
+  override(name: string, icon: IconOverride | null): void;
+  override(icons: Record<string, IconOverride | null>): void;
+  getIconSync(name: string, query?: IconQuery): ResolvedIcon | undefined;
+  getIcon(name: string, query?: IconQuery): Promise<ResolvedIcon | undefined>;
+  subscribe(listener: () => void): () => void;
+  clear(): void;
+}
+export declare function createSigil(): Sigil;
+export declare const sigil: Sigil;
+export declare const register: (name: string, config: LibraryConfig, options?: {
+  default?: boolean;
+}) => Promise<void>, unregister: (name: string) => void, override: {
+  (name: string, icon: IconOverride | null): void;
+  (icons: Record<string, IconOverride | null>): void;
+}, use: (name: string | null) => void, getIcon: (name: string, query?: IconQuery) => Promise<ResolvedIcon | undefined>, getIconSync: (name: string, query?: IconQuery) => ResolvedIcon | undefined, subscribe: (listener: () => void) => () => void, clear: () => void;
+//#endregion
+//#region src/watch.d.ts
+export declare function watchIcon(name: string, query: IconQuery, onIcon: (icon: ResolvedIcon | undefined) => void, registry?: Sigil): () => void;
+//#endregion
+//#region src/sources/cached.d.ts
+export declare function cached(source: IconSource): IconSource;
+//#endregion
+export type { FontLibraryOptions, IconOverride, IconQuery, IconRequest, IconSource, LibraryConfig, OverrideRequest, ResolvedIcon, ResolvedSvg, Sigil, SvgLibraryOptions, SvgMap };

package/dist/index.mjs

@@ -0,0 +1 @@
+import{a as e,c as t,d as n,i as r,l as i,n as a,o,r as s,s as c,t as l,u}from"./chunks/watch-CLr9iYPg.mjs";import{t as d}from"./chunks/cached-KC2ort2O.mjs";export{d as cached,a as clear,s as createSigil,r as getIcon,e as getIconSync,o as override,c as register,t as sigil,i as subscribe,u as unregister,n as use,l as watchIcon};

package/dist/vue.d.mts

@@ -0,0 +1,34 @@
+//#region src/vue.d.ts
+export declare const Sigil: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  name: {
+    type: StringConstructor;
+    required: true;
+  };
+  library: {
+    type: StringConstructor;
+    default: undefined;
+  };
+  variant: {
+    type: StringConstructor;
+    default: undefined;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  name: {
+    type: StringConstructor;
+    required: true;
+  };
+  library: {
+    type: StringConstructor;
+    default: undefined;
+  };
+  variant: {
+    type: StringConstructor;
+    default: undefined;
+  };
+}>> & Readonly<{}>, {
+  library: string;
+  variant: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion

package/dist/vue.mjs

@@ -0,0 +1 @@
+import{t as e}from"./chunks/watch-CLr9iYPg.mjs";import{defineComponent as t,h as n,shallowRef as r,watch as i}from"vue";const a=t({name:`Sigil`,inheritAttrs:!1,props:{name:{type:String,required:!0},library:{type:String,default:void 0},variant:{type:String,default:void 0}},setup(t,{attrs:a}){let o=r();return i(()=>[t.name,t.library,t.variant],([t,n,r],i,a)=>{a(e(t,{library:n,variant:r},e=>{o.value=e}))},{immediate:!0}),()=>{let e=o.value;if(!e)return null;let t={...a,class:[e.className,a.class],"aria-hidden":`true`};return e.html===void 0?n(e.tag,t,e.text):n(e.tag,{...t,innerHTML:e.html})}}});export{a as Sigil};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@munsonlabs/sigil",
+  "version": "0.0.1",
+  "description": "Framework-free icon registry with a <ml-sigil> custom element. Register SVG libraries or icon fonts by describing them; the registry loads what it needs.",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "./dist/element.mjs"
+  ],
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.mts"
+    },
+    "./element": {
+      "source": "./src/element/index.ts",
+      "import": "./dist/element.mjs",
+      "types": "./dist/element.d.mts"
+    },
+    "./vue": {
+      "source": "./src/vue.ts",
+      "import": "./dist/vue.mjs",
+      "types": "./dist/vue.d.mts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vp pack --watch",
+    "build": "vp pack",
+    "clean": "rm -rf dist",
+    "lint": "vp lint",
+    "fmt": "vp fmt",
+    "typecheck": "vp check --types",
+    "check": "vp check",
+    "test": "vp test",
+    "test:watch": "vp test --watch"
+  },
+  "devDependencies": {
+    "@munsonlabs/shipkit": "*",
+    "@vue/test-utils": "^2.4.6",
+    "vue": "3.5.33"
+  },
+  "peerDependencies": {
+    "vue": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  }
+}