torus Download - ดาวน์โหลดซอร์สโค้ด torus

torus

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

Minor rendering bug fixes

ดาวน์โหลด

Torus ( `torus-dom` )

Torus เป็นเฟรมเวิร์ก UI แบบจำลองที่ขับเคลื่อนด้วยเหตุการณ์สำหรับเว็บมุ่งเน้นไปที่การเป็น ตัวเล็กมีประสิทธิภาพและปราศจากการพึ่งพา

คุณสามารถค้นหา? เอกสารเต็มรูปแบบสำหรับ Torus ที่นี่ในหน้า GitHub

Torus ยังมีคำอธิบายประกอบและอ่านง่ายของ codebase ทั้งหมด (ข้อตกลงที่ใกล้ชิด) ทั้งหมดในหน้า GitHub ตรวจสอบว่าคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการออกแบบเฟรมเวิร์กและวิธีการทำงานของ DOM และเทมเพลตเสมือนจริง!

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

วางแท็กสคริปต์นี้ใน HTML ของคุณ

 < script src =" https://unpkg.com/torus-dom/dist/index.min.js " > </ script >

... และโหลดสคริปต์นี้

 // every view extends Component or StyledComponent
class App extends Torus . StyledComponent {

    init ( ) {
        // initialize our local state
        this . count = 0 ;
    }

    styles ( ) {
        // we can define dynamically and efficiently injected
        //  styles for our component with styles(), like this.
        //  These styles are also automatically scoped to the
        //  component, and we can use the full, nested SCSS syntax.
        return css `
        font-family: system-ui, sans-serif;
        h1 {
            text-align: center;
        }
        button {
            padding: 4px 8px;
            &:hover {
                opacity: .8;
            }
        }
        ` ;
    }

    compose ( ) {
        // We define the structure of our component in compose(),
        //  using a JSX- and lit-html-like syntax as a template string.
        return jdom `<main>
            <h1>Hi! You clicked ${ this . count } times.</h1>
            <button onclick=" ${ ( ) => {
                this . count ++ ;
                this . render ( ) ;
            } } ">Count up!</button>
        </main>` ;
    }

}

// mount the app to the page
document . body . appendChild ( new App ( ) . node ) ;

คุณสมบัติ

- เล็กโดยไม่ต้องประนีประนอม

Torus ไม่มีการพึ่งพาการผลิตไม่จำเป็นต้องมีขั้นตอนการสร้างเพื่อใช้ประโยชน์จากคุณสมบัติทั้งหมดและมีน้ำหนักต่ำกว่า 5KB GZIPPED รวมถึงเครื่องยนต์เทมเพลตเครื่องแสดงผลส่วนประกอบและระบบเหตุการณ์และ Wrapper CSS-in-JS สิ่งนี้ทำให้การใช้และจัดส่งเป็นเรื่องง่ายสำหรับทุกสิ่งตั้งแต่การแสดงผลส่วนประกอบเดียวในหน้าไปจนถึงการสร้างแอปพลิเคชันเต็มรูปแบบ

? ‍ เร็วและตอบสนองโดยค่าเริ่มต้น

Torus ไม่ได้ออกแบบมาให้เป็นห้องสมุด Dom เสมือนที่เร็วที่สุด (มีทางเลือกที่ดีเช่น inferno ) แต่ประสิทธิภาพและการตอบสนองเป็นหนึ่งในเป้าหมายหลักของโครงการ ในขณะที่เหลืออยู่เล็ก ๆ Torus พยายามที่จะตอบสนองอย่างรวดเร็วและตอบสนองได้มากที่สุด โดยเฉพาะอย่างยิ่ง ในการแสดงผล เมื่อรวมกับขนาดมัดขนาดเล็กทำให้ Torus ดีสำหรับการสร้างเว็บแอปพลิเคชันสำหรับทุกที่บนอุปกรณ์ใด ๆ

พกพาผ่านแพลตฟอร์มเว็บ

