@teleporthq/teleport-component-generator-vue

• support new Lottie element for React, Next, Vue, Nuxt, Angular and HTML by @elizamaria
• support setting nested URLs for pages by @vylly
• hotfix on component folder path generation for nested url usage by @vylly in https://github.com/teleporthq/teleport-code-generators/pull/727

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.23.5...v0.23.6

• Update craco version by @TudorCe in https://github.com/teleporthq/teleport-code-generators/pull/715
• docs: add TudorCe as a contributor for bug by @allcontributors in https://github.com/teleporthq/teleport-code-generators/pull/718
• Fix missing meta tags issue for HTML generated pages by @retyidoro in https://github.com/teleporthq/teleport-code-generators/pull/719
• docs: add retyidoro as a contributor for bug by @allcontributors in https://github.com/teleporthq/teleport-code-generators/pull/721
• Feat/html node: Handle code embed node in generators by @elizamaria in https://github.com/teleporthq/teleport-code-generators/pull/720
• docs: add elizamaria as a contributor for code by @allcontributors in https://github.com/teleporthq/teleport-code-generators/pull/717

• @TudorCe made their first contribution in https://github.com/teleporthq/teleport-code-generators/pull/715
• @retyidoro made their first contribution in https://github.com/teleporthq/teleport-code-generators/pull/719

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.22.4...v0.23.1

• refactor(types): typescript type improvements for handling routing in a proper way by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/699
• feat(core): 404-error page mapping by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/700
• chore(deps): bump terser from 5.12.0 to 5.14.2 by @dependabot in https://github.com/teleporthq/teleport-code-generators/pull/697
• (chore): Upgrade changelog and lerna by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/698

• chore(deps): bump async from 2.6.3 to 2.6.4 by @dependabot in https://github.com/teleporthq/teleport-code-generators/pull/676
• feat(nextjs-tailwind): a project plugin for using tailwind with nextjs projects by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/675
• (fix): Passing styles to children in nextjs by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/677

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.21.2...v0.21.3

• Adding support for comp-styles and comp-overrides by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/672

• Changing react to export css by default
• All flavours change the comp-scoped styles to dashCase(CSS, CSS-Modules, StyledJSX) and cameCase(StyledJSX, StyledComponents).
• Global style sheets of Plain CSS and StyledJSX don't change names, just simply appends whatever coming from UIDL (studio).
• Adding support for component-variants we have component-overrides before. This adds another feature
• Next with CSSModules fix for project template
• Lots of refactoring and fixes along the way

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.20.7...v0.21.0

• fix(core): fixing memory leaks and missing Output imports for angular generators by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/662

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.19.23...v0.20.0

• fix(plugin-css): force scope comp-style references on component instances for vanilla css flavour by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/644
• (default-func): Add void func as default handler for propDefinitions of type func by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/649
• chore(proj-next): upgrading to latest version of nextjs for deployments by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/650

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.19.16...v0.19.17

• feat(image-res): project plugin to resolve local assets to map to public folder of template by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/622
• Fix for missing styles when an element-node is copy and pasted multipole times with same key in page and it's component in component-generator-html by @JayaKrishnaNamburu

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.19.3...v0.19.4

• Improve error reporting for vercel requests by @Utwo in https://github.com/teleporthq/teleport-code-generators/pull/617

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.19.0...v0.19.1

• Update to latest changelog by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/612
• Fix for fallback for component name by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/613

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.18.0...v0.18.1

A experimental new generator for exporting projects and components using HTML and CSS. But the generator comes with only a few features at the moment. In usual ComponentUIDL we can can define the specific details of components, Including if the component is using any external components, using

dependency: {
   type: 'local'    
}

But in plain html we don't have support for components yet. Yes (custom-elements) but the target is to make it a plain html with no custom-elements. A custom-elements can be a diff generator of it own :)

So, to make the syntaxes work.

const generator = createHTMLComponentGenerator()
  
generator.addExternalComponents({
    externals: {
      sample: SampleComponent,
    },
})

await generator.generateComponent(ComponentUIDL)

The generator, clones the components in independent instances with the props passed at specific instances. Things that are no included at the moment.

• State change behaviour
• Event handling
• Slots
• Dynamic styles
• Conditional Nodes
• Repeat nodes

For projects that are generated using @teleporthq/teleport-project-generator-html, the generator uses a default template from parcel without routing. All the components and pages are added to their respective folders.

Feedback is highly welcome, since we want to have the HTML generator as simple as possible. And at the same time, functional. For users who want to just get their html files and serve from their static hosts.

