akameco / s2s Goto Github PK

Reactの自動生成

Stateの型により、初期化を行う。

In:

type State = {
	href: string,
	body: string,
}

class Page extends React.Component<Props, State> {
	render() {
	}
}

Out:

type State = {
	href: string,
	body: string,
}

class Page extends React.Component<Props, State> {
	state = {href: '', body: ''}

	render() {
	}
}

まずは、この限定された生成を目指すが、最終的には、未定義な状態の初期化プラグインとして、一般化ができそう。

• module name: babel-plugin-s2s-reducer-case-creater
• module version: 0.1.9
• node version: 8.11.1
• yarn version:1.5.1

Do you want report a bug?:
bugかは不明な報告です。

s2s: version 0.18.1

にて、babel-plugin-s2s-reducer-case-createrがエラーで止まります。

$ /Users/user_home/Documents/Devs/ProjectsRoot/projectName/node_modules/.bin/s2s
s2s started monitoring. Enjoy coding with s2s.
babel:s2s-action-types app/containers/someObjectViewPage/actionTypes.js → app/containers/someObjectViewPage/actionTypes.js
babel:s2s-action-creater app/containers/someObjectViewPage/actionTypes.js → app/containers/someObjectViewPage/actions.js
TypeError: /Users/user_home/Documents/Devs/ProjectsRoot/projectName/app/containers/someObjectViewPage/reducer.js: Cannot read property 'filter' of undefined
at SwitchStatement.items.map.name (/Users/user_home/Documents/Devs/ProjectsRoot/projectName/node_modules/babel-plugin-s2s-reducer-case-creater/lib/index.js:79:79)
at Array.map ()
at SwitchStatement (/Users/user_home/Documents/Devs/ProjectsRoot/projectName/node_modules/babel-plugin-s2s-reducer-case-creater/lib/index.js:76:42)
at NodePath._call (/Users/user_home/Documents/Devs/ProjectsRoot/projectName/node_modules/babel-traverse/lib/path/context.js:76:18)
at NodePath.call (/Users/user_home/Documents/Devs/ProjectsRoot/projectName/node_modules/babel-traverse/lib/path/context.js:48:17)
at NodePath.visit (/Users/user_home/Documents/Devs/ProjectsRoot/projectName/node_modules/babel-traverse/lib/path/context.js:105:12)
at TraversalContext.visitQueue (/Users/user_home/Documents/Devs/ProjectsRoot/projectName/node_modules/babel-traverse/lib/context.js:150:16)
at TraversalContext.visitMultiple (/Users/user_home/Documents/Devs/ProjectsRoot/projectName/node_modules/babel-traverse/lib/context.js:103:17)
at TraversalContext.visit (/Users/user_home/Documents/Devs/ProjectsRoot/projectName/node_modules/babel-traverse/lib/context.js:190:19)
at Function.traverse.node (/Users/user_home/Documents/Devs/ProjectsRoot/projectName/node_modules/babel-traverse/lib/index.js:114:17)
at NodePath.visit (/Users/user_home/Documents/Devs/ProjectsRoot/projectName/node_modules/babel-traverse/lib/path/context.js:115:19)
at TraversalContext.visitQueue (/Users/user_home/Documents/Devs/ProjectsRoot/projectName/node_modules/babel-traverse/lib/context.js:150:16)
at TraversalContext.visitSingle (/Users/user_home/Documents/Devs/ProjectsRoot/projectName/node_modules/babel-traverse/lib/context.js:108:19)
at TraversalContext.visit (/Users/user_home/Documents/Devs/ProjectsRoot/projectName/node_modules/babel-traverse/lib/context.js:192:19)
at Function.traverse.node (/Users/user_home/Documents/Devs/ProjectsRoot/projectName/node_modules/babel-traverse/lib/index.js:114:17)
at NodePath.visit (/Users/user_home/Documents/Devs/ProjectsRoot/projectName/node_modules/babel-traverse/lib/path/context.js:115:19)

同じマシンでの別プロジェクト(create-react-appからeject)したものでは問題無く動作します。

何か設定に不備があるのでしょうか？

• module name: babel-plugin-s2s-variable-initializing
• module version: [email protected]
• node version: v8.9.1
• yarn version: 1.3.2

