Home

Awesome

<p align="center"> <img src="https://github.com/teleporthq/teleport-code-generators/blob/development/Default.png" width="250"/> </p> <h2 align="center">Code Generators v0.21.12 - Beta!</h2> <h3 align="center"> <a href="#what">What</a> <span> · </span> <a href="#quick-setup">Quick Setup</a> <span> · </span> <a href="#ecosystem">Ecosystem</a> <span> · </span> <a href="https://docs.teleporthq.io" target="_blank">Documentation</a> <span> · </span> <a href="#development">Development</a> <span> · </span> <a href="#planning">Planning</a> <span> · </span> <a href="#contributions">Contributions</a> </h3> <p align="center"> <a target="_blank" href="https://www.npmjs.com/package/@teleporthq/teleport-component-generator"><img src="https://img.shields.io/npm/v/@teleporthq/teleport-component-generator.svg" /></a> <a target="_blank" href="https://discord.gg/5pfSVWJzzX"><img src="https://img.shields.io/badge/chat-on%20discord-7289DA.svg" alt="Discord Chat" /></a> <a target="_blank" href="https://github.com/teleporthq/teleport-code-generators/actions/workflows/publish.yml"><img src="https://github.com/teleporthq/teleport-code-generators/actions/workflows/publish.yml/badge.svg" /></a> <a target="_blank" href="https://codecov.io/gh/teleporthq/teleport-code-generators"><img src="https://codecov.io/gh/teleporthq/teleport-code-generators/branch/development/graph/badge.svg" /></a> <a target="_blank" href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg" /></a> <img src="https://img.shields.io/npm/l/@teleporthq/teleport-code-generators.svg" /> <a target="_blank" href="https://twitter.com/teleporthqio"><img src="https://img.shields.io/twitter/follow/teleporthqio.svg" /></a> </p>

We are not far from the first official version of the code generators, but meanwhile, keep in mind that some of the parts of the ecosystem are experimental.

<h2 id="what">🤔 What is this?</h2>

teleportHQ is a low-code platform that enables teams to build applications via a familiar design tool interface, in real-time.

This repository holds the code generators that power the visual editor of the platform.

https://user-images.githubusercontent.com/3997538/123211638-63efaa00-d4cc-11eb-90b1-49bd61a95732.mp4

The glue between the platform and the code generators is the UIDL Standard. The UIDL defines the user interfaces in an abstract way, independent of any framework or even the web platform itself. Starting from the UIDL, you can convert that abstraction into different flavors of coding (e.g. React, Vue, WebComponents etc.).

These code generators are part of a larger ecosystem, which we're actively building in an effort to streamline the creation of web applications. You can read more about our inception in this article.

The philosophy behind the code generators is:

Read more about the UIDL Standard.

<h2 id="quick-setup">🚀 Quick Setup</h2>

The easiest way to jump into the teleport ecosystem is to try out one of the pre-configured component generators:

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

or using yarn:

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

For generating a simple component, you have to start from a component UIDL:

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

Using the pre-configured component generators is as easy as calling an async function:

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

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

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

The console output will be something like:

import React from 'react'

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

export default MyFirstComponent

For other frameworks, just switch the 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)

The console output will be something like:

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

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

You can play with the UIDL structure and also observe the generated code in the online REPL. While there, can also check different examples of components written in the UIDL format.

<h2 id="ecosystem">🌍 Ecosystem</h2>

The teleport ecosystem consists of three main categories of packages: component generators, project generators and project packers.

Component Generators

We have official component generators for a couple of popular web frontend frameworks. Check out the official docs for an in depth understanding of the architecture behind the component generators.

All the component generators are exposing an instance of the teleport-component-generator package. You can also install this package and build your own generator with plugins, mappings and postprocessors.

In the docs, you'll find a complete guide on how to build your custom component generator.

Flavors

Capabilities

Here's a list of functionalities that the UIDL and the component generators are supporting at the moment, besides the obvious presentational layer:

Project Generators

Project generators rely on a ProjectUIDL input and on a project strategy. The ProjectUIDL will contain all the information about routing, pages, components and global settings. The strategy will tell the generators where to put each file and which component generator to use.

The generators will output an abstract structure with folders and files, without writing anything to disk. The project packer is tasked with taking the output of a project generator and publishing it somewhere.

