unified Download - unified Sourced Code скачать

Чернистая линия - Unified

Унифицированный интерфейс для определения компонентов для VUE и реагировать с использованием одной кодовой базы.

Inkline написан и поддерживается @alexgrozav.

Домашняя страница · Документация · Справочник · Игровая площадка · Трекер выпуска

Бег на местном уровне

Во -первых, установите зависимости, используя npm install .
Из корневого каталога запустите npm run test в командной строке.

Настраивать

Установите псевдоним в системе сборки, чтобы разрешить @inkline/paper на @inkline/paper/vue или @inkline/paper/react .

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

Импортируйте общий интерфейс определения компонентов из @inkline/paper и решите, создаете ли вы библиотеку для vue или react во время сборки.
Настройте tsconfig.json для использования настраиваемых функций h и Fragment JSX.

 {
    "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 это использует функцию Native 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. ?