Felte: 확장 가능한 Solid 양식 라이브러리

This article has been updated to showcase Felte 1.0

전방 개발자가 해결해야 할 가장 흔한 문제 중 하나는 폼 처리라고 할 수 있다.특히 사용자와의 실시간 상호작용을 실시간으로 검증해야 하는 현대 웹 응용 프로그램에서는가능한 한 최상의 사용자 체험을 제공하기 위해 귀하는 제3자 폼 관리 라이브러리를 필요로 할 수 있습니다.
이 글에서 저는 Felte에 관한 글을 쓸 것입니다. 이것은 제가 지난 1년 동안 Solid에 주력해 온 폼 관리 라이브러리입니다. 앞의 폼 처리에 대한 기초 지식을 가능한 한 간단하게 하는 동시에 수요가 증가함에 따라 더욱 복잡해지도록 허용하기 위해서입니다.
이것은 필트와 관련된 세 편의 블로그 중의 하나다.Felte 와 Solid 의 통합 제품입니다.Felte와 Svelte 및 React를 위한 두 가지 통합

특징.
위에서 말한 바와 같이 Felte는 형태 반응의 기초를 가능한 한 쉽게 처리하고 구성과 확장성을 통해 더욱 복잡한 행위를 허용하는 데 목적을 두고 있다.주요 특징은 다음과 같습니다.

단일 동작으로 당신의 신체 반응을 민감하게 합니다.

HTML5 기본 요소를 사용하여 양식을 만듭니다.name속성만 필요합니다.

더 복잡한 용례를 처리하기 위해 저장과 도움말 함수를 제공한다.

인증 정책에 대한 어떠한 가정도 없습니다.원하는 인증 라이브러리를 사용하거나 정책을 작성하십시오.

실행 중 창 컨트롤의 추가와 삭제를 처리합니다.

패키지를 사용한 버그 보고 공식 해결 방안.

지원yup, zod, superstruct 및 vest 검증

쉽다extend its functionality.

어떻게 보이세요?
Felte는 기본적으로 다음과 같은 함수 하나만 가져올 수 있습니다.

import { createForm } from '@felte/solid';

export function Form() {
  const { form } = createForm({
    onSubmit: (values) => {
      // ...
    },
  });

  return (
    <form use:form>
      <input type="text" name="email" />
      <input type="password" name="password" />
      <input type="submit" value="Sign in" />
    </form>
  );
}

우리는 전화 reporter 처리 프로그램 createForm 을 통해 표를 설정합니다.이 함수는 다른 유틸리티 외에도 양식 요소에 사용할 수 있는 작업을 반환합니다.이제 Felte는 submit 속성을 사용하여 모든 입력을 추적합니다.양식을 전송할 때 입력한 최신 값이 객체name 함수에 전달됩니다.앞의 예에서 onSubmit의 형태는 다음과 같습니다.

{
  email: '',
  password: '',
}

어디서 제 데이터를 볼 수 있습니까?
입력할 때 Felte는 사용자가 신호에 입력한 것을 추적합니다. 이 신호는 폼 데이터를 포함하고 values 에서 받은 값과 같습니다.이 신호는 포장되어 추가 기능을 허용하고 onSubmit에서 함수로 호출됩니다createForm.지금부터 우리는 이 함수들을 data라고 부른다.매개 변수 (accessors 가 없는 상황에서 이 액세서리를 호출할 때, 창체의 모든 데이터를 대상으로 되돌려 주는 일반적인 신호와 같다.매개변수를 첫 번째 매개변수로 전달하여 특정 필드(선택기 함수 또는 문자열 경로)를 선택할 수 있습니다.
예를 들어, 사용자가 전자 메일을 입력할 때 이를 콘솔에 기록합니다.

// Within a component
const { form, data } = createForm({ /* ... */ });

createEffect(() => {
  // Passing a function as first argument
  console.log(data(($data) => $data.email));

  // Passing a string as first argument
  console.log(data('email'));
});

이 가능하다, ~할 수 있다,...
물론 표의 또 다른 흔한 요구는 검증이다.만약 우리가 응용 프로그램을 사용자에게 빠르게 느끼게 하려면 클라이언트 검증이 필요합니다.data()의 설정 대상은 createForm 함수를 받아들인다(비동기적일 수 있다).변화가 발생하면 validate 의 현재 값을 받고, 같은 모양의 대상을 되돌려 주기를 원합니다. 폼이 잘못되면 검증 메시지를 포함하고, 폼이 유효하면 어떤 내용도 되돌려주지 않습니다.Felte는 dataascreateForm에서 돌아온 방문자의 인증 정보를 추적합니다.

const { form, errors } = createForm({
  validate(values) {
    const currentErrors = {};
    if (!values.email) currentErrors.email = 'Must not be empty';
    if (!values.password) currentErrors.password = 'Must not be empty';
    return currentErrors;
  },
});

createEffect(() => {
  console.log(errors(($errors) => $errors.email));
});

더 복잡한 검증 수요는 제3자 검증 라이브러리가 필요할 수 있다.Felte는 확장성 특성을 통해 일부 유행 검증 라이브러리와 통합을 제공합니다.이러한 통합은 별도의 패키지로 제공된다.다음 섹션에서는 확장성을 자세히 설명하지만, 이 가방에 대한 내용은 저희 official documentation 에서 더 많이 읽을 수 있습니다.

복잡한 장면을 확장성 있게 처리
Felte는 폼 관리의 모든 장면을 어떻게 처리하는지에 대해 완벽한 해결 방안을 제공하려고 하지 않는다.이것이 바로 Felte가 사용자의 요구에 따라 더욱 복잡해지면서 기능을 확장할 수 있는 API를 제공하는 이유입니다.실제 유행하는 yup 또는 Vest (최근 회의에서 논의한 것) 과 같은 선호 라이브러리가 있을 수 있습니다.errors의 구성 객체에서 extend 옵션을 사용하여 이러한 장면을 처리하기 위해 Felte의 동작을 수정할 수 있습니다.자세한 내용은 official documentation를 참조하십시오.간단하게 보기 위해서, 나는 단지 우리가 흔히 볼 수 있는 용례를 처리하기 위해 유지보수하는 기존 소프트웨어 패키지를 쓰고 싶다.

검증 프로그램: 유행 검증 라이브러리와의 통합
Felte를 최신 인증 라이브러리createForm, yup, zod, superstruct 및 최근vest에 통합하기 위해 현재 4개의 패키지를 유지하고 있습니다.여기에서 우리는yup을 예로 들겠지만, 당신은 나머지 부분에 대한 내용을 더 많이 읽을 수 있습니다 here.
사용할 패키지yup는 npm에 위치하고 이름은 @felte/validator-yup입니다.yup와 함께 설치해야 합니다.

npm install --save @felte/validator-yup yup

# Or, if you use yarn

yarn add @felte/validator-yup yup

이 유효성 검사 패키지는 유효성 검사 모드를 사용하여 함수를 호출하고 결과를 validatorextend 옵션에 전달할 수 있는 createForm 함수를 내보냅니다.

import { validator } from '@felte/validator-yup';
import * as yup from 'yup';

const schema = yup.object({
  email: yup.string().email().required(),
  password: yup.string().required(),
});

const { form } = createForm({
  // ...
  extend: validator({ schema }), // OR `extend: [validator({ schema })],`
  // ...
});

기자: 인증 메시지 표시
인증 메시지를 표시하려면 errors 되돌아오는 createForm 액세서리를 직접 사용할 수 있습니다.이 접근자의 메시지는 관련 필드와 상호작용하기 전에 사용할 수 없습니다.

import { Show } from 'solid-js';
import { createForm } from '@felte/solid';

function Form() {
  const { form, errors } = createForm({ /* ... */ });

  return (
    <form use:form>
      <label for="email">Email:</label>
      <input name="email" type="email" id="email" />
      <Show when={errors('email')}>
        <span>{errors('email')}</span>
      </Show>
      <button>Submit</button>
    </form>
  );
}

If a specific field has an error, Felte assigns an aria-invalid=true attribute to the appropriate input.

그러나 검증 메시지를 이런 특정한 문법으로 처리하는 것을 좋아하지 않을 수도 있습니다.Felte에는 현재 4개의 패키지가 포함되어 있으며 검증 메시지를 표시하는 방법에 대한 다양한 옵션이 제공됩니다.

신뢰할 수 있는 구성 요소를 사용합니다. 구성 요소 트리 깊숙한 곳의 검증 메시지에 접근할 수 있고 errors 접근기를 전달하지 않아도 됩니다.

DOM 요소를 추가하고 제거하여 DOM을 직접 수정합니다.

Tippy를 사용합니다.js가 도구 설명에 메시지를 표시합니다.

브라우저에 내장된 제약조건 검증 API를 사용하면 모바일 사용자에게 좋지 않을 수 있습니다.

간단하게 보기 위해서 나는 단지 첫 번째 방안을 소개할 계획이다.그러나 나머지 부분에 대한 정보를 더 많이 읽을 수 있다in the documentation.
솔리드 스테이트 구성 요소를 사용하여 검증 메시지를 받으려면 패키지@felte/reporter-solid를 사용하십시오.가장 좋아하는 패키지 관리자를 사용하여 프로젝트에 추가해야 합니다.

# npm
npm i -S @felte/reporter-solid

# yarn
yarn add @felte/reporter-solid

그런 다음 함수reporter를 가져와 속성extend 및 검증 메시지를 받으려면 ValidationMessage 구성 요소를 가져와야 합니다.

import { reporter, ValidationMessage } from '@felte/reporter-solid';
import { createForm } from '@felte/solid';

function Form() {
  const { form } = createForm({
      // ...
      extend: reporter, // or [reporter]
      // ...
    },
  })

 // We assume a single string will be passed as a validation message
 // This can be an array of strings depending on your validation strategy
  return (
    <form use:form>
      <input id="email" type="text" name="email" />
      <ValidationMessage for="email">
        {(message) => <span>{message}</span>}
      </ValidationMessage>
      <input type="password" name="password" />
      <ValidationMessage for="password">
        {(message) => <span>{message}</span>}
      </ValidationMessage>
      <input type="submit" value="Sign in" />
    </form>
  );
}

다음 단계
일부 기능 예시를 통해itsofficial website에서 Felte에 대한 더 많은 정보를 볼 수 있습니다.Tippy와의 사용법을 보여주는 더 복잡한 예도 있다.js와 Yup은 CodeSandbox에서 얻을 수 있다.

생각을 정리하다.
나는 이것이 필트에 대한 좋은 소개이고, 또한 충분히 재미있기를 바란다. 당신이 한번 시도해 보셔도 됩니다.펠트는 이미 안정된 상태이며 일부 사람들에게 사용되고 있다.나도 도움과 건의를 제공하기를 원하기 때문에 언제든지 GitHub에서 질문이나 요청을 해 주십시오.