teleport code generators

我們距離程式碼產生器的第一個正式版本並不遙遠，但同時請記住，生態系統的某些部分仍處於實驗階段。

？這是什麼？

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	亞歷克斯保桑	米哈伊·桑帕萊努 ？	烏特沃	安德烈·圖努	澤維爾·卡薩洛特	查夫達·巴維克
伊麗莎·尼托伊	都鐸王朝 ？	多羅蒂亞·費倫茨 ？	威廉古諾

該項目遵循所有貢獻者規範。歡迎任何形式的貢獻！

✍️聯絡方式

透過以下任一管道聯絡我們：

• ？寫一封電子郵件
• 不和諧
• ？在 Twitter 上留言
• 網站