"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", ul: "ul", ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["As part of ", _jsx(_components.a, { href: "/hello-2023", children: "my 2023 goals" }), ", I plan on focusing heavily\non MDX DX."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "performance" }), "\n", _jsx(_components.li, { children: "authoring" }), "\n", _jsx(_components.li, { children: "path to delight" }), "\n", _jsx(_components.li, { children: "papercuts" }), "\n"] }), "\n", _jsx(_components.p, { children: "Getting my blog up and running again with Next.js and sourcing all\npages (before rendering the actual MDX files) the timing is only 7s\nwhich is great." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-sh", children: "$ yarn build\nyarn run v1.22.19\n$ turbo run build\n• Packages in scope: tsconfig, www\n• Running build in 2 packages\n• Remote caching disabled\nwww:build: cache miss, executing 34a516d951de678e\nwww:build: $ next build\nwww:build: info - Loaded env from /Users/johno/c/johno.com/apps/www/.env\nwww:build: info - Linting and checking validity of types...\nwww:build: info - Creating an optimized production build...\nwww:build: info - Compiled successfully\nwww:build: info - Collecting page data...\nwww:build: info - Generating static pages (0/113)\nwww:build: info - Generating static pages (28/113)\nwww:build: info - Generating static pages (56/113)\nwww:build: info - Generating static pages (84/113)\nwww:build: info - Generating static pages (113/113)\nwww:build: info - Finalizing page optimization...\nwww:build:\nwww:build: Route (pages) Size First Load JS\nwww:build: ┌ ○ / 1.09 kB 75.2 kB\nwww:build: ├ /_app 0 B 74.1 kB\nwww:build: ├ ● /[...slug] (2071 ms) 316 B 74.4 kB\nwww:build: ├ ├ /13-checks\nwww:build: ├ ├ /80-20\nwww:build: ├ ├ /add-a-prop-to-jsx-elements-with-babel\nwww:build: ├ └ [+91 more paths]\nwww:build: ├ ○ /404 181 B 74.3 kB\nwww:build: ├ ○ /about 968 B 75.1 kB\nwww:build: ├ ○ /confirm 702 B 74.8 kB\nwww:build: ├ ○ /confirmed 614 B 74.7 kB\nwww:build: ├ ○ /contact 421 B 74.5 kB\nwww:build: ├ ○ /journal 736 B 74.8 kB\nwww:build: ├ ○ /journal/1-component-shadowing-with-theme-composition-in-gatsby 2.86 kB 77 kB\nwww:build: ├ ○ /journal/2-blocks-desktop 1.81 kB 75.9 kB\nwww:build: ├ ○ /journal/3-isolated-theme-ui-context 1.42 kB 75.5 kB\nwww:build: ├ ○ /journal/4-remark-and-slate-serialization 4.49 kB 78.6 kB\nwww:build: ├ ○ /journal/5-gatsby-theme-blog-child-theme 2.43 kB 76.5 kB\nwww:build: ├ ○ /newsletter 1.05 kB 75.2 kB\nwww:build: ├ ○ /projects 1.29 kB 75.4 kB\nwww:build: ├ ○ /resume 1.68 kB 75.8 kB\nwww:build: ├ ○ /videos 1.13 kB 75.2 kB\nwww:build: ├ ○ /writing 1.53 kB 75.6 kB\nwww:build: └ ○ /writing/archives 541 B 74.6 kB\nwww:build: + First Load JS shared by all 74.7 kB\nwww:build: ├ chunks/framework-93435e5523790c31.js 45.4 kB\nwww:build: ├ chunks/main-d309b8651496a8ed.js 27.1 kB\nwww:build: ├ chunks/pages/_app-3ecbb4e8c37798b9.js 924 B\nwww:build: ├ chunks/webpack-4e7214a60fad8e88.js 712 B\nwww:build: └ css/e72ed9edeeb9a978.css 613 B\nwww:build:\nwww:build: ○ (Static) automatically rendered as static HTML (uses no initial props)\nwww:build: ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)\nwww:build:\n\n Tasks: 1 successful, 1 total\nCached: 0 cached, 1 total\n Time: 7.284s\n" }) }), "\n", _jsx(_components.p, { children: "Though, right now, there's just sourcing of the files under a catch-all dynamic route." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "export async function getStaticProps({\n params,\n}: GetStaticPropsContext): Promise<\n GetStaticPropsResult\n> {\n const source = getMDXFileSourceFromSlug(fromNextParamsSlug(params?.slug));\n\n return {\n props: {\n source,\n },\n };\n}\n\nexport async function getStaticPaths(): Promise<\n GetStaticPathsResult\n> {\n const paths = getFilePaths()\n .map(getSlugForMDXFile)\n .map(formatSlugForNextGetStaticPaths);\n\n return {\n paths,\n fallback: false,\n };\n}\n" }) }), "\n", _jsx(_components.p, { children: "I expect that this will become quite a bit slower when I add rendering." }), "\n", _jsx(_components.p, { children: "I wired up compiling and rendering for the MDX files" }), "\n", _jsx(_components.h3, { id: "compiling", children: _jsx(_components.a, { href: "#compiling", children: "Compiling" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { compile as compileMDX } from \"@mdx-js/mdx\";\n\nexport async function compile(file: VFile) {\n const code = await compileMDX(file, {\n outputFormat: \"function-body\",\n development: false,\n });\n\n return code;\n}\n" }) }), "\n", _jsx(_components.h3, { id: "rendering", children: _jsx(_components.a, { href: "#rendering", children: "Rendering" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "export default function Page({ source, matter }: PageProps) {\n const [mod, setMod] = useState();\n const Content = mod ? mod.default : Fragment;\n\n useEffect(() => {\n const runMDX = async () => {\n const newMod = await run(source, runtime);\n setMod(newMod);\n };\n\n runMDX();\n }, [source]);\n\n return (\n

{matter.title}

\n \n

\n );\n}\n" }) }), "\n", _jsx(_components.p, { children: "And it all worked, with decent timing for building." }), "\n", _jsx(_components.h3, { id: "cold-cache", children: _jsx(_components.a, { href: "#cold-cache", children: "Cold cache" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-sh", children: " Tasks: 1 successful, 1 total\nCached: 0 cached, 1 total\n Time: 24.607s\n" }) }), "\n", _jsx(_components.h3, { id: "warm-cache-one-page-with-a-change", children: _jsx(_components.a, { href: "#warm-cache-one-page-with-a-change", children: "Warm cache (one page with a change)" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-sh", children: " Tasks: 1 successful, 1 total\nCached: 0 cached, 1 total\n Time: 8.25s\n" }) }), "\n", _jsx(_components.p, { children: "Though, it brought up a different issue with imports." }), "\n", _jsx(_components.h2, { id: "handling-imports-in-mdx-compilation", children: _jsx(_components.a, { href: "#handling-imports-in-mdx-compilation", children: "Handling imports in MDX compilation" }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };