From 3579aa38cea3c91759263be24848e0dea1dddefb Mon Sep 17 00:00:00 2001 From: Titus Wormer Date: Fri, 17 Jun 2022 19:12:28 +0200 Subject: [PATCH] Add use of tla in docs --- docs/docs/getting-started.server.mdx | 26 ++------ docs/guides/embed.server.mdx | 22 ++++--- docs/guides/frontmatter.server.mdx | 24 +++----- docs/guides/gfm.server.mdx | 14 ++--- docs/guides/math.server.mdx | 20 +++---- docs/guides/syntax-highlighting.server.mdx | 14 ++--- packages/mdx/readme.md | 70 ++++++++-------------- 7 files changed, 67 insertions(+), 123 deletions(-) diff --git a/docs/docs/getting-started.server.mdx b/docs/docs/getting-started.server.mdx index 6dfc62b9d..0ed1b3a84 100644 --- a/docs/docs/getting-started.server.mdx +++ b/docs/docs/getting-started.server.mdx @@ -665,11 +665,7 @@ on how to use MDX with React Static. ```js path="example.js" import {compile} from '@mdx-js/mdx' - main() - - async function main() { - const js = String(await compile('# hi', {jsxImportSource: '@emotion/react', /* otherOptions… */})) - } + const js = String(await compile('# hi', {jsxImportSource: '@emotion/react', /* otherOptions… */})) ``` @@ -731,11 +727,7 @@ more info. ```js path="example.js" import {compile} from '@mdx-js/mdx' - main() - - async function main() { - const js = String(await compile('# hi', {jsxImportSource: 'preact', /* otherOptions… */})) - } + const js = String(await compile('# hi', {jsxImportSource: 'preact', /* otherOptions… */})) ``` @@ -811,11 +803,7 @@ info. ```js path="example.js" import {compile} from '@mdx-js/mdx' - main() - - async function main() { - const js = String(await compile('# hi', {jsxImportSource: 'svelte-jsx', /* otherOptions… */})) - } + const js = String(await compile('# hi', {jsxImportSource: 'svelte-jsx', /* otherOptions… */})) ``` @@ -835,12 +823,8 @@ which you might be using, for more info. import {compile} from '@mdx-js/mdx' import babel from '@babel/core' - main() - - async function main() { - const jsx = String(await compile('# hi', {jsx: true, /* otherOptions… */})) - const js = (await babel.transformAsync(jsx, {plugins: ['@vue/babel-plugin-jsx']})).code - } + const jsx = String(await compile('# hi', {jsx: true, /* otherOptions… */})) + const js = (await babel.transformAsync(jsx, {plugins: ['@vue/babel-plugin-jsx']})).code ``` diff --git a/docs/guides/embed.server.mdx b/docs/guides/embed.server.mdx index 4652db11f..e5f7ca7e2 100644 --- a/docs/guides/embed.server.mdx +++ b/docs/guides/embed.server.mdx @@ -4,7 +4,7 @@ export const info = { {name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'} ], published: new Date('2021-10-06'), - modified: new Date('2021-11-01') + modified: new Date('2022-06-17') } # Embed @@ -35,21 +35,19 @@ import fauxOembedTransformer from '@remark-embedder/transformer-oembed' const remarkEmbedder = fauxRemarkEmbedder.default const oembedTransformer = fauxOembedTransformer.default -main(` +const code = ` Check out this video: https://www.youtube.com/watch?v=dQw4w9WgXcQ -`) - -async function main(code) { - console.log( - String( - await compile(code, { - remarkPlugins: [[remarkEmbedder, {transformers: [oembedTransformer]}]] - }) - ) +` + +console.log( + String( + await compile(code, { + remarkPlugins: [[remarkEmbedder, {transformers: [oembedTransformer]}]] + }) ) -} +) ```
diff --git a/docs/guides/frontmatter.server.mdx b/docs/guides/frontmatter.server.mdx index 41f502f8b..dc4a50a42 100644 --- a/docs/guides/frontmatter.server.mdx +++ b/docs/guides/frontmatter.server.mdx @@ -4,7 +4,7 @@ export const info = { {name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'} ], published: new Date('2021-10-06'), - modified: new Date('2021-11-01') + modified: new Date('2022-06-17') } # Frontmatter @@ -50,12 +50,8 @@ Then without compiling or evaluating the metadata can be accessed like so: import {promises as fs} from 'node:fs' import yaml from 'js-yaml' -main() - -async function main() { - console.log(yaml.loadAll(await fs.readFile('post.mdx'))[0]) - // Prints `{title: 'Hi, World!'}` -} +console.log(yaml.loadAll(await fs.readFile('post.mdx'))[0]) +// Prints `{title: 'Hi, World!'}` ``` Our compiler, `@mdx-js/mdx`, doesn’t understand YAML frontmatter by default but @@ -67,15 +63,11 @@ import {promises as fs} from 'node:fs' import remarkFrontmatter from 'remark-frontmatter' import {compile} from '@mdx-js/mdx' -main() - -async function main() { - console.log( - await compile(await fs.readFile('post.mdx'), { - remarkPlugins: [remarkFrontmatter] - }) - ) -} +console.log( + await compile(await fs.readFile('post.mdx'), { + remarkPlugins: [remarkFrontmatter] + }) +) ``` Now it “works”. diff --git a/docs/guides/gfm.server.mdx b/docs/guides/gfm.server.mdx index 09ffca73b..8e1a0d0f5 100644 --- a/docs/guides/gfm.server.mdx +++ b/docs/guides/gfm.server.mdx @@ -4,7 +4,7 @@ export const info = { {name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'} ], published: new Date('2021-10-06'), - modified: new Date('2021-11-01') + modified: new Date('2022-06-17') } # GitHub flavored markdown (GFM) @@ -55,15 +55,11 @@ import {promises as fs} from 'node:fs' import {compile} from '@mdx-js/mdx' import remarkGfm from 'remark-gfm' -main() - -async function main() { - console.log( - String( - await compile(await fs.readFile('example.mdx'), {remarkPlugins: [remarkGfm]}) - ) +console.log( + String( + await compile(await fs.readFile('example.mdx'), {remarkPlugins: [remarkGfm]}) ) -} +) ```
diff --git a/docs/guides/math.server.mdx b/docs/guides/math.server.mdx index 864d4c43f..2b0712cc4 100644 --- a/docs/guides/math.server.mdx +++ b/docs/guides/math.server.mdx @@ -5,7 +5,7 @@ export const info = { {name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'} ], published: new Date('2021-10-06'), - modified: new Date('2022-02-01') + modified: new Date('2022-06-17') } # Math @@ -36,18 +36,14 @@ import {compile} from '@mdx-js/mdx' import rehypeKatex from 'rehype-katex' import remarkMath from 'remark-math' -main() - -async function main() { - console.log( - String( - await compile(await fs.readFile('example.mdx'), { - remarkPlugins: [remarkMath], - rehypePlugins: [rehypeKatex] - }) - ) +console.log( + String( + await compile(await fs.readFile('example.mdx'), { + remarkPlugins: [remarkMath], + rehypePlugins: [rehypeKatex] + }) ) -} +) ```
diff --git a/docs/guides/syntax-highlighting.server.mdx b/docs/guides/syntax-highlighting.server.mdx index eacee8ca5..509eb168a 100644 --- a/docs/guides/syntax-highlighting.server.mdx +++ b/docs/guides/syntax-highlighting.server.mdx @@ -5,7 +5,7 @@ export const info = { {name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'} ], published: new Date('2021-10-06'), - modified: new Date('2022-02-01') + modified: new Date('2022-06-17') } # Syntax highlighting @@ -35,15 +35,13 @@ Use either [`rehype-highlight`][rehype-highlight] import rehypeHighlight from 'rehype-highlight' import {compile} from '@mdx-js/mdx' -main(`~~~js +const code = `~~~js console.log(1) -~~~`) +~~~` -async function main(code) { - console.log( - String(await compile(code, {rehypePlugins: [rehypeHighlight]})) - ) -} +console.log( + String(await compile(code, {rehypePlugins: [rehypeHighlight]})) +) ```
diff --git a/packages/mdx/readme.md b/packages/mdx/readme.md index 72f8336c2..e5062ed8c 100644 --- a/packages/mdx/readme.md +++ b/packages/mdx/readme.md @@ -78,12 +78,9 @@ Add some code in `example.js` to compile `example.mdx` to JavaScript: import {promises as fs} from 'node:fs' import {compile} from '@mdx-js/mdx' -main() +const compiled = await compile(await fs.readFile('example.mdx')) -async function main() { - const compiled = await compile(await fs.readFile('example.mdx')) - console.log(String(compiled)) -} +console.log(String(compiled)) ``` Yields roughly: @@ -285,12 +282,10 @@ A module `example.js`: ```js import {compile} from '@mdx-js/mdx' -main('export const no = 3.14\n\n# hi {no}') +const code = 'export const no = 3.14\n\n# hi {no}' -async function main(code) { - console.log(String(await compile(code, {outputFormat: 'program'}))) // Default - console.log(String(await compile(code, {outputFormat: 'function-body'}))) -} +console.log(String(await compile(code, {outputFormat: 'program'}))) // Default +console.log(String(await compile(code, {outputFormat: 'function-body'}))) ``` …yields: @@ -383,13 +378,10 @@ Say we have a module `example.js`: ```js import {compile} from '@mdx-js/mdx' -main() +const code = 'export {number} from "./data.js"\n\n# hi' +const baseUrl = 'https://a.full/url' // Typically `import.meta.url` -async function main() { - const code = 'export {number} from "./data.js"\n\n# hi' - const baseUrl = 'https://a.full/url' // Typically `import.meta.url` - console.log(String(await compile(code, {baseUrl}))) -} +console.log(String(await compile(code, {baseUrl}))) ``` …now running `node example.js` yields: @@ -428,14 +420,11 @@ import {promises as fs} from 'node:fs' import * as runtime from 'react/jsx-runtime' import {evaluate} from '@mdx-js/mdx' -main() +const path = 'example.mdx' +const value = await fs.readFile(path) +const MDXContent = (await evaluate({path, value}, runtime)).default -async function main() { - const path = 'example.mdx' - const value = await fs.readFile(path) - const MDXContent = (await evaluate({path, value}, runtime)).default - console.log(MDXContent()) -} +console.log(MDXContent()) ``` Running that would normally (production) yield: @@ -451,14 +440,12 @@ Error: Expected component `NoteIcon` to be defined: you likely forgot to import, But if we change add `development: true` to our example: ```diff -@@ -7,6 +7,6 @@ main() - async function main() { - const path = 'example.mdx' - const value = await fs.readFile(path) -- const MDXContent = (await evaluate({path, value}, runtime)).default -+ const MDXContent = (await evaluate({path, value}, {development: true, ...runtime})).default - console.log(MDXContent({})) - } +@@ -7,6 +7,6 @@ + const path = 'example.mdx' + const value = await fs.readFile(path) +-const MDXContent = (await evaluate({path, value}, runtime)).default ++const MDXContent = (await evaluate({path, value}, {development: true, ...runtime})).default + console.log(MDXContent({})) ``` And we’d run it again, we’d get: @@ -491,16 +478,12 @@ import {promises as fs} from 'node:fs' import {SourceMapGenerator} from 'source-map' import {compile} from '@mdx-js/mdx' -main() - -async function main() { - const file = await compile( - {path: 'example.mdx', value: await fs.readFile('example.mdx')}, - {SourceMapGenerator} - ) +const file = await compile( + {path: 'example.mdx', value: await fs.readFile('example.mdx')}, + {SourceMapGenerator} +) - console.log(file.map) -} +console.log(file.map) ``` …yields: @@ -724,12 +707,9 @@ import remarkPresetLintConsistent from 'remark-preset-lint-consistent' // Lint r import {reporter} from 'vfile-reporter' import {compile} from '@mdx-js/mdx' -main() +const file = await compile('*like this* or _like this_?', {remarkPlugins: [remarkPresetLintConsistent]}) -async function main() { - const file = await compile('*like this* or _like this_?', {remarkPlugins: [remarkPresetLintConsistent]}) - console.error(reporter(file)) -} +console.error(reporter(file)) ``` Yields: