inclusion vapor

? 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"
  • style
• 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)
  • HMR
  • 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