unified
v1.5.0
Interfaz unificada para definir componentes para VUE y reaccionar usando una única base de código.
Inkline es escrita y mantenida por @alexgozav.
Página de inicio · Documentación · Libro de cuentos · Playground · Tracker de emisión
npm install .npm run test en la línea de comando. @inkline/paper en @inkline/paper/vue o @inkline/paper/react .@inkline/paper => @inkline/paper/vue@inkline/paper => @inkline/paper/react Importe la interfaz de definición de componentes comunes desde @inkline/paper y decida si está creando una biblioteca para vue o react en la hora de compilación.
Configure tsconfig.json para usar las funciones de fábrica h y Fragment JSX personalizadas.
{
"compilerOptions": {
"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment"
}
}
h ( type : string , props : Record < string , any > , children : ( VNode | string ) [ ] ) : VNode La función de polipasto h() se usa para crear elementos.
import { h } from '@inkline/paper' ;
const type = 'button' ;
const props = { id : 'button' } ;
const children = [ 'Hello world' ] ;
const node = h ( type , props , children ) ;También sirve como una fábrica JSX.
import { h } from '@inkline/paper' ;
const node = < div id = "myid" > Hello world! </ div > defineComponent < Props , State > ( definition : ComponentDefinition < Props , State > ) La función defineComponent() se utiliza para configurar las partes internas específicas de marco y obtener anotaciones de tipo.
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 } ) La función render() es obligatoria y se usa para devolver el marcado de componentes usando el elevación.
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 ) } ) La función setup() se usa para preparar funciones.
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 ) La variable ref funciona de manera similar al Vue.js ref . Para acceder o establecer el valor de una variable de referencia, acceda o manipule su campo value directamente.
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 > } ) Defina los accesorios utilizando el campo props , utilizando el mismo formato utilizado en Vue.js.
La función setup() recibe los valores de PROP definidos con predeterminado como 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" } /> defineComponent({ slots: string[] })` and `renderContext.slot(slotName)
La matriz slots le permite definir múltiples nombres de ranuras para el componente. Fuera de la caja, la ranura default está predefinida.
La función slot() está disponible en el contexto de ejecución de la función Render.
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)
La matriz emits te permite definir los emisores de eventos.
emit() nativaon[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 ( ) } /> Alex Grozav
Si usa Inkline en su trabajo diario y siente que le ha hecho la vida más fácil, considere patrocinarme en los patrocinadores de GitHub. ?
Página de inicio y documentación Copyright 2017-2022 Autores de la línea de tinta. Docs lanzados bajo la licencia ISC.
