unified 다운로드 - 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 Factory 함수를 사용하십시오.

 {
    "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 > } )

vue.js에 사용 된 것과 동일한 형식을 사용하여 props 필드를 사용하여 소품을 정의하십시오.

setup() 함수는 기본값을 폴백으로 정의 된 소품 값을 수신합니다.

 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의 경우 aviation 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 ( ) } />

창조자

Alex Grozav

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

일상 업무에서 Inkline을 사용하고 그것이 당신의 삶을 더 쉽게 만들어 주었다고 생각한다면, Github 스폰서를 후원하는 것을 고려하십시오. ?

저작권 및 라이센스

확장하다

unified

잉크 라인 - 통합

현지에서 실행

설정

용법

요소를 만듭니다

구성 요소를 정의하십시오

렌더링 함수

설정 함수

참조 변수

계산 된 변수

제공하고 주입하십시오

소품

슬롯

이벤트

창조자

저작권 및 라이센스

v folder

ng vcl

xant

BldHelper(볼랜드 개발자 도우미)

vue component creator plugin

empathy

chat.petals.dev

GPT Prompt Templates

GPTyped

v folder

ng vcl

xant

Google Dorks

shepherd

mongo express