feat: reoptimize osmicsx (#75)

OsmiCSX · Feb 26, 2024 · c01c0d9 · c01c0d9
1 parent 45dfd0f
commit c01c0d9
Show file tree

Hide file tree

Showing 20 changed files with 463 additions and 785 deletions.
diff --git a/src/core/apply.ts b/src/core/apply.ts
@@ -9,35 +9,28 @@ export const applyHelper =
     const outputStyles: object[] = [];
 
     try {
-      // Get syntax from each args
-      for (let i = 0; i < args.length; i++) {
-        const arg = args[i];
-        if (arg !== false && arg !== undefined && typeof arg === 'string') {
-          // Init instance
+      args.forEach((arg) => {
+        if (typeof arg === "string") {
           const instanceStyle = new Instance(themeContext?.theme);
+          const syntaxList = arg.split(" ");
 
-          // Get syntax list from each args
-          const syntaxList: string[] = arg.split(" ");
-          const defaultSyntax: string[] = syntaxList.filter(
-            (item: string) => !item.includes("dark:") && !item.includes("notch:") &&
-                      !item.includes("android:") && !item.includes("ios:")
-          );
-
-          defaultSyntax.forEach((syntax: string) => {
-            instanceStyle.applyStyles(syntax);
+          syntaxList.forEach((syntax) => {
+            if (!syntax.includes(":")) {
+              instanceStyle.applyStyles(syntax);
+            }
           });
 
-          // Apply platform and mode specific styles, these will overwrite the default styles
-          syntaxList.forEach((syntax: string) => {
-            if (syntax.includes("android:") || syntax.includes("ios:") ||
-                syntax.includes("notch:") || syntax.includes("dark:")) {
-              instanceStyle.applyStyles(syntax.replace(/(android:|ios:|notch:|dark:)/, ""));
-            }
+          const specificSyntax = syntaxList.filter((syntax) =>
+            syntax.includes(":")
+          );
+          specificSyntax.forEach((syntax) => {
+            instanceStyle.applyStyles(syntax.split(":")[1]);
+            instanceStyle.darkTheme(syntax.split(":")[1], themeContext!.mode);
           });
 
           outputStyles.push(instanceStyle.getOutputStyle());
         }
-      }
+      });
     } catch (error: unknown) {
       if (error instanceof Error) {
         console.error(`Error in applyHelper: ${error.message}`);
@@ -48,4 +41,3 @@ export const applyHelper =
 
     return outputStyles as any[];
   };
-
diff --git a/src/core/color.tsx b/src/core/color.tsx
@@ -1,41 +1,18 @@
 import { isDark } from "../lib/darkThemeHelper";
 import type { OsmiContextInstance } from "../types/osmi.types";
 
-const getColor = (themeContext: OsmiContextInstance | null, colorKey: string, opacity: string) => {
-  const predefinedColor = themeContext?.theme[colorKey];
-
-  if (typeof predefinedColor === "string") {
-    return predefinedColor.replace(
-      "--osmi-opacity",
-      opacity !== undefined ? (Number(opacity) / 100).toFixed(2) : "1"
-    );
-  } else {
+const getColor = (themeContext: OsmiContextInstance, colorKey: string, opacity?: string) => {
+  const color = themeContext.theme[colorKey];
+  if (typeof color !== "string") {
     throw Error("Invalid color syntax");
   }
+  const alpha = opacity ? (Number(opacity) / 100).toFixed(2) : "1";
+  return color.replace("--osmi-opacity", alpha);
 };
 
-export const colorHelper =
-  (syntax: string | boolean | undefined) => (themeContext: OsmiContextInstance | null) => {
-    const splitSyntax = (syntax as string).split(" ");
-
-    if (splitSyntax.length === 1) {
-      const [colorKey, opacity] = splitSyntax[0].split("/");
-      return getColor(themeContext, colorKey, opacity);
-    }
-
-    if (splitSyntax.length === 2 && splitSyntax.some((s) => s.includes("dark:"))) {
-      const defaultSyntax = splitSyntax.find((s) => !s.includes("dark:")) ?? "";
-      const darkSyntax = splitSyntax.find((s) => s.includes("dark:"))?.replace("dark:", "") ?? "";
-
-      const [defaultColor, defaultOpacity] = defaultSyntax.split("/");
-      const [darkColor, darkOpacity] = darkSyntax.split("/");
+export const colorHelper = (syntax: string) => (themeContext: OsmiContextInstance) => {
+  const [baseSyntax, darkSyntax] = syntax.split(" ").map(s => s.replace("dark:", ""));
+  const [colorKey, opacity] = (isDark(darkSyntax, themeContext.mode) ? darkSyntax : baseSyntax).split("/");
 
-      if (isDark(darkSyntax, themeContext?.mode ?? "")) {
-        return getColor(themeContext, darkColor, darkOpacity);
-      } else {
-        return getColor(themeContext, defaultColor, defaultOpacity);
-      }
-    }
-
-    throw Error("Invalid color syntax");
-  };
+  return getColor(themeContext, colorKey, opacity);
+};
diff --git a/src/core/hoc.tsx b/src/core/hoc.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useCallback } from "react";
+import React, { useContext, useMemo } from "react";
 import { OsmiContext } from "./context";
 import { applyHelper } from "./apply";
 import { colorHelper } from "./color";
@@ -9,49 +9,46 @@ export const withStyles =
   <P extends ApplyInstance = ApplyInstance>(
     Component: React.ComponentType<P>
   ): React.FC<Omit<P, keyof ApplyInstance>> =>
-  (props) => {
-    const themeContext = useContext(OsmiContext);
+    (props) => {
+      const themeContext = useContext(OsmiContext);
 
-    if (themeContext === null) {
-      throw new Error("You must wrap your components in a OsmiProvider.");
-    }
+      if (themeContext === null) {
+        throw new Error("You must wrap your components in a OsmiProvider.");
+      }
 
-    const apply = useCallback(
-      <T extends NamedStyles<T> | NamedStyles<any>>(...args: (string | boolean | undefined)[]) => {
-        return applyHelper(...args)(themeContext);
-      },
-      [themeContext]
-    );
+      const { scaleWidth, scaleHeight, switchMode } = themeContext;
 
-    const colors = useCallback(
-      (...args: (string | boolean | undefined)[]): string | string[] => {
-        if (args.length === 1) {
-          if (args[0] !== false && args[0] !== undefined) {
-            return colorHelper(args[0] as string)(themeContext);
-          }
+      const apply = useMemo(
+        () =>
+          <T extends NamedStyles<T> | NamedStyles<any>>(...args: (string | boolean | undefined)[]) =>
+            applyHelper(...args)(themeContext)
+        ,
+        [themeContext]
+      );
 
-          return "";
-        } else if (args.length === 2) {
-          return args.map((syntax) =>
-            syntax !== false && syntax !== undefined
-              ? colorHelper(syntax)(themeContext)
-              : ""
-          );
-        } else {
-          throw Error("Invalid color syntax");
-        }
-      },
-      [themeContext]
-    );
+      const colors = useMemo(
+        () =>
+          (...args: (string | boolean | undefined)[]): string | string[] => {
+            if (args.length === 1) {
+              const arg = args[0];
+              return arg !== false && arg !== undefined ? colorHelper(arg)(themeContext) : "";
+            } else if (args.length === 2) {
+              return args.map(arg => arg !== false && arg !== undefined ? colorHelper(arg)(themeContext) : "");
+            }
+            throw Error("Invalid color syntax");
+          }
+        ,
+        [themeContext]
+      );
 
-    return (
-      <Component
-        {...(props as P)}
-        apply={apply}
-        colors={colors}
-        scaleWidth={themeContext.scaleWidth}
-        scaleHeight={themeContext.scaleHeight}
-        switchTheme={themeContext.switchMode}
-      />
-    );
-  };
+      return (
+        <Component
+          {...(props as P)}
+          apply={apply}
+          colors={colors}
+          scaleWidth={scaleWidth}
+          scaleHeight={scaleHeight}
+          switchTheme={switchMode}
+        />
+      );
+    };
diff --git a/src/core/hooks.tsx b/src/core/hooks.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useMemo } from "react";
 import { OsmiContext } from "./context";
 import { applyHelper } from "./apply";
 import { colorHelper } from "./color";
@@ -11,25 +11,28 @@ export const useStyles = (): ApplyInstance => {
     throw new Error("You must wrap your components in a OsmiProvider.");
   }
 
-  const apply = useCallback(
-    <T extends NamedStyles<T> | NamedStyles<any>>(
-      ...args: (boolean | string | undefined)[]
-    ) => {
-      return applyHelper(...args)(themeContext);
-    },
+  const apply = useMemo(
+    () =>
+      <T extends NamedStyles<T> | NamedStyles<any>>(
+        ...args: (boolean | string | undefined)[]
+      ) =>
+        applyHelper(...args)(themeContext),
     [themeContext]
   );
 
-  const colors = useCallback(
-    (...args: (string | boolean | undefined)[]): string | string[] => {
-      if (args.length === 1) {
-        return colorHelper(args[0])(themeContext);
-      } else if (args.length === 2) {
-        return args.map((syntax) => colorHelper(syntax)(themeContext));
-      } else {
-        throw Error("Invalid color syntax");
-      }
-    },
+  const colors = useMemo(
+    () =>
+      (...args: (string | boolean | undefined)[]): string | string[] => {
+        if (args.length === 1) {
+          return colorHelper(args[0] as string)(themeContext);
+        } else if (args.length === 2) {
+          return args.map((syntax) =>
+            colorHelper(syntax as string)(themeContext)
+          );
+        } else {
+          throw Error("Invalid color syntax");
+        }
+      },
     [themeContext]
   );