Skip to content

Fluent provider react18 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

Fluent provider react18 #1

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
918383b
init approach
micahgodbolt Jul 21, 2022
e708894
fix typos
micahgodbolt Jul 21, 2022
8698221
bit of reorg
micahgodbolt Jul 21, 2022
071f6d6
remove concated strings
micahgodbolt Jul 21, 2022
f8fc4e0
collapse test
micahgodbolt Jul 22, 2022
594fbe4
return check
micahgodbolt Jul 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 46 additions & 26 deletions ...components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,43 @@ import * as React from 'react';
import type { FluentProviderState } from './FluentProvider.types';
import { fluentProviderClassNames } from './useFluentProviderStyles';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const useInsertionEffect = (React as any).useInsertionEffect;

const createStyleTag = (target: Document | undefined, id: string) => {
if (!target) {
return undefined;
}
const tag = target.createElement('style');
tag.setAttribute('id', id);
target.head.appendChild(tag);
return tag;
};

const insertSheet = (tag: HTMLStyleElement, rule: string) => {
const sheet = tag.sheet;

if (sheet) {
if (sheet.cssRules.length > 0) {
sheet.deleteRule(0);
}
sheet.insertRule(rule, 0);
} else if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line no-console
console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
}
};

/**
* Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
*
* @returns CSS class to apply the rule
*/
export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {
const { targetDocument, theme } = options;
const styleTag = React.useRef<HTMLStyleElement>();

const styleTagId = useId(fluentProviderClassNames.root);
const styleTag = React.useMemo(() => {
if (!targetDocument) {
return null;
}

const tag = targetDocument.createElement('style');
tag.setAttribute('id', styleTagId);
targetDocument.head.appendChild(tag);
return tag;
}, [styleTagId, targetDocument]);

const cssRule = React.useMemo(() => {
const cssVarsAsString = theme
Expand All @@ -34,30 +52,32 @@ export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState
// result: .fluent-provider1 { --css-var: '#fff' }
return `.${styleTagId} { ${cssVarsAsString} }`;
}, [theme, styleTagId]);
const previousCssRule = usePrevious(cssRule);

if (styleTag && previousCssRule !== cssRule) {
const sheet = styleTag.sheet;
const ruleIsNew = usePrevious(cssRule) !== cssRule;

if (sheet) {
if (sheet.cssRules.length > 0) {
sheet.deleteRule(0);
}
sheet.insertRule(cssRule, 0);
} else if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line no-console
console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
}
// React 16/17 Behavior
if (!useInsertionEffect && ruleIsNew) {
styleTag.current = createStyleTag(targetDocument, styleTagId);
styleTag.current && insertSheet(styleTag.current, cssRule);
}

// insert cssRule into HTML tag if it exists

const useEffect = useInsertionEffect || React.useEffect;

// Removes the style tag from the targetDocument on unmount or change
React.useEffect(() => {
useEffect(() => {
// React 18+ behavior
if (useInsertionEffect) {
styleTag.current = createStyleTag(targetDocument, styleTagId);
styleTag.current && insertSheet(styleTag.current, cssRule);
}
return () => {
if (styleTag) {
styleTag.remove();
if (styleTag.current) {
styleTag.current.remove();
}
};
}, [styleTag]);
}, [cssRule, styleTagId, targetDocument]);

return styleTagId;
};