오픈 소스 모험: 에피소드 23: Imba 2 JSON Beautifier

또 다른 Imba 1 앱을 Imba 2 - JSON Beautifierwhich you can see in action here로 이식해 보겠습니다.

이 앱은 매우 단순하고 구성 요소가 하나뿐이며 모든 논리를 json-stringify-pretty-compact 패키지에 아웃소싱합니다.

가장 흥미로운 부분은 통합 테스트에 Cypress를 사용한다는 것이므로 다음 게시물에서는 Imba 2 버전에 대한 Cypress 통합 테스트도 설정하려고 합니다.

Imba 1 앱.imba

let stringify = require("json-stringify-pretty-compact")

tag App
  def setup
    @maxlen = 80
    @indent = 2
    @text = JSON.stringify({hello: "world"})
    @error = null

  def prettify
    try
      let indent = parseInt(@indent)
      let json = JSON.parse(@text)
      let spaces = Array.from({length: indent+1}).join(" ")
      @text = stringify(json, {maxLength: @maxlen, indent: spaces})
    catch e
      @error = e

  def clear_error
    @error = null

  def upload(event)
    let file = event.native:target:files[0]
    return unless file
    let reader = FileReader.new

    reader:onload = do |event|
      @text = event:target:result
      @error = nil
      Imba.commit
    reader.read-as-text(file)

  def render
    <self>
      <header>
        "JSON Beautifier"
      <textarea[@text] rows=10 :input.clear_error>
      if @error
        <div.error>
          @error
      <div.controls>
        <input#file type="file" :change.upload>
        <label for="indent">
          "Indent"
        <input#indent[@indent] type="number" min=0>
        <label for="maxlen">
          "Max row length"
        <input#maxlen[@maxlen] type="number" min=0>
        <button :click.prettify>
          "Prettify"

Imba.mount <App>

임바 1 앱.scss

@import 'normalize-scss';
@include normalize();

.App {
  display: flex;
  flex-direction: column;
  align-items: center;

  header {
    font-size: 64px;
    text-align: center;
  }

  textarea {
    min-width: 50vw;
    margin-bottom: 10px;
  }

  .controls {
    display: grid;
    grid-row-gap: 5px;
    margin: auto;

    label { grid-column: 1; }
    input { grid-column: 2; }
    button { grid-column: 2; }
  }

  .error {
    background-color: #fcc;
    min-width: 50vw;
    padding: 5px;
    border: 1px solid #800;
  }
}

Imba 2 앱.imba

import stringify from "json-stringify-pretty-compact"

tag app
  prop maxlen = 80
  prop indent = 2
  prop text = JSON.stringify({hello: "world"})
  prop error

  def prettify
    try
      let json = JSON.parse(text)
      let spaces = Array.from({length: parseInt(indent)+1}).join(" ")
      text = stringify(json, {maxLength: parseInt(maxlen), indent: spaces})
    catch e
      error = ""+e
    imba.commit()

  def clear_error
    error = null

  def upload(event)
    let file = event.target.files[0]
    return unless file
    let reader = new FileReader

    reader.onload = do |event|
      text = event.target.result
      error = nil
      imba.commit()
    reader.readAsText(file)

  <self>
    <header>
      "JSON Beautifier"
    <textarea bind=text rows=10 :input.clear_error>
    if error
      <div.error>
        error
    <div.controls>
      <input#file type="file" :change.upload>
      <label for="indent">
        "Indent"
      <input#indent bind=indent type="number" min=0>
      <label for="maxlen">
        "Max row length"
      <input#maxlen bind=maxlen type="number" min=0>
      <button :click.prettify>
        "Prettify"

  css
    display: flex
    flex-direction: column
    align-items: center
    ff: sans

    header
      font-size: 64px
      text-align: center

    textarea
      min-width: 50vw
      margin-bottom: 10px

    .controls
      display: grid
      grid-row-gap: 5px
      margin: auto

      label
        grid-column: 1
      input, button
        grid-column: 2

    .error
      background-color: #fcc
      min-width: 50vw
      padding: 5px
      border: 1px solid #800

imba.mount <app>

이것은 매우 직설적인 번역입니다.

Imba 2는 Error 개체를 출력에 직접 넣는 것을 좋아하지 않기 때문에 String 를 Error 로 변환해야 하지만 어쨌든 좋은 생각일 것입니다.

그 외에는 사소한 구문 변경에 불과합니다.

그런데 어떤 프레임워크가 label for 문제에 대한 좋은 해결책을 제공할 수 있을지 궁금합니다. 지금 그들은 본질적으로 전역 범위의 ID를 사용합니다.

소스 코드

소스 코드는 imba2-json-beautifier repository에 있습니다.

할 수도 있습니다see the live version here.

다음에 온다

다음 에피소드에서는 이 앱에 Cypress 테스트를 추가해 보겠습니다.