Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/teleporthq/teleport-code-generators

A collection of code generators for modern JavaScript applications
https://github.com/teleporthq/teleport-code-generators

angular codegeneration preact reactjs reactnative stenciljs uidl vuejs

Last synced: about 1 month ago
JSON representation

A collection of code generators for modern JavaScript applications

Awesome Lists containing this project

README 

        


  




Code Generators v0.21.12 - Beta!





  What

   · 

  Quick Setup

   · 

  Ecosystem

   · 

  Documentation

   · 

  Development

   · 

  Planning

   · 

  Contributions






  

  Discord Chat

  

  

  

  

  




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.



🤔 What is this?



[teleportHQ](https://teleporthq.io/?ref=github) 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](https://play.teleporthq.io/?ref=github) 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**](https://docs.teleporthq.io/uidl/?ref=github). 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](https://teleporthq.io/blog-we-believe-in-ai-powered-code-generation).



The philosophy behind the code generators is:

* User interfaces are decomposed into **components**, hence the focus on component generation

* What can be built with `React`, can also be built with `Vue` or on top of the `Web Components` standard - we support multiple targets

* A project built with the visual editor should have a **high standard of quality** (performance, security, accessibility included)

* Generated **code quality** should be as high as possible, so that any developer could pick up the work from there on and enhance the project

* The code generation architecture is open and extendable, we invite everyone to contribute!



Read more about the [UIDL Standard](https://docs.teleporthq.io/uidl/).



🚀 Quick Setup



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

```bash

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

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

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

```

or using yarn:

```bash

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**:



```json

{

  "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:



```javascript

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:

```javascript

import React from 'react'



const MyFirstComponent = (props) => {

  return Hello World!

}



export default MyFirstComponent

```



For other frameworks, just switch the package:

```javascript

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:

```vue



  Hello World!



export default {

  name: 'MyFirstComponent',

}



```



You can play with the UIDL structure and also observe the generated code in [the online REPL](https://repl.teleporthq.io/). While there, can also check different examples of components written in the UIDL format.



🌍 Ecosystem



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](https://docs.teleporthq.io/component-generators/flavors.html). Check out the [official docs](https://docs.teleporthq.io/component-generators/) 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](https://docs.teleporthq.io/component-generators/plugins.html), [mappings](https://docs.teleporthq.io/component-generators/mappings.html) and [postprocessors](https://docs.teleporthq.io/component-generators/post-processors.html).



In the docs, you'll find a complete guide on how to [build your custom component generator](https://docs.teleporthq.io/guides/custom-component-generator.html).



#### Flavors

* `teleport-component-generator-react` - with styling: `css-modules`, `styled-components`, `styled-jsx`, etc.

* `teleport-component-generator-vue` - generating standard `.vue` files

* `teleport-component-generator-angular` - generates `.ts`, `.html` and `.css` files

* `teleport-component-generator-html` - (experimental)

* `teleport-component-generator-svelte` - (coming soon)



#### Capabilities

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

*  Dynamic values (props, state) inside html nodes or at attribute level

*  Type definitions for component props (PropTypes in React, props in Vue)

*  External dependencies definition

*  Simple component state (using hooks in React, component instance in Vue)

*  Event Handlers (related to state changes)

*  Repeat structures (.map in React, v-for in Vue)

*  Support for slots



### 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](https://docs.teleporthq.io/guides/generate-your-first-project.html) or [how to create your custom configuration](https://docs.teleporthq.io/guides/customize-your-project-generator.html)



#### Flavors

* `teleport-project-generator-react` - `react` + `react-router` and `css-modules` on top of `create-react-app`

* `teleport-project-generator-next` - based on [Next.js](https://nextjs.org/)

* `teleport-project-generator-vue` - with a structure starting from the `vue-cli`

* `teleport-project-generator-nuxt` - based on [Nuxt.js](https://nuxtjs.org/)

* `teleport-project-generator-angular` - based on the `angular-cli`

* `teleport-project-generator-html` (experimental)



#### Capabilities

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

* Support for global settings, meta tags, style, scripts, etc.

* Extracting all external dependencies and adding them to the `package.json`.

* Creating the entry point for each application (it can be an `index.html` or something that is framework specific).

* Creating a routing file for the client routes of the project.

* Generating a web manifest for PWA support.



### 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

* `teleport-publisher-vercel`

* `teleport-publisher-github`

* `teleport-publisher-codesandbox`

* `teleport-publisher-zip`

* `teleport-publisher-disk`

* `teleport-publisher-netlify` (coming soon)



### Further Reading

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

* [Full Documentation](https://docs.teleporthq.io/)

* [Component](https://docs.teleporthq.io/uidl-schema/v1/component.json) and [Project](https://docs.teleporthq.io/uidl-schema/v1/project.json) JSON Schemas

* [Online REPL](https://repl.teleporthq.io/)



💻 Development



This project uses:

* [TypeScript](https://www.typescriptlang.org/) for type safety and easy refactoring

* [lerna](https://github.com/lerna/lerna) for managing the monorepo with multiple npm packages

* [jest](https://jestjs.io/) for all types of tests and for calculating the code coverage



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](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line).

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](https://github.com/teleporthq/teleport-code-generators/issues) for any irregularity, potential bug that you find while running this, or if you simply have any questions or curiosities about this project.



🤖 Planning



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](https://github.com/teleporthq/teleport-code-generators/issues) opened and we expect further contributions on this.



We're especially interested in opening discussions around the issues tagged with the [`discussion`](https://github.com/teleporthq/teleport-code-generators/issues?q=is%3Aissue+is%3Aopen+label%3Adiscussion) label.



### Official Release

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



💕 Contributions



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:

* Trying out the generators and reporting back any bugs and potential points of improvement

* Contributing to the existing issues, either on the core modules or on the existing generators and plugins

* Exploring and building new plugins for the existing generators

* Exploring and building new generators based on the existing architecture



Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):



  

    

      Alex Moldovan
Alex Moldovan
💻 📖 🤔

      Vlad Nicula
Vlad Nicula
💻 🤔

      Paul BRIE
Paul BRIE
🐛 📖 🤔

      mihaitaba
mihaitaba
🎨 📖

      Mihai Serban
Mihai Serban
💻

      Jaya Krishna Namburu
Jaya Krishna Namburu
💻 🐛

      Anamaria Oros
Anamaria Oros
💻

    

    

      ovidiuionut94
ovidiuionut94
💻

      alexpausan
alexpausan
💻

      Mihai Sampaleanu
Mihai Sampaleanu
💻 🐛

      Utwo
Utwo
💻

      andreiTnu
andreiTnu
💻

      Xavier Cazalot
Xavier Cazalot
💻

      Chavda Bhavik
Chavda Bhavik
💻

    

    

      Eliza Nitoi
Eliza Nitoi
💻

      TudorCe
TudorCe
🐛

      Dorottya Ferencz
Dorottya Ferencz
🐛

      William Gounot
William Gounot
💻

    

  



This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!



✍️ Contact



Reach out to us on any of these channels:

* 📧 [Write an Email](mailto:[email protected])

* 💻 [Discord](https://discord.gg/5pfSVWJzzX)

* 🐦 [Drop a message on twitter](https://twitter.com/teleporthqio)

* ℹ️ [Website](https://teleporthq.io/)