Make spear to be changeable the api client via plugin parameter.

[mantaroh]

Changes

This PR make spear to support the Content Collection (#69). This feature collect content data from local files like mdx, unified eco system files(front-matter). [1][2]

In order to collect the content data from file, we need to replace the sdk-js client on spearly-cms-js-core[3].

This changes contains the two parts:

1. Change the cms-js-core to be able to inject the sdk-js api client.
2. Pass the cms-js-core generator to plugin via plugin parameter.

The (1) allow the changing customized client which returning local file. Hence this feature, user can replace the resource data without Spearly CMS.
Then user can pass the this customized client via plugin by (2) changes.

After releasing this feature, we can implement the following plugin.

{
        "pluginName": "markdown-client",
        "configuration": null,
        "beforeBuild": async (state, option) => {
          try {
            state.jsGenerator.injectFakeApiClient({
              analytics: {
                pageView: (params) => {
                  console.log("Unimplemented");
                },
              },
              getList: (contentTypeId, params) => {
                console.log("Unimplemented");
              },
              // Generate content from markdown files
              getContent: async (contentTypeId, contentId, params) => {
                const fileStat = await fs.stat(`./data/${contentTypeId}/${contentId}.mdx`)
                const file = await fs.readFile(`./data/${contentTypeId}/${contentId}.mdx`)
                const {attributes, body} = fm(file.toString())
                const bodyHtml = await remark().use(html).process(body);
                const fields = [];
                for (const key of Object.keys(attributes)) {
                  fields.push({
                    key,
                    value: attributes[key]
                  })
                }
                fields.push({
                  key: "body",
                  value: bodyHtml.toString()
                })

                return generateContent(fields, contentId, fileStat.birthtime, fileStat.mtime)
              },
              getContentPreview: (contentTypeId, contentId, previewToken) => {
                console.log("Unimplemented");
              }
            })
          } catch (e) {
            console.error(e)
          }
        },
        "afterBuild": null,
        "bundle": null,
}

[1] https://unifiedjs.com/
[2] https://mdxjs.com/
[3] #69 (comment)

---

変更点

この PR では Spear 上で Content Collection をサポートさせるようにします(#69)。この機能は mdx や unified エコシステムのファイルのように、ローカルファイルからコンテンツデータを収集します[1][2]。

ファイルからデータを収集するために、 spearly-cms-js-core で sdk-js のクライアントを置きかけ出来るようにします[3]。

この変更は２つのパートに分かれています。

1. cms-js-core を sdk-js API クライアントの差し替えを可能にする
2. cms-js-core の Generator をプラグインのプラグイン引数で渡すようにする

(1) はローカルファイルを返すカスタムされたクライアントを変更できるようにしています。この機能により、ユーザーは Spearly CMS 抜きでリソースデータを置換可能です。
そして、ユーザーはこのカスタムされたクライアントをプラグイン経由で渡すことができます。

この機能をリリース後、以下のような MDX からコンテンツを取得するプラグインを書くことができます。

{
        "pluginName": "markdown-client",
        "configuration": null,
        "beforeBuild": async (state, option) => {
          try {
            state.jsGenerator.injectFakeApiClient({
              analytics: {
                pageView: (params) => {
                  console.log("Unimplemented");
                },
              },
              getList: (contentTypeId, params) => {
                console.log("Unimplemented");
              },
              // Generate content from markdown files
              getContent: async (contentTypeId, contentId, params) => {
                const fileStat = await fs.stat(`./data/${contentTypeId}/${contentId}.mdx`)
                const file = await fs.readFile(`./data/${contentTypeId}/${contentId}.mdx`)
                const {attributes, body} = fm(file.toString())
                const bodyHtml = await remark().use(html).process(body);
                const fields = [];
                for (const key of Object.keys(attributes)) {
                  fields.push({
                    key,
                    value: attributes[key]
                  })
                }
                fields.push({
                  key: "body",
                  value: bodyHtml.toString()
                })

                return generateContent(fields, contentId, fileStat.birthtime, fileStat.mtime)
              },
              getContentPreview: (contentTypeId, contentId, previewToken) => {
                console.log("Unimplemented");
              }
            })
          } catch (e) {
            console.error(e)
          }
        },
        "afterBuild": null,
        "bundle": null,
}

[1] https://unifiedjs.com/
[2] https://mdxjs.com/
[3] #69 (comment)

[mantaroh]

レビュー用コメント: InMemoryMagic はブラウザ上で Spear を動かすために作成しましたが、 Web Containers をサポートしたことにより不要になります。(#187 のバグで今後削除予定)
Comments for Review: InMemoryMagic enable running Spear on browser, however this feature might to be unnecessary due to Web Containers (We can drop this feature on #187)

[mantaroh]

レビュー用コメント: SpearState はプラグインの各関数の引数として渡されます。 プラグイン実装
Comments for Review: This SpearState will be passed via plugin function. Implementation of plugin

[mantaroh]

レビュー用コメント: 他にも フォーム関係などの関数もありますが、Spear ではフォームを利用しないので定義から外しています。
Comments for Review: sdk-js has form realted function, however Spear doesn't use form API. So I don't defined these function.

[qst-exe]

[yoannes]