ดาวน์โหลด amber components - amber components ดาวน์โหลดซอร์สโค้ดดาวน์โหลด

amber components

ส่วนประกอบของบุคคลที่สาม

v1.2 - still work in progress(bar)

ดาวน์โหลด

องค์ประกอบอำพัน

การใช้งาน Web Components ของระบบการออกแบบอำพัน

พื้นที่เก็บข้อมูลนี้มีวัตถุประสงค์หลักสำหรับนักพัฒนาและผู้มีส่วนร่วมสำหรับเอกสารและสไตล์ที่เหมาะสมโปรดดูที่ https://amber.bitrock.it

คุณสามารถดูตัวอย่าง/ลองใช้ส่วนประกอบในหนังสือนิทานสด

การใช้งาน

ติดตั้ง

$ yarn add @amber-ds/components
--- or ---
$ npm install @amber-ds/components

ทางเลือกคุณอาจต้องการเพิ่มโพลีฟิลล์ส่วนประกอบของเว็บเพื่อรองรับ Firefox และ Edge เวอร์ชันก่อนหน้า

$ yarn add @webcomponents/webcomponentsjs
--- or ---
$ npm install @webcomponents/webcomponentsjs

เพิ่มในโครงการ

คุณสามารถนำเข้าส่วนประกอบในโครงการของคุณในลักษณะที่แตกต่างกันขึ้นอยู่กับสภาพแวดล้อม:

เป็นไฟล์ JavaScript ที่มี Bundler (เช่น WebPack)

 // myfile.js

// import the whole components library
import AmberComponents from '@amber-ds/components' ;

// import a single component (button for instance)
import '@amber-ds/components/button' ,

เป็นไฟล์ JavaScript จาก HTML โดยไม่มี Bundler

 <!-- mypage.html -->

<!-- import the whole components library -->
< script type =" module " src =" ./node_modules/@amber-ds/components/index.js " > </ script >
<!-- import a single component (button for instance) -->
< script type =" module " src =" ./node_modules/@amber-ds/components/button.js " > </ script >

จากนั้นในไฟล์ .html หรือเทมเพลตที่สร้างเอาต์พุต HTML:

 <!-- myfile.html -->

< amber-button priority =" primary " >
  Get ready!
< amber-button >

การพัฒนา

คำอธิบายสั้น ๆ เกี่ยวกับสถาปัตยกรรมการพัฒนาสแต็กและวิธีการทำงานบนรหัส:

ส่วนประกอบของเว็บ

ข้อมูลจำเพาะ ของเว็บคอมโพสิต เป็นคำศัพท์ร่มในการจัดกลุ่มองค์ประกอบที่กำหนดเอง V1 และข้อมูลจำเพาะ Shadow DOM V1 API ของเบราว์เซอร์เหล่านี้ช่วยให้คุณเขียนแท็ก HTML ที่กำหนดเองตามมาตรฐาน W3C ด้วยฟังก์ชันการทำงานของตัวเองสไตล์ที่กำหนดขอบเขตและมาร์กอัปที่ใช้งานได้กับเบราว์เซอร์และเฟรมเวิร์กส่วนหน้า

ตัวพิมพ์ใหญ่

เพื่อให้ได้ความยืดหยุ่นของรหัสที่ดีขึ้นส่วนประกอบทั้งหมดจะถูกเขียนเป็น typeScript เพื่อใช้ประโยชน์จากการตรวจสอบประเภทคงที่และไวยากรณ์ของนักตกแต่ง นอกจากนี้ยังใช้ในการเปลี่ยนรหัสไปยัง ES-2015

ขึ้นอยู่กับ LIT-HTML & Litelement

เนื่องจากส่วนประกอบของเว็บเป็นมาตรฐานไม่ได้จัดการกลไกการเรนเดอร์และการเชื่อมโยงข้อมูลเราจึงใช้ LIT-HTML และคลาสองค์ประกอบเว็บที่เป็นเลเยอร์พื้นฐานสำหรับ comoponent ทุกตัวภายในห้องสมุดนี้

สาธารณูปโภคภายใน

triggerEvent(element, name, ?detail) - wrapper เพื่อสร้างเหตุการณ์ที่กำหนดเองใหม่และจัดส่งด้วยวัตถุ detail เพิ่มเติม เดือดถูกเปิดใช้งานแล้ว

เพิ่มส่วนประกอบใหม่

