made with teleporthq
New Release: Code Generators v0.9
Alex Moldovan
Apr 5Code Generation

New Release: Code Generators v0.9

We’re excited to report major progress on the teleportHQ code generation libraries! In this new release, we've added new component and project generators for: angular, preact and stencil.

Give it a spin at:  https://repl.teleporthq.io/

Give it a spin at: https://repl.teleporthq.io/

For some months before v0.9, we were busy working on the underlying infrastructure and architecture for the ecosystem. First we split the packages on npm with a lerna monorepo setup in v0.7. We then worked at providing generic functionalities for component and project generators in v0.8. With these changes, we enable developers to customize, configure and extend existing packages.

With this model behind, we’re happy to announce the new official component generators:

• teleport-component-generator-angular• teleport-component-generator-preact• teleport-component-generator-stencil

These new packages add up to our extensive ecosystem of plugins, component and project generators.

Angular

When it comes to enterprise application development and not only, Angular is one of the most popular solutions out there. Angular components are usually made up of 3 separate files: the template HTML, the TypeScript class component and the CSS file. Building Angular components was an interesting task. We ended mixing functionalities we had from the Vue and Stencil component generators. We’re currently working on a solution to have a project generator based on Angular components.

Preact

When you don’t need the full power of React, Preact.js comes as a super small (3Kb gzipped lib) alternative for modern web application. Preact works great especially when keeping a minimal bundle size is crucial. Starting from the React plugin system, building Preact components was pretty easy. On top of that, we added a Preact-based project generator, which starts from the template offered by the 'preact-cli'.

Stencil

Web Components are great as they offer native support for encapsulation, local state and scoped styling. Stencil.js is one of the most popular solutions for compiling down to web components. Stencil offers a great developer experience with: JSX syntax, TypeScript and scoped CSS.

If you want to experiment with the new generators, head over to the online REPL or check out the docs for a quick local setup based on the npm packages.

What's next

We have v0.10 on the horizon. This release will expand our ecosystem with the React Native component and project generators. We’re also working on adding new publishers for the existing project generators. Finally, we are exploring the generation of component systems based on the UIDL structure.