config and jotai -> valtio

example/app/(main)/layout.tsx

@@ -1,15 +1,15 @@
+import Link from "next/link"
 import { ReactNode } from "react"
 
 export default function MainLayout({ children }: { children: ReactNode }) {
-  // next/linkは意図的に避けている
   return (
     <main style={{ maxWidth: "32rem", margin: "auto" }}>
       <header style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
-        <a href="/">
+        <Link href="/" passHref>
           <h1>react-mfm demo</h1>
-        </a>
+        </Link>
         <nav>
-          <a href="/rsc">RSC demo</a>
+          <Link href="/rsc">RSC demo</Link>
         </nav>
       </header>
       {children}

example/app/(main)/page.tsx

@@ -1,7 +1,8 @@
 "use client"
 
-import { useState } from "react"
-import Mfm from "react-mfm"
+import { useEffect, useState } from "react"
+import Mfm, { $mfmConfig } from "react-mfm"
+import { basePath } from "../consts"
 
 const usage = `
 \`\`\`tsx
@@ -34,6 +35,11 @@ react-mfm [search]
 export default function IndexPage() {
   const [text, setText] = useState(example)
 
+  useEffect(() => {
+    // どこ置けばええんやろ(Client Componentに置く必要有)
+    $mfmConfig.assetsBase = basePath
+  }, [])
+
   return (
     <>
       <h2>Usage of react-mfm</h2>

example/app/consts.ts

@@ -0,0 +1,3 @@
+import config from "../next.config"
+
+export const basePath = config.basePath

example/next.config.js

@@ -1,4 +1,6 @@
+/** @type {import("next").NextConfig} */
 export default {
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   output: "export",
   webpack: config => {
     config.module.rules.push({

package.json

@@ -4,11 +4,11 @@
   "version": "0.1.0",
   "author": "YamaD <[email protected]>",
   "dependencies": {
-    "jotai": ">=2.2.0 <3",
     "katex": "0.16.9",
     "mfm-js": "0.24.0",
     "misskey-js": "0.0.16",
-    "shiki": "0.14.7"
+    "shiki": "0.14.7",
+    "valtio": "1.13.0"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "7.39.1",

src/components/Code.tsx

@@ -1,70 +1,73 @@
 "use client"
 
-import { atom, useAtom, useAtomValue } from "jotai"
-import { atomWithDefault } from "jotai/utils"
-import { FC, Suspense, useCallback, useMemo } from "react"
+import { FC, Suspense, useEffect, useMemo } from "react"
 import { BUNDLED_LANGUAGES, Lang, getHighlighter, setWasm } from "shiki"
+import { proxy, useSnapshot } from "valtio"
+import { derive } from "valtio/utils"
+import { $mfmConfig } from ".."
 import { dirname, isServer } from "../utils"
 
 type Props = {
   code: string
   lang?: string
 }
 
-const theme = "dark-plus"
+const theme = "monokai"
 const defaultLang = "js"
+const langs: Lang[] = [defaultLang]
 const bundledLangs = BUNDLED_LANGUAGES.map(lang => [lang.id, ...(lang.aliases ?? [])]).flat()
 
-const highlighterAtom = atom(async () => {
-  if (isServer) {
-    const resolve = import.meta.resolve ?? require.resolve
-    const base = dirname(resolve("shiki")) + "/../" // shiki/dist/index.js -> shiki/dist/../
-    return getHighlighter({
-      theme,
-      langs: [defaultLang],
-      paths: {
-        themes: base + "themes",
-        languages: base + "languages",
-      },
-    })
-  } else {
-    const [shiki, onig, themeJson] = await Promise.all([
-      import("shiki"),
-      import("vscode-oniguruma/release/onig.wasm"),
-      import(`shiki/themes/${theme}.json`),
-    ])
-    setWasm(await fetch(onig.default))
-    return shiki.getHighlighter({
-      theme: themeJson.default,
-      langs: [defaultLang],
-    })
-  }
+const derived = derive({
+  highlighter: async get => {
+    if (isServer) {
+      const resolve = import.meta.resolve ?? require.resolve
+      const base = dirname(resolve("shiki")) + "/../" // shiki/dist/index.js -> shiki/dist/../
+      return getHighlighter({
+        theme,
+        langs,
+        paths: {
+          themes: base + "themes",
+          languages: base + "languages",
+        },
+      })
+    } else {
+      const [shiki, onig, themeJson] = await Promise.all([
+        import("shiki"),
+        import("vscode-oniguruma/release/onig.wasm"),
+        import(`shiki/themes/${theme}.json`),
+      ])
+      setWasm(await fetch(onig.default))
+      return shiki.getHighlighter({
+        theme: themeJson.default,
+        langs,
+        paths: {
+          languages: get($mfmConfig).assetsBase + "/languages",
+        },
+      })
+    }
+  },
 })
 
-const langsAtom = atomWithDefault<string[] | Promise<string[]>>(async get =>
-  (await get(highlighterAtom)).getLoadedLanguages(),
-)
+const state = proxy({
+  langs,
+})
 
-const CodeSuspense = ({ code, lang = "js" }: Props) => {
-  const highlighter = useAtomValue(highlighterAtom)
-  const [langs, setLangs] = useAtom(langsAtom)
+const CodeSuspense = ({ code, lang = defaultLang }: Props) => {
+  const { highlighter } = useSnapshot(derived)
+  const { langs } = useSnapshot(state)
 
-  const loadLang = useCallback(
-    async (lang: string) => {
-      if (!bundledLangs.includes(lang)) return
-      await highlighter.loadLanguage(lang as Lang)
-      setLangs(highlighter.getLoadedLanguages())
-    },
-    [highlighter, setLangs],
-  )
-
-  const html = useMemo(() => {
-    if (!langs.includes(lang)) {
-      loadLang(lang)
-      return highlighter.codeToHtml(code, { lang: defaultLang })
+  useEffect(() => {
+    if (!langs.includes(lang as Lang) && bundledLangs.includes(lang)) {
+      highlighter.loadLanguage(lang as Lang).then(() => {
+        state.langs = highlighter.getLoadedLanguages()
+      })
     }
-    return highlighter.codeToHtml(code, { lang })
-  }, [highlighter, langs, loadLang, code, lang])
+  }, [highlighter, langs, lang])
+
+  const html = useMemo(
+    () => highlighter.codeToHtml(code, { lang: langs.includes(lang as Lang) ? lang : defaultLang }),
+    [highlighter, langs, code, lang],
+  )
 
   return <div className="mfm_blockCode" dangerouslySetInnerHTML={{ __html: html }} />
 }

src/components/Formula.tsx

@@ -1,18 +1,20 @@
 "use client"
 
-import { atom, useAtomValue } from "jotai"
 import "katex/dist/katex.min.css"
 import { FC, Suspense, useMemo } from "react"
+import { proxy, useSnapshot } from "valtio"
 
 type Props = {
   formula: string
   block?: boolean
 }
 
-const katexAtom = atom(async () => (await import("katex")).default)
+const state = proxy({
+  katex: import("katex").then(m => m.default),
+})
 
 const FormulaSuspense = ({ formula, block }: Props) => {
-  const { renderToString } = useAtomValue(katexAtom)
+  const { renderToString } = useSnapshot(state).katex
   const html = useMemo(
     () =>
       renderToString(formula, {

src/index.tsx

@@ -1,6 +1,8 @@
 import { MfmNode, parse, parseSimple } from "mfm-js"
+import { proxy, useSnapshot } from "valtio"
 import Node from "./Node"
 import "./style.css"
+import { keys } from "./utils"
 
 type MfmBasicProps = {
   plain?: boolean
@@ -16,5 +18,16 @@ const MfmBase =
 const Mfm = MfmBase(parse)
 const MfmSimple = MfmBase(parseSimple)
 
-export * from "./ctx"
-export { Mfm, MfmBasicProps, MfmSimple, Mfm as default }
+type MfmConfig = {
+  assetsBase?: string
+}
+
+const $mfmConfig = proxy<MfmConfig>({})
+const resetMfmConfig = (config: MfmConfig) => {
+  keys(config).forEach(key => {
+    $mfmConfig[key] = config[key]
+  })
+}
+const useMfmConfig = () => useSnapshot($mfmConfig)
+
+export { $mfmConfig, Mfm, MfmBasicProps, MfmConfig, MfmSimple, Mfm as default, resetMfmConfig, useMfmConfig }

src/utils.ts

@@ -7,6 +7,8 @@ export const intersperse = <T>(a: T[], x: T) => {
   return res
 }
 
+export const keys = <T extends { [key: string]: unknown }>(o: T): (keyof T)[] => Object.keys(o)
+
 export const isServer = typeof window === "undefined"
 // @ts-ignore
 export const isWebpack = typeof __webpack_require__ !== "undefined" && process.env.NODE_ENV !== "development"