Gatsby: MarkdownソースでReactコンポーネントを使用する

それはいい考えです。 まだ利用できない場合は、喜んで取り組んでいきます。

私はreactdownの開発者です。 ギャツビーとreactdownが機能するのを見るのは素晴らしいことです。 質問がある場合、または統合に関してサポートが必要な場合は、私にpingしてください。

👍これは一般的なリクエストなので、広く利用できるものが機能していると便利です！

私は、reactdownをgatsbyで動作させる方法の簡単で汚いサンプルリポジトリを設定しました。 ボンネットの下では、gatsbyはwebpackの上にある非常にユーザーフレンドリーなラッパーであるため、すべての機能がまだあり、ほぼすべてのことを実行できます。

https://github.com/benstepp/gatsby-reactdown

おかげで、私はそれを試してみて、それがどのように進んだかをあなたに知らせます。

かっこいい、イケてる！ ニースベン。 これは、私がイメージングしていたよりもセットアップがはるかに簡単です
ハハ。 いい仕事アンドレイ。

22:31ジョーMeenenのでは火、2016年6月7日に[email protected]書きました：

おかげで、私はそれを試してみて、それがどのように進んだかをあなたに知らせます。

—
あなたがコメントしたのであなたはこれを受け取っています。

このメールに直接返信し、GitHubで表示してください
https://github.com/gatsbyjs/gatsby/issues/312#issuecomment -224492088、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe/AAEVh-2doZe_FXFMBxYTJ5FAVqo4XqxNks5qJlO6gaJpZM4Iubim
。

@bensteppいいね！ これは、ラッパーを介してMarkdownファイルを使用する場合は十分に簡単に見えますが、Reactコンポーネント内で使用するためにMarkdownファイルをインポートする場合にも機能しますか？

編集：箱から出してすぐに機能するはずですが、どういうわけか、 mdファイルが変換されたReactコンポーネントは何も出力しません…

新しいGraphQLレイヤー（＃420）が開く別のアプローチについて考えています。 mdashリポジトリhttps://github.com/wooorm/mdast/issues/13でそれについて尋ねる問題を開きました

それは素晴らしいでしょう！ Reactdownにとても近いと感じましたが…マークダウンファイルはwebpackによってReactコンポーネントに適切に変換されます（少なくともそのように見えます）が、コードで使用すると空のコンポーネントが表示されます。

@SachaGは私が見ることができるどこかにレポを持っていますか？

うわー、本当に変だ。 私は問題の複製を作成しようとしていました、そして今それはうまくいきます！ 何が変わったのかさえわからない…文句は言えないね:)

Reactの神々が金色の馬車に乗って降りてきました。 コードは機能しました

@SachaGreactdownがランタイムを参照する方法にいくつかの問題があったことを覚えています。 とにかく、あなたがいくつかの問題にぶつかったら、私はフラットに助けてくれるでしょう。

こんにちは！ これに対する最近の更新はありますか？ マークダウンでreactコンポーネントを使用するための推奨される方法は何ですか？ 私が従うことができる例はありますか？ ありがとう！

