Termコンポーネントを書くための[[用語]]記法を導入
#898
Conversation
Deploying utcode-learn with
|
| Latest commit: |
0913a74
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a1936672.utcode-learn.pages.dev |
| Branch Preview URL: | https://add-remark-term.utcode-learn.pages.dev |
chvmvd
force-pushed
the
add-remark-term
branch
from
e786566 to
8a96283
Compare
chvmvd
force-pushed
the
add-remark-term
branch
2 times, most recently
from
5fdced0 to
a0180af
Compare
chvmvd
force-pushed
the
add-remark-term
branch
from
a0180af to
996b744
Compare
There was a problem hiding this comment.
「JavaScriptことはじめ」の節全体のみに、新しい記法を取り入れました。
| import type { Nodes, Root, RootContent } from "mdast"; | ||
| import { phrasing } from "mdast-util-phrasing"; | ||
|
|
||
| const remarkTerm: Plugin<[], Root> = () => (tree) => transform(tree); |
There was a problem hiding this comment.
| @@ -0,0 +1,114 @@ | |||
| import type { Plugin } from "unified"; | |||
| import type { Nodes, Root, RootContent } from "mdast"; | |||
There was a problem hiding this comment.
| continue; | ||
| } | ||
|
|
||
| if (!phrasing(innerElement)) { |
There was a problem hiding this comment.
MdxJsxTextElement.childrenプロパティの型はArray<PhrasingContent>でありここで絞り込みをする必要があるため、mdast-util-phrasingパッケージのphrasing関数を使用しています。
cf. https://github.com/syntax-tree/mdast-util-mdx-jsx/blob/998d98d0aa29fe9ed12c636ddf1ed39f9a018096/readme.md#mdxjsxtextelement
cf. https://github.com/syntax-tree/mdast-util-phrasing
| } | ||
| if (segmentedText.startsWith("[[")) { | ||
| transformedChildren.push({ | ||
| type: "mdxJsxTextElement", |
There was a problem hiding this comment.
Termコンポーネントを表すASTのノードは、MdxJsxTextElementです。
https://github.com/syntax-tree/mdast-util-mdx-jsx/blob/998d98d0aa29fe9ed12c636ddf1ed39f9a018096/readme.md#mdxjsxtextelement
| @@ -0,0 +1,116 @@ | |||
| import type { Plugin } from "unified"; | |||
| import type { Nodes, Root, RootContent } from "mdast"; | |||
| import "mdast-util-mdx-jsx"; | |||
There was a problem hiding this comment.
mdast-util-mdx-jsxによって、mdastの型に、MDX JSXに関する型が拡張されています。
https://github.com/syntax-tree/mdast-util-mdx-jsx/blob/998d98d0aa29fe9ed12c636ddf1ed39f9a018096/index.d.ts#L254-L279
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/86f44b5ee78b2ea5c25b8deb9f6f5d846042cf56/types/mdast/index.d.ts#L301-L307
There was a problem hiding this comment.
ここだけランタイムに不要なインポートが発生しちゃってませんか？
chelproc
left a comment
chelproc
left a comment
There was a problem hiding this comment.
変換ロジックがやや冗長な気がします。↓みたいな感じでどうでしょう？Rootを特別扱いする必要もない気がします！
childrenを前から順番に走査しながら、
- 非テキストノード → 再帰
(.+)\[\[(.+)\]\](.+)を見つけた → 現在のノードを$1,[[,$2,]],$3に分割して挿入(.+)\[\[を見つけた → 先読みして\]\].+が見つかったら Term を挿入
| @@ -0,0 +1,116 @@ | |||
| import type { Plugin } from "unified"; | |||
| import type { Nodes, Root, RootContent } from "mdast"; | |||
| import "mdast-util-mdx-jsx"; | |||
There was a problem hiding this comment.
ここだけランタイムに不要なインポートが発生しちゃってませんか？
Termコンポーネントを書くための[[用語]]記法を導入しました。この記法にした理由としては、Wikipediaなどでも使用されているようによく使われている直感的な記法であること、入力が極めて容易であること、将来的に記法を拡張する余地があることが挙げられます。仕様は、TSDocの通りで、
[[用語]]のように中身がテキストの場合、あるいは[[**用語**]]のように中身が単一のASTノードである場合のみ、正しくパースされます。参考