Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit ca59638

Browse filesBrowse files
pelikhanpelikhan
committed
delay using split
1 parent 7b9ce5d commit ca59638
Copy full SHA for ca59638

5 files changed

+97-61Lines changed: 97 additions & 61 deletions

File tree

Expand file treeCollapse file tree
Open diff view settings
Filter options
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎website/src/components/TutorialComponents/index.tsx‎

Copy file name to clipboardExpand all lines: website/src/components/TutorialComponents/index.tsx
+11-14Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from "react"
1+
import React, { useContext, useState } from "react"
22
import clsx from "clsx"
33
import { ThemeClassNames, usePrismTheme } from "@docusaurus/theme-common"
44
import useIsBrowser from "@docusaurus/useIsBrowser"
@@ -9,10 +9,7 @@ import codeBlockContentStyles from "@docusaurus/theme-classic/src/theme/CodeBloc
99
import styles from "./styles.module.css"
1010
import Prism from "prism-react-renderer/prism"
1111

12-
import runDeviceScript from "./runDeviceScript"
13-
const clientConfig = {
14-
ts: runDeviceScript,
15-
}
12+
import DevToolsContext from "@site/src/contexts/DevToolsContext"
1613

1714
interface CodeBlockProps {
1815
lang: string
@@ -50,10 +47,7 @@ function RunButton(props: {
5047
const { onClick, runFinished } = props
5148
const text = "Run"
5249
return (
53-
<button
54-
className="button button--primary"
55-
onClick={async () => await onClick()}
56-
>
50+
<button className="button button--primary" onClick={onClick}>
5751
{runFinished ? text : "Running..."}
5852
</button>
5953
)
@@ -172,9 +166,12 @@ export default function CustomCodeBlock(props: { input: CodeBlockProps }) {
172166
const [output, setOutput] = useState(result)
173167
const [lastSnippet, setLastSnippet] = useState(code)
174168
const codeChanged = lastSnippet !== currCode
175-
176-
const onDidClickOutputToggle = () => {
177-
setOutputRendered(!outputRendered)
169+
const { setSource } = useContext(DevToolsContext)
170+
const clientConfig = {
171+
ts: input => {
172+
setSource(input)
173+
return JSON.stringify({ output: "", error: "" })
174+
},
178175
}
179176

180177
// bypassing server-side rendering
@@ -185,8 +182,8 @@ export default function CustomCodeBlock(props: { input: CodeBlockProps }) {
185182

186183
const runProcess = clientConfig[lang]
187184

188-
let input = currCode
189-
let process = runProcess(input)
185+
const input = currCode
186+
let process = runProcess(input, setSource)
190187

191188
// `z3.interrupt` -- set the cancel status of an ongoing execution, potentially with a timeout (soft? hard? we should use hard)
192189
try {
Collapse file

‎website/src/components/TutorialComponents/runDeviceScript.ts‎

Copy file name to clipboardExpand all lines: website/src/components/TutorialComponents/runDeviceScript.ts
-17Lines changed: 0 additions & 17 deletions
This file was deleted.
Collapse file

‎website/src/contexts/DevToolsContext.tsx‎

Copy file name to clipboard
+33Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, { createContext, ReactNode, useState, useEffect } from "react"
2+
import SplitDevTools from "./SplitDevTools"
3+
export interface DevToolsProps {
4+
setSource: (source: string) => void
5+
}
6+
7+
const DevToolsContext = createContext<DevToolsProps>({
8+
setSource: () => {},
9+
})
10+
DevToolsContext.displayName = "devtools"
11+
12+
export default DevToolsContext
13+
14+
export function DevToolsProvider(props: { children: ReactNode }) {
15+
const { children } = props
16+
const [source, setSource_] = useState<string>(undefined)
17+
const [sourceId, setSourceId] = useState(0)
18+
19+
const setSource = (value: string) => {
20+
setSource_(value)
21+
setSourceId(id => id + 1)
22+
}
23+
24+
return (
25+
<DevToolsContext.Provider value={{ setSource }}>
26+
{source ? (
27+
<SplitDevTools {...props} source={source} sourceId={sourceId} />
28+
) : (
29+
<>{children}</>
30+
)}
31+
</DevToolsContext.Provider>
32+
)
33+
}
Collapse file

‎website/src/contexts/SplitDevTools.jsx‎

Copy file name to clipboard
+49Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React, { useState, useRef, useEffect } from "react"
2+
import SplitPane from "react-split-pane"
3+
import { nodeModuleNameResolver } from "typescript"
4+
5+
export default function SplitDevTools(props) {
6+
const { children, source, sourceId } = props
7+
const [dragging, setDragging] = useState(false)
8+
const handleDragStart = () => setDragging(true)
9+
const handleDragEnd = () => setDragging(false)
10+
const iframeRef = useRef(undefined)
11+
12+
useEffect(() => {
13+
const iframe = iframeRef.current
14+
const parent = iframe?.contentWindow
15+
if (!parent) return
16+
17+
const msg = {
18+
channel: "devicescript",
19+
type: "source",
20+
source,
21+
force: true,
22+
}
23+
parent.postMessage(msg, "https://microsoft.github.io/jacdac-docs/")
24+
}, [source, sourceId])
25+
26+
return (
27+
<SplitPane
28+
split="vertical"
29+
defaultSize={"min(75%, 65rem)"}
30+
minSize={400}
31+
onDragStarted={handleDragStart}
32+
onDragFinished={handleDragEnd}
33+
>
34+
<div className="pane left">{children}</div>
35+
<div>
36+
{!dragging && (
37+
<iframe
38+
ref={iframeRef}
39+
id="jacdac-dashboard"
40+
className="pane right"
41+
allow="usb;serial;bluetooth"
42+
src={`https://microsoft.github.io/jacdac-docs/editors/devicescript/?devicescriptvm=1&embed=1&footer=0`}
43+
frameBorder="0"
44+
/>
45+
)}
46+
</div>
47+
</SplitPane>
48+
)
49+
}
Collapse file

‎website/src/theme/Root.jsx‎

Copy file name to clipboard
+4-30Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,6 @@
1-
import React, { useMemo, useState } from "react"
2-
import SplitPane from "react-split-pane"
3-
1+
import React from "react"
2+
import { DevToolsProvider } from "../contexts/DevToolsContext"
43
// Default implementation, that you can customize
5-
export default function Root({ children }) {
6-
const [dragging, setDragging] = useState(false)
7-
const handleDragStart = () => setDragging(true)
8-
const handleDragEnd = () => setDragging(false)
9-
return (
10-
<SplitPane
11-
split="vertical"
12-
defaultSize={"min(75%, 65rem)"}
13-
minSize={400}
14-
onDragStarted={handleDragStart}
15-
onDragFinished={handleDragEnd}
16-
>
17-
<div className="pane left">{children}</div>
18-
<div>
19-
{!dragging && (
20-
<iframe
21-
id="jacdac-dashboard"
22-
className="pane right"
23-
alt="jacdac dashboard and simulators"
24-
allow="usb;serial;bluetooth"
25-
src={`https://microsoft.github.io/jacdac-docs/editors/devicescript/?devicescriptvm=1&embed=1&footer=0`}
26-
frameBorder="0"
27-
/>
28-
)}
29-
</div>
30-
</SplitPane>
31-
)
4+
export default function Root(props) {
5+
return <DevToolsProvider {...props} />
326
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.