@unmade/svg-helpers 0.1.0

package/README.md

@@ -0,0 +1,46 @@
+# @unmade/svg-helpers
+
+A set of standalone helper functions for working with SVG content, designed for modular imports. Each helper module can be imported individually for optimal bundle size and clarity.
+
+## Installation
+
+```sh
+npm install @unmade/svg-helpers
+```
+
+## Usage
+
+You can import specific helpers or groups of helpers directly from the package using subpath imports:
+
+```js
+// Import a specific helper from the colours module
+import { getUniqueColoursFromSVG } from '@unmade/svg-helpers/colours';
+
+// Import all helpers from the colours module
+import * as colours from '@unmade/svg-helpers/colours';
+```
+
+## Exported Modules
+
+### colours
+Helpers for extracting and working with colour information in SVGs.
+
+#### Exports
+- **getUniqueColoursFromSVG(svg: SVGElement): string[]**
+  - Returns a list of unique hex colours used in the SVG (expands short hex codes to full length).
+- **getColourableElements(svg: SVGElement): SVGElement[]**
+  - Returns all SVG elements that can have a colour (fill, stroke, stop-color, etc).
+- **expandHex(short: string): string**
+  - Converts a short hex colour (e.g. `#abc`) to full length (e.g. `#aabbcc`).
+
+## Adding More Helpers
+
+To add a new helper module, create a new folder in `src/` with an `index.ts` file. It will be automatically exported as a subpath import:
+
+```js
+import { yourHelper } from '@unmade/svg-helpers/your-module';
+```
+
+---
+
+For more details, see the source code in each module.

package/dist/colours/format.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=o=>{let e=Array.from(o),t=!1;return e[0]==="#"&&(e.shift(),t=!0),e.length===3&&(e=e.map(r=>`${r}${r}`)),`${t?"#":""}${e.join("").toLowerCase()}`};exports.expandHex=a;

package/dist/colours/format.mjs

@@ -0,0 +1,7 @@
+const a = (o) => {
+  let e = Array.from(o), t = !1;
+  return e[0] === "#" && (e.shift(), t = !0), e.length === 3 && (e = e.map((r) => `${r}${r}`)), `${t ? "#" : ""}${e.join("").toLowerCase()}`;
+};
+export {
+  a as expandHex
+};

package/dist/colours.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./colours/format.cjs"),e={svg:"svg",circle:"circle",desc:"desc",ellipse:"ellipse",rect:"rect",line:"line",path:"path",polygon:"polygon",polyline:"polyline",stop:"stop"},o={fill:"fill",stroke:"stroke"},E={tiling:[e.circle,e.ellipse,e.rect,e.line,e.path,e.polygon,e.polyline,e.stop,`[${o.fill}]`,`[${o.stroke}]`],nonTiling:[e.circle,e.desc,e.ellipse,e.rect,e.line,e.path,e.polygon,e.polyline,e.stop,`[${o.fill}]`,`[${o.stroke}]`]},a=l=>Array.from(l.querySelectorAll(E.tiling.map(t=>`*:not(clipPath) > ${t}`).join(", "))),u=l=>{const t=l.getAttribute(o.stroke);return t==="none"||!t?!1:t},d=l=>{const g=a(l).reduce((r,n)=>{const i=n.getAttribute("stop-color"),c=n.getAttribute(o.fill)||"#000",p=u(n);return!i&&c.startsWith("#")&&r.add(s.expandHex(c)),i&&r.add(s.expandHex(i)),p&&r.add(s.expandHex(p)),r},new Set);return Array.from(g)};exports.COLOURABLE_ELEMENT_SELECTORS=E;exports.ELEMENTS=e;exports.getColourableElements=a;exports.getUniqueColoursFromSVG=d;

package/dist/colours.mjs

@@ -0,0 +1,66 @@
+import { expandHex as s } from "./colours/format.mjs";
+const e = {
+  svg: "svg",
+  circle: "circle",
+  desc: "desc",
+  ellipse: "ellipse",
+  rect: "rect",
+  line: "line",
+  path: "path",
+  polygon: "polygon",
+  polyline: "polyline",
+  stop: "stop"
+}, l = {
+  fill: "fill",
+  stroke: "stroke"
+}, g = {
+  tiling: [
+    e.circle,
+    e.ellipse,
+    e.rect,
+    e.line,
+    e.path,
+    e.polygon,
+    e.polyline,
+    e.stop,
+    `[${l.fill}]`,
+    `[${l.stroke}]`
+  ],
+  nonTiling: [
+    e.circle,
+    e.desc,
+    e.ellipse,
+    e.rect,
+    e.line,
+    e.path,
+    e.polygon,
+    e.polyline,
+    e.stop,
+    `[${l.fill}]`,
+    `[${l.stroke}]`
+  ]
+}, f = (o) => Array.from(
+  o.querySelectorAll(
+    g.tiling.map((t) => `*:not(clipPath) > ${t}`).join(", ")
+  )
+), u = (o) => {
+  const t = o.getAttribute(l.stroke);
+  return t === "none" || !t ? !1 : t;
+}, d = (o) => {
+  const a = f(o).reduce(
+    (r, n) => {
+      const i = n.getAttribute("stop-color"), c = n.getAttribute(l.fill) || "#000", p = u(n);
+      return !i && c.startsWith("#") && r.add(s(c)), i && r.add(s(i)), p && r.add(s(p)), r;
+    },
+    /* @__PURE__ */ new Set()
+  );
+  return Array.from(
+    a
+  );
+};
+export {
+  g as COLOURABLE_ELEMENT_SELECTORS,
+  e as ELEMENTS,
+  f as getColourableElements,
+  d as getUniqueColoursFromSVG
+};

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+export declare const COLOURABLE_ELEMENT_SELECTORS: {
+    tiling: string[];
+    nonTiling: string[];
+};
+
+export declare const ELEMENTS: {
+    svg: string;
+    circle: string;
+    desc: string;
+    ellipse: string;
+    rect: string;
+    line: string;
+    path: string;
+    polygon: string;
+    polyline: string;
+    stop: string;
+};
+
+/**
+ * Fetch all colourable elements from an SVG
+ *
+ * @param {SVGElement} svg - the SVG input
+ * @returns {SVGElement[]} the elements
+ */
+export declare const getColourableElements: (svg: SVGElement) => SVGElement[];
+
+/**
+ * Get a list of the unique colours used in an SVG document.
+ *
+ * @param {SVGElement} svg - the document
+ * @returns {Array} the colours (with shortened hex codes expanded to full)
+ */
+export declare const getUniqueColoursFromSVG: (svg: SVGElement) => unknown[];
+
+export { }

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@unmade/svg-helpers",
+  "version": "0.1.0",
+  "description": "Set of helper functions for working with SVG content",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.7.0",
+    "vitest": "^1.2.0"
+  },
+  "keywords": [
+    "svg"
+  ],
+  "license": "MIT"
+}