สถาปัตยกรรมของ Torus ห่อหุ้มการเรนเดอร์ทั้งหมดและการอัปเดตตรรกะภายในส่วนประกอบของตัวเองดังนั้นจึงปลอดภัยที่จะใช้ Component#node และถือว่าเป็นตัวชี้ง่าย ๆ ไปยังองค์ประกอบรูท DOM ของส่วนประกอบ คุณสามารถย้ายไปรอบ ๆ หน้านำเข้าและออกจากเอกสารฝังไว้ในส่วนประกอบ React หรือ Vue หรือแม้กระทั่งส่วนประกอบของเว็บและใช้งานได้ทุกที่ที่สามารถใช้องค์ประกอบ DOM แบบดั้งเดิมได้ สิ่งนี้ช่วยให้คุณสามารถรวมส่วนประกอบของ Torus และแอพในสถาปัตยกรรมส่วนหน้าได้หลากหลาย

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

- ความเป็นสากลและการขยายความสามารถ

Torus ไม่ได้กังวลกับความเป็นสากล แต่ในฐานะนักพัฒนาเราสามารถใช้ APIs ที่มีให้กับเราทำให้เป็นไปได้ที่เป็นสากลในส่วนประกอบของ Torus ของเรา Torus เปิดเผยกระบวนการเรนเดอร์และ DOM เสมือนกับคุณนักพัฒนาและที่สำคัญช่วยให้เราสร้าง preprocessor ที่สามารถใช้ใน JDOM และปรับเปลี่ยนก่อนที่มันจะมาถึงการแสดงผลเพื่อให้เราสามารถปรับเปลี่ยน DOM ที่ผู้แสดงผลเห็นด้วยรหัสของเราเอง สิ่งนี้ทำให้ Torus ขยายได้สูงและเหมาะสำหรับ I18N อันที่จริงแล้วส่วนประกอบ Preprocessor API คือสิ่งที่ทำให้องค์ประกอบของ Torus Styled() เป็นไปได้ ( Styled() เพิ่มชื่อคลาสใหม่ให้กับ JDOM ก่อนที่ส่วนประกอบจะแสดงผล)

ตัวอย่างเช่นเราอาจสร้าง I18nComponent ซึ่งสามารถทำหน้าที่เป็นคลาสส่วนประกอบพื้นฐานสำหรับโครงการสากลเช่นนี้

 class I18nComponent extends Component {

    // The default preprocess method just returns the jdom as-is. We can override it
    //  to modify the JDOM given by component's `#compose()` method before it reaches the
    //  virtual DOM renderer.
    preprocess ( jdom , _data ) {
        // Here, we might recursively traverse the JDOM tree of children
        //  and call some custom `translate()` function on each string child
        //  and any displayed props like `placeholder` and `title`.
        //  As a trivial example, if we only cared about text nodes on the page,
        //  we could write...
        const translate = jdom => {
            if ( typeof jdom === 'string' ) {
                // translate text nodes
                return yourImplementationOfTranslateString ( jdom ) ;
            } else if ( Array . isArray ( jdom . children ) ) {
                // it's an object-form JDOM, so recursively translate children
                jdom . children = jdom . children . map ( yourImplementationOfTranslateString ) ;
                return jdom ;
            }
            return jdom ;
        }

        // In production, we'd also want to translate some user-visible properties,
        //  so we may also detect and translate attrs like `title` and `placeholder`.
        return translate ( jdom ) ;
    }

}

ตัวอย่าง

ฉัน (Linus) ใช้ Torus สำหรับโครงการส่วนตัวส่วนใหญ่ของฉันเมื่อฉันต้องการห้องสมุด UI ฝั่งไคลเอ็นต์ บางโครงการเหล่านี้รวมถึง:

CodeFrame ตัวแก้ไขรหัสออนไลน์
Mira แอปติดต่อ
Unim.press ผู้อ่าน Reddit สไตล์หนังสือพิมพ์
เครื่องคิดเลขกราฟ
ผู้อ่านข่าวแฮ็กเกอร์
1989.style คำถามเกี่ยวกับเพลง Taylor Swift
เสียงจากสถานที่