まだ:-(私はそれを行う方法について良い計画を持っています—基本的にマークダウンファイルをReactコンポーネントファイルにコンパイルします。ここで、参照されているすべてのReactコンポーネントのインポートを正しく処理しますが、まだビルドする必要はありません。必要に応じて作業を開始してください。

@KyleAMathewsマークダウンファイルでコンバータースクリプトを実行してから、変換ステップで生成された出力ファイルに必要な他の反応コンポーネントを手動で追加する必要があるということですか？ これが完了したら、最終ビルドを実行しますか？

これは理想的には、これらの手順を実行するGatsbyv1のプラグインになります。
自動的に。

火、2017年5月2日には、午前12時50分PM Piyushシン[email protected]は書きました：

@KyleAMathews https://github.com/KyleAMathews実行する必要があるということですか？
マークダウンファイルにコンバータスクリプトを追加してから、他の反応を追加します
変換ステップで生成された出力ファイルに必要なコンポーネントは？ 一度
これが行われ、最終的なビルドが行われますか？

—
あなたが言及されたのであなたはこれを受け取っています。

このメールに直接返信し、GitHubで表示してください
https://github.com/gatsbyjs/gatsby/issues/312#issuecomment-298741837 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AAEVh4riB8uXgeRUybcR6OxsC1EAKnkKks5r14kPgaJpZM4Iubim
。

私が言っていることの簡単な例。

/my-blog/index.mdに次のようなマークダウンファイルがあるとします。

---
title: "hi folks"
---

# This is my broomstick

Yo yo foo

<SweetComponent props="super cool" />

ボディは、webpack / babel / etcを介して実行されるreactコンポーネントに変換される可能性があります。 いつものように。

import React from 'react'
import SweetComponent from 'auto-resolve-this-somehow'

class MarkdownBody extends React.Component {
  render () {
    return (
      <div>
        <h1>This is my broomstick</h1>
        <p>Yo yo foo</p>
        <Sweet Component props="super cool" />
      </div>
    )
  }
}

秘訣は、これをGatsbyのgraphqlシステムと統合する方法です。 理想的には、今日のhtmlをクエリする方法と同様に、マークダウンファイルの「コンポーネント」バージョンをクエリすることができます。

とにかく、それは私が考えたことの簡単なスケッチです。

@KyleAMathewsありがとう、私は今アイデアを得たと思います。

私の目的は、MathJax、D3.jsの視覚化を活用し、Markdownソース内にThree.jsアニメーションコンポーネントを組み込むこともできる、このようなコンテンツを作成できるようにすることです。

ここにhtmlソースが表示されている場合、ページは一部のコントロールスライダーにjQueryを使用していますが、Reactコンポーネントを使用してjQueryを実行するより良い方法があると思いますか？

私がこれまでに集めたものから、ギャツビーフレームワークでそのようなコンテンツを作成することは、はるかにきちんと構造化された方法で達成できると思いますよね？

私はWeb開発に不慣れですが、この種の目標の達成に貢献できるように、ギャツビーシステムがどのように機能するかを学ぶために最善を尽くしています...

@KyleAMathews 、私はあなたの提案された解決策について考えてきました。

markdown-it-jsxのようなものを使用または改善して、目的のMD JSコンポーネント構造への変換を実行できると思いますか？

auto-resolve-this-somehow部分を解決するために、おそらく2番目のパーサーがMD JSコンポーネントファイルをスキャンして、コンポーネントレジストリリスト（単純なテキストファイルまたはディレクトリ内のファイルルックアップ）にあるものと一致するJSXを探すことができます。すべてのコンポーネントが保存されます）次に、関連するインポート行をファイルの先頭に追加しますか？

私はこれに取り組み始めるつもりなので、どんなフィードバックも素晴らしいでしょう！

これを行っている別のプロジェクトがあることに注意してください。おそらくそれは参照として役立つでしょう： react-styleguidist 。 マークダウンファイルの例

マークダウンでコンポーネントを有効にすると、BretVictorによるこの傑作を思い出します。

UPD：そしてもう1つの例： mdxc

そしてもう1つhttp://thejameskyle.com/react-markings.html

解決策はreact-jsx-parserを使用することです。
howtographql.comでは、本番環境で使用しています： https ：

1つの欠点：もちろん、 dangerouslySetInnerHTMLを使用するよりも遅いのは、

1. HTMLを解析します
2. 仮想DOMツリーを構築します
3. Reactで仮想ツリーをレンダリングします

これを高速化する1つの方法は、graphqlクエリで生のhtmlを送信するのではなく、ここで説明するように、Inferno.jsドキュメントが使用している形式を実際に送信すること

現在、この最適化の最後のステップを実行する時間が見つからないため、それに興味がある人は誰でもこのアプローチを実行できます。

それは

1. 適切なGraphQLタイプを構築します。これは、GraphQLタイプが再帰的であり、ツリーを表す可能性があるため、問題にはなりません。
2. remarkマークダウン解析ビジネスが完了したら、シリアル化されたjsx形式を生成します。
3. Reactでこのフォーマットを逆シリアル化します。

私が注目しているもう1つのオプションは、 https：//github.com/mapbox/jsxtreme-markdownです

同様のパターンを使用できます。 マークダウンをJSXコンポーネントに変換するだけです。 カスタム区切り文字を使用して、JavaScriptとJSXを追加します。 既存のRemark設定を問題なく使用できます。 また、通常のReactページであるため、パフォーマンスが低下することはほとんどありません。

https://github.com/cerebral/marksyもあり

ギャツビーの文脈でこれに対して推奨されるアプローチはありますか、それともまだ決定されていませんか？

こんにちは、gatsbyマークダウンファイルに税関コンポーネントを含めることをお勧めしますか？

コレクションへのもう1つのオプションhttps://idyll-lang.github.io/

マークシーはそのユースケースでうまく機能するようです

反応要素ツリーを返すので、どうすればそれをgatsbyプラグインに統合できるのでしょうか？

@KyleAMathews @revolunetカスタム要素として使用する必要のあるコンポーネントを登録することについてどう思いますか。その後、それらをブログ投稿に含めて、残りの作業をブラウザーに任せることができますか？

これにより、マークダウンをリアクションツリーとして解析し、アプリケーションのパフォーマンスを維持する必要がなくなりますが、新しいものを追加する必要があるたびにReactDOM.renderを実行するために、パフォーマンスコストが発生するかどうかはわかりません。カスタムコンポーネントですが、それでもブログ投稿に動的な機能を追加するための非常に優れた方法を提供します。

@abdulhannanaliマークダウンで利用可能なコンポーネントを登録することは良い考えですが、カスタム要素のものはサーバー側にあまり優しいようには聞こえません:)

だから私はReactとMarkdownをほぼ永遠にミックスするクリーンな方法を考えようとしてきました。 または、少なくともギャツビーの仕事を始めてから。

そしてついに私はうまくいくかもしれない考えを持っていると思います。

通常のHTML要素とReactコンポーネントを区別するために、JSXと同じルールを使用します。つまり、Reactは大文字になります。

したがって、ReactコンポーネントをMarkdownに直接含めることができます。

# Hi folks

I'm writing some markdown about speaker <Person id="Paul Ryan">Paul Ryan</Person> who's the speaker of the house and other stuff.

<InteractiveComponent invertedColors={true} allTheProps={true} />

次に、これは次のようなASTに解析されます。

[
  [{ raw: true, value: "<h1>Hi Folks</h1>" }],
  [
    { raw: true, value: "<p>I'm writing some markdown about speaker " },
    {
      raw: false,
      value: {
        name: "Person",
        props: { id: "Paul Ryan", children: "Paul Ryan" }
      }
    },
    { raw: true, value: " who's the speaker of the house and other stuff.</p>" }
  ],
  [
    {
      raw: false,
      value: {
        name: "InteractiveComponent",
        props: { invertedColors: true, allTheProps: true }
      }
    }
  ]
];

そして、コンポーネントでは、HTMLを直接レンダリング（危険スタイル）する代わりに、次のような各Reactコンポーネントへのマッピングを使用してヘルパー関数に渡します。

import React from "react";
import renderHtmlReact from "gatsby-render-html-react";
import Person from "../components/Person";
import InteractiveComponent from "../components/InteractiveComponent";

