minor: LumaTocを残す方針の廃止，hast-to-estreeして配列としてプロパティから渡すように変更．そうしないとNext…

….js等のRSCにて特別なオブジェクトに置き換わっている際に型通りにならない
luma-dev · Feb 12, 2024 · 3ee57e6 · 3ee57e6
1 parent 2f48678
commit 3ee57e6
Show file tree

Hide file tree

Showing 17 changed files with 264 additions and 238 deletions.
diff --git a/README.md b/README.md
@@ -68,7 +68,6 @@ export default withMDX(nextConfig);
 // mdx-components.tsx
 import type {
   LumaMdxLayoutProps,
-  LumaTocProps,
   LumaKatexProps,
   LumaCounterProps,
   LumaLoadedProps,
@@ -85,13 +84,6 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
         {props.children}
       </div>
     ),
-    LumaToc: (props: LumaTocProps) => (
-      /* Replace with your component */
-      <div>
-        <div>LumaToc</div>
-        {props.children}
-      </div>
-    ),
     LumaKatex: (props: LumaKatexProps) => (
       /* Replace with your component */
       <div>
@@ -270,14 +262,16 @@ hello
 以下のように変換される
 
 ```mdx
-<LumaMdxLayout meta={{ foo: 'bar' }} file={...} toc={...}>
+<LumaMdxLayout meta={{ foo: 'bar' }} file={...} toc={...} headers={...}>
 hello
 </LumaMdxLayout>
 ```
 
 - `file` はmdxファイル自体の情報
 - `toc` はヘッダをまとめた情報
-  - `[{ tag: 'h1', level: 1, titleComponent: ..., titleText: '...', slug: '...', children: [...] }, ...]` という形式になる
+  - `[{ tag: 'h1', level: 1, index: 0, titleComponent: ..., titleText: '...', slug: '...', children: [...] }, ...]` という形式になる
+- `headers` はヘッダの中身のレンダー済みコンポーネントのリスト
+  - `toc` のインデックス情報がこちらのリストのインデックスに対応する
 
 ## remark-save
 

diff --git a/examples/render/output/counter.mdx.js b/examples/render/output/counter.mdx.js
@@ -10,10 +10,9 @@ function _createMdxContent(props) {
       p: "p",
       ...props.components,
     },
-    { LumaCounter, LumaMdxLayout, LumaToc } = _components;
+    { LumaCounter, LumaMdxLayout } = _components;
   if (!LumaCounter) _missingMdxReference("LumaCounter", true);
   if (!LumaMdxLayout) _missingMdxReference("LumaMdxLayout", true);
-  if (!LumaToc) _missingMdxReference("LumaToc", true);
   return _jsxs(LumaMdxLayout, {
     file: JSON.parse(
       '{"data":{},"history":[],"messages":[],"value":"<C $foo template=\\"%1(/%n): \\" />\\n\\n# [#foo]用意する\\n\\n...\\n\\n# [#foo]調理する\\n\\n...\\n\\n# [#foo]食べる\\n\\n<C template=\\"%0.\\" />\\n\\n[#]フォークを持つ\\n[#]ナイフを持つ\\n[#]切る\\n\\n<C template=\\"[重要] %0.\\" keep />\\n\\n[#]フォークで刺す\\n[#]ほおばる\\n\\n<C template=\\"%0.\\" />\\n\\n片付け編:\\n\\n[#]洗う\\n[#]乾かす\\n"}',
@@ -22,47 +21,45 @@ function _createMdxContent(props) {
     toc: JSON.parse(
       '[{"tag":"h1","index":0,"depth":1,"titleText":"用意する","level":1,"slug":"用意する","children":[]},{"tag":"h1","index":1,"depth":1,"titleText":"調理する","level":1,"slug":"調理する","children":[]},{"tag":"h1","index":2,"depth":1,"titleText":"食べる","level":1,"slug":"食べる","children":[]}]',
     ),
-    children: [
-      _jsxs(LumaToc, {
-        toc: JSON.parse(
-          '[{"tag":"h1","index":0,"depth":1,"titleText":"用意する","level":1,"slug":"用意する","children":[]},{"tag":"h1","index":1,"depth":1,"titleText":"調理する","level":1,"slug":"調理する","children":[]},{"tag":"h1","index":2,"depth":1,"titleText":"食べる","level":1,"slug":"食べる","children":[]}]',
-        ),
+    headers: [
+      _jsxs(_Fragment, {
         children: [
-          _jsxs(_Fragment, {
-            children: [
-              _jsx(LumaCounter, {
-                $foo: true,
-                template: "%1(/%n): ",
-                index: JSON.parse("0"),
-                total: JSON.parse("3"),
-              }),
-              "用意する",
-            ],
+          _jsx(LumaCounter, {
+            $foo: true,
+            template: "%1(/%n): ",
+            index: JSON.parse("0"),
+            total: JSON.parse("3"),
+            "luma:isInsideToc": JSON.parse("true"),
           }),
-          _jsxs(_Fragment, {
-            children: [
-              _jsx(LumaCounter, {
-                $foo: true,
-                template: "%1(/%n): ",
-                index: JSON.parse("1"),
-                total: JSON.parse("3"),
-              }),
-              "調理する",
-            ],
+          "用意する",
+        ],
+      }),
+      _jsxs(_Fragment, {
+        children: [
+          _jsx(LumaCounter, {
+            $foo: true,
+            template: "%1(/%n): ",
+            index: JSON.parse("1"),
+            total: JSON.parse("3"),
+            "luma:isInsideToc": JSON.parse("true"),
           }),
-          _jsxs(_Fragment, {
-            children: [
-              _jsx(LumaCounter, {
-                $foo: true,
-                template: "%1(/%n): ",
-                index: JSON.parse("2"),
-                total: JSON.parse("3"),
-              }),
-              "食べる",
-            ],
+          "調理する",
+        ],
+      }),
+      _jsxs(_Fragment, {
+        children: [
+          _jsx(LumaCounter, {
+            $foo: true,
+            template: "%1(/%n): ",
+            index: JSON.parse("2"),
+            total: JSON.parse("3"),
+            "luma:isInsideToc": JSON.parse("true"),
           }),
+          "食べる",
         ],
       }),
+    ],
+    children: [
       void (globalThis[_rehypeKatexContext0] = ""),
       "\n",
       "\n",

diff --git a/examples/render/output/def.mdx.js b/examples/render/output/def.mdx.js
@@ -8,11 +8,10 @@ function _createMdxContent(props) {
       p: "p",
       ...props.components,
     },
-    { DefMapImp, LumaMdxLayout, LumaTerm, LumaToc } = _components;
+    { DefMapImp, LumaMdxLayout, LumaTerm } = _components;
   if (!DefMapImp) _missingMdxReference("DefMapImp", true);
   if (!LumaMdxLayout) _missingMdxReference("LumaMdxLayout", true);
   if (!LumaTerm) _missingMdxReference("LumaTerm", true);
-  if (!LumaToc) _missingMdxReference("LumaToc", true);
   return _jsxs(LumaMdxLayout, {
     file: JSON.parse(
       '{"data":{},"history":[],"messages":[],"value":"---\\ncreated: 2023-01-01\\nhistory:\\n  - 2023-01-02: 誤りを修正\\npublish: false\\nDefMapExp:\\nDefMapImp:\\n  逆元: 行列の逆元\\n---\\n\\n[@逆元]を考える．\\n[@行列の逆元]を考える．\\n[@逆操作]をする．\\n\\n[@]\\n\\n[これはリンク](https://example.com)だよ．\\n{/* 通常のリンクでは先頭の@をエスケープする必要がある */}\\n[\\\\@これもリンク](https://example.com)だよ．\\n区間 [ 1 , 2 ] を考える．\\n\\n{/* 以下のようにすると途中で定義を変えられる */}\\n\\n<DefMapImp 逆元=\\"群の逆元\\" />\\n\\n今度は[@群]について考える．\\n[@逆元]を考える．\\n"}',
@@ -21,10 +20,8 @@ function _createMdxContent(props) {
       '{"created":"2023-01-01","publish":false,"DefMapExp":null,"DefMapImp":{"逆元":"行列の逆元"}}',
     ),
     toc: JSON.parse("[]"),
+    headers: [],
     children: [
-      _jsx(LumaToc, {
-        toc: JSON.parse("[]"),
-      }),
       void (globalThis[_rehypeKatexContext0] = ""),
       "\n",
       _jsxs(_components.p, {

diff --git a/examples/render/output/ex1.mdx.js b/examples/render/output/ex1.mdx.js
@@ -16,13 +16,12 @@ function _createMdxContent(props) {
       pre: "pre",
       ...props.components,
     },
-    { Bar, Foo, LumaKatex, LumaMdxLayout, LumaTerm, LumaToc } = _components;
+    { Bar, Foo, LumaKatex, LumaMdxLayout, LumaTerm } = _components;
   if (!Bar) _missingMdxReference("Bar", true);
   if (!Foo) _missingMdxReference("Foo", true);
   if (!LumaKatex) _missingMdxReference("LumaKatex", true);
   if (!LumaMdxLayout) _missingMdxReference("LumaMdxLayout", true);
   if (!LumaTerm) _missingMdxReference("LumaTerm", true);
-  if (!LumaToc) _missingMdxReference("LumaToc", true);
   return _jsxs(LumaMdxLayout, {
     file: JSON.parse(
       '{"data":{},"history":[],"messages":[],"value":"# これはh1だよ\\n\\n## これはh2だよ\\n\\n文章がここにくるよ1．\\n文章がここにくるよ2．\\n\\n```ts {2}\\n// これはコードブロックだよ．\\ndeclare const name: string;\\nconsole.log(name);\\n```\\n\\n[これはリンクだよ，ほんとに．](https://example.com)\\n\\n> これは引用だよ．\\n> これは引用だよ．\\n\\n<Foo>\\n  <Bar>baz</Bar>\\n</Foo>\\n\\n### これは[@重要な]h3だよ\\n\\n文章がここにくるよ3．\\n\\n$a+b$ は $b+a$ と等しい．\\n\\n$$\\n\\\\begin{aligned}\\n  a + b &= b + a \\\\\\\\\\n  a \\\\times b &= b \\\\times a\\n\\\\end{aligned}\\n$$\\n"}',
@@ -31,33 +30,29 @@ function _createMdxContent(props) {
     toc: JSON.parse(
       '[{"tag":"h1","index":0,"depth":1,"titleText":"これはh1だよ","level":1,"slug":"これはh1だよ","children":[{"tag":"h2","index":1,"depth":2,"titleText":"これはh2だよ","level":2,"slug":"これはh2だよ","children":[{"tag":"h3","index":2,"depth":3,"titleText":"これは重要なh3だよ","level":3,"slug":"これは重要なh3だよ","children":[]}]}]}]',
     ),
-    children: [
-      _jsxs(LumaToc, {
-        toc: JSON.parse(
-          '[{"tag":"h1","index":0,"depth":1,"titleText":"これはh1だよ","level":1,"slug":"これはh1だよ","children":[{"tag":"h2","index":1,"depth":2,"titleText":"これはh2だよ","level":2,"slug":"これはh2だよ","children":[{"tag":"h3","index":2,"depth":3,"titleText":"これは重要なh3だよ","level":3,"slug":"これは重要なh3だよ","children":[]}]}]}]',
-        ),
+    headers: [
+      _jsx(_Fragment, {
+        children: "これはh1だよ",
+      }),
+      _jsx(_Fragment, {
+        children: "これはh2だよ",
+      }),
+      _jsxs(_Fragment, {
         children: [
-          _jsx(_Fragment, {
-            children: "これはh1だよ",
-          }),
-          _jsx(_Fragment, {
-            children: "これはh2だよ",
-          }),
-          _jsxs(_Fragment, {
-            children: [
-              "これは",
-              _jsx(LumaTerm, {
-                rawTermRef: "重要な",
-                termRef: "重要な",
-                gotBy: "raw",
-                indexInPage: JSON.parse("0"),
-                totalInPage: JSON.parse("1"),
-              }),
-              "h3だよ",
-            ],
+          "これは",
+          _jsx(LumaTerm, {
+            rawTermRef: "重要な",
+            termRef: "重要な",
+            gotBy: "raw",
+            indexInPage: JSON.parse("0"),
+            totalInPage: JSON.parse("1"),
+            "luma:isInsideToc": JSON.parse("true"),
           }),
+          "h3だよ",
         ],
       }),
+    ],
+    children: [
       void (globalThis[_rehypeKatexContext0] = ""),
       "\n",
       _jsx(_components.h1, {

diff --git a/examples/render/output/headers.mdx.js b/examples/render/output/headers.mdx.js
@@ -10,9 +10,8 @@ function _createMdxContent(props) {
       h2: "h2",
       ...props.components,
     },
-    { LumaMdxLayout, LumaToc } = _components;
+    { LumaMdxLayout } = _components;
   if (!LumaMdxLayout) _missingMdxReference("LumaMdxLayout", true);
-  if (!LumaToc) _missingMdxReference("LumaToc", true);
   return _jsxs(LumaMdxLayout, {
     file: JSON.parse(
       '{"data":{},"history":[],"messages":[],"value":"# hello world\\n\\n## 1. getting started\\n\\n## 2. install\\n\\n## 3. uninstall\\n\\n# description\\n\\n## 1. something\\n\\n## 2. other\\n"}',
@@ -21,35 +20,30 @@ function _createMdxContent(props) {
     toc: JSON.parse(
       '[{"tag":"h1","index":0,"depth":1,"titleText":"hello world","level":1,"slug":"hello_world","children":[{"tag":"h2","index":1,"depth":2,"titleText":"1. getting started","level":2,"slug":"1.getting_started","children":[]},{"tag":"h2","index":2,"depth":2,"titleText":"2. install","level":2,"slug":"2.install","children":[]},{"tag":"h2","index":3,"depth":2,"titleText":"3. uninstall","level":2,"slug":"3.uninstall","children":[]}]},{"tag":"h1","index":4,"depth":1,"titleText":"description","level":1,"slug":"description","children":[{"tag":"h2","index":5,"depth":2,"titleText":"1. something","level":2,"slug":"1.something","children":[]},{"tag":"h2","index":6,"depth":2,"titleText":"2. other","level":2,"slug":"2.other","children":[]}]}]',
     ),
-    children: [
-      _jsxs(LumaToc, {
-        toc: JSON.parse(
-          '[{"tag":"h1","index":0,"depth":1,"titleText":"hello world","level":1,"slug":"hello_world","children":[{"tag":"h2","index":1,"depth":2,"titleText":"1. getting started","level":2,"slug":"1.getting_started","children":[]},{"tag":"h2","index":2,"depth":2,"titleText":"2. install","level":2,"slug":"2.install","children":[]},{"tag":"h2","index":3,"depth":2,"titleText":"3. uninstall","level":2,"slug":"3.uninstall","children":[]}]},{"tag":"h1","index":4,"depth":1,"titleText":"description","level":1,"slug":"description","children":[{"tag":"h2","index":5,"depth":2,"titleText":"1. something","level":2,"slug":"1.something","children":[]},{"tag":"h2","index":6,"depth":2,"titleText":"2. other","level":2,"slug":"2.other","children":[]}]}]',
-        ),
-        children: [
-          _jsx(_Fragment, {
-            children: "hello world",
-          }),
-          _jsx(_Fragment, {
-            children: "1. getting started",
-          }),
-          _jsx(_Fragment, {
-            children: "2. install",
-          }),
-          _jsx(_Fragment, {
-            children: "3. uninstall",
-          }),
-          _jsx(_Fragment, {
-            children: "description",
-          }),
-          _jsx(_Fragment, {
-            children: "1. something",
-          }),
-          _jsx(_Fragment, {
-            children: "2. other",
-          }),
-        ],
+    headers: [
+      _jsx(_Fragment, {
+        children: "hello world",
+      }),
+      _jsx(_Fragment, {
+        children: "1. getting started",
+      }),
+      _jsx(_Fragment, {
+        children: "2. install",
+      }),
+      _jsx(_Fragment, {
+        children: "3. uninstall",
       }),
+      _jsx(_Fragment, {
+        children: "description",
+      }),
+      _jsx(_Fragment, {
+        children: "1. something",
+      }),
+      _jsx(_Fragment, {
+        children: "2. other",
+      }),
+    ],
+    children: [
       void (globalThis[_rehypeKatexContext0] = ""),
       "\n",
       _jsx(_components.h1, {

diff --git a/examples/render/output/katex-0.mdx.js b/examples/render/output/katex-0.mdx.js
@@ -2,20 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { someDef } from "./someDef.txt";
 const _rehypeKatexContext0 = Symbol();
 function _createMdxContent(props) {
-  const { LumaKatex, LumaMdxLayout, LumaToc } = props.components || {};
+  const { LumaKatex, LumaMdxLayout } = props.components || {};
   if (!LumaKatex) _missingMdxReference("LumaKatex", true);
   if (!LumaMdxLayout) _missingMdxReference("LumaMdxLayout", true);
-  if (!LumaToc) _missingMdxReference("LumaToc", true);
   return _jsxs(LumaMdxLayout, {
     file: JSON.parse(
       '{"data":{},"history":[],"messages":[],"value":"import { someDef } from \\"./someDef.txt\\";\\n\\n{\\n(() => {\\nlet x = 4;\\nreturn x;\\n})()\\n}\\n\\n<KatexDef _={someDef} />\\n<KatexDef _=\\"foo\\" />\\n<KatexDef _={\\"bar\\"} />\\n\\n```katex-def\\n\\\\def\\\\idmat{I}\\n\\\\gdef\\\\Tr#1{\\\\operatorname{Tr}\\\\left[{#1}\\\\right]}\\n```\\n\\n```katex\\n\\\\Tr \\\\idmat = 1\\n```\\n\\n```katex trans\\n1 + 1\\n= S(O) + S(O)\\n= S(O + S(O))\\n= S(S(O))\\n```\\n\\n<KatexReset />\\n\\n```katex {1,2,3} {1-2} lang=js\\n\\\\Tr \\\\idmat = 1\\n```\\n"}',
     ),
     meta: JSON.parse("null"),
     toc: JSON.parse("[]"),
+    headers: [],
     children: [
-      _jsx(LumaToc, {
-        toc: JSON.parse("[]"),
-      }),
       void (globalThis[_rehypeKatexContext0] = ""),
       "\n",
       "\n",

diff --git a/examples/render/output/save-0.mdx.js b/examples/render/output/save-0.mdx.js
@@ -6,21 +6,18 @@ function _createMdxContent(props) {
       p: "p",
       ...props.components,
     },
-    { LumaKatex, LumaLoaded, LumaMdxLayout, LumaToc } = _components;
+    { LumaKatex, LumaLoaded, LumaMdxLayout } = _components;
   if (!LumaKatex) _missingMdxReference("LumaKatex", true);
   if (!LumaLoaded) _missingMdxReference("LumaLoaded", true);
   if (!LumaMdxLayout) _missingMdxReference("LumaMdxLayout", true);
-  if (!LumaToc) _missingMdxReference("LumaToc", true);
   return _jsxs(LumaMdxLayout, {
     file: JSON.parse(
       '{"data":{},"history":[],"messages":[],"value":"<Save>\\n```katex inline\\nA=B\\n```\\n</Save>\\n\\n定義は[$]となる。\\n\\n---\\n\\n<Save $bar>\\n```katex inline\\nA=B\\n```\\n</Save>\\n\\n定義は[$bar]となる。\\n\\n---\\n\\n```katex-save\\n  A=B\\n```\\n\\n定義は[$]となる。\\n\\n---\\n\\n```katex-save $foo inline\\n  A=B\\n```\\n\\n定義は[$foo]となる。\\n"}',
     ),
     meta: JSON.parse("null"),
     toc: JSON.parse("[]"),
+    headers: [],
     children: [
-      _jsx(LumaToc, {
-        toc: JSON.parse("[]"),
-      }),
       void (globalThis[_rehypeKatexContext0] = ""),
       "\n",
       "\n",

diff --git a/examples/render/output/save-1.mdx.js b/examples/render/output/save-1.mdx.js
@@ -5,18 +5,15 @@ function _createMdxContent(props) {
       p: "p",
       ...props.components,
     },
-    { LumaLoaded, LumaMdxLayout, LumaToc } = _components;
+    { LumaLoaded, LumaMdxLayout } = _components;
   if (!LumaLoaded) _missingMdxReference("LumaLoaded", true);
   if (!LumaMdxLayout) _missingMdxReference("LumaMdxLayout", true);
-  if (!LumaToc) _missingMdxReference("LumaToc", true);
   return _jsxs(LumaMdxLayout, {
     file: JSON.parse('{"data":{},"history":[],"messages":[],"value":"[$]\\n"}'),
     meta: JSON.parse("null"),
     toc: JSON.parse("[]"),
+    headers: [],
     children: [
-      _jsx(LumaToc, {
-        toc: JSON.parse("[]"),
-      }),
       void (globalThis[_rehypeKatexContext0] = ""),
       "\n",
       _jsx(_components.p, {

diff --git a/examples/render/output/wrap.mdx.js b/examples/render/output/wrap.mdx.js
@@ -10,9 +10,8 @@ function _createMdxContent(props) {
       p: "p",
       ...props.components,
     },
-    { LumaMdxLayout, LumaToc } = _components;
+    { LumaMdxLayout } = _components;
   if (!LumaMdxLayout) _missingMdxReference("LumaMdxLayout", true);
-  if (!LumaToc) _missingMdxReference("LumaToc", true);
   return _jsxs(LumaMdxLayout, {
     file: JSON.parse(
       '{"data":{},"history":[],"messages":[],"value":"---\\ntitle: foobar\\npublish: true\\nDefMapImp:\\n  逆元: 行列の逆元\\n---\\n\\nhey!\\n\\n# foobar\\n\\nis ongoing.\\n"}',
@@ -21,15 +20,12 @@ function _createMdxContent(props) {
     toc: JSON.parse(
       '[{"tag":"h1","index":0,"depth":1,"titleText":"foobar","level":1,"slug":"foobar","children":[]}]',
     ),
-    children: [
-      _jsx(LumaToc, {
-        toc: JSON.parse(
-          '[{"tag":"h1","index":0,"depth":1,"titleText":"foobar","level":1,"slug":"foobar","children":[]}]',
-        ),
-        children: _jsx(_Fragment, {
-          children: "foobar",
-        }),
+    headers: [
+      _jsx(_Fragment, {
+        children: "foobar",
       }),
+    ],
+    children: [
       void (globalThis[_rehypeKatexContext0] = ""),
       "\n",
       _jsx(_components.p, {