@tamagui/create-context 1.0.1-rc.5 → 1.0.1-rc.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/create-context.js +27 -9
- package/dist/cjs/create-context.js.map +2 -2
- package/dist/esm/create-context.js +27 -9
- package/dist/esm/create-context.js.map +2 -2
- package/dist/jsx/create-context.js +27 -9
- package/dist/jsx/create-context.js.map +2 -2
- package/package.json +4 -4
- package/src/create-context.tsx +42 -15
|
@@ -34,7 +34,10 @@ function createContext(rootComponentName, defaultContext) {
|
|
|
34
34
|
const Context = React.createContext(defaultContext);
|
|
35
35
|
function Provider(props) {
|
|
36
36
|
const { children, ...context } = props;
|
|
37
|
-
const value = React.useMemo(
|
|
37
|
+
const value = React.useMemo(
|
|
38
|
+
() => context,
|
|
39
|
+
Object.values(context)
|
|
40
|
+
);
|
|
38
41
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Context.Provider, {
|
|
39
42
|
value,
|
|
40
43
|
children
|
|
@@ -46,21 +49,28 @@ function createContext(rootComponentName, defaultContext) {
|
|
|
46
49
|
return context;
|
|
47
50
|
if (defaultContext !== void 0)
|
|
48
51
|
return defaultContext;
|
|
49
|
-
throw new Error(
|
|
52
|
+
throw new Error(
|
|
53
|
+
`\`${consumerName}\` must be used within \`${rootComponentName}\``
|
|
54
|
+
);
|
|
50
55
|
}
|
|
51
|
-
Provider.displayName = rootComponentName
|
|
56
|
+
Provider.displayName = `${rootComponentName}Provider`;
|
|
52
57
|
return [Provider, useContext];
|
|
53
58
|
}
|
|
54
59
|
function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
55
60
|
let defaultContexts = [];
|
|
56
61
|
function createContext2(rootComponentName, defaultContext) {
|
|
57
|
-
const BaseContext = React.createContext(
|
|
62
|
+
const BaseContext = React.createContext(
|
|
63
|
+
defaultContext
|
|
64
|
+
);
|
|
58
65
|
const index = defaultContexts.length;
|
|
59
66
|
defaultContexts = [...defaultContexts, defaultContext];
|
|
60
67
|
function Provider(props) {
|
|
61
68
|
const { scope, children, ...context } = props;
|
|
62
69
|
const Context = (scope == null ? void 0 : scope[scopeName][index]) || BaseContext;
|
|
63
|
-
const value = React.useMemo(
|
|
70
|
+
const value = React.useMemo(
|
|
71
|
+
() => context,
|
|
72
|
+
Object.values(context)
|
|
73
|
+
);
|
|
64
74
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Context.Provider, {
|
|
65
75
|
value,
|
|
66
76
|
children
|
|
@@ -73,9 +83,11 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
|
73
83
|
return context;
|
|
74
84
|
if (defaultContext !== void 0)
|
|
75
85
|
return defaultContext;
|
|
76
|
-
throw new Error(
|
|
86
|
+
throw new Error(
|
|
87
|
+
`\`${consumerName}\` must be used within \`${rootComponentName}\``
|
|
88
|
+
);
|
|
77
89
|
}
|
|
78
|
-
Provider.displayName = rootComponentName
|
|
90
|
+
Provider.displayName = `${rootComponentName}Provider`;
|
|
79
91
|
return [Provider, useContext];
|
|
80
92
|
}
|
|
81
93
|
const createScope = () => {
|
|
@@ -91,7 +103,10 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
|
91
103
|
};
|
|
92
104
|
};
|
|
93
105
|
createScope.scopeName = scopeName;
|
|
94
|
-
return [
|
|
106
|
+
return [
|
|
107
|
+
createContext2,
|
|
108
|
+
composeContextScopes(createScope, ...createContextScopeDeps)
|
|
109
|
+
];
|
|
95
110
|
}
|
|
96
111
|
function composeContextScopes(...scopes) {
|
|
97
112
|
const baseScope = scopes[0];
|
|
@@ -108,7 +123,10 @@ function composeContextScopes(...scopes) {
|
|
|
108
123
|
const currentScope = scopeProps[`__scope${scopeName}`];
|
|
109
124
|
return { ...nextScopes2, ...currentScope };
|
|
110
125
|
}, {});
|
|
111
|
-
return React.useMemo(
|
|
126
|
+
return React.useMemo(
|
|
127
|
+
() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }),
|
|
128
|
+
[nextScopes]
|
|
129
|
+
);
|
|
112
130
|
};
|
|
113
131
|
};
|
|
114
132
|
createScope.scopeName = baseScope.scopeName;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/create-context.tsx"],
|
|
4
|
-
"sourcesContent": ["// from radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx\n\nimport * as React from 'react'\n\nexport type ScopedProps<P, K extends string> = P & { [Key in `__scope${K}`]?: Scope }\n\nexport function createContext<ContextValueType extends object | null>(\n rootComponentName: string,\n defaultContext?: ContextValueType
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["// from radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx\n\nimport * as React from 'react'\n\nexport type ScopedProps<P, K extends string> = P & { [Key in `__scope${K}`]?: Scope }\n\nexport function createContext<ContextValueType extends object | null>(\n rootComponentName: string,\n defaultContext?: ContextValueType,\n) {\n const Context = React.createContext<ContextValueType | undefined>(defaultContext)\n\n function Provider(props: ContextValueType & { children: React.ReactNode }) {\n const { children, ...context } = props\n // Only re-memoize when prop values change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const value = React.useMemo(\n () => context,\n Object.values(context),\n ) as ContextValueType\n return <Context.Provider value={value}>{children}</Context.Provider>\n }\n\n function useContext(consumerName: string) {\n const context = React.useContext(Context)\n if (context) return context\n if (defaultContext !== undefined) return defaultContext\n // if a defaultContext wasn't specified, it's a required context.\n throw new Error(\n `\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``,\n )\n }\n\n Provider.displayName = `${rootComponentName}Provider`\n return [Provider, useContext] as const\n}\n\n/* -------------------------------------------------------------------------------------------------\n * createContextScope\n * -----------------------------------------------------------------------------------------------*/\n\ntype ScopeHook = (scope: Scope) => { [__scopeProp: string]: Scope }\n\nexport type Scope<C = any> = { [scopeName: string]: React.Context<C>[] } | undefined\n\nexport interface CreateScope {\n scopeName: string\n (): ScopeHook\n}\n\nexport function createContextScope(\n scopeName: string,\n createContextScopeDeps: CreateScope[] = [],\n) {\n let defaultContexts: any[] = []\n\n /* -----------------------------------------------------------------------------------------------\n * createContext\n * ---------------------------------------------------------------------------------------------*/\n\n function createContext<ContextValueType extends object | null>(\n rootComponentName: string,\n defaultContext?: ContextValueType,\n ) {\n const BaseContext = React.createContext<ContextValueType | undefined>(\n defaultContext,\n )\n const index = defaultContexts.length\n defaultContexts = [...defaultContexts, defaultContext]\n\n function Provider(\n props: ContextValueType & {\n scope: Scope<ContextValueType>\n children: React.ReactNode\n },\n ) {\n const { scope, children, ...context } = props\n const Context = scope?.[scopeName][index] || BaseContext\n // Only re-memoize when prop values change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const value = React.useMemo(\n () => context,\n Object.values(context),\n ) as ContextValueType\n return <Context.Provider value={value}>{children}</Context.Provider>\n }\n\n function useContext(\n consumerName: string,\n scope: Scope<ContextValueType | undefined>,\n ) {\n const Context = scope?.[scopeName][index] || BaseContext\n const context = React.useContext(Context)\n if (context) return context\n if (defaultContext !== undefined) return defaultContext\n // if a defaultContext wasn't specified, it's a required context.\n throw new Error(\n `\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``,\n )\n }\n\n Provider.displayName = `${rootComponentName}Provider`\n return [Provider, useContext] as const\n }\n\n /* -----------------------------------------------------------------------------------------------\n * createScope\n * ---------------------------------------------------------------------------------------------*/\n\n const createScope: CreateScope = () => {\n const scopeContexts = defaultContexts.map((defaultContext) => {\n return React.createContext(defaultContext)\n })\n return function useScope(scope: Scope) {\n const contexts = scope?.[scopeName] || scopeContexts\n return React.useMemo(\n () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),\n [scope, contexts],\n )\n }\n }\n\n createScope.scopeName = scopeName\n return [\n createContext,\n composeContextScopes(createScope, ...createContextScopeDeps),\n ] as const\n}\n\n/* -------------------------------------------------------------------------------------------------\n * composeContextScopes\n * -----------------------------------------------------------------------------------------------*/\n\nfunction composeContextScopes(...scopes: CreateScope[]) {\n const baseScope = scopes[0]\n if (scopes.length === 1) return baseScope\n\n const createScope: CreateScope = () => {\n const scopeHooks = scopes.map((createScope) => ({\n useScope: createScope(),\n scopeName: createScope.scopeName,\n }))\n\n return function useComposedScopes(overrideScopes) {\n const nextScopes = scopeHooks.reduce((nextScopes, { useScope, scopeName }) => {\n // We are calling a hook inside a callback which React warns against to avoid inconsistent\n // renders, however, scoping doesn't have render side effects so we ignore the rule.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const scopeProps = useScope(overrideScopes)\n const currentScope = scopeProps[`__scope${scopeName}`]\n return { ...nextScopes, ...currentScope }\n }, {})\n\n return React.useMemo(\n () => ({ [`__scope${baseScope.scopeName}`]: nextScopes }),\n [nextScopes],\n )\n }\n }\n\n createScope.scopeName = baseScope.scopeName\n return createScope\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBW;AAlBX,YAAuB;AAIhB,SAAS,cACd,mBACA,gBACA;AACA,QAAM,UAAU,MAAM,cAA4C,cAAc;AAEhF,WAAS,SAAS,OAAyD;AACzE,UAAM,EAAE,aAAa,QAAQ,IAAI;AAGjC,UAAM,QAAQ,MAAM;AAAA,MAClB,MAAM;AAAA,MACN,OAAO,OAAO,OAAO;AAAA,IACvB;AACA,WAAO,4CAAC,QAAQ,UAAR;AAAA,MAAiB;AAAA,MAAe;AAAA,KAAS;AAAA,EACnD;AAEA,WAAS,WAAW,cAAsB;AACxC,UAAM,UAAU,MAAM,WAAW,OAAO;AACxC,QAAI;AAAS,aAAO;AACpB,QAAI,mBAAmB;AAAW,aAAO;AAEzC,UAAM,IAAI;AAAA,MACR,KAAK,wCAAwC;AAAA,IAC/C;AAAA,EACF;AAEA,WAAS,cAAc,GAAG;AAC1B,SAAO,CAAC,UAAU,UAAU;AAC9B;AAeO,SAAS,mBACd,WACA,yBAAwC,CAAC,GACzC;AACA,MAAI,kBAAyB,CAAC;AAM9B,WAASA,eACP,mBACA,gBACA;AACA,UAAM,cAAc,MAAM;AAAA,MACxB;AAAA,IACF;AACA,UAAM,QAAQ,gBAAgB;AAC9B,sBAAkB,CAAC,GAAG,iBAAiB,cAAc;AAErD,aAAS,SACP,OAIA;AACA,YAAM,EAAE,OAAO,aAAa,QAAQ,IAAI;AACxC,YAAM,WAAU,+BAAQ,WAAW,WAAU;AAG7C,YAAM,QAAQ,MAAM;AAAA,QAClB,MAAM;AAAA,QACN,OAAO,OAAO,OAAO;AAAA,MACvB;AACA,aAAO,4CAAC,QAAQ,UAAR;AAAA,QAAiB;AAAA,QAAe;AAAA,OAAS;AAAA,IACnD;AAEA,aAAS,WACP,cACA,OACA;AACA,YAAM,WAAU,+BAAQ,WAAW,WAAU;AAC7C,YAAM,UAAU,MAAM,WAAW,OAAO;AACxC,UAAI;AAAS,eAAO;AACpB,UAAI,mBAAmB;AAAW,eAAO;AAEzC,YAAM,IAAI;AAAA,QACR,KAAK,wCAAwC;AAAA,MAC/C;AAAA,IACF;AAEA,aAAS,cAAc,GAAG;AAC1B,WAAO,CAAC,UAAU,UAAU;AAAA,EAC9B;AAMA,QAAM,cAA2B,MAAM;AACrC,UAAM,gBAAgB,gBAAgB,IAAI,CAAC,mBAAmB;AAC5D,aAAO,MAAM,cAAc,cAAc;AAAA,IAC3C,CAAC;AACD,WAAO,SAAS,SAAS,OAAc;AACrC,YAAM,YAAW,+BAAQ,eAAc;AACvC,aAAO,MAAM;AAAA,QACX,OAAO,EAAE,CAAC,UAAU,cAAc,EAAE,GAAG,OAAO,CAAC,YAAY,SAAS,EAAE;AAAA,QACtE,CAAC,OAAO,QAAQ;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAEA,cAAY,YAAY;AACxB,SAAO;AAAA,IACLA;AAAA,IACA,qBAAqB,aAAa,GAAG,sBAAsB;AAAA,EAC7D;AACF;AAMA,SAAS,wBAAwB,QAAuB;AACtD,QAAM,YAAY,OAAO;AACzB,MAAI,OAAO,WAAW;AAAG,WAAO;AAEhC,QAAM,cAA2B,MAAM;AACrC,UAAM,aAAa,OAAO,IAAI,CAACC,kBAAiB;AAAA,MAC9C,UAAUA,aAAY;AAAA,MACtB,WAAWA,aAAY;AAAA,IACzB,EAAE;AAEF,WAAO,SAAS,kBAAkB,gBAAgB;AAChD,YAAM,aAAa,WAAW,OAAO,CAACC,aAAY,EAAE,UAAU,UAAU,MAAM;AAI5E,cAAM,aAAa,SAAS,cAAc;AAC1C,cAAM,eAAe,WAAW,UAAU;AAC1C,eAAO,EAAE,GAAGA,aAAY,GAAG,aAAa;AAAA,MAC1C,GAAG,CAAC,CAAC;AAEL,aAAO,MAAM;AAAA,QACX,OAAO,EAAE,CAAC,UAAU,UAAU,cAAc,WAAW;AAAA,QACvD,CAAC,UAAU;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAEA,cAAY,YAAY,UAAU;AAClC,SAAO;AACT;",
|
|
6
6
|
"names": ["createContext", "createScope", "nextScopes"]
|
|
7
7
|
}
|
|
@@ -4,7 +4,10 @@ function createContext(rootComponentName, defaultContext) {
|
|
|
4
4
|
const Context = React.createContext(defaultContext);
|
|
5
5
|
function Provider(props) {
|
|
6
6
|
const { children, ...context } = props;
|
|
7
|
-
const value = React.useMemo(
|
|
7
|
+
const value = React.useMemo(
|
|
8
|
+
() => context,
|
|
9
|
+
Object.values(context)
|
|
10
|
+
);
|
|
8
11
|
return /* @__PURE__ */ jsx(Context.Provider, {
|
|
9
12
|
value,
|
|
10
13
|
children
|
|
@@ -16,21 +19,28 @@ function createContext(rootComponentName, defaultContext) {
|
|
|
16
19
|
return context;
|
|
17
20
|
if (defaultContext !== void 0)
|
|
18
21
|
return defaultContext;
|
|
19
|
-
throw new Error(
|
|
22
|
+
throw new Error(
|
|
23
|
+
`\`${consumerName}\` must be used within \`${rootComponentName}\``
|
|
24
|
+
);
|
|
20
25
|
}
|
|
21
|
-
Provider.displayName = rootComponentName
|
|
26
|
+
Provider.displayName = `${rootComponentName}Provider`;
|
|
22
27
|
return [Provider, useContext];
|
|
23
28
|
}
|
|
24
29
|
function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
25
30
|
let defaultContexts = [];
|
|
26
31
|
function createContext2(rootComponentName, defaultContext) {
|
|
27
|
-
const BaseContext = React.createContext(
|
|
32
|
+
const BaseContext = React.createContext(
|
|
33
|
+
defaultContext
|
|
34
|
+
);
|
|
28
35
|
const index = defaultContexts.length;
|
|
29
36
|
defaultContexts = [...defaultContexts, defaultContext];
|
|
30
37
|
function Provider(props) {
|
|
31
38
|
const { scope, children, ...context } = props;
|
|
32
39
|
const Context = (scope == null ? void 0 : scope[scopeName][index]) || BaseContext;
|
|
33
|
-
const value = React.useMemo(
|
|
40
|
+
const value = React.useMemo(
|
|
41
|
+
() => context,
|
|
42
|
+
Object.values(context)
|
|
43
|
+
);
|
|
34
44
|
return /* @__PURE__ */ jsx(Context.Provider, {
|
|
35
45
|
value,
|
|
36
46
|
children
|
|
@@ -43,9 +53,11 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
|
43
53
|
return context;
|
|
44
54
|
if (defaultContext !== void 0)
|
|
45
55
|
return defaultContext;
|
|
46
|
-
throw new Error(
|
|
56
|
+
throw new Error(
|
|
57
|
+
`\`${consumerName}\` must be used within \`${rootComponentName}\``
|
|
58
|
+
);
|
|
47
59
|
}
|
|
48
|
-
Provider.displayName = rootComponentName
|
|
60
|
+
Provider.displayName = `${rootComponentName}Provider`;
|
|
49
61
|
return [Provider, useContext];
|
|
50
62
|
}
|
|
51
63
|
const createScope = () => {
|
|
@@ -61,7 +73,10 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
|
61
73
|
};
|
|
62
74
|
};
|
|
63
75
|
createScope.scopeName = scopeName;
|
|
64
|
-
return [
|
|
76
|
+
return [
|
|
77
|
+
createContext2,
|
|
78
|
+
composeContextScopes(createScope, ...createContextScopeDeps)
|
|
79
|
+
];
|
|
65
80
|
}
|
|
66
81
|
function composeContextScopes(...scopes) {
|
|
67
82
|
const baseScope = scopes[0];
|
|
@@ -78,7 +93,10 @@ function composeContextScopes(...scopes) {
|
|
|
78
93
|
const currentScope = scopeProps[`__scope${scopeName}`];
|
|
79
94
|
return { ...nextScopes2, ...currentScope };
|
|
80
95
|
}, {});
|
|
81
|
-
return React.useMemo(
|
|
96
|
+
return React.useMemo(
|
|
97
|
+
() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }),
|
|
98
|
+
[nextScopes]
|
|
99
|
+
);
|
|
82
100
|
};
|
|
83
101
|
};
|
|
84
102
|
createScope.scopeName = baseScope.scopeName;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/create-context.tsx"],
|
|
4
|
-
"sourcesContent": ["// from radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx\n\nimport * as React from 'react'\n\nexport type ScopedProps<P, K extends string> = P & { [Key in `__scope${K}`]?: Scope }\n\nexport function createContext<ContextValueType extends object | null>(\n rootComponentName: string,\n defaultContext?: ContextValueType
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["// from radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx\n\nimport * as React from 'react'\n\nexport type ScopedProps<P, K extends string> = P & { [Key in `__scope${K}`]?: Scope }\n\nexport function createContext<ContextValueType extends object | null>(\n rootComponentName: string,\n defaultContext?: ContextValueType,\n) {\n const Context = React.createContext<ContextValueType | undefined>(defaultContext)\n\n function Provider(props: ContextValueType & { children: React.ReactNode }) {\n const { children, ...context } = props\n // Only re-memoize when prop values change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const value = React.useMemo(\n () => context,\n Object.values(context),\n ) as ContextValueType\n return <Context.Provider value={value}>{children}</Context.Provider>\n }\n\n function useContext(consumerName: string) {\n const context = React.useContext(Context)\n if (context) return context\n if (defaultContext !== undefined) return defaultContext\n // if a defaultContext wasn't specified, it's a required context.\n throw new Error(\n `\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``,\n )\n }\n\n Provider.displayName = `${rootComponentName}Provider`\n return [Provider, useContext] as const\n}\n\n/* -------------------------------------------------------------------------------------------------\n * createContextScope\n * -----------------------------------------------------------------------------------------------*/\n\ntype ScopeHook = (scope: Scope) => { [__scopeProp: string]: Scope }\n\nexport type Scope<C = any> = { [scopeName: string]: React.Context<C>[] } | undefined\n\nexport interface CreateScope {\n scopeName: string\n (): ScopeHook\n}\n\nexport function createContextScope(\n scopeName: string,\n createContextScopeDeps: CreateScope[] = [],\n) {\n let defaultContexts: any[] = []\n\n /* -----------------------------------------------------------------------------------------------\n * createContext\n * ---------------------------------------------------------------------------------------------*/\n\n function createContext<ContextValueType extends object | null>(\n rootComponentName: string,\n defaultContext?: ContextValueType,\n ) {\n const BaseContext = React.createContext<ContextValueType | undefined>(\n defaultContext,\n )\n const index = defaultContexts.length\n defaultContexts = [...defaultContexts, defaultContext]\n\n function Provider(\n props: ContextValueType & {\n scope: Scope<ContextValueType>\n children: React.ReactNode\n },\n ) {\n const { scope, children, ...context } = props\n const Context = scope?.[scopeName][index] || BaseContext\n // Only re-memoize when prop values change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const value = React.useMemo(\n () => context,\n Object.values(context),\n ) as ContextValueType\n return <Context.Provider value={value}>{children}</Context.Provider>\n }\n\n function useContext(\n consumerName: string,\n scope: Scope<ContextValueType | undefined>,\n ) {\n const Context = scope?.[scopeName][index] || BaseContext\n const context = React.useContext(Context)\n if (context) return context\n if (defaultContext !== undefined) return defaultContext\n // if a defaultContext wasn't specified, it's a required context.\n throw new Error(\n `\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``,\n )\n }\n\n Provider.displayName = `${rootComponentName}Provider`\n return [Provider, useContext] as const\n }\n\n /* -----------------------------------------------------------------------------------------------\n * createScope\n * ---------------------------------------------------------------------------------------------*/\n\n const createScope: CreateScope = () => {\n const scopeContexts = defaultContexts.map((defaultContext) => {\n return React.createContext(defaultContext)\n })\n return function useScope(scope: Scope) {\n const contexts = scope?.[scopeName] || scopeContexts\n return React.useMemo(\n () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),\n [scope, contexts],\n )\n }\n }\n\n createScope.scopeName = scopeName\n return [\n createContext,\n composeContextScopes(createScope, ...createContextScopeDeps),\n ] as const\n}\n\n/* -------------------------------------------------------------------------------------------------\n * composeContextScopes\n * -----------------------------------------------------------------------------------------------*/\n\nfunction composeContextScopes(...scopes: CreateScope[]) {\n const baseScope = scopes[0]\n if (scopes.length === 1) return baseScope\n\n const createScope: CreateScope = () => {\n const scopeHooks = scopes.map((createScope) => ({\n useScope: createScope(),\n scopeName: createScope.scopeName,\n }))\n\n return function useComposedScopes(overrideScopes) {\n const nextScopes = scopeHooks.reduce((nextScopes, { useScope, scopeName }) => {\n // We are calling a hook inside a callback which React warns against to avoid inconsistent\n // renders, however, scoping doesn't have render side effects so we ignore the rule.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const scopeProps = useScope(overrideScopes)\n const currentScope = scopeProps[`__scope${scopeName}`]\n return { ...nextScopes, ...currentScope }\n }, {})\n\n return React.useMemo(\n () => ({ [`__scope${baseScope.scopeName}`]: nextScopes }),\n [nextScopes],\n )\n }\n }\n\n createScope.scopeName = baseScope.scopeName\n return createScope\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n"],
|
|
5
|
+
"mappings": "AAqBW;AAlBX,YAAY,WAAW;AAIhB,SAAS,cACd,mBACA,gBACA;AACA,QAAM,UAAU,MAAM,cAA4C,cAAc;AAEhF,WAAS,SAAS,OAAyD;AACzE,UAAM,EAAE,aAAa,QAAQ,IAAI;AAGjC,UAAM,QAAQ,MAAM;AAAA,MAClB,MAAM;AAAA,MACN,OAAO,OAAO,OAAO;AAAA,IACvB;AACA,WAAO,oBAAC,QAAQ,UAAR;AAAA,MAAiB;AAAA,MAAe;AAAA,KAAS;AAAA,EACnD;AAEA,WAAS,WAAW,cAAsB;AACxC,UAAM,UAAU,MAAM,WAAW,OAAO;AACxC,QAAI;AAAS,aAAO;AACpB,QAAI,mBAAmB;AAAW,aAAO;AAEzC,UAAM,IAAI;AAAA,MACR,KAAK,wCAAwC;AAAA,IAC/C;AAAA,EACF;AAEA,WAAS,cAAc,GAAG;AAC1B,SAAO,CAAC,UAAU,UAAU;AAC9B;AAeO,SAAS,mBACd,WACA,yBAAwC,CAAC,GACzC;AACA,MAAI,kBAAyB,CAAC;AAM9B,WAASA,eACP,mBACA,gBACA;AACA,UAAM,cAAc,MAAM;AAAA,MACxB;AAAA,IACF;AACA,UAAM,QAAQ,gBAAgB;AAC9B,sBAAkB,CAAC,GAAG,iBAAiB,cAAc;AAErD,aAAS,SACP,OAIA;AACA,YAAM,EAAE,OAAO,aAAa,QAAQ,IAAI;AACxC,YAAM,WAAU,+BAAQ,WAAW,WAAU;AAG7C,YAAM,QAAQ,MAAM;AAAA,QAClB,MAAM;AAAA,QACN,OAAO,OAAO,OAAO;AAAA,MACvB;AACA,aAAO,oBAAC,QAAQ,UAAR;AAAA,QAAiB;AAAA,QAAe;AAAA,OAAS;AAAA,IACnD;AAEA,aAAS,WACP,cACA,OACA;AACA,YAAM,WAAU,+BAAQ,WAAW,WAAU;AAC7C,YAAM,UAAU,MAAM,WAAW,OAAO;AACxC,UAAI;AAAS,eAAO;AACpB,UAAI,mBAAmB;AAAW,eAAO;AAEzC,YAAM,IAAI;AAAA,QACR,KAAK,wCAAwC;AAAA,MAC/C;AAAA,IACF;AAEA,aAAS,cAAc,GAAG;AAC1B,WAAO,CAAC,UAAU,UAAU;AAAA,EAC9B;AAMA,QAAM,cAA2B,MAAM;AACrC,UAAM,gBAAgB,gBAAgB,IAAI,CAAC,mBAAmB;AAC5D,aAAO,MAAM,cAAc,cAAc;AAAA,IAC3C,CAAC;AACD,WAAO,SAAS,SAAS,OAAc;AACrC,YAAM,YAAW,+BAAQ,eAAc;AACvC,aAAO,MAAM;AAAA,QACX,OAAO,EAAE,CAAC,UAAU,cAAc,EAAE,GAAG,OAAO,CAAC,YAAY,SAAS,EAAE;AAAA,QACtE,CAAC,OAAO,QAAQ;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAEA,cAAY,YAAY;AACxB,SAAO;AAAA,IACLA;AAAA,IACA,qBAAqB,aAAa,GAAG,sBAAsB;AAAA,EAC7D;AACF;AAMA,SAAS,wBAAwB,QAAuB;AACtD,QAAM,YAAY,OAAO;AACzB,MAAI,OAAO,WAAW;AAAG,WAAO;AAEhC,QAAM,cAA2B,MAAM;AACrC,UAAM,aAAa,OAAO,IAAI,CAACC,kBAAiB;AAAA,MAC9C,UAAUA,aAAY;AAAA,MACtB,WAAWA,aAAY;AAAA,IACzB,EAAE;AAEF,WAAO,SAAS,kBAAkB,gBAAgB;AAChD,YAAM,aAAa,WAAW,OAAO,CAACC,aAAY,EAAE,UAAU,UAAU,MAAM;AAI5E,cAAM,aAAa,SAAS,cAAc;AAC1C,cAAM,eAAe,WAAW,UAAU;AAC1C,eAAO,EAAE,GAAGA,aAAY,GAAG,aAAa;AAAA,MAC1C,GAAG,CAAC,CAAC;AAEL,aAAO,MAAM;AAAA,QACX,OAAO,EAAE,CAAC,UAAU,UAAU,cAAc,WAAW;AAAA,QACvD,CAAC,UAAU;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAEA,cAAY,YAAY,UAAU;AAClC,SAAO;AACT;",
|
|
6
6
|
"names": ["createContext", "createScope", "nextScopes"]
|
|
7
7
|
}
|
|
@@ -3,7 +3,10 @@ function createContext(rootComponentName, defaultContext) {
|
|
|
3
3
|
const Context = React.createContext(defaultContext);
|
|
4
4
|
function Provider(props) {
|
|
5
5
|
const { children, ...context } = props;
|
|
6
|
-
const value = React.useMemo(
|
|
6
|
+
const value = React.useMemo(
|
|
7
|
+
() => context,
|
|
8
|
+
Object.values(context)
|
|
9
|
+
);
|
|
7
10
|
return <Context.Provider value={value}>{children}</Context.Provider>;
|
|
8
11
|
}
|
|
9
12
|
function useContext(consumerName) {
|
|
@@ -12,21 +15,28 @@ function createContext(rootComponentName, defaultContext) {
|
|
|
12
15
|
return context;
|
|
13
16
|
if (defaultContext !== void 0)
|
|
14
17
|
return defaultContext;
|
|
15
|
-
throw new Error(
|
|
18
|
+
throw new Error(
|
|
19
|
+
`\`${consumerName}\` must be used within \`${rootComponentName}\``
|
|
20
|
+
);
|
|
16
21
|
}
|
|
17
|
-
Provider.displayName = rootComponentName
|
|
22
|
+
Provider.displayName = `${rootComponentName}Provider`;
|
|
18
23
|
return [Provider, useContext];
|
|
19
24
|
}
|
|
20
25
|
function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
21
26
|
let defaultContexts = [];
|
|
22
27
|
function createContext2(rootComponentName, defaultContext) {
|
|
23
|
-
const BaseContext = React.createContext(
|
|
28
|
+
const BaseContext = React.createContext(
|
|
29
|
+
defaultContext
|
|
30
|
+
);
|
|
24
31
|
const index = defaultContexts.length;
|
|
25
32
|
defaultContexts = [...defaultContexts, defaultContext];
|
|
26
33
|
function Provider(props) {
|
|
27
34
|
const { scope, children, ...context } = props;
|
|
28
35
|
const Context = scope?.[scopeName][index] || BaseContext;
|
|
29
|
-
const value = React.useMemo(
|
|
36
|
+
const value = React.useMemo(
|
|
37
|
+
() => context,
|
|
38
|
+
Object.values(context)
|
|
39
|
+
);
|
|
30
40
|
return <Context.Provider value={value}>{children}</Context.Provider>;
|
|
31
41
|
}
|
|
32
42
|
function useContext(consumerName, scope) {
|
|
@@ -36,9 +46,11 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
|
36
46
|
return context;
|
|
37
47
|
if (defaultContext !== void 0)
|
|
38
48
|
return defaultContext;
|
|
39
|
-
throw new Error(
|
|
49
|
+
throw new Error(
|
|
50
|
+
`\`${consumerName}\` must be used within \`${rootComponentName}\``
|
|
51
|
+
);
|
|
40
52
|
}
|
|
41
|
-
Provider.displayName = rootComponentName
|
|
53
|
+
Provider.displayName = `${rootComponentName}Provider`;
|
|
42
54
|
return [Provider, useContext];
|
|
43
55
|
}
|
|
44
56
|
const createScope = () => {
|
|
@@ -54,7 +66,10 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
|
54
66
|
};
|
|
55
67
|
};
|
|
56
68
|
createScope.scopeName = scopeName;
|
|
57
|
-
return [
|
|
69
|
+
return [
|
|
70
|
+
createContext2,
|
|
71
|
+
composeContextScopes(createScope, ...createContextScopeDeps)
|
|
72
|
+
];
|
|
58
73
|
}
|
|
59
74
|
function composeContextScopes(...scopes) {
|
|
60
75
|
const baseScope = scopes[0];
|
|
@@ -71,7 +86,10 @@ function composeContextScopes(...scopes) {
|
|
|
71
86
|
const currentScope = scopeProps[`__scope${scopeName}`];
|
|
72
87
|
return { ...nextScopes2, ...currentScope };
|
|
73
88
|
}, {});
|
|
74
|
-
return React.useMemo(
|
|
89
|
+
return React.useMemo(
|
|
90
|
+
() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }),
|
|
91
|
+
[nextScopes]
|
|
92
|
+
);
|
|
75
93
|
};
|
|
76
94
|
};
|
|
77
95
|
createScope.scopeName = baseScope.scopeName;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/create-context.tsx"],
|
|
4
|
-
"sourcesContent": ["// from radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx\n\nimport * as React from 'react'\n\nexport type ScopedProps<P, K extends string> = P & { [Key in `__scope${K}`]?: Scope }\n\nexport function createContext<ContextValueType extends object | null>(\n rootComponentName: string,\n defaultContext?: ContextValueType
|
|
5
|
-
"mappings": "AAGA,YAAY,WAAW;AAIhB,SAAS,cACd,mBACA,gBACA;AACA,QAAM,UAAU,MAAM,cAA4C,cAAc;AAEhF,WAAS,SAAS,OAAyD;AACzE,UAAM,EAAE,aAAa,QAAQ,IAAI;AAGjC,UAAM,QAAQ,MAAM,
|
|
4
|
+
"sourcesContent": ["// from radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx\n\nimport * as React from 'react'\n\nexport type ScopedProps<P, K extends string> = P & { [Key in `__scope${K}`]?: Scope }\n\nexport function createContext<ContextValueType extends object | null>(\n rootComponentName: string,\n defaultContext?: ContextValueType,\n) {\n const Context = React.createContext<ContextValueType | undefined>(defaultContext)\n\n function Provider(props: ContextValueType & { children: React.ReactNode }) {\n const { children, ...context } = props\n // Only re-memoize when prop values change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const value = React.useMemo(\n () => context,\n Object.values(context),\n ) as ContextValueType\n return <Context.Provider value={value}>{children}</Context.Provider>\n }\n\n function useContext(consumerName: string) {\n const context = React.useContext(Context)\n if (context) return context\n if (defaultContext !== undefined) return defaultContext\n // if a defaultContext wasn't specified, it's a required context.\n throw new Error(\n `\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``,\n )\n }\n\n Provider.displayName = `${rootComponentName}Provider`\n return [Provider, useContext] as const\n}\n\n/* -------------------------------------------------------------------------------------------------\n * createContextScope\n * -----------------------------------------------------------------------------------------------*/\n\ntype ScopeHook = (scope: Scope) => { [__scopeProp: string]: Scope }\n\nexport type Scope<C = any> = { [scopeName: string]: React.Context<C>[] } | undefined\n\nexport interface CreateScope {\n scopeName: string\n (): ScopeHook\n}\n\nexport function createContextScope(\n scopeName: string,\n createContextScopeDeps: CreateScope[] = [],\n) {\n let defaultContexts: any[] = []\n\n /* -----------------------------------------------------------------------------------------------\n * createContext\n * ---------------------------------------------------------------------------------------------*/\n\n function createContext<ContextValueType extends object | null>(\n rootComponentName: string,\n defaultContext?: ContextValueType,\n ) {\n const BaseContext = React.createContext<ContextValueType | undefined>(\n defaultContext,\n )\n const index = defaultContexts.length\n defaultContexts = [...defaultContexts, defaultContext]\n\n function Provider(\n props: ContextValueType & {\n scope: Scope<ContextValueType>\n children: React.ReactNode\n },\n ) {\n const { scope, children, ...context } = props\n const Context = scope?.[scopeName][index] || BaseContext\n // Only re-memoize when prop values change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const value = React.useMemo(\n () => context,\n Object.values(context),\n ) as ContextValueType\n return <Context.Provider value={value}>{children}</Context.Provider>\n }\n\n function useContext(\n consumerName: string,\n scope: Scope<ContextValueType | undefined>,\n ) {\n const Context = scope?.[scopeName][index] || BaseContext\n const context = React.useContext(Context)\n if (context) return context\n if (defaultContext !== undefined) return defaultContext\n // if a defaultContext wasn't specified, it's a required context.\n throw new Error(\n `\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``,\n )\n }\n\n Provider.displayName = `${rootComponentName}Provider`\n return [Provider, useContext] as const\n }\n\n /* -----------------------------------------------------------------------------------------------\n * createScope\n * ---------------------------------------------------------------------------------------------*/\n\n const createScope: CreateScope = () => {\n const scopeContexts = defaultContexts.map((defaultContext) => {\n return React.createContext(defaultContext)\n })\n return function useScope(scope: Scope) {\n const contexts = scope?.[scopeName] || scopeContexts\n return React.useMemo(\n () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),\n [scope, contexts],\n )\n }\n }\n\n createScope.scopeName = scopeName\n return [\n createContext,\n composeContextScopes(createScope, ...createContextScopeDeps),\n ] as const\n}\n\n/* -------------------------------------------------------------------------------------------------\n * composeContextScopes\n * -----------------------------------------------------------------------------------------------*/\n\nfunction composeContextScopes(...scopes: CreateScope[]) {\n const baseScope = scopes[0]\n if (scopes.length === 1) return baseScope\n\n const createScope: CreateScope = () => {\n const scopeHooks = scopes.map((createScope) => ({\n useScope: createScope(),\n scopeName: createScope.scopeName,\n }))\n\n return function useComposedScopes(overrideScopes) {\n const nextScopes = scopeHooks.reduce((nextScopes, { useScope, scopeName }) => {\n // We are calling a hook inside a callback which React warns against to avoid inconsistent\n // renders, however, scoping doesn't have render side effects so we ignore the rule.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const scopeProps = useScope(overrideScopes)\n const currentScope = scopeProps[`__scope${scopeName}`]\n return { ...nextScopes, ...currentScope }\n }, {})\n\n return React.useMemo(\n () => ({ [`__scope${baseScope.scopeName}`]: nextScopes }),\n [nextScopes],\n )\n }\n }\n\n createScope.scopeName = baseScope.scopeName\n return createScope\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["createContext", "createScope", "nextScopes"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/create-context",
|
|
3
|
-
"version": "1.0.1-rc.
|
|
3
|
+
"version": "1.0.1-rc.6",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
@@ -15,14 +15,14 @@
|
|
|
15
15
|
"scripts": {
|
|
16
16
|
"build": "tamagui-build",
|
|
17
17
|
"watch": "tamagui-build --watch",
|
|
18
|
-
"lint": "
|
|
19
|
-
"lint:fix": "
|
|
18
|
+
"lint": "../../node_modules/.bin/rome check src",
|
|
19
|
+
"lint:fix": "../../node_modules/.bin/rome check --apply-suggested src"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"react": "^18.2.0"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@tamagui/build": "^1.0.1-rc.
|
|
25
|
+
"@tamagui/build": "^1.0.1-rc.6",
|
|
26
26
|
"react": "^18.2.0"
|
|
27
27
|
},
|
|
28
28
|
"publishConfig": {
|
package/src/create-context.tsx
CHANGED
|
@@ -7,7 +7,7 @@ export type ScopedProps<P, K extends string> = P & { [Key in `__scope${K}`]?: Sc
|
|
|
7
7
|
|
|
8
8
|
export function createContext<ContextValueType extends object | null>(
|
|
9
9
|
rootComponentName: string,
|
|
10
|
-
defaultContext?: ContextValueType
|
|
10
|
+
defaultContext?: ContextValueType,
|
|
11
11
|
) {
|
|
12
12
|
const Context = React.createContext<ContextValueType | undefined>(defaultContext)
|
|
13
13
|
|
|
@@ -15,7 +15,10 @@ export function createContext<ContextValueType extends object | null>(
|
|
|
15
15
|
const { children, ...context } = props
|
|
16
16
|
// Only re-memoize when prop values change
|
|
17
17
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
18
|
-
const value = React.useMemo(
|
|
18
|
+
const value = React.useMemo(
|
|
19
|
+
() => context,
|
|
20
|
+
Object.values(context),
|
|
21
|
+
) as ContextValueType
|
|
19
22
|
return <Context.Provider value={value}>{children}</Context.Provider>
|
|
20
23
|
}
|
|
21
24
|
|
|
@@ -24,10 +27,12 @@ export function createContext<ContextValueType extends object | null>(
|
|
|
24
27
|
if (context) return context
|
|
25
28
|
if (defaultContext !== undefined) return defaultContext
|
|
26
29
|
// if a defaultContext wasn't specified, it's a required context.
|
|
27
|
-
throw new Error(
|
|
30
|
+
throw new Error(
|
|
31
|
+
`\`${consumerName}\` must be used within \`${rootComponentName}\``,
|
|
32
|
+
)
|
|
28
33
|
}
|
|
29
34
|
|
|
30
|
-
Provider.displayName = rootComponentName
|
|
35
|
+
Provider.displayName = `${rootComponentName}Provider`
|
|
31
36
|
return [Provider, useContext] as const
|
|
32
37
|
}
|
|
33
38
|
|
|
@@ -44,7 +49,10 @@ export interface CreateScope {
|
|
|
44
49
|
(): ScopeHook
|
|
45
50
|
}
|
|
46
51
|
|
|
47
|
-
export function createContextScope(
|
|
52
|
+
export function createContextScope(
|
|
53
|
+
scopeName: string,
|
|
54
|
+
createContextScopeDeps: CreateScope[] = [],
|
|
55
|
+
) {
|
|
48
56
|
let defaultContexts: any[] = []
|
|
49
57
|
|
|
50
58
|
/* -----------------------------------------------------------------------------------------------
|
|
@@ -53,33 +61,46 @@ export function createContextScope(scopeName: string, createContextScopeDeps: Cr
|
|
|
53
61
|
|
|
54
62
|
function createContext<ContextValueType extends object | null>(
|
|
55
63
|
rootComponentName: string,
|
|
56
|
-
defaultContext?: ContextValueType
|
|
64
|
+
defaultContext?: ContextValueType,
|
|
57
65
|
) {
|
|
58
|
-
const BaseContext = React.createContext<ContextValueType | undefined>(
|
|
66
|
+
const BaseContext = React.createContext<ContextValueType | undefined>(
|
|
67
|
+
defaultContext,
|
|
68
|
+
)
|
|
59
69
|
const index = defaultContexts.length
|
|
60
70
|
defaultContexts = [...defaultContexts, defaultContext]
|
|
61
71
|
|
|
62
72
|
function Provider(
|
|
63
|
-
props: ContextValueType & {
|
|
73
|
+
props: ContextValueType & {
|
|
74
|
+
scope: Scope<ContextValueType>
|
|
75
|
+
children: React.ReactNode
|
|
76
|
+
},
|
|
64
77
|
) {
|
|
65
78
|
const { scope, children, ...context } = props
|
|
66
79
|
const Context = scope?.[scopeName][index] || BaseContext
|
|
67
80
|
// Only re-memoize when prop values change
|
|
68
81
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
69
|
-
const value = React.useMemo(
|
|
82
|
+
const value = React.useMemo(
|
|
83
|
+
() => context,
|
|
84
|
+
Object.values(context),
|
|
85
|
+
) as ContextValueType
|
|
70
86
|
return <Context.Provider value={value}>{children}</Context.Provider>
|
|
71
87
|
}
|
|
72
88
|
|
|
73
|
-
function useContext(
|
|
89
|
+
function useContext(
|
|
90
|
+
consumerName: string,
|
|
91
|
+
scope: Scope<ContextValueType | undefined>,
|
|
92
|
+
) {
|
|
74
93
|
const Context = scope?.[scopeName][index] || BaseContext
|
|
75
94
|
const context = React.useContext(Context)
|
|
76
95
|
if (context) return context
|
|
77
96
|
if (defaultContext !== undefined) return defaultContext
|
|
78
97
|
// if a defaultContext wasn't specified, it's a required context.
|
|
79
|
-
throw new Error(
|
|
98
|
+
throw new Error(
|
|
99
|
+
`\`${consumerName}\` must be used within \`${rootComponentName}\``,
|
|
100
|
+
)
|
|
80
101
|
}
|
|
81
102
|
|
|
82
|
-
Provider.displayName = rootComponentName
|
|
103
|
+
Provider.displayName = `${rootComponentName}Provider`
|
|
83
104
|
return [Provider, useContext] as const
|
|
84
105
|
}
|
|
85
106
|
|
|
@@ -95,13 +116,16 @@ export function createContextScope(scopeName: string, createContextScopeDeps: Cr
|
|
|
95
116
|
const contexts = scope?.[scopeName] || scopeContexts
|
|
96
117
|
return React.useMemo(
|
|
97
118
|
() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
|
|
98
|
-
[scope, contexts]
|
|
119
|
+
[scope, contexts],
|
|
99
120
|
)
|
|
100
121
|
}
|
|
101
122
|
}
|
|
102
123
|
|
|
103
124
|
createScope.scopeName = scopeName
|
|
104
|
-
return [
|
|
125
|
+
return [
|
|
126
|
+
createContext,
|
|
127
|
+
composeContextScopes(createScope, ...createContextScopeDeps),
|
|
128
|
+
] as const
|
|
105
129
|
}
|
|
106
130
|
|
|
107
131
|
/* -------------------------------------------------------------------------------------------------
|
|
@@ -128,7 +152,10 @@ function composeContextScopes(...scopes: CreateScope[]) {
|
|
|
128
152
|
return { ...nextScopes, ...currentScope }
|
|
129
153
|
}, {})
|
|
130
154
|
|
|
131
|
-
return React.useMemo(
|
|
155
|
+
return React.useMemo(
|
|
156
|
+
() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }),
|
|
157
|
+
[nextScopes],
|
|
158
|
+
)
|
|
132
159
|
}
|
|
133
160
|
}
|
|
134
161
|
|