@steroidsjs/core 3.0.0-beta.55 → 3.0.0-beta.56

package/hooks/index.d.ts

@@ -17,5 +17,5 @@ import useScreen from './useScreen';
 import useSelector from './useSelector';
 import useSsr from './useSsr';
 import useUniqueId from './useUniqueId';
-import { useTheme } from './useTheme';
+import useTheme from './useTheme';
 export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, useTheme, };

package/hooks/index.js

@@ -42,5 +42,5 @@ var useSsr_1 = __importDefault(require("./useSsr"));
 exports.useSsr = useSsr_1["default"];
 var useUniqueId_1 = __importDefault(require("./useUniqueId"));
 exports.useUniqueId = useUniqueId_1["default"];
-var useTheme_1 = require("./useTheme");
-exports.useTheme = useTheme_1.useTheme;
+var useTheme_1 = __importDefault(require("./useTheme"));
+exports.useTheme = useTheme_1["default"];

package/hooks/useApplication.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { IThemeProviderProps } from '../providers/ThemeProvider';
 import ClientStorageComponent from '../components/ClientStorageComponent';
 import HtmlComponent from '../components/HtmlComponent';
 import StoreComponent from '../components/StoreComponent';
@@ -28,6 +29,7 @@ export interface IApplicationHookConfig {
     layoutView?: () => CustomView;
     layoutProps?: Record<string, unknown>;
     screen?: Omit<IScreenProviderProps, 'children'>;
+    theme?: Omit<IThemeProviderProps, 'children'>;
     routerProps?: IRouterProps;
     /**
      * These fetch configurations will be used to preload and store for no matter what route matched in case of SSR

package/hooks/useApplication.js

@@ -53,6 +53,7 @@ var React = __importStar(require("react"));
 var react_redux_1 = require("react-redux");
 var merge_1 = __importDefault(require("lodash-es/merge"));
 var react_1 = require("react");
+var ThemeProvider_1 = __importDefault(require("../providers/ThemeProvider"));
 var ClientStorageComponent_1 = __importDefault(require("../components/ClientStorageComponent"));
 var HtmlComponent_1 = __importDefault(require("../components/HtmlComponent"));
 var StoreComponent_1 = __importDefault(require("../components/StoreComponent"));
@@ -131,6 +132,9 @@ function useApplication(config) {
         if (config.screen) {
             content = (React.createElement(ScreenProvider_1["default"], __assign({}, config.screen), content));
         }
+        if (config.theme) {
+            content = (React.createElement(ThemeProvider_1["default"], __assign({}, config.theme), content));
+        }
         if (!(useGlobal || process.env.IS_SSR)) {
             content = (React.createElement(ComponentsProvider_1["default"], { components: components }, content));
         }

package/hooks/useTheme.d.ts

@@ -1,8 +1,2 @@
-import React from 'react';
-export declare const LIGHT_THEME = "light";
-export declare const DARK_THEME = "dark";
-export declare const useTheme: (themes?: string[], themeStorageKey?: string) => {
-    theme: any;
-    setTheme: React.Dispatch<any>;
-    toggleTheme: () => void;
-};
+import { ITheme } from '../providers/ThemeProvider';
+export default function useTheme(): ITheme;

package/hooks/useTheme.js

@@ -1,40 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 exports.__esModule = true;
-exports.useTheme = exports.DARK_THEME = exports.LIGHT_THEME = void 0;
-var react_1 = __importDefault(require("react"));
-var useComponents_1 = __importDefault(require("./useComponents"));
-exports.LIGHT_THEME = 'light';
-exports.DARK_THEME = 'dark';
-var DEFAULT_THEMES = [
-    exports.LIGHT_THEME,
-    exports.DARK_THEME,
-];
-var DEFAULT_THEME_STORAGE_KEY = 'theme';
-var useTheme = function (themes, themeStorageKey) {
-    if (themes === void 0) { themes = DEFAULT_THEMES; }
-    if (themeStorageKey === void 0) { themeStorageKey = DEFAULT_THEME_STORAGE_KEY; }
-    var clientStorage = (0, useComponents_1["default"])().clientStorage;
-    var _a = react_1["default"].useState(clientStorage.get(themeStorageKey) || themes[0]), theme = _a[0], setTheme = _a[1];
-    var toggleTheme = react_1["default"].useCallback(function () {
-        var themesExpectedCount = 2;
-        if (themes.length !== themesExpectedCount) {
-            throw new Error('toggleTheme callback can only be used if the number of themes is two');
-        }
-        var lightTheme = themes[0];
-        var darkTheme = themes[1];
-        setTheme(theme === lightTheme ? darkTheme : lightTheme);
-    }, [themes, theme]);
-    react_1["default"].useEffect(function () {
-        document.querySelector('html').setAttribute('data-theme', theme);
-        clientStorage.set(themeStorageKey, theme);
-    }, [theme, clientStorage, themeStorageKey]);
-    return {
-        theme: theme,
-        setTheme: setTheme,
-        toggleTheme: toggleTheme
-    };
-};
-exports.useTheme = useTheme;
+var react_1 = require("react");
+var ThemeProvider_1 = require("../providers/ThemeProvider");
+function useTheme() {
+    return (0, react_1.useContext)(ThemeProvider_1.ThemeContext);
+}
+exports["default"] = useTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.55",
+ "version": "3.0.0-beta.56",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {

package/providers/ThemeProvider.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface ITheme {
+    theme: string;
+    toggleTheme: VoidFunction;
+    setTheme: React.Dispatch<any>;
+}
+export interface IThemeProviderProps extends React.PropsWithChildren<any> {
+    themes?: string[];
+    themeStorageKey?: string;
+}
+export declare const LIGHT_THEME = "light";
+export declare const DARK_THEME = "dark";
+export declare const ThemeContext: React.Context<ITheme>;
+export default function ThemeProvider(props: IThemeProviderProps): JSX.Element;

package/providers/ThemeProvider.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+exports.__esModule = true;
+exports.ThemeContext = exports.DARK_THEME = exports.LIGHT_THEME = void 0;
+var React = __importStar(require("react"));
+var hooks_1 = require("../hooks");
+exports.LIGHT_THEME = 'light';
+exports.DARK_THEME = 'dark';
+var DEFAULT_THEMES = [
+    exports.LIGHT_THEME,
+    exports.DARK_THEME,
+];
+var DEFAULT_THEME_STORAGE_KEY = 'theme';
+exports.ThemeContext = React.createContext({});
+function ThemeProvider(props) {
+    var themes = props.themes || DEFAULT_THEMES;
+    var themeStorageKey = props.themeStorageKey || DEFAULT_THEME_STORAGE_KEY;
+    var clientStorage = (0, hooks_1.useComponents)().clientStorage;
+    var _a = React.useState(clientStorage.get(themeStorageKey) || themes[0]), theme = _a[0], setTheme = _a[1];
+    var toggleTheme = React.useCallback(function () {
+        var themesExpectedCount = 2;
+        if (themes.length !== themesExpectedCount) {
+            throw new Error('toggleTheme callback can only be used if the number of themes is two');
+        }
+        var lightTheme = themes[0];
+        var darkTheme = themes[1];
+        setTheme(theme === lightTheme ? darkTheme : lightTheme);
+    }, [theme, themes]);
+    React.useEffect(function () {
+        document.querySelector('html').setAttribute('data-theme', theme);
+        clientStorage.set(themeStorageKey, theme);
+    }, [theme, clientStorage, themeStorageKey]);
+    var value = React.useMemo(function () { return ({
+        theme: theme,
+        toggleTheme: toggleTheme,
+        setTheme: setTheme
+    }); }, [theme, toggleTheme]);
+    return (React.createElement(exports.ThemeContext.Provider, { value: value }, props.children));
+}
+exports["default"] = ThemeProvider;