Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: optimize core module osmicsx #73

Merged
merged 1 commit into from
Oct 29, 2023
Merged

feat: optimize core module osmicsx #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 37 additions & 80 deletions src/core/apply.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,90 +5,47 @@ export const applyHelper =
<T extends NamedStyles<T> | NamedStyles<any>>(
...args: (boolean | string | undefined)[]
) =>
(themeContext: OsmiContextInstance | null) => {
(themeContext: OsmiContextInstance | null): any[] => {
const outputStyles: object[] = [];

// Get syntax from each args
for (let i = 0; i < args.length; i++) {
if (args[i] !== false && args[i] !== undefined) {
// Init instance
const instanceStyle = new Instance(themeContext?.theme);

// Get syntax list from each args
const argStyle = args[i] as string;
const syntaxList = argStyle.split(" ");
const sortedSyntax = [
...syntaxList.filter(
(item) =>
!item.includes("dark:") &&
!item.includes("notch:") &&
!item.includes("android:") &&
!item.includes("ios:")
),
...syntaxList.filter((item) => item.includes("android:")),
...syntaxList.filter((item) => item.includes("ios:")),
...syntaxList.filter((item) => item.includes("notch:")),
...syntaxList.filter((item) => item.includes("dark:")),
];

sortedSyntax.map((syntax: string) => {
// Only allow string syntax
if (typeof syntax !== "string") {
throw new Error("Invalid styling syntax.");
}

// Check for android platform only
instanceStyle.android(syntax);

// Check for ios platform only
instanceStyle.ios(syntax);

// Check if there's notch or not.
instanceStyle.notch(syntax);

if (
!syntax.includes("android:") &&
!syntax.includes("ios:") &&
!syntax.includes("notch:")
) {
// check if width & size using responsive method or not
instanceStyle.responsiveSize(syntax);

// auto generate percentage size
instanceStyle.percentSize(syntax);

// auto generate fixed width size
instanceStyle.fixedWidthSize(syntax);

// auto generate fixed width size
instanceStyle.fixedHeightSize(syntax);

// auto generate transform position
instanceStyle.transformTranslate(syntax);

// auto generate transform scale
instanceStyle.transformScale(syntax);

// auto generate transform skew
instanceStyle.transformSkew(syntax);

// auto generate transform rotate
instanceStyle.transformRotate(syntax);

// Check if there's coloring opacity
instanceStyle.colorOpacity(syntax);

// Check if there's any dark theme
instanceStyle.darkTheme(syntax, themeContext?.mode ?? "system");

// Generate from pre-defined styles
instanceStyle.predefinedStyles(syntax);
}
});

outputStyles.push(instanceStyle.getOutputStyle());
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
const instanceStyle = new Instance(themeContext?.theme);

// 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);
});

// 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:)/, ""));
}
});

outputStyles.push(instanceStyle.getOutputStyle());
}
}
} catch (error: unknown) {
if (error instanceof Error) {
console.error(`Error in applyHelper: ${error.message}`);
} else {
console.error(`An unknown error occurred in applyHelper`);
}
}

return outputStyles as any[];
};

82 changes: 27 additions & 55 deletions src/core/color.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,41 @@
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 {
throw Error("Invalid color syntax");
}
};

export const colorHelper =
(syntax: string | boolean) => (themeContext: OsmiContextInstance | null) => {
(syntax: string | boolean | undefined) => (themeContext: OsmiContextInstance | null) => {
const splitSyntax = (syntax as string).split(" ");
let color = "";

if (splitSyntax.length === 1) {
const splitOpacity = splitSyntax[0].split("/");
const getPredefinedColor = themeContext?.theme[splitOpacity[0]];

if (typeof getPredefinedColor === "string") {
color = getPredefinedColor.replace(
"--osmi-opacity",
splitOpacity[1] !== undefined
? (Number(splitOpacity[1]) / 100).toFixed(2)
: "1"
);

return color;
} else {
throw Error("Invalid color syntax");
}
} else if (
splitSyntax.length === 2 &&
splitSyntax.some((syntax) => syntax.includes("dark:"))
) {
const findDefaultColor =
splitSyntax.find((syntax) => !syntax.includes("dark:")) ?? "";
const findDarkColor =
splitSyntax.find((syntax) => syntax.includes("dark:")) ?? "";
const defaultColor = findDefaultColor?.split("/");
const darkColor = findDarkColor?.replace("dark:", "")?.split("/");
const [colorKey, opacity] = splitSyntax[0].split("/");
return getColor(themeContext, colorKey, opacity);
}

if (isDark(findDarkColor, themeContext?.mode ?? "")) {
const getPredefinedColor = themeContext?.theme[darkColor[0]];
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:", "") ?? "";

if (typeof getPredefinedColor === "string") {
color = getPredefinedColor.replace(
"--osmi-opacity",
darkColor[1] !== undefined
? (Number(darkColor[1]) / 100).toFixed(2)
: "1"
);
const [defaultColor, defaultOpacity] = defaultSyntax.split("/");
const [darkColor, darkOpacity] = darkSyntax.split("/");

return color;
} else {
throw Error("Invalid color syntax");
}
if (isDark(darkSyntax, themeContext?.mode ?? "")) {
return getColor(themeContext, darkColor, darkOpacity);
} else {
const getPredefinedColor = themeContext?.theme[defaultColor[0]];

if (typeof getPredefinedColor === "string") {
color = getPredefinedColor.replace(
"--osmi-opacity",
defaultColor[1] !== undefined
? (Number(defaultColor[1]) / 100).toFixed(2)
: "1"
);
return color;
} else {
throw Error("Invalid color syntax");
}
return getColor(themeContext, defaultColor, defaultOpacity);
}
} else {
throw Error("Invalid color syntax");
}

throw Error("Invalid color syntax");
};
2 changes: 1 addition & 1 deletion src/core/hoc.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const withStyles =
}

const apply = useCallback(
<T extends NamedStyles<T> | NamedStyles<any>>(...args: string[]) => {
<T extends NamedStyles<T> | NamedStyles<any>>(...args: (string | boolean | undefined)[]) => {
return applyHelper(...args)(themeContext);
},
[themeContext]
Expand Down
4 changes: 2 additions & 2 deletions src/core/hooks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ export const useStyles = (): ApplyInstance => {

const apply = useCallback(
<T extends NamedStyles<T> | NamedStyles<any>>(
...args: (boolean | string)[]
...args: (boolean | string | undefined)[]
) => {
return applyHelper(...args)(themeContext);
},
[themeContext]
);

const colors = useCallback(
(...args: string[]): string | string[] => {
(...args: (string | boolean | undefined)[]): string | string[] => {
if (args.length === 1) {
return colorHelper(args[0])(themeContext);
} else if (args.length === 2) {
Expand Down
Loading
Loading