@fluentui/babel-preset-global-context v9.0.0-beta.67
@fluentui/babel-preset-global-context
Babel Preset Global Context for Fluent UI React
Babel preset that transforms createContext calls to use global context shims
Install
yarn add --dev @fluentui/babel-preset-global-context
# or
npm install --dev @fluentui/babel-preset-global-context
When to use it?
This preset is mainly inteded for application developers to target specific libraries that use React context and suffer from the context duplication problem. React contexts are not real singletons and are scoped by module level. This can cause problems when the context is duplicated in node_modules.
This is a known issue that is by design according to facebook/react#13346 that is illustrated in the below example.
// my-context-package
import * as React from 'react';
export const MyContext = React.createContext({ foo: 'foo' });
// provider.ts
// node_modules/my-context-package/lib/index.js
import { MyContext } from 'my-context-package';
function Provider({ children }) {
const ctx = { foo: 'bar' };
// 1. Instantiate context with value foo='bar'
return <MyContext.Provider value={ctx}>{children}</MyContext.Provider>;
}
// consumer.ts
// node_modules/nested-dep/node_modules/my-context-package/lib/index.js
import * as React from 'react';
import { MyContext } from 'my-context-package';
function Consumer() {
// 2. Consume the 'same' context from different module
const ctx = React.useContext(MyContext);
// 3. ⚠️ Actual value would be the default 'foo'
return <div>{ctx.foo}</div>;
}
⚠️ The recommended solution to the above problem is to make sure that the affected dependency only exists once in node_modules. You can do this by upgrading your dependencies or using resolutions.
This library should only be used as a workaround in the cases where it might not be feasible to deduplicate node_modules
.
Usage
Install the shims for createContext
that will this Babel preset will use to replace original React.createContext
calls.
yarn add @fluentui/global-context
# or
npm install @fluentui/global-context
We recommend using this preset with Webpack and babel-loader while scoping the transforms to the affected packages.
// weboack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(ts|js|tsx|jsx)$/,
use: {
loader: 'babel-loader',
options: {
presets: [['@fluentui/babel-preset-global-context']],
},
},
// Targets all @fluentui scoped packages and replaces `createContext` calls with global context
// Can be setup for other packages
// /node_modules\/(<packageName>|<pacakgeName>)\/*/
include: [/node_modules\/@fluentui\/*/],
},
{
test: /\.(ts|tsx)$/i,
use: ['ts-loader'],
exclude: ['/node_modules/'],
},
],
},
};
1 day ago
4 days ago
1 day ago
5 days ago
6 days ago
7 days ago
8 days ago
11 days ago
12 days ago
13 days ago
15 days ago
15 days ago
14 days ago
18 days ago
19 days ago
20 days ago
21 days ago
22 days ago
25 days ago
26 days ago
27 days ago
28 days ago
28 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
11 months ago
11 months ago
10 months ago
10 months ago
9 months ago
8 months ago
7 months ago
7 months ago
9 months ago
8 months ago
6 months ago
7 months ago
10 months ago
6 months ago
8 months ago
6 months ago
11 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
11 months ago
10 months ago
8 months ago
9 months ago
6 months ago
7 months ago
7 months ago
6 months ago
7 months ago
8 months ago
7 months ago
6 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
6 months ago
7 months ago
7 months ago
8 months ago
10 months ago
10 months ago
7 months ago
9 months ago
9 months ago
10 months ago
7 months ago
7 months ago
9 months ago
6 months ago
10 months ago
8 months ago
6 months ago
6 months ago
6 months ago
8 months ago
8 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
9 months ago
6 months ago
10 months ago
10 months ago
10 months ago
9 months ago
11 months ago
11 months ago
8 months ago
8 months ago
9 months ago
8 months ago
8 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
9 months ago
10 months ago
11 months ago
6 months ago
10 months ago
8 months ago
10 months ago
8 months ago
7 months ago
8 months ago
6 months ago
7 months ago
6 months ago
8 months ago
7 months ago
10 months ago
8 months ago
9 months ago
9 months ago
7 months ago
10 months ago
10 months ago
11 months ago
7 months ago
9 months ago
9 months ago
7 months ago
7 months ago
9 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
9 months ago
11 months ago
10 months ago
10 months ago
9 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago