Descarga de avalon - Descarga del código fuente avalon

avalón

JavaScript Micro-Framework para construir aplicaciones web de una sola página

Instalar

Descargue las versiones CJS, ESM, UMD o instale a través de NPM:

npm install @ryanmorr/avalon

Uso

Avalon es una solución todo en uno para administrar el estado, el enrutamiento y las vistas para las aplicaciones 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 >
` ) ;

Echa un vistazo al ejemplo de ToDomVC.

API

`avalon(state?)`

Cree una instancia de aplicación con un estado inicial como un objeto de clave/valor simple. La propiedad title está reservada para el título del documento actual, cambiando automáticamente actualizará el título del documento:

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

`mutation(name, callback)`

Definir una mutación proporcionando un nombre y una función de devolución de llamada que cambia sincrónicamente el estado al devolver un objeto de estado parcial que se fusionará en el estado de la aplicación:

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

`commit(name, payload?)`

Llame a una mutación para actualizar el estado de la aplicación proporcionando su nombre y una carga útil opcional, devuelve el estado parcial que resultó de la mutación:

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

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

`action(name, callback)`

Definir una acción proporcionando un nombre y una función de devolución de llamada que se puede utilizar para responder a los oyentes de eventos DOM, realizar operaciones async, enviar otras acciones, confirmar mutaciones, etc. La función de devolución de llamada de acción se proporciona un objeto de datos relevantes y funciones de conveniencia como el primer 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 admitir mejor las operaciones de Async, defina un segundo parámetro para resolver una llamada (y opcionalmente un tercer parámetro para rechazar una llamada) como parte de la firma de la función de devolución de llamada de acción. El despacho de una acción de async le devolverá automáticamente una promesa. Aquí hay un ejemplo de cómo puede implementar una acción async para obtener datos del 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)`

Las rutas funcionan exactamente como las acciones, excepto que también responden a los cambios en la ruta de la URL, como los eventos de clic activados por el usuario y los envíos de formulario, llamadas programáticas a los métodos de navigate y redirect , y avanzar y hacia atrás en la pila de historial de sesión. Se debe definir una ruta con una barra de liderazgo líder:

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

Rutas de soporte de parámetros, parámetros opcionales y comodines:

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

Enviar una acción con parámetros opcionales o una ruta. Si no se proporcionan argumentos, la ruta de URL actual se usa de forma predeterminada. Devuelve el valor de retorno de la función de devolución de llamada de acción/ruta o una promesa si se trata de una acción/ruta async.

 // 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 una vista para ser inmediatamente actualizada y actualizada automáticamente a través de DOM virtual cuando cambia el estado. La función de devolución de llamada Ver se proporciona un constructor de DOM virtual a través de plantillas etiquetadas, el estado actual y una función de envío conveniente para enviar acciones y rutas como resultado de un oyente de eventos DOM con parámetros opcionales como un objeto clave/valor de valor:

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

Vistas Atributos/Propiedades de soporte, estilos CSS como cadena u objeto, oyentes de eventos indicados por un prefijo de "ON", nodos clave para diferencias de listas eficientes y componentes funcionales sin 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)`

Empuja una nueva entrada a la pila de historial con la ruta de URL proporcionada y envía la primera ruta coincidente. Devuelve el valor de retorno de la función de devolución de llamada de ruta o una promesa si se trata de una ruta asíncrata:

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

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

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

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

`redirect(path)`

Reemplaza la entrada actual del historial con la ruta de URL proporcionada y envía la primera ruta coincidente. Devuelve el valor de retorno de la función de devolución de llamada de ruta o una promesa si se trata de una ruta asíncrata:

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

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

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

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

`on(name, callback)`

Suscríbase a los eventos de la aplicación, devuelve una función para eliminar ese oyente 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?)`

Activar un evento personalizado con argumentos opcionales:

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

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

`state()`

Obtenga el objeto de estado actual:

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

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

`path()`

Obtenga la ruta de URL actual:

 app . navigate ( '/foo' ) ;

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

`use(plugin)`

Agregue un complemento proporcionando una función de devolución de llamada que se invoca inmediatamente con la instancia de la aplicación y el estado actual. Devuelve el valor de retorno de la función de devolución de llamada del complemento:

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