-
Notifications
You must be signed in to change notification settings - Fork 55
Conversation
-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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const Line: React.FC<{ | |
const DebugLine: React.FC<{ |
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.
done
|
||
public whosValueContains(substring: string) { | ||
return this.whosValue(value => containsSubstring(value, substring)) | ||
} | ||
} |
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.
- Make it type
- Reuse in
DebugPanel
,Debug
???
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.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const ref = React.useRef(null) | |
if (process.env.NODE_ENV !== 'production') { | |
const ref = React.useRef(null) | |
} |
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.
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 |
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.
Wrap in production check
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.
done
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if (isDebugEnabled) { | |
if (process.env === ''' || isDebugEnabled) { |
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.
done
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
mergeThemes
or 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 = true
and reloading the pageopenDebugPanel()
function (it's still a requirement to have the<Debug />
component in your application.