teleport code generators
v0.36.6
No estamos lejos de la primera versión oficial de los generadores de código, pero mientras tanto, ten en cuenta que algunas de las partes del ecosistema son experimentales.
teleportHQ es una plataforma de código bajo que permite a los equipos crear aplicaciones a través de una interfaz de herramienta de diseño familiar, en tiempo real.
Este repositorio contiene los generadores de código que impulsan el editor visual de la plataforma.
El pegamento entre la plataforma y los generadores de código es el estándar UIDL . El UIDL define las interfaces de usuario de forma abstracta , independiente de cualquier marco o incluso de la propia plataforma web. A partir del UIDL, puede convertir esa abstracción en diferentes tipos de codificación (por ejemplo, React, Vue, WebComponents, etc.).
Estos generadores de código son parte de un ecosistema más amplio, que estamos construyendo activamente en un esfuerzo por agilizar la creación de aplicaciones web. Puede leer más sobre nuestros inicios en este artículo.
La filosofía detrás de los generadores de código es:
React , también se puede construir con Vue o sobre el estándar de Web Components : admitimos múltiples objetivosLea más sobre el estándar UIDL.
La forma más sencilla de acceder al ecosistema de teletransporte es probar uno de los generadores de componentes preconfigurados:
npm install @teleporthq/teleport-component-generator-react
npm install @teleporthq/teleport-component-generator-vue
npm install @teleporthq/teleport-component-generator-angularo usando hilo:
yarn add @teleporthq/teleport-component-generator-react
yarn add @teleporthq/teleport-component-generator-vue
yarn add @teleporthq/teleport-component-generator-angularPara generar un componente simple, debe comenzar desde un componente UIDL :
{
"name" : " My First Component " ,
"node" : {
"type" : " element " ,
"content" : {
"elementType" : " text " ,
"children" : [
{
"type" : " static " ,
"content" : " Hello World! "
}
]
}
}
}Usar los generadores de componentes preconfigurados es tan fácil como llamar a una función así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 )La salida de la consola será algo como:
import React from 'react'
const MyFirstComponent = ( props ) => {
return < span > Hello World! < / span >
}
export default MyFirstComponentPara otros marcos, simplemente cambie el paquete:
import VueGenerator from '@teleporthq/teleport-component-generator-vue'
const uidl = { ... } // your sample here
const { files } = await VueGenerator . generateComponent ( uidl )
console . log ( files [ 0 ] . content )La salida de la consola será algo como:
< template >
< span >Hello World!</ span >
</ template >
< script >
export default {
name : ' MyFirstComponent ' ,
}
</ script >Puedes jugar con la estructura UIDL y también observar el código generado en el REPL en línea. Mientras esté allí, también puede consultar diferentes ejemplos de componentes escritos en formato UIDL.
El ecosistema de telepuerto consta de tres categorías principales de paquetes: generadores de componentes , generadores de proyectos y empaquetadores de proyectos .
Tenemos generadores de componentes oficiales para un par de marcos de interfaz web populares. Consulte los documentos oficiales para comprender en profundidad la arquitectura detrás de los generadores de componentes.
Todos los generadores de componentes exponen una instancia del paquete teleport-component-generator . También puedes instalar este paquete y crear tu propio generador con complementos, asignaciones y posprocesadores.
En los documentos, encontrará una guía completa sobre cómo crear su generador de componentes personalizado.
teleport-component-generator-react - con estilo: css-modules , styled-components , styled-jsx , etc.teleport-component-generator-vue : generación de archivos .vue estándarteleport-component-generator-angular : genera archivos .ts , .html y .cssteleport-component-generator-html - (experimental)teleport-component-generator-svelte - (próximamente) Aquí hay una lista de funcionalidades que UIDL y los generadores de componentes admiten en este momento, además de la capa de presentación obvia:
Los generadores de proyectos se basan en una entrada ProjectUIDL y en una estrategia de proyecto . El ProjectUIDL contendrá toda la información sobre enrutamiento, páginas, componentes y configuración global. La estrategia les dirá a los generadores dónde colocar cada archivo y qué generador de componentes usar.
Los generadores generarán una estructura abstracta con carpetas y archivos, sin escribir nada en el disco. El empaquetador de proyectos tiene la tarea de tomar el resultado de un generador de proyectos y publicarlo en algún lugar.
Consulte las guías oficiales sobre cómo utilizar un generador de proyectos existente o cómo crear su configuración personalizada.
teleport-project-generator-react - react + react-router y css-modules encima de create-react-appteleport-project-generator-next - basado en Next.jsteleport-project-generator-vue - con una estructura que comienza desde vue-cliteleport-project-generator-nuxt - basado en Nuxt.jsteleport-project-generator-angular - basado en angular-cliteleport-project-generator-html (experimental) Además de los archivos y carpetas habituales generados al final del proceso, los generadores de proyectos también se encargan de:
package.json .index.html o algo que sea específico del marco). Una vez que un generador creó el código para los componentes y las páginas, el empaquetador del proyecto tomará ese resultado, lo colocará encima de una plantilla de proyecto existente, agregará los activos locales necesarios y luego pasará el resultado completo a un editor . Los editores están especializados en implementar toda la estructura de carpetas en un tercero como vercel o github , o en crear un archivo zip en memoria o simplemente escribir la carpeta en disk .
teleport-publisher-vercelteleport-publisher-githubteleport-publisher-codesandboxteleport-publisher-zipteleport-publisher-diskteleport-publisher-netlify (próximamente)Algunos enlaces útiles para ponerte al día con todo el ecosistema de teletransporte :
Este proyecto utiliza:
Para darle un toque local, recomendamos usar yarn , ya que se integra mejor con lerna y todos los contribuyentes lo están usando:
yarn
Esto instala las dependencias en la carpeta raíz, pero también crea los enlaces simbólicos entre los módulos independientes dentro de la carpeta packages .
Para completar la configuración de lerna, debe ejecutar:
yarn build
Esto ejecutará la tarea build dentro de cada paquete individual, creando la carpeta lib de salida. Tenemos dos salidas para cada paquete: cjs (módulos de estilo js comunes) y esm (módulos es modernos). Si desea acelerar el tiempo de compilación, puede ejecutar simplemente build:cjs para evitar la compilación esm .
Ejecutando el conjunto de pruebas:
yarn test
yarn test:coverage
Además, hay un paquete private dentro de la carpeta lerna llamado teleport-test . Esos paquetes se pueden utilizar para probar el proceso de generación de código/archivo con cualquier tipo de proyecto/generador de componentes. Para poder darle una vuelta tendrás que:
cd packages/teleport-test
npm run standalone
La versión independiente utiliza el paquete teleport-code-generator y las plantillas declaradas estáticamente. Para probar con las plantillas de github y la instancia del empaquetador personalizado, debe:
cp config.example.json config.json
Tendrás que reemplazar el marcador de posición con tu propio token de github. Entonces puedes ejecutarlo con:
npm run packer
Esta versión del empaquetador utiliza los UIDL de examples/uidl-sample . Si el proceso se ejecuta correctamente, verá las respuestas del empaquetador del proyecto en el formato: { success: true, payload: 'dist' } . La tarea utiliza el paquete teleport-publisher-disk y genera cuatro archivos de proyecto diferentes en la carpeta dist .
Abra un problema por cualquier irregularidad, posible error que encuentre al ejecutar esto o si simplemente tiene alguna pregunta o curiosidad sobre este proyecto.
No es sólo nuestro código el que es de código abierto, también estamos planeando el desarrollo de los generadores de código en GitHub. Tenemos varios temas abiertos y esperamos más contribuciones al respecto.
Estamos especialmente interesados en abrir debates sobre los temas etiquetados con la etiqueta discussion .
El lanzamiento oficial será un cambio a la versión 1.0 . La ETA para esto es alrededor de finales de 2019.
Estaríamos muy felices de contar con la participación de la comunidad en este proyecto. Creemos firmemente en el poder del código abierto , por lo que estamos planeando crear los mejores generadores de código posibles, junto con toda la comunidad de desarrollo.
Visualizamos diferentes tipos de implicación a partir de este momento:
Gracias a estas maravillosas personas (tecla emoji):
Alex moldavo ? | Vlad Ničula ? | Pablo BRIE ? ? | mihaitaba ? | Mihai Serban | Jaya Krishna Namburu ? | Anamaría Oros |
ovidionut94 | alexpausan | Mihai Sampaleanu ? | udos | andreiTnu | Xavier Cazalot | Chavda Bhavik |
Eliza Nitoi | TudorCe ? | Dorottya Ferencz ? | Guillermo Gounot |
Este proyecto sigue la especificación de todos los contribuyentes. ¡Se aceptan aportes de cualquier tipo!
Comuníquese con nosotros en cualquiera de estos canales:
