-
Notifications
You must be signed in to change notification settings - Fork 138
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add source map debugging to website (#793)
Progress toward #541, prep work to help make #759 (and any future source map work) more manually testable. This PR splits out token information into a new collapased-by-default debug section, then adds source map info to that section. The source map toggle does three things: * Show the actual mappings from the source map by line/column index. * Show the JSON value of the source map. * Extend the normal code output to include an inline source map with the full original source embedded, then link to the very helpful tool https://evanw.github.io/source-map-visualization/ , which accepts pasting the output code.
- Loading branch information
1 parent
99c4f71
commit 7e5b06a
Showing
13 changed files
with
282 additions
and
97 deletions.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import {css, StyleSheet} from "aphrodite"; | ||
|
|
||
| import CheckBox from "./CheckBox"; | ||
| import type {CompareOptions} from "./Constants"; | ||
| import OptionsBox from "./OptionsBox"; | ||
|
|
||
| interface CompareOptionsBoxProps { | ||
| compareOptions: CompareOptions; | ||
| onUpdateCompareOptions: (compareOptions: CompareOptions) => void; | ||
| } | ||
|
|
||
| export default function CompareOptionsBox({ | ||
| compareOptions, | ||
| onUpdateCompareOptions, | ||
| }: CompareOptionsBoxProps): JSX.Element { | ||
| return ( | ||
| <OptionsBox> | ||
| <div className={css(styles.optionBox)}> | ||
| <span className={css(styles.title)}>Compare</span> | ||
| <CheckBox | ||
| label="Babel" | ||
| checked={compareOptions.compareWithBabel} | ||
| onChange={(checked) => { | ||
| onUpdateCompareOptions({...compareOptions, compareWithBabel: checked}); | ||
| }} | ||
| /> | ||
| <CheckBox | ||
| label="TypeScript" | ||
| checked={compareOptions.compareWithTypeScript} | ||
| onChange={(checked) => { | ||
| onUpdateCompareOptions({...compareOptions, compareWithTypeScript: checked}); | ||
| }} | ||
| /> | ||
| </div> | ||
| </OptionsBox> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| optionBox: { | ||
| display: "flex", | ||
| flexWrap: "wrap", | ||
| alignItems: "center", | ||
| }, | ||
| title: { | ||
| fontSize: "1.2em", | ||
| padding: 6, | ||
| }, | ||
| }); |
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,70 @@ | ||
| import {css, StyleSheet} from "aphrodite"; | ||
| import {useState} from "react"; | ||
|
|
||
| import CheckBox from "./CheckBox"; | ||
| import type {DebugOptions} from "./Constants"; | ||
| import OptionsBox from "./OptionsBox"; | ||
|
|
||
| interface DebugOptionsBoxProps { | ||
| debugOptions: DebugOptions; | ||
| onUpdateDebugOptions: (debugOptions: DebugOptions) => void; | ||
| } | ||
|
|
||
| export default function DebugOptionsBox({ | ||
| debugOptions, | ||
| onUpdateDebugOptions, | ||
| }: DebugOptionsBoxProps): JSX.Element { | ||
| const [enabled, setEnabled] = useState(false); | ||
| if (!enabled) { | ||
| return ( | ||
| <a | ||
| href="#debug" | ||
| className={css(styles.link)} | ||
| onClick={(e) => { | ||
| setEnabled(true); | ||
| e.preventDefault(); | ||
| }} | ||
| > | ||
| Debug... | ||
| </a> | ||
| ); | ||
| } | ||
| return ( | ||
| <OptionsBox> | ||
| <div className={css(styles.optionBox)}> | ||
| <span className={css(styles.title)}>Debug</span> | ||
| <CheckBox | ||
| label="Tokens" | ||
| checked={debugOptions.showTokens} | ||
| onChange={(checked) => { | ||
| onUpdateDebugOptions({...debugOptions, showTokens: checked}); | ||
| }} | ||
| /> | ||
| <CheckBox | ||
| label="Source Map" | ||
| checked={debugOptions.showSourceMap} | ||
| onChange={(checked) => { | ||
| onUpdateDebugOptions({...debugOptions, showSourceMap: checked}); | ||
| }} | ||
| /> | ||
| </div> | ||
| </OptionsBox> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| optionBox: { | ||
| display: "flex", | ||
| flexWrap: "wrap", | ||
| alignItems: "center", | ||
| }, | ||
| link: { | ||
| color: "#CCCCCC", | ||
| marginLeft: 6, | ||
| marginRight: 6, | ||
| }, | ||
| title: { | ||
| fontSize: "1.2em", | ||
| padding: 6, | ||
| }, | ||
| }); |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.