@mal-icons/web 0.1.2 → 0.3.8

package/dist/index.cjs

@@ -0,0 +1,187 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toCommonJS = (from) => {
+  var entry = (__moduleCache ??= new WeakMap).get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (var key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(entry, key))
+        __defProp(entry, key, {
+          get: __accessProp.bind(from, key),
+          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+        });
+  }
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __moduleCache;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+
+// packages/web/src/index.ts
+var exports_src = {};
+__export(exports_src, {
+  renderIcon: () => renderIcon,
+  registerIcons: () => registerIcons,
+  isIconData: () => isIconData,
+  defineMalIcon: () => defineMalIcon,
+  clearRegistry: () => clearRegistry,
+  cdnLoader: () => cdnLoader,
+  animationClass: () => import_core2.animationClass,
+  WEIGHT_STROKE_WIDTH: () => import_core2.WEIGHT_STROKE_WIDTH,
+  ICON_ANIMATIONS_CSS: () => import_core2.ICON_ANIMATIONS_CSS
+});
+module.exports = __toCommonJS(exports_src);
+var import_core = require("@mal-icons/core");
+var import_core2 = require("@mal-icons/core");
+var SVG_NS = "http://www.w3.org/2000/svg";
+function renderIcon(data, props = {}) {
+  const { size, color, className } = import_core.resolveIconAttrs({ size: props.size, color: props.color, className: props.className }, {});
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", data.viewBox);
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("fill", "currentColor");
+  svg.setAttribute("stroke-width", "0");
+  if (data.defaultAttr) {
+    for (const [k, v] of Object.entries(data.defaultAttr))
+      svg.setAttribute(k, String(v));
+  }
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  if (props.weight)
+    svg.setAttribute("stroke-width", String(import_core.WEIGHT_STROKE_WIDTH[props.weight]));
+  const fullClassName = [className, props.animate ? import_core.animationClass(props.animate) : undefined].filter(Boolean).join(" ");
+  if (fullClassName)
+    svg.setAttribute("class", fullClassName);
+  if (color)
+    svg.style.color = color;
+  if (props.secondaryColor)
+    svg.style.setProperty("--mal-icons-secondary", props.secondaryColor);
+  if (props.title) {
+    svg.setAttribute("role", "img");
+    const title = document.createElementNS(SVG_NS, "title");
+    title.textContent = props.title;
+    svg.appendChild(title);
+  } else {
+    svg.setAttribute("role", "presentation");
+    svg.setAttribute("aria-hidden", "true");
+  }
+  for (const [tag, attr] of data.nodes) {
+    const el = document.createElementNS(SVG_NS, tag);
+    for (const [k, v] of Object.entries(attr))
+      el.setAttribute(k, String(v));
+    svg.appendChild(el);
+  }
+  return svg;
+}
+function isIconData(value) {
+  return typeof value === "object" && value !== null && typeof value.viewBox === "string" && Array.isArray(value.nodes);
+}
+function cdnLoader(baseUrl, fetchImpl = fetch) {
+  const base = baseUrl.replace(/\/+$/, "");
+  return async (name) => {
+    const res = await fetchImpl(`${base}/${name}.json`);
+    if (!res.ok)
+      throw new Error(`mal-icons: failed to load "${name}" (${res.status})`);
+    const data = await res.json();
+    if (!isIconData(data))
+      throw new Error(`mal-icons: malformed icon payload for "${name}"`);
+    return data;
+  };
+}
+var registry = new Map;
+function registerIcons(icons) {
+  for (const [name, data] of Object.entries(icons))
+    registry.set(name, data);
+}
+function clearRegistry() {
+  registry.clear();
+}
+var NAME_ATTRS = ["size", "color", "title", "class", "weight", "animate"];
+function readProps(el) {
+  const props = {};
+  const size = el.getAttribute("size");
+  if (size !== null)
+    props.size = size;
+  const color = el.getAttribute("color");
+  if (color !== null)
+    props.color = color;
+  const title = el.getAttribute("title");
+  if (title !== null)
+    props.title = title;
+  const className = el.getAttribute("class");
+  if (className !== null)
+    props.className = className;
+  const weight = el.getAttribute("weight");
+  if (weight !== null && weight in import_core.WEIGHT_STROKE_WIDTH) {
+    props.weight = weight;
+  }
+  const animate = el.getAttribute("animate");
+  if (animate !== null)
+    props.animate = animate;
+  return props;
+}
+function defineMalIcon(tagName = "mal-icons", loader) {
+  if (typeof customElements === "undefined" || customElements.get(tagName))
+    return;
+
+  class MalIconElement extends HTMLElement {
+    static get observedAttributes() {
+      return ["name", "src", ...NAME_ATTRS];
+    }
+    attributeChangedCallback() {
+      this.render();
+    }
+    connectedCallback() {
+      this.render();
+    }
+    mount(data) {
+      this.replaceChildren(renderIcon(data, readProps(this)));
+    }
+    render() {
+      const name = this.getAttribute("name");
+      if (name && registry.has(name)) {
+        const data = registry.get(name);
+        if (data)
+          this.mount(data);
+        return;
+      }
+      const src = this.getAttribute("src");
+      let pending;
+      if (src) {
+        pending = fetch(src).then(async (res) => {
+          if (!res.ok)
+            throw new Error(`mal-icons: failed to load "${src}" (${res.status})`);
+          const data = await res.json();
+          if (!isIconData(data))
+            throw new Error(`mal-icons: malformed icon payload at "${src}"`);
+          return data;
+        });
+      } else if (name && loader) {
+        pending = loader(name);
+      }
+      if (!pending)
+        return;
+      pending.then((data) => this.mount(data)).catch(() => {});
+    }
+  }
+  customElements.define(tagName, MalIconElement);
+}