อิทธิพล

API ของ Torus เป็นส่วนผสมของอินเทอร์เฟซ declarative สำหรับการกำหนดส่วนต่อประสานและมุมมองของผู้ใช้และรูปแบบที่จำเป็นสำหรับการจัดการสถานะซึ่งโดยส่วนตัวแล้วฉันพบว่าเป็นความสมดุลที่ดีที่สุดของทั้งสองรูปแบบเมื่อสร้างแอปพลิเคชันขนาดใหญ่ ในการปฏิบัติทั่วไปส่วนประกอบควรพยายามที่จะยังคงมีการประกาศและ idempotent และโต้ตอบกับแบบจำลองข้อมูล / สถานะผ่าน API ที่จำเป็นต่อสาธารณะ

การออกแบบของ Torus ได้รับแรงบันดาลใจจากสถาปัตยกรรมที่ขับเคลื่อนด้วยส่วนประกอบของ React และยืมแนวคิดทั่วไปจากระบบนิเวศปฏิกิริยาเช่นความคิดของการกระจายใน DOM เสมือนจริงก่อนที่จะแสดงผลองค์ประกอบที่มีส่วนประกอบลำดับที่สูงขึ้นและการผสม CSS และมาร์กอัปลงในจาวาสคริปต์ แต่ Torus สร้างความคิดเหล่านั้นโดยการจัดหา API ระดับต่ำที่มีความคิดเห็นน้อยกว่าและมีความคิดเห็นน้อยกว่าและเลือกใช้โมเดลข้อมูลที่เป็นสถานะมากกว่าเลเยอร์มุมมอง/คอนโทรลเลอร์ที่มุ่งมั่นที่จะใช้งานได้อย่างหมดจด

Torus ยังยืมมาจาก Backbone ในการออกแบบแบบจำลองข้อมูลสำหรับบันทึกและร้านค้าสำหรับการออกแบบที่ขับเคลื่อนด้วยเหตุการณ์ที่อยู่เบื้องหลังวิธีการอัปเดตข้อมูลถูกผูกไว้กับมุมมองและรุ่นอื่น ๆ

สุดท้ายแท็กเทมเพลต jdom ของ Torus ได้รับแรงบันดาลใจจาก HTM และ LIT-HTML ทั้งสองแท็กเทมเพลตเพื่อประมวลผลมาร์กอัป HTML ลงใน DOM เสมือน

รันไทม์มากกว่าการรวบรวม

เครื่องมือพัฒนาส่วนหน้ามีแนวโน้มที่จะทำมากขึ้นเรื่อย ๆ ในเวลาสร้าง / คอมไพล์เวลาทำให้ไวยากรณ์ที่สมบูรณ์ยิ่งขึ้นและคุณสมบัติที่เป็นไปได้เช่นการใช้คุณสมบัติ JavaScript แบบติดตามข้อเสนอและ JSX Svelte เป็นตัวอย่างที่ยอดเยี่ยมของการรวบรวมเครื่องมือเวลาที่สามารถสร้างวิธีคิดที่แตกต่างอย่างเด็ดขาดเกี่ยวกับการสร้างส่วนต่อประสานผู้ใช้

