Skip to content

Commit ca59638

Browse files
pelikhanpelikhan
committed
delay using split
1 parent 7b9ce5d commit ca59638

5 files changed

Lines changed: 97 additions & 61 deletions

File tree

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

Lines 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 {

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

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎website/src/contexts/DevToolsContext.tsx‎

Lines 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+
}

‎website/src/contexts/SplitDevTools.jsx‎

Lines 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+
}

‎website/src/theme/Root.jsx‎

Lines 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)