package/dist/index.d.ts

@@ -49,5 +49,5 @@ export declare function clearRegistry(): void;
  * JSON `src` URL via {@link cdnLoader}.
  */
 export declare function defineMalIcon(tagName?: string, loader?: IconLoader): void;
-export { ICON_ANIMATIONS_CSS, WEIGHT_STROKE_WIDTH, animationClass, type IconAnimation, } from "@mal-icons/core";
+export { animationClass, ICON_ANIMATIONS_CSS, type IconAnimation, WEIGHT_STROKE_WIDTH, } from "@mal-icons/core";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,mBAAmB,EAGpB,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EAAE,QAAQ,EAAE,CAAC;AAIzB,sEAAsE;AACtE,MAAM,WAAW,eAAe;IAC9B,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gFAAgF;IAChF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qFAAqF;IACrF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IAC1C,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,GAAE,eAAoB,GAAG,aAAa,CA4CrF;AAED,qEAAqE;AACrE,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,QAAQ,CAO5D;AAED,iFAAiF;AACjF,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;AAE7D;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,GAAE,OAAO,KAAa,GAAG,UAAU,CAStF;AAKD,6EAA6E;AAC7E,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,IAAI,CAEnE;AAED,qDAAqD;AACrD,wBAAgB,aAAa,IAAI,IAAI,CAEpC;AAuBD;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,OAAO,SAAc,EAAE,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAmD9E;AAED,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,KAAK,aAAa,GACnB,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,QAAQ,EAEb,mBAAmB,EACpB,MAAM,iBAAiB,CAAC;AAEzB,YAAY,EAAE,QAAQ,EAAE,CAAC;AAIzB,sEAAsE;AACtE,MAAM,WAAW,eAAe;IAC9B,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gFAAgF;IAChF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qFAAqF;IACrF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IAC1C,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,GAAE,eAAoB,GAAG,aAAa,CA4CrF;AAED,qEAAqE;AACrE,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,QAAQ,CAO5D;AAED,iFAAiF;AACjF,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;AAE7D;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,GAAE,OAAO,KAAa,GAAG,UAAU,CAStF;AAKD,6EAA6E;AAC7E,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,IAAI,CAEnE;AAED,qDAAqD;AACrD,wBAAgB,aAAa,IAAI,IAAI,CAEpC;AAuBD;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,OAAO,SAAc,EAAE,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAmD9E;AAED,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,KAAK,aAAa,EAClB,mBAAmB,GACpB,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -0,0 +1,155 @@
+// packages/web/src/index.ts
+import {
+  animationClass,
+  resolveIconAttrs,
+  WEIGHT_STROKE_WIDTH
+} from "@mal-icons/core";
+import {
+  animationClass as animationClass2,
+  ICON_ANIMATIONS_CSS,
+  WEIGHT_STROKE_WIDTH as WEIGHT_STROKE_WIDTH2
+} from "@mal-icons/core";
+var SVG_NS = "http://www.w3.org/2000/svg";
+function renderIcon(data, props = {}) {
+  const { size, color, className } = resolveIconAttrs({ size: props.size, color: props.color, className: props.className }, {});
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", data.viewBox);
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("fill", "currentColor");
+  svg.setAttribute("stroke-width", "0");
+  if (data.defaultAttr) {
+    for (const [k, v] of Object.entries(data.defaultAttr))
+      svg.setAttribute(k, String(v));
+  }
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  if (props.weight)
+    svg.setAttribute("stroke-width", String(WEIGHT_STROKE_WIDTH[props.weight]));
+  const fullClassName = [className, props.animate ? animationClass(props.animate) : undefined].filter(Boolean).join(" ");
+  if (fullClassName)
+    svg.setAttribute("class", fullClassName);
+  if (color)
+    svg.style.color = color;
+  if (props.secondaryColor)
+    svg.style.setProperty("--mal-icons-secondary", props.secondaryColor);
+  if (props.title) {
+    svg.setAttribute("role", "img");
+    const title = document.createElementNS(SVG_NS, "title");
+    title.textContent = props.title;
+    svg.appendChild(title);
+  } else {
+    svg.setAttribute("role", "presentation");
+    svg.setAttribute("aria-hidden", "true");
+  }
+  for (const [tag, attr] of data.nodes) {
+    const el = document.createElementNS(SVG_NS, tag);
+    for (const [k, v] of Object.entries(attr))
+      el.setAttribute(k, String(v));
+    svg.appendChild(el);
+  }
+  return svg;
+}
+function isIconData(value) {
+  return typeof value === "object" && value !== null && typeof value.viewBox === "string" && Array.isArray(value.nodes);
+}
+function cdnLoader(baseUrl, fetchImpl = fetch) {
+  const base = baseUrl.replace(/\/+$/, "");
+  return async (name) => {
+    const res = await fetchImpl(`${base}/${name}.json`);
+    if (!res.ok)
+      throw new Error(`mal-icons: failed to load "${name}" (${res.status})`);
+    const data = await res.json();
+    if (!isIconData(data))
+      throw new Error(`mal-icons: malformed icon payload for "${name}"`);
+    return data;
+  };
+}
+var registry = new Map;
+function registerIcons(icons) {
+  for (const [name, data] of Object.entries(icons))
+    registry.set(name, data);
+}
+function clearRegistry() {
+  registry.clear();
+}
+var NAME_ATTRS = ["size", "color", "title", "class", "weight", "animate"];
+function readProps(el) {
+  const props = {};
+  const size = el.getAttribute("size");
+  if (size !== null)
+    props.size = size;
+  const color = el.getAttribute("color");
+  if (color !== null)
+    props.color = color;
+  const title = el.getAttribute("title");
+  if (title !== null)
+    props.title = title;
+  const className = el.getAttribute("class");
+  if (className !== null)
+    props.className = className;
+  const weight = el.getAttribute("weight");
+  if (weight !== null && weight in WEIGHT_STROKE_WIDTH) {
+    props.weight = weight;
+  }
+  const animate = el.getAttribute("animate");
+  if (animate !== null)
+    props.animate = animate;
+  return props;
+}
+function defineMalIcon(tagName = "mal-icons", loader) {
+  if (typeof customElements === "undefined" || customElements.get(tagName))
+    return;
+
+  class MalIconElement extends HTMLElement {
+    static get observedAttributes() {
+      return ["name", "src", ...NAME_ATTRS];
+    }
+    attributeChangedCallback() {
+      this.render();
+    }
+    connectedCallback() {
+      this.render();
+    }
+    mount(data) {
+      this.replaceChildren(renderIcon(data, readProps(this)));
+    }
+    render() {
+      const name = this.getAttribute("name");
+      if (name && registry.has(name)) {
+        const data = registry.get(name);
+        if (data)
+          this.mount(data);
+        return;
+      }
+      const src = this.getAttribute("src");
+      let pending;
+      if (src) {
+        pending = fetch(src).then(async (res) => {
+          if (!res.ok)
+            throw new Error(`mal-icons: failed to load "${src}" (${res.status})`);
+          const data = await res.json();
+          if (!isIconData(data))
+            throw new Error(`mal-icons: malformed icon payload at "${src}"`);
+          return data;
+        });
+      } else if (name && loader) {
+        pending = loader(name);
+      }
+      if (!pending)
+        return;
+      pending.then((data) => this.mount(data)).catch(() => {});
+    }
+  }
+  customElements.define(tagName, MalIconElement);
+}
+export {
+  renderIcon,
+  registerIcons,
+  isIconData,
+  defineMalIcon,
+  clearRegistry,
+  cdnLoader,
+  animationClass2 as animationClass,
+  WEIGHT_STROKE_WIDTH2 as WEIGHT_STROKE_WIDTH,
+  ICON_ANIMATIONS_CSS
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mal-icons/web",
-  "version": "0.1.2",
+  "version": "0.3.8",
   "description": "Zero-build web components and icon data for mal-icons.",
   "type": "module",
   "license": "MIT",
@@ -14,9 +14,18 @@
     "url": "git+https://github.com/mal-icons/mal-icons.git",
     "directory": "packages/web"
   },
-  "keywords": ["icons", "svg", "web-components", "custom-elements", "mal-icons"],
+  "keywords": [
+    "icons",
+    "svg",
+    "web-components",
+    "custom-elements",
+    "mal-icons"
+  ],
   "sideEffects": false,
-  "files": ["dist", "src/icons"],
+  "files": [
+    "dist",
+    "src/icons"
+  ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -36,7 +45,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@mal-icons/core": "0.1.2"
+    "@mal-icons/core": "0.3.8"
   },
   "publishConfig": {
     "access": "public"