unified
v1.5.0
Interface unificada para definir componentes para Vue e React usando uma única base de código.
O Inkline é escrito e mantido por @alexgrozav.
Página inicial · Documentação · Livro de Histórias · Playground · Rastreador de edição
npm install .npm run test na linha de comando. @inkline/paper como @inkline/paper/vue ou @inkline/paper/react .@inkline/paper => @inkline/paper/vue@inkline/paper => @inkline/paper/react Importe a interface de definição de componente comum do @inkline/paper e decida se você está criando uma biblioteca para vue ou react no momento da construção.
Configure tsconfig.json para usar as funções de fábrica HSX h e Fragment JSX.
{
"compilerOptions": {
"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment"
}
}
h ( type : string , props : Record < string , any > , children : ( VNode | string ) [ ] ) : VNode A função de guia h() é usada para criar elementos.
import { h } from '@inkline/paper' ;
const type = 'button' ;
const props = { id : 'button' } ;
const children = [ 'Hello world' ] ;
const node = h ( type , props , children ) ;Também serve como uma fábrica da JSX.
import { h } from '@inkline/paper' ;
const node = < div id = "myid" > Hello world! </ div > defineComponent < Props , State > ( definition : ComponentDefinition < Props , State > ) A função defineComponent() é usada para configurar internações específicas da estrutura e obter anotações do 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 } ) A função render() é obrigatória e é usada para retornar a marcação do componente usando a elevação.
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 ) } ) A função setup() é usada para preparar funções.
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 ) A variável ref funciona semelhante ao vue.js ref . Para acessar ou definir o valor de uma variável de referência, acessar ou manipular seu campo value diretamente.
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 os adereços usando o campo props , usando o mesmo formato usado em vue.js.
A função setup() recebe os valores de suporte definidos com o padrão 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)
A matriz slots permite definir vários nomes de slots para o componente. Fora da caixa, o slot default é predefinido.
A função slot() está disponível no contexto de execução da função de renderização.
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)
A matriz emits permite definir emissores de eventos.
emit()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 ( ) } /> Alex Grozav
Se você usa a Inkline em seu trabalho diário e sente que facilitou sua vida, considere me patrocinar os patrocinadores do Github. ?
Página inicial e documentação Copyright 2017-2022 Autores de tinta. Documentos divulgados sob licença ISC.
