inclusion vapor

? Vapor de inclusión

Interoperabilidad de componentes basada en vapor

Sobre este proyecto

Este proyecto de investigación y desarrollo es para ejecutar varios componentes en vapor.

Este proyecto comenzó con mi proyecto de trabajo diario y se inspiró en Vue-JSX, que se anunció en Vueconf China 2024.

Advertencia

Esto es wip?, Así que no uses en producción

Este proyecto intenta funcionar si se puede proporcionar la interoperabilidad entre componentes de diferentes marcos en vapor .

? Estado de trabajo actual:

Actualmente, estoy trabajando en Svelte Vapor, que es necesario para mi trabajo diario, por lo que es una prioridad.

• React-Vapor (POC hecho): reaccionar por vapor
• Svelte-Vapor (POC hecho): esbelte para vapor,

? Patio de juegos

pnpm build # build the packages
pnpm play # start playground 

⚛️ React-Vapor

Basado en React V18 Último

• Explorador de vapor JSX

? esbelto

Basado en Svelte V4 (quizás V3 compatible)

• Explorador de plantilla de vapor

✅ TODO

Vapor reaccionado

• Transformar para JSX
  • Nodetransform (implementación básica realizada)
  • Directivetransform (implementación básica realizada)
• manos
  • useactionstate
  • usecallback
  • useContext
  • UsadaBugvalue
  • UsadaFerDValue
  • Usar efecto
  • Useid
  • UseimperativeHandle
  • UseSertionEftect
  • uselayoutEffect
  • usememo
  • Úselo optimista
  • Uspereducer
  • useref
  • usestar
  • UssyncexternalStore
  • ustransición
• Componentes
  • <Fragments>
  • <Profiler>
  • <StrictMode>
  • <Suspense>
  • Componentes del servidor
• API
  • acto
  • cache
  • createContext
  • reenvío
  • perezoso
  • memorándum
  • contratación inicial
  • usar
  • experimental_taintaBjectreference
  • experimental_taintuniquevalue
• Explorador de plantillas
• VITE complemento con unplugin (POC hecho)
  • Dependencias de análisis
  • Transformación de tiempo de ejecución
  • transformación de reactividad
• Contaminar
  • enlaces simples
  • eventos simples
• Replicar
• Aplicación TODO-MVC

esbelto

• transformar
  • Nodetransform
  • Directivetransform
• Componente esbelto
  • apuntalar
  • atacantes
  • exportación de apoyo
  • $$props
  • $$restProps
  • $
  • context="module"
  • estilo
• Bloques lógicos
  • {#if} / {:else} / {:else if}
  • {#each}
  • {#await}
  • {#key}
• Etiquetas especiales
  • {@html}
  • {@debug}
  • {@const}
• Directivas de elementos
  • on:eventname
  • bind:property
  • Valor de enlace <select>
  • ANIZACIONES DELEMENTES DE MEDIOS
  • Bintings de elementos de imagen
  • ANIGAS DELEMENTES DE ASEJOS DE BLOQUE
  • bind:group
  • bind:this
  • class:name (múltiples clases aún no ha admitido)
  • style:property (estilos de mulple, modificador no ha admitido sí)
  • use:action
  • transition:fn
  • Parámetros de transición
  • Funcidos de transición personalizados
  • Eventos de transición
  • in:fn/out:fn
  • animate:fn
  • Parámetros de animación
  • Funciones de animación personalizadas
• Directivo de componentes
  • on:eventname
  • --style-props
  • bind:property
  • bind:this
• Elementos especiales
  • <slot>
    • por defecto
    • <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>
• Tiempo de ejecución
  • esbelto
    • onMount (aún no admite devolver unmount fn)
    • beforeUpdate
    • afterUpdate
    • onDestroy (Vapor aún no es compatible)
    • tick
    • setContext
    • getContext
    • hasContext
    • getAllContext
    • createEventDispatcher
  • almacenar
  • movimiento
  • transición
  • animar
  • relajamiento
  • acción
• Explorador de plantillas
• Compilador de componentes con sabor a SFC (POC hecho)
  • plantilla
  • guion
  • estilos
• VITE complemento con unplugin (POC hecho)
  • HMR
  • Dependencias de análisis
  • Transformación de tiempo de ejecución
  • transformación de reactividad
• Contaminar
  • enlaces simples
  • eventos simples
• Replicar
• Aplicación TODO-MVC

? ️ Hoja de ruta

Esta es la hoja de ruta para el vapor de inclusión. Actualmente, nos estamos centrando en el proyecto de trabajo diario, por lo que la hoja de ruta solo incluye Svelte-Vapor. Si es necesario, continuaremos implementando React-Vapor, pero esperamos desarrollar a través de la contribución de la comunidad.

Esta hoja de ruta depende del proyecto de vapor para que los hitos puedan cambiar.

Milestone 1: Implementación básica de Svelte-Vapor

• Objetivo: poder usar Svelte-Vapor en lugar de Svelte 3 y 4 como experimental
• Tareas clave:
  • Implementación básica para las características de SVELTE 3 y 4 en el proyecto de trabajo diario (ver más detalles de la tarea aquí)
  • Edificio con unplugin-Svelte
  • Prueba de E2E (consistencia de la instantánea) basado en las pruebas de SVELTE 4

Milestone 2: Implementación avanzada de Svelte-Vapor

• Objetivo: poder usar Svelte-Vapor en lugar de Svelte 5, 3 y 4
• Tareas clave:
  • Implementación de las características restantes de SVELTE 3 y 4 para hacerlas a disposición de los proyectos externos
  • Implementación del compilador de óxido para la plantilla SVelte
  • Implementación para SVELTE 5 (soporte para runas)

? Créditos

Este proyecto está respaldado por:

• Vue.js & Vapor, creado por Evan You y Vapor Team
• React, creado por Meta Platforms, Inc y afiliados.
• Svelte, creado por Rich Harris y Svelte Community

E inspirado en:

• unplugin-vue-jsx-vapor, creado por zhiyuanzmj
• Vue-Hooks, creados por Ubugeeei

¡Gracias! ❤️

© meze licencia

MIT