Context

src/config-context.interface.ts

@@ -0,0 +1,34 @@
+export type IBaseConfig<TConfigValueType> = { value: TConfigValueType };
+
+type IConfigWithFilters<TConfigValueType> = (
+  | { browser: string }
+  | { platform: string }
+  | { os: string }
+  | { engine: string }
+) &
+  IBaseConfig<TConfigValueType>;
+
+type IConfigFilters<TConfigFilter> = [
+  IBaseConfig<TConfigFilter>,
+  ...IConfigWithFilters<TConfigFilter>[]
+];
+
+/**
+ * A strongly typed `userConfig` object required to create the `IConfig` object.
+ */
+export type IUserConfig<TConfig> = {
+  [K in keyof TConfig]: IConfigFilters<TConfig[K]>;
+};
+
+/**
+ * A type-safe object of the config parameters and corresponding values returned by the `useConfig` hook.
+ */
+export type IConfig<TConfig> = {
+  [K in keyof TConfig]: IBaseConfig<TConfig[K]>["value"];
+};
+
+/**
+ * A dynamic type to infer the filters of a specific config parameter.
+ */
+export type IDynamicConfigFilters<TUserConfig> =
+  IUserConfig<TUserConfig>[Extract<keyof TUserConfig, string>];

src/config-context.tsx

@@ -0,0 +1,28 @@
+import type {
+  IConfig,
+  IDynamicConfigFilters,
+  IUserConfig,
+} from "./config-context.interface";
+
+// TODO: move to utils
+const getBaseConfig = <TUserConfig,>(
+  configFilters: IDynamicConfigFilters<TUserConfig>
+) =>
+  configFilters.find(
+    (configValue) =>
+      Object.keys(configValue).length === 1 && "value" in configValue
+  )!;
+
+export function createConfig<TUserConfig>(
+  userConfig: IUserConfig<TUserConfig>
+) {
+  console.log("createConfig");
+  const configValues: IConfig<TUserConfig> = {} as IConfig<TUserConfig>;
+  for (const key in userConfig) {
+    const configFilters = userConfig[key];
+    const baseConfig = getBaseConfig(configFilters);
+    configValues[key] = baseConfig.value;
+  }
+
+  return () => configValues;
+}

src/config.ts

@@ -0,0 +1,19 @@
+import { createConfig } from "./config-context";
+import { Browser } from "./enums";
+
+export const useConfig = createConfig({
+  showButton: [
+    {
+      value: true,
+    },
+    {
+      browser: Browser.Chrome,
+      value: false,
+    },
+  ],
+  enableModernUi: [
+    {
+      value: 33,
+    },
+  ],
+});

src/index.tsx

@@ -1,8 +1,41 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { useConfig } from "./config";
+
+const App = () => (
+  <div>
+    <Component1 />
+    <br />
+    <Component2 />
+    <br />
+    <Component3 />
+  </div>
+);
+
+const Component1 = () => {
+  const _config = useConfig();
+  console.log("<Component1 />", _config);
+  return <span>Component 1</span>;
+};
+
+const Component2 = () => {
+  const _config = useConfig();
+  console.log("<Component2 />", _config);
+  return <span>Component 2</span>;
+};
+
+const Component3 = () => {
+  const [counter, setCounter] = React.useState(0);
+
+  const _config = useConfig();
+  const onClick = () => setCounter(counter + 1);
+
+  console.log("<Component3 />", _config);
+  return <button onClick={onClick}>Component 3</button>;
+};
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 
-root.render(<div>hi</div>);
+root.render(<App />);