teleport code generators
v0.36.6
Wir sind nicht mehr weit von der ersten offiziellen Version der Codegeneratoren entfernt, aber bedenken Sie, dass einige Teile des Ökosystems experimentell sind.
teleportHQ ist eine Low-Code-Plattform, die es Teams ermöglicht, Anwendungen über eine vertraute Design-Tool-Schnittstelle in Echtzeit zu erstellen.
Dieses Repository enthält die Codegeneratoren, die den visuellen Editor der Plattform unterstützen.
Das Bindeglied zwischen der Plattform und den Codegeneratoren ist der UIDL-Standard . Die UIDL definiert die Benutzeroberflächen auf abstrakte Weise, unabhängig von einem Framework oder sogar der Webplattform selbst. Ausgehend von der UIDL können Sie diese Abstraktion in verschiedene Codierungsvarianten umwandeln (z. B. React, Vue, WebComponents usw.).
Diese Codegeneratoren sind Teil eines größeren Ökosystems, das wir aktiv aufbauen, um die Erstellung von Webanwendungen zu optimieren. Mehr über unsere Gründung erfahren Sie in diesem Artikel.
Die Philosophie hinter den Codegeneratoren ist:
React erstellt werden kann, kann auch mit Vue oder auf Basis des Web Components Standards erstellt werden – wir unterstützen mehrere ZieleLesen Sie mehr über den UIDL-Standard.
Der einfachste Weg, in das Teleport-Ökosystem einzusteigen, besteht darin, einen der vorkonfigurierten Komponentengeneratoren auszuprobieren:
npm install @teleporthq/teleport-component-generator-react
npm install @teleporthq/teleport-component-generator-vue
npm install @teleporthq/teleport-component-generator-angularoder mit Garn:
yarn add @teleporthq/teleport-component-generator-react
yarn add @teleporthq/teleport-component-generator-vue
yarn add @teleporthq/teleport-component-generator-angularUm eine einfache Komponente zu generieren, müssen Sie von einer Komponenten-UIDL ausgehen:
{
"name" : " My First Component " ,
"node" : {
"type" : " element " ,
"content" : {
"elementType" : " text " ,
"children" : [
{
"type" : " static " ,
"content" : " Hello World! "
}
]
}
}
}Die Verwendung der vorkonfigurierten Komponentengeneratoren ist so einfach wie der Aufruf einer asynchronen Funktion:
import ReactGenerator from '@teleporthq/teleport-component-generator-react'
const uidl = { ... } // your sample here
const { files } = await ReactGenerator . generateComponent ( uidl )
console . log ( files [ 0 ] . content )Die Konsolenausgabe sieht etwa so aus:
import React from 'react'
const MyFirstComponent = ( props ) => {
return < span > Hello World! < / span >
}
export default MyFirstComponentFür andere Frameworks wechseln Sie einfach das Paket:
import VueGenerator from '@teleporthq/teleport-component-generator-vue'
const uidl = { ... } // your sample here
const { files } = await VueGenerator . generateComponent ( uidl )
console . log ( files [ 0 ] . content )Die Konsolenausgabe sieht etwa so aus:
< template >
< span >Hello World!</ span >
</ template >
< script >
export default {
name : ' MyFirstComponent ' ,
}
</ script >Sie können mit der UIDL-Struktur spielen und auch den generierten Code in der Online-REPL beobachten. Dort können Sie sich auch verschiedene Beispiele von Komponenten ansehen, die im UIDL-Format geschrieben sind.
Das Teleport-Ökosystem besteht aus drei Hauptkategorien von Paketen: Komponentengeneratoren , Projektgeneratoren und Projektpacker .
Wir haben offizielle Komponentengeneratoren für einige beliebte Web-Frontend-Frameworks. Schauen Sie sich die offiziellen Dokumente an, um ein detailliertes Verständnis der Architektur hinter den Komponentengeneratoren zu erhalten.
Alle Komponentengeneratoren stellen eine Instanz des Pakets teleport-component-generator bereit. Sie können dieses Paket auch installieren und Ihren eigenen Generator mit Plugins, Mappings und Postprozessoren erstellen.
In den Dokumenten finden Sie eine vollständige Anleitung zum Erstellen Ihres benutzerdefinierten Komponentengenerators.
teleport-component-generator-react – mit Styling: css-modules , styled-components , styled-jsx usw.teleport-component-generator-vue – Generieren von Standard .vue Dateienteleport-component-generator-angular – generiert .ts , .html und .css Dateienteleport-component-generator-html – (experimentell)teleport-component-generator-svelte – (bald verfügbar) Hier ist eine Liste der Funktionalitäten, die neben der offensichtlichen Präsentationsebene derzeit von der UIDL und den Komponentengeneratoren unterstützt werden:
Projektgeneratoren basieren auf einer ProjectUIDL Eingabe und einer Projektstrategie . Die ProjectUIDL enthält alle Informationen zu Routing, Seiten, Komponenten und globalen Einstellungen. Die Strategie teilt den Generatoren mit, wo die einzelnen Dateien abgelegt werden sollen und welcher Komponentengenerator verwendet werden soll.
Die Generatoren geben eine abstrakte Struktur mit Ordnern und Dateien aus, ohne etwas auf die Festplatte zu schreiben. Der Projektpacker hat die Aufgabe, die Ausgabe eines Projektgenerators zu übernehmen und irgendwo zu veröffentlichen.
Sehen Sie sich die offiziellen Anleitungen an, um zu erfahren, wie Sie einen vorhandenen Projektgenerator verwenden oder Ihre benutzerdefinierte Konfiguration erstellen
teleport-project-generator-react – react + react-router und css-modules zusätzlich zur create-react-appteleport-project-generator-next – basierend auf Next.jsteleport-project-generator-vue – mit einer Struktur ausgehend von der vue-cliteleport-project-generator-nuxt – basierend auf Nuxt.jsteleport-project-generator-angular – basierend auf dem angular-cliteleport-project-generator-html (experimentell) Neben den regulären Dateien und Ordnern, die am Ende des Prozesses generiert werden, kümmern sich Projektgeneratoren auch um Folgendes:
package.json hinzufügen.index.html oder etwas Framework-spezifisches sein). Sobald ein Generator den Code für die Komponenten und Seiten erstellt hat, übernimmt der Projektpacker diese Ausgabe, legt sie über eine vorhandene Projektvorlage , fügt alle erforderlichen lokalen Assets hinzu und übergibt dann das gesamte Ergebnis an einen Herausgeber . Die Herausgeber sind darauf spezialisiert, die gesamte Ordnerstruktur einem Drittanbieter wie vercel oder github bereitzustellen, eine In-Memory zip Datei zu erstellen oder den Ordner einfach auf die disk zu schreiben.
teleport-publisher-vercelteleport-publisher-githubteleport-publisher-codesandboxteleport-publisher-zipteleport-publisher-diskteleport-publisher-netlify (bald verfügbar)Ein paar nützliche Links, um Sie mit dem gesamten Teleport- Ökosystem vertraut zu machen:
Dieses Projekt verwendet:
Um es lokal auszuprobieren, empfehlen wir die Verwendung yarn , da es sich besser in lerna integrieren lässt und alle Mitwirkenden es verwenden:
yarn
Dadurch werden die Abhängigkeiten im Stammordner installiert, aber auch die Symlinks zwischen den unabhängigen Modulen im packages erstellt.
Um das Lerna-Setup abzuschließen, müssen Sie Folgendes ausführen:
yarn build
Dadurch wird die build -Aufgabe in jedem einzelnen Paket ausgeführt und der Ausgabeordner lib erstellt. Wir haben zwei Ausgaben für jedes Paket: cjs – allgemeine Module im js-Stil und esm – moderne es-Module. Wenn Sie Ihre Build-Zeit verkürzen möchten, können Sie einfach build:cjs ausführen, um den esm Build zu vermeiden.
Ausführen der Testsuite:
yarn test
yarn test:coverage
Darüber hinaus gibt es im Lerna-Ordner ein private Paket namens teleport-test . Diese Pakete können verwendet werden, um den Code-/Dateigenerierungsprozess mit jeder Art von Projekt-/Komponentengenerator zu testen . Um es auszuprobieren, müssen Sie:
cd packages/teleport-test
npm run standalone
Die Standalone-Version nutzt das teleport-code-generator Paket und die statisch deklarierten Vorlagen. Um mit den Github-Vorlagen und der benutzerdefinierten Packer-Instanz zu testen, müssen Sie Folgendes tun:
cp config.example.json config.json
Sie müssen den Platzhalter durch Ihr eigenes Github-Token ersetzen. Dann können Sie es ausführen mit:
npm run packer
Diese Version des Packers verwendet die UIDLs aus examples/uidl-sample . Wenn der Prozess erfolgreich ausgeführt wird, sehen Sie die Antworten des Projektpackers im Format: { success: true, payload: 'dist' } . Die Aufgabe verwendet das Paket teleport-publisher-disk und generiert vier verschiedene Projektdateien im dist -Ordner.
Bitte öffnen Sie ein Problem, wenn Sie bei der Ausführung dieses Projekts auf Unregelmäßigkeiten oder potenzielle Fehler stoßen oder wenn Sie einfach Fragen oder Neugierde zu diesem Projekt haben.
Nicht nur unser Code ist Open Source, wir planen auch die Entwicklung der Codegeneratoren auf GitHub. Wir haben eine Reihe offener Themen und erwarten weitere Beiträge dazu.
Wir sind besonders daran interessiert, Diskussionen zu den Themen zu eröffnen, die mit dem discussion gekennzeichnet sind.
Die offizielle Veröffentlichung wird ein Wechsel zur Version 1.0 sein. Der voraussichtliche Zeitpunkt hierfür ist etwa Ende 2019.
Wir würden uns sehr über die Beteiligung der Gemeinschaft an diesem Projekt freuen. Wir glauben fest an die Leistungsfähigkeit von Open Source und planen daher, gemeinsam mit der gesamten Entwicklergemeinschaft die bestmöglichen Codegeneratoren zu entwickeln.
Ab diesem Zeitpunkt stellen wir uns verschiedene Arten der Beteiligung vor:
Der Dank geht an diese wunderbaren Menschen (Emoji-Taste):
Alex Moldovan ? | Vlad Nicula ? | Paul BRIE ? ? | mihaitaba ? | Mihai Serban | Jaya Krishna Namburu ? | Anamaria Oros |
ovidiuionut94 | alexausan | Mihai Sampaleanu ? | Utwo | andreiTnu | Xavier Cazalot | Chavda Bhavik |
Eliza Nitoi | TudorCe ? | Dorottya Ferencz ? | William Gounot |
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art willkommen!
Kontaktieren Sie uns über einen dieser Kanäle:
