avalon 다운로드 avalon 소스 코드 다운로드

아발론

단일 페이지 웹 애플리케이션을 구축하기위한 JavaScript Micro-Framework

설치하다

CJS, ESM, UMD 버전을 다운로드하거나 NPM을 통해 설치하십시오.

npm install @ryanmorr/avalon

용법

Avalon은 웹 앱의 상태, 라우팅 및보기를 관리하기위한 올인원 솔루션입니다.

 import avalon from '@ryanmorr/avalon' ;

const app = avalon ( {
    count : 0
} ) ;

app . mutation ( 'increment' , ( { count } ) => {
    return {
        count : count + 1
    } ;
} ) ;

app . action ( 'handleClick' , ( { commit } ) => {
    commit ( 'increment' ) ;
} ) ;

app . view ( parent , ( html , { count } , dispatch ) => html `
    < div >
        < p > Count: ${ count } </ p >
        < button onclick = ${ dispatch ( 'handleClick' ) } > Increment </ button >
    </ div >
` ) ;

todomvc 예제를 확인하십시오.

API

`avalon(state?)`

초기 상태가 일반 키/값 객체로서의 응용 프로그램 인스턴스를 만듭니다. title 속성은 현재 문서 제목에 예약되어 있으며 변경 사항은 문서 제목을 자동으로 업데이트합니다.

 const app = avalon ( {
    title : 'Hello World' ,
    foo : 1 ,
    bar : 2
} ) ;

`mutation(name, callback)`

응용 프로그램 상태로 병합 될 부분 상태 객체를 반환하여 상태를 동기로 변경하는 이름과 콜백 함수를 제공하여 돌연변이를 정의하십시오.

 app . mutation ( 'foo' , ( state , payload ) => {
    return {
        foo : payload
    } ;
} ) ;

`commit(name, payload?)`

이름과 선택적 페이로드를 제공하여 응용 프로그램 상태를 업데이트하려면 돌연변이를 호출하고 돌연변이로 인한 부분 상태를 반환합니다.

 app . mutation ( 'foo' , ( state , n ) => ( { foo : n + 10 } ) ) ;

app . commit ( 'foo' , 10 ) ; //=> {foo: 20}

`action(name, callback)`

DOM 이벤트 리스너에 응답하고, 비동기 작업을 수행하고, 다른 동작을 파견하고, 돌연변이를 커밋하는 데 사용될 수있는 이름과 콜백 함수를 제공하여 동작을 정의하십시오. 동작 콜백 함수는 관련 데이터 및 편의 함수의 첫 번째 매개 변수로 제공됩니다.

 app . action ( 'foo' , ( { state , params , event , dispatch , commit , navigate , redirect , emit } ) => {
    /**
     * state - the current state of the app
     * params - key/value object provided to the dispatcher or null if not provided
     * event - the event object of user triggered DOM events or null if not applicable
     * commit - function for calling mutations
     * dispatch - function for dispatching actions or routes
     * navigate - function for navigating to a URL path and dispatching a route
     * redirect - function for redirecting to a URL path and dispatching a route
     * emit - function for emitting a custom event
     */
} ) ;

Async 작업을 더 잘 지원하려면 Action Callback 함수의 서명의 일부로 호출을 해결하기위한 두 번째 매개 변수를 정의하십시오 (통화 거부를위한 세 번째 매개 변수). 비동기 동작을 파견하면 자동으로 약속이 반환됩니다. 다음은 서버에서 데이터를 가져 오기 위해 비동기 조치를 구현할 수있는 방법의 예입니다.

 app . action ( 'load' , ( { params , commit } , resolve , reject ) => {
    commit ( 'isLoading' , true ) ;
    request ( '/get' , params ) . then ( ( data ) => {
        commit ( 'isLoading' , false ) ;
        commit ( 'setData' , data ) ;
        resolve ( data ) ;
    } ) . catch ( ( error ) => {
        commit ( 'isLoading' , false ) ;
        commit ( 'setError' , error ) ;
        reject ( error ) ;
    } ) ;
} ) ;

app . dispatch ( 'load' , { id : 'foo' } ) . then ( ( data ) => {
    // Handle data
} ) . catch ( ( error ) => {
    // Handle error
} ) ;

`route(path, callback)`

경로는 사용자 트리거 클릭 이벤트 및 양식 제출, navigate 및 redirect 메소드에 대한 프로그래밍 방식 호출, 세션 기록 스택에서 앞뒤로 이동하는 것과 같은 URL 경로의 변경에 응답하는 것을 제외하고 동작과 똑같이 작동합니다. 경로는 선행 전진 슬래시로 정의되어야합니다.

 app . route ( '/' , ( { state , path , params , event , dispatch , commit , navigate , redirect , emit } ) => {
    /**
     * state - the current state of the app
     * path - the URL path that matched the route
     * params - key/value object extracted from a route's parameters or null if static path
     * event - the event object of user triggered DOM events or null if not applicable
     * commit - function for calling mutations
     * dispatch - function for dispatching actions or routes
     * navigate - function for navigating to a URL path and dispatching a route
     * redirect - function for redirecting to a URL path and dispatching a route
     * emit - function for emitting a custom event
     */
} ) ;

경로는 매개 변수, 선택적 매개 변수 및 와일드 카드를 지원합니다.

 // Matches routes like "/a/b/c" and "/x/y/z"
app . route ( '/:foo/:bar/:baz' , ( { params : { foo , bar , baz } } ) => {
    // Do something
} ) ;

// Matches routes like "/a/b" and "/a"
app . route ( '/:foo/:bar?' , ( { params : { foo , bar } } ) => {
    // Do something
} ) ;

// Matches routes like "/", "/a", and "/a/b/c"
app . route ( '/*' , ( { params : { wildcard } } ) => {
    // Do something
} ) ;

`dispatch(name?, params?)`

선택적 매개 변수 또는 경로로 작업을 발송합니다. 인수가 제공되지 않으면 현재 URL 경로는 기본적으로 사용됩니다. 작업/경로 콜백 함수의 반환 값 또는 비동기 동작/경로 인 경우 약속을 반환합니다.

 // Dispatch an action with parameters
app . dispatch ( 'foo' , { foo : 1 , bar : 2 } ) ;

// Dispatch the first matching route (parameters are extracted from the URL path)
app . dispatch ( '/foo/bar/baz' ) ;

// Dispatching an async action/route returns a promise
app . dispatch ( 'load' ) . then ( ( data ) => {
    // Do something
} )

`view(element, callback)`

상태가 변경 될 때 가상 DOM을 통해 즉시 렌더링되고 자동으로 업데이트 될 뷰를 정의하십시오. View Callback 함수는 태그가 지정된 템플릿, 현재 상태 및 옵션 매개 변수를 키/값 객체를 가진 DOM 이벤트 리스너의 결과로서 태그 된 템플릿, 현재 상태 및 편리한 디스패치 기능을 통해 가상 DOM 빌더가 제공됩니다.

 app . view ( parentElement , ( html , state , dispatch ) => html `
    < div >
        < p > Name: ${ state . name } </ p >
        < button onclick = ${ dispatch ( 'handleClick' , { foo : 1 , bar : 2 } ) } > Increment </ button >
    </ div >
` ) ;

보기는 문자열 또는 객체로서의 속성/속성, CSS 스타일, "ON"의 접두사, 효율적인 목록 Diff를위한 키 노드 및 무국적 기능 구성 요소로 표시된 이벤트 리스너를 지원합니다.

 const Item = ( html , props , dispatch ) => html `
    < li key = ${ props . id } onclick = ${ dispatch ( 'handleClick' , { id : props . id } ) } >
        ${ props . children }
    </ li >
` ;

app . view ( parentElement , ( html , state ) => html `
    < ul class =" list " >
        ${ state . items . map ( ( item ) => html `
            < ${ Item } id = ${ item . id } > ${ item . name } </ />
        ` ) }
    </ ul >
` ) ;

`navigate(path)`

제공된 URL 경로로 새로운 항목을 기록 스택으로 밀고 첫 번째 일치하는 경로를 발송합니다. 경로 콜백 함수의 반환 값 또는 비동기 경로 인 경우 약속을 반환합니다.

 app . route ( '/foo' , ( ) => 'bar' ) ;

app . path ( ) ; //=> "/"
history . length ; //=> 0

app . navigate ( '/foo' ) ; //=> "bar"

app . path ( ) ; //=> "/foo"
history . length ; //=> 1

`redirect(path)`

현재 이력 항목을 제공된 URL 경로로 대체하고 첫 번째 일치하는 경로를 발송합니다. 경로 콜백 함수의 반환 값 또는 비동기 경로 인 경우 약속을 반환합니다.

 app . route ( '/foo' , ( ) => 'bar' ) ;

app . path ( ) ; //=> "/"
history . length ; //=> 0

app . redirect ( '/foo' ) ; //=> "bar"

app . path ( ) ; //=> "/foo"
history . length ; //=> 0

`on(name, callback)`

응용 프로그램 이벤트를 구독하고 해당 특정 리스너를 제거하는 기능을 반환합니다.

 // Listen for state changes
app . on ( 'mutation' , ( name , nextState , prevState , partialState ) => {
    // Do something
} ) ;

// Listen for when an action/route is dispatched
app . on ( 'dispatch' , ( type , state , name , params , event , returnValue ) => {
    // Do something
} ) ;

// Listen for when the URL path changes
app . on ( 'pathchange' , ( path ) => {
    // Do something
} ) ;

// Listen for when a view has been rendered
app . on ( 'render' , ( parentElement ) => {
    // Do something
} ) ;

// Define your own custom event with parameters
const stop = app . on ( 'foo' , ( a , b , c , d ) => {
    // Do something
} ) ;

// Stop listening for custom event
stop ( ) ;

`emit(name, ...args?)`

옵션 인수로 사용자 정의 이벤트를 트리거하십시오.

 app . on ( 'foo' , ( a , b , c , d ) => {
    // Do something
} ) ;

app . emit ( 'foo' , 1 , 2 , 3 , 4 ) ;

`state()`

현재 상태 개체 가져 오기 :

 const app = avalon ( {
    title : 'Hello World'
    foo : 1 ,
    bar : 2
} ) ;

app . state ( ) ; //=> {title: "Hello World", foo: 1, bar: 2}

`path()`

현재 URL 경로 가져 오기 :

 app . navigate ( '/foo' ) ;

app . path ( ) ; //=> "/foo"

`use(plugin)`

응용 프로그램 인스턴스 및 현재 상태로 즉시 호출되는 콜백 함수를 제공하여 플러그인을 추가하십시오. 플러그인 콜백 함수의 리턴 값을 반환합니다.

 // A simple logging plugin
const log = app . use ( ( app , state ) => {
    const events = [
        'mutation' ,
        'dispatch' ,
        'pathchange' ,
        'render'
    ] ;
    events . forEach ( ( name ) => app . on ( name , console . log . bind ( console , name ) ) ) ;
    return console . log . bind ( console , 'avalon' ) ;
} ) ;