download teleport code generators - download teleport code generators

teleport code generators

Outro código-fonte

v0.36.6

Baixar

Não estamos longe da primeira versão oficial dos geradores de código, mas por enquanto, lembre-se que algumas partes do ecossistema são experimentais.

? O que é isso?

teleportHQ é uma plataforma de baixo código que permite às equipes construir aplicativos por meio de uma interface familiar de ferramenta de design, em tempo real.

Este repositório contém os geradores de código que alimentam o editor visual da plataforma.

teletransporte-casa.mp4

A cola entre a plataforma e os geradores de código é o padrão UIDL . O UIDL define as interfaces do usuário de forma abstrata , independente de qualquer framework ou mesmo da própria plataforma web. A partir do UIDL, você pode converter essa abstração em diferentes tipos de codificação (por exemplo, React, Vue, WebComponents etc.).

Esses geradores de código fazem parte de um ecossistema maior, que estamos construindo ativamente em um esforço para agilizar a criação de aplicações web. Você pode ler mais sobre nosso início neste artigo.

A filosofia por trás dos geradores de código é:

As interfaces de usuário são decompostas em componentes , daí o foco na geração de componentes
O que pode ser construído com React , também pode ser construído com Vue ou sobre o padrão Web Components - oferecemos suporte a vários alvos
Um projeto construído com o editor visual deve ter um alto padrão de qualidade (desempenho, segurança, acessibilidade incluídos)
A qualidade do código gerado deve ser a mais alta possível, para que qualquer desenvolvedor possa retomar o trabalho a partir daí e aprimorar o projeto
A arquitetura de geração de código é aberta e extensível, convidamos todos a contribuir!

Configuração rápida

A maneira mais fácil de entrar no ecossistema de teletransporte é experimentar um dos geradores de componentes pré-configurados:

npm install @teleporthq/teleport-component-generator-react
npm install @teleporthq/teleport-component-generator-vue
npm install @teleporthq/teleport-component-generator-angular

ou usando fio:

yarn add @teleporthq/teleport-component-generator-react
yarn add @teleporthq/teleport-component-generator-vue
yarn add @teleporthq/teleport-component-generator-angular

Para gerar um componente simples, você deve iniciar a partir de um componente UIDL :

{
  "name" : " My First Component " ,
  "node" : {
    "type" : " element " ,
    "content" : {
      "elementType" : " text " ,
      "children" : [
        {
          "type" : " static " ,
          "content" : " Hello World! "
        }
      ]
    }
  }
}

Usar os geradores de componentes pré-configurados é tão fácil quanto chamar uma função assíncrona :

 import ReactGenerator from '@teleporthq/teleport-component-generator-react'

const uidl = { ... } // your sample here

const { files } = await ReactGenerator . generateComponent ( uidl )
console . log ( files [ 0 ] . content )

A saída do console será algo como:

 import React from 'react'

const MyFirstComponent = ( props ) => {
  return < span > Hello World! < / span >
}

export default MyFirstComponent

Para outros frameworks, basta trocar o pacote:

 import VueGenerator from '@teleporthq/teleport-component-generator-vue'

const uidl = { ... } // your sample here

const { files } = await VueGenerator . generateComponent ( uidl )
console . log ( files [ 0 ] . content )

A saída do console será algo como:

< template >
  < span >Hello World!</ span >
</ template >

< script >
export default {
  name : ' MyFirstComponent ' ,
}
</ script >

Você pode brincar com a estrutura UIDL e também observar o código gerado no REPL online. Enquanto estiver lá, você também pode verificar diferentes exemplos de componentes escritos no formato UIDL.

? Ecossistema

O ecossistema de teletransporte consiste em três categorias principais de pacotes: geradores de componentes , geradores de projetos e empacotadores de projetos .

Geradores de Componentes

Temos geradores de componentes oficiais para algumas estruturas populares de front-end da web. Confira a documentação oficial para uma compreensão aprofundada da arquitetura por trás dos geradores de componentes.

Todos os geradores de componentes estão expondo uma instância do pacote teleport-component-generator . Você também pode instalar este pacote e construir seu próprio gerador com plugins, mapeamentos e pós-processadores.

Na documentação, você encontrará um guia completo sobre como construir seu gerador de componentes personalizados.

Sabores

teleport-component-generator-react - com estilo: css-modules , styled-components , styled-jsx , etc.
teleport-component-generator-vue - gerando arquivos .vue padrão
teleport-component-generator-angular - gera arquivos .ts , .html e .css
teleport-component-generator-html - (experimental)
teleport-component-generator-svelte - (em breve)

Capacidades

Aqui está uma lista de funcionalidades que o UIDL e os geradores de componentes suportam no momento, além da óbvia camada de apresentação:

Valores dinâmicos (adereços, estado) dentro de nós HTML ou em nível de atributo
Definições de tipo para props de componentes (PropTypes em React, props em Vue)
Definição de dependências externas
Estado simples do componente (usando ganchos no React, instância do componente no Vue)
Manipuladores de eventos (relacionados a mudanças de estado)
Repetir estruturas (.map em React, v-for em Vue)
Suporte para slots

Geradores de projetos

Os geradores de projetos dependem de uma entrada ProjectUIDL e de uma estratégia de projeto . O ProjectUIDL conterá todas as informações sobre roteamento, páginas, componentes e configurações globais. A estratégia dirá aos geradores onde colocar cada arquivo e qual gerador de componentes usar.

Os geradores produzirão uma estrutura abstrata com pastas e arquivos, sem gravar nada no disco. O empacotador do projeto tem a tarefa de pegar a saída de um gerador de projeto e publicá-la em algum lugar.

