## Situation

```blackboard
[vue-test-utils]: Using a string for stubs is deprecated and will be removed in the next major version.
```

## Solution

```javascript
import MessageContainer from '@/components/MessageContainer'
import { mount } from '@vue/test-utils'

// 1. cause
const MessageDisplayMock0 = '<p data-testid="message">Hello from the db!</p>'
// 2. solution 1
const MessageDisplayMock1 = {
  template: '<p data-testid="message">Hello from the db!</p>'
}
// 2. solution 2
const MessageDisplayMock2 = {
  render(h) {
    return h(
      'div',
      { attrs: { 'data-testid': 'message' } },
      'Hello from the db!'
    )
  }
}

describe('MessageContainer', () => {
  it('Wraps the MessageDisplay component', () => {
    const wrapper = mount(MessageContainer, {
      stubs: {
        //
        // 3. usage
        //
        MessageDisplay: MessageDisplayMock0
        // MessageDisplay: MessageDisplayMock1
        // MessageDisplay: MessageDisplayMock2
      }
    })
    const message = wrapper.find('[data-testid="message"]').element.textContent
    expect(message).toEqual('Hello from the db!')
  })
})
```

[vue-test-utils]: Using a string for stubs is deprecated and will be removed in the next major version.

## 1. Situation

```blackboard
[vue-test-utils]: isVisible is deprecated and will be removed in the next major version. Consider a custom matcher such as those provided in jest-dom: https://github.com/testing-library/jest-dom#tobevisible. When using with findComponent, access the DOM element with findComponent(Comp).element.
```



## 2. Solution

```blackboard
$ npm install --save-dev @testing-library/jest-dom
```
```diff
- expect(wrapper.find('button').isVisible()).toBe(false)
+ expect(wrapper.find('button').element).not.toBeVisible()
```

