react-nativeでreact-styleguidistを使う

react-native のプロジェクトでreact-styleguidistを使う方法です。

コードのサンプルは本家の方に PR 送ったのでこちらの見てください。

• https://github.com/styleguidist/react-styleguidist/tree/master/examples/react-native

本家の方でコードが変わっている場合もあります。ご注意ください。

使っているライブラリなどのバージョンは次の通りです。

• expo: 32.0.0
• react-styleguidist: 8.0.6
• react: 16.5.0
• react-dom: 16.7.0
• react-native-web: 0.10.0
• @babel/core: 7.2.2

Expo を使ってますが、react-native のプロジェクトでも大まかな手順はほとんど同じだと思います。

動作の仕組み

react-styleguidist には react-native で動作させるための仕組みがないので、react-native-webを使って react-native の UI コンポーネントを Web で表示できるように変換して表示します。

簡単な図に表すと次のような仕組み  に  なっています。

通常は react-native はMetro bundlerを通して実行可能な形式になりますが、react-native-web で動かす場合は、Babelを  使って  トランスパイルを行ってから、react-styleguidist で処理します。

react-styleguidist の導入

react-styleguidist とその  依存モジュールをインストール

react-styleguidist とその依存モジュールをインストールします。

npm install --save-dev @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/polyfill @babel/preset-env babel-loader babel-plugin-react-native-web file-loader metro-react-native-babel-preset react-dom react-native-web react-styleguidist webpack

注意点としては、react-native v0.57 からbabel-preset-react-nativeはmetro-react-native-babel-presetに置き換わっていて、Babel も 7 系を  使うようになっています。古いサンプルなどは依存関係のバージョンに注意してください。

react-artが依存関係に見つからないというエラーが出る場合は、npm インストールしてください。

styleguide.config.js を設定  する

styleguide.config.js を追加します。

// styleguide.config.js
const webpack = require("webpack");

module.exports = {
  require: ["@babel/polyfill"],
  components: "src/**/[A-Z]*.js",
  webpackConfig: {
    resolve: {
      // auto resolves any react-native import as react-native-web
      alias: { "react-native": "react-native-web" },
      extensions: [".web.js", ".js"],
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: "babel-loader",
          exclude: [/node_modules/],
          options: {
            plugins: [
              "@babel/proposal-class-properties",
              "@babel/proposal-object-rest-spread",
              "react-native-web",
            ],
            presets: [
              "@babel/preset-env",
              "module:metro-react-native-babel-preset",
            ],
            babelrc: false,
          },
        },
        {
          test: /\.(jpe?g|png|gif)$/i,
          use: [
            {
              loader: "file-loader",
              options: {
                hash: "sha512",
                digest: "hex",
                name: "[hash].[ext]",
              },
            },
          ],
        },
        {
          test: /\.ttf$/,
          loader: "file-loader",
        },
      ],
    },
    // Most react native projects will need some extra plugin configuration.
    plugins: [
      // Add __DEV__ flag to browser example.
      new webpack.DefinePlugin({
        __DEV__: process.env,
      }),
    ],
  },
};

 注意点としては、webpack のresolve.aliasオプションで、react-nativeの参照先をreact-native-webに置き換えている部分です。これで内部で宣言されている react-native 部分を react-native-web に豪快に置き換えています。

 実際のファイルはこちらです。

• https://github.com/mitsuruog/react-styleguidist/blob/master/examples/react-native/styleguide.config.js

これでnpm run styleguideをすると、次のような画面が表示されます。

まとめ

最近、react-native を仕事で使うことが多いので react-styleguidist が動かせるかどうか調べてみました。

react-nativeの参照先をreact-native-webに置き換えているため、実際の再現度など細かな部分で差異がありそうです。

• react-native-web: Compatibility with React Native

自分の場合は、採用を検討した結果、react-native-web部分に不安があるので見送りました。