Torus ไม่ได้พยายามเป็นเครื่องมือสร้างเวลาอื่น หนึ่งในเป้าหมายของ Torus คือการมีประโยชน์ที่สุดเท่าที่จะเป็นไปได้ ในขณะที่รันไทม์ ในขณะที่เสียสละประสิทธิภาพและค่าใช้จ่ายน้อยที่สุดเท่าที่จะทำได้ดังนั้นเราจึงสามารถกำจัดขั้นตอนการคอมไพล์ในการพัฒนา ด้วยเหตุนี้ Torus จึงเป็นประสบการณ์ที่เป็นมาตรฐานทองคำของแนวคิดส่วนต่อประสานผู้ใช้ต้นแบบ: เพียงแค่วางแท็ก <script> ในเอกสารและเริ่มเขียน ข้อเสียของการจัดลำดับความสำคัญของรันไทม์ในช่วงเวลาที่รวบรวมได้คือคุณสมบัติบางอย่างที่ไม่ได้เป็นส่วนหนึ่งของไวยากรณ์ JavaScript ไม่สามารถทำได้หากไม่มีขั้นตอนการคอมไพล์ โดยเฉพาะอย่างยิ่งไวยากรณ์ของ Ecmascript Decorator และไวยากรณ์ JSX เป็นไปไม่ได้ แต่จะมีประโยชน์อยู่ที่นั่นเพื่อเป็นขั้นตอนการคอมไพล์ในการสร้างแอพ Torus เราสามารถเขียนเทมเพลต JDOM ใน JSX ซึ่งคล้ายกันมากและห่อหุ้มวิธีการอัปเดตสถานะและผู้ฟังเหตุการณ์ใน @render และ @bind Decorators แทนที่จะเรียก this.render() และ .bind(this) ทุกกรณี

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

หมายเหตุเกี่ยวกับชิ้นส่วน

เฟรมเวิร์ก UI ที่มีการประกาศคล้ายกันเช่น React และ Preact ได้แนะนำแนวคิดของชิ้นส่วนซึ่งเป็นน้ำตาลไวยากรณ์สำหรับการแสดงผลอาเรย์ของ (เสมือน) โหนด DOM จากฟังก์ชั่น นี่เป็นเพราะในขณะที่การมีส่วนประกอบส่งคืนอาร์เรย์ของโหนดไม่สมเหตุสมผลด้วยตัวเองมันมักจะมีประโยชน์ที่จะมีฟังก์ชั่นภายในที่ส่งคืนชิ้นส่วนของส่วนประกอบและมุมมองเป็นโหนดที่ไม่มีองค์ประกอบห่อหุ้ม Torus สนับสนุนการแสดงอาร์เรย์ของรายการโหนด - เพียงแค่ห่อวัตถุ JDOM ในอาร์เรย์! แม้ว่าจะแตกต่างจาก React แต่ส่วนประกอบไม่สามารถแสดงผลได้มากกว่าหนึ่งโหนด แต่กรณีการใช้งานส่วนใหญ่ของชิ้นส่วนถูกปกคลุมด้วยความสามารถในการผ่านการแสดงรายการของโหนดในอาร์เรย์ภายในส่วนประกอบและสิ่งนี้ได้รับการสนับสนุนอย่างสังหรณ์ใจนอกกรอบใน Torus

ฉันได้เล่นด้วยความคิดในการแก้ไขแท็กเทมเพลต jdom เพื่อให้สามารถเปลี่ยนการแสดงเทมเพลตของชิ้นส่วนเช่น <>...</> เป็นอาร์เรย์ของโหนด jdom ยังสามารถแยกวิเคราะห์องค์ประกอบระดับบนสุดที่อยู่ติดกันในเทมเพลตและส่งคืนได้ในอาร์เรย์เดียว อย่างไรก็ตามฉันตัดสินใจที่จะไม่จัดส่งคุณสมบัติเหล่านี้ในตอนนี้เพราะฉันเชื่อว่ากรณีการใช้งานเหล่านี้ได้รับการคุ้มครองอย่างเพียงพอโดยความสามารถในการคืนค่า. .children ของเทมเพลต JDOM แม้อาจจะถูกห่อหุ้มไว้ในเครื่องหมาย <>...</> เครื่องหมายแฟรกเมนต์สำหรับการอ่าน ฉันขอขอบคุณความชัดเจนของขั้นตอนพิเศษที่เกี่ยวข้องในการส่งคืนอาร์เรย์ที่ไม่ใช่แบบดั้งเดิมจากการดำเนินการเรนเดอร์และฉันคิดว่าค่าใช้จ่ายในการกลับมาเป็นครั้งคราวเป็นตัวแทนระดับกลางของส่วนหนึ่งของมุมมองไม่คุ้มค่ากับค่าใช้จ่ายเพิ่มเติม

