Téléchargement unified - Téléchargement du code source unified

Inkline - Unified

Interface unifiée pour définir des composants pour VUE et réagir à l'aide d'une seule base de code.

L'inkline est écrite et maintenue par @alexgrozav.

Page d'accueil · Documentation · Storybook · Playground · Problème Tracker

Courir localement

Tout d'abord, installez les dépendances à l'aide de npm install .
Dans le répertoire racine, exécutez npm run test dans la ligne de commande.

Installation

Définissez un alias dans votre système de construction pour résoudre @inkline/paper sur @inkline/paper/vue ou @inkline/paper/react .

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

Importez l'interface de définition des composants communs à partir de @inkline/paper et décidez si vous créez une bibliothèque pour vue ou react au moment de la construction.
Configurez tsconfig.json pour utiliser les fonctions d'usine JSX h et Fragment personnalisées.

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

Usage

Créer un élément

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

La fonction de levage h() est utilisée pour créer des éléments.

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

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

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

Il sert également d'usine JSX.

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

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

Définir le composant

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

La fonction defineComponent() est utilisée pour configurer les internes spécifiques au framework et obtenir des annotations de type.

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

Rendre la fonction

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

La fonction render() est obligatoire et est utilisée pour retourner le balisage des composants à l'aide de levage.

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

Fonction de configuration

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

La fonction setup() est utilisée pour préparer des fonctions.

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

Variables de référence

 ref < Type > ( defaultValue : Type )

La variable ref fonctionne similaire au Vue.js ref . Pour accéder ou définir la valeur d'une variable de référence, accéder ou manipuler directement son champ 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 />

Variables calculées

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

Fournir et injecter

 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 >

Accessoires

 defineComponent ( { props : ComponentProps < Props > } )

Définissez les accessoires à l'aide du champ props , en utilisant le même format utilisé dans Vue.js.

La fonction setup() reçoit les valeurs de l'hélice définie avec la valeur par défaut comme une secours.

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

Machines à sous

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

Le tableau slots vous permet de définir plusieurs noms de créneaux pour le composant. Hors de la boîte, la fente default est prédéfinie.

La fonction slot() est disponible dans le contexte d'exécution de la fonction de rendu.

 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 >

Événements

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

Le tableau emits vous permet de définir des émetteurs d'événements.

Pour Vue.js, cela utilise la fonction emit() native
Pour React.js, cela crée un rappel 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 ( ) } />

Créateur

Alex Grozav

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

Si vous utilisez Inkline dans votre travail quotidien et pensez que cela vous a facilité la vie, veuillez envisager de me parrainer sur les sponsors GitHub. ?