HyplappV2 알파→안정 버전의 변경점

Hyperapp의 최신 버전 V2에 대해 며칠 전에 드디어 안정판 2.0.0과 2.0.1이 발표되었다.
하지만 알파에서 안정판으로 어떤 점이 바뀌었는지에 대해서는 통일된 문서가 없는 것 같다.
그래서 제가 하이퍼앱V2의 소스 코드와GiitHub 창고의 Issues 등을 직접 읽고 조사한 결과를 토대로 안정적 버전의 변경점을 간단히 정리했습니다.
또한 V1부터 V2까지의 변경점과 알파판 시간점의 API는 @diontools선생의 아래 글에서 통속적이고 알기 쉽게 요약하였으니 그쪽의 보도를 참조하시기 바랍니다.

Hyperapp V2

1. Action의 매개 변수 수용 방법에 변화가 생겼다.
Action을 얻을 수 있는 매개 변수는 최대 3개가 아닌 2개이며, 알파 버전처럼'이벤트 매개 변수 등 내부에서 자동으로 전달되는 데이터data'와'Action 호출 시 지정한 매개 변수(매개 변수)'를 동시에 지정할 수 없다.

// alpha
const Increment = (state, data) => ...;  // イベント引数などの内部データのみ受け取る
const Increment = (state, { value }) => ...;  // パラメータのみ受け取る
const Increment = (state, { value }, data) => ...;  // イベント引数、パラメータを両方受け取る

// 安定版
const Increment = (state, data) => ...;  // イベント引数などの内部データのみ受け取る
const Increment = (state, { value }) => ...;  // パラメータのみ受け取る

대신 Payload Creator라는 구조를 준비했다.
이것은 동작을 호출할 때 매개 변수가 아닌 함수를 전달함으로써 내부 데이터(상기data를 바탕으로 매개 변수를 생성하고 매개 변수를 동작에 전달할 수 있다.
예를 들어 텍스트 상자의 값을 수정할 때, Action 처리에서 이 입력 값 (value) 을 사용하려면 다음과 같은 방식으로 할 수 있습니다.

<input onchange={[Increment, (e) => ({value: e.target.value})]} />

또한 이 변경에 따라 Action의 매개변수 관련 용어는 다음과 같이 정리됐다.

Action이 수신한 매개변수: Payload

이벤트 매개 변수와 같은 내부 데이터(data: Default Paylad

사용자가 작업을 호출할 때 전달하는 매개변수: Custom Payload

const Increment = (state, payload) => ...;   // この第2引数が "Payload"

<input onchange={Increment} />         //=> Incrementの第2引数にDefault Payload（イベント引数）が渡される
<input onchange={[Increment, 10]} />   //=> Incrementの第2引数にCustom Payload（10）が渡される
<input onchange={[Increment, (e) => e.target.value]} />   //=> Incrementの第2引数に、Payload Creatorで生成したCustom Payload（e.target.value）が渡される

2. app 함수의 매개 변수가 바뀌었다
다음 두 점이 변경되었습니다.

매개 변수 이름의 container가 node(기능 동일)

로 변경됨

신규 middleware

지정 가능

// alpha
app({
  init: { value: 0 },
  view: state => <div>{state.value}</div>,
  subscriptions: state => ...,
  container: document.body,
});

// 安定版
app({
  init: { value: 0 },
  view: state => <div>{state.value}</div>,
  subscriptions: state => ...,
  node: document.body,
  middleware: ...
});

middleware는 생략 가능한 매개 변수로, 함수를 이 매개 변수dispatch에 전달하여 함수(Action, Effect 또는 새 State를 설정할 때 사용하는 함수)를 가로로 처리하여 앞뒤로 추가 처리할 수 있다.
사용 방법은 각양각색이다. 가장 빨리 사용한 것은 하이퍼앱V1의 logger처럼 Action이 실행될 때의 로그 출력 처리를 하고 싶은 경우다.

const SimpleLoggerMiddleware = (baseDispatch) => {
  // Middlewareは、標準のdispatch関数を引数として受け取り、新しいdispatch関数を返す必要がある
  return (action, props) => {
    console.group("Dispatch Log");
    console.log("Target: ", action);
    console.log("Props: ", props);
    console.groupEnd

    baseDispatch(action, props); // 標準のdispatch関数を実行
  }
}

app({
  init: { value: 0 },
  view: state => <div>{state.value}</div>,
  subscriptions: state => ...,
  node: document.body,
  middleware: SimpleLoggerMiddleware 
});

3. Effect Runner, Subscription Runner가 받은 매개 변수의 순서가 상반됨
첫 번째 파라미터는dispatch, 두 번째 파라미터는props이다.

// alpha
const delayRunner = ({ action, interval }, dispatch) => {
  setTimeout(() => dispatch(action, 'delay!'), interval);
};

// 安定版
const delayRunner = (dispatch, { action, interval }) => {
  setTimeout(() => dispatch(action, 'delay!'), interval);
};

끝말
그중 1의 Action 매개 변수의 변경은 특히 충격적이지만, 이것에 따라 알파판 매개 변수의 수용 방법에 따라 더욱 쉽게 알 수 있다.
만약 이 문장의 내용이 틀리거나 부족하다면 평론이나Twitter에서 저에게 알려주십시오