superfine
8.2.0
Superfine ist eine minimale View -Ebene zum Erstellen von Webschnittstellen. Denken Sie an Hyperapp ohne das Rahmen - keine Staatsmaschinen, Effekte oder Abonnements - nur das absolute nackte Minimum (1 kb minified+gziped). Mischen Sie es mit Ihrer bevorzugten staatlichen Managementbibliothek oder verwenden Sie es Standalone, um maximale Flexibilität zu erhalten.
Hier ist das erste Beispiel, um Ihnen den Einstieg zu erleichtern. Probieren Sie es hier aus - kein Schritt für den Schritt erforderlich!
<!DOCTYPE html >
< html lang =" en " >
< head >
< script type =" module " >
import { h , text , patch } from "https://unpkg.com/superfine"
const setState = ( state ) =>
patch (
document . getElementById ( "app" ) ,
h ( "main" , { } , [
h ( "h1" , { } , text ( state ) ) ,
h ( "button" , { onclick : ( ) => setState ( state - 1 ) } , text ( "-" ) ) ,
h ( "button" , { onclick : ( ) => setState ( state + 1 ) } , text ( "+" ) ) ,
] )
)
setState ( 0 )
</ script >
</ head >
< body >
< main id =" app " > </ main >
</ body >
</ html > Wenn wir beschreiben, wie eine Seite im Superfine aussieht, schreiben wir kein Markup. Stattdessen verwenden wir die Funktionen h() und text() um eine leichte Darstellung des DOM (oder kurze DOM) zu erstellen, und patch() um die DOM tatsächlich zu rendern.
Superfine wird das gesamte DOM nicht jedes Mal neu erstellen, wenn wir patch() verwenden. Durch den Vergleich des alten und neuen virtuellen DOM können wir nur die Teile des DOM ändern, die sich ändern müssen, anstatt alles von Grund auf neu zu machen.
Schauen wir uns als nächstes eine einfache Todo -App an. Sie können TODOS nur dazu hinzufügen oder abkreuzen. Können Sie herausfinden, was gerade passiert, indem Sie ein bisschen durch den Code stöbern? Wir probieren Sie es hier.
< script type =" module " >
import { h , text , patch } from "https://unpkg.com/superfine"
const updateValue = ( state , value ) => ( { ... state , value } )
const addTodo = ( state ) => ( {
... state ,
value : "" ,
todos : state . todos . concat ( state . value ) . filter ( any => any ) ,
} )
const setState = ( state ) => {
patch (
document . getElementById ( "app" ) ,
h ( "main" , { } , [
h ( "h2" , { } , text ( "To-do list" ) ) ,
h ( "ul" , { } ,
state . todos . map ( ( todo ) =>
h ( "li" , { } , [
h ( "label" , { } , [
h ( "input" , { type : "checkbox" } ) ,
h ( "span" , { } , text ( todo ) )
] ) ,
] )
)
) ,
h ( "section" , { } , [
h ( "input" , {
type : "text" ,
value : state . value ,
oninput : ( { target } ) =>
setState ( updateValue ( state , target . value ) ) ,
} ) ,
h ( "button" ,
{ onclick : ( ) => setState ( addTodo ( state ) ) } ,
text ( "Add todo" )
) ,
] ) ,
] )
)
}
setState ( { todos : [ "Learn Quantum Physics" ] , value : "" } )
</ script >Schauen Sie sich weitere Beispiele an
Jetzt sind Sie an der Reihe, Superfine für einen Dreh zu nehmen. Können Sie eine Schaltfläche hinzufügen, um alle Todos zu löschen? Wie wäre es mit Schüttgut wie getan? Wenn Sie stecken bleiben oder eine Frage stellen möchten, stellen Sie einfach ein Problem ein und ich werde versuchen, Ihnen zu helfen - haben Sie Spaß!
npm install superfine h(type, props, [children]) Erstellen Sie sie virtuelle Dom -Knoten! h() nimmt den Knotentyp; Ein Objekt von HTML- oder SVG -Attributen und ein Array von untergeordneten Knoten (oder nur einem Kinderknoten).
h ( "main" , { class : "relative" } , [
h ( "label" , { for : "outatime" } , text ( "Destination time:" ) ) ,
h ( "input" , { id : "outatime" , type : "date" , value : "2015-10-21" } ) ,
] )text(string)Erstellen Sie einen virtuellen DOM -Textknoten.
h ( "h1" , { } , text ( "1.21 Gigawatts!?!" ) )patch(node, vdom) Rendern Sie ein virtuelles DOM auf dem DOM effizient. patch() nimmt einen vorhandenen DOM -Knoten, ein virtuelles DOM, und gibt das frisch gepatchte DOM zurück.
const node = patch (
document . getElementById ( "app" ) ,
h ( "main" , { } , [
// ...
] )
) Superfine -Knoten können alle HTML -Attribute, SVG -Attribute, DOM -Ereignisse und auch Schlüssel verwenden.
class: Verwenden Sie das class , um einen oder mehrere CSS -Klassen anzugeben. Dies gilt gleichermaßen für alle regulären DOM- und SVG -Elemente. Das class erwartet eine Zeichenfolge.
const mainView = h ( "main" , { class : "relative flux" } , [
// ...
] )style: Verwenden Sie das style -Attribut, um beliebige CSS -Regeln auf Ihre DOM -Knoten anzuwenden. Das style -Attribut erwartet eine Zeichenfolge.
WICHTIG : Wir empfehlen nicht, das
styleals Hauptmittel zum Stylingelemente zu verwenden. In den meisten Fällen sollteclassverwendet werden, um in einem externen CSS -Stylesheet definierten Klassen zu referenzieren.
const alertView = h ( "h1" , { style : "color:red" } , text ( "Great Scott!" ) )key: Tasten helfen bei der Identifizierung von Knoten, wenn wir das DOM aktualisieren. Durch Einstellen der key auf einem virtuellen DOM -Knoten erklären Sie, dass der Knoten einem bestimmten DOM -Element entsprechen sollte. Dies ermöglicht es uns, das Element in seine neue Position zu verwandeln, wenn sich die Position änderte, anstatt es zu riskieren, es zu zerstören.
WICHTIG : Tasten müssen bei Geschwisterknoten einzigartig sein.
import { h } from "superfine"
export const imageGalleryView = ( images ) =>
images . map ( ( { hash , url , description } ) =>
h ( "li" , { key : hash } , [
h ( "img" , {
src : url ,
alt : description ,
} ) ,
] )
) Superfine wird über das serverseitige HTML-Rendering-HTML patschen und vorhandene Inhalte recyceln, anstatt neue Elemente zu erstellen. Diese Technik ermöglicht eine bessere SEO, da Suchmaschinencrawler die vollständig gerenderte Seite leichter sehen können. Und auf langsamen Internet- oder langsamen Geräten genießen die Benutzer schneller, da HTML vor dem Herunterladen und Ausführung Ihres JavaScripts rendert.
<!DOCTYPE html >
< html lang =" en " >
< head >
< script type =" module " >
import { h , text , patch } from "https://unpkg.com/superfine"
const setState = ( state ) =>
patch (
document . getElementById ( "app" ) ,
h ( "main" , { } , [
h ( "h1" , { } , text ( state ) ) ,
h ( "button" , { onclick : ( ) => setState ( state - 1 ) } , text ( "-" ) ) ,
h ( "button" , { onclick : ( ) => setState ( state + 1 ) } , text ( "+" ) ) ,
] )
)
setState ( 0 )
</ script >
</ head >
< body >
< main id =" app " > < h1 > 0 </ h1 > < button > - </ button > < button > + </ button > </ main >
</ body >
</ html >Beachten Sie, dass alle erforderlichen HTML bereits mit dem Dokument zugestellt werden.
Superfine erwartet, dass das Markup zwischen dem Server und dem Client identisch ist. Behandle Nichtpaare als Fehler und repariere sie! Jetzt brauchen Sie nur eine Möglichkeit, Inhalte an Browser zu senden.
JSX ist eine Sprachsyntax -Erweiterung, mit der Sie HTML -Tags schreiben können, die mit JavaScript durchsetzt sind. Um JSX in JavaScript zu kompilieren, installieren Sie das JSX -Transformations -Plugin und erstellen Sie eine .babelrc -Datei im Root Ihres Projekts wie folgt:
{
"plugins" : [[ " transform-react-jsx " , { "pragma" : " h " }]]
}Superfine unterstützt JSX nicht aus der Box, aber es ist einfach, es Ihrem Projekt hinzuzufügen.
import { h , text } from "superfine"
const jsx = ( type , props , ... children ) =>
typeof type === "function"
? type ( props , children )
: h ( type , props || { } , children . flatMap ( ( any ) =>
typeof any === "string" || typeof any === "number" ? text ( any ) : any
)
)Importieren Sie das überall, wo Sie JSX verwenden, und Sie können gut gehen. Hier ist ein funktionierendes Beispiel.
import jsx from "./jsx.js"
import { patch } from "superfine" MIT
