🫶 Inclusion Vapor

Component Interoperability based on vapor

About this project

This Research & Development project is for running various components in vapor.

This project started with my day job project and was inspired by vue-jsx, which was announced at VueConf China 2024.

Warning

This is WIP 👷, so don't use in production

This project try to work whether interoperability can be provided between components of different frameworks on vapor.

🚂 Current working status:

Currently, I’m working on svelte vapor, which is necessary for my day job, so that’s a priority.

• react-vapor (PoC Done): react for vapor
• svelte-vapor (PoC Done): svelte for vapor,

🍭 Playground

pnpm build # build the packages
pnpm play # start playground

⚛️ react-vapor

Based on React v18 latest

• Jsx Vapor Explorer

🎩 svelte-vapor

Based on Svelte v4 (maybe v3 compatible)

• Svelte Vapor Template Explorer

✅ TODO

react-vapor

• transform for jsx
  • NodeTransform (Basic implementation done)
  • DirectiveTransform (Basic implementation done)
• hooks
  • useActionState
  • useCallback
  • useContext
  • useDebugValue
  • useDefferdValue
  • useEffect
  • useId
  • useImperativeHandle
  • useInsertionEffect
  • useLayoutEffect
  • useMemo
  • useOptimistic
  • useReducer
  • useRef
  • useState
  • useSyncExternalStore
  • useTransition
• Components
  • <Fragments>
  • <Profiler>
  • <StrictMode>
  • <Suspense>
  • Server components
• APIs
  • act
  • cache
  • createContext
  • forwardRef
  • lazy
  • memo
  • startTransition
  • use
  • experimental_taintObjectReference
  • experimental_taintUniqueValue
• Template Explorer
• Vite plugin with unplugin (PoC done)
  • analysis dependencies
  • runtime transform
  • reactivity transform
• Counter App
  • simple bindings
  • simple events
• Repl
• TODO-MVC App

svelte-vapor

• transform
  • NodeTransform
  • DirectiveTransform
• Svelte Component
  • prop
  • attrs
  • prop export
  • $$props
  • $$restProps
  • $
  • context="module"
• Logic blocks
  • {#if} / {:else} / {:else if}
  • {#each}
  • {#await}
  • {#key}
• Special tags
  • {@html}
  • {@debug}
  • {@const}
• Element directives
  • on:eventname
  • bind:property
  • Binding <select> value
  • Media element bindings
  • Image element bindings
  • Block-level element bindings
  • bind:group
  • bind:this
  • class:name (multiple classes hasn't supported yet)
  • style:property (mulple styles, modifier has'nt supported yes)
  • use:action
  • transition:fn
  • Transition parameters
  • Custom transition functinos
  • Transition events
  • in:fn/out:fn
  • animate:fn
  • Animation Parameters
  • Custom animation functions
• Component directives
  • on:eventname
  • --style-props
  • bind:property
  • bind:this
• Special elements
  • <slot>
    • default
    • <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
  • svelte
    • onMount (not still support return unmount fn)
    • beforeUpdate
    • afterUpdate
    • onDestroy (vapor not still support)
    • tick
    • setContext
    • getContext
    • hasContext
    • getAllContext
    • createEventDispatcher
  • store
  • motion
  • transition
  • animate
  • eashing
  • action
• Template Explorer
• SFC-flavoured component compiler (PoC Done)
  • template
  • script
  • styles
• Vite plugin with unplugin (PoC Done)
  • analysis dependencies
  • runtime transform
  • reactivity transform
• Counter App
  • simple bindings
  • simple events
• Repl
• TODO-MVC App

🛣️ Roadmap

This is the roadmap for inclusion-vapor. Currently, we are focusing on day job project, so the roadmap only includes svelte-vapor. If needed, we will continue implementing react-vapor, but We hope to develop through contribution of the community.

This roadmap depends on vapor project so that the milestones may change.

Milestone 1: svelte-vapor basic implementation

• Goal: To be able to use svelte-vapor instead of svelte 3 and 4 as experimental
• Key Tasks:
  • Basic implementation for svelte 3 and 4 features in day job project (see more task details here)
  • Building with unplugin-svelte
  • E2E testing (Snapshot consistency) based on svelte 4 testing

Milestone 2: svelte-vapor advanced implementation

• Goal: To be able to use svelte-vapor instead of svelte 5, 3, and 4
• Key Tasks:
  • Implementation of svelte 3 and 4 remaining features to make them available for use by external projects
  • Rust compiler implementation for Svelte template
  • Implementation for svelte 5 (Support for runes)

💖 Credits

This project is supported by:

• Vue.js & Vapor, created by Evan You and Vapor team
• React, created by Meta Platforms, Inc, and affiliates.
• Svelte, created by Rich Harris and Svelte community

And Inspired by:

• unplugin-vue-jsx-vapor, created by zhiyuanzmj
• vue-hooks, created by Ubugeeei

Thank you! ❤️

©️ License

MIT