@vnejs/uis.react.char 0.2.0 → 0.2.1

package/dist/Char.d.ts

@@ -1,3 +1,5 @@
 import { type CharProps } from "./Char.types.js";
-export declare const Char: ({ token, marks, isVisible, isForce }?: CharProps) => import("react").JSX.Element;
+declare const CharComponent: ({ token, marks, isVisible, isForce }?: CharProps) => import("react").JSX.Element;
+export declare const Char: import("react").MemoExoticComponent<typeof CharComponent>;
+export {};
 //# sourceMappingURL=Char.d.ts.map

package/dist/Char.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Char.d.ts","sourceRoot":"","sources":["../src/Char.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAajD,eAAO,MAAM,IAAI,0CAAoE,SAAS,gCAoC7F,CAAC"}
+{"version":3,"file":"Char.d.ts","sourceRoot":"","sources":["../src/Char.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAMjD,QAAA,MAAM,aAAa,0CAAoE,SAAS,gCAiC/F,CAAC;AAEF,eAAO,MAAM,IAAI,2DAAsB,CAAC"}

package/dist/Char.js

@@ -1,34 +1,40 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { memo } from "react";
 import { b } from "./Char.styles.js";
 const MARKS_PREFIXES = { COLOR: "color:", WEIGHT: "weight:", OPACITY: "opacity:", ANIMATION: "animation:", ZOOM: "zoom:" };
-const MARKS_PREFIXES_VALUES = Object.values(MARKS_PREFIXES);
-const reduceMark = (prefix) => (acc, mark) => {
-    if (mark.startsWith(prefix))
-        acc.push(mark.slice(prefix.length));
-    return acc;
-};
-export const Char = ({ token = "", marks = [], isVisible = false, isForce = false } = {}) => {
-    const marksZoom = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.ZOOM), []), [marks]);
-    const marksColor = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.COLOR), []), [marks]);
-    const marksWeight = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.WEIGHT), []), [marks]);
-    const marksOpacity = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.OPACITY), []), [marks]);
-    const marksAnimation = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.ANIMATION), []), [marks]);
-    const style = useMemo(() => {
-        const result = {};
-        if (marksZoom.length)
-            result.zoom = marksZoom[marksZoom.length - 1];
-        if (marksColor.length)
-            result.color = marksColor[marksColor.length - 1];
-        if (marksWeight.length)
-            result.fontWeight = marksWeight[marksWeight.length - 1];
-        if (marksOpacity.length)
-            result["--vne-char-visible-opacity"] = marksOpacity[marksOpacity.length - 1];
-        if (marksAnimation.length)
-            result.animation = marksAnimation[marksAnimation.length - 1];
-        return result;
-    }, [marksZoom, marksColor, marksWeight, marksOpacity, marksAnimation]);
-    const otherMarks = useMemo(() => marks.reduce((acc, mark) => (MARKS_PREFIXES_VALUES.some((prefix) => mark.startsWith(prefix)) ? acc : { ...acc, [mark]: true }), {}), [marks]);
+const CharComponent = ({ token = "", marks = [], isVisible = false, isForce = false } = {}) => {
+    const style = {};
+    const otherMarks = {};
+    let zoom;
+    let color;
+    let weight;
+    let opacity;
+    let animation;
+    for (const mark of marks) {
+        if (mark.startsWith(MARKS_PREFIXES.ZOOM))
+            zoom = mark.slice(MARKS_PREFIXES.ZOOM.length);
+        else if (mark.startsWith(MARKS_PREFIXES.COLOR))
+            color = mark.slice(MARKS_PREFIXES.COLOR.length);
+        else if (mark.startsWith(MARKS_PREFIXES.WEIGHT))
+            weight = mark.slice(MARKS_PREFIXES.WEIGHT.length);
+        else if (mark.startsWith(MARKS_PREFIXES.OPACITY))
+            opacity = mark.slice(MARKS_PREFIXES.OPACITY.length);
+        else if (mark.startsWith(MARKS_PREFIXES.ANIMATION))
+            animation = mark.slice(MARKS_PREFIXES.ANIMATION.length);
+        else
+            otherMarks[mark] = true;
+    }
+    if (zoom)
+        style.zoom = zoom;
+    if (color)
+        style.color = color;
+    if (weight)
+        style.fontWeight = weight;
+    if (opacity)
+        style["--vne-char-visible-opacity"] = opacity;
+    if (animation)
+        style.animation = animation;
     return (_jsx("div", { className: b({ isVisible, isForce, ...otherMarks }), style: style, children: token }));
 };
+export const Char = memo(CharComponent);
 //# sourceMappingURL=Char.js.map

package/dist/Char.js.map

