akameco / s2s Goto Github PK

Coding time Compile. A tool to write code fastest.

Home Page: https://qiita.com/akameco/items/e1489c6bbf3439ec6ca4

License: MIT License

JavaScript 99.78% TypeScript 0.16% Shell 0.06%

s2s source-to-source babel-plugin react redux babel flow flowtype prettier typescript javascript plugin automation autocomplete generator concept

s2s's Issues

Why

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

Why

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

このように書きたい。

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

initialStateの自動生成においてUnionTypeの場合、nullで上書きされる

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

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

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
}

[name].test.jsの形式で出力を指定可能にする

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

How

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

Why

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

How

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

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

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

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']
    },

feat(plugin): Stateの自動初期化

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() {
	}
}

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

Why

ts→tsがBabel7で吐けるため

How

Babel6 → Babel7

🤔

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

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

ファイルが存在しないときのエラー表示を簡潔にする

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:

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

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により抽出し、自動リファクタが可能かも知れない。

テンプレートにoutputオプションを追加

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' },
  ],

s2s.config.jsのmjs対応

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

Why

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

How

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

デフォルトハンドラーをs2s.config.jsで指定出来るようにする

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: [ ... ],
}

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

do lint after generating code

Problem description:

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

Why

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

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

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

s2s-variable-initializing で const を使用するにはどうすればいいですか？

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 では動作した。

redux-persist v5 の persistCombineReducers の導入方法

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 を挿入できない

example/shopping-cartの修正

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

Why

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

Why

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

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

How

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

shooping-cartのエラーについて

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する

feat(plugins): reactのsfcのpropsの自動生成

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) { }

watchでnode_modules以下をデフォルトで無視

Why

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

Why

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

How

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

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

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

preset対応

Why

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

Exampleのパッケージの更新

Problem description:

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

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:

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

Why

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

How

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

pluginの対象を正規表現からglob表現に変更

Why

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

How

globbyを使う

テンプレートをインストール可能にする

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?:

モノレポ化

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

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で上書きされる

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 される。
ワンラインでも複数行でも起こる。

Counterのサンプルの追加

Problem description

試せるサンプルが少ない

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すると実行可能

fromオプションの追加

Why

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

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

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

akameco / s2s Goto Github PK

s2s's Issues

Why

Why

why

How

How

Why

How

Why

How

Why

How

🤔

What happened: エラーがうるさい

Reproduction repository:

Problem description:

Suggested solution:

Why

How

🤔

Why

Why

How

Why

How

🤔

Problem description:

Suggested solution:

Why

What you did:

What happened:

What you did:

What happened:

Why

Suggested solution

Why

How

Relevant code or config

What you did:

What happened:

SFCにおけるpropsの自動生成

Why

Suggested solution:

Why

How

Why

Problem description:

Suggested solution:

Relevant code or config

What you did:

What happened:

Suggested solution:

Why

How

Why

How

Why

Problem description

Suggested solution

Problem description

Suggested solution

Relevant code or config

What you did:

What happened:

Problem description

Suggested solution

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

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

Why

Recommend Projects

Recommend Topics

Recommend Org