Verifique os guias oficiais sobre como usar um gerador de projeto existente ou como criar sua configuração personalizada

Sabores

teleport-project-generator-react - react + react-router e css-modules em cima de create-react-app
teleport-project-generator-next - baseado em Next.js
teleport-project-generator-vue - com uma estrutura começando no vue-cli
teleport-project-generator-nuxt - baseado em Nuxt.js
teleport-project-generator-angular - baseado no angular-cli
teleport-project-generator-html (experimental)

Capacidades

Além dos arquivos e pastas normais gerados ao final do processo, os geradores de projetos também cuidam de:

Suporte para configurações globais, meta tags, estilo, scripts, etc.
Extraindo todas as dependências externas e adicionando-as ao package.json .
Criando o ponto de entrada para cada aplicação (pode ser um index.html ou algo específico do framework).
Criando um arquivo de roteamento para as rotas clientes do projeto.
Gerando um manifesto da web para suporte ao PWA.

Empacotadores de projetos

Depois que um gerador criou o código para os componentes e páginas, o empacotador do projeto pegará essa saída, colocará-a em cima de um modelo de projeto existente, adicionará quaisquer ativos locais necessários e, em seguida, passará todo o resultado para um editor . Os editores são especializados em implantar toda a estrutura de pastas para terceiros, como vercel ou github , ou em criar um arquivo zip na memória ou simplesmente gravar a pasta no disk .

Editores

teleport-publisher-vercel
teleport-publisher-github
teleport-publisher-codesandbox
teleport-publisher-zip
teleport-publisher-disk
teleport-publisher-netlify (em breve)

Leitura adicional

Alguns links úteis para você se familiarizar com todo o ecossistema de teletransporte :

Documentação completa
Esquemas JSON de componentes e projetos
REPL on-line

Desenvolvimento

Este projeto usa:

TypeScript para segurança de tipo e fácil refatoração
lerna por gerenciar o monorepo com vários pacotes npm
jest para todos os tipos de testes e para calcular a cobertura do código

Para dar um toque local, recomendamos o uso yarn , pois ele se integra melhor ao lerna e todos os contribuidores o utilizam:

 yarn

Isso instala as dependências na pasta raiz, mas também cria links simbólicos entre os módulos independentes dentro da pasta packages .

Para concluir a configuração do lerna, você precisa executar:

 yarn build

Isso executará a tarefa build dentro de cada pacote individual, criando a pasta lib de saída. Temos duas saídas para cada pacote: cjs - módulos comuns de estilo js e esm - módulos es modernos. Se quiser acelerar o tempo de construção, você pode executar apenas build:cjs para evitar a construção esm .

Executando o conjunto de testes:

 yarn test
yarn test:coverage

Além disso, existe um pacote private dentro da pasta lerna chamado teleport-test . Esses pacotes podem ser usados para testar o processo de geração de código/arquivo com qualquer tipo de gerador de projeto/componente. Para dar uma volta você terá que:

 cd packages/teleport-test
npm run standalone

A versão autônoma usa o pacote teleport-code-generator e os modelos declarados estaticamente. Para testar com os modelos do github e a instância do empacotador personalizado, você deve:

 cp config.example.json config.json

Você terá que substituir o espaço reservado por seu próprio token do github. Então você pode executá-lo com:

 npm run packer

Esta versão do empacotador usa os UIDLs de examples/uidl-sample . Se o processo for executado com êxito, você verá as respostas do empacotador do projeto no formato: { success: true, payload: 'dist' } . A tarefa usa o pacote teleport-publisher-disk e gera quatro arquivos de projeto diferentes na pasta dist .

Por favor, abra um problema para qualquer irregularidade, possível bug que você encontrar ao executar este projeto, ou se você simplesmente tiver alguma dúvida ou curiosidade sobre este projeto.

? Planejamento

Não é apenas o nosso código que é de código aberto, também estamos planejando o desenvolvimento dos geradores de código no GitHub. Temos uma série de questões abertas e esperamos novas contribuições sobre isso.

Estamos especialmente interessados em abrir discussões sobre questões marcadas com o rótulo discussion .

Lançamento Oficial

O lançamento oficial será uma mudança para a versão 1.0 . O ETA para isso é por volta do final de 2019.

? Contribuições

Ficaríamos muito felizes em ter o envolvimento da comunidade em torno deste projeto. Acreditamos fortemente no poder do código aberto , por isso estamos planejando construir os melhores geradores de código possíveis, junto com toda a comunidade de desenvolvimento.

Prevemos diferentes tipos de envolvimento a partir deste ponto:

Experimentar os geradores e relatar quaisquer bugs e possíveis pontos de melhoria
Contribuir para os problemas existentes, seja nos módulos principais ou nos geradores e plugins existentes
Explorando e construindo novos plugins para os geradores existentes
Explorar e construir novos geradores baseados na arquitetura existente

Os agradecimentos vão para essas pessoas maravilhosas (chave emoji):

_{Alex Moldavo} ?	_{Vlad Nicula} ?	_{Paulo BRIE} ? ?	_mihaitaba ?	_{Mihai Serban}	_{Jaya Krishna Namburu} ?	_{Anamaria Oros}
_{ovidiuionut94}	_Alexpausan	_{Mihai Sampaleanu} ?	_Utwo	_andreiTnu	_{Xavier Cazalot}	_{Chavda Bhavik}
_{Eliza Nitoi}	_{Tudor Ce} ?	_{Dorottya Ferencz} ?	_{William Gounot}