Component Interoperability based on vapor
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.
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,
pnpm build # build the packages
pnpm play # start playgroundBased on React v18 latest
Based on Svelte v4 (maybe v3 compatible)
- 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
- 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
- svelte
- 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
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.
- Goal: To be able to use svelte-vapor instead of svelte 3 and 4 as experimental
- Key Tasks:
- 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)
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! ❤️