オープンソース冒険:エピソード20:Imba

7107 ワード
javascript imba テキストリンク
私は、最も簡単な1 - RON - NデコーダでImba 2にImba 1アプリを移植し始めたいです.Here's Imba 1 version .
ボックスにテキストを貼り付けたり、ファイルのアップロードを使用したりします.それは多少の基本的なハッキングの課題に便利です.

Imbaの1アプリ。印旛


ここはとても複雑だ.rot(n) 回転します.upload アップロードイベントを処理render ビューをレンダリングします.
tag App
  def setup
    @text = "Hello, world!"

  def rot(n)
    @text.replace /[a-z]/gi do |c|
      let i = c.charCodeAt(0)
      if i >= 97 and i <= 122
        String.fromCharCode(((i - 97 + n) % 26) + 97)
      else if i >= 65 and i <= 90
        String.fromCharCode(((i - 65 + n) % 26) + 65)
      else
        c

  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>
      <div.contents>
        <header>
          "ROT-N"
        <textarea[@text]>
        <div>
          <input#file type="file" :change.upload>
        <table>
          for i in [1..25]
            <tr .{"rot-{i}"}>
              <th>
                i
              <td>
                rot(i)

Imba.mount <App>

Imbaの1アプリ。SCSS


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

.App {
  display: flex;
  justify-content: space-around;
  max-width: 1000px;
  margin: auto;

  header {
    font-size: 64px;
    text-align: center;
  }
  textarea {
    min-width: 50vw;
    min-height: 100px;
  }
  th {
    padding-right: 5px;
  }
}

始める


閉じるこの動画はお気に入りから削除されていますnpx imba create imba2-rotn .
そこにいくつかの本当に魅力的な設定があります.vscode and .editorconfig 4つのスペースインデントを強制的に、両方のストレートゴミに.Imbaがタブを主張するとしても、彼らは視覚的に2つの間隔を置かれるべきです、あるいは、それはassasのように見えます.
閉じるこの動画はお気に入りから削除されています.

アプリ/インデックス。HTML


これは、タイトルを変更する必要があります、残りは良いです.
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Imba 2 ROT-N</title>
    <!-- reference to the client script styles -->
    <style src='*'></style>
  </head>
  <body>
    <!-- reference to the client script -->
    <script type="module" src="./client.imba"></script>
  </body>
</html>

アプリケーション/クライアント。印旛


これは直接翻訳にかなり近いです.
tag app
  prop text = "Hello, World!"

  def rot(n)
    text.replace /[a-z]/gi do |c|
      let i = c.charCodeAt(0)
      if i >= 97 and i <= 122
        String.fromCharCode(((i - 97 + n) % 26) + 97)
      else if i >= 65 and i <= 90
        String.fromCharCode(((i - 65 + n) % 26) + 65)
      else
        c

  def upload(event)
    let file = event.target.files[0]
    return unless file
    let reader = new FileReader
    reader.onload = do |event|
      text = event.target.result
      imba.commit()
    reader.readAsText(file)

  <self>
    <div.contents>
      <header>
        "ROT-N"
      <textarea bind=text>
      <div>
        <input#file type="file" :change.upload>
      <table>
        for i in [1 .. 25]
          <tr>
            <th>
              i
            <td>
              rot(i)

  css
    display: flex
    justify-content: space-around
    max-width: 1000px
    margin: auto
    ff: sans

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

    textarea
      min-width: 50vw
      min-height: 100px

    th
      padding-right: 5px

imba.mount <app>
いくつかの違い
  • CSSはコンポーネントではなく、svelteのように通常の方法で翻訳されます
  • 包装がないrender 機能、それはちょうど<self> (これは<app-tag> , これは、トップレベルのすべてのWebコンポーネントです
  • 構文は少し異なります<textarea[text]> なる<textarea bind=text>
  • 範囲で必要な余分なスペース[1 .. 25]
  • これ以上: 対. 区別
  • これ以上read-as-text なるreadAsText - Imba 2は、まだ許します- 名前では、いくつかのUnicode文字に変換するので、すべてのDOM APIがuglyCamelCame
  • RubyスタイルFileReader.new JavaScriptスタイルnew FileReader
  • どこにいるか全くわからない() そして、彼らがそうでないところで、規則は現在異なります
    • しかし、全体的には非常に簡単なポートでした.

    ソースコード


    ソースコードはimba2-rotn repository . いくつかの時点でGITUBページのサポートを追加しようとします.

    今度来る


    次のいくつかのエピソードでは、私はImba 2にいくつかのより多くのImbaのアプリをポートしようとしますし、私はImba状況についての私の考えをまとめて推測します.
    isnanとnumber.isNaN()の違い
    Reduxツールキット