SolidJS로 Material-II(SUID)를 시도했습니다.

요즘 화제(?)나는 SolidJS를 향한 Material-II 라이브러리SUID를 시험해 보았다.

SUID

https://suid.io/
React용MUI을 SolidJS에port(이식)하는 프로그램 라이브러리입니다.
버전 0.1.0에 36개의 구성 요소가 이식되었다.
또 SUID의 사이트 자체는 SUID로 제작·구축됐다.

SUID Docs

React MUI Getting started

!
SUID의 다음 버전(0.2.0)에는 대응 구성 요소 3개Radio·Table·Grow가 추가됩니다.

https://next.suid.io/getting-started/installation

시도된 버전

SolidJS : 1.3.17

SUID : 0.1.0

supabase-js : 1.35.2

시도된 내용

Supabase의Quickstart: SolidJS는 TypeScript(TSX)와 Material-II로 교체하고Card도 추가 디스플레이를 시도했다.
!
이번에는 수파베이스 관련 부분에 대한 설명을 생략합니다(다른 기사에서 설명할 예정).

샘플 코드(전체)

여기다 놔.제목과 같이 2022/5/31 개최 예정제33회 PostgreSQL 안전회@온라인을 위한 샘플이다.
https://github.com/hmatsu47/pgunconf-sample-app
다음에 나는 샘플 코드의 사용 예와 신경 쓰이는 부분을 열거했다. (물론 향후 버전에 변화가 발생할 수 있다.)

텍스트 입력 필드

사용 예

Auth.tsx(77행~)

Auth.tsx(77행~)

  <TextField
    required
    id="email"
    label="メールアドレス"
    helperText="メールアドレスを入力してください"
    value={email()}
    onChange={(event, value) => {
      setEmail(value);
    }}
  />

required 지정된 경우 Submit Form을 입력하지 않으면 경고가 표시되고 차단됩니다.그러나 Submit을 사용하지 않고 "*"기호만 표시하면 블록 동작 등이 발생하지 않습니다(Validation을 직접 설치해야 함).

inputRef가 지원되지 않습니다.

리액트의 MUSICTextField는 대체ref 사용inputRef이 가능하지만, SUID는 지원하지 않는다.
이번에는 화면 표시 후 포커스를 지정하려 했으나 사용을 포기document.getElementById()하고 포커스를 옮겼다.

setFocus.ts(3행~)

setFocus.ts(3행~)

  const element = document.getElementById(elementId);
  element?.focus();

Auth.tsx(18행~)

Auth.tsx(18행~)

  onMount(() => {
    setFocus('email');
  })

multipline이 지원되지 않습니다.

SUID가 현황TextareaAutosize을 지원하지 않기 때문에 TextField로 대체Multiline하려고 했지만 대응multiline·row 등이 없었다.
어쩔 수 없어요. 그냥 textarea 라벨을 썼어요.

Item.tsx(155행~)

Item.tsx(155행~)

  <textarea
    id="note"
    aria-label="Note"
    placeholder="本文を入力してください"
    onchange={(event) => {
      setNote(event.currentTarget.value);
    }}
    style="width: 100%; height: 9.0em; font-size: 1rem; line-height: 1.8em"
  >
    {note()}
  </textarea>

카드(카드 표시)

사용 예

List.tsx(182행~)

List.tsx(182행~)

  <Card
    variant="outlined"
    sx={{ minWidth: 300 }}
  >
  <CardContent>
    <Stack
      spacing={1}
      direction="row"
    >
      <CardActions sx={{ padding: 0 }}>
        <IconButton
          onClick={() => toggleExpand(index(), !article.isExpand)}
          sx={{ padding: 0 }}
        >
          <Switch fallback={<></>}>
            <Match when={!article.isExpand}>
              <ExpandMoreIcon aria-label="expand more"/>
            </Match>
            <Match when={article.isExpand}>
              <ExpandLessIcon aria-label="expand less"/>
            </Match>
          </Switch>
        </IconButton>
      </CardActions>
      <Typography
        variant="h6"
        gutterBottom
      >
        {article.title}
      </Typography>
（中略）
    </Stack>
      <Show
        when={article.isExpand}
        fallback={<></>}
      >
        <For
          each={article.note?.split('\n')}
          fallback={<></>}
        >
          {(line) =>
            <Typography
              variant="body1"
              gutterBottom
            >
              {line}
            </Typography>
          }
        </For>
      </Show>
      <CardActions sx={{ padding: 0 }}>
        <IconButton
          aria-label="edit"
          onClick={() => setArticle(article)}
          disabled={
          article.userId !== props.session.user!.id && article.noteType !== 3
          }
        >
          <EditIcon />
        </IconButton>
（中略）
      </CardActions>
    </CardContent>
  </Card>

※'신규 투고'에 이은 카드입니다.또'신설 발언'도 Card에 나와 있다.

Collapse API가 지원되지 않습니다.

리액트용 MCICollapse API는 지원되지 않기 때문에 위에 기재된 코드도 SolidJS 자체 보유Show API로 유사하게 처리한다.
List.tsx (196 줄 ~: 단추 부분 펼치기)

  <Switch fallback={<></>}>
    <Match when={!article.isExpand}>
      <ExpandMoreIcon aria-label="expand more"/>
    </Match>
    <Match when={article.isExpand}>
      <ExpandLessIcon aria-label="expand less"/>
    </Match>
  </Switch>

List.tsx(229행~: 실제 전개된 부분)

  <Show
    when={article.isExpand}
    fallback={<></>}
  >
    <For
      each={article.note?.split('\n')}
      fallback={<></>}
    >
      {(line) =>
        <Typography
          variant="body1"
          gutterBottom
        >
          {line}
        </Typography>
      }
    </For>
  </Show>

사용한 소감.

버전이 0.1.1인 만큼 정품 제품을 만드는 데 부족한 구성 요소인 API는 아직도 많은 인상을 준다.
향후 버전 업그레이드가 기대됩니다.

참고: 기타 샘플 화면

소개 편집 화면