Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 3e23ba9

Browse files
wooormwooorm
committed
Add more options to playground
1 parent 07503a5 commit 3e23ba9

File tree

2 files changed

+152
-47
lines changed

2 files changed

+152
-47
lines changed

‎docs/_asset/editor.jsx‎

Lines changed: 148 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
* @property {false} ok
1818
* @property {Error} value
1919
*
20-
* @typedef {EvalOk | EvalNok} EvalResult
20+
* @typedef {EvalNok | EvalOk} EvalResult
2121
*/
2222

2323
import {compile, nodeTypes, run} from '@mdx-js/mdx'
@@ -105,18 +105,22 @@ function init(main) {
105105
}
106106

107107
function Playground() {
108-
const [value, setValue] = useState(sample)
109108
const [directive, setDirective] = useState(false)
109+
const [evalResult, setEvalResult] = useState(
110+
/** @type {unknown} */ (undefined)
111+
)
112+
const [development, setDevelopment] = useState(false)
110113
const [frontmatter, setFrontmatter] = useState(false)
111114
const [gfm, setGfm] = useState(false)
112-
const [markdown, setMarkdown] = useState(false)
115+
const [formatMarkdown, setFormatMarkdown] = useState(false)
116+
const [jsx, setJsx] = useState(false)
113117
const [math, setMath] = useState(false)
114-
const [raw, setRaw] = useState(false)
118+
const [outputFormatFunctionBody, setOutputFormatFunctionBody] =
119+
useState(false)
115120
const [positions, setPositions] = useState(false)
116-
const [output, setOutput] = useState('result')
117-
const [evalResult, setEvalResult] = useState(
118-
/** @type {unknown} */ (undefined)
119-
)
121+
const [raw, setRaw] = useState(false)
122+
const [show, setShow] = useState('result')
123+
const [value, setValue] = useState(sample)
120124

121125
useEffect(
122126
function () {
@@ -147,25 +151,30 @@ function Playground() {
147151
if (raw) rehypePlugins.unshift([rehypeRaw, {passThrough: nodeTypes}])
148152

149153
const file = new VFile({
150-
basename: markdown ? 'example.md' : 'example.mdx',
154+
basename: formatMarkdown ? 'example.md' : 'example.mdx',
151155
value
152156
})
153157

154-
if (output === 'mdast') remarkPlugins.push([capture, {name: 'mdast'}])
155-
if (output === 'hast') rehypePlugins.push([capture, {name: 'hast'}])
156-
if (output === 'esast') recmaPlugins.push([capture, {name: 'esast'}])
158+
if (show === 'esast') recmaPlugins.push([capture, {name: 'esast'}])
159+
if (show === 'hast') rehypePlugins.push([capture, {name: 'hast'}])
160+
if (show === 'mdast') remarkPlugins.push([capture, {name: 'mdast'}])
157161
/** @type {UnistNode | undefined} */
158162
let tree
159163

160164
await compile(file, {
161-
outputFormat: output === 'result' ? 'function-body' : 'program',
165+
development: show === 'result' ? false : development,
166+
jsx: show === 'code' || show === 'esast' ? jsx : false,
167+
outputFormat:
168+
show === 'result' || outputFormatFunctionBody
169+
? 'function-body'
170+
: 'program',
162171
recmaPlugins,
163172
rehypePlugins,
164173
remarkPlugins,
165174
useDynamicImport: true
166175
})
167176

168-
if (output === 'result') {
177+
if (show === 'result') {
169178
/** @type {MDXModule} */
170179
const mod = await run(String(file), runtime)
171180

@@ -192,7 +201,7 @@ function Playground() {
192201
)
193202
}
194203

195-
// `output === 'code'`
204+
// `show === 'code'`
196205
return (
197206
<pre>
198207
<code>
@@ -227,10 +236,23 @@ function Playground() {
227236
}
228237
}
229238
},
230-
[directive, frontmatter, gfm, markdown, math, output, positions, raw, value]
239+
[
240+
development,
241+
directive,
242+
frontmatter,
243+
gfm,
244+
jsx,
245+
formatMarkdown,
246+
math,
247+
outputFormatFunctionBody,
248+
positions,
249+
raw,
250+
show,
251+
value
252+
]
231253
)
232254

233-
const scope = markdown ? 'text.md' : 'source.mdx'
255+
const scope = formatMarkdown ? 'text.md' : 'source.mdx'
234256
const compiledResult = /** @type {EvalResult | undefined} */ (evalResult)
235257
/** @type {JSX.Element | undefined} */
236258
let display
@@ -273,46 +295,20 @@ function Playground() {
273295
</div>
274296
<div className="playground-controls">
275297
<fieldset>
276-
<legend>Output</legend>
298+
<legend>Show</legend>
277299
<label>
278300
<select
279-
name="output"
301+
name="show"
280302
onChange={function (event) {
281-
setOutput(event.target.value)
303+
setShow(event.target.value)
282304
}}
283305
>
284-
<option value="result">rendered result</option>
306+
<option value="result">evaluated result</option>
285307
<option value="code">compiled code</option>
286308
<option value="mdast">mdast (markdown)</option>
287309
<option value="hast">hast (html)</option>
288310
<option value="esast">esast (javascript)</option>
289311
</select>{' '}
290-
result
291-
</label>
292-
</fieldset>
293-
<fieldset>
294-
<legend>Input</legend>
295-
<label>
296-
<input
297-
type="radio"
298-
name="language"
299-
checked={!markdown}
300-
onChange={function () {
301-
setMarkdown(false)
302-
}}
303-
/>{' '}
304-
MDX
305-
</label>
306-
<label>
307-
<input
308-
type="radio"
309-
name="language"
310-
checked={markdown}
311-
onChange={function () {
312-
setMarkdown(true)
313-
}}
314-
/>{' '}
315-
markdown
316312
</label>
317313
</fieldset>
318314
<fieldset>
@@ -389,6 +385,111 @@ function Playground() {
389385
</label>
390386
</fieldset>
391387
<fieldset>
388+
<legend>Input format</legend>
389+
<label>
390+
<input
391+
type="radio"
392+
name="language"
393+
checked={!formatMarkdown}
394+
onChange={function () {
395+
setFormatMarkdown(false)
396+
}}
397+
/>{' '}
398+
MDX (<code>format: &apos;mdx&apos;</code>)
399+
</label>
400+
<label>
401+
<input
402+
type="radio"
403+
name="language"
404+
checked={formatMarkdown}
405+
onChange={function () {
406+
setFormatMarkdown(true)
407+
}}
408+
/>{' '}
409+
markdown (<code>format: &apos;markdown&apos;</code>)
410+
</label>
411+
</fieldset>
412+
413+
<fieldset disabled={show === 'result'}>
414+
<legend>Output format</legend>
415+
<label>
416+
<input
417+
type="radio"
418+
name="output-format"
419+
checked={outputFormatFunctionBody}
420+
onChange={function () {
421+
setOutputFormatFunctionBody(true)
422+
}}
423+
/>{' '}
424+
function body (
425+
<code>outputFormat: &apos;function-body&apos;</code>)
426+
</label>
427+
<label>
428+
<input
429+
type="radio"
430+
name="output-format"
431+
checked={!outputFormatFunctionBody}
432+
onChange={function () {
433+
setOutputFormatFunctionBody(false)
434+
}}
435+
/>{' '}
436+
program (<code>outputFormat: &apos;program&apos;</code>)
437+
</label>
438+
</fieldset>
439+
440+
<fieldset disabled={show === 'result'}>
441+
<legend>Development</legend>
442+
<label>
443+
<input
444+
type="radio"
445+
name="development"
446+
checked={!development}
447+
onChange={function () {
448+
setDevelopment(false)
449+
}}
450+
/>{' '}
451+
generate for production (<code>development: false</code>)
452+
</label>
453+
<label>
454+
<input
455+
type="radio"
456+
name="development"
457+
checked={development}
458+
onChange={function () {
459+
setJsx(true)
460+
}}
461+
/>{' '}
462+
generate for development (<code>development: true</code>)
463+
</label>
464+
</fieldset>
465+
466+
<fieldset disabled={show === 'result'}>
467+
<legend>JSX</legend>
468+
<label>
469+
<input
470+
type="radio"
471+
name="jsx"
472+
checked={jsx}
473+
onChange={function () {
474+
setJsx(true)
475+
}}
476+
/>{' '}
477+
keep JSX (<code>jsx: true</code>)
478+
</label>
479+
<label>
480+
<input
481+
type="radio"
482+
name="jsx"
483+
checked={!jsx}
484+
onChange={function () {
485+
setJsx(false)
486+
}}
487+
/>{' '}
488+
compile JSX away (<code>jsx: false</code>)
489+
</label>
490+
</fieldset>
491+
492+
<fieldset disabled={show === 'result' || show === 'code'}>
392493
<legend>Tree</legend>
393494
<label>
394495
<input

‎docs/_asset/index.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1279,6 +1279,10 @@ button.success {
12791279
margin-inline: 0;
12801280
}
12811281

1282+
.playground-controls fieldset[disabled] {
1283+
opacity: 0.6;
1284+
}
1285+
12821286
.playground-controls label {
12831287
font-size: smaller;
12841288
display: block;

0 commit comments

Comments
 (0)