export default ({ data }) => (
  <div>
    {renderHtmlReact({
      ast: data.markdownRemark.ast,
      componentMap: { Person, InteractiveComponent }
    })}
  </div>
);

// Your query goes down here

これがRemarkで機能するようにするには、プロトタイピングを行う必要がありますが、React "Html"はそのまま通過するはずです。 したがって、HTMLを分割し、React JSXパーツをデータに変換するパーサーと、結果の「AST」をレンダリングするためのフロントエンドライブラリが必要です。

考え？

そして、コンポーネントでは、HTMLを直接レンダリング（危険スタイル）する代わりに、次のような各Reactコンポーネントへのマッピングを使用してヘルパー関数に渡します。
[…]
考え？

これも私たちが行っていることです（非常に単純化されており、実際には安全ではなく、特定のタグ専用に設計されています）。 私たちのユースケースは、JSONドキュメントのスタイル設定/レイアウトでした。

<IconGrid src="sensors.json" />

これは、重複するコンテンツを回避するのに非常に役立ちました。再利用可能なAPIドキュメントコンポーネントに同様のメカニズムを使用することを検討しています。

このソリューションに欠けているものは、私たちも解決していませんが、コンポーネントプロパティ内でのマークダウンの使用です。 このようなことが可能になるように：

<Api method="post" description="
An API which uses **markdown**.

And having multi line parameters would be helpful as well.
" />

このスペースで少しの間たくさんのことを試した後、私はそうだと確信しています。それはマークダウンレベルで本当に解決する必要があります。 マークダウンフレーバーの意味は、jsx / reactを本当に理解する必要があります。 問題は、実際にはjsxがサポートしているjavascript補間とマークダウンチョークです。 Jsxtreme-markdownが近づき、最初にそれらを処理し、次にmarkdownを使用して残りを解析することでこれを回避します。 別のアプローチは、HTMLを処理するMDパーサーの自然な能力に頼ることであり、したがって単純なjsx（たとえば、Markedは大文字の要素を処理します）ですが、文字列のみの小道具に固執し、ネストされたマークダウンがないという厄介な制限にすぐに遭遇します（たとえば、Markdown inside 、props.children）。 もう1つの問題は、クライアントのハイドレーションが煩わしいbcになることです。これには、文字列を反応要素に変換するためのランタイム（および通常はかなり大きなもの）が必要です。これは、gatsbyがインタラクションとパフォーマンスに短時間で集中するのには理想的ではありません。

私はこれからの最も有望な方法はastベースのアプローチだと思いますが、そのためには、かなりのプロジェクトになるために既存のものとは十分に異なるマークダウンバリアントのスピードアウトが本当に必要です

私の2セントを投入するだけです！

gatsbyが存在することを知る前に（2年前）、jekyll（ rovr ）と同じように動作するreact静的サイトジェネレーターを作成することに挑戦しました。 mdファイルにmarkdown、react、htmlを混ぜたかったのです。

マークダウンコンテンツ内で<CapitalizedComponents/>を見つけるために正規表現を使用選択しましたが、いくつかのエッジケースがあったことを除けば、かなりうまくいきました。 当時、私はhtmlの解析に奇妙な副作用があるmarkedを使用

また、私の単純な正規表現ではコンポーネントの終了タグが許可されていなかったため、子がありませんでした...したがって、これは機能しませんでした。

<Component>
   <Child/>
</Component>

とにかく、私はギャツビーがこれをサポートすることに本当に興奮しています！ jekyllサイトをgatsbyに変換している最中で、ほぼ完了しています。 私の次のタスクは、mdブログ投稿内のjekyllインクルードをgatsbyバージョンのコンポーネントに変更する方法を理解することです。

@jquenseは、props.children dangerouslySetInnerHTMLになります。

これは100％のソリューションではありませんが、多くのセットアップで機能します。 私はまた、マークダウン内にJSを書くというアイデアの大ファンではありません。 その方法では、すべてのツールサポートが失われます。

@jakedeichertええ、単純な正規表現はこれまでのところしかありません。 かっこいい、これに似たものができました！ それは概念を検証します。 JSXを理解するJSパーサーを使用して、構造化された情報を抽出したいと思います。 このようにして、ネストされたコンポーネントをサポートできます。

@KyleAMathewsあなたが提案したことの進展は何ですか？

これについてのいくつかの考え：

1. remarkを使用して、任意の反応コンポーネントマークダウンを変換する実用的な例があります。 ベースプロジェクトとしてremark-htmlとhast-util-to-htmlを使用しました。
   使用法と出力の例を次に示します。
   興味があれば、それがどのように機能するかについて、もう少し情報を提供するかもしれません。
2. MapBoxは、remarkを使用してマークダウンをreact要素に変換するパッケージremark -reactを作成しました。 カスタムreact要素を受け入れるようにパッケージを適合させるには、多少の作業が必要になる場合があります。

誰もそれに取り組んでいません。

これら2つのアプローチの問題は、GraphQLクエリはコードを実行していないデータしか返すことができないため、GatsbyのGraphQLベースのデータシステムでは機能しないことです。 remark-reactは、たとえば、クライアントでmarkdown => html変換を実行して、理想よりもコストがかかるこれを回避します。

したがって、GraphQLを使用するには、Reactコンポーネントを作成するためのクライアントランタイムが必要です。 私の提案は、可能な限り最小のランタイムを可能にする設計に取り組むことから生まれました。

私は今それを手に入れていると思います。 したがって、あなたの意見で必要なのは、2つのコードです。

