みかづきメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ 書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。

TypeScript で paths を解決してビルドする

TypeScript の tsconfig.jsonpaths という機能があります。
簡単に言うと、以下のようなことが出来る機能です。

// @ src/components/FooBar/SubFooBar/index.tsx
// paths を使わない
import SomeModule from "../../Baz";

// paths を使う
import SomeModule from "@/components/Baz"

ただし、この機能を使うと、tsc でトランスパイル後のファイルにも
@/components/Baz のまま出力されてしまい、
ライブラリとして配布する際、パス解決が出来なくなってしまいます。

ということで、これを解決する方法。
やり方は簡単で、 tsc の代わりに ttsc を使い、プラグインを入れます。

$ yarn add ttypescript @zerollup/ts-transform-paths --dev

そして tsconfig.json を編集します。

{
  "compilerOptions": {
    "plugins": [
      { "transform": "@zerollup/ts-transform-paths" }
    ]
  }
}

あとは、 tsc の代わりに ttsc でビルドすると、
パスが解決された状態で出力されます。

おしまい

Docker for Mac で /var/folders を File Sharing へ追加したい

ドキュメント上ではデフォルト値として設定されているようなのだけども、
なぜか私は追加されていなかったので、その対応。

軽く調べた感じでは、以下の設定ファイルを直接いじるしかないみたい。

$ vim ~/Library/Group\ Containers/group.com.docker/settings.json

このうち、 filesharingDirectories の項目へ、 /var/folders を追加してあげれば OK。

ということでメモでした。

GitHub Actions で特定の branch だけ処理を実行したい

処理の一部だけ、 master でのみ処理を行いたい、とかする方法。

GitHub Actions の YAML では、各 job と steps に対して、
if 条件の指定が使えるので、それを使う。

例えばこんな感じ

      - name: deploy to Netlify
        if: success() && github.ref == 'refs/heads/master'
        run: |
          yarn global add netlify-cli
          $(yarn global bin)/netlify deploy --prod --dir=./dist --site=$NETLIFY_SITE_ID
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

if に指定できる構文はヘルプページに書かれています。
今回は、前の step が成功したときかつ、 master だったら実行する、
といった感じ。

ということでメモでした。

styled-components で他のコンポーネントにネストした CSS を書きたい

ちょっと分かりにくいのですが、下のような CSS を書きたいときの方法。

.element1 > .element2 {
  /* ... */
}

やり方は簡単で、別の Style されたコンポーネントを含むように作ってあげれば良い。

import styled from "styled-components";

const ChildComponent = styled.div`
    /* styles */
`;

const ParentComponent = styled.div`
    /* styles */

    > ${ChildComponent} {
        /* styles */
    }
`;

おわり。

参考 :