• chore(deps): bump url-parse from 1.5.1 to 1.5.3 by @dependabot in https://github.com/teleporthq/teleport-code-generators/pull/602
• component uidl propdefinitions defaultValue should optional by @MurakamiKennzo in https://github.com/teleporthq/teleport-code-generators/pull/604
• chore(deps): bump jszip from 3.6.0 to 3.7.0 by @dependabot in https://github.com/teleporthq/teleport-code-generators/pull/601
• chore(deps): bump tar from 4.4.15 to 4.4.19 by @dependabot in https://github.com/teleporthq/teleport-code-generators/pull/605
• Scoping component styles with comp name for styled-jsx by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/607
• chore(deps): bump tmpl from 1.0.4 to 1.0.5 by @dependabot in https://github.com/teleporthq/teleport-code-generators/pull/608
• chore(deps): bump axios from 0.21.1 to 0.21.4 by @dependabot in https://github.com/teleporthq/teleport-code-generators/pull/610
• chore(deps): bump nth-check from 2.0.0 to 2.0.1 by @dependabot in https://github.com/teleporthq/teleport-code-generators/pull/609
• feat(comp-html): HTML Component and Project Generator by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/539
• Adding missing tests and adding ability to pass externals using code-generator by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/611

• @MurakamiKennzo made their first contribution in https://github.com/teleporthq/teleport-code-generators/pull/604

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.17.7...v0.18.0

fixes #595

• Component scoped style-sets and variants #579
• All the local-assets with width and height pre-defined will start using next/Image component #574.
• Upgraded all templates, Next-10, React-17, Angular-12, Gatsby-3.5.2

• Bug fix for passing referencedStyles along with styles for a node with aility #581

• Switching to new syntax for styled-components for better readability and extensibility for variants

const ContactLink = styled.li`
  ${SecondaryButton};
  padding: 10px 20px;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
  &:hover {
    color: red;
    border-bottom: 3px solid red;
    padding-bottom: 7px;
  }
`

• ProjectStyleSets need to be defined using the below format. Please check #579 for more details

{
  "secondaryButton": {
        "type": "reusable-project-style-map",
        "content": {
          "background": "red",
          "width": "auto",
          "color": "#fff",
          "border": "1px solid #fff"
        }
      }
}

• Switch to esbuild for improving build times #577
• Improved UIDL error validation messages.

• improve validations to return empty element name as valid value by @chavda-bhavik in https://github.com/teleporthq/teleport-code-generators/pull/570
• feat(next-image): a JSX plugin to use next/image for loading images efficiently by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/575
• (feat/esbuild) Custom scripts for build and watch using esbuild. And generating types using tsc by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/577
• (fix): Throwing error on build fail by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/578
• chore(deps): bump ws from 6.2.1 to 6.2.2 by @dependabot in https://github.com/teleporthq/teleport-code-generators/pull/580
• fix(resolver): pass referenced styles along with styles in uidl link resolving by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/581
• Component scoped style-sets. by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/579

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.16.3...v0.17.0

• Fixes encoding for non-english characters #536
• Added support for 'focus-within' | 'focus-visible' | 'visited' | 'checked' | 'placeholder' in element-state in addition to the existing states. Thank you @oanamun #561
• Improved support for event validations, thank you @chavda-bhavik #560

#557 Un-expected behaviour in rendering when custom-tags are used in Angular and Stencil components. #495 Default branch for github pushed to main.

This release enables project-generators to chain series of plugins like component generators. This helps in re-using the default generators strategy, plugin configs and then extending their functionality using the plugins. For example

Let's take @teleporthq/teleeport-project-generator-next helps in generating a NextJS project with styled-jsx by default. But what is we need a NextJS with StyledComponents or NextJS with React-JSS. These project-plugins helps in enabling that flexibility.

const nextProjectGenerator = createNextProjectGenerator()
nextProjectGenerator.addPlugin(pluginNextStyledComponents)

With nextStyledComponentsProjectGenerators we can generate NextJS projects with StyledComponents. No additional configurations and additional templates needed to maintain.

• Using plugins we can add dependencies or devDependencies or delete any.
• We have access to all files generated using template and from the component-generators. And we can change the content of any files with respect to our needed.
• We cannot change the template using a project-generator-plugin. Because, the plugins are mainly designed by basing on the files and folders present in the config. If a plugin decides to change the template in middle. All the next plugins in the pipeline might start to fail.
• Every plugin has 2 life cycle methods. runBefore and runAfter.
• runBefore is executed right after validating the ProjectUIDL and so, we can want to add any additional plugins or remove any or even change the generators.
• runAfter is executed after the components/pages/style sheets/routers are generated. Basically right before packing the project, so we can quickly change any configs to meet our needs.

More details and implementations of the plugins can be found here #514

Plugins that are currently released with the current release are

