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 노드 내부 또는 속성 수준의 동적 값(props, state)
컴포넌트 props에 대한 유형 정의(React의 PropTypes, 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 지원을 위한 웹 매니페스트 생성

프로젝트 패커

생성기가 구성 요소 및 페이지에 대한 코드를 생성하면 프로젝트 패커는 해당 출력을 기존 프로젝트 템플릿 위에 배치하고 필요한 로컬 자산을 추가한 다음 전체 결과를 게시자 에게 전달합니다. 게시자는 전체 폴더 구조를 vercel 또는 github 같은 제3자에 배포하거나 메모리 내 zip 파일을 생성하거나 단순히 폴더를 disk 에 쓰는 데 특화되어 있습니다.

출판사

teleport-publisher-vercel
teleport-publisher-github
teleport-publisher-codesandbox
teleport-publisher-zip
teleport-publisher-disk
teleport-publisher-netlify (곧 제공 예정)

추가 자료

전체 텔레포트 생태계에 대한 최신 정보를 얻을 수 있는 몇 가지 유용한 링크:

전체 문서
구성 요소 및 프로젝트 JSON 스키마
온라인 REPL

개발

이 프로젝트에서는 다음을 사용합니다.

유형 안전성과 손쉬운 리팩토링을 위한 TypeScript
여러 npm 패키지로 모노레포를 관리하는 lerna
모든 유형의 테스트 및 코드 적용 범위 계산에 대한 농담

로컬에서 스핀을 제공하려면 lerna 와 더 잘 통합되고 모든 기여자가 이를 사용하고 있으므로 yarn 사용하는 것이 좋습니다.

 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 폴더에 4개의 서로 다른 프로젝트 파일을 생성합니다.

이 프로젝트를 실행하는 동안 발견한 불규칙성, 잠재적인 버그 또는 이 프로젝트에 대한 질문이나 호기심이 있는 경우 문제를 열어주세요.

? 계획

오픈 소스인 코드뿐만 아니라 GitHub에서 코드 생성기 개발도 계획하고 있습니다. 우리는 많은 이슈를 공개했으며 이에 대한 추가 기여를 기대합니다.

우리는 특히 discussion 라벨이 붙은 문제에 관해 토론을 시작하는 데 관심이 있습니다.

공식 출시

공식 릴리스는 버전 1.0 으로 전환됩니다. 이에 대한 예상 시간은 2019년 말경입니다.

? 기여

우리는 이 프로젝트에 대한 커뮤니티의 참여를 매우 기쁘게 생각합니다. 우리는 오픈 소스 의 힘을 굳게 믿으므로 전체 개발 커뮤니티와 함께 최고의 코드 생성기를 구축할 계획입니다.

우리는 이 시점부터 다양한 유형의 참여를 구상합니다.

생성기를 시험해보고 버그와 잠재적인 개선점을 다시 보고합니다.
핵심 모듈이나 기존 생성기 및 플러그인의 기존 문제에 기여
기존 생성기를 위한 새로운 플러그인 탐색 및 구축
기존 아키텍처를 기반으로 새로운 발전기 탐색 및 구축

다음 멋진 분들에게 감사드립니다(이모지 키):

_{알렉스 몰도반} ?	_{블라드 니쿨라} ?	_{폴 브리} ? ?	_{미하이타바} ?	_{미하이 세르비아어}	_{자야 크리슈나 남부루} ?	_{아나마리아 오로스}
_{ovidiuionut94}	_{알렉스파우산}	_{미하이 삼팔레아누} ?	_유투	_{안드레이Tnu}	_{자비에르 카잘로트}	_{차브다 바빅}
_{엘리자 니토이}	_튜더Ce ?	_{도로티아 페렌츠} ?	_{윌리엄 구노}