unified

غير خط - موحد

واجهة موحدة لتحديد مكونات VUE والتفاعل باستخدام قاعدة رمز واحد.

تتم كتابة الخط الداخلي والاحتفاظ به بواسطة @alexgrozav.

الصفحة الرئيسية · الوثائق · قصص · ملعب · إصدار تعقب

الجري محليا

1. أولاً ، تثبيت التبعيات باستخدام npm install .
2. من دليل الجذر ، قم بتشغيل npm run test في سطر الأوامر.

يثبت

1. قم بتعيين الاسم المستعار في نظام الإنشاء الخاص بك لحل @inkline/paper إما @inkline/paper/vue أو @inkline/paper/react .

• @inkline/paper => @inkline/paper/vue
• @inkline/paper => @inkline/paper/react

2. استيراد واجهة تعريف المكون الشائع من @inkline/paper وتحديد ما إذا كنت تقوم بإنشاء مكتبة لـ vue أو react في وقت البناء.

3. تكوين tsconfig.json لاستخدام وظائف مصنع H Custom h و Fragment .

 {
    "compilerOptions": {
        "jsx": "preserve",
        "jsxFactory": "h",
        "jsxFragmentFactory": "Fragment"
    }
}

الاستخدام

إنشاء عنصر

 h ( type : string , props : Record < string , any > , children : ( VNode | string ) [ ] ) : VNode

يتم استخدام وظيفة الرافعة h() لإنشاء عناصر.

 import { h } from '@inkline/paper' ;

const type = 'button' ;
const props = { id : 'button' } ;
const children = [ 'Hello world' ] ;

const node = h ( type , props , children ) ;

كما أنه بمثابة مصنع JSX.

 import { h } from '@inkline/paper' ;

const node = < div id = "myid" > Hello world! </ div >

---

تحديد المكون

 defineComponent < Props , State > ( definition : ComponentDefinition < Props , State > )

يتم استخدام وظيفة defineComponent() لإنشاء الداخلية الخاصة بالإطار والحصول على تعليقات من النوع.

 import { defineComponent , h } from '@inkline/paper' ;

const Component = defineComponent ( {
    render ( ) {
        return h ( 'div' ) ;
    }
} ) ; 

 import { defineComponent , h } from '@inkline/paper' ;

const Component = defineComponent ( {
    render ( ) {
        return < div /> ;
    }
} ) ;

vue.js

 < component />

React.JS

 < Component />

---

تقديم وظيفة

 defineComponent ( { render ( state : Props & State , ctx : RenderContext ) : VNode } )

وظيفة render() إلزامية وتستخدم لإرجاع ترميز المكون باستخدام الرفع.

 import { defineComponent , h } from '@inkline/paper' ;

const Component = defineComponent ( {
    render ( ) {
        return h ( 'button' , { } , 'Hello world' ) ;
    }
} ) ; 

 import { defineComponent , h } from '@inkline/paper' ;

const Component = defineComponent ( {
    render ( ) {
        return < button > Hello world </ button > ;
    }
} ) ;

vue.js

 < component />

React.JS

 < Component />

---

وظيفة الإعداد

 defineComponent ( { setup ( props : Props , ctx : SetupContext ) } )

يتم استخدام وظيفة setup() لإعداد الوظائف.

 import { defineComponent , h } from '@inkline/paper' ;

const Component = defineComponent < { } , { text : string } > ( {
    setup ( ) {
        return {
            text : "Hello world"
        } ;
    } ,
    render ( state ) {
        return h ( 'button' , { } , [
            state . text
        ] ) ;
    }
} ) ; 

 import { defineComponent , h } from '@inkline/paper' ;

const Component = defineComponent < { } , { text : string } > ( {
    setup ( ) {
        return {
            text : "Hello world"
        } ;
    } ,
    render ( state ) {
        return < button > { state . text } </ button > ;
    }
} ) ;

vue.js

 < component />

React.JS

 < Component />

---

المتغيرات المرجعية

 ref < Type > ( defaultValue : Type )

يعمل متغير ref المشابه لـ Vue.js ref . للوصول إلى أو تعيين قيمة متغير مرجعي ، الوصول إلى حقل value أو معالجته مباشرة.

 import { defineComponent , ref , h , Ref } from '@inkline/paper' ;

const Component = defineComponent < { } , { text : Ref < string > , onClick : ( ) => void } > ( {
    setup ( ) {
        const text = ref ( 'Hello world' ) ;
        
        const onClick = ( ) => {
            text . value = 'Bye world' ;
        }
        
        return {
            text ,
            onClick
        } ;
    } ,
    render ( state ) {
        return h ( 'button' , { onClick : state . onClick } , [
            state . text . value
        ] ) ;
    }
} ) ;

vue.js

 < component />

React.JS

 < Component />

---

المتغيرات المحسوبة

 computed < Type > ( ( ) => Type ) 

 import { defineComponent , ref , h , Ref } from '@inkline/paper' ;

const Component = defineComponent < { value : number ; } , { double : Ref < number > } > ( {
    setup ( props ) {
        const double = computed ( ( ) => props . value * 2 ) ;
        
        return {
            double
        } ;
    } ,
    render ( state ) {
        return h ( 'button' , { } , [
            state . double . value
        ] ) ;
    }
} ) ;

vue.js

 < component />

React.JS

 < Component />

---

توفير وحقن

 provide < Type > ( identifier : string , value : Type ) 
inject < Type > ( identifier : string , defaultValue ?: Type ) : Type 

 import { defineComponent , ref , h , Ref } from '@inkline/paper' ;

const identifier = Symbol ( 'identifier' ) ;

const Provider = defineComponent < { } , { } > ( {
    setup ( props , ctx ) {
        ctx . provide ( identifier , 'value' ) ;
        
        return { } ;
    } ,
    render ( state , ctx ) {
        return h ( 'div' , { } , [
            ctx . slot ( )
        ] ) ;
    }
} ) ;

const Consumer = defineComponent < { } , { value ?: string ; } > ( {
    setup ( props , ctx ) {
        const value = inject ( identifier , 'defaultValue' ) ;
        
        return { value } ;
    } ,
    render ( state , ctx ) {
        return h ( 'div' , { } , [
            ` ${ state . value } `
        ] ) ;
    }
} ) ;

vue.js

 < provider >
    < consumer />
</ provider >

React.JS

 < Provider >
    < Consumer />
</ Provider >

---

الدعائم

 defineComponent ( { props : ComponentProps < Props > } )

حدد الدعائم باستخدام حقل props ، باستخدام نفس التنسيق المستخدم في Vue.js.

تستقبل دالة setup() قيم PROP المحددة مع الافتراضي كاحتفال.

 import { defineComponent , h } from '@inkline/paper' ;

const Component = defineComponent < { text : string } , { } > ( {
    props : {
        text : {
            type : String ,
            default : ( ) => 'Hello world'
        }
    } ,
    render ( state ) {
        return h ( 'button' , { } , [
            state . text
        ] ) ;
    }
} ) ;

vue.js

 < component text =" Button " />

React.JS

 < Component text = { "Button" } />

---

فتحات

 defineComponent({ slots: string[] })` and `renderContext.slot(slotName)

تتيح لك صفيف slots تحديد أسماء فتحات متعددة للمكون. خارج الصندوق ، يتم تعريف الفتحة default مسبقًا.

تتوفر وظيفة slot() في سياق تنفيذ دالة العرض.

 import { defineComponent , h } from '@inkline/paper' ;

const Component = defineComponent ( {
    slots : [ 'header' , 'footer' ] ,
    render ( state , ctx ) {
        return h ( 'div' , { class : 'card' } , [
            ctx . slot ( 'header' ) ,
            ctx . slot ( ) , // Default slot
            ctx . slot ( 'footer' ) ,
        ] ) ;
    }
} ) ;

vue.js

 < component >
    < template #header > Header </ template >
    Body
    < template #footer > Header </ template >
</ component >

React.JS

 < Component >
    < Component . Header > Header </ Component . Header >
    Body
    < Component . Footer > Header </ Component . Footer >
</ Component >

---

الأحداث

 defineComponent({ emits: string[] })` and `setupContext.emit(eventName, ...args)

تتيح لك مجموعة emits تحديد بواعث الأحداث.

• بالنسبة لـ Vue.js ، يستخدم هذا وظيفة emit() الأصلية
• لـ React.js ، هذا يخلق رد اتصال on[EventName]

 import { defineComponent , h } from '@inkline/paper' ;

const Component = defineComponent < { } , { emitChange : ( ) => void } > ( {
    emits : [ 'change' ] ,
    setup ( props , ctx ) {
        const emitChange = ( ) => {
            ctx . emit ( 'change' ) ;
        } 
        
        return { emitChange } ;
    } ,
    render ( state , ctx ) {
        return h ( 'button' , { onClick : state . emitChange } , [ ctx . slot ( ) ] ) ;
    }
} ) ;

vue.js

 < component @change =" doSomething " />

React.JS

 < Component onChange = { ( ) => doSomething ( ) } /> 

الخالق

أليكس جروزاف

• https://grozav.com
• https://twitter.com/alexgrozav
• https://facebook.com/alexgrozav
• https://github.com/alexgrozav

إذا كنت تستخدم خط Inkline في عملك اليومي وشعرت أنه جعل حياتك أسهل ، فيرجى التفكير في رعايتي على رعاة GitHub. ؟

حقوق الطبع والنشر والترخيص

الصفحة الرئيسية والتوثيق حقوق الطبع والنشر 2017-2022 مؤلفي inkline. مستندات تم إصدارها بموجب ترخيص ISC.