FEAT: improve useTheming hook

Author: Censkh

.npmrc

@@ -0,0 +1,2 @@
+# don't install with ^ in version string when using `npm install`
+save-exact=true

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.6.0
+
+- change `useTheming` hook, now gives theme values based on a supplied schema
+
 ## 0.5.11
 
 - properly cascade colors to TextInput and clean-up options to allow custom components to do the same

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "style-composer",
-  "version": "0.5.10",
+  "version": "0.6.0-alpha1",
   "main": "./cjs/index.js",
   "types": "./esm/index.d.ts",
   "module": "./esm/index.js",
@@ -23,16 +23,16 @@
     "build:watch": "npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.5.0",
-    "@typescript-eslint/parser": "^4.5.0",
-    "eslint": "^7.11.0",
-    "npm-run-all": "^4.1.5",
-    "rimraf": "^3.0.2",
-    "typescript": "^4.0.3",
-    "@types/node": "^14.14.0",
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-native": "^0.63.33"
+    "@typescript-eslint/eslint-plugin": "4.5.0",
+    "@typescript-eslint/parser": "4.5.0",
+    "eslint": "7.11.0",
+    "npm-run-all": "4.1.5",
+    "rimraf": "3.0.2",
+    "typescript": "4.0.3",
+    "@types/node": "14.14.0",
+    "@types/react": "16.9.56",
+    "@types/react-dom": "16.9.8",
+    "@types/react-native": "0.63.2"
   },
   "peerDependencies": {
     "react": "^16.8.0",

package.json

@@ -37,11 +37,12 @@ import {
   isFontLoaded,
   isStyleComposerFont,
   removeFontLoadListener,
-}                                                                                      from "./font/FontFamily";
-import child, {ChildQuery}                                                             from "./selector/ChildSelector";
-import {setupFontPreProcessor}                                                         from "./font/FontPreProcessor";
-import StyleEnvironment                                                                from "./StyleEnvironment";
-import {fixStylePropTypes}                                                             from "./StyleSheetPropTypeFixer";
+}                              from "./font/FontFamily";
+import child, {ChildQuery}     from "./selector/ChildSelector";
+import {setupFontPreProcessor} from "./font/FontPreProcessor";
+import StyleEnvironment        from "./StyleEnvironment";
+import {fixStylePropTypes} from "./StyleSheetPropTypeFixer";
+import {ThemingContext}    from "./theme/Theming";
 
 export const useForceUpdate = (): [number, () => void] => {
   const [state, setState] = useState(0);
@@ -233,7 +234,7 @@ export const useStylingInternals = (classes: Classes | undefined, session: Styli
   }, [classes]);
 
   const [forceUpdateKey, forceUpdate] = useSelectorsEffect(uidRef.current, classArray, session, classId);
-  const theming                       = useTheming();
+  const theming                       = useContext(ThemingContext);
 
   useEffect(() => {
     if (hasDynamicUnit) {

src/StyleHooks.ts

@@ -21,16 +21,16 @@ export const finishThemeSession = (): boolean => {
   return themedSession.called;
 };
 
-let currentTheme: any = {};
-
 export type Theme = Record<string, string | number>;
 
-interface ThemeContextState {
-  theme: Theme;
+export interface ThemingContextState<T extends Theme> {
+  theme: T;
   key: string | null;
 }
 
-const ThemeContext = React.createContext<ThemeContextState>({
+let currentTheme: any = {};
+
+export const ThemingContext = React.createContext<ThemingContextState<any>>({
   theme: currentTheme,
   key  : null,
 });
@@ -43,11 +43,12 @@ export interface ThemeProviderProps<T extends Theme> {
 
 export function ThemeProvider<T extends Theme>(props: ThemeProviderProps<T>): JSX.Element {
   const {children, value} = props;
-  const currentValue      = useMemo<ThemeContextState>(() => ({
+  const currentValue      = useMemo<ThemingContextState<T>>(() => ({
     theme: value as any,
     key  : Date.now().toString(),
   }), [value]);
-  return React.createElement(ThemeContext.Provider, {value: currentValue}, children);
+  currentTheme = currentValue.theme;
+  return React.createElement(ThemingContext.Provider, {value: currentValue}, children);
 }
 
 export interface ThemeProperty<T = any> {
@@ -58,12 +59,6 @@ export interface ThemeProperty<T = any> {
   toString: () => string;
 }
 
-export const useTheming = (): ThemeContextState => {
-  const state  = useContext(ThemeContext);
-  currentTheme = state.theme;
-  return state;
-};
-
 export type ThemeFor<T extends ThemeSchema<any>> = T extends ThemeSchema<infer P> ? Partial<P> : never;
 
 export type ThemeSchema<T extends Theme> = {

src/theme/Theming.ts

@@ -0,0 +1,12 @@
+import {useContext, useMemo}                                     from "react";
+import {Theme, ThemeSchema, ThemingContext, ThemingContextState} from "./Theming";
+
+export const useTheming = <T extends Theme>(schema: ThemeSchema<T>): ThemingContextState<T> => {
+  const themingContext = useContext(ThemingContext);
+
+  const defaultValues = useMemo(() => Object.keys(schema).reduce((defaultValues, key) => Object.assign(defaultValues, {[key]: schema[key].defaultValue}), {}), []);
+
+  const theme = useMemo(() => Object.assign({}, defaultValues, themingContext.theme), []);
+
+  return {theme, key: themingContext.key};
+};

src/theme/ThemingHooks.ts

@@ -7,5 +7,5 @@ export {
   ThemeFor,
   ThemeProvider,
   ThemeProviderProps,
-  useTheming,
 } from "./Theming";
+export * from "./ThemingHooks";