SolidJS+Capacitor의 현재 소감

SolidJS

https://www.solidjs.com
리액트에서의 이전은 간단하지만 생태계가 부족하여 리액트에 의존하는 생태계의 프로젝트에서 이전하는 데 어려움이 있다

Capacitor

https://capacitorjs.com
웹에서 로컬 브리지를 진행할 수 있는 기능이 있어서 매우 좋다.Ionic 프로젝트를 적용하는 프로젝트에서 자주 함께 사용됩니다.Capacitor를 사용하면 브라우저에 대한 부담을 줄일 수 있습니다.

배경.

ionic Blog에서 기고이 보도했기 때문에 어디까지 개발할 수 있는지 시험해보고 싶어요.또한 SolidJS 자체가 워낙 관심이 많아서 이참에 같이 잡으려고 합니다.

의 목적

주의해야 할 것은 이 글은 단지 직접 확인하고 만든 틀일 뿐이다
SolidJS, Ionic+Capacitor 자체를 확인하지 마세요.

시험해 보다

$ npx degit ionic-team/capacitor-solidjs-templates/ts CapacitorSampleSolidApp
$ cd CapacitorSampleSolidApp
$ npm install
$ npm run build
$ npx cap run ios

iOS 에뮬레이터 터미널 선택

템플릿(디렉토리 구조)의 컨텐트 확인

ionic+capacitor 프로젝트의 구성과 같습니다
SolidJS에 관하여 상술한 기술과 같이 할애를 허락해 주십시오

초기 개발을 시도하다

Capacitor/Dialog를 사용하여 시작 시 경고가 있는지 확인

$ npm install @capacitor/dialog@latest
$ npx cap sync

App.tsx

import { Component, createEffect } from 'solid-js';
import { Dialog } from '@capacitor/dialog';
import logo from './logo.svg';
import styles from './App.module.css';

const App: Component = () => {

  createEffect(() => {
    Dialog.confirm({
      title: '確認',
      message: 'テストですか？',
      cancelButtonTitle: 'キャンセル',
      okButtonTitle: 'OK'
    })
    .then(confirm => {
      if (confirm.value) {
        console.log('hogehogehoge');
      }
    })
  })

  return (
    <div class={styles.App}>
      <header class={styles.header}>
        <img src={logo} class={styles.logo} alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          class={styles.link}
          href="https://github.com/solidjs/solid"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn Solid
        </a>
      </header>
    </div>
  );
};

export default App;

$ npm run build
$ npx cap run ios

시작 시 경고 확인

감상

SolidJS+Capacitor로 응용 개발을 할 수 있어서 획기적이고 기쁩니다.npx cap 명령의 옵션에 핫 리셋 기능이 없기 때문에 로컬 디버깅이 번거롭습니다.개발 시npm run dev는 홈페이지에서 확인하면 된다.
https://github.com/ionic-team/capacitor-solidjs-templates
여기에 vitest판의 샘플 템플릿의 예가 있는데 프로젝트에 맞는 템플릿을 사용할 수 있습니다.
또 처음부터 로컬 UI를 만드는 것이 번거로워 IonicComponent를 사용하려고 했지만 프로젝트(템플릿)를 만든 후에 IonicComponent를 가져올 수 있을지 모르겠다.
새로운 JS 라이브러리의 대응에 대해 ionic사가 Svelte를 선택할지, 솔리드 JS를 선택할지, 둘 다 대응할지가 향후 관전 포인트다.지금부터 아이니비7도 기대가 됩니다.