• Next + CSS-Modules here
• Next + StyledComponents here
• Next + ReactJSS here
• Gatsby + StyledComponents here

Out of the box, now @teleporthq/teleport-code-generator helps in generating pre-configured 14 different projects 🎉

• chore(changelog): post release clean-up and updating changelog by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/519
• chore(core): upgrading to use esm version of prettier by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/527
• fix(plugin-css): Add styles when only token is used to style a element by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/525
• refactor(react-jss): React JSS will use hooks add styles to nodes. by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/526
• fix(validator): Throwing error if the UIDL has 'null' or 'undefined' by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/528
• fix(styles): Fix for importing and handling project-stylesheet if only tokens are used. by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/530
• (feat): Plugins for project-generators by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/514
• chore(deps): bump ini from 1.3.5 to 1.3.8 by @dependabot in https://github.com/teleporthq/teleport-code-generators/pull/532
• feat(proj-plugins): cross-check for project-plugins and project-generators by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/534
• fix(css): importing global style sheet by default in the root of the project by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/537

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.15.0...v0.16.0

• #503 (feat): Define and use design tokens in root. And use them for styles, media queries and project style sheets.

  Design tokens are here, you can deifne basic tokens which in returns converts into css-variablees in the projects generated. All, we need to do is, define a simple designLanguage field in the root of the ProjectUIDL.

  And then start using the tokens in the UIDL using

{
    ...
   "style":{
      "flex":"1",
      "color":{
         "type":"dynamic",
         "content":{
            "referenceType":"token",
            "id":"blue-500"
         }
      }
   }
}

You can use these tokens in

• Project Styles
• Media Queries inside project styles
• Inline Styles

Supports all style-flavours that we currently support.

• css-variables in css / css-modules based templates (css, css-modules, styled-jsx),
• Tokens / contants in CSS-In-JS based libraries (styled-components, jss)

• #507 feat(vuild): exposing vuidl for better Dx for integrations We are exporting UIDL types from @teleporthq/teleport-types like, ComponentUIDL, ProjectUIDL etc. But these are mostly used for internal implementations. The syntax for UIDL is much more simpler than this. For example, if we define a simple UIDLNode with styles.

  {
    "type":"element",
    "content":{
       "elementType":"text",
       "style":{
          "width":"200px"
       },
       "children":[
          {
             "type":"static",
             "content":"Hello World!"
          }
       ]
    }
  }
  

  The generators pass this through resolving step and generates nodes. But when you use UIDLElement it throws error. Since UIDLElement expects the style to be UIDLStyleDefinitions which in return says that the style should be

  {
    "width":{
       "type":"static",
       "content":"200px"
    }
  }
  

  But, we don't actually need to define static nodes this way, samee thing applies to static children in UIDL. So, start using VComponentUIDL from @teleporthq/teleport-types https://repl.teleporthq.io/?uidlLink=lrvw58rmbqcxpr4dsrfrv These VUIDL helps in writing more compact and human redeable UIDL's. For more types that are exported, please check --> https://github.com/teleporthq/teleport-code-generators/blob/development/packages/teleport-types/src/vuidl.ts (@JayaKrishnaNamburu)
• #505 refactor(validator): improved validation checks for used tokens and project style references (@JayaKrishnaNamburu)
• #503 (feat): Define and use design tokens in root. And use them for styles, media queries and project style sheets

• teleport-project-generator
  • #513 fix(proj-generator): fixed path mapping if the style sheet is from the same folder.

• chore(changelog): post release cleanup and updating change-log by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/497
• Bug: Generate projects, even if project don't have any components. Improved UIDL validations for root and component UIDL by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/500
• (feat): Define and use design tokens in root. And use them for styles, media queries and project style sheets. by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/503
• refactor(validator): improved validation checks for used tokens and project style references by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/505
• feat(vuild): exposing vuidl for better Dx for integrations by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/507
• chore(deps): bump highlight.js from 9.18.1 to 9.18.5 by @dependabot in https://github.com/teleporthq/teleport-code-generators/pull/512
• fix(proj-generator): fixed path mapping if the style sheet is from the same folder by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/513
• chore(package.json): Adding stream flag for build script by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/515
• Revert "chore(package.json): Adding stream flag for build script" by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/517
• chore(deps): bump ini from 1.3.5 to 1.3.7 by @dependabot in https://github.com/teleporthq/teleport-code-generators/pull/518

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.14.0...v0.15.0

Bug Fixes

• teleport-component-generators are not working when attrs's value is "false" #492
• Added mappings for "line-breaks" #491
• Fixed imports issue with Angular projects #496

• Fix broken link in readme by @mrewers in https://github.com/teleporthq/teleport-code-generators/pull/486
• Fix typo by @teeteejo in https://github.com/teleporthq/teleport-code-generators/pull/485
• ci(codecov): upgrading codecov by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/488
• refactor(publisher-vercel): rename from now to vercel by @creativenull in https://github.com/teleporthq/teleport-code-generators/pull/490
• refactor(html-mappings): add linebreak to html mappings by @ionutpasca in https://github.com/teleporthq/teleport-code-generators/pull/491
• chore(react-uidl-json): adding missing react-uidl project json by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/494
• fix(angular-base): ignore imports for frameworks like angular which are imported directly in modules by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/496
• fix: addAttributeToJSXTag when attr's value is boolean by @good-father in https://github.com/teleporthq/teleport-code-generators/pull/493

• @mrewers made their first contribution in https://github.com/teleporthq/teleport-code-generators/pull/486
• @teeteejo made their first contribution in https://github.com/teleporthq/teleport-code-generators/pull/485
• @creativenull made their first contribution in https://github.com/teleporthq/teleport-code-generators/pull/490
• @good-father made their first contribution in https://github.com/teleporthq/teleport-code-generators/pull/493

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.13.3...v0.14.0

• Now preact-generators will support hooks instead of class components.
• Upgraded all preact templates to Preact X
• First class support for external packages and dependencies, for further details please check --> https://github.com/teleporthq/teleport-code-generators/pull/478
• Exporting all Decoders, which helps in validating individual UIDL Nodes. Please check --> https://github.com/teleporthq/teleport-code-generators/pull/479

• chore(changelog): updating changelog by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/476
• chore(deps): bump elliptic from 6.5.2 to 6.5.3 by @dependabot in https://github.com/teleporthq/teleport-code-generators/pull/468
• chore(deps): bump prismjs from 1.19.0 to 1.21.0 by @dependabot in https://github.com/teleporthq/teleport-code-generators/pull/472
• feat(core): importing modules or packages and using them as reference for nodes by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/478
• refactor(validators): exporting decoders from validators to use by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/479
• refactor(preact-template): upgrading preact to use preact x by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/480

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.12.4...v0.13.0

1. We now support project style sheet, you can define once and use them across different components and pages. For more info please check #444
2. You can set conditions on project styles and any element inherits them, behaves according to the conditions that are specified at project level. #459
3. Validators are now validated using a runtime type-checker instead of JSON Schema, a better way to display error messages in validating UIDL.

1. Buttons with link will now generated as anchor tags with the button styles by default.
2. Added semanticType for the UIDL nodes. #445

• chore(deps-dev): bump codecov from 3.7.0 to 3.7.1 by @dependabot in https://github.com/teleporthq/teleport-code-generators/pull/461
• refactor(teleport-types): refactored checkes and validators for UIDLDependency by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/471
• fix(css-modules): importing project styles at first than local styles by @JayaKrishnaNamburu in https://github.com/teleporthq/teleport-code-generators/pull/475

Full Changelog: https://github.com/teleporthq/teleport-code-generators/compare/v0.12.3...v0.12.4

Some codebase updates on typescript and tslint rules and updates to the now publisher

A few hotfixes for links mapping and for the next project generator

A few fixes and new improvements for the playground integration.

After a few alpha releases, we finally have a stable v0.10.0 that has a bunch of new features and capabilities. With this minor version we added support for react-native both at component and project generator level + we added new options like gatsby and gridsome for project generators. Also, the publishes have be polished and are ready to be integrated in the playground project.

You can read the detailed changelog to have a better understanding of the changes involved all the way from 0.9 through all the alpha versions.

Further updates to the UIDL structure as well as the addition of teleport-project-generator-angular to the suite

First alpha release for the upcoming v0.10. Includes the new package teleport-code-generator which is used by the playground as a standalone version of the entire ecosystem, refactoring throughout the packages and the new teleport-publisher-codesandbox

In this release, we started diversifying the frameworks we support. We added a couple of new component generators for: angular, stencil and preact and a new project generator for preact.

But most importantly, we refactored a lot of code under the hood, making the task of adding new flavors for projects and components much easier in the future.

You can read the detailed changelog to have a better understanding of the changes involved from 0.8 to 0.9.

Quick fix for the React component generator which was not generating the import statements.

In this release we finished the work for the basic infrastructure for the code generators and we now have both a generic component generator and a generic project generator, both of which have the underlying abstractions. The ecosystem can now further expand to other technologies with ease.

You can read the detailed changelog to have a better understanding of the changes involved from 0.7 to 0.8.

This release is a transition from a single package on npm - v0.6 to the new lerna powered setup with individual packages published on npm.

You can read the detailed changelog to have a better understanding of the changes involved from 0.6 to 0.7.

We also have an official docs site available from this point.