unified Download - unified Quellcode -Download

Inkline - Unified

Einheitliche Schnittstelle zum Definieren von Komponenten für VUE und Reagieren mit einer einzelnen Codebasis.

Inkline wird von @alexgrozav geschrieben und gepflegt.

Homepage · Dokumentation · Storybook · Spielplatz · Ausgabe Tracker

Vor Ort laufen

Installieren Sie zunächst Abhängigkeiten mit npm install .
Führen Sie aus dem Root -Verzeichnis npm run test in der Befehlszeile aus.

Aufstellen

Stellen Sie einen Alias in Ihrem Build -System ein, um @inkline/paper entweder auf @inkline/paper/vue oder @inkline/paper/react zu lösen.

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

Importieren Sie die Schnittstelle zur Common Component Definition aus @inkline/paper und entscheiden Sie, ob Sie eine Bibliothek für vue erstellen oder zur Build -Zeit react .
Konfigurieren Sie tsconfig.json so, dass sie die kundenspezifischen h und Fragment -JSX -Fabrikfunktionen verwenden.

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

Verwendung

Element erstellen

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

Die Hebezeuge h() wird verwendet, um Elemente zu erstellen.

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

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

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

Es dient auch als JSX -Fabrik.

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

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

Komponente definieren

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

Mit der defineComponent() -Funktion werden frameworkspezifische Interna eingerichtet und Typanmerkungen abgerufen.

 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 />

Funktionsfunktion

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

Die render() -Funktion ist obligatorisch und wird verwendet, um das Komponentenmarkup mitheißen zu geben.

 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 />

Setup -Funktion

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

Die Funktion setup() wird zur Erstellung von Funktionen verwendet.

 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 />

Referenzvariablen

 ref < Type > ( defaultValue : Type )

Die ref -Variable funktioniert ähnlich dem Vue.js ref . So greifen Sie auf den Wert einer Referenzvariablen zu oder stellen Sie das value auf oder manipulieren Sie das Feld direkt.

 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 />

Berechnete Variablen

 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 />

Bereitstellen und injizieren

 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 >

Requisiten

 defineComponent ( { props : ComponentProps < Props > } )

Definieren Sie die Requisiten mit dem Feld props unter Verwendung desselben Formats, das in Vue.js.

Die Funktion setup() empfängt die definierten Prop -Werte mit Standard als Fallback.

 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" } />

Slots

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

Mit dem slots -Array können Sie mehrere Slot -Namen für die Komponente definieren. Aus dem Box ist der default vordefiniert.

Die Funktion slot() ist im Kontext der Renderfunktion auszuführen.

 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 >

Ereignisse

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

Mit dem emits -Array können Sie Ereignisemitter definieren.

Für Vue.js verwendet dies die native emit() -Funktion
Für React.js schafft dies einen Rückruf 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 ( ) } />

Schöpfer

Alex Grozav

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

Wenn Sie Inkline in Ihrer täglichen Arbeit verwenden und das Gefühl haben, dass es Ihnen das Leben erleichtert hat, sollten Sie mich für Github -Sponsoren sponsert. ?