@@ -1 +1 @@
-{"version":3,"file":"Char.js","sourceRoot":"","sources":["../src/Char.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Char.js","sourceRoot":"","sources":["../src/Char.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAI7B,OAAO,EAAE,CAAC,EAAE,MAAM,kBAAkB,CAAC;AAErC,MAAM,cAAc,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAE3H,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,SAAS,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,GAAc,EAAE,EAAE,EAAE;IACvG,MAAM,KAAK,GAAoC,EAAE,CAAC;IAClD,MAAM,UAAU,GAA4B,EAAE,CAAC;IAE/C,IAAI,IAAwB,CAAC;IAC7B,IAAI,KAAyB,CAAC;IAC9B,IAAI,MAA0B,CAAC;IAC/B,IAAI,OAA2B,CAAC;IAChC,IAAI,SAA6B,CAAC;IAElC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC;YAAE,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;aACnF,IAAI,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,CAAC;YAAE,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;aAC3F,IAAI,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,MAAM,CAAC;YAAE,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;aAC9F,IAAI,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,OAAO,CAAC;YAAE,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;aACjG,IAAI,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,SAAS,CAAC;YAAE,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;;YACvG,UAAU,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED,IAAI,IAAI;QAAE,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;IAC5B,IAAI,KAAK;QAAE,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;IAC/B,IAAI,MAAM;QAAE,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;IACtC,IAAI,OAAO;QAAE,KAAK,CAAC,4BAA4B,CAAC,GAAG,OAAO,CAAC;IAC3D,IAAI,SAAS;QAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAE3C,OAAO,CACL,cACE,SAAS,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,CAAC,EACnD,KAAK,EAAE,KAAK,YAEX,KAAK,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/uis.react.char",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {

package/src/Char.tsx

@@ -1,45 +1,35 @@
-import { useMemo } from "react";
+import { memo } from "react";
 
 import { type CharProps } from "./Char.types.js";
 
 import { b } from "./Char.styles.js";
 
 const MARKS_PREFIXES = { COLOR: "color:", WEIGHT: "weight:", OPACITY: "opacity:", ANIMATION: "animation:", ZOOM: "zoom:" };
-const MARKS_PREFIXES_VALUES = Object.values(MARKS_PREFIXES);
 
-const reduceMark = (prefix: string) => (acc: string[], mark: string) => {
-  if (mark.startsWith(prefix)) acc.push(mark.slice(prefix.length));
-
-  return acc;
-};
-
-export const Char = ({ token = "", marks = [], isVisible = false, isForce = false }: CharProps = {}) => {
-  const marksZoom = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.ZOOM), [] as string[]), [marks]);
-  const marksColor = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.COLOR), [] as string[]), [marks]);
-  const marksWeight = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.WEIGHT), [] as string[]), [marks]);
-  const marksOpacity = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.OPACITY), [] as string[]), [marks]);
-  const marksAnimation = useMemo(() => marks.reduce(reduceMark(MARKS_PREFIXES.ANIMATION), [] as string[]), [marks]);
-
-  const style = useMemo(() => {
-    const result: Record<string, string | number> = {};
-
-    if (marksZoom.length) result.zoom = marksZoom[marksZoom.length - 1];
-    if (marksColor.length) result.color = marksColor[marksColor.length - 1];
-    if (marksWeight.length) result.fontWeight = marksWeight[marksWeight.length - 1];
-    if (marksOpacity.length) result["--vne-char-visible-opacity"] = marksOpacity[marksOpacity.length - 1];
-    if (marksAnimation.length) result.animation = marksAnimation[marksAnimation.length - 1];
-
-    return result;
-  }, [marksZoom, marksColor, marksWeight, marksOpacity, marksAnimation]);
-
-  const otherMarks = useMemo(
-    () =>
-      marks.reduce<Record<string, boolean>>(
-        (acc, mark) => (MARKS_PREFIXES_VALUES.some((prefix) => mark.startsWith(prefix)) ? acc : { ...acc, [mark]: true }),
-        {},
-      ),
-    [marks],
-  );
+const CharComponent = ({ token = "", marks = [], isVisible = false, isForce = false }: CharProps = {}) => {
+  const style: Record<string, string | number> = {};
+  const otherMarks: Record<string, boolean> = {};
+
+  let zoom: string | undefined;
+  let color: string | undefined;
+  let weight: string | undefined;
+  let opacity: string | undefined;
+  let animation: string | undefined;
+
+  for (const mark of marks) {
+    if (mark.startsWith(MARKS_PREFIXES.ZOOM)) zoom = mark.slice(MARKS_PREFIXES.ZOOM.length);
+    else if (mark.startsWith(MARKS_PREFIXES.COLOR)) color = mark.slice(MARKS_PREFIXES.COLOR.length);
+    else if (mark.startsWith(MARKS_PREFIXES.WEIGHT)) weight = mark.slice(MARKS_PREFIXES.WEIGHT.length);
+    else if (mark.startsWith(MARKS_PREFIXES.OPACITY)) opacity = mark.slice(MARKS_PREFIXES.OPACITY.length);
+    else if (mark.startsWith(MARKS_PREFIXES.ANIMATION)) animation = mark.slice(MARKS_PREFIXES.ANIMATION.length);
+    else otherMarks[mark] = true;
+  }
+
+  if (zoom) style.zoom = zoom;
+  if (color) style.color = color;
+  if (weight) style.fontWeight = weight;
+  if (opacity) style["--vne-char-visible-opacity"] = opacity;
+  if (animation) style.animation = animation;
 
   return (
     <div
@@ -50,3 +40,5 @@ export const Char = ({ token = "", marks = [], isVisible = false, isForce = fals
     </div>
   );
 };
+
+export const Char = memo(CharComponent);