Скачать teleport code generators - teleport code generators Скачать исходный код

teleport code generators

Другой исходный код

v0.36.6

Скачать

Мы недалеко от первой официальной версии генераторов кода, но между тем имейте в виду, что некоторые части экосистемы являются экспериментальными.

? Что это?

teleportHQ — это платформа с низким кодом, которая позволяет командам создавать приложения через знакомый интерфейс инструмента проектирования в режиме реального времени.

В этом репозитории хранятся генераторы кода, которые используются в визуальном редакторе платформы.

телепорт-home.mp4

Связующим звеном между платформой и генераторами кода является стандарт UIDL . UIDL определяет пользовательские интерфейсы абстрактным образом, независимо от какой-либо инфраструктуры или даже самой веб-платформы. Начиная с UIDL, вы можете преобразовать эту абстракцию в различные варианты кодирования (например, React, Vue, WebComponents и т. д.).

Эти генераторы кода являются частью более крупной экосистемы, которую мы активно создаем, стремясь упростить создание веб-приложений. Подробнее о нашем создании вы можете прочитать в этой статье.

Философия генераторов кода такова:

Пользовательские интерфейсы разбиваются на компоненты , поэтому основное внимание уделяется созданию компонентов.
То, что можно создать с помощью 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-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 или на уровне атрибутов.
Определения типов для реквизитов компонентов (PropTypes в React, реквизиты в Vue)
Определение внешних зависимостей
Простое состояние компонента (с использованием хуков в React, экземпляра компонента в Vue)
Обработчики событий (связанные с изменениями состояния)
Повторяющиеся структуры (.map в React, v-for в Vue)
Поддержка слотов

Генераторы проектов

Генераторы проектов полагаются на входные данные ProjectUIDL и стратегию проекта . ProjectUIDL будет содержать всю информацию о маршрутизации, страницах, компонентах и глобальных настройках. Стратегия сообщит генераторам, куда поместить каждый файл и какой генератор компонентов использовать.

Генераторы выведут абстрактную структуру с папками и файлами, ничего не записывая на диск. Упаковщику проекта поручено взять выходные данные генератора проекта и опубликовать их где-нибудь.

Ознакомьтесь с официальными руководствами о том, как использовать существующий генератор проектов или как создать свою собственную конфигурацию.

Вкусы

teleport-project-generator-react — react + react-router и css-modules поверх create-react-app
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.

Упаковщики проектов

Как только генератор создаст код для компонентов и страниц, упаковщик проекта возьмет этот результат, поместит его поверх существующего шаблона проекта , добавит все необходимые локальные ресурсы и затем передаст весь результат издателю . Издатели специализируются на развертывании всей структуры папок сторонним организациям, таким как vercel или github , либо на создании zip файла в памяти, либо просто на записи папки на disk .

Издатели

teleport-publisher-vercel
teleport-publisher-github
teleport-publisher-codesandbox
teleport-publisher-zip
teleport-publisher-disk
teleport-publisher-netlify (скоро)

Дальнейшее чтение

Несколько полезных ссылок, которые помогут вам освоить всю экосистему телепорта :

Полная документация
Схемы JSON компонентов и проектов
Онлайн РЕПЛ

Разработка

В этом проекте используются:

TypeScript для безопасности типов и простоты рефакторинга
lerna для управления монорепозиторием с несколькими пакетами npm
jest для всех типов тестов и для расчета покрытия кода

Чтобы придать ему локальный характер, мы рекомендуем использовать yarn , поскольку он лучше интегрируется с lerna , и все участники его используют:

 yarn

Это устанавливает зависимости в корневой папке, а также создает символические ссылки между независимыми модулями внутри папки packages .

Для завершения настройки лерны необходимо запустить:

 yarn build

Это запустит задачу build внутри каждого отдельного пакета, создав выходную папку lib . У нас есть два вывода для каждого пакета: cjs — общие модули стиля js и esm — современные модули es. Если вы хотите ускорить время сборки, вы можете просто запустить build:cjs чтобы избежать сборки esm .

Запуск набора тестов:

 yarn test
yarn test:coverage

Кроме того, в папке lerna есть private пакет под названием teleport-test . Эти пакеты можно использовать для тестирования процесса генерации кода/файла с помощью любого генератора проекта/компонента. Чтобы его покрутить, вам придется:

 cd packages/teleport-test
npm run standalone

Автономная версия использует пакет teleport-code-generator и статически объявленные шаблоны. Чтобы протестировать шаблоны GitHub и собственный экземпляр упаковщика, вам необходимо:

 cp config.example.json config.json

Вам придется заменить заполнитель своим собственным токеном GitHub. Затем вы можете запустить его с помощью:

 npm run packer

Эта версия упаковщика использует UIDL из файла examples/uidl-sample . Если процесс завершится успешно, вы увидите ответы от упаковщика проекта в формате: { success: true, payload: 'dist' } . Задача использует пакет teleport-publisher-disk и генерирует четыре разных файла проекта в папке dist .

Пожалуйста, открывайте проблему в случае любых нарушений, потенциальных ошибок, которые вы обнаружите во время работы, или если у вас просто есть какие-либо вопросы или любопытство по поводу этого проекта.

? Планирование

Это не только наш код с открытым исходным кодом, мы также планируем разработку генераторов кода на GitHub. У нас есть ряд открытых вопросов, и мы ожидаем дальнейшего вклада по этому вопросу.

Мы особенно заинтересованы в открытии дискуссий по вопросам, отмеченным ярлыком discussion .

Официальный релиз

Официальным релизом станет переход на версию 1.0 . Расчетное время для этого примерно в конце 2019 года.

? Взносы

Мы были бы очень рады участию сообщества в этом проекте. Мы твердо верим в силу открытого исходного кода , поэтому планируем создавать лучшие генераторы кода вместе со всем сообществом разработчиков.

С этого момента мы предусматриваем различные типы участия:

Тестируем генераторы и сообщаем о любых ошибках и потенциальных возможностях для улучшения.
Содействие решению существующих проблем либо в основных модулях, либо в существующих генераторах и плагинах.
Исследование и создание новых плагинов для существующих генераторов.
Исследование и создание новых генераторов на основе существующей архитектуры.

Спасибо этим замечательным людям (ключ смайлика):

_{Алекс Молдован} ?	_{Влад Никула} ?	_{Пол Бри} ? ?	_{Михайтаба} ?	_{Михай Сербан}	_{Джая Кришна Намбуру} ?	_{Анамария Орос}
_{овидиуионут94}	_{Алекспаусан}	_{Михай Сампаляну} ?	_Утво	_{АндрейТну}	_{Ксавье Казалот}	_{Чавда Бхавик}
_{Элиза Нитой}	_{ТюдорЦе} ?	_{Дороттья Ференц} ?	_{Уильям Гуно}