This repository has been archived by the owner on Mar 4, 2020. It is now read-only.
feat(Debug): Add CSSinJS debug panel #1974
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
-added search and highlighting of the styles
-made filter to work on values as well -strike variables which are overriden -styles improvements
docs/src/examples/components/Provider/Performance/ProviderMergeThemes.perf.tsx
Show resolved
Hide resolved
| @@ -0,0 +1,35 @@ | |||
| import * as React from 'react' | |||
|
|
|||
| const Line: React.FC<{ | |||
There was a problem hiding this comment.
Suggested change
| const Line: React.FC<{ | |
| const DebugLine: React.FC<{ |
|
|
||
| public whosValueContains(substring: string) { | ||
| return this.whosValue(value => containsSubstring(value, substring)) | ||
| } | ||
| } |
There was a problem hiding this comment.
- Make it type
- Reuse in
DebugPanel,Debug???
There was a problem hiding this comment.
Converted to type, reuse will be done later as part of Debug panel refactoring
| @@ -42,7 +42,7 @@ const createComponent = <P extends ObjectOf<any> = any>({ | |||
| const StardustComponent: CreateComponentReturnType<P> = (props): React.ReactElement<P> => { | |||
| // Stores debug information for component. | |||
| // Note that this ref should go as the first one, to be discoverable by debug utils. | |||
| const stardustDebug = React.useRef(null) | |||
| const ref = React.useRef(null) | |||
There was a problem hiding this comment.
Suggested change
| const ref = React.useRef(null) | |
| if (process.env.NODE_ENV !== 'production') { | |
| const ref = React.useRef(null) | |
| } |
There was a problem hiding this comment.
The ref was already there. I am not sure we want to have different shape of the createComponent in prod vs dev.
| resolvedStyles[slotName] = callable(mergedStyles[slotName])(styleParam) | ||
| const { _debug, ...resolvedSlotStyles } = callable(mergedStyles[slotName])(styleParam) | ||
| resolvedStyles[slotName] = resolvedSlotStyles | ||
| resolvedStylesDebug[slotName] = _debug |
| if (accessibility.focusZone) { | ||
| return renderWithFocusZone(render, accessibility.focusZone, resolvedConfig) | ||
| } | ||
|
|
||
| // conditionally add sources for evaluating debug information to component | ||
| if (isDebugEnabled) { |
There was a problem hiding this comment.
Suggested change
| if (isDebugEnabled) { | |
| if (process.env === ''' || isDebugEnabled) { |
layershifter
approved these changes
Oct 15, 2019
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation
Debugging Stardust Component styles is difficult. Stardust uses CSSinJS - styles are computed in JS using site variables, component variables and component style functions with possibility to override any of these using
mergeThemesor by nestingProvider, styles are applied as atomic CSS classes which can result in tens of CSS classes applied to individual dom elements, developers have no idea where the styles came from:Solution
This PR adds a debug panel which displays the flow of site variables, component variables and component style functions, including all overrides, which resulted in the styles applied on the element:
How to use
<Debug />component anywhere to your application.window.localStorage.stardustDebug = trueand reloading the pageopenDebugPanel()function (it's still a requirement to have the<Debug />component in your application.