1. マークダウン-> Reactコンポーネントをサポートするすぐに使用できるHAST。 （このコードはビルド時に実行する必要がありますか？）
2. 反応有効HAST->反応要素（これは最小限の/些細なランタイムでクライアント側で実行する必要があります）

私はそれを正しく理解していますか？ 私は何かが足りないのですか？

うん！

このスペースで別のプロジェクトに出くわしました—いくつかの興味深いアイデアがありますhttps://github.com/luiscarli/md-to-react

こんにちは、

私はそれをもう一度突き刺しています。 ここにHASTを作成する最初の部分の実用的な例がありますremark -custom-element-to-hast 。 それでも、子要素としてのマークダウンの使用と、それを使用するWebpackローダーをサポートする必要があります。

@KyleAMathewsアプローチはあなたの見解と

2番目の部分については、 syntax-tree / hast-to-hyperscriptを使用できます。 wooorm / remark-vdomの使用例を次に

@ fazouane-marouaneかっこいい！ ええ、一見すると本当に近いようです。 すごい仕事！

フロントエンドには多数の依存関係があり、ランタイムをできるだけ軽くしたいので、急いでハイパースクリプトを使用したくありません。たとえば、ASTを介してReact要素を作成するだけです。 したがって、2番目のライブラリでできるだけ多くをモジュールに移動します。

@KyleAMathewsそれは素晴らしいことです！ 残りの手順は、数日中に実行しようと思います。 うまくいけば、これは私たちが実用的な解決策に一歩近づくことになるでしょう。

こんにちは@ fazouane-marouane＆@KyleAMathews、私はあなたの議論を読んで、あなたは上でここに記載した様々な部品の「シンプル」のバージョン実装しました。このアプリ、私が働いているが。

興味深い部分は、ここでgatsbyプラグインの形式で@ fazouane-marouaneコードを使用している部分と、です。 GraphQLのおかげでHASTがどのように取得されるかを見るのも興味深いかもしれません。

私がこのコメントを書いている時点では、完璧で最適化されたクリーンなものにはほど遠いことに注意してください。

編集：私のrenderHASTコンポーネントは、フェノミックがクライアント側でマークダウンをレンダリングする方法に大きく影響を受けています： https ：

@pbellonご参加いただきありがとうございます。 これにより、全員の時間を大幅に節約できます。 コードは、残りの手順に必要なことを実行しているようです。 今晩遅くに試してみます。

デバッグする必要があるのは、コンポーネントの子を処理する方法です。
今、マークダウンThis is a test <MyComponent>let's see how children are handled</MyComponent>書き込みを設定すると、 MyComponentのchildrenプロパティは[0, null]設定されます。

しかし、それがパーサーからのものなのか、それとも私がHASTを水和する方法からのものなのかはわかりません。

@pbellonそれはパーサーから来ています。 この反応全体をマークダウンでプロトタイプ化するのは、ミニマリストのパーサーです。 すべての場合に使用できるようにするには、間違いなくいくつかの修正が必要になります。 他の例に出くわした場合は、遠慮なく問題を提出してください。 それはとにかく良いテストベースを作るのに役立ちます。

@ fazouane-marouaneなるほど。 私はあなたのコードを試して、この機能を実装できるかどうかを確認します（そして、それを実行できればPRを作成します）が、簡単な変更ではないようです😮
ここであなたのリポジトリに問題を作成しました

私の0.02ドルでチャイムを鳴らします。 GitDocsの開発の一環として、ユーザーがJSXを

マークダウン解析

値下げ処理用途は統一、発言、およびrehype 。 カスタムトークナイザーは、JSXを検出するために、追加の正規表現を使用してリマークブロックHTMLトークナイザーからフォークされました。 このトークナイザーにより、再誇大広告はJSXブロックをrawとして検出し、さらに処理することができます。

rehype-rawと同様にプラグインを作成しました。 プラグインはrawノードを見つけ、 acorn-jsxを使用してブロックを解析しようとすることにより、それらがJSXであるかどうかを判断します。 解析が成功すると、どんぐりによって生成されたJSXASTがHASTに変換されます。

サポートされているJSX

これまでのところ、JSXの次のビットを変換できます（テストスイートから取得した例のケース）

<Test>
  <Test2></Test2>
</Test>

<Test>some text</Test>

<Test attr={{ prop: 400 }} />

式

単純なコンパイル時の式の評価がサポートされています。

<Test attr={1 + 2}/>

作成されたHASTノードのプロパティ'attr'は3設定されます。

配列式

プロパティではArray.prototype.map()が許可されています。

<Test attr={ [1,2,3].map(x => 2 * x) } />

配列にマッピングしてJSXの子を作成することもできます

<Test>{ [1,2,3].map(x => (<Test2>{x}</Test2>)) }</Test>

同等のものとしてHASTに翻訳されます

<Test>
  <Test2>1</Test2>
  <Test2>2</Test2>
  <Test2>3</Test2>
</Test>

制限事項

式のサポートは非​​常に限られており、セキュリティレビューは行われていません。 コードはevalを使用せず、 windowようなものにアクセスすることはできないはずですが、私は保証することはできません。

この領域で、gatsbyremarkプラグインを通常どおり完全に使用できる実験を行いました。 graphqlhtmlをreact.jsコードを生成するwebpackローダーに渡します。 残念ながら、これにはいくつかの問題があり、単一のプロダクションビルドを壊します。

          createPage({
            path: edge.node.fields.slug,
            component: getCdResolve(blogPost, edge.node.fileAbsolutePath, {
              html: edge.node.html,
              site: result.data.site,
            }),
            context: {
              slug: edge.node.fields.slug,
            },
          })

ここで、 cdResolveは!!cd-resolve-loader!foo.mdような文字列を返します。 ギャツビーはそれが好きではありません。 少なくとも開発サーバーでは機能します。

