Vite 3, React 18, MDX 2 and Ladle!

.ladle/components.jsx

@@ -0,0 +1,28 @@
+import { useMemo } from 'react'
+import { createRenderer as createFelaRenderer } from 'fela'
+import { RendererProvider as FelaRendererProvider } from 'react-fela'
+import cssReset from '../src/cssReset'
+
+export const Provider = ({ children, globalState }) => {
+  // Reload Fela renderer when switching to/from iframe in Ladle
+  // https://github.com/tajo/ladle/issues/207
+  const doc = getDocument(globalState.story)
+  const renderer = useMemo(() => getFelaRenderer(), [doc])
+
+  return (
+    <FelaRendererProvider renderer={renderer} targetDocument={doc}>
+      {children}
+    </FelaRendererProvider>
+  )
+}
+
+function getDocument(story) {
+  const iframe = document.querySelector(`[title='Story ${story}']`)
+  return iframe && iframe.contentDocument ? iframe.contentDocument : document
+}
+
+function getFelaRenderer() {
+  const renderer = createFelaRenderer({ devMode: true })
+  cssReset(renderer)
+  return renderer
+}

.tool-versions

@@ -0,0 +1 @@
+nodejs 16.16.0

README.md

@@ -12,7 +12,7 @@ Install dependencies with `yarn`, then...
 
 - **`yarn dev`** starts a dev server at [localhost:3000](http://localhost:3000/)
 - **`yarn build`** builds the static site into `dist/static`
-- **`yarn storybook`** starts [Storybook](https://storybook.js.org/)
+- **`yarn stories`** starts [Ladle](https://ladle.dev/)
 - **`yarn page my-new-page`** scaffolds a file for a new page
 - **`yarn component MyNewComponent`** scaffolds files for a new component
 

package.json

@@ -2,31 +2,25 @@
   "name": "tropical",
   "version": "10.2.0",
   "dependencies": {
-    "@babel/core": "^7.14.6",
-    "@mdx-js/mdx": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
+    "@ladle/react": "^2.0.2",
+    "@mdx-js/mdx": "^2.1.2",
+    "@mdx-js/react": "^2.1.2",
     "@mdx-js/rollup": "^2.0.0-rc.1",
-    "@storybook/addon-actions": "^6.4.8",
-    "@storybook/addon-essentials": "^6.4.8",
-    "@storybook/addon-links": "^6.4.8",
-    "@storybook/react": "^6.4.8",
-    "@vitejs/plugin-react": "^1.1.4",
-    "babel-loader": "^8.2.2",
+    "@vitejs/plugin-react": "^2.0.0",
     "dayjs": "^1.10.6",
     "express": "^4.17.1",
     "fela": "^12.0.2",
     "fela-dom": "^12.0.2",
     "fs-extra": "^10.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-fela": "^12.0.2",
     "react-head": "^3.4.0",
     "react-syntax-highlighter": "^15.5.0",
     "rehype-slug": "^5.0.1",
-    "storybook-builder-vite": "^0.1.10",
-    "tropical-islands": "^1.0.0",
-    "tropical-scaffold": "^1.0.0",
-    "vite": "^2.4.2"
+    "tropical-islands": "^2.0.0",
+    "tropical-scaffold": "^2.0.0",
+    "vite": "^3.0.4"
   },
   "engines": {
     "node": ">=16"
@@ -39,8 +33,7 @@
     "build": "yarn build:clientAssets && yarn build:server && node --experimental-specifier-resolution=node prerender",
     "build:clientAssets": "vite build --outDir dist/static",
     "build:server": "vite --config vite.config.server.js build --outDir dist/server --ssr src/entry-server.jsx",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "stories": "ladle serve -p 6006",
     "page": "tropical-scaffold --type=page",
     "component": "tropical-scaffold --type=component"
   },

server.js

@@ -9,7 +9,8 @@ const dir = dirname(fileURLToPath(import.meta.url))
 async function createServer() {
   const app = express()
   const vite = await createViteServer({
-    server: { middlewareMode: 'ssr' }
+    appType: 'custom',
+    server: { middlewareMode: true }
   })
   app.use(vite.middlewares)
 

src/components/TropicalCodeBlock/TropicalCodeBlock.jsx → src/components/tropical/CodeBlock/CodeBlock.jsx

@@ -1,19 +1,18 @@
 /*
-<TropicalCodeBlock> is used by <Renderer> (in entry-server.jsx) to render MDX fenced code blocks, e.g.
+<CodeBlock> is used by <Renderer> (in entry-server.jsx) to render MDX fenced code blocks.
 
-```js
-console.log('Hello world')
-```
+You can restyle it, use a different theme, or otherwise change it to suit your needs.
+Just don't delete it or change the props API, or MDX rendering will break.
 
-You can restyle it and change it to suit your needs. For more info:
+For more info:
 https://mdxjs.com/guides/syntax-highlighting (Tropical currently does "Runtime" syntax highlighting — though only during prerendering)
 https://github.com/react-syntax-highlighter/react-syntax-highlighter
 */
 
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/prism'
 
-export function TropicalCodeBlock ({ children, language }) {
+export function CodeBlock ({ children, language }) {
   return (
     <SyntaxHighlighter language={language} style={dracula} customStyle={{ fontSize: '0.9rem' }}>
       {children}

src/components/tropical/CodeBlock/CodeBlock.stories.jsx

@@ -0,0 +1,32 @@
+import { CodeBlock } from './CodeBlock'
+
+export default { title: 'CodeBlock' }
+
+export const JS = () => (
+  <CodeBlock language='javascript'>{`function relax() {
+  console.log('Welcome to Tropical')
+}`}</CodeBlock>
+)
+
+export const JSX = () => (
+  <CodeBlock language='jsx'>{`function Relax ({ drink = 'Singapore Sling' }) {
+  return (
+    <div>
+      <Cocktail drink={drink} />
+    </div>
+  )
+}`}</CodeBlock>
+)
+
+export const Ruby = () => (
+  <CodeBlock language='ruby'>{`def relax (drink = 'Singapore Sling')
+  puts "Welcome to Tropical! Enjoy a #{drink}."
+end`}</CodeBlock>
+)
+
+export const NoLanguage = () => (
+  <CodeBlock>{`This is
+      not
+  any particular
+        language`}</CodeBlock>
+)

src/components/tropical/CodeBlock/index.js

@@ -0,0 +1 @@
+export * from './CodeBlock'

src/entry-server.jsx

@@ -5,7 +5,7 @@ import { renderToMarkup } from 'fela-dom'
 import { MDXProvider } from '@mdx-js/react'
 import { HeadProvider, Link } from 'react-head'
 import { DefaultLayout } from './layouts/DefaultLayout'
-import { TropicalCodeBlock } from './components/TropicalCodeBlock'
+import { CodeBlock } from './components/tropical/CodeBlock'
 import cssReset from './cssReset'
 
 export class Renderer {
@@ -50,9 +50,9 @@ export class Renderer {
           <MDXProvider
             components={{
               pre: ({ children }) => (
-                <TropicalCodeBlock language={children.props.className?.replace(/language-/, '')}>
+                <CodeBlock language={children.props.className?.replace(/language-/, '')}>
                   {children.props.children.trim()}
-                </TropicalCodeBlock>
+                </CodeBlock>
               )
             }}
           >

src/pages/blog-post-2.mdx

@@ -10,3 +10,8 @@ export const meta = {
 The much anticipated sequel to my first blog post. Lorem ipsum yada yada.
 
 This is just a page with a 'post' tag.
+
+```js
+// This one has a syntax highlighted code block
+const tropical = 'awesome'
+```

src/pages/index.mdx

@@ -9,7 +9,7 @@ export const meta = {
 
 - **`yarn dev`** starts a dev server at [localhost:3000](http://localhost:3000/)
 - **`yarn build`** builds the static site into `dist/static`
-- **`yarn storybook`** starts [Storybook](https://storybook.js.org/)
+- **`yarn stories`** starts [Ladle](https://ladle.dev/)
 - **`yarn page my-new-page`** scaffolds a file for a new page
 - **`yarn component MyNewComponent`** scaffolds files for a new component
 
@@ -19,7 +19,7 @@ This is your homepage. Pages live in `src/pages` and are either `.mdx` files (li
 
 ## Metadata
 
-Pages can have tags, dates, and all kinds of other metadata. That lets you do stuff like render a date-ordered list all pages with the 'post' tag:
+Pages can have tags, dates, and all kinds of other metadata. That lets you do stuff like render a date-ordered list of all pages with the 'post' tag:
 
 import { pagesWithTag } from '../utils'
 import dayjs from 'dayjs'

vite.config.client.js

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite'
+import { dirname, resolve } from 'path'
+import { fileURLToPath } from 'url'
+import { plugins, build } from './vite.config.js'
+
+const dir = dirname(fileURLToPath(import.meta.url))
+
+export default defineConfig({
+  plugins,
+  build: {
+    ...build,
+    rollupOptions: {
+      input: {
+        client: resolve(dir, 'index.html'),
+        // We'll never actually use this JS bundle, but need it to build assets that are only referenced by SSR pages
+        ssrAssetCollector: resolve(dir, 'src/entry-server.jsx')
+      }
+    }
+  }
+})

vite.config.js

@@ -1,22 +1,15 @@
 import { defineConfig } from 'vite'
-import { dirname, resolve } from 'path'
-import { fileURLToPath } from 'url'
 import react from '@vitejs/plugin-react'
 import mdx from '@mdx-js/rollup'
 import rehypeSlug from 'rehype-slug'
 
-const dir = dirname(fileURLToPath(import.meta.url))
+export const plugins = [
+  react(),
+  mdx({ rehypePlugins: [rehypeSlug], providerImportSource: '@mdx-js/react' })
+]
 
-export default defineConfig({
-  plugins: [react(), mdx({ rehypePlugins: [rehypeSlug], providerImportSource: '@mdx-js/react' })],
-  build: {
-    assetsInlineLimit: 0,
-    rollupOptions: {
-      input: {
-        client: resolve(dir, 'index.html'),
-        // We'll never actually use this bundle, but need it to build assets that are only referenced by SSR pages
-        ssrAssetCollector: resolve(dir, 'src/entry-server.jsx')
-      }
-    }
-  }
-})
+export const build = {
+  assetsInlineLimit: 0
+}
+
+export default defineConfig({ plugins, build })