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 標準について詳しくは、こちらをご覧ください。

クイックセットアップ

テレポートエコシステムに飛び込む最も簡単な方法は、事前構成されたコンポーネントジェネレーターの 1 つを試してみることです。

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 形式で記述されたコンポーネントのさまざまな例を確認することもできます。

?生態系

テレポートエコシステムは、コンポーネントジェネレーター、プロジェクトジェネレーター、およびプロジェクトパッカーの3 つの主要なパッケージカテゴリで構成されます。

コンポーネントジェネレータ

いくつかの人気のある 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 の PropType、Vue の props)
外部依存関係の定義
単純なコンポーネントの状態 (React ではフック、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

発達

このプロジェクトでは以下を使用します。

TypeSafe と簡単なリファクタリングのための TypeScript
複数の npm パッケージを使用してモノリポジトリを管理するための lerna
あらゆる種類のテストおよびコードカバレッジの計算用の jest

ローカルで試してみるには、 lernaとの統合性が高く、すべての貢献者がこれを使用しているため、 yarn使用することをお勧めします。

 yarn

これにより、ルートフォルダーに依存関係がインストールされますが、 packagesフォルダー内の独立したモジュール間のシンボリックリンクも作成されます。

lerna のセットアップを完了するには、以下を実行する必要があります。

 yarn build

これにより、各パッケージ内でbuildタスクが実行され、出力libフォルダーが作成されます。各パッケージには 2 つの出力があります: 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フォルダーに 4 つの異なるプロジェクトファイルを生成します。

実行中に見つかった不規則性や潜在的なバグについて、あるいは単にこのプロジェクトについて質問や興味がある場合には、問題を開いてください。

?企画

オープンソースであるのはコードだけではなく、GitHub でのコードジェネレーターの開発も計画しています。私たちは多くの問題を解決しており、これに関するさらなる貢献を期待しています。

私たちは、 discussionラベルが付けられた問題に関するディスカッションを開始することに特に興味を持っています。

正式リリース

正式リリースはバージョン1.0への切り替えになります。このETAは2019年末頃です。

?貢献

このプロジェクトに関してコミュニティに参加していただけることを非常に嬉しく思います。私たちはオープンソースの力を強く信じているため、開発コミュニティ全体と協力して、可能な限り最高のコードジェネレーターを構築することを計画しています。

私たちは、この時点からさまざまな種類の関与を想定しています。

ジェネレーターを試し、バグや潜在的な改善点を報告します。
コアモジュールまたは既存のジェネレーターとプラグインのいずれかで、既存の問題に貢献する
既存のジェネレーター用の新しいプラグインの探索と構築
既存のアーキテクチャに基づいた新しいジェネレーターの探索と構築

これらの素晴らしい人々に感謝します (絵文字キー):

_{アレックス・モルドバン} ?	_{ヴラド・ニクラ} ?	_{ポール・ブリー} ? ?	_{ミハイタバ} ?	_{ミハイ・セルバン}	_{ジャヤ・クリシュナ・ナンブル} ?	_{アナマリア・オロス}
_{ovidiuionut94}	_{アレックスポーサン}	_{ミハイ・サンパレヌ} ?	_ウトゥー	_{アンドレイトゥヌ}	_{ザビエル・カザロ}	_{チャブダ・バヴィク}
_{仁藤エライザ}	_{チューダーシー} ?	_{ドロッティヤ・フェレンツ} ?	_{ウィリアム・グノー}