残りのコードはここにあり

ビルド出力は、子用の静的ノードのセットを備えた単純なコンポーネントです。

var h = require('react').createElement;
var n1 = h('div', { key: 1, dangerouslySetInnerHTML: { __html: '<h1>Hello</h1>' } });
var n2 = h(CustomComponent, { key: 2, foo: 1 });

module.exports = () => h('div', null, [n1, n2]);

おもしろい！

残念ながら、これは私が知る限り、開発中のマークダウンのホットリロードも壊してしまいます。

うん、それは別の問題だった。 問題が何らかの形で解決された場合、バンドルのサイズとインタラクティブ化までの時間に関しては、それが最良の最終結果の1つになると思います。 もちろん、それは実用的な解決策とは程遠いものです。 コメントが機能した後、JSファイルにコンパイルする方法に関するヒントはありますか？

@brigand最も簡単な解決策は、以前のコメントで概説したものだと思いますhttps://github.com/gatsbyjs/gatsby/issues/312#issuecomment -336681894

あなたが提案したソリューションについては@KyleAMathews、我々は今にJSXを含む値下げを変換する方法を知っているのhtml AST remarkjsを使用します。 最後のブロッキングバグを解決しました。 ここで必要なのは、このASTをreactコンポーネントに変換し、npmにプッシュできるコードを作成することだけです。 来週の終わりまでにこれを行うための自由な時間があります。

それまでに何かを押さなければ、野球のバットを持って玄関先に現れることを躊躇しないでください😅。

@ r24yはこれを機能させました!!! 彼のPRhttps ：//github.com/gatsbyjs/gatsby/pull/3732とusing-remarkサンプルサイトのサンプルページをチェックして

https://using-remark.gatsbyjs.org/custom-components/

だから、ここで私の進捗状況を報告します。 私は2番目のステップを終える時間がありました。

全体として、2つのパッケージがあります。
HASTへの解析： @ dumpster / remark
反応コンポーネントへの簡単なレンダリング： @ dumpster / hast-react-renderer

@pbellonはここでGatsbyプラグインを提案しました。

このパイプラインは、誇大広告よりも寛容でなければなりません。 私の記憶が正しければ、rehypeは<Note value="my content" />を受け入れないparser5を使用し、カスタム要素の本体を受け入れるかどうかを思い出せません。

@KyleAMathewsここからの次のステップは

@ fazouane-marouaneすごい!!!

次のステップは、レポにサンプルサイトを追加して、あなたの作業も披露できるようにすることだと思います。次に、gatsbyjs.orgにあるドキュメントページで、さまざまなオプションとトレードオフについて説明する必要があります。

甘い！ 説明をありがとう。

私は来週または翌週のために何かをしようとします（この月曜日に新しい仕事を始めます😅）。

鳴る。読んだ後https://using-remark.gatsbyjs.org/custom-components/をし、それを試し、私は名前の小型パッケージ作らGATSBY-発言成分をあなたの値下げ内部コンポーネントた場合、あなたが得ることの警告をvalidateDOMNesting避けるためには、ブロックレベルの要素（div ...）が含まれています。 カスタムコンポーネントはデフォルトで段落にラップされますが、このパッケージではdivにラップされます。
とても使いやすいです

//In your gatsby-config.js
plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: [
        {
          resolve: "gatsby-remark-component",
          options: { components: ["my-component", "other-component"] }
        }
      ]
    }
  }
]

これが誰かに役立つことを願っています。

@Hebiliciousプラグインに感謝します。 ええ、私はすべてのカスタムコンポーネントが<p>要素内にレンダリングされていることに気づきました。

<div>
  <custome-component></custom-component>
</div>

回避策として。

ただし、マークダウンテンプレートファイルですでに行ったように、すべてのカスタムコンポーネントを構成ファイルに再度含めることは簡単ではありません。

@ li-xinyang私はあなたに同意します。 自動検出機能を追加したので、手動で追加する必要はありません。
試してみたい場合は、必ずパッケージを最新バージョン1.1.0にアップグレードしてください。
それは箱から出して動作します：

//In your gatsby-config.js ...
plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: ["gatsby-remark-component"]
    }
  }
]

これは少し正接ですが、ここの人々は@rauchgとの調整に興味があるかもしれません：提案を参照してください

@ r24yは気の利いたですね！

これを解決するには、トレードオフが異なるいくつかの方法があると思います。

ReactコンポーネントをMarkdownにCatalogというプロジェクトを知っているかどうかはわかりません。 カタログの概念を適応させようとするgatsby-remark-design-systemと呼ばれるGatsbyプラグインもあります。

このソリューションは完璧に見えます@arcticicestudio

カタログは見栄えがします。 また、gatsby-remark-design-systemプラグインは優れていますが、Reactコンポーネントはサポートされていません。 私はそれが正しいことをしていると思います、それはマークダウンにもっと複雑な機能を追加するために既存のコードブロック構文を利用します。

このスレッド内で数回説明したように、既存のパーサーの使用は、必要な機能ではないと思います。 おそらく、フリーフローティングのReact要素の代わりに、複雑なReactコンポーネントをより明確に明示的に示すことができます。たとえば、マークダウンファイルは次のようになります。

 ＃いくつかの見出し
 ...などなど..。

<Example>
   <Etc />
</Example>

埋め込まれたreact要素をレンダリングする場合は、言語をreactとして指定すると、JSX対応のパーサーが起動して、rehypeで使用できる有効なASTを生成します。 通常のJavaScriptプリズムの例が必要な場合は、通常のjavascript言語を使用してください。

