🫶 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
  • ``
  • ``
  • ``
  • ``
  • 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} / `{#if}` / `{:else}` / `{:else if}`
  • `{#each}`
  • `{#await}`
  • `{#key}`
• Special tags
  • `{@html}`
  • `{@debug}`
  • `{@const}`
• Element directives
  • `on:eventname`
  • `bind:property`
  • Binding <select> Binding `` value
    Media element bindings
  • Image element bindings
  • Block-level element bindings
  • `bind:group`
  • `bind:this`
  • class:name `class:name` (multiple classes hasn't supported yet)
  • style:property `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
  • ``
    • default
    • ``
    • `$$slots`
    • ``
  • ``
  • ``
  • ``
  • ``
  • ``
  • ``
  • ``
  • ``
  • ``
• Runtime
  • svelte
    • onMount `onMount` (not still support return unmount fn)
    • `beforeUpdate`
    • `afterUpdate`
    • onDestroy `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 Basic implementation for svelte 3 and 4 features in [day job](https://plaid.co.jp/en/) project (see more task details [here](./README.md#svelte-vapor))
  • 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