ดาวน์โหลด teleport code generators teleport code generators ดาวน์โหลดซอร์สโค้ด

teleport code generators

ซอร์สโค้ดอื่น ๆ

v0.36.6

ดาวน์โหลด

เราอยู่ไม่ไกลจาก ตัวสร้างโค้ดเวอร์ชันแรกอย่างเป็นทางการ แต่ในขณะเดียวกัน โปรดทราบว่าบางส่วนของระบบนิเวศยังอยู่ระหว่างการทดลอง

- นี่คืออะไร?

teleportHQ เป็นแพลตฟอร์มที่ใช้โค้ดน้อยซึ่งช่วยให้ทีมสามารถสร้างแอปพลิเคชันผ่านอินเทอร์เฟซเครื่องมือออกแบบที่คุ้นเคยแบบเรียลไทม์

พื้นที่เก็บข้อมูลนี้มีตัวสร้างโค้ดที่ขับเคลื่อนโปรแกรมแก้ไขภาพของแพลตฟอร์ม

เทเลพอร์ต-home.mp4

กาวระหว่างแพลตฟอร์มและตัวสร้างโค้ดคือ UIDL Standard 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 vue มาตรฐาน
teleport-component-generator-angular - สร้างไฟล์ .ts , .html และ .css
teleport-component-generator-html - (ทดลอง)
teleport-component-generator-svelte - (เร็ว ๆ นี้)

ความสามารถ

ต่อไปนี้เป็นรายการฟังก์ชันที่ UIDL และตัวสร้างส่วนประกอบรองรับในขณะนี้ นอกเหนือจากเลเยอร์การนำเสนอที่ชัดเจน:

ค่าไดนามิก (อุปกรณ์ประกอบฉาก สถานะ) ภายในโหนด html หรือที่ระดับแอตทริบิวต์
พิมพ์คำจำกัดความสำหรับอุปกรณ์ประกอบฉาก (PropTypes ใน React, อุปกรณ์ประกอบฉากใน Vue)
คำจำกัดความการพึ่งพาภายนอก
สถานะของส่วนประกอบอย่างง่าย (การใช้ hooks ใน 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 สำหรับจัดการ monorepo ด้วยแพ็คเกจ npm หลายรายการ
ล้อเล่นสำหรับการทดสอบทุกประเภทและสำหรับการคำนวณการครอบคลุมโค้ด

เพื่อที่จะให้มันหมุนในพื้นที่ เราขอแนะนำให้ใช้ yarn เพราะมันบูรณาการกับ lerna ได้ดีกว่าและผู้มีส่วนร่วมทั้งหมดกำลังใช้มัน:

 yarn

สิ่งนี้จะติดตั้งการขึ้นต่อกันในโฟลเดอร์รูท แต่ยังสร้างลิงก์สัญลักษณ์ระหว่างโมดูลอิสระภายใน packages

หากต้องการตั้งค่า lerna ให้เสร็จสมบูรณ์ คุณต้องเรียกใช้:

 yarn build

สิ่งนี้จะรันงาน build ภายในแต่ละแพ็คเกจ โดยสร้างโฟลเดอร์ lib เอาต์พุต เรามีเอาต์พุตสองเอาต์พุตสำหรับแต่ละแพ็กเกจ: cjs - โมดูลสไตล์ js ทั่วไป และ esm - โมดูล es สมัยใหม่ หากคุณต้องการเร่งเวลาในการสร้าง คุณสามารถรันเพียงแค่ build:cjs เพื่อหลีกเลี่ยงการสร้าง esm

ใช้งานชุดทดสอบ:

 yarn test
yarn test:coverage

นอกจากนี้ยังมีแพ็คเกจ private ภายในโฟลเดอร์ lerna ที่เรียกว่า teleport-test แพ็คเกจนั้นสามารถใช้เพื่อ ทดสอบ กระบวนการสร้างโค้ด/ไฟล์ด้วยตัวสร้างโปรเจ็กต์/ส่วนประกอบใดก็ได้ เพื่อที่จะหมุนคุณจะต้อง:

 cd packages/teleport-test
npm run standalone

เวอร์ชันสแตนด์อโลนใช้แพ็คเกจ teleport-code-generator และเทมเพลตที่ประกาศแบบคงที่ หากต้องการทดสอบกับเทมเพลต GitHub และอินสแตนซ์ Packer แบบกำหนดเอง คุณต้อง:

 cp config.example.json config.json

คุณจะต้องแทนที่ตัวยึดตำแหน่งด้วยโทเค็น GitHub ของคุณเอง จากนั้นคุณสามารถรันด้วย:

 npm run packer

Packer เวอร์ชันนี้ใช้ UIDL จาก examples/uidl-sample หากกระบวนการรันสำเร็จ คุณจะเห็นการตอบกลับจากผู้บรรจุโปรเจ็กต์ในรูปแบบ: { success: true, payload: 'dist' } งานใช้แพ็คเกจ teleport-publisher-disk และสร้างไฟล์โปรเจ็กต์ที่แตกต่างกันสี่ไฟล์ในโฟลเดอร์ dist

โปรดเปิดประเด็นเกี่ยวกับความผิดปกติหรือข้อบกพร่องที่อาจเกิดขึ้นที่คุณพบขณะดำเนินการนี้ หรือหากคุณมีคำถามหรือข้อสงสัยเกี่ยวกับโครงการนี้

- การวางแผน

ไม่ใช่แค่โค้ดของเราที่เป็นโอเพ่นซอร์ส เรายังวางแผนการพัฒนาตัวสร้างโค้ดบน GitHub อีกด้วย เรามีประเด็นต่างๆ ที่เปิดอยู่ และเราคาดว่าจะได้รับความช่วยเหลือเพิ่มเติมในเรื่องนี้

เราสนใจเป็นอย่างยิ่งในการเปิดการอภิปรายเกี่ยวกับประเด็นที่ติดแท็กด้วยป้ายกำกับ discussion

การเปิดตัวอย่างเป็นทางการ

การเปิดตัวอย่างเป็นทางการจะเป็นการเปลี่ยนไปใช้เวอร์ชัน 1.0 การทางพิเศษแห่งประเทศไทยสำหรับสิ่งนี้คือประมาณปลายปี 2019

- ผลงาน

เรายินดีอย่างยิ่งที่ได้มีส่วนร่วม กับชุมชน ในโครงการนี้ เราเชื่อมั่นในพลังของ โอเพ่นซอร์ส ดังนั้นเราจึงวางแผนที่จะสร้างโปรแกรมสร้างโค้ดที่ดีที่สุดเท่าที่จะเป็นไปได้ ร่วมกับชุมชนการพัฒนาทั้งหมด

เรามองเห็นการมีส่วนร่วมประเภทต่างๆ จากจุดนี้:

ลองใช้ตัวสร้างและรายงานข้อบกพร่องและจุดที่ควรปรับปรุง
มีส่วนร่วมในปัญหาที่มีอยู่ ทั้งบนโมดูลหลักหรือบนตัวสร้างและปลั๊กอินที่มีอยู่
สำรวจและสร้างปลั๊กอินใหม่สำหรับเครื่องกำเนิดไฟฟ้าที่มีอยู่
สำรวจและสร้างเครื่องกำเนิดไฟฟ้าใหม่ตามสถาปัตยกรรมที่มีอยู่

ขอขอบคุณผู้คนที่แสนวิเศษเหล่านี้ (คีย์อีโมจิ):

_{อเล็กซ์ มอลโดวา} -	_{วลาด นิคูลา} -	_{พอล บรี} - -	_{มิไฮตาบา} -	_{มิไฮ เซอร์บัน}	_{จายา กฤษณะ นัมบูรู} -	_{อนามาเรีย โอรอส}
_{ไข่ไก่94}	_{อเล็กซ์เพซาน}	_{มิไฮ ซัมปาลีนู} -	_อูทู	_andreiTnu	_{ซาเวียร์ กาซาล็อต}	_{ชวาดา ภวิก}
_{เอลิซ่า นิตอย}	_{ทิวดอร์ซี} -	_{โดรอตยา เฟเรนซ์} -	_{วิลเลียม กูโนต์}