ในการสร้างแผ่นหม้อไอน้ำ (แต่น้อยที่สุด) ที่ต้องการอย่างรวดเร็วสำหรับส่วนประกอบอำพันใหม่เราได้รวมยูทิลิตี้ CLI ขนาดเล็ก:

$ yarn create:component [name]
--- or ---
$ npm run create:component [name]

สิ่งนี้จะสร้างโฟลเดอร์ย่อยภายในโฟลเดอร์ ./src/components style.scss พร้อมไฟล์สตาร์ทเตอร์สองไฟล์ที่จำเป็นและ index.ts

คุณจะต้องนำเข้าส่วนประกอบใหม่ภายใน ./src/components/library.ts ไฟล์เพื่อให้เป็นห่วงในกระบวนการ dev & build

การจัดแต่งทรงผม

คุณสามารถกำหนดรูปแบบของแต่ละส่วนประกอบโดยใช้ SASS ไฟล์ Main index.scss ภายในโฟลเดอร์ส่วนประกอบจะได้รับการประมวลผลโดยคอมไพเลอร์จากนั้นจะถูกฉีดใน Shadow Dom

หากคุณต้องการแบ่งปันสไตล์ผสมหรืออะไรก็ตามระหว่างส่วนประกอบคุณควรสร้างไฟล์ที่แยกจากกันแล้วนำเข้าตามที่ต้องการ

การทดสอบ

ในขณะนี้มีเพียงไลบรารีหลัก ( ไฟล์ธรรมดา .ts ภายในโฟลเดอร์ src/libs ) กำลังถูกทดสอบผ่าน JEST

งาน NPM ที่มีอยู่

เริ่มโครงการในโหมดการพัฒนาด้วยหนังสือนิทานโหลดสด

$ yarn start

เริ่มโครงการในโหมดการพัฒนาด้วยหน้า HTML อย่างง่าย

$ yarn dev

สร้างหนังสือนิทานแบบคงที่ในโฟลเดอร์ ./dist dist

$ yarn build:storybook

เรียกใช้การทดสอบหน่วย

$ yarn test:unit

นโยบายการแตกแขนง

โครงการนี้เป็นไปตามนโยบายการแตกแขนงง่าย ๆ :

master มีรหัสที่เสถียรเท่านั้นและไม่ควรอัปเดตโดยตรง
development ที่เขียนรหัสวิวัฒนาการหรือการทดลอง
gh-pages ที่มีการปรับใช้ไฟล์เรื่องราวคงที่

อย่า รวม development โดยตรงเข้ากับ master ( เป็นผู้ดูแลระบบที่ถูกล็อค ... ) ส่ง PR เพื่อตรวจสอบเสมอ

เผยแพร่เวอร์ชันใหม่

ก่อนที่จะพยายามเผยแพร่แพ็คเกจเวอร์ชันใหม่บน NPM ให้เรียกใช้ก่อนผ่านรายการตรวจสอบนี้:

การทดสอบผ่าน (จำเป็นสำหรับ PRS)
หมายเลขเวอร์ชันที่เพิ่มขึ้นในไฟล์ package.json ตามแนวทาง semver
รายงานการเปลี่ยนแปลงของเอกสารอำพัน-ไซต์

หากการเปิดตัวมี ส่วนประกอบใหม่ :

การกำหนดเวอร์ชันควรเพิ่มขึ้นโดยรุ่น รองลงมา
ตรวจสอบให้แน่ใจว่าได้เพิ่มจุดเริ่มต้นใหม่ webpack.config.js สิ่งนี้จำเป็นสำหรับการสร้างโมดูลสแตนด์อโลน
ตรวจสอบให้แน่ใจว่าได้นำเข้าส่วนประกอบและเพิ่มในไฟล์ /src/components/library.ts ไฟล์นี้จะสามารถเข้าถึงได้เมื่อผู้ใช้นำเข้าไลบรารีทั้งหมด
เพิ่มชื่อแท็กส่วนประกอบในอาร์เรย์ /src/elements.ts ซึ่งสามารถช่วยได้ด้วยความเข้ากันได้ของ vue.js ในบางกรณี

เมื่อเวอร์ชันที่ถูกกระแทกใหม่ถูกส่งไปยังสาขา master จะทำให้การปรับใช้กับ NPM โดยอัตโนมัติ ( หลังจากการตรวจสอบอัตโนมัติทั้งหมดผ่านไป ) โดยใช้บัญชี Bitrock-admin