Check the official guides on how to use an existing project generator or how to create your custom configuration

Flavors

Capabilities

Besides the regular files and folders generated at the end of the process, project generators are also taking care of:

Project Packers

Once a generator created the code for the components and pages, the project packer will take that output, put it on top of an existing project template, add any local assets required and then will pass the entire result to a publisher. The publishers are specialized in deploying the entire folder structure to a 3rd party like vercel or github, or in creating an in-memory zip file or simply writing the folder to disk.

Publishers

Further Reading

A few useful links to get you up to speed with the entire teleport ecosystem:

<h2 id="development">💻 Development</h2>

This project uses:

In order to give it a spin locally, we recommend using yarn, as it integrates better with lerna and all the contributors are using it:

yarn

This installs the dependencies in the root folder, but also creates the symlinks between the independent modules inside the packages folder.

To complete the lerna setup, you need to run:

yarn build

This will run the build task inside each individual package, creating the output lib folder. We have two outputs for each package: cjs - common js style modules and esm - modern es modules. If you want to speed up your build time, you can run just build:cjs to avoid the esm build.

Running the test suite:

yarn test
yarn test:coverage

Furthermore, there's a private package inside the lerna folder called teleport-test. That packages can be used to test the code/file generation process with any flavor of project/component generator. In order to give it a spin you will have to:

cd packages/teleport-test
npm run standalone

The standalone version uses the teleport-code-generator package and the statically declared templates. To test with the github templates and the custom packer instance, you have to:

cp config.example.json config.json

You will have to replace the placeholder with your own github token. Then you can run it with:

npm run packer

This version of the packer uses the UIDLs from the examples/uidl-sample. If the process runs successfully, you will see the responoses from the project packer in the format: { success: true, payload: 'dist' }. The task uses the teleport-publisher-disk package and generates four different project files in the dist folder.

Please open an issue for any irregularity, potential bug that you find while running this, or if you simply have any questions or curiosities about this project.

<h2 id="planning">🤖 Planning</h2>

It's not just our code that's open source, we're also planning the development of the code generators on GitHub. We have a number of issues opened and we expect further contributions on this.

We're especially interested in opening discussions around the issues tagged with the discussion label.

Official Release

The official release will be a switch to version 1.0. ETA for this is around the end of 2019.

<h2 id="contributions">💕 Contributions</h2>

We'd be super happy to have community involvement around this project. We strongly believe in the power of open source, so we're planning on building the best possible code generators, together with the entire development community.

We envision different types of involvement from this point on:

