Skip to content

Commit

Permalink
Add more options to playground
Browse files Browse the repository at this point in the history
  • Loading branch information
@wooorm
wooorm committed Oct 11, 2023
1 parent 07503a5 commit 3e23ba9
Show file tree
Hide file tree
Showing 2 changed files with 152 additions and 47 deletions.
195 changes: 148 additions & 47 deletions docs/_asset/editor.jsx
View file
Expand Up @@ -17,7 +17,7 @@
* @property {false} ok
* @property {Error} value
*
* @typedef {EvalOk | EvalNok} EvalResult
* @typedef {EvalNok | EvalOk} EvalResult
*/

import {compile, nodeTypes, run} from '@mdx-js/mdx'
Expand Down Expand Up @@ -105,18 +105,22 @@ function init(main) {
}

function Playground() {
const [value, setValue] = useState(sample)
const [directive, setDirective] = useState(false)
const [evalResult, setEvalResult] = useState(
/** @type {unknown} */ (undefined)
)
const [development, setDevelopment] = useState(false)
const [frontmatter, setFrontmatter] = useState(false)
const [gfm, setGfm] = useState(false)
const [markdown, setMarkdown] = useState(false)
const [formatMarkdown, setFormatMarkdown] = useState(false)
const [jsx, setJsx] = useState(false)
const [math, setMath] = useState(false)
const [raw, setRaw] = useState(false)
const [outputFormatFunctionBody, setOutputFormatFunctionBody] =
useState(false)
const [positions, setPositions] = useState(false)
const [output, setOutput] = useState('result')
const [evalResult, setEvalResult] = useState(
/** @type {unknown} */ (undefined)
)
const [raw, setRaw] = useState(false)
const [show, setShow] = useState('result')
const [value, setValue] = useState(sample)

useEffect(
function () {
Expand Down Expand Up @@ -147,25 +151,30 @@ function Playground() {
if (raw) rehypePlugins.unshift([rehypeRaw, {passThrough: nodeTypes}])

const file = new VFile({
basename: markdown ? 'example.md' : 'example.mdx',
basename: formatMarkdown ? 'example.md' : 'example.mdx',
value
})

if (output === 'mdast') remarkPlugins.push([capture, {name: 'mdast'}])
if (output === 'hast') rehypePlugins.push([capture, {name: 'hast'}])
if (output === 'esast') recmaPlugins.push([capture, {name: 'esast'}])
if (show === 'esast') recmaPlugins.push([capture, {name: 'esast'}])
if (show === 'hast') rehypePlugins.push([capture, {name: 'hast'}])
if (show === 'mdast') remarkPlugins.push([capture, {name: 'mdast'}])
/** @type {UnistNode | undefined} */
let tree

await compile(file, {
outputFormat: output === 'result' ? 'function-body' : 'program',
development: show === 'result' ? false : development,
jsx: show === 'code' || show === 'esast' ? jsx : false,
outputFormat:
show === 'result' || outputFormatFunctionBody
? 'function-body'
: 'program',
recmaPlugins,
rehypePlugins,
remarkPlugins,
useDynamicImport: true
})

if (output === 'result') {
if (show === 'result') {
/** @type {MDXModule} */
const mod = await run(String(file), runtime)

Expand All @@ -192,7 +201,7 @@ function Playground() {
)
}

// `output === 'code'`
// `show === 'code'`
return (
<pre>
<code>
Expand Down Expand Up @@ -227,10 +236,23 @@ function Playground() {
}
}
},
[directive, frontmatter, gfm, markdown, math, output, positions, raw, value]
[
development,
directive,
frontmatter,
gfm,
jsx,
formatMarkdown,
math,
outputFormatFunctionBody,
positions,
raw,
show,
value
]
)

const scope = markdown ? 'text.md' : 'source.mdx'
const scope = formatMarkdown ? 'text.md' : 'source.mdx'
const compiledResult = /** @type {EvalResult | undefined} */ (evalResult)
/** @type {JSX.Element | undefined} */
let display
Expand Down Expand Up @@ -273,46 +295,20 @@ function Playground() {
</div>
<div className="playground-controls">
<fieldset>
<legend>Output</legend>
<legend>Show</legend>
<label>
<select
name="output"
name="show"
onChange={function (event) {
setOutput(event.target.value)
setShow(event.target.value)
}}
>
<option value="result">rendered result</option>
<option value="result">evaluated result</option>
<option value="code">compiled code</option>
<option value="mdast">mdast (markdown)</option>
<option value="hast">hast (html)</option>
<option value="esast">esast (javascript)</option>
</select>{' '}
result
</label>
</fieldset>
<fieldset>
<legend>Input</legend>
<label>
<input
type="radio"
name="language"
checked={!markdown}
onChange={function () {
setMarkdown(false)
}}
/>{' '}
MDX
</label>
<label>
<input
type="radio"
name="language"
checked={markdown}
onChange={function () {
setMarkdown(true)
}}
/>{' '}
markdown
</label>
</fieldset>
<fieldset>
Expand Down Expand Up @@ -389,6 +385,111 @@ function Playground() {
</label>
</fieldset>
<fieldset>
<legend>Input format</legend>
<label>
<input
type="radio"
name="language"
checked={!formatMarkdown}
onChange={function () {
setFormatMarkdown(false)
}}
/>{' '}
MDX (<code>format: &apos;mdx&apos;</code>)
</label>
<label>
<input
type="radio"
name="language"
checked={formatMarkdown}
onChange={function () {
setFormatMarkdown(true)
}}
/>{' '}
markdown (<code>format: &apos;markdown&apos;</code>)
</label>
</fieldset>

<fieldset disabled={show === 'result'}>
<legend>Output format</legend>
<label>
<input
type="radio"
name="output-format"
checked={outputFormatFunctionBody}
onChange={function () {
setOutputFormatFunctionBody(true)
}}
/>{' '}
function body (
<code>outputFormat: &apos;function-body&apos;</code>)
</label>
<label>
<input
type="radio"
name="output-format"
checked={!outputFormatFunctionBody}
onChange={function () {
setOutputFormatFunctionBody(false)
}}
/>{' '}
program (<code>outputFormat: &apos;program&apos;</code>)
</label>
</fieldset>

<fieldset disabled={show === 'result'}>
<legend>Development</legend>
<label>
<input
type="radio"
name="development"
checked={!development}
onChange={function () {
setDevelopment(false)
}}
/>{' '}
generate for production (<code>development: false</code>)
</label>
<label>
<input
type="radio"
name="development"
checked={development}
onChange={function () {
setJsx(true)
}}
/>{' '}
generate for development (<code>development: true</code>)
</label>
</fieldset>

<fieldset disabled={show === 'result'}>
<legend>JSX</legend>
<label>
<input
type="radio"
name="jsx"
checked={jsx}
onChange={function () {
setJsx(true)
}}
/>{' '}
keep JSX (<code>jsx: true</code>)
</label>
<label>
<input
type="radio"
name="jsx"
checked={!jsx}
onChange={function () {
setJsx(false)
}}
/>{' '}
compile JSX away (<code>jsx: false</code>)
</label>
</fieldset>

<fieldset disabled={show === 'result' || show === 'code'}>
<legend>Tree</legend>
<label>
<input
Expand Down
4 changes: 4 additions & 0 deletions docs/_asset/index.css
View file
Expand Up @@ -1279,6 +1279,10 @@ button.success {
margin-inline: 0;
}

.playground-controls fieldset[disabled] {
opacity: 0.6;
}

.playground-controls label {
font-size: smaller;
display: block;
Expand Down

0 comments on commit 3e23ba9

Please sign in to comment.