Adaloカスタムコンポーネントのシミュレーション環境でカスタムコンポーネントをimportする

2022年11月9日2022年11月22日

前提条件

• このリポジトリ（mobile-previewer）をcloneし、シミュレーション環境を整えている状態
  • iOSの参考：Adaloのカスタムコンポーネント開発時iOSテスト環境を構築する

手順

mobile-previewerでカスタムコンポーネントを参照する設定

1. 前々節で作成したmobile-previewerディレクトリの外で、$ npx create-adalo-component <my-component>を実行し、カスタムコンポーネントが含まれるライブラリのディレクトリを作成する
   • Would you like to use Yarn as your package manager? でyesにした場合を想定。
   • 参考：Docker内でAdaloのカスタムコンポーネントを作成
2. mobile-previewerのディレクトリに移動し、下記のコマンドを実行
   $ yarn add <path to my-component>
   • <path to my-component> の部分は1. で作成したディレクトリのパス
3. mobile-previewerのディレクトリ内のlibraries.jsに1. で、下記の2項目を追記
   • 冒頭にimport * as lib2 from 'my-component'
   • export defaultの中に、'my-component': lib2
   • 追記後はこんな感じになる
     import * as lib1 from '@protonapp/material-components'
import * as lib2 from '<my-component>'
export default {
'@protonapp/material-components': lib1,
  '<my-component>': lib2
}

mobile-previewerでカスタムコンポーネントを表示

1. コンポーネントをテストするページを用意
   • 詳細は割愛
   • パッっとやりたければ、mobile-previewer/src/components/Login/LoginForm.jsに以降の項目を追記すればよい
2. 1.で用意した.jsファイルでカスタムコンポーネントをimport
   import { MyComponent } from '<my-component>'
   • { }を使わないと参照できなかった
3. returnするviewにタグを追記
   <MyComponent />

カスタムコンポーネントの更新方法

1. 作成したいコンポーネントのコードを編集
2. mobile-previewerのディレクトリで、下記のコマンドを実行
   yarn upgrade-interactive --latest
3. 矢印キーでコンポーネントを含むライブラリの名前（この記事では<my-component>）のところでSpaceキーを押下し、*マークがついたことを確認してEnter