import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Reaktifitas",
  "children": [{
    "depth": 2,
    "value": "Memperkenalkan Primitif-primitif",
    "children": []
  }, {
    "depth": 2,
    "value": "Bagaimana mereka Bekerja",
    "children": []
  }, {
    "depth": 2,
    "value": "Hal yang perlu dipertimbangkan",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    code: "code",
    pre: "pre",
    span: "span",
    h2: "h2",
    ol: "ol",
    li: "li"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "reaktifitas",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#reaktifitas",
        children: "#"
      }), "Reaktifitas"]
    }), "\n", jsx(_components.p, {
      children: "Manajemen data pada Solid dibuat dari seperangkat primitif-primitif reaktif yang fleksibel yang akan bertanggung jawab untuk semua pembaruan. Ini hampir sama yang dilakukan MobX atau Vue kecuali kita tidak mengorbankan granularitas untuk VDOM. Dependencies secara otomatis akan dilacak ketika kamu mengakses nilai reaktif kamu di Effects kamu dan kode JSX View."
    }), "\n", jsxs(_components.p, {
      children: ["Primitif-primitif pada Solid datang dengan berbentuk panggilan fungsi ", jsx(_components.code, {
        children: "create"
      }), " yang biasanya mengembalikan tuples, dimana secara umum elemen pertamanya adalah primitif yang dapat dibaca dan yang keduanya sebuah \"setter\". Itu sesuatu yang umum untuk merujuk ke bagian yang dapat dibaca dengan nama primitifnya."]
    }), "\n", jsxs(_components.p, {
      children: ["Berikut adalah penghitung kenaikan otomatis dasar yang diperbarui berdasarkan pengaturan signal ", jsx(_components.code, {
        children: "count"
      }), "."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createSignal, onCleanup } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { render } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js/web\""
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "App"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), "),\n    timer = ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "setInterval"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setCount"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "() + ", jsx(_components.span, {
          className: "hljs-number",
          children: "1"
        }), "), ", jsx(_components.span, {
          className: "hljs-number",
          children: "1000"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onCleanup"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "clearInterval"
        }), "(timer));\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "{count()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "render"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "App"
            }), " />"]
          })
        }), ", ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getElementById"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"app\""
        }), "));\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "memperkenalkan-primitif-primitif",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#memperkenalkan-primitif-primitif",
        children: "#"
      }), "Memperkenalkan Primitif-primitif"]
    }), "\n", jsx(_components.p, {
      children: "Solid terbentuk dari 3 primitif utama, Signal, Memo, dan Effect. Mereka mempunyai pola Observer dimana Signal (dan Memo) akan dilacak dengan membungkus Memo dan Effect."
    }), "\n", jsx(_components.p, {
      children: "Signal adalah primitif yang paling sederhana. Dia memiliki fungsi nilai, dan get dan set supaya kita dapat menangkap ketika mereka dipanggil atau diganti."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ");\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Effect adalah fungsi yang membungkus read dari signal kita dan mengeksekusi ulang ketika nilai yang bergantung ke Signal terganti. Ini berguna saat kita membuat side effect, seperti rendering."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"The latest count is\""
        }), ", ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "()));\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Yang terakhir, Memo adalah nilai turunan yang di-cache. Mereka berbagi properti dengan Signal dan Effect. Mereka melacak Signal, yang bergantung kepada mereka, sendiri dan mengeksekusi ulang hanya ketika mereka terganti, dan mereka sendiri adalah Signal yang dapat dilacak."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " fullName = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsxs(_components.span, {
          className: "hljs-string",
          children: ["`", jsx(_components.span, {
            className: "hljs-subst",
            children: "${firstName()}"
          }), " ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${lastName()}"
          }), "`"]
        }), ");\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "bagaimana-mereka-bekerja",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#bagaimana-mereka-bekerja",
        children: "#"
      }), "Bagaimana mereka Bekerja"]
    }), "\n", jsx(_components.p, {
      children: "Signal adalah \"event emitters\" yang menyimpan daftar dari subscription. Mereka memberitahu subscribers mereka setiap kali nilai mereka berganti."
    }), "\n", jsx(_components.p, {
      children: "Yang lebih menariknya adalah bagaimana subscriptions ini terjadi. Solid menggunakan pelacakan dependency otomatis. Pembaruan terjadi secara otomatis setiap kali data berganti."
    }), "\n", jsx(_components.p, {
      children: "Triknya adalah tumpukan global saat runtime. Sebelum Effect atau Memo mengeksekusi (atau mengeksekusi ulang) fungsi yang telah disediakan developer, dia akan menumpukkan diri ke tumpukan tersebut. Lalu, setiap Signal yang membaca akan mengecek apakah ada listener di tumpukan dan jika ada tambahkan listener tersebut ke subscriptions mereka."
    }), "\n", jsx(_components.p, {
      children: "Kamu dapat memikirkannya seperti ini:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "value"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " subscribers = ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "new"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Set"
        }), "();\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "read"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " listener = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getCurrentListener"
        }), "();\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "if"
        }), " (listener) subscribers.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "add"
        }), "(listener);\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " value;\n  };\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "write"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "nextValue"
        }), ") => {\n    value = nextValue;\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "for"
        }), " (", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " sub ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "of"
        }), " subscribers) sub.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "run"
        }), "();\n  };\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " [read, write];\n}\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Sekarang ketika kita melakukan pembaruan, Signal kita tahu mana Effect yang akan dijalankan ulang. Sederhana tapi efektif. Implementasi sebenarnya jauh lebih kompleks tapi seperti itulah inti dari bagaimana mereka bekerja."
    }), "\n", jsx(_components.p, {
      children: "Untuk memahami lebih detail bagaimana Reaktifitas bekerja, berikut artikel-artikel yang mungkin berguna untuk kamu:"
    }), "\n", jsx(_components.p, {
      children: jsx(_components.a, {
        href: "https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf",
        children: "A Hands-on Introduction to Fine-Grained Reactivity"
      })
    }), "\n", jsx(_components.p, {
      children: jsx(_components.a, {
        href: "https://dev.to/ryansolid/building-a-reactive-library-from-scratch-1i0p",
        children: "Building a Reactive Library from Scratch"
      })
    }), "\n", jsx(_components.p, {
      children: jsx(_components.a, {
        href: "https://indepth.dev/posts/1289/solidjs-reactivity-to-rendering",
        children: "SolidJS: Reactivity to Rendering"
      })
    }), "\n", jsxs(_components.h2, {
      id: "hal-yang-perlu-dipertimbangkan",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#hal-yang-perlu-dipertimbangkan",
        children: "#"
      }), "Hal yang perlu dipertimbangkan"]
    }), "\n", jsx(_components.p, {
      children: "Pendekatan reaktifitas seperti ini bisa dibilang sangat kuat dan dinamis. Cara ini bisa menghandel dependencies yang berubah begitu saja dengan mengeksekusi cabang berbeda dari kode kondisional. Ia juga dapat bekerja pada banyak level indirection. Setiap fungsi yang tereksekusi didalam cakupan pelacakan akan dilacak juga."
    }), "\n", jsx(_components.p, {
      children: "Tetapi, ada beberapa kunci perilaku dan pertukaran yang perlu kita waspadai."
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "Semua reaktifitas akan terlacak dari panggilan fungsi mau itu secara langsung atau tersembunyi dibawah getter/proxy dan dapat dipicu oleh pengaksesan properti objek. Ini berarti tempat kamu mengakses properti objek reaktifitas sangatlah penting."
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "Komponen dan callbacks dari control flows bukanlah cakupan pelacakan dan hanya akan tereksekusi satu kali. Ini berarti meng-destructure atau melakukan tingkat-atas logika di komponen-komponen kamu tidak dapat ter-eksekusi ulang. Kamu harus mengakses Signal, Store, dan properti-properti ini dari dalam primitif-primitif reaktif lain atau JSX dari bagian kode itu untuk mengevaluasi ulang."
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["Pendekatan ini hanya melacak secara sinkron. Jika kamu punya sebuah ", jsx(_components.code, {
            children: "setTimeout"
          }), " atau menggunakan fungsi asinkron di Effect, kode yang mengeksekusi asinkron setelah itu tidak akan terlacak."]
        }), "\n"]
      }), "\n"]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=reactivity-472eb881.js.map