Thanks goes to these wonderful people (emoji key):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="14.28%"><a href="https://medium.com/@alexnm"><img src="https://avatars0.githubusercontent.com/u/9945366?v=4?s=100" width="100px;" alt="Alex Moldovan"/><br /><sub><b>Alex Moldovan</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/commits?author=alexnm" title="Code">💻</a> <a href="https://github.com/teleporthq/teleport-code-generators/commits?author=alexnm" title="Documentation">📖</a> <a href="#ideas-alexnm" title="Ideas, Planning, & Feedback">🤔</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/vladnicula"><img src="https://avatars3.githubusercontent.com/u/126038?v=4?s=100" width="100px;" alt="Vlad Nicula"/><br /><sub><b>Vlad Nicula</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/commits?author=vladnicula" title="Code">💻</a> <a href="#ideas-vladnicula" title="Ideas, Planning, & Feedback">🤔</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/paulbrie"><img src="https://avatars2.githubusercontent.com/u/3997538?v=4?s=100" width="100px;" alt="Paul BRIE"/><br /><sub><b>Paul BRIE</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/issues?q=author%3Apaulbrie" title="Bug reports">🐛</a> <a href="https://github.com/teleporthq/teleport-code-generators/commits?author=paulbrie" title="Documentation">📖</a> <a href="#ideas-paulbrie" title="Ideas, Planning, & Feedback">🤔</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/mihaitaba"><img src="https://avatars3.githubusercontent.com/u/45386599?v=4?s=100" width="100px;" alt="mihaitaba"/><br /><sub><b>mihaitaba</b></sub></a><br /><a href="#design-mihaitaba" title="Design">🎨</a> <a href="https://github.com/teleporthq/teleport-code-generators/commits?author=mihaitaba" title="Documentation">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/mihaiserban"><img src="https://avatars2.githubusercontent.com/u/3420526?v=4?s=100" width="100px;" alt="Mihai Serban"/><br /><sub><b>Mihai Serban</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/commits?author=mihaiserban" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://twitter.com/askjkrishna"><img src="https://avatars0.githubusercontent.com/u/11075561?v=4?s=100" width="100px;" alt="Jaya Krishna Namburu"/><br /><sub><b>Jaya Krishna Namburu</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/commits?author=JayaKrishnaNamburu" title="Code">💻</a> <a href="https://github.com/teleporthq/teleport-code-generators/issues?q=author%3AJayaKrishnaNamburu" title="Bug reports">🐛</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/anamariaoros"><img src="https://avatars0.githubusercontent.com/u/17590608?v=4?s=100" width="100px;" alt="Anamaria Oros"/><br /><sub><b>Anamaria Oros</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/commits?author=anamariaoros" title="Code">💻</a></td> </tr> <tr> <td align="center" valign="top" width="14.28%"><a href="https://github.com/ovidiuionut94"><img src="https://avatars3.githubusercontent.com/u/11486739?v=4?s=100" width="100px;" alt="ovidiuionut94"/><br /><sub><b>ovidiuionut94</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/commits?author=ovidiuionut94" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/alexpausan"><img src="https://avatars0.githubusercontent.com/u/3284064?v=4?s=100" width="100px;" alt="alexpausan"/><br /><sub><b>alexpausan</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/commits?author=alexpausan" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/mihaisampaleanu"><img src="https://avatars1.githubusercontent.com/u/6763756?v=4?s=100" width="100px;" alt="Mihai Sampaleanu"/><br /><sub><b>Mihai Sampaleanu</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/commits?author=mihaisampaleanu" title="Code">💻</a> <a href="https://github.com/teleporthq/teleport-code-generators/issues?q=author%3Amihaisampaleanu" title="Bug reports">🐛</a></td> <td align="center" valign="top" width="14.28%"><a href="http://utwo.ro"><img src="https://avatars1.githubusercontent.com/u/282668?v=4?s=100" width="100px;" alt="Utwo"/><br /><sub><b>Utwo</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/commits?author=Utwo" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/andreiTnu"><img src="https://avatars1.githubusercontent.com/u/51601382?v=4?s=100" width="100px;" alt="andreiTnu"/><br /><sub><b>andreiTnu</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/commits?author=andreiTnu" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://codepen.io/xavxyz"><img src="https://avatars0.githubusercontent.com/u/13962779?v=4?s=100" width="100px;" alt="Xavier Cazalot"/><br /><sub><b>Xavier Cazalot</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/commits?author=xavxyz" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/chavda-bhavik"><img src="https://avatars.githubusercontent.com/u/50201755?v=4?s=100" width="100px;" alt="Chavda Bhavik"/><br /><sub><b>Chavda Bhavik</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/commits?author=chavda-bhavik" title="Code">💻</a></td> </tr> <tr> <td align="center" valign="top" width="14.28%"><a href="https://github.com/elizamaria"><img src="https://avatars.githubusercontent.com/u/15130574?v=4?s=100" width="100px;" alt="Eliza Nitoi"/><br /><sub><b>Eliza Nitoi</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/commits?author=elizamaria" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/TudorCe"><img src="https://avatars.githubusercontent.com/u/101194278?v=4?s=100" width="100px;" alt="TudorCe"/><br /><sub><b>TudorCe</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/issues?q=author%3ATudorCe" title="Bug reports">🐛</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/retyidoro"><img src="https://avatars.githubusercontent.com/u/22962260?v=4?s=100" width="100px;" alt="Dorottya Ferencz"/><br /><sub><b>Dorottya Ferencz</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/issues?q=author%3Aretyidoro" title="Bug reports">🐛</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/vylly"><img src="https://avatars.githubusercontent.com/u/26410594?v=4?s=100" width="100px;" alt="William Gounot"/><br /><sub><b>William Gounot</b></sub></a><br /><a href="https://github.com/teleporthq/teleport-code-generators/commits?author=vylly" title="Code">💻</a></td> </tr> </tbody> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the all-contributors specification. Contributions of any kind welcome!

<h2 id="contact">✍️ Contact</h2>

Reach out to us on any of these channels: