양식 및 웹 구성 요소만 사용하는 보다 확장 가능한 애플리케이션

기존 양식을 사용하여 확장 가능한 응용 프로그램을 구축하기 위해 양식 제출을 중앙 집중화하는 AtomicoJS으로 생성된 웹 구성 요소 세트를 @atomico/magic-form에 제공합니다.

전통적인 형태? <form> 태그의 사용을 의미합니다. 예를 들면 다음과 같습니다.

<form actio="myAction">
  <input type="name" />
  <button>submit</button>
</form>

이제 MagicForm의 일부 마법을 추가해 보겠습니다.

<MagicFormProvider
  actions={{
    async myAction(form: HTMLFormElement) {
      return myApi(new FormData(form));
    },
  }}
>
  <MagicForm>
    <form actio="myAction">
      <input type="name" />
      <button>submit</button>
    </form>
  </MagicForm>
</MagicFormProvider>

위의 코드에서 2개의 구성 요소를 추가했습니다.
MagicFormProvider : 중첩된 MagicForms의 작업을 중앙 집중화합니다.
MagicForm : MagicFormProvider에서 관찰할 양식을 식별합니다. 이 구성 요소는 또한 onChangeState 이벤트를 통해 myAction 함수의 전송 및 반환 상태를 알 수 있도록 합니다.

MagicForm 사용의 이점은 다음과 같습니다.

1. 재사용 가능한 작업

MagicFormProvider 덕분에 양식 간에 작업을 쉽게 재사용할 수 있습니다. 예를 들면 다음과 같습니다.

<MagicFormProvider
  actions={{
    async myAction(form: HTMLFormElement) {
      return myApi(new FormData(form));
    },
  }}
>
  <MagicForm>
    <form actio="myAction">
      <input type="name" />
      <button>submit</button>
    </form>
  </MagicForm>
  <MagicForm>
    <form actio="myAction">
      <input type="name" />
      <button>submit</button>
    </form>
  </MagicForm>
</MagicFormProvider>;

2. 양식의 상태를 관찰하십시오.

양식 제출 프로세스는 onChangeState 이벤트를 통해 관찰할 수 있으며 이를 통해 제출 상태 및 작업 응답을 알 수 있습니다.

<MagicForm
  onChangeState={({ currentTarget }) => {
    console.log(currentTarget.state);
  }}
>
  <form actio="myAction">
    <input type="name" />
    <button>submit</button>
  </form>
</MagicForm>

3. 마이크로프론트엔드

MagicFormProvider가 작업 중에서 파견된 작업을 찾지 못하면 다음 MagicFormProvider까지 계속 버블링됩니다. 이렇게 하면 격리되고 재사용 가능한 작업이 있는 여러 개의 섬을 가질 수 있습니다. 예를 들면 다음과 같습니다.

<MagicFormProvider actions={{
    async login(){...}
}}>
    <MagicFormProvider actions={actionsClient}>
        <PageClient/>
    </MagicFormProvider>
    <MagicFormProvider actions={actionsAdmin}>
        <PageAdmin/>
    </MagicFormProvider>
</MagicFormProvider>

아름답지 않나요? 그러나 그것을 사용하는 방법

웹 컴포넌트

AtomicoJS: Atomico는 MagicForm과 같은 웹 구성 요소를 만들 수 있는 강력한 라이브러리입니다

.

리액트 및 프리액트

웹 컴포넌트

<magic-form-provider>
  <magic-form>
    <form action="user">
      <input type="text" name="name" />
      <input type="text" name="email" />
      <button>Create user</button>
    </form>
  </magic-form>
</magic-form-provider>
<script>
  await customElements.whenDefined("magic-form-provider");

   document.querySelector("magic-form-provider").actions = {
     async add(form) {
       return fetch("./my-api", {
         method: "post",
         body: new FormData(form),
       }).then((res) => res.json());
     },
   };
</script>

Atomico JS

import { MagicForm, MagicFormProvider } from "@atomico/magic-form";

function component() {
  return (
    <host>
      <MagicFormProvider
        actions={{
          async add(form) {
            return fetch("./my-api", {
              method: "post",
              body: new FormData(form),
            }).then((res) => res.json());
          },
        }}
      >
        <MagicForm>
          <form action="user">
            <input type="text" name="name" />
            <input type="text" name="email" />
            <button>Create user</button>
          </form>
        </MagicForm>
      </MagicFormProvider>
    </host>
  );
}

반응 및 예측

React 또는 Preact에서 이 웹 구성 요소를 사용하려면 @atomico/react를 설치해야 합니다. Preact에서 사용하려면 모듈을 "@atomico/magic-form/react"에서 "@atomico/magic-form/preact"로 변경해야 합니다.

import { MagicForm, MagicFormProvider } from "@atomico/magic-form/react";

export function App() {
  return (
    <>
      <MagicFormProvider
        actions={{
          async add(form) {
            return fetch("./my-api", {
              method: "post",
              body: new FormData(form),
            }).then((res) => res.json());
          },
        }}
      >
        <MagicForm>
          <form action="user">
            <input type="text" name="name" />
            <input type="text" name="email" />
            <button>Create user</button>
          </form>
        </MagicForm>
      </MagicFormProvider>
    </>
  );
}

MagicForm은 AtomicoJS 프로젝트입니다.

AtomicoJS? 웹 구성 요소를 기반으로 인터페이스를 생성하기 위한 오픈 소스 프로젝트인 MagicForm은 기능적 접근 방식으로 웹 구성 요소를 생성할 수 있는 단 3kB의 라이브러리인 Atomico로 생성되었습니다. 웹 구성 요소에 대한 경험을 향상시킬 것입니다.

👐 Atomicojs 커뮤니티에 가입하여 우리 프로젝트에 대해 자세히 알아보도록 초대합니다! 👇