teleport code generators
v0.36.6
Nous ne sommes pas loin de la première version officielle des générateurs de code, mais en attendant, gardez à l’esprit que certaines parties de l’écosystème sont expérimentales.
teleportHQ est une plate-forme low-code qui permet aux équipes de créer des applications via une interface d'outil de conception familière, en temps réel.
Ce référentiel contient les générateurs de code qui alimentent l'éditeur visuel de la plateforme.
Le ciment entre la plateforme et les générateurs de code est la norme UIDL . L' UIDL définit les interfaces utilisateur de manière abstraite , indépendante de tout framework ou même de la plateforme web elle-même. À partir de l'UIDL, vous pouvez convertir cette abstraction en différentes versions de codage (par exemple React, Vue, WebComponents, etc.).
Ces générateurs de code font partie d'un écosystème plus vaste, que nous construisons activement dans le but de rationaliser la création d'applications Web. Vous pouvez en savoir plus sur notre création dans cet article.
La philosophie derrière les générateurs de code est la suivante :
React peut également être construit avec Vue ou au-dessus du standard Web Components - nous prenons en charge plusieurs ciblesEn savoir plus sur la norme UIDL.
Le moyen le plus simple de se lancer dans l' écosystème de téléportation est d'essayer l'un des générateurs de composants préconfigurés :
npm install @teleporthq/teleport-component-generator-react
npm install @teleporthq/teleport-component-generator-vue
npm install @teleporthq/teleport-component-generator-angularou en utilisant du fil :
yarn add @teleporthq/teleport-component-generator-react
yarn add @teleporthq/teleport-component-generator-vue
yarn add @teleporthq/teleport-component-generator-angularPour générer un composant simple, il faut partir d'un composant UIDL :
{
"name" : " My First Component " ,
"node" : {
"type" : " element " ,
"content" : {
"elementType" : " text " ,
"children" : [
{
"type" : " static " ,
"content" : " Hello World! "
}
]
}
}
}Utiliser les générateurs de composants préconfigurés est aussi simple que d'appeler une fonction asynchrone :
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 sortie de la console ressemblera à ceci :
import React from 'react'
const MyFirstComponent = ( props ) => {
return < span > Hello World! < / span >
}
export default MyFirstComponentPour les autres frameworks, changez simplement de package :
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 sortie de la console ressemblera à ceci :
< template >
< span >Hello World!</ span >
</ template >
< script >
export default {
name : ' MyFirstComponent ' ,
}
</ script >Vous pouvez jouer avec la structure UIDL et également observer le code généré dans le REPL en ligne. Là-bas, vous pouvez également consulter différents exemples de composants écrits au format UIDL.
L'écosystème de téléportation se compose de trois catégories principales de packages : les générateurs de composants , les générateurs de projets et les packers de projets .
Nous disposons de générateurs de composants officiels pour quelques frameworks d'interface Web populaires. Consultez la documentation officielle pour une compréhension approfondie de l'architecture derrière les générateurs de composants.
Tous les générateurs de composants exposent une instance du package teleport-component-generator . Vous pouvez également installer ce package et créer votre propre générateur avec des plugins, des mappages et des postprocesseurs.
Dans la documentation, vous trouverez un guide complet sur la façon de créer votre générateur de composants personnalisé.
teleport-component-generator-react - avec style : css-modules , styled-components , styled-jsx , etc.teleport-component-generator-vue - génération de fichiers .vue standardteleport-component-generator-angular - génère des fichiers .ts , .html et .cssteleport-component-generator-html - (expérimental)teleport-component-generator-svelte - (à venir) Voici une liste des fonctionnalités que l'UIDL et les générateurs de composants prennent actuellement en charge, en plus de la couche de présentation évidente :
Les générateurs de projets s'appuient sur une entrée ProjectUIDL et sur une stratégie de projet . Le ProjectUIDL contiendra toutes les informations sur le routage, les pages, les composants et les paramètres globaux. La stratégie indiquera aux générateurs où placer chaque fichier et quel générateur de composants utiliser.
Les générateurs produiront une structure abstraite avec des dossiers et des fichiers, sans rien écrire sur le disque. Le packer de projet est chargé de prendre la sortie d'un générateur de projet et de la publier quelque part.
Consultez les guides officiels pour savoir comment utiliser un générateur de projet existant ou comment créer votre configuration personnalisée.
teleport-project-generator-react - react + react-router et css-modules au-dessus de create-react-appteleport-project-generator-next - basé sur Next.jsteleport-project-generator-vue - avec une structure partant de vue-cliteleport-project-generator-nuxt - basé sur Nuxt.jsteleport-project-generator-angular - basé sur angular-cliteleport-project-generator-html (expérimental) Outre les fichiers et dossiers habituels générés à la fin du processus, les générateurs de projets s'occupent également de :
package.json .index.html ou de quelque chose de spécifique au framework). Une fois qu'un générateur a créé le code pour les composants et les pages, le packer du projet prendra cette sortie, la placera au-dessus d'un modèle de projet existant, ajoutera tous les actifs locaux requis, puis transmettra l'intégralité du résultat à un éditeur . Les éditeurs sont spécialisés dans le déploiement de l'intégralité de la structure des dossiers vers un tiers comme vercel ou github , ou dans la création d'un fichier zip en mémoire ou simplement dans l'écriture du dossier sur disk .
teleport-publisher-vercelteleport-publisher-githubteleport-publisher-codesandboxteleport-publisher-zipteleport-publisher-diskteleport-publisher-netlify (à venir)Quelques liens utiles pour vous familiariser avec l'ensemble de l'écosystème de téléportation :
Ce projet utilise :
Afin de lui donner une touche locale, nous vous recommandons d'utiliser yarn , car il s'intègre mieux à lerna et tous les contributeurs l'utilisent :
yarn
Cela installe les dépendances dans le dossier racine, mais crée également les liens symboliques entre les modules indépendants à l'intérieur du dossier packages .
Pour terminer la configuration de Lerna, vous devez exécuter :
yarn build
Cela exécutera la tâche build dans chaque package individuel, créant le dossier lib de sortie. Nous avons deux sorties pour chaque package : cjs – modules de style js communs et esm – modules es modernes. Si vous souhaitez accélérer votre temps de construction, vous pouvez simplement exécuter build:cjs pour éviter la construction esm .
Exécution de la suite de tests :
yarn test
yarn test:coverage
De plus, il existe un package private dans le dossier lerna appelé teleport-test . Ces packages peuvent être utilisés pour tester le processus de génération de code/fichier avec n'importe quelle version de générateur de projet/composant. Afin de lui donner un tour, vous devrez :
cd packages/teleport-test
npm run standalone
La version autonome utilise le package teleport-code-generator et les modèles déclarés statiquement. Pour tester avec les modèles github et l'instance du packer personnalisé, vous devez :
cp config.example.json config.json
Vous devrez remplacer l'espace réservé par votre propre jeton github. Ensuite, vous pouvez l'exécuter avec :
npm run packer
Cette version du packer utilise les UIDL de examples/uidl-sample . Si le processus s'exécute correctement, vous verrez les réponses du packer du projet au format : { success: true, payload: 'dist' } . La tâche utilise le package teleport-publisher-disk et génère quatre fichiers de projet différents dans le dossier dist .
Veuillez ouvrir un problème pour toute irrégularité, bug potentiel que vous trouvez lors de l'exécution de ce projet, ou si vous avez simplement des questions ou des curiosités sur ce projet.
Il n'y a pas que notre code qui est open source, nous prévoyons également le développement des générateurs de code sur GitHub. Nous avons un certain nombre de questions ouvertes et nous attendons d'autres contributions à ce sujet.
Nous sommes particulièrement intéressés par l'ouverture de discussions autour des problèmes marqués du label discussion .
La sortie officielle sera un passage à la version 1.0 . L’ETA pour cela est vers la fin de 2019.
Nous serions très heureux d'avoir une implication de la communauté autour de ce projet. Nous croyons fermement au pouvoir de l'open source , c'est pourquoi nous prévoyons de créer les meilleurs générateurs de code possibles, en collaboration avec l'ensemble de la communauté de développement.
Nous envisageons désormais différents types d’implication :
Merci à ces personnes merveilleuses (clé emoji) :
Alex Moldave ? | Vlad Nikula ? | Paul BRIE ? ? | mihaitaba ? | Mihai Serban | Jaya Krishna Namburu ? | Anamaria Oros |
ovidionut94 | alexpausan | Mihai Sampaleanu ? | Udeux | AndreiTnu | Xavier Cazalot | Chavda Bhavik |
Eliza Nitoi | TudorCe ? | Dorottya Ferencz ? | William Gounot |
Ce projet suit la spécification de tous les contributeurs. Les contributions de toute nature sont les bienvenues !
Contactez-nous sur l'un de ces canaux :