Relevant code or config

検証で足したテスト

/* /packages/babel-plugin-s2s-variable-initializing/__fixtures__/index.js */
// @flow
type S = { a: number }
var a: S

type X = number
var b: X

var c

var d = {}

type Y = string
let e: Y

type Z = {
  a: string,
  b: string,
}

type Z2 = { a: string, b: string }

const f = {
  a: 'this is a',
  b: 'this is b',
}

 FAIL  packages/babel-plugin-s2s-variable-initializing/src/index.test.js
  s2s-variable-initializing
    ✕ initialize variable (508ms)

  ● s2s-variable-initializing › initialize variable

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot 1.

- Snapshot
+ Received

@@ -40,15 +40,15 @@

  type Y = string;
  let e: Y = "";

  type Z = {
-   a: string,
-   b: string
+   a: string;
+   b: string;
  };

- type Z2 = { a: string, b: string };
+ type Z2 = { a: string; b: string; };

What you did:

s2s-variable-initializing の適用

What happened:

複数プロパティをもつ type 定義内に semicolon が挿入される。
カンマがセミコロンに replace される。
ワンラインでも複数行でも起こる。

Why

ts→tsがBabel7で吐けるため

How

Babel6 → Babel7

🤔

Beta版リリース or masterをBabel7対応
今あるs2sプラグインが全て対応できていればBabel7にあげてしまって構わないか？

今確認したところ https://github.com/babel-utils/babel-plugin-tester など、まだ周辺のエコシステムがBabel7対応できていない

why

現状では、以下のような出力をするが、どのプラグインが処理したかわかりづらい

S2S src/containers/App/actionTypes.js → src/types/action.js
S2S src/containers/App/actionTypes.js → src/containers/App/actionTypes.js
S2S src/containers/App/actionTypes.js → src/containers/App/reducer.js
S2S src/containers/App/actionTypes.js → src/types/action.js

そこで、以下のような出力に変更する

babel:s2s-action-root src/containers/App/actionTypes.js → src/types/action.js
babel:s2s-action-types src/containers/App/actionTypes.js → src/containers/App/actionTypes.js
babel:s2s-reducer-case-creater src/containers/App/actionTypes.js → src/containers/App/reducer.js

プラグイン名が必要のないハンドラの場合

handlerName src/containers/App/actionTypes.js → src/containers/App/reducer.js

How

ハンドラーに破壊的変更を加える
Codeを返すのではなく{code: Code, meta: Meta}を返す。

export type Handler = (code: Code, opts: HandlerOpts) => Code

↓ ↓ ↓

export type Handler = (code: Code, opts: HandlerOpts) => {code: Code, meta: Meta}
type Meta = {
  handlerName: string,
  pluginName?: string
}

Why

#1 の問題を解決したいが、タイトルどおり同じファイルに出力すると、そのイベントを拾ってしまい、無限ループが発生する。

How

大きく２つ考えれれる。
一つ目はキャッシュ戦略。
ファイルの差分を見てイベントを発生させるかを判定する。

二つ目は、ロック。
ファイルを変更したらSetにファイル名を追加し、次のイベントを無視する。その後、Setからファイル名を削除しする。

今回は、２つ目のロックの方式で実装を行う。

• module name: s2s
• module version:
• node version:
• yarn version:

Do you want to request a feature or report a bug?: feature

What is the current behavior?: 現在の実装だと、既存のプロダクトにs2sを導入した場合やpluginが更新された場合に対象の全てのファイルに対して保存をしてwatch対象にする必要がある。

What is the expected behavior?: 起動時に対象となるファイルに変換を適用。jsshiftやbabel-codemodのような機能を追加する

What is the suggested solution?:

• module name: babel-plugin-s2s-initial-state-creater
• module version: 0.3.1
• node version: 9.2.1
• yarn version: 1.3.2

Do you want to request a feature or report a bug?: bug

What is the current behavior?: UnionTypeの場合nullで上書きされる

export type State = {
  filter:  'ALL' | 'ACTIVE',
}
export const initialState: State = { filter: 'ALL' }

↓ ↓ ↓

export type State = {
  filter:  'ALL' | 'ACTIVE',
}
export const initialState: State = { filter: null }

What is the expected behavior?: 上書きしない

export type State = {
  filter:  'ALL' | 'ACTIVE',
}
export const initialState: State = { filter: 'ALL' }

↓ ↓ ↓

export type State = {
  filter:  'ALL' | 'ACTIVE',
}
export const initialState: State = { filter: 'ALL' }

What is the suggested solution?:

Why

Babel Pluginは2タイプ存在するので、それに対処する必要がある。

How

以下のタイプが存在する。

• 変更が発生したファイルにそのまま出力するタイプ
• 変更が発生した場合、そのパスをオプションで渡し、別ファイルに出力するタイプ

現状では、別ファイルに出力する以外対応出来てない。

Why

現在は、Babel6をデフォルトのハンドラーとして使っているが、 例えば、Babel7のハンドラーである s2s-handler-babel-next をデフォルトに変更可能にする。
それぞれのPluginにhandlerを毎回書く必要がなくなる。

How

const s2sHandlerBabelNext = require('s2s-handler-babel-next').default

module.exports = {
  watch: './**/*.js',
  defaultHandler: s2sHandlerBabelNext,
  plugins: [ ... ],
}

🤔

拡張子で分岐出来るようにした方が、汎用性があるかもだが、ここで一応言及しといて必要になったら実装する。

const handlerBabelNext = require('s2s-handler-babel-next').default
const handlerTs = require('s2s-handler-typescript').default

module.exports = {
  watch: './**/*.js',
  defaultHandler: {
    js: handlerBabelNext,
    ts: handlerTs,
  },
  plugins: [ ... ],
}

あまりこのパターンはなさそうに思える。

• module name: s2s-cli
• module version: master
• node version:
• npm (or yarn) version:

Why

内部でbabelを使っているためコストなしで、mjs形式を導入できる。

How

configの読み込み時にBabelを走らせる

• module name:
  redux-persist

• module version:
  v5.3.4

• node version:
  v9.0.0

• npm (or yarn) version:
  yarn v0.24.6

What you did:

https://github.com/rt2zz/redux-persist#migration-from-v4-to-v5
redux-persist の v5 を設定しようとした。

What happened:

persistCombineReducers を挿入できない

• module name:
  babel-plugin-s2s-variable-initializing
  https://github.com/akameco/s2s/tree/master/packages/babel-plugin-s2s-variable-initializing

• module version:

• node version:
  v8.9.1

• yarn version:
  yarn: 1.3.2

What you did:

s2s のvariable-initializing を使っていて const で初期化生成しようとした。

What happened:

const では出来なかった。
var や let では動作した。

Problem description

背景

• s2s-hook-tslint
  • このhookは、tslintのAPIの都合上、lintを行う際にファイルへと書き込む
• s2s-cli
  • Hookを呼び出す runHook では、 plugin.input のパスを渡している 該当箇所:

    s2s/packages/s2s-cli/src/handlers/handle-plugin.js

    Line 38 in f517ffa

    const result = runHooks(code, filename, hooks)

起こった問題

• オプションで、inputと異なるoutputを渡すプラグインとs2s-hook-tslintを併用すると不具合が起きる
  • inputのファイルの内容がoutputで上書きされる

Suggested solution

1. runHookで、 plugin.output を渡す

• hookが成果物へのLintで使用するAPIと考えると、 こちらのほうが整合性が有るかもしれない

2. 何らかの方法でs2s-hook-tslintをファイルに書き込まないように変更する

• module name: s2s-cli,s2s-handler-typescript
• module version: master
• node version:
• npm (or yarn) version:

Why

デフォルトでs2s-handler-typescirptをs2s-cliに入れ、拡張子でハンドラを決定したい。
tsのファイルを処理する場合、基本的にこのハンドラを使う必要がある。
すでに、内部でprettier (ts対応)してるため、特に問題はないと思われる。

利点として、tsの場合も特殊なconfigを書かなくていい。jsの場合と全く同じconfigを使える。

How

s2s-handler-typescirptをs2s-cliに入れるだけ。
prettierの オプションをどうするかに注意する必要がある。

Why

開発環境のみで使うツールなので、レガシー環境をサポートする必要がない

s2s/flow-execaのドキュメント生成

Problem description:

• コードを自動生成した後、Lint等の処理を行いたい
  • 自動生成したコードがプロジェクトのLint設定と異なる場合がある

Suggested solution:

• 1ファイルに対して複数ハンドラに対応させ、順番に適用する
• コードの自動生成を行った後、各種Lintを行うよう設定

設定の変更イメージ

{
  handlerMapper: [
    {
      test: '*.ts',
      use: typescriptHandler,
    },
    {
      test: '*.ts',
      use: tslintHandler,
    },
  ]
}

babel-plugin-s2s-initial-state-creater@^0.3.5 などが依存しているので npm install 時にエラーが起こる

エラー文

warning Lockfile has incorrect entry for "flow-faker@^0.2.2". Ignoring it.
Couldn't find any versions for "flow-faker" that matches "^0.2.2"

• module name: flow-faker
• module version: 0.2.2
• node version: v9.10.1
• yarn version: 1.7.0

**Do you want to request a feature or report a bug?: bug

What is the suggested solution?:

publish される

• module name:
• module version: master
• node version: v8.9.1
• yarn version: 1.3.2

Relevant code or config

What you did:

examples/shopping-cartを試そうとしていくつかエラーが出ました。

What happened:

エラー1:

only one instance of babel-polyfill is allowed

原因:
s2s-cli, babel-plugin-s2s-reducer-test-caseでimport('babel-polyfill')してるから

暫定対応:
s2s-plugins-reduxのpackage.jsonのdependenciesをローカルファイルに書き換えて、上記のpluginを下記に書き換え
if (!global._babelPolyfill) {
require('babel-polyfill');
}

解決策:
上記でs2s-cli, babel-plugin-s2s-reducer-test-caseを書き換えでも良いし、別の対応でbabel-polyfillを1度だけ読み込むようにする

エラー2:

TypeError: /Users/fujiwaraakio/s2s/examples/shopping-cart/src/containers/CartContainer/reducer.js: (0 , _s2sHelperGetActionObj.getAllTypeProperty) is not a function
    at PluginPass.Program (/Users/fujiwaraakio/s2s/packages/babel-plugin-s2s-reducer-case-creater/lib/index.js:50:73)
    at newFn (/Users/fujiwaraakio/s2s/packages/s2s-cli/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/fujiwaraakio/s2s/packages/s2s-cli/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/fujiwaraakio/s2s/packages/s2s-cli/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/fujiwaraakio/s2s/packages/s2s-cli/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/Users/fujiwaraakio/s2s/packages/s2s-cli/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/Users/fujiwaraakio/s2s/packages/s2s-cli/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/Users/fujiwaraakio/s2s/packages/s2s-cli/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (/Users/fujiwaraakio/s2s/packages/s2s-cli/node_modules/babel-traverse/lib/index.js:114:17)
    at traverse (/Users/fujiwaraakio/s2s/packages/s2s-cli/node_modules/babel-traverse/lib/index.js:79:12)

原因:
babel-plugin-s2s-reducer-case-createrのところでエラー
s2s-helper-get-action-objのv0.1.4がnpm iするとgetAllTypePropertyがない状態

暫定対応:
babel-plugin-s2s-reducer-case-createrのpackage.jsonのdependenciesのs2s-helper-get-action-objをローカルファイルに書き換え。

解決策:
s2s-helper-get-action-objのgetAllTypePropertyがある状態でpublishする

• module name: s2s
• module version: *
• node version: *
• yarn version: 1.3.2

Do you want to request a feature or report a bug?: feature

What is the current behavior?: プロジェクトにtemplateを必ず配置

What is the expected behavior?: テンプレートをインストール可能し再利用できるようにする。

What is the suggested solution?:

正規表現は複雑で難しい。

https://github.com/sindresorhus/globby を使う。

以下のような指定が可能になる。

test: ['**/*.js', '!**/*.test.js']

stringorstring[]を指定可能にする。

Problem description

試せるサンプルが少ない

Suggested solution

Counterのサンプルの追加

Why

以下のようなケースが存在する。

• reducer.jsからreducer.test.jsを生成する。

inputオプションで色々いじってもいいが、s2s側で実行時にイベントが発生したパスをfromとして与えてやるのが最もシンプルになる。

• module name: babel-plugin-s2s-initial-state-creater
• module version: [email protected]
• node version: v8.9.1
• yarn version: 1.3.2

Relevant code or config

検証で足したテスト

/* packages/babel-plugin-s2s-initial-state-creater/__fixtures__/reducer-mix.js */
// @flow
type Count = number
type Item = { count: Count, isLoading: boolean }
type State = Array<Item>

const initialState: State = []

FAIL  packages/babel-plugin-s2s-initial-state-creater/src/index.test.js
● s2s-initial-state-creater › initialState array

expect(value).toMatchSnapshot()

Received value does not match stored snapshot 1.

- Snapshot
+ Received

@@ -13,7 +13,7 @@
  type Count = number;
  type Item = { count: Count; isLoading: boolean; };
  type State = Item[];

  // $FlowFixMe
- const initialState: State = [];
+ const initialState: State = {};
  "

  at tester (node_modules/babel-plugin-tester/dist/index.js:196:44)
  at Object.<anonymous> (node_modules/babel-plugin-tester/dist/index.js:108:13)
      at Generator.next (<anonymous>)
  at step (node_modules/babel-plugin-tester/dist/index.js:43:191)
  at node_modules/babel-plugin-tester/dist/index.js:43:361
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:188:7)

What you did:

initial-state-creater で reducer のinitialState に配列を定義した。

What happened:

初期化がから配列でなく空オブジェクトとなる。
別の初期化も空オブジェクト上書きされる。

Suggested solution:

State がオブジェクトである reducer のみに適用するべき plugin ですか？その場合各自が target を s2s.config で調整します。

期待する動作
とりあえず配列の場合は変更されない。

Why

reduce.jsを作成した際に、reducer.test.jsも伴って作成したい。
今は以下のように別々に設定する必要がある。

  templates: [
    { test: /reducer.js/, input: 'reducer.js' },
    { test: /reducer.test.js/, input: 'reducer.test.js' },
  ],

ここにoutputオプションを加えると、以下のようにreducer.js作成時に、reducer.test.jsが作成可能になる。

  templates: [
    { test: /reducer.js/, input: 'reducer.js' },
    { test: /reducer.js/, input: 'reducer.test.js', output: 'reducer.test.js' },
  ],

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Why

s2sを2万行程度の小規模なアプリケーションに適用しているが、そのフィードバック。

以前までUnionを使って以下のように共通のtypeををまとめていたが、s2s-action-typesでは、別々のActionTypeとして定義される。すると、{id: number}の部分が重複して記述する必要がある。アクションタイプを別にすることでアクションクリエイター側で型が一意に決まるという利点があるが、記述が重複し少しわかりづらい。(が、これはこの型の書き方するトレードオフな気がする)

 export type Action =
  | {|
      type: 'FetchAliceRequest' | 'FetchBobRequest'
      id: Id,
    |}

export type FetchAliceRequest = {
	typeof ...,
	id: Id, // ← 
}

export type FetchBobRequest = {
	typeof ...,
	id: Id, // ← 
}

export type Action = FetchAliceRequest | FetchBobRequest

また、現在は生成をオブジェクトに限定しているが、共通の型を定義し、&を使うパターンもある。

type WithId = { id: Id }

export type FetchAliceRequest = {
	typeof ...,
} & WithId // ←

export type FetchBobRequest = {
	typeof ...,
} & WithId // ←

export type Action = FetchAliceRequest | FetchBobRequest

これに対応したいが、そのためには、関数生成時に内部でflowの推論を呼ぶ必要がある(グローバルや別ファイルに型定義されている可能性もありASTから判断するには複雑すぎる)があるため、挙動が大きく変わる。
別のプラグインとして切り出した方が良いかもしれない。

How

とりあえず、export していない型定義は残すように変更をする。

🤔

また、s2sを適用する段階で、型がほぼ同じなら実装もほぼ同じであり、重複しているのでは？という疑問が生まれた。