* [Using a non deprecated function should not print a deprecation warning #1532](https://github.com/vuejs/vue-test-utils/issues/1532#issuecomment-633444080)

[vue-test-utils]: isVisible is deprecated

## 長い前置き

VitePress と言うのが出ました。

* [vuejs/vitepress](https://github.com/vuejs/vitepress/tree/a3df035babe28fd086098fea26087fd3fbca17d0)

### ◯ VuePress ってなんだ？

VitePress は、平たくいうと VuePress の高速版です。用途は VuePress と代わりないので、そもそも VuePress がなんぞや？という方は以下の記事で概要を掴んでおくと良いかもしれません。

* [VuePressの基本的な使い方を入門者向けに解説！ - A-STAR](https://agency-star.co.jp/column/vuepress) 




### ◯ 静的サイトジェネレータってなんだ？

あとは個人ブログ的な用途については WordPress が独占的な地位であり続けると個人的には思ってるのですが、こちらの動画も、たいへん勉強になりました。VitePress は静的サイトジェネレータというアプリケーションに分類されますが、この動画は、その静的サイトジェネレータとはなんぞや、みたいなことを説明してくれています。

[![WordPressに代わる技術!!静的サイトジェネレーターについて【SSG/SPA/SSR/Webエンジニア/プログラマ】 - YouTube](http://img.youtube.com/vi/KxQqZjkpT94/0.jpg)](http://www.youtube.com/watch?v=KxQqZjkpT94)

以下は、Vue.js に限定されない静的サイトジェネレータの比較サイトです。GitHub のスター順に並べてくれています。一覧になっているので、雰囲気が掴みやすいかなと思いました。

* [StaticGen - A List of Static Site Generators for Jamstack Sites](https://www.staticgen.com/)

Vue.js に限定していうと VuePress 以外に Nuxt の @nuxt/content, Gridsome といった静的サイトジェネレータがあります。以下の動画は、その３つを比較してくれています。

[![Nuxt.js vs VuePress: Battle For The Best Blog App // Nuxt vs Gridsome - YouTube](http://img.youtube.com/vi/aaNwEIthGlI/0.jpg)](https://www.youtube.com/watch?v=aaNwEIthGlI&feature=youtu.be&t=662)



### ◯ なんで VitePress なんて作ったんだ？

* webpack による bundle が重たい。
* webpack を Vite で置きかえよう。

> VuePress は大好きなのですが、webpack 上に構築されているため、数ページのシンプルなドキュメントサイトの開発サーバを立ち上げるのにかかる時間に耐えられなくなってきています。HMRのアップデートを使ってさえ、ブラウザに反映されるまでに数秒かかることがあります。
> I love VuePress, but being built on top of webpack, the time it takes to spin up the dev server for a simple doc site with a few pages is just becoming unbearable. Even HMR updates can take up to seconds to reflect in the browser!
> [Motivation - vuejs/vitepress](https://github.com/vuejs/vitepress/tree/a3df035babe28fd086098fea26087fd3fbca17d0)

以下の動画では、Evan You 氏による VitePress の説明がなされています。

[![web.dev LIVE 2020: Day Three - YouTube(Evan You 氏による VitePress の説明)](http://img.youtube.com/vi/klnvttPfOUM/0.jpg)](https://www.youtube.com/watch?v=klnvttPfOUM&feature=youtu.be&t=600)



### ◯ Vite ってなんだ？

高速な webpack のようなものらしいです。

[![Native-ESM powered web dev build tool - YouTube](http://img.youtube.com/vi/rx249I9JmNU/0.jpg)](https://www.youtube.com/watch?v=rx249I9JmNU&feature=youtu.be&t=460)

* [Native-ESM powered web dev build tool - speakerdeck](https://speakerdeck.com/kazupon/native-esm-powered-web-dev-build-tool)


### ◯ HeadlessCMS と Jamstack

直接、静的サイトジェネレータ SSG と関係があるわけではないのですが、HeadlessCMS と Jamstack の２単語は押さえておいても良いのかなと思いました。以下は、HeadlessCMS について説明していただいている動画になります。

[![2020年に注目すべきウェブ技術 年末年始に勉強しよう - YouTube](http://img.youtube.com/vi/fCbo6X-3AMs/0.jpg)](https://www.youtube.com/watch?v=fCbo6X-3AMs&t=422)

以下は、JAMstack について説明していただいている記事になります。

* [JAMstackってなに？実践に学ぶ高速表示を実現するアーキテクチャの構成 - エンジニアHub](https://employment.en-japan.com/engineerhub/entry/2019/12/10/103000)
* [Jamstackとは何を指すのか今一度考えてみる - microCMS](https://microcms.io/blog/what-is-jamstack/)

以下の記事は WordPress に比して、なかなかクリティカルなメリットが見出しにくい、ということが書かれていてたいへん参考になりました。

> そんで、僕らSPAエンジニアとしてはもちろんJAMstackを普及させていきたいわけですが、そんなのエンジニアの都合だけであってメディア管理者のメリットがあんまりないからはっきり言って微妙という話はしました。
>
> * [【雑記】打倒WordPressなJAMstackメディアの未来 - フロントエンドの地獄](https://blog.nabettu.com/entry/postwordpress-and-jamstack)

<div></div>

> 僕もHeadless CMSってものを初めて聞いた時、
> その嬉しさが当時はピンとこなかったんだよな
> https://twitter.com/Keisuke69/status/1272168063127810048

<div></div>


> JAMstackの話。そこに向かうモチベーションとか一般的な話も含めてTinaCMSの人がゲストで。
> WordPressのことをMonolithicCMSと言っててなるほど。
> CMS部分とフロントエンドを切り離せるのが最大の売りだと思うので
> ただのブログ作るにはやはりオーバーエンジニアリングなんだろな
> https://twitter.com/Keisuke69/status/1272166570156949511





<br>
<br>
<br>
<br>
<br>
<br>

## VitePress のシステム構成概観

普通の Vue のインスタンスにマークダウンファイルを埋め込むようなことをしています。`router.go` で取得されたマークダウンファイルは Single File Compoent に変換されて `<Content />` というタグに割り当てられ、内部で使用されます。

![Slide1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254825/69711301-f252-e908-0517-44fefd447545.jpeg)




上記の図の関係は `/src/client/app/index.ts` を見ると雰囲気が伝わります。

```typescript
export function createApp() {
  
  // ... 中略

  // 1. テーマは、Single File Component で createApp によって埋め込まれます。
  const app =
    process.env.NODE_ENV === 'production'
      ? createSSRApp(Theme.Layout)
      : createClientApp(Theme.Layout)

  // 2. ルータは、リアクティブなデータ provide によって埋め込まれます。
  app.provide(RouterSymbol, router)
  app.provide(pageDataSymbol, pageDataRef)

  // 3. Markdown ファイルは、component によって埋め込まれます。
  app.component('Content', Content)

  // ... 中略

  return { app, router }
}
```

* [vuejs/vitepress - /src/client/app/index.ts#L13-L110](https://github.com/vuejs/vitepress/blob/582c5255e25e923d0ed7750dba1e830793e15a82/src/client/app/index.ts#L13-L110)

### ◯ VitePress は何をしているの？

主に以下２つのことをしています。

1. /index.md, /hello.md, /nihao.md のパスを解決しています。
2. マークダウンファイルを Vue.js の Single File Compoent に変換しています。

補足すると、docs ディレクトリ配下にマークダウンファイルがあった場合、VitePress は /index.md へのリクエストを /docs/index.md に、/hello.md へのリクエストを /docs/hello.md に変換してくれます。そして、次にアクセスされた /docs/hello.md を Single File Component に変換して、返しているという訳です。

### ◯ アクセスなんかしないけど？

/index.md, /hello.md なんかにアクセスなんかしないけど、どういうことでしょうか？

dev の場合、例えば /docs/hello.md にファイルを置いた場合、ブラウザでは /hello にアクセスすると思います。/hello.md にはアクセスしていないように見えます。しかし、内部では dev サーバから各コンポーネントを個別に HTTP リクエストして取得しています。これはデベロッパツールの network タブを開いて見るとわかりやすいかもしれません。デモの動画を作りました。

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/7TtBTTgwviI/0.jpg)](http://www.youtube.com/watch?v=7TtBTTgwviI)

build の場合は、確認中です。



## VitePress のディレクトリ構成概観

GitHub のリポジトリ配下にあるファイルは、エントリーポイント、サーバ、クライアントの３つに大きく分類できます。番号は、次節の目次に対応しています。

```blackboard
                   2           2.1, 2.2                5
bin/vitepress.js  -->  src/node  -->  src/client/app  -->  src/client/theme-default
エントリーポイント  |    サーバ     |               クライアント
```

### ◯ 目次

どことどこが繋がっているか、つなぎこまれているかを中心に見て行きます。



1. [VitePress のディレクトリ構成](https://qiita.com/domodomodomo/items/1048f51d98ab5fd52d12)
2. [src/client/app と src/client/theme-default のつなぎ込み](https://qiita.com/domodomodomo/items/49b1944f09f8f9f57519)
3. [Markdown ファイルと src/client/app, Vue インスタンス本体のつなぎ込み](https://qiita.com/domodomodomo/items/f44bf1f49cff511890c7)
4. [Vite と VitePress のつなぎ込み](https://qiita.com/domodomodomo/items/c3b828bf9f7cb7e9a18f)
  1. [dev 編](https://qiita.com/domodomodomo/items/aea100ae69344d6dcc39)
  2. build 編(未着手)




### ◯ 補足

また WIP, Work In Progress で頻繁に変更されているため、引用しているコードごとにバージョンが、異なります。同一記事内では、なるべく同じバージョンになるようにしています。

4 がメインで結論部分なので読める方は 4 から読んでいただいた方が速いと思います。しかし 4 が一番重たいです。1, 2, 3, 4 で周りから崩した方が、理解しやすいかなと思いました。

項番 3 の記事のタイトルは、「VitePress のルータの実装」になります。Markdown ファイルと app, Vue インスタンス本体のつなぎ込みも、どうやってやっているんだろう？と思ったのですが、`router.go` でつなぎ込んでいます。詳細は、項番 3 のリンク先をご確認ください。

項番 4 では、Markdown ファイルから Vue コンポーネントへの変換を確認しています。

node ディレクトリの中の内容と client の中の内容、サーバとクライアントのつなぎ込みって、どうやっているんだろう？と思ったのですが、冷静に考えて HTTP 通信をさせているだけでした。


## 参考

console.dir, console.log で変数などを表示してみたい時は、CONTRIBUTING.md に記載された方法で起動するとやりやすいです。

* [vuejs/vitepress - /CONTRIBUTING.md](https://github.com/vuejs/vitepress/blob/da8df19cbe8d1fdb787cab6d4e10f7d63f3f16c9/CONTRIBUTING.md)

VitePress の概要とソースコードの外観を見て行きます。

VitePress の概要とソースコードの概観

## 用例

`/pages/index.js` から `/posts/title/eye-catch.jpg` を参照するシーンを想定しています。

```jsx
// /pages/index.js
(
  {/* ルート相対パス */}
  <img src={require('../posts/title/eye-catch.jpg').default} />

  {/* 絶対パス(エイリアスによる) */}
  <img src={require('@/posts/title/eye-catch.jpg').default} />
)
```


プロパティに `default` をつけないといけないことに留意してください。

* [Webpack file-loader outputs [object Module] - Stackoverflow](https://stackoverflow.com/questions/59070216/webpack-file-loader-outputs-object-module)




## 設定

`file-loader`, `url-loader` を追加して、

```blackboard
$ npm install -S file-loader url-loader
```


以下のコードを `next.config.js` に追記します。

```js
// next.config.js
module.exports = {
  webpack (config, options) {
    // image
    config.module.rules.push({
      test: /\.(png|jpg|gif|svg)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          fallback: {
            loader: 'file-loader',
            options: { publicPath: '/_next/static/images', outputPath: 'static/images' }
         }
        }
      }
    })

    // ailias
    config.resolve.alias['@'] = __dirname
    
    return config
  },
}
```



## 背景

ブログの記事を作成するにあたり、各記事のディレクトリに画像を配置したいと思いました。
公式ドキュメントには `public` に置くものがありますが相対パスの参照はなかったため、まとめました。

> First, let’s talk about how Next.js handles static assets such as images.
> Next.js can serve static files, like images, under the top-level public directory.
> Files inside public can be referenced from the root of the application similar to pages.
> If you open pages/index.js in your application and take a look at the \<footer\>,
> we refer to the logo image like so:
> ```html
> <img src="/vercel.svg" alt="Vercel Logo" className="logo" />
> ```
* [Next > Learn > Assets, Metadata, and CSS > Asset](https://stackoverflow.com/questions/59070216/webpack-file-loader-outputs-object-module)



## 参考

以下の資料を参考にさせていただきました。

* [next export does't work with custom webpack loaders #3586](https://github.com/vercel/next.js/issues/3586)
* [React + Next.jsで画像をimportする - Qiita](https://qiita.com/silloi/items/876ced64c704b35b22c9)
* [Image Relative Path in React](https://dev.to/sofiajonsson/image-relative-path-in-react-3fci)

file-loader と url-loader が必要になります。意外と手間がかかります。

Dachaidamu Lake, Haixi Mongol and Tibetan Autonomous Prefecture, China

React Next で img の src を相対参照したい。

## 概要
CSS in JS のやり方を模索していたのですが、CSS を追加する方法がわかりませんでした。
結局 `<Head>` の中に `<link>` を書き込んで逃げました。以下のようなステップを踏みました。

<div class="procedure">
  <div class="procedure__step">Head タグ</div>
  <p class="procedure__description">
    Head タグを import して、JSX に記述します。
  </p>

  <div class="procedure__step">CSS への CDN リンク</div>
  <p class="procedure__description">
    CSS への CDN リンクを HEAD タグに書き込みダウンロードします。
  </p>

  <div class="procedure__step">markdown-it-prism</div>
  <p class="procedure__description">
    markdown-it-prism を import して、markdown-it に設定します。
  </p>
</div>



## コード

`getStaticPaths` と `getStaticProps` を使い静的なページを生成します。
`/posts` ディレクトリの配下に Markdown ファイルを保存しているものとします。

```blackboard
$ npm install -S markdown-it-prism
```
```js
/*
    /pages/[slug].js
 */
import MarkdownIt from 'markdown-it'
import markdownItPrism from 'markdown-it-prism'
import Head from 'next/head'

export default ({ innerHtml }) => (<>
  
  {/*
    Step 1. Head タグ
    Step 2. CSS への CDN リンク 
    */}
  <Head>
    <title>{ タイトル }</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/themes/prism-tomorrow.min.css" rel="stylesheet"/>
  </Head>
  <main className="main">
    <div dangerouslySetInnerHTML={{ __html: innerHtml }}></div>
  </main>
</>)

export async function getStaticPaths () {
  const fileNames = fs.readdirSync('./posts')
  const paths = fileNames.map(fileName => ({
    params: {
      slug: fileName
    }
  }))
  return {
    paths,
    fallback: false
  }
}

export async function getStaticProps ({params: {slug}}) => {
  const markdownIt = new MarkdownIt()

  /* Step 3. markdown-it-prism */
  markdownIt.use(markdownItPrism, {})
  const markdownFile = fs.readFileSync(path.join("./posts/", slug + ".md")).toString()
  const innerHtml = markdownIt.render(markdownFile)
  return { props: { innerHtml } }
}
```

markdown-it に markdown-it-prism を追加します。CSS は CDN からダウンロードします。

React Next で <br> markdown-it と prism が使いたい。

style jsx で記述した CSS は scoped になってくれます。
しかし dangerouslySetInnerHTML から渡した CSS は scoped になりません。
結局、global に CSS を当てていくしかなさそうです。

> The style is going to be localize, ...
> You should declare the style as global style: ...<br>
> * [Styles don't apply correctly on dangerouslySetInnerHTML div's #2764](https://github.com/vercel/next.js/issues/2764)

結局、global に CSS を当てていくしかなさそうです。

dangerouslySetInnerHTML に<br>スタイルが当たらない。

[Dynamic Routes](https://nextjs.org/learn/basics/dynamic-routes) を使っている場合、
一手間工夫が必要になるようです。

```blackboard
//
// NG
//
<Link href={post.meta.slug}>
	<a>{post.title}</a>
</Link>;
```
```jsx
//
// OK
//
<Link href='/[slug]' as={`/${post.meta.slug}`}>
  <a>{post.title}</a>
</Link>
```

* [Nextjs causing hard refresh when i click in the Link #9382](https://github.com/vercel/next.js/issues/9382)
* [next/link doesn't work when child is function component #8425](https://github.com/vercel/next.js/issues/8425)

These women's from rural part of India, enjoying the beaut of Mumbai City during winters.

React Next で Link タグが SPA にならない。

"Ariadne" is Python's GraphQL web framework.
I think this framework is so nice.
And "Apollo client" is most popular GraphQL client.
When Ariadne return an error, this framework return a response with HTTP STATUS CODE 400.
HTTP SATUS CODE 400 makes "Apollo client" throw an error.

Then "Apollo client" is unable to properly handle the error from Ariadne,
because we cannot get a `result.errors` properly.
So even nasty solution, I create a middleware which force HTTP STATUS CODE change from 400 to 200.


```python
#
# usage
#
app = middleware(
    app
)
```

```python
#
# definition
#
from starlette.types import ASGIApp, Message, Receive, Scope, Send


def middleware(
    internal_app: ASGIApp
):
    """Change HTTP STATUS CODE from 400 to 200."""
    async def outer_app(
        scope: Scope,
        receive: Receive,
        send: Send
    ):
        async def send_wrapper(
            message: Message
        ):
            if 'status' in message and message['status'] == 400:
                message['status'] = 200
            await send(message)
        await internal_app(scope, receive, send_wrapper)

    return outer_app
```


Vue Apollo client throws an error when receives a HTTP response whose status code is 400.

Preparation Before the Biggest Festival of Bengal

[vue-test-utils]: Using a string for stubs is deprecated and will be removed in the next major version.

[vue-test-utils]: isVisible is deprecated

VitePress の概要とソースコードの概観

React Next で img の src を相対参照したい。

React Next で markdown-it と prism が使いたい。

dangerouslySetInnerHTML にスタイルが当たらない。

React Next で Link タグが SPA にならない。

Python Ariadne, how to change status code from 400 to 200.