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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "FAQ",
  "children": [{
    "depth": 3,
    "value": "1. JSX tanpa VDOM? Apa ini vaporware? Saya pernah mendengar penulis framework-framework lainnya mengatakan ini tidak mungkin bisa dilakukan.",
    "children": []
  }, {
    "depth": 3,
    "value": "2. Bagaimana Solid bisa sangat cepat?",
    "children": []
  }, {
    "depth": 3,
    "value": "3. Apa ada semacam React-Compat?",
    "children": []
  }, {
    "depth": 3,
    "value": "4. Mengapa destrukturisasi tidak berhasil? Saya menyadari bahwa saya dapat memperbaikinya dengan membungkus seluruh komponen saya dalam suatu fungsi.",
    "children": []
  }, {
    "depth": 3,
    "value": "5. Bisakah kamu menambahkan dukungan untuk class komponen? Saya menemukan lifecycles lebih mudah untuk dipikirkan.",
    "children": []
  }, {
    "depth": 3,
    "value": "6. Saya sangat tidak menyukai JSX, apakah ada kemungkinan untuk menggunakan Template DSL? Oh, saya lihat kamu memiliki Tagged Template Literals/HyperScript. Mungkin saya akan menggunakan mereka ...",
    "children": []
  }, {
    "depth": 3,
    "value": "7. Kapan saya menggunakan Signal vs Store? Mengapa mereka berbeda?",
    "children": []
  }, {
    "depth": 3,
    "value": "8. Mengapa saya tidak bisa memberikan nilai ke Solid's Store seperti yang saya bisa lakukan di Vue, Svelte, atau MobX? Di mana pengikatan 2 arah (2-way bindings) nya?",
    "children": []
  }, {
    "depth": 3,
    "value": "9. Bisakah saya menggunakan reaktivitas Solid sendiri?",
    "children": []
  }, {
    "depth": 3,
    "value": "10. Apakah Solid memiliki library seperti Next.js atau Material Components yang dapat saya gunakan?",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    h3: "h3",
    p: "p",
    ol: "ol",
    li: "li",
    code: "code"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "faq",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#faq",
        children: "#"
      }), "FAQ"]
    }), "\n", jsxs(_components.h3, {
      id: "1-jsx-tanpa-vdom-apa-ini-vaporware-saya-pernah-mendengar-penulis-framework-framework-lainnya-mengatakan-ini-tidak-mungkin-bisa-dilakukan",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#1-jsx-tanpa-vdom-apa-ini-vaporware-saya-pernah-mendengar-penulis-framework-framework-lainnya-mengatakan-ini-tidak-mungkin-bisa-dilakukan",
        children: "#"
      }), "1. JSX tanpa VDOM? Apa ini vaporware? Saya pernah mendengar penulis framework-framework lainnya mengatakan ini tidak mungkin bisa dilakukan."]
    }), "\n", jsx(_components.p, {
      children: "Ini memungkinkan untuk dilakukan ketika kamu tidak memiliki model pembaruan seperti React. JSX adalah Template DSL seperti yang lainnya. Hanya satu yang lebih fleksibel dengan cara tertentu. Memasukkan JavaScript arbitrer terkadang sulit, tetapi tidak berbeda dengan mendukung spread operator. Jadi tidak, ini bukan vapourware tetapi pendekatan yang terbukti menjadi salah satu yang paling berkinerja."
    }), "\n", jsx(_components.p, {
      children: "Manfaat sebenarnya ada pada seberapa extensible (dapat diperluas) nya library ini. Kamu memiliki kompiler yang berfungsi untuk memberi kamu pembaruan DOM asli yang optimal tetapi kamu tetap memiliki semua kebebasan library seperti React untuk menulis Komponen menggunakan teknik seperti Render Props dan Komponen Orde Tinggi (Higher Order Components) di samping \"hooks\" reaktif Anda. Tidak suka cara kerja aliran kontrol Solid? Buat punyamu sendiri."
    }), "\n", jsxs(_components.h3, {
      id: "2-bagaimana-solid-bisa-sangat-cepat",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#2-bagaimana-solid-bisa-sangat-cepat",
        children: "#"
      }), "2. Bagaimana Solid bisa sangat cepat?"]
    }), "\n", jsx(_components.p, {
      children: "Kami berharap kami dapat menunjukkannya ke satu hal saja, tetapi semua ini benar-benar kombinasi dari banyak keputusan desain penting:"
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsx(_components.li, {
        children: "Reaktivitas eksplisit sehingga hanya hal-hal yang seharusnya reaktif yang dilacak."
      }), "\n", jsx(_components.li, {
        children: "Kompilasi dengan mempertimbangkan pembuatan awal. Solid menggunakan heuristik untuk melonggarkan granularitas guna mengurangi jumlah komputasi yang dilakukan tetapi tetap mempertahankan key pembaruan yang terperinci dan berkinerja."
      }), "\n", jsx(_components.li, {
        children: "Ekspresi reaktif hanyalah fungsi. Ini memungkinkan \"Vanishing Components\" dengan evaluasi lazy prop yang menghapus pembungkus yang tidak perlu dan overhead sinkronisasi."
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Ini adalah teknik-teknik unik saat ini dalam kombinasi yang memberi Solid keunggulan dalam persaingan."
    }), "\n", jsxs(_components.h3, {
      id: "3-apa-ada-semacam-react-compat",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#3-apa-ada-semacam-react-compat",
        children: "#"
      }), "3. Apa ada semacam React-Compat?"]
    }), "\n", jsx(_components.p, {
      children: "Tidak. Dan kemungkinan besar tidak akan pernah ada. Meskipun API serupa dan komponen sering kali dapat dipindahkan dengan sedikit pengeditan, model pembaruannya pada dasarnya berbeda. Komponen-komponen React dirender berulang-ulang sehingga kode di luar Hooks bekerja dengan sangat berbeda. Aturan closures dan hook bukan hanya tidak perlu, tetapi juga dapat digunakan dengan cara yang tidak akan bekerja di sini."
    }), "\n", jsx(_components.p, {
      children: "Vue-compat di sisi lain, itu bisa dilakukan. Meskipun tidak ada rencana untuk diterapkan saat ini."
    }), "\n", jsxs(_components.p, {
      children: ["Di samping itu, ini memungkinkan Solid berjalan didalam React. ", jsx(_components.a, {
        href: "https://github.com/solidjs/react-solid-state",
        children: "React Solid State"
      }), " membuat API Solid dapat di akses dari komponen-komponen fungsi React. ", jsx(_components.a, {
        href: "https://github.com/solidjs/react-solid-state",
        children: "React Solid State"
      }), " memungkinkan kamu merender komponen React didalam Solid dan sebaliknya, dimana berguna ketika memporting aplikasi secara bertahap."]
    }), "\n", jsxs(_components.h3, {
      id: "4-mengapa-destrukturisasi-tidak-berhasil-saya-menyadari-bahwa-saya-dapat-memperbaikinya-dengan-membungkus-seluruh-komponen-saya-dalam-suatu-fungsi",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#4-mengapa-destrukturisasi-tidak-berhasil-saya-menyadari-bahwa-saya-dapat-memperbaikinya-dengan-membungkus-seluruh-komponen-saya-dalam-suatu-fungsi",
        children: "#"
      }), "4. Mengapa destrukturisasi tidak berhasil? Saya menyadari bahwa saya dapat memperbaikinya dengan membungkus seluruh komponen saya dalam suatu fungsi."]
    }), "\n", jsx(_components.p, {
      children: "Reaktivitas terjadi pada akses properti pada objek Prop dan Store. Merujuk (Referencing) mereka di luar komputasi yang mengikat atau reaktif tidak akan dilacak. Melakukan destrukturisasi boleh-boleh saja di dalam mereka."
    }), "\n", jsx(_components.p, {
      children: "Namun, membungkus seluruh komponen kamu dalam suatu fungsi bukanlah hal yang ingin kamu lakukan secara tidak bertanggung jawab. Solid tidak memiliki VDOM. Jadi setiap perubahan yang dilacak akan menjalankan seluruh fungsi lagi menciptakan semuanya. Jangan lakukan itu."
    }), "\n", jsxs(_components.h3, {
      id: "5-bisakah-kamu-menambahkan-dukungan-untuk-class-komponen-saya-menemukan-lifecycles-lebih-mudah-untuk-dipikirkan",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#5-bisakah-kamu-menambahkan-dukungan-untuk-class-komponen-saya-menemukan-lifecycles-lebih-mudah-untuk-dipikirkan",
        children: "#"
      }), "5. Bisakah kamu menambahkan dukungan untuk class komponen? Saya menemukan lifecycles lebih mudah untuk dipikirkan."]
    }), "\n", jsx(_components.p, {
      children: "Bukan niat kami untuk mendukung class komponen. Lifecycles Solid terkait dengan penjadwalan sistem reaktif dan buatan. Kamu bisa membuat kelas darinya, saya kira, tetapi secara efektif semua kode pengendali non-event pada dasarnya dijalankan di konstruktor, termasuk fungsi render. Ini hanya lebih banyak sintaks untuk alasan membuat data kamu kurang terperinci."
    }), "\n", jsx(_components.p, {
      children: "Kamu bisa mengelompokkan data dan perilakunya bersama-sama, daripada lifecycles. Ini adalah praktik terbaik reaktif yang telah berhasil selama beberapa dekade."
    }), "\n", jsxs(_components.h3, {
      id: "6-saya-sangat-tidak-menyukai-jsx-apakah-ada-kemungkinan-untuk-menggunakan-template-dsl-oh-saya-lihat-kamu-memiliki-tagged-template-literalshyperscript-mungkin-saya-akan-menggunakan-mereka-",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#6-saya-sangat-tidak-menyukai-jsx-apakah-ada-kemungkinan-untuk-menggunakan-template-dsl-oh-saya-lihat-kamu-memiliki-tagged-template-literalshyperscript-mungkin-saya-akan-menggunakan-mereka-",
        children: "#"
      }), "6. Saya sangat tidak menyukai JSX, apakah ada kemungkinan untuk menggunakan Template DSL? Oh, saya lihat kamu memiliki Tagged Template Literals/HyperScript. Mungkin saya akan menggunakan mereka ..."]
    }), "\n", jsx(_components.p, {
      children: "Jangan. Saya menghentikan kamu di sana. Kami menggunakan JSX sebagaimana Svelte menggunakan template mereka, untuk membuat instruksi-intruksi DOM yang telah dioptimalkan. Solusi Tagged Template Literal dan HyperScript mungkin benar-benar mengesankan, tetapi kecuali kamu memiliki alasan nyata seperti persyaratan no-build, mereka lebih rendah dalam segala hal. Bundel yang lebih besar, kinerja yang lebih lambat, dan kebutuhan akan nilai pembungkus solusi manual."
    }), "\n", jsx(_components.p, {
      children: "Memang baik untuk memiliki opsi, tetapi JSX Solid benar-benar solusi terbaik di sini. Template DSL juga bagus, meskipun lebih ketat, tetapi JSX memberi kita banyak hal secara gratis. TypeScript, Parser yang Ada, Syntax Highlighting, TypeScript, Prettier, Code Completion, dan yang terakhir dan tidak kalah pentingnya TypeScript."
    }), "\n", jsx(_components.p, {
      children: "Library-library lain telah menambahkan dukungan untuk fitur-fitur ini tetapi itu merupakan upaya yang sangat besar dan masih belum sempurna dan maintenance yang bikin sakit kepala terus. Ini bisa dibilang mengambil sikap pragmatis."
    }), "\n", jsxs(_components.h3, {
      id: "7-kapan-saya-menggunakan-signal-vs-store-mengapa-mereka-berbeda",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#7-kapan-saya-menggunakan-signal-vs-store-mengapa-mereka-berbeda",
        children: "#"
      }), "7. Kapan saya menggunakan Signal vs Store? Mengapa mereka berbeda?"]
    }), "\n", jsx(_components.p, {
      children: "Stores secara otomatis membungkus nilai bersarang (nested values) sehingga ideal untuk struktur data yang dalam, dan untuk hal-hal seperti model-model. Untuk sebagian besar hal lainnya, Signals itu ringan dan melakukan pekerjaan dengan luar biasa."
    }), "\n", jsxs(_components.p, {
      children: ["Kami juga sangat ingin membungkus/menjadikan mereka sebagai satu hal yang sama, tapi kita tidak bisa memproksikan primitif. Fungsi adalah antarmuka paling sederhana, dan ekspresi reaktif apa pun (termasuk akses state) dapat digabungkan menjadi satu, saat pengangkutan sehingga ini menyediakan API universal. Kamu dapat memberi nama sinyal dan state kamu sesuai pilihan dan mereka tetap minimal. Hal terakhir yang ingin kita lakukan adalah memaksa mengetik ", jsx(_components.code, {
        children: ".get()"
      }), " ", jsx(_components.code, {
        children: ".set()"
      }), " pada pengguna akhir (end user) atau lebih buruk lagi ", jsx(_components.code, {
        children: ".value"
      }), ". Setidaknya yang signal bisa dialiaskan (aliased) untuk singkatnya, sedangkan yang terakhir hanyalah cara yang paling singkat untuk memanggil suatu fungsi."]
    }), "\n", jsxs(_components.h3, {
      id: "8-mengapa-saya-tidak-bisa-memberikan-nilai-ke-solids-store-seperti-yang-saya-bisa-lakukan-di-vue-svelte-atau-mobx-di-mana-pengikatan-2-arah-2-way-bindings-nya",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#8-mengapa-saya-tidak-bisa-memberikan-nilai-ke-solids-store-seperti-yang-saya-bisa-lakukan-di-vue-svelte-atau-mobx-di-mana-pengikatan-2-arah-2-way-bindings-nya",
        children: "#"
      }), "8. Mengapa saya tidak bisa memberikan nilai ke Solid's Store seperti yang saya bisa lakukan di Vue, Svelte, atau MobX? Di mana pengikatan 2 arah (2-way bindings) nya?"]
    }), "\n", jsx(_components.p, {
      children: "Reaktivitas adalah alat yang ampuh tetapi juga berbahaya. MobX mengetahui hal ini dan memperkenalkan mode Ketat (Strict Mode) dan Actions untuk membatasi di mana/kapan pembaruan terjadi. Dalam Solid, yang berhubungan dengan seluruh pohon komponen data, sesuatu hal yang jelas bahwa kita dapat belajar sesuatu dari React di sini. Kamu tidak perlu benar-benar menjadikannya immutable selama kamu menyediakan sarana untuk memiliki kontrak yang sama."
    }), "\n", jsx(_components.p, {
      children: "Mampu melewati kemampuan untuk memperbarui state bisa dibilang lebih penting daripada memutuskan untuk mengoper state. Jadi, kemampuan untuk memisahkan itu penting, dan hanya mungkin jika membaca (reading) tidak dapat diubah (immutable). Kami juga tidak perlu membayar biaya dari (immutability) jika kami masih dapat memperbarui secara terperinci. Untungnya ada banyak karya sebelumnya di sini antara ImmutableJS dan Immer. Ironisnya Solid sebagian besar bertindak sebagai Immer terbalik dengan internal yang dapat berubah (mutable) dan antarmuka yang tidak dapat diubah (immutable)."
    }), "\n", jsxs(_components.h3, {
      id: "9-bisakah-saya-menggunakan-reaktivitas-solid-sendiri",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#9-bisakah-saya-menggunakan-reaktivitas-solid-sendiri",
        children: "#"
      }), "9. Bisakah saya menggunakan reaktivitas Solid sendiri?"]
    }), "\n", jsxs(_components.p, {
      children: ["Tentu saja. Meskipun kami belum mengekspor packagenya secara mandiri/terpisah, mudah bagi kamu untuk menginstal Solid tanpa kompiler dan hanya menggunakan primitif reaktif. Salah satu manfaat reaktivitas granular adalah library agnostik. Dalam hal ini, hampir setiap perpustakaan reaktif bekerja dengan cara ini. Itulah yang mengilhami ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid",
        children: "Solid"
      }), " dan ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions",
        children: "DOM Expressions library"
      }), " yang mendasarinya untuk membuat penyaji murni dari sistem reaktif."]
    }), "\n", jsxs(_components.p, {
      children: ["Beberapa hal yang kamu dapat coba: ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid",
        children: "Solid"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/mobxjs/mobx",
        children: "MobX"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/knockout/knockout",
        children: "Knockout"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/sveltejs/svelte",
        children: "Svelte"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/adamhaile/S",
        children: "S.js"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/Riim/cellx",
        children: "CellX"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/ds300/derivablejs",
        children: "Derivable"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/luwes/sinuous",
        children: "Sinuous"
      }), ", dan bahkan baru-baru ini ", jsx(_components.a, {
        href: "https://github.com/vuejs/vue",
        children: "Vue"
      }), ". Lebih banyak lagi yang dilakukan untuk membuat library reaktif daripada menandainya ke perender seperti, ", jsx(_components.a, {
        href: "https://github.com/Polymer/lit-html",
        children: "lit-html"
      }), " misalnya, tetapi ini adalah cara yang baik untuk merasakannya."]
    }), "\n", jsxs(_components.h3, {
      id: "10-apakah-solid-memiliki-library-seperti-nextjs-atau-material-components-yang-dapat-saya-gunakan",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#10-apakah-solid-memiliki-library-seperti-nextjs-atau-material-components-yang-dapat-saya-gunakan",
        children: "#"
      }), "10. Apakah Solid memiliki library seperti Next.js atau Material Components yang dapat saya gunakan?"]
    }), "\n", jsxs(_components.p, {
      children: ["Tidak sepengetahuan kami. Jika kamu tertarik untuk membuatnya, kami siap tersedia di ", jsx(_components.a, {
        href: "https://discord.com/invite/solidjs",
        children: "Discord"
      }), " kami untuk membantu membangunnya. Kami sudah memiliki dasar-dasarnya dan hanya perlu membangunnya dari dasar-dasar itu."]
    })]
  });
}
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=faq-21ac1ce3.js.map
