Skip to content

kazupon/inclusion-vapor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🫶 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.

inclusion-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

🎩 svelte-vapor

Based on Svelte v4 (maybe v3 compatible)

✅ 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:

And Inspired by:

Thank you! ❤️

©️ License

MIT