Download de avalon - Download de código fonte avalon

Avalon

Javascript Micro-Framework para criar aplicativos da Web de uma única página

Instalar

Faça o download das versões CJS, ESM, UMD ou instale via NPM:

npm install @ryanmorr/avalon

Uso

A Avalon é uma solução tudo em um para gerenciar o estado, o roteamento e as visualizações para aplicativos da Web:

 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 >
` ) ;

Confira o exemplo do toDomvc.

API

`avalon(state?)`

Crie uma instância de aplicativo com um estado inicial como um objeto de chave/valor simples. A propriedade title é reservada para o título atual do documento, alterando -o atualizando automaticamente o título do documento:

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

`mutation(name, callback)`

Defina uma mutação, fornecendo um nome e uma função de retorno de chamada que muda de forma síncrona, retornando um objeto de estado parcial que será mesclado no estado do aplicativo:

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

`commit(name, payload?)`

Ligue para uma mutação para atualizar o estado do aplicativo, fornecendo seu nome e uma carga útil opcional, retorna o estado parcial que resultou da mutação:

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

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

`action(name, callback)`

Defina uma ação fornecendo um nome e uma função de retorno de chamada que pode ser usada para responder aos ouvintes de eventos DOM, executar operações assíncronas, despachar outras ações, cometer mutações, etc. A função de retorno de chamada de ação recebe um objeto de dados relevantes e funções de conveniência como o primeiro parâmetro:

 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
     */
} ) ;

Para melhor suportar operações assíncronas, defina um segundo parâmetro para resolver uma chamada (e opcionalmente um terceiro parâmetro para rejeitar uma chamada) como parte da assinatura da função de retorno de chamada de ação. Despachar uma ação assíncrona retornará automaticamente uma promessa. Aqui está um exemplo de como você pode implementar uma ação assíncrona para buscar dados do servidor:

 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)`

As rotas funcionam exatamente como ações, exceto que elas também respondem a alterações no caminho da URL, como eventos de cliques acionados pelo usuário e submetimentos de formulário, chamadas programáticas para os métodos navigate e redirect e avançando e para trás na pilha de histórico da sessão. Uma rota deve ser definida com uma barra de frente para a frente:

 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
     */
} ) ;

Rotas suportam parâmetros, parâmetros opcionais e curingas:

 // 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?)`

Despacha uma ação com parâmetros opcionais ou uma rota. Se nenhum argumento for fornecido, o caminho da URL atual será usado por padrão. Retorna o valor de retorno da função Ação/Rota de retorno de rota ou uma promessa se for uma ação/rota assíncrona.

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

Defina uma visão a ser imediatamente renderizada e atualizada automaticamente via DOM virtual quando o estado mudar. A função de retorno de chamada de visualização recebe um construtor DOM virtual por meio de modelos marcados, o estado atual e uma função de despacho conveniente para despachar ações e rotas como resultado de um ouvinte de evento DOM com parâmetros opcionais como um objeto de chave/value:

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

Visualizações Atributos/Propriedades de suporte, CSS Styles como uma string ou objeto, ouvintes de eventos indicados por um prefixo de "on", nós com chave para listas eficientes e componentes funcionais sem estado:

 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)`

Empurra uma nova entrada para a pilha de histórico com o caminho da URL fornecido e despacha a primeira rota correspondente. Retorna o valor de retorno da função de retorno de chamada da rota ou uma promessa se for uma rota assíncrona:

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

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

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

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

`redirect(path)`

Substitui a entrada do histórico atual pelo caminho da URL fornecido e despacha a primeira rota correspondente. Retorna o valor de retorno da função de retorno de chamada da rota ou uma promessa se for uma rota assíncrona:

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

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

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

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

`on(name, callback)`

Inscreva -se nos eventos do aplicativo, retorna uma função para remover esse ouvinte específico:

 // 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?)`

Acionar um evento personalizado com argumentos opcionais:

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

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

`state()`

Obtenha o objeto de estado atual:

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

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

`path()`

Obtenha o caminho atual da URL:

 app . navigate ( '/foo' ) ;

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

`use(plugin)`

Adicione um plug -in fornecendo uma função de retorno de chamada que é imediatamente invocada com a instância do aplicativo e o estado atual. Retorna o valor de retorno da função de retorno de chamada do plug -in:

 // 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' ) ;
} ) ;