こんにちはみんな、ここで素晴らしい議論。
gatsby-remark-componentを使用していますが、いくつか質問があります。

1. コンポーネントを「自動検出」する方法はありますか？ これにより、コンポーネントオブジェクト内のコンポーネントに明示的に通知する必要がなくなります。

const renderAst = new RehypeReact({
  createElement: React.createElement,
  components: {

  },
}).Compiler

1. 一部の画像をgatsby-remark-imagesと統合する方法はありますか？ 私の目標の1つは、ユーザーが画像を追加して、たとえば小道具を介してコンポーネントに送信できるようにすることです。 何かのようなもの：
   <my-component header-image="[](./image.png)"><my-component>

ありがとう！

@ThiagoMirandaはい、（2）は素晴らしいでしょう！ 私のユースケースは画像ギャラリーです：

<gallery>
  <item source="image1.jpg" caption="One"></item>
  <item source="image2.jpg" caption="Two"></item>
</gallery>

ZeitによるこのJSX対応のマークダウンパーサーは有望に見えます： https ：

MDXは、組み込みJSXおよびインポート/エクスポート構文を追加するCommonMark仕様のスーパーセットです。

それは発言と誇大宣伝に基づいて構築されているので、gatsbyプロジェクト内で使用するための代替品の素晴らしいドロップかもしれません

mdx用のプラグインを作成しました： https ：

かっこいい、ギャツビーでそれを試してみたかった:)

@nhducitのmdxプラグインを使用すると、MDXページを接続するのは非常に簡単です。

1. pages/ディレクトリにmdxとsourceの設定を追加します。

gatsby-config.js

module.exports = {
  plugins: [
    'gatsby-plugin-mdx',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'pages',
        path: `${__dirname}/src/pages/`,
      },
    },
  ],
}

1. すべてのマークダウンファイルをクエリし、それぞれのページを作成します。

gatsby-node.js

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators

  return new Promise((resolve, reject) => {
    graphql(`
      { 
        allFile(filter:{extension:{eq:"md"}}) {
          edges {
            node {
              absolutePath
              relativeDirectory
              name
            }
          }
        }
      }
    `).then(result => {
      if (result.errors) {
        return reject(result.errors)
      }

      // Create markdown pages.
      result.data.allFile.edges.forEach(({ node: {
        absolutePath,
        relativeDirectory,
        name
       } }) => {
        createPage({
          path: `/${relativeDirectory}/${name}`,
          component: absolutePath
        })
      })
    })
    .then(resolve)
  })
}

1. MDXを使用してください🎉

src/pages/my-markdown-page.md

import MyComponent from '../components/MyComponent'

# Title

_some content_

<MyComponent />

@avigoldmanいいね！ あなたの例が@nhducitのプラグインのREADMEに追加されるのを見るのは素晴らしいことです。

@avigoldman PRは大歓迎です！ 👍

@avigoldmanは、このアプローチがfrontmatterと競合しているように見えますか？

@nhducit PRをします！

@lintonyeは、あなたが何を意味するのかについてもう少し説明できますか。 MDXからの輸出について言及していますか？

@lintonye mdxエクスポートを使用しようとしましたか？ mdxと同等のようです： https ：

私が間違っている場合は訂正してください。ただし、新しいWebpackバージョンのGatsby2.0がコメントプラグインをMDXに渡すのを待つ必要があるようです。

cc @KyleAMathews

@avigoldman @nhducitエクスポート構文を使用してmdxファイルからデータをエクスポートする場合、コンポーネントがレンダリングされるときにUIでデータにアクセスするにはどうすればよいですか？

ここでの同じ質問は、現在MDXで、できませんでした：

• マークダウンページにカスタムスタイルを適用する
• 名前付きmdxエクスポートからpathContextとしてfrontmatterコンテンツを挿入します
  これは実際に行うことができますが、これには、すべての.mdファイルに対して.mdファイルをインポートするための.jsファイルを作成する必要があるため、作業が重複します...

@slorber私はこのリポジトリにかなりハッキーな解決策があります： //github.com/avigoldman/avigoldman.com

絶対に理想的ではありません。 Gatsby V2がリリースされたら、これを再検討します。

こんにちは、ありがとう@avigoldman

私もここでそれをやろうとしましたhttps://github.com/nhducit/gatsby-plugin-mdx/issues/13#issuecomment-392334706

エクスポートを正しく抽出する必要がなかった欠落部分を見つけたようです：babel-plugin-config-export

ブログ投稿ページごとに1つのレイアウトを作成しますが、これがこのように行われることになっているのか、それがギャツビーのパフォーマンスにどのような影響を与えるのか正確にはわかりません。

プラグインをNPMに公開するのはどうですか？ これは、フロントマターに関して@nhducitが作成したものよりも使いやすいようです

また、... mdx graphqlフラグメントはどこから来ていますか？

MDXについては、カスタムタグをGatsby、cc @avigoldmanと統合するのに役立つ可能性のある「MDXProvder」（React Contextに基づく）を追加したばかりです。

@slorber MDXファイルに対してクエリを実行できるように、 gatsby-transformer-mdxプラグインを作成しました。

私は各レイアウトをページとして扱い、各MDXファイルをコンテンツとして扱っています。 したがって、レイアウトはページコンテキストを取得し、MDXがドロップインされます（コメントで生成されたhtmlの場合と同様）。
特別なレイアウトコンポーネントがなくなるため、これはGatsbyV2では機能しません。

MDXProviderは有望に見えます！

ここに2¢を追加すると、@ avigoldmanのgatsby-transformer-mdxのおかげで、mdxを使用してGatsbyに自分のWebサイトのほとんどをハッキングできました（リポジトリはまだJekyllを使用しており、まもなく新しいリポジトリを更新または追加します）。