ความเข้ากันได้

Torus ใช้สัญลักษณ์แผนที่และชุดดังนั้นจึงเข้ากันได้กับรุ่นล่าสุดของเบราว์เซอร์ที่สำคัญทั้งหมดยกเว้น Internet Explorer 11 บนเบราว์เซอร์รุ่นเก่าที่ไม่รองรับเช่นผู้ประกอบการสเปรดอาเรย์อาร์เรย์คุณอาจต้องเปลี่ยนไลบรารีไปยัง ES5 โดยใช้เครื่องมือเช่น Babel

การติดตั้งและการใช้งาน

คุณสามารถติดตั้ง Torus จาก NPM เป็น torus-dom Torus ยังถือว่า เป็นเบต้า และยังไม่ได้เปิดตัว 1.0 ฉันเชื่อว่า API นั้นมีเสถียรภาพในขณะนี้และข้อบกพร่องที่สำคัญส่วนใหญ่ได้ถูกบีบ แต่ไม่มีการรับประกันจนถึง 1.0

npm install --save torus-dom
# or
yarn add torus-dom

 import { StyledComponent , Record , Store , Router } from 'torus-dom' ;

หรือคุณสามารถนำเข้า Torus ด้วย:

 < script src =" https://unpkg.com/torus-dom/dist/index.min.js " > </ script >

Torus จะส่งออก globals เริ่มต้นทั้งหมดไปยัง window.Torus ดังนั้นพวกเขาจึงสามารถเข้าถึงได้เป็นชื่อทั่วโลกไปยังสคริปต์ของคุณ สิ่งนี้ไม่แนะนำในแอพการผลิต แต่เหมาะสำหรับการทดลอง

การบริจาค

หากคุณพบข้อบกพร่องโปรดเปิดปัญหาหรือใส่คำขอดึงด้วยการทดสอบเพื่อสร้างข้อผิดพลาดใหม่กับสิ่งที่คุณคาดว่าจะทำ หากคุณมีคำขอคุณสมบัติฉันอาจไม่ได้ให้เกียรติเพราะ Torus ถูกสร้างขึ้นเพื่อให้เหมาะกับเวิร์กโฟลว์ส่วนตัวและการตั้งค่าสถาปัตยกรรมของฉัน แต่ฉันเปิดรับความคิดเห็นของคุณ! ดังนั้นอย่าลังเลที่จะเปิดปัญหาด้วยความคาดหวังว่าฉันอาจไม่ได้ตัดสินใจที่จะเพิ่มคุณลักษณะให้กับ Torus (โดยเฉพาะอย่างยิ่งถ้ามันจะพองขนาดชุดมัดหรือต้องการ transpiler)

สร้าง

คุณสามารถใช้ทั้ง NPM และเส้นด้ายเพื่อพัฒนา torus แต่สคริปต์ NPM ใช้เส้นด้ายและเส้นด้ายได้รับการสนับสนุนอย่างเป็นทางการเนื่องจากเป็นสิ่งที่ฉันใช้ในการพัฒนาและสร้าง Torus

เพื่อสร้าง Torus จากแหล่งที่มาวิ่ง

yarn build

สิ่งนี้จะเรียกใช้ ./src/torus.js ผ่านเครื่องมือที่กำหนดเองก่อนที่จะลบฟังก์ชั่นการดีบักใด ๆ และเรียกใช้ผลลัพธ์ที่ผ่าน WebPack ผ่านทั้ง development และโหมด production เอาต์พุตทั้งสองรวมถึง Torus รุ่นวานิลลาที่ไม่มีการประมวลผล webpack จะถูกบันทึกไว้ที่ ./dist/ / Running yarn clean จะลบสิ่งประดิษฐ์การสร้างดังกล่าวรวมถึงรายงานความคุ้มครองที่สร้างขึ้น