wip: feat(plugin): add inputHex and outputHex

 - add inputHex
 - TBD: add outputHex

src/plugin/index.ts

@@ -0,0 +1,2 @@
+export { inputHex } from "./inputHex";
+export { outputHex } from "./outputHex";

src/plugin/inputHex/index.ts

@@ -0,0 +1,77 @@
+import type { MyColorCfg as OriginalColorCfg, MyColorPlugin } from "../..";
+import type { TColorRGBA } from "../../type";
+
+interface ColorCfg {
+  color: string; // hex color
+}
+
+type MyColorCfg = OriginalColorCfg & ColorCfg;
+
+const RE_HEX = /^#?([\dA-Fa-f]{6}|[\dA-Fa-f]{3})$/;
+const RE_HEXA = /^#?([\dA-Fa-f]{8}|[\dA-Fa-f]{4})$/;
+
+const parseColor = (cfg: MyColorCfg): TColorRGBA => {
+  const { color } = cfg;
+  let _hex: string | string[] = color;
+
+  // match rgb hex format, eg #FF0000
+  if (RE_HEX.test(_hex)) {
+    // remove optional leading #
+    if (_hex.length === 4 || _hex.length === 7) {
+      _hex = _hex.slice(1);
+    }
+    // expand short-notation to full six-digit
+    if (_hex.length === 3) {
+      _hex = [..._hex];
+      _hex = _hex[0] + _hex[0] + _hex[1] + _hex[1] + _hex[2] + _hex[2];
+    }
+    const u = Number.parseInt(_hex, 16);
+    const r = u >> 16;
+    const g = (u >> 8) & 0xff;
+    const b = u & 0xff;
+    return [r, g, b, 1];
+  }
+
+  // match rgba hex format, eg #FF000077
+  if (RE_HEXA.test(_hex)) {
+    if (_hex.length === 5 || _hex.length === 9) {
+      // remove optional leading #
+      _hex = _hex.slice(1);
+    }
+    // expand short-notation to full eight-digit
+    if (_hex.length === 4) {
+      _hex = [..._hex];
+      _hex =
+        _hex[0] +
+        _hex[0] +
+        _hex[1] +
+        _hex[1] +
+        _hex[2] +
+        _hex[2] +
+        _hex[3] +
+        _hex[3];
+    }
+    const u = Number.parseInt(_hex, 16);
+    const r = (u >> 24) & 0xff;
+    const g = (u >> 16) & 0xff;
+    const b = (u >> 8) & 0xff;
+    const a = Math.round(((u & 0xff) / 0xff) * 100) / 100;
+    return [r, g, b, a];
+  }
+
+  // parse failed, return original color
+  return color;
+};
+
+export const inputHex: MyColorPlugin = (_, c) => {
+  const proto = c.prototype;
+
+  const oldParse = proto.parse;
+  proto.parse = function (cfg: MyColorCfg) {
+    const color = parseColor.bind(this)(cfg);
+    const newCfg = { ...cfg, color };
+    oldParse.bind(this)(newCfg);
+  };
+};
+
+export default inputHex;

src/plugin/outputHex/index.ts

@@ -0,0 +1,3 @@
+export const outputHex = () => {};
+
+export default outputHex;