-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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.
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
Components: Fix "next" component types #28571
Conversation
Size Change: -14 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
export function ComponentSystemProvider( { | ||
__unstableNextInclude = [], | ||
children, | ||
value = {}, | ||
} ) { | ||
// @ts-ignore | ||
if ( process.env.COMPONENT_SYSTEM_PHASE === 1 ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I know this isn't introduced here, but adding arbitrary process.env[ whatever ]
checks to code that will ship to the browser makes it more difficult for third parties to use the package. It's fine in Gutenberg because the build system is set up for it. The problem is that it forces others to have the same build setup to use the packages containing this code. They must have this or similar:
Lines 118 to 136 in ec83961
new DefinePlugin( { | |
// Inject the `GUTENBERG_PHASE` global, used for feature flagging. | |
'process.env.GUTENBERG_PHASE': JSON.stringify( | |
parseInt( | |
process.env.npm_package_config_GUTENBERG_PHASE, | |
10 | |
) || 1 | |
), | |
// Inject the `COMPONENT_SYSTEM_PHASE` global, used for controlling Component System roll-out. | |
'process.env.COMPONENT_SYSTEM_PHASE': JSON.stringify( | |
parseInt( | |
process.env.npm_package_config_COMPONENT_SYSTEM_PHASE, | |
10 | |
) || 1 | |
), | |
'process.env.FORCE_REDUCED_MOTION': JSON.stringify( | |
process.env.FORCE_REDUCED_MOTION | |
), | |
} ), |
It should be clearly mentioned in the package README.
It's the same case as this PR: #16679
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've left some notes and suggestions but generally I'm happy if things typecheck 🙂
packages/components/src/__next/context/component-system-provider.js
Outdated
Show resolved
Hide resolved
@@ -116,6 +123,7 @@ export function createHighlighterText( { | |||
? Object.assign( {}, highlightStyle, activeStyle ) | |||
: highlightStyle; | |||
|
|||
/** @type {Record<string, any>} */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this better than the inferred type? It's a pretty weak type and uses any
, I'm curious why it needed to be added.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Becuase of highlightIndex
being conditionally added below... I could update it to read:
* @type {{
children: string;
className: string;
key: number;
style: import('react').CSSProperties;
"data-g2-component": any;
highlightIndex?: number;
}} */
const props = {
...ui.$( 'TextHighlight' ),
children: text,
className: highlightClassNames,
key: index,
style: highlightStyles,
};
But that felt really silly for something that is just being passed directly to createElement
two statements below.
1e900ac
to
1dc55c8
Compare
👍 from me! Thank you @saramarcondes + @sirreal 🙏 |
* fix: Components types * Fix global process type and refine others
Description
Fix various G2 type problems
How has this been tested?
Typecheck.
Types of changes
Bug fixes
Checklist: