iOS/Andorid対応する際にiOSをメインで作っていたので それぞれのOS用のComponentに切り出す際に毎回components/XXX/index.os.tsxとindex.d.tsを作成するのがめんどくさかったので jondot/hygenを導入してみた。

導入手順

hygen.io/quick-start

$ yarn add hygen -D

$ yarn hygen init self

でhygenが用意したhelloworldのテンプレートがroot/_templateに生成される。 生成された例とDoc参考に作れば大体いけるはず

_template/generator/名前/配下に hygen/templatesを参考に.ejs.tでtemplateを作成し yarn hygen generator 名前するとfrontmatterで指定したto:へフォルダ配下のファイルを作成してくれる。

今回は.ios.tsxを作成した後にfrontmatterのsh:でcpコマンドを叩き.android.tsxを作成している。 今回の例だとあまり恩恵無さそうだがReduxのreducer/actionなんかをtemplate化しておいたりして

$yarn hygen actiona_name

なんかでactions/name.js | reducer/name.jsを作るようにするしたりとかすると恩恵でかいと思う。

---
to: js/components/<%= name %>/index.ios.tsx
sh: cp js/components/<%= name %>/index.ios.tsx js/components/<%= name %>/index.android.tsx
---
import React from 'react';
import styled from 'styled-components/native';

export default function <%= name %>({
  props,
}: {
  props: any
}) {
  return (
    <TemplateText>SFC TEXT COMPONENT</TemplateText>
  );
}

const TemplateText = styled.Text`
  color: red;
`;