inclusion vapor

? Vapor de inclusão

Interoperabilidade de componente com base no vapor

Sobre este projeto

Este projeto de pesquisa e desenvolvimento é para executar vários componentes em vapor.

Este projeto começou com o meu projeto de emprego diário e foi inspirado pelo Vue-JSX, anunciado na Vueconf China 2024.

Aviso

Isso é WIP?, Então não use na produção

Este projeto tente trabalhar se a interoperabilidade pode ser fornecida entre componentes de diferentes estruturas no vapor .

? Status de trabalho atual:

Atualmente, estou trabalhando no Sovete Vapor, o que é necessário para o meu trabalho diário, então isso é uma prioridade.

• React-vapor (POC doado): reaja para vapor
• SVELTE-VAPOR (POC doado): esbelto para vapor,

? Playground

pnpm build # build the packages
pnpm play # start playground 

⚛️ React-vapor

Com base no React v18 mais recente

• JSX Vapor Explorer

? SVELTE-VAPOR

Baseado no SVELTE V4 (talvez compatível com V3)

• Explorador de modelo de vapor esbelto

✅ TODO

React-vapor

• Transforme para JSX
  • NodeTransform (implementação básica feita)
  • DirectiveTransform (implementação básica feita)
• ganchos
  • UseActionState
  • Usecallback
  • useContext
  • UtilizouBugValue
  • usedefferdValue
  • useeffect
  • USEID
  • useImperativeHandle
  • useInsertioneffect
  • UselayoutEffect
  • UsoMemo
  • useptimistic
  • UserEduces
  • Useref
  • uso
  • usaSyncexternalStore
  • USETRANSITION
• Componentes
  • <Fragments>
  • <Profiler>
  • <StrictMode>
  • <Suspense>
  • Componentes do servidor
• APIs
  • agir
  • cache
  • createContext
  • Forwardref
  • preguiçoso
  • memorando
  • StartTransition
  • usar
  • Experimental_TaintobjectReference
  • Experimental_TaintuniqueValue
• Modelo Explorer
• Plug -in de vite com unplugin (POC feito)
  • dependências de análise
  • Transformação de tempo de execução
  • Transformação da reatividade
• Contra -aplicativo
  • ligações simples
  • eventos simples
• Repl
• TODO-MVC App

SVELTE-VAPOR

• transformar
  • NodeTransform
  • DirectiveTransform
• Componente esbelto
  • prop
  • attrs
  • exportação de suporte
  • $$props
  • $$restProps
  • $
  • context="module"
  • estilo
• Blocos lógicos
  • {#if} / {:else} / {:else if}
  • {#each}
  • {#await}
  • {#key}
• Tags especiais
  • {@html}
  • {@debug}
  • {@const}
• Diretivas de elementos
  • on:eventname
  • bind:property
  • Valor <select> de ligação
  • Media elem elementos
  • Bindings de elementos de imagem
  • Ligações de elementos no nível do bloco
  • bind:group
  • bind:this
  • class:name (várias classes ainda não foram suportadas)
  • style:property (Estilos Mulple, Modificador não apoiou sim)
  • use:action
  • transition:fn
  • Parâmetros de transição
  • Functinos de transição personalizados
  • Eventos de transição
  • in:fn/out:fn
  • animate:fn
  • Parâmetros de animação
  • Funções de animação personalizadas
• Diretivas de componentes
  • on:eventname
  • --style-props
  • bind:property
  • bind:this
• Elementos especiais
  • <slot>
    • padrão
    • <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>
• Tempo de execução
  • SVELTE
    • onMount (ainda não suporta o retorno desmontagem fn)
    • beforeUpdate
    • afterUpdate
    • onDestroy (vapor ainda não suporta)
    • tick
    • setContext
    • getContext
    • hasContext
    • getAllContext
    • createEventDispatcher
  • loja
  • movimento
  • transição
  • animar
  • Evela
  • Ação
• Modelo Explorer
• Componente componente com sabor SFC (POC feito)
  • modelo
  • script
  • estilos
• Plug -in de vite com unplugin (POC feito)
  • Hmr
  • dependências de análise
  • Transformação de tempo de execução
  • Transformação da reatividade
• Contra -aplicativo
  • ligações simples
  • eventos simples
• Repl
• TODO-MVC App

? ️ Roadmap

Este é o roteiro para a inclusão-vapor. Atualmente, estamos focados no projeto de emprego diário, portanto o roteiro inclui apenas um vagador. Se necessário, continuaremos implementando o React-Vapor, mas esperamos desenvolver através da contribuição da comunidade.

Este roteiro depende do projeto de vapor para que os marcos possam mudar.

Milestone 1: implementação básica esbelta-vapor

• Objetivo: ser capaz de usar o vagador esbelto em vez de esbelto 3 e 4 como experimental
• Principais tarefas:
  • Implementação básica para os recursos esbeltos 3 e 4 no projeto de trabalho diário (veja mais detalhes da tarefa aqui)
  • Construindo com desbotamento
  • Testes E2E (consistência de instantâneo) com base no teste de 4

Milestone 2: implementação avançada esbelta de vapor

• Objetivo: ser capaz de usar o vagador esbelto em vez de esbelto 5, 3 e 4
• Principais tarefas:
  • Implementação de recursos restantes de 3 e 4 para disponibilizá -los para uso por projetos externos
  • Implementação do compilador de ferrugem para modelo esbelto
  • Implementação para Svelte 5 (suporte para runas)

? Créditos

Este projeto é suportado por:

• Vue.js & Vapor, criado por Evan You e Vapor Team
• React, criado por Meta Platforms, Inc e afiliados.
• SVELTE, criado por Rich Harris e Sovete Community

E inspirado por:

• Unplugin-vue-jsx-vapor, criado por Zhiyuanzmj
• Vue-Hooks, criado por Ubueeei

Obrigado! ❤️

© licencie

Mit