This repository has been archived by the owner on Mar 4, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 55
feat(Debug): Add CSSinJS debug panel #1974
Merged
Merged
Changes from all commits
Commits
Show all changes
114 commits
Select commit
Hold shift + click to select a range
5a3e602
- debug stack added to mergeComponentVariables
miroslavstastny 840c47e
wip: start ctrl + d and click for debugger
levithomason 148b0a3
Merge branch 'feat/debug-panel' of github.com:stardust-ui/react into …
levithomason c55290c
-added DebugPanel component
1a463b8
wip: start fiber navigator
levithomason b523151
-added styles panel
cab06a2
-updated debug panel to cross the overriden values
15922ee
-added TODO for the merging of the styles
d256bd3
-split DebugPanel to more components
7b189c3
-added example usages for debug panel
57b8ee7
-added dock left and right options
ef02b71
-refactorings
f13294a
-extracted input styles
b74b17f
-remove DebugPanel from app
90db913
- save debug stack in mergeStyles and mergeComponentVariables
miroslavstastny a2684bb
-changed data structure
86dcbc1
improve debug selector
levithomason 593f26d
fix lint errors
levithomason 07b2c55
wire actual data into debug flow
levithomason 8ff82a7
touch up styles
levithomason 01dc2c6
-updated debug panel
018a1d7
Merge remote-tracking branch 'origin/feat/debug-panel' into feat/debu…
c45eb68
fix keys and return errors
levithomason 686d18f
-updated styles on debug panel
8bad203
-ts error fixes
d13f4da
-final style changes
02b1326
-added design component in the index
8dff54a
- filter out empty style stack frames
miroslavstastny ae43a3c
-fixed bug for reversing variables object
6192a1f
fix double select bug, touch up styles
levithomason bea39e0
-added white backgorund on the icons
79af35f
-refactored variables and styles to use the same components
22ecf74
-added site variables in the debug data
3d6020f
-added select for style's slots
f3a170d
take document as prop
levithomason 721ec94
-siteVariables displayed (only used)
e256efe
Merge branch 'feat/debug-panel' of github.com:stardust-ui/react into …
levithomason da88e65
Merge branch 'feat/debug-panel' of https://github.com/stardust-ui/rea…
bb1e638
improve slot selector
levithomason cee8786
improve slot selector layout
levithomason c24f491
select owner component
levithomason 4a7c3f1
- add _debugId to style frames
miroslavstastny 7aba0c8
-added comments and styles id
69b43ce
-gracefully handled undefined and null
e5c164b
fix parent traversal in select
levithomason f838747
add owner selector traversal
levithomason 198c914
selectable fn components, hide selector on click, show panel for all …
levithomason 7816414
- correctly save debug for components with a FocusZone (Menu)
miroslavstastny a6b8fbd
fix fiber nav instance
levithomason b362e7b
fix fiber nav react component
levithomason 116878e
-replaced margin wtih padding
27dcac7
-handling empty site variables
d44163c
limit selection to stardust owners
levithomason 8e34266
Merge branch 'feat/debug-panel' of github.com:stardust-ui/react into …
levithomason f20c696
remove css styles, separate fiber nav
levithomason 3d0c535
-added activate debug selector prop on debug panel
0c7bb7f
-renamed prop
a863ddd
update styles, remove portal
levithomason a0551e8
-added close icon
9afa488
-fix
f8bb824
-refactoring
90fe054
fix some stuff
levithomason c44de16
merge and fix
levithomason e82a6ee
fix up more styles
levithomason e692084
-added DebugRect component
56aa6cc
- add _debugId to component variables frames
miroslavstastny aca54b8
- fix most of the failing UTs
miroslavstastny 700c8a2
fix fiber nav domNode
levithomason 0ed69b6
remove fiber nav window global
levithomason 8b14be1
-site variabels are shown as object
582e878
-fix Provider tests
d8f7798
-fix site Variables
a602319
-site variables empty object fixes
b416937
-fixed bug on crashing when clicking on activate selecting
9727519
get ready for ........ can not say it...
levithomason e8a3d31
merge and fix
levithomason c26e751
- hoist _debugId to Theme object, add it to site variables frames
miroslavstastny 6b0eea4
fix conflicts, make it uglier
levithomason a097308
tweak jsx navigator badges
levithomason 1263c17
-fixed ts errors
250bf8f
-extracted more methods to utils
80571b8
-added interfaces for DebugPanelData and DebugPanelItem props
aa84b8e
-added filter tests
a20d977
-added tests for getValues
b165fab
-added test for removeNulls
c97e4aa
-used deepmerge in DebugPanelItem
0cfffbc
fix filter margin and selected item indent
levithomason e417591
-fixed issue with icon-clicks when debug panel is scrolled
ca6abef
Merge remote-tracking branch 'origin/master' into feat/debug-panel
miroslavstastny f0c55cf
- fix renderComponent after merge
miroslavstastny 6179277
- store debug frames only if debugging is enabled
miroslavstastny a18fc58
factor out component viewer
levithomason 542c358
Merge remote-tracking branch 'origin/master' into feat/debug-panel
miroslavstastny 4c3ff6b
allow `window` accessing in Debug
miroslavstastny 3010c7b
shallow clone instead of mutating in withDebugId
miroslavstastny 79e93e7
remove old debug
miroslavstastny 40f00cb
Merge remote-tracking branch 'origin/master' into feat/debug-panel
miroslavstastny 944202f
fix UT import
miroslavstastny aea0d49
revert testing examples
miroslavstastny c9400b5
createTheme wrapper
miroslavstastny 13585a9
added console function for opening the debug panel
87c4d31
-added isBrowser check
c584cb3
-clean up
695f5b4
-added typings to utils
d50fbfc
-added more typings
a4fbfda
-added comments on the helper functions
a7aa9c7
Merge remote-tracking branch 'origin/master' into feat/debug-panel
miroslavstastny 2c223bd
Merge remote-tracking branch 'origin/master' into feat/debug-panel
miroslavstastny bf47bde
address (part of) PR comments
miroslavstastny d9bd25a
refactor tests
miroslavstastny e821f9e
address PR comments
miroslavstastny bacf4d1
Merge remote-tracking branch 'origin/master' into feat/debug-panel
miroslavstastny edcdee3
fix UTs
miroslavstastny fb3252c
changelog
miroslavstastny File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
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
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
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
43 changes: 43 additions & 0 deletions
43
docs/src/examples/components/Provider/Performance/ProviderMergeThemes.perf.tsx
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import * as React from 'react' | ||
layershifter marked this conversation as resolved.
Show resolved
Hide resolved
|
||
import { mergeThemes, callable, ComponentStyleFunctionParam, themes } from '@stardust-ui/react' | ||
import * as _ from 'lodash' | ||
|
||
/** | ||
* Not a real performance test, just a temporary POC | ||
*/ | ||
const providerMergeThemesPerf = () => { | ||
const merged = mergeThemes(..._.times(100, n => themes.teams)) | ||
const resolvedStyles = _.mapValues(merged.componentStyles, (componentStyle, componentName) => { | ||
const compVariables = _.get(merged.componentVariables, componentName, callable({}))( | ||
merged.siteVariables, | ||
) | ||
const styleParam: ComponentStyleFunctionParam = { | ||
displayName: componentName, | ||
props: {}, | ||
variables: compVariables, | ||
theme: merged, | ||
rtl: false, | ||
disableAnimations: false, | ||
} | ||
return _.mapValues(componentStyle, (partStyle, partName) => { | ||
if (partName === '_debug') { | ||
// TODO: fix in code, happens only with mergeThemes(singleTheme) | ||
return undefined | ||
} | ||
if (typeof partStyle !== 'function') { | ||
console.log(componentName, partStyle, partName) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This will affect performance as Do you want to add this perf test at all? |
||
} | ||
return partStyle(styleParam) | ||
}) | ||
}) | ||
|
||
return resolvedStyles | ||
} | ||
|
||
const MergeThemesPerf = () => { | ||
const resolvedStyles = providerMergeThemesPerf() | ||
delete resolvedStyles.Button.root._debug | ||
return <pre>{JSON.stringify(resolvedStyles.Button.root, null, 2)}</pre> | ||
} | ||
|
||
export default MergeThemesPerf |
16 changes: 16 additions & 0 deletions
16
docs/src/examples/components/Provider/Performance/index.tsx
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import * as React from 'react' | ||
|
||
import ComponentPerfExample from 'docs/src/components/ComponentDoc/ComponentPerfExample' | ||
import NonPublicSection from 'docs/src/components/ComponentDoc/NonPublicSection' | ||
|
||
const Performance = () => ( | ||
<NonPublicSection title="Performance"> | ||
<ComponentPerfExample | ||
title="Merge themes" | ||
description="mergeThemes perf" | ||
examplePath="components/Provider/Performance/ProviderMergeThemes.perf" | ||
/> | ||
</NonPublicSection> | ||
) | ||
|
||
export default Performance |
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,193 @@ | ||
import keyboardKey from 'keyboard-key' | ||
import * as PropTypes from 'prop-types' | ||
import * as React from 'react' | ||
import { toRefObject } from '@stardust-ui/react-component-ref' | ||
import { EventListener } from '@stardust-ui/react-component-event-listener' | ||
|
||
import { isBrowser } from '../../lib' | ||
import { isEnabled as isDebugEnabled } from '../../lib/debug/debugEnabled' | ||
|
||
import DebugPanel from './DebugPanel' | ||
import FiberNavigator from './FiberNavigator' | ||
import DebugRect from './DebugRect' | ||
|
||
type DebugProps = { | ||
/** Existing document the popup should add listeners. */ | ||
mountDocument?: Document | ||
} | ||
|
||
type DebugState = { | ||
debugPanelPosition?: 'left' | 'right' | ||
fiberNav: FiberNavigator | ||
selectedFiberNav: FiberNavigator | ||
isSelecting: boolean | ||
} | ||
|
||
const INITIAL_STATE: DebugState = { | ||
fiberNav: null, | ||
selectedFiberNav: null, | ||
isSelecting: false, | ||
} | ||
|
||
class Debug extends React.Component<DebugProps, DebugState> { | ||
state = INITIAL_STATE | ||
|
||
static defaultProps = { | ||
// eslint-disable-next-line no-undef | ||
mountDocument: isBrowser() ? window.document : null, | ||
} | ||
|
||
static propTypes = { | ||
mountDocument: PropTypes.object.isRequired, | ||
} | ||
|
||
constructor(p, s) { | ||
super(p, s) | ||
if (process.env.NODE_ENV !== 'production' && isDebugEnabled && isBrowser()) { | ||
// eslint-disable-next-line no-undef | ||
;(window as any).openDebugPanel = () => { | ||
// eslint-disable-next-line no-undef | ||
this.debugReactComponent((window as any).$r) | ||
} | ||
} | ||
} | ||
|
||
debugReactComponent = r => { | ||
if (!r) { | ||
console.error( | ||
"No React component selected. Please select a Stardust component from the React's Component panel.", | ||
) | ||
return | ||
} | ||
if (!r._reactInternalFiber) { | ||
console.error( | ||
'React does not provide data for debugging for this component. Try selecting some Stardust component.', | ||
) | ||
return | ||
} | ||
if (!r.stardustDebug) { | ||
console.error('Not a debuggable component. Try selecting some Stardust component.') | ||
return | ||
} | ||
|
||
const fiberNav = FiberNavigator.fromFiber(r._reactInternalFiber) | ||
this.setState({ fiberNav, isSelecting: false, selectedFiberNav: null }) | ||
} | ||
|
||
debugDOMNode = domNode => { | ||
let fiberNav = FiberNavigator.fromDOMNode(domNode) | ||
|
||
if (!fiberNav) { | ||
console.error('No fiber for dom node', domNode) | ||
return | ||
} | ||
|
||
fiberNav = fiberNav.findOwner(fiber => fiber.stardustDebug) | ||
|
||
if (fiberNav !== this.state.fiberNav) { | ||
this.setState({ fiberNav }) | ||
} | ||
} | ||
|
||
handleKeyDown = e => { | ||
const code = keyboardKey.getCode(e) | ||
|
||
switch (code) { | ||
case keyboardKey.Escape: | ||
this.stopSelecting() | ||
break | ||
|
||
case keyboardKey.d: | ||
if (e.altKey && e.shiftKey) { | ||
this.startSelecting() | ||
} | ||
break | ||
} | ||
} | ||
|
||
handleMouseMove = e => { | ||
this.debugDOMNode(e.target) | ||
} | ||
|
||
handleStardustDOMNodeClick = e => { | ||
e.preventDefault() | ||
e.stopPropagation() | ||
|
||
this.setState({ isSelecting: false }) | ||
} | ||
|
||
startSelecting = () => { | ||
const isSelecting = !this.state.isSelecting | ||
|
||
this.setState({ | ||
...(!isSelecting && INITIAL_STATE), | ||
isSelecting, | ||
}) | ||
} | ||
|
||
stopSelecting = () => { | ||
this.setState(INITIAL_STATE) | ||
} | ||
|
||
selectFiber = selectedFiberNav => this.setState({ selectedFiberNav }) | ||
|
||
changeFiber = fiberNav => this.setState({ fiberNav }) | ||
|
||
positionRight = () => this.setState({ debugPanelPosition: 'right' }) | ||
|
||
positionLeft = () => this.setState({ debugPanelPosition: 'left' }) | ||
|
||
close = () => this.setState(INITIAL_STATE) | ||
|
||
render() { | ||
const { mountDocument } = this.props | ||
const { fiberNav, selectedFiberNav, isSelecting, debugPanelPosition } = this.state | ||
|
||
if (process.env.NODE_ENV !== 'production' && isDebugEnabled) { | ||
return ( | ||
<> | ||
<EventListener | ||
targetRef={toRefObject(mountDocument.body)} | ||
listener={this.handleKeyDown} | ||
type="keydown" | ||
/> | ||
{isSelecting && ( | ||
<EventListener | ||
targetRef={toRefObject(mountDocument.body)} | ||
listener={this.handleMouseMove} | ||
type="mousemove" | ||
/> | ||
)} | ||
{isSelecting && fiberNav && fiberNav.domNode && ( | ||
<EventListener | ||
targetRef={toRefObject(fiberNav.domNode)} | ||
listener={this.handleStardustDOMNodeClick} | ||
type="click" | ||
/> | ||
)} | ||
{isSelecting && fiberNav && <DebugRect fiberNav={fiberNav} />} | ||
{selectedFiberNav && <DebugRect fiberNav={selectedFiberNav} />} | ||
{!isSelecting && fiberNav && fiberNav.instance && ( | ||
<DebugPanel | ||
fiberNav={fiberNav} | ||
onActivateDebugSelectorClick={this.startSelecting} | ||
onClose={this.close} | ||
// TODO: Integrate CSS in JS Styles for Host Components (DOM nodes) | ||
// cssStyles={stylesForNode(stardustDOMNode)} | ||
debugData={fiberNav.stardustDebug} | ||
position={debugPanelPosition || 'right'} | ||
onPositionLeft={this.positionLeft} | ||
onPositionRight={this.positionRight} | ||
onFiberChanged={this.changeFiber} | ||
onFiberSelected={this.selectFiber} | ||
/> | ||
)} | ||
</> | ||
) | ||
} | ||
|
||
return null | ||
} | ||
} | ||
|
||
export default Debug |
Oops, something went wrong.
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.
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 it is required two have a wrapping element:
nit