それは素晴らしいことです！ Gatsby V2でうまく機能するパッケージにするために、今週末/来週は少し時間が必要です。

@avigoldmanあなたのgatsby-transformer-mdxから私が理解できなかったことの1つは、レンダリングステップです。 gatsby-transformer-remarkはhtmlフィールド（文字列）を使用しますが、トランスフォーマーは何を使用しますか？ Webpackローダーがどこにも必要とされていない場合、どのように機能しますか？

ああ、私は上記のコメントを読んだだけです。トリックは、Gatsby v1がすべてをレイアウトコンポーネントに自動的にラップすることです。そのため、MDXファイルをターゲットにするためにabsolutePathを使用しています。 😃このトリックをありがとう！

@avigoldman Gatsby 2プラグインに関するニュースはありますか？ Gatsby 2にもう存在しないレイアウトコンポーネントなしでそれを構築する方法について大まかな指示を与えることができれば、それはまた素晴らしいでしょう。
ありがとう！

どういうわけかMDXのexport default機能を使用できることを望んでいましたが、 children以外の追加の小道具を渡すことはATMでは不可能のようです。 mdx-js / mdx＃187

PRがマージされた場合（mdx-js / mdx＃189）、既存のgatsby-plugin-mdxおよびgatsby-transformer-mdxでMDXを使用できると思います。 必要な変更は私たちの側だけで、それは.mdxファイルから投稿テンプレートをエクスポートすることです。

src/posts/hello-world.mdx ：

import Post from '../components/post'

# Hello World

Lorem ipsum.

export default Post

gatsby-node.js ：

const path = require('path')

exports.createPages = ({ actions }) => {
  actions.createPage({
    path: '/posts/hello-world',
    component: path.join(__dirname, 'src', 'posts', 'hello-world.mdx'),
    context: { /* passed as pageContext */ }
  })
}

src/components/post.js ：

import React from 'react'
import Layout from './layout'

export default ({ children, pageContext }) => (
  <Layout>
    {children}
  </Layout>
)

これは本当に重要だと思います。 現在、すべてのgatsby-remark-*プラグインは、Reactに含まれる可能性があり、おそらく含まれるはずの一連のレンダリングロジックを再実装しています。 これにより、物事が大幅に簡素化される可能性があります。

@DylanVannちょっと依存します。 gatsby-remark-*プラグインは、ビルド時の変換を多数実行します。これをReactで実行した場合、ブラウザーに大量のJSを出荷することになります。 また、 https： //www.gatsbyjs.org/packages/gatsby-remark-images/

もちろん、理想的には両方の世界をブレンドします。

@KyleAMathewsええ、それはクライアント側でもう少しJSを意味しますが、それでも最初は静的HTMLとして配信されます。 とにかく多くの人がサイトの一部にgatsby-imageを出荷していると思うので、その場合は重複はそれほど問題になりません。

gatsby-remark-*プラグインにユーティリティがあることを理解しています。 具体的には、現在文字列で実行されているレンダリングロジックは、Reactでも実行できるようです。

私はhtmlAst / rehype-reactメソッドでこの種の作業をしています。

そのように見えますが、実際にはもっと複雑です。 何かに取り組んでいると思われる場合は、焦点を絞った提案で新しい問題を提起することができます。

解決するのは難しい問題のようです。 残念ながら、何かを実行したり提案したりする時間はないと思います。 Reactカスタムコンポーネントを部分的に使用してremarkプラグインを実行するというアイデアは間違いなく機能します。私は、それを使用するコードを持っています。

これは、 mp4終わるマークダウン画像から@dylanvann/gatsby-remark-cloudinaryによって生成されます。 アイデアは、ビデオを最適化することです（ビルド時のサイズ設定、ポスターの追加）。 しかし、Reactのレンダリングロジックが欲しかったのです。 ビデオの処理は別の関数で行われますが、これはノードのHTMLが置き換えられるものの一部です。

export const videoHTML = ({
    srcVideo,
    srcVideoPoster,
    base64,
    paddingBottom,
    presentationWidth,
}) =>
    `<cloud-video srcvideo="${srcVideo}" srcvideoposter="${srcVideoPoster}" base64="${base64}" paddingbottom="${paddingBottom}" presentationwidth="${presentationWidth}"></cloud-video>`

次に、 rehype-reactカスタムコンポーネントを使用します。

import React from 'react'
import rehypeReact from 'rehype-react'
import CloudVideo from './CloudVideo'

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: {
    'cloud-video': CloudVideo,
  },
}).Compiler

const Markdown = ({ ast }) => renderAst(ast)

Markdown.propTypes = {
  ast: PropTypes.object,
}

export default Markdown

astはGraphQLから引き出すことができます。

したがって、このコンポーネントはSSRとクライアント側で機能します。 とにかく私はそれがOSSでどうであるかを知っています。 私はそれが素晴らしい機能であり、コードの複雑さを減らすことができると思うので、誰かがより良い解決策を見つける時間があれば素晴らしいと思います。

私はあなたが言っていることに同意しません。良い議論を始めることは、60以上のコメントの非常にロードされたスレッドの終わりよりも、それ自体の問題ではるかに良いと思います。 😉

私と@avigoldmanは、野心的な2.0互換のMDX統合とユーティリティを収容するためにました。

現在、gatsby .mdxページは、プラグインを有効にした後、デフォルトで機能し、mdxの上に次の追加機能が追加されています。

• クラシックおよびJSONスタイルのフロントマターの使用とクエリ
• 定義されていないmdxファイルのデフォルトレイアウトを定義する

また、より洗練された統合を計画しています

