avalon
1.0.0
JavaScript Micro-Framework für das Erstellen von Webanwendungen mit einzelnen Seiten
Laden Sie die CJS-, ESM-, UMD -Versionen herunter oder installieren Sie sie über NPM:
npm install @ryanmorr/avalonAvalon ist eine All-in-One-Lösung, um Status, Routing und Ansichten für Web-Apps zu verwalten:
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 >
` ) ;Schauen Sie sich das Beispiel zum ToMVC an.
avalon(state?) Erstellen Sie eine Anwendungsinstanz mit einem Anfangszustand als einfacher Schlüssel-/Wertobjekt. Die title -Eigenschaft ist für den aktuellen Dokumenttitel reserviert. Ändern Sie automatisch den Dokumenttitel:
const app = avalon ( {
title : 'Hello World' ,
foo : 1 ,
bar : 2
} ) ;mutation(name, callback)Definieren Sie eine Mutation, indem Sie einen Namen und eine Rückruffunktion angeben, die den Zustand synchron ändert, indem ein teilweise Zustandsobjekt zurückgegeben wird, das in den Anwendungszustand zusammengefasst wird:
app . mutation ( 'foo' , ( state , payload ) => {
return {
foo : payload
} ;
} ) ;commit(name, payload?)Rufen Sie eine Mutation an, um den Anwendungszustand zu aktualisieren, indem Sie ihren Namen und eine optionale Nutzlast angeben, den Teilstatus, der sich aus der Mutation ergibt:
app . mutation ( 'foo' , ( state , n ) => ( { foo : n + 10 } ) ) ;
app . commit ( 'foo' , 10 ) ; //=> {foo: 20}action(name, callback)Definieren Sie eine Aktion, indem Sie einen Namen und eine Rückruffunktion angeben, mit der Sie auf DOM -Ereignis -Hörer reagieren, asynchronisierte Operationen ausführen, andere Aktionen entsenden, Mutationen begehen usw. Die Aktionsrückruffunktion erhält ein Objekt relevanter Daten- und Komfortfunktionen als erster Parameter:
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
*/
} ) ;Definieren Sie im Rahmen der Signatur der Aktionsrückruffunktion einen zweiten Parameter für die Auflösung eines Aufrufs (und optional einen dritten Parameter für die Ablehnung eines Aufrufs), um asynchronisierte Operationen besser zu unterstützen (und optional einen dritten Parameter für die Ablehnung eines Anrufs). Durch das Versenden einer asynchronen Aktion wird automatisch ein Versprechen zurückgegeben. Hier ist ein Beispiel dafür, wie Sie eine asynchronisierte Aktion implementieren können, um Daten vom Server abzurufen:
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) Routen funktionieren genau wie Aktionen, außer dass sie auch auf Änderungen im URL-Pfad reagieren, wie z. B. von benutzerdefinierte Klick-Ereignisse und Formulare, programmatische Anrufe bei den navigate und redirect sowie nach vorne und rückwärts im Session History Stack. Eine Route muss mit einem führenden Vorwärtsstrahl definiert werden:
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
*/
} ) ;Routen unterstützen Parameter, optionale Parameter und Platzhalter:
// 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?)Entsenden Sie eine Aktion mit optionalen Parametern oder einer Route. Wenn keine Argumente bereitgestellt werden, wird der aktuelle URL -Pfad standardmäßig verwendet. Gibt den Rückgabewert der Aktions-/Route -Rückruffunktion oder ein Versprechen zurück, wenn es sich um eine asynchronisierte Aktion/Route handelt.
// 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)Definieren Sie eine Ansicht, die sofort über virtuelles DOM gerendert und automatisch aktualisiert werden soll, wenn sich der Status ändert. Die Ansichts -Rückruffunktion wird über einen virtuellen DOM -Builder über getaggte Vorlagen, den aktuellen Status und eine bequeme Versandfunktion für Versandaktionen und Routen als Ergebnis eines DOM -Ereignishörers mit optionalen Parametern als Schlüssel-/Wertobjekt bereitgestellt:
app . view ( parentElement , ( html , state , dispatch ) => html `
< div >
< p > Name: ${ state . name } </ p >
< button onclick = ${ dispatch ( 'handleClick' , { foo : 1 , bar : 2 } ) } > Increment </ button >
</ div >
` ) ;Ansichten unterstützen Attribute/Eigenschaften, CSS -Stile als Zeichenfolge oder Objekt, Ereignishörer, die durch ein Präfix von "On" angegeben sind, Schlüsselknoten für effiziente Listen -Diffs und zustandslose Funktionskomponenten:
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)Schiebt einen neuen Eintrag auf den History -Stapel mit dem bereitgestellten URL -Pfad und sendet die erste Übereinstimmung. Gibt den Rückgabewert der Route Callback -Funktion oder ein Versprechen zurück, wenn es sich um eine asynchronisierte Route handelt:
app . route ( '/foo' , ( ) => 'bar' ) ;
app . path ( ) ; //=> "/"
history . length ; //=> 0
app . navigate ( '/foo' ) ; //=> "bar"
app . path ( ) ; //=> "/foo"
history . length ; //=> 1redirect(path)Ersetzt den aktuellen Verlaufseintrag durch den bereitgestellten URL -Pfad und sendet die erste Übereinstimmung. Gibt den Rückgabewert der Route Callback -Funktion oder ein Versprechen zurück, wenn es sich um eine asynchronisierte Route handelt:
app . route ( '/foo' , ( ) => 'bar' ) ;
app . path ( ) ; //=> "/"
history . length ; //=> 0
app . redirect ( '/foo' ) ; //=> "bar"
app . path ( ) ; //=> "/foo"
history . length ; //=> 0on(name, callback)Abonnieren Sie Anwendungsereignisse und gibt eine Funktion zurück, um diesen bestimmten Listener zu entfernen:
// 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?)Lösen Sie ein benutzerdefiniertes Ereignis mit optionalen Argumenten aus:
app . on ( 'foo' , ( a , b , c , d ) => {
// Do something
} ) ;
app . emit ( 'foo' , 1 , 2 , 3 , 4 ) ;state()Holen Sie sich das aktuelle Statusobjekt:
const app = avalon ( {
title : 'Hello World'
foo : 1 ,
bar : 2
} ) ;
app . state ( ) ; //=> {title: "Hello World", foo: 1, bar: 2}path()Holen Sie sich den aktuellen URL -Pfad:
app . navigate ( '/foo' ) ;
app . path ( ) ; //=> "/foo"use(plugin)Fügen Sie ein Plugin hinzu, indem Sie eine Rückruffunktion bereitstellen, die sofort mit der Anwendungsinstanz und dem aktuellen Zustand aufgerufen wird. Gibt den Rückgabewert der Plugin -Rückruffunktion zurück:
// 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' ) ;
} ) ; Dieses Projekt ist der Öffentlichkeit gewidmet, wie von den Unlizenz beschrieben.