これはissueと関係のないメモだが、共通する処理をASTにより抽出し、自動リファクタが可能かも知れない。

index.jsの出力をindex.test.js、add.jsの出力をadd.test.jsのようにしたい。

How

configにのoutputオプションに[name].test.jsのように指定可能にする。
これはwebpack.config.jsの方法と同じ。

Why

s2s-pluginsをモノレポ化して体験がよかった。
また、s2s本体だけ別で管理しているとサンプルの参照などが面倒なため。

• module name: babel-plugin-s2s-action-types
• module version:
• node version:
• yarn version:

Problem description

チーム開発においてはじめて見た場合、変数を編集してしまう可能性がある。
また、型が一番下にある必要がない。

export type Action = Increment

↓ ↓ ↓

// @flow
export const INCREMENT: 'app/counter/INCREMENT' = 'app/counter/INCREMENT'

export const Actions = {
  INCREMENT,
}

export type Increment = {
  type: typeof INCREMENT,
}

export type Action = Increment

Suggested solution

順序の入れ替え。
コメントを挿入する。

しかし、s2sは基本的にコーディングのショートカットのためのツールであるので、本当にコメントを挿入すべきか疑問が残る。s2sが必要なくなった場合にコメントが残っているのはおかしい。

export type Action = Increment

↓ ↓ ↓

// @flow
export type Action = Increment

export type Increment = {
  type: typeof INCREMENT,
}

// generated by s2s. Do not edit below this.
export const INCREMENT: 'app/counter/INCREMENT' = 'app/counter/INCREMENT'

export const Actions = {
  INCREMENT,
}

• module name: examples
• module version:
• node version:
• yarn version:

Why

プラグインの更新にサンプルが追従出来てない。

Suggested solution

サンプルの更新

Why

全て絶対パスとして処理しているので、configの記述が面倒。

このように書きたい。

    {
      test: /containers\/.+reducer.js/,
      input: 'reducer.test.js',
      output: 'reducer.test.js',
      plugin: ['s2s-reducer-test-case'],
    },

Why

npm iした場合、s2sが走ってしまう。

Suggested solution:

watchにデフォルトでnode_modulesをignoreする設定を加える

Why

現状の説明だと何もわからない

How

• プラグインの各オプションの説明
• 日本語docsの追加

• s2s.config.jsの書き方
• クイックスタート
• 各種GIFの追加
• s2sのプラグインの書き方
• コントリビューション方法
• テストの仕方
• yarnのバージョンについて

• module name:s2s-cli
• module version:master
• node version:v8.9.1
• yarn version:1.3.2
• OS:Windows10
• 実行環境:Poershell

What you did:s2s取得後初期化を実施

What happened:yarn fmt && yarn build実行時にエラー発生