• 高度な画像処理
• カスタムmdおよびhastプラグイン。
• gatsby-transformer-remarkと同じフィールドすべてとの互換性

私たちはまだライフサイクルのかなり早い段階にあるので、問題が発生した場合はお知らせください。問題は解決します:)

@ChristopherBiscardiは、gatsby-plugin-mdxと組み合わせて使用​​することを意図していますか、それともその代わりに使用することを意図していますか？

@silvenon gatsby-plugin-mdxは非推奨になり、1.0で停止

@ m-allansonは、 gatsby-mdxがある

そう思います、みんなありがとう🎉

では、ここで説明するように、 gatsby-mdxはgatsby-transformer-remarkと組み合わせてrehype-reactよりも優先されるようになりましたか？

答えが明確なイエスではない場合、誰かが両方のアプローチの長所と短所を説明できますか？

そのブログ投稿のこの部分があなたの質問に答えると思います。 rehype-reactは、ReactコンポーネントにマップするカスタムHTML要素を提供しますが、MDXは実際にはMarkdown内のJSXであり、より予測可能であり、警告が少なくなっています。

私はGatsbyチームに所属していませんが、そうだと思います。gatsby-mdxは、MarkdownでReactを実行するための推奨される方法です。

@janosh私の知る限り、gatsby-mdxはgatsby-transformer-remarkを完全に置き換えることはできません
たとえば、gatsby-remark-images＆gatsby-remark-copy-linked-filesやその他のgatsby-remarkプラグインをまだ見逃しているようです。
彼らはそれに取り組んでいると思いますが、現在の状態についてはよくわかりません

しかし、あなたがそれらのプラグインを必要としないか、待つことができるなら、私はそう言うでしょう、少なくとも私はそれを好むでしょう、私にはもっときれいに思えます

@CanRau今日（https://github.com/ChristopherBiscardi/gatsby-mdx/pull/68）、マージしてリリースすることを目的として、する前に、今日します。

PRの状態は、gatsby-remark- *プラグインが適切に適用されていることですが、たとえば、gatsby-remark-prismjsプラグイン（現在HTML出力を生成します）の出力がtransformer-remarkとmdxによって処理される方法に違いがあります。パイプライン。 gatsby-remark-prismjsのようなプラグインのサポートは重要であると考えていますが、最適ではないアプローチでもあります。 MDXの世界でより良いアプローチのようなものを使用することであるプリズム反応し、レンダラをとしてcodeの要素MDXProvider使用と比較すると、あなたのレンダリングを完全に柔軟性とコントロールを与えることになります、同様の効果を達成するためにプラグインにコメントします（また、そのコンポーネントを.jsページなどの非mdxコンテンツと共有できるようにします）。

私は、gatsby-remark- *プラグインサポートの最初のリリースでprismjsが機能しているよりも、copy-linked-filesと画像処理の機能にはるかに関心があります。

@ChristopherBiscardi、特にコピーリンクされたファイルと画像のサポートは素晴らしいと
たぶん私はいくつかのフィードバックを共有することができます、私はそれをいくつかの小さなメタページで試してみると思います

あなたがあなたの作品をストリーミングしていることを知るのは興味深いです..私は生き物にまったく慣れておらず、あなたがいつ人生を送るのかを知る方法をまだ理解していません..おそらく私が推測するアカウントでのみ機能します

時間があれば、将来いつでも助けていただければ幸いです。質問がある場合は、遠慮なく私に連絡してください:)フィードバック自体はどちらの方法でも役立ちます。試してみる場合は、必ず問題を報告してください。

あなたがあなたの作品をストリーミングしていることを知るのは興味深いです..私は生き物にまったく慣れておらず、あなたがいつ人生を送るのかを知る方法をまだ理解していません..おそらく私が推測するアカウントでのみ機能します

Twitchチャンネルの下部にストリーミング時間の「カレンダー」を設定しました。 誰かがTwitchアカウントを持っていて、私をフォローしている場合は、私がライブになると通知が届きますが、それ以外の場合はスケジュールを確認してください。 アカウントを持っているかどうかを確認できることは間違いありません。 私は自分自身をストリーミングするのは少し新しいので（今は数週間しかやっていない）、この種のことを行うためのより良い方法を常に開いています。 何人かの人が繰り返し来て、チャットでたむろしたり、見たり、話したりしました。これはとても楽しいです:)

わかった、知っておくといい

そして、私が何かに遭遇したとき、私は確かに問題を投稿します;）

ところで、Prismが言及されたので、理想的にはリマーク/リハイププラグインを直接使用する必要があることを追加したいと思います。MDXはmdPluginsおよびhastPluginsオプションを介してそれをサポートします（これはgatsbyを通過できます） -mdx）。 @ mapbox / rehype-prismのようなプラグインはhastPluginsに追加できますが、mdx-js / mdx＃226で修正した空白の問題がいくつかあったので、それがマージされてリリースされると、構文の強調表示が適切になりますトーゴ！

ええ、完全に。 gatsby-mdxは、remark / rehypeプラグインをmdxコアに渡すことをすでにサポートしています。 たとえば、 @ mapbox / rehype-prismを次に示します（PR / Issueのディスカッションの一部からその例をヤンクしました。元々は@silvenonでした、ありがとう）。 AFAIKリハイププリズムはプリズムプラグインをサポートしていないため、ユースケースによっては常にトレードオフになります（プリズムにリハイププラグインを使用すると、たとえば、 react-liveなどを統合するのが難しくなると思います）

gatsby-remark-prismjsおよびその他のgatsby-remark- *プラグインのサポートは本日0.1.1でリリースされたため、rehype / remark / react-components間で構文を強調表示するためのオプションが少なくとも3つあります😝