inclusion vapor

? Inklusi uap

Interoperabilitas komponen berdasarkan uap

Tentang proyek ini

Proyek penelitian & pengembangan ini adalah untuk menjalankan berbagai komponen dalam uap.

Proyek ini dimulai dengan proyek pekerjaan saya dan terinspirasi oleh Vue-JSX, yang diumumkan di Vueconf China 2024.

Peringatan

Ini wip ?, jadi jangan gunakan dalam produksi

Proyek ini mencoba untuk bekerja apakah interoperabilitas dapat disediakan antara komponen kerangka kerja yang berbeda tentang uap .

? Status Kerja Saat Ini:

Saat ini, saya sedang mengerjakan uap langsing, yang diperlukan untuk pekerjaan harian saya, jadi itu prioritas.

• React-evapor (POC selesai): Bereaksi untuk uap
• Svelte-evapor (POC selesai): Svelte for Vapor,

? Tempat bermain

pnpm build # build the packages
pnpm play # start playground 

⚛️ React-evapor

Berdasarkan React V18 terbaru

• JSX Vapor Explorer

? SVELTE-ERVOR

Berdasarkan Svelte V4 (mungkin V3 kompatibel)

• Penjelajah Template Uap Lengkungan

✅ Todo

react-evapor

• mengubah untuk JSX
  • Nodetransform (implementasi dasar dilakukan)
  • DirectiveTransform (implementasi dasar dilakukan)
• kait
  • UseactionState
  • Usecallback
  • Usecontext
  • Usedebugvalue
  • Usedefferdvalue
  • Menggunakan efek
  • Useid
  • UseImperativeHandle
  • GunakanIntionEffect
  • UselayoutEffect
  • usememo
  • menggunakan optimis
  • Usereducer
  • Useref
  • usestate
  • menggunakan syncexternalstore
  • Usetransition
• Komponen
  • <Fragments>
  • <Profiler>
  • <StrictMode>
  • <Suspense>
  • Komponen server
• Lebah
  • bertindak
  • cache
  • CreateContext
  • Forwardref
  • malas
  • memo
  • startTransition
  • menggunakan
  • Experimental_taintobjectreference
  • Experimental_taintuniquevalue
• Template Explorer
• Plugin Vite dengan Unplugin (POC selesai)
  • Ketergantungan analisis
  • transformasi runtime
  • Transformasi Reaktivitas
• Aplikasi Counter
  • Binding sederhana
  • acara sederhana
• Repl
• Aplikasi TODO-MVC

SVELTE-ERVOR

• mengubah
  • Nodetransform
  • Directivetransform
• Komponen langsing
  • menopang
  • attrs
  • Ekspor Prop
  • $$props
  • $$restProps
  • $
  • context="module"
  • gaya
• Blok logika
  • {#if} / {:else} / {:else if}
  • {#each}
  • {#await}
  • {#key}
• Tag khusus
  • {@html}
  • {@debug}
  • {@const}
• Arahan Elemen
  • on:eventname
  • bind:property
  • Nilai mengikat <select>
  • Binding Elemen Media
  • Binding elemen gambar
  • Binding elemen tingkat blok
  • bind:group
  • bind:this
  • class:name (beberapa kelas belum didukung)
  • style:property (Mulple Styles, Modifier tidak mendukung ya)
  • use:action
  • transition:fn
  • Parameter transisi
  • Fungsi transisi khusus
  • Acara Transisi
  • in:fn/out:fn
  • animate:fn
  • Parameter animasi
  • Fungsi Animasi Kustom
• Arahan komponen
  • on:eventname
  • --style-props
  • bind:property
  • bind:this
• Elemen khusus
  • <slot>
    • bawaan
    • <slot name="name">
    • $$slots
    • <slot key={value}>
  • <svelte:self>
  • <svelte:component>
  • <svelte:element>
  • <svelte:window>
  • <svelte:document>
  • <svelte:body>
  • <svelte:head>
  • <svelte:options>
  • <svelte:fragment>
• Runtime
  • langsing
    • onMount (masih tidak mendukung pengembalian unmount fn)
    • beforeUpdate
    • afterUpdate
    • onDestroy (uap tidak masih mendukung)
    • tick
    • setContext
    • getContext
    • hasContext
    • getAllContext
    • createEventDispatcher
  • toko
  • gerakan
  • transisi
  • menghidupkan
  • peashing
  • tindakan
• Template Explorer
• Kompiler Komponen SFC-Flavoured (POC Selesai)
  • templat
  • naskah
  • gaya
• Plugin Vite dengan Unplugin (POC selesai)
  • HMR
  • Ketergantungan analisis
  • transformasi runtime
  • Transformasi Reaktivitas
• Aplikasi Counter
  • Binding sederhana
  • acara sederhana
• Repl
• Aplikasi TODO-MVC

? Roadmap

Ini adalah peta jalan untuk inklusi-uap. Saat ini, kami fokus pada proyek pekerjaan harian, jadi peta jalan hanya mencakup uap langsing. Jika perlu, kami akan terus menerapkan react-uap, tetapi kami berharap dapat berkembang melalui kontribusi masyarakat.

Peta jalan ini tergantung pada proyek uap sehingga tonggak sejarah dapat berubah.

Milestone 1: Implementasi Dasar Svelte-Vapor

• Sasaran: Untuk dapat menggunakan uap langsing alih-alih Svelte 3 dan 4 sebagai eksperimental
• Tugas utama:
  • Implementasi Dasar untuk Svelte 3 dan 4 Fitur dalam Proyek Pekerjaan Harian (lihat lebih banyak detail tugas di sini)
  • Bangunan dengan clugin-svelte
  • Pengujian E2E (Konsistensi Snapshot) Berdasarkan Pengujian Svelte 4

Milestone 2: LSVELTE-VAPOR Lanjutan Implementasi

• Sasaran: Untuk dapat menggunakan uap langsing bukannya langsing 5, 3, dan 4
• Tugas utama:
  • Implementasi fitur Svelte 3 dan 4 yang tersisa untuk membuatnya tersedia untuk digunakan oleh proyek eksternal
  • Implementasi Kompiler Karat untuk Template Svelte
  • Implementasi untuk Svelte 5 (Dukungan untuk Rune)

? Kredit

Proyek ini didukung oleh:

• Vue.js & uap, dibuat oleh Evan Anda dan Tim Vapor
• Bereaksi, dibuat oleh Meta Platforms, Inc, dan Afiliasi.
• Svelte, diciptakan oleh Komunitas Rich Harris dan Svelte

Dan terinspirasi oleh:

• Unplugin-vue-jsx-vapor, dibuat oleh zhiyuanzmj
• vue-hooks, dibuat oleh ubugeeei

Terima kasih! ❤️

© ️ Lisensi

Mit