$ yarn fmt && yarn build
yarn run v1.3.2
$ prettier --write '**/*.{js,json}'
[error] No matching files. Patterns tried: '**/*.{js,json}' !**/node_modules/** !./node_modules/**
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

buildで失敗しているため、サンプルが実行不可。
個別にyarn buildすると実行可能

Why

基本的にs2sのプラグインは汎用なやり方ではなく、一つのやり方を強制させる。
つまり、INとOUTが明確である。
このことから、s2s.config.jsに毎回同じ決まりきったことを書くことになり、また依存も増えて面倒である。これをbabelやeslintのようなpreset相当の機能があれば、依存を一つ管理すればよいことになり、非常にスッキリする。

Why

Babel7はBabel6と違いAPIが改善されている。
コメントまわりなど。

https://twitter.com/erukiti/status/927367132509175808

Babel7のプラグインも動くようにハンドラーを追加する。

SFCにおけるpropsの自動生成

{}の場合は、Propsで上書きしpropsの場合は処理しない。
また...が使われている場合は新しく追加しない。

type Props  = {
	hoge: string,
	fuga: string,
	foo: string
}

function Link(props: Props) { }

↓ ↓ ↓

type Props  = {
	hoge: string,
	fuga: string,
	foo: string
}

function Link({hoge, fuga, foo}: Props) { }

type Props  = {
	fuga: string,
	foo: string
}

function Link({hoge, ...props}: Props) { }

↓ ↓ ↓

type Props  = {
	fuga: string,
	foo: string
}

function Link({...props}: Props) { }

function Link(props: Props) { }

↓ ↓ ↓


function Link(props: Props) { }

• module name:
• module version:
• node version:
• yarn version:

What happened: エラーがうるさい

babel src/containers/App/actionTypes.js → src/types/action.js
Error: ENOENT: no such file or directory, open 'src/containers/App/reducer.js'
    at Object.fs.openSync (fs.js:646:18)
    at Object.fs.readFileSync (fs.js:551:33)
    at handlePlugin (/Users/akameco/src/github.com/akameco/s2s/examples/shopping-cart/node_modules/s2s/lib/handlers/index.js:52:32)
    at handlePlugins (/Users/akameco/src/github.com/akameco/s2s/examples/shopping-cart/node_modules/s2s/lib/handlers/index.js:124:9)
    at FSWatcher.watcher.on.input (/Users/akameco/src/github.com/akameco/s2s/examples/shopping-cart/node_modules/s2s/lib/index.js:77:32)
    at emitOne (events.js:116:13)
    at FSWatcher.emit (events.js:211:7)
    at FSWatcher.<anonymous> (/Users/akameco/src/github.com/akameco/s2s/examples/shopping-cart/node_modules/chokidar/index.js:196:15)
    at FSWatcher._emit (/Users/akameco/src/github.com/akameco/s2s/examples/shopping-cart/node_modules/chokidar/index.js:238:5)
    at FSWatcher._remove (/Users/akameco/src/github.com/akameco/s2s/examples/shopping-cart/node_modules/chokidar/index.js:555:50)
Error: ENOENT: no such file or directory, open '/Users/akameco/src/github.com/akameco/s2s/examples/shopping-cart/src/containers/App/reducer.test.js'
    at Object.fs.openSync (fs.js:646:18)
    at Object.fs.readFileSync (fs.js:551:33)
    at handlePlugin (/Users/akameco/src/github.com/akameco/s2s/examples/shopping-cart/node_modules/s2s/lib/handlers/index.js:52:32)
    at handlePlugins (/Users/akameco/src/github.com/akameco/s2s/examples/shopping-cart/node_modules/s2s/lib/handlers/index.js:124:9)
    at FSWatcher.watcher.on.input (/Users/akameco/src/github.com/akameco/s2s/examples/shopping-cart/node_modules/s2s/lib/index.js:77:32)
    at emitOne (events.js:116:13)
    at FSWatcher.emit (events.js:211:7)
    at FSWatcher.<anonymous> (/Users/akameco/src/github.com/akameco/s2s/examples/shopping-cart/node_modules/chokidar/index.js:196:15)
    at FSWatcher._emit (/Users/akameco/src/github.com/akameco/s2s/examples/shopping-cart/node_modules/chokidar/index.js:238:5)
    at FSWatcher._remove (/Users/akameco/src/github.com/akameco/s2s/examples/shopping-cart/node_modules/chokidar/index.js:555:50)

Reproduction repository:

Problem description:

ファイルが存在しない場合のみエラーメッセージを抑制する

Suggested solution:

ENOENTの場合、 メッセージを表示しない

Problem description:

Exampleのパッケージのバージョンが最新ではない。

Suggested solution:

パッケージを更新し、全てのテストが通るか確認する。

Why

正規表現めんどう。
他のライブラリもglobを使うパターンが多い ex: prettier...

How

globbyを使う

Why

reducer-root(reducerのルート集約)は生成時や、削除時に発火すればいい。
変更ごとに毎回発火すると、差分検知してテストを実行するjestが毎回発火して、一つのreducer.jsを変更すると全てのreducer.jsのテストが走ってしまいよろしくない。

How

s2s.config.jsにonlyオプションを追加する。
配列を指定可能にする。
型的には以下。

type EventType = 'add' | 'change' | 'unlink'
type Only = EventType[]

    {
      test: /containers\/.+reducer.js/,
      input: rootReducerPath,
      output: rootReducerPath,
      plugin: [
        's2s-reducer-root',
        { input: 'src/containers/**/reducer.js', output: rootReducerPath },
      ],
+			only: ['add', 'unlink']
    },