teleport code generators下载 - teleport code generators源代码下载

teleport code generators

其他源码

v0.36.6

下载

我们距离代码生成器的第一个正式版本并不遥远，但同时请记住，生态系统的某些部分仍处于实验阶段。

？这是什么？

teleportHQ 是一个低代码平台，使团队能够通过熟悉的设计工具界面实时构建应用程序。

该存储库包含为平台的可视化编辑器提供支持的代码生成器。

传送回家.mp4

UIDL 标准是平台和代码生成器之间的粘合剂。 UIDL以抽象的方式定义用户界面，独立于任何框架甚至 Web 平台本身。从 UIDL 开始，您可以将该抽象转换为不同风格的编码（例如 React、Vue、WebComponents 等）。

这些代码生成器是更大生态系统的一部分，我们正在积极构建该生态系统，以简化 Web 应用程序的创建。您可以在本文中了解有关我们成立的更多信息。

代码生成器背后的理念是：

用户界面被分解为组件，因此重点放在组件生成上。
可以使用React构建的内容，也可以使用Vue构建或在Web Components标准之上构建 - 我们支持多个目标
使用可视化编辑器构建的项目应该具有高标准的质量（包括性能、安全性、可访问性）
生成的代码质量应该尽可能高，以便任何开发人员都可以从那里开始工作并增强项目
代码生成架构是开放且可扩展的，我们邀请大家贡献！

阅读有关 UIDL 标准的更多信息。

快速设置

进入传送生态系统的最简单方法是尝试预配置的组件生成器之一：

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

或使用纱线：

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

为了生成一个简单的组件，您必须从组件 UIDL开始：

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

使用预配置的组件生成器就像调用异步函数一样简单：

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

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

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

控制台输出将类似于：

 import React from 'react'

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

export default MyFirstComponent

对于其他框架，只需切换包即可：

 import VueGenerator from '@teleporthq/teleport-component-generator-vue'

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

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

控制台输出将类似于：

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

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

您可以使用 UIDL 结构，还可以在在线 REPL 中观察生成的代码。同时，还可以检查以 UIDL 格式编写的组件的不同示例。

？生态系统

Teleport 生态系统由三大类包组成：组件生成器、项目生成器和项目打包器。

组件生成器

我们为几个流行的 Web 前端框架提供了官方组件生成器。查看官方文档以深入了解组件生成器背后的架构。

所有组件生成器都公开teleport-component-generator包的一个实例。您还可以安装此软件包并使用插件、映射和后处理器构建您自己的生成器。

在文档中，您将找到有关如何构建自定义组件生成器的完整指南。

口味

teleport-component-generator-react - 具有样式： css-modules 、 styled-components 、 styled-jsx等。
teleport-component-generator-vue - 生成标准.vue文件
teleport-component-generator-angular - 生成.ts 、 .html和.css文件
teleport-component-generator-html -（实验性）
teleport-component-generator-svelte -（即将推出）

能力

除了明显的表示层之外，以下是 UIDL 和组件生成器目前支持的功能列表：

html 节点内或属性级别的动态值（props、state）
组件 props 的类型定义（React 中的 PropTypes，Vue 中的 props）
外部依赖定义
简单的组件状态（React 中使用 hooks，Vue 中使用组件实例）
事件处理程序（与状态更改相关）
重复结构（React 中的 .map，Vue 中的 v-for）
支持插槽

项目生成器

项目生成器依赖于ProjectUIDL输入和项目策略。 ProjectUIDL将包含有关路由、页面、组件和全局设置的所有信息。该策略将告诉生成器将每个文件放在哪里以及使用哪个组件生成器。

生成器将输出包含文件夹和文件的抽象结构，而不将任何内容写入磁盘。项目打包程序的任务是获取项目生成器的输出并将其发布到某个地方。

查看有关如何使用现有项目生成器或如何创建自定义配置的官方指南

口味

teleport-project-generator-react - 在create-react-app之上的react + react-router和css-modules
teleport-project-generator-next - 基于 Next.js
teleport-project-generator-vue - 结构从vue-cli开始
teleport-project-generator-nuxt - 基于 Nuxt.js
teleport-project-generator-angular - 基于angular-cli
teleport-project-generator-html （实验性）

能力

除了流程结束时生成的常规文件和文件夹之外，项目生成器还负责：

支持全局设置、元标记、样式、脚本等。
提取所有外部依赖项并将它们添加到package.json中。
为每个应用程序创建入口点（可以是index.html或特定于框架的内容）。
为项目的客户端路由创建路由文件。
生成 PWA 支持的 Web 清单。

项目包装工

一旦生成器创建了组件和页面的代码，项目打包器将获取该输出，将其放在现有项目模板之上，添加所需的任何本地资源，然后将整个结果传递给发布者。发布者专门将整个文件夹结构部署到第三方（例如vercel或github ，或者创建内存中的zip文件或简单地将文件夹写入disk 。

出版商

teleport-publisher-vercel
teleport-publisher-github
teleport-publisher-codesandbox
teleport-publisher-zip
teleport-publisher-disk
teleport-publisher-netlify （即将推出）

进一步阅读

一些有用的链接可帮助您快速了解整个传送生态系统：

完整文档
组件和项目 JSON 架构
在线 REPL

发展

该项目使用：

TypeScript 用于类型安全和轻松重构
lerna 用于管理带有多个 npm 包的 monorepo
jest 适用于所有类型的测试和计算代码覆盖率

为了在本地进行测试，我们建议使用yarn ，因为它与lerna集成得更好，并且所有贡献者都在使用它：

 yarn

这会将依赖项安装在根文件夹中，同时还会在packages夹内的独立模块之间创建符号链接。

要完成 lerna 设置，您需要运行：

 yarn build

这将在每个单独的包内运行build任务，创建输出lib文件夹。每个包有两个输出： cjs - 常见的 js 风格模块和esm - 现代 es 模块。如果您想加快构建时间，可以只运行build:cjs来避免esm构建。

运行测试套件：

 yarn test
yarn test:coverage

此外，lerna 文件夹中有一个名为teleport-test private包。该包可用于测试任何类型的项目/组件生成器的代码/文件生成过程。为了尝试一下，您必须：

 cd packages/teleport-test
npm run standalone

独立版本使用teleport-code-generator包和静态声明的模板。要使用 github 模板和自定义打包程序实例进行测试，您必须：

 cp config.example.json config.json

您必须将占位符替换为您自己的 github 令牌。然后你可以使用以下命令运行它：

 npm run packer

此版本的打包程序使用examples/uidl-sample中的 UIDL。如果该过程成功运行，您将看到来自项目打包程序的响应，格式如下： { success: true, payload: 'dist' } 。该任务使用teleport-publisher-disk包并在dist文件夹中生成四个不同的项目文件。

如果您在运行此项目时发现任何异常情况、潜在错误，或者您只是对此项目有任何疑问或好奇，请提出问题。

？规划

不仅仅是我们的代码是开源的，我们还计划在 GitHub 上开发代码生成器。我们有许多问题尚未解决，我们期待对此做出进一步的贡献。

我们特别有兴趣围绕带有discussion标签的问题展开讨论。

正式发布

正式发布将切换到1.0版本。预计预计在 2019 年底左右完成。

？贡献

我们非常高兴社区参与这个项目。我们坚信开源的力量，因此我们计划与整个开发社区一起构建最好的代码生成器。

从现在开始，我们设想不同类型的参与：

尝试生成器并报告任何错误和潜在的改进点
解决核心模块或现有生成器和插件上的现有问题
为现有生成器探索和构建新插件
基于现有架构探索和构建新的发电机

感谢这些优秀的人（表情符号键）：

_{亚历克斯·摩尔多瓦} ？	_{弗拉德·尼古拉} ？	_{保罗·布里} ？？	_{米哈伊塔巴} ？	_{米哈伊·塞尔班}	_{贾亚·克里希纳·南布鲁} ？	_{安娜玛丽亚·奥罗斯}
_{卵母细胞94}	_{亚历克斯保桑}	_{米哈伊·桑帕莱努} ？	_乌特沃	_{安德烈·图努}	_{泽维尔·卡萨洛特}	_{查夫达·巴维克}
_{伊丽莎·尼托伊}	_都铎王朝？	_{多罗蒂亚·费伦茨} ？	_{威廉·古诺}