@mal-icons/web 0.1.1 → 0.2.7

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.js

@@ -0,0 +1,155 @@
+// packages/web/src/index.ts
+import {
+  WEIGHT_STROKE_WIDTH,
+  animationClass,
+  resolveIconAttrs
+} from "@mal-icons/core";
+import {
+  ICON_ANIMATIONS_CSS,
+  WEIGHT_STROKE_WIDTH as WEIGHT_STROKE_WIDTH2,
+  animationClass as animationClass2
+} 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.1",
+  "version": "0.2.7",
   "description": "Zero-build web components and icon data for mal-icons.",
   "type": "module",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@mal-icons/core": "0.1.0"
+    "@mal-icons/core": "0.2.7"
   },
   "publishConfig": {
     "access": "public"