superfine
8.2.0
SuperFine est une couche de vue minimale pour la création d'interfaces Web. Pensez à HyperApp sans le cadre - pas de machines d'État, d'effets ou d'abonnements - juste le strict absolu (1 kb minifié + gzipped). Mélangez-le avec votre bibliothèque de gestion d'État préférée ou utilisez-le autonome pour une flexibilité maximale.
Voici le premier exemple pour vous aider à démarrer. Essayez-le ici - aucune étape de construction requise!
<!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 > Lorsque vous décrivez à quoi ressemble une page dans Superfine, nous n'écrivons pas le balisage. Au lieu de cela, nous utilisons les fonctions h() et text() pour créer une représentation légère du DOM (ou DOM virtuel pour faire court), et patch() pour rendre réellement le DOM.
SuperFine ne recréera pas l'ensemble du DOM chaque fois que nous utilisons patch() . En comparant l'ancien et le nouveau DOM virtuel, nous ne pouvons changer que les parties du DOM qui doivent changer au lieu de tout rendre à partir de zéro.
Ensuite, jetons un coup d'œil à une application TODO simple. Vous ne pouvez qu'ajouter ou ramener Todos avec. Pouvez-vous comprendre ce qui se passe simplement en poussant un peu autour du code? Essayez ici.
< 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 >Découvrez plus d'exemples
Maintenant, c'est à votre tour de prendre Superfine pour un tour. Pouvez-vous ajouter un bouton pour effacer tous les todos? Et le marquage en vrac comme fait? Si vous êtes coincé ou si vous souhaitez poser une question, déposez simplement un problème et j'essaierai de vous aider - vous amuser!
npm install superfine h(type, props, [children]) Créez-les nœuds DOM virtuels! h() prend le type de nœud; un objet d'attributs HTML ou SVG, et un tableau de nœuds enfants (ou un seul nœud enfant).
h ( "main" , { class : "relative" } , [
h ( "label" , { for : "outatime" } , text ( "Destination time:" ) ) ,
h ( "input" , { id : "outatime" , type : "date" , value : "2015-10-21" } ) ,
] )text(string)Créez un nœud de texte DOM virtuel.
h ( "h1" , { } , text ( "1.21 Gigawatts!?!" ) )patch(node, vdom) Rendez efficacement un DOM virtuel sur le DOM. patch() prend un nœud Dom existant, un DOM virtuel, et renvoie le DOM fraîchement corrigé.
const node = patch (
document . getElementById ( "app" ) ,
h ( "main" , { } , [
// ...
] )
) Les nœuds SuperFine peuvent utiliser l'un des attributs HTML, des attributs SVG, des événements DOM et également des clés.
class: Pour spécifier une ou plusieurs classes CSS, utilisez l'attribut class . Cela s'applique à tous les éléments réguliers DOM et SVG. L'attribut class attend une chaîne.
const mainView = h ( "main" , { class : "relative flux" } , [
// ...
] )style: Utilisez l'attribut style pour appliquer des règles CSS arbitraires à vos nœuds DOM. L'attribut style attend une chaîne.
IMPORTANT : Nous ne recommandons pas d'utiliser l'attribut
stylecomme principal moyen de styliser des éléments. Dans la plupart des cas,classdoit être utilisée pour référencer les classes définies dans une feuille de style CSS externe.
const alertView = h ( "h1" , { style : "color:red" } , text ( "Great Scott!" ) )key: Les clés aident à identifier les nœuds chaque fois que nous mettons à jour le DOM. En définissant la propriété key sur un nœud DOM virtuel, vous déclarez que le nœud doit correspondre à un élément DOM particulier. Cela nous permet de réorganiser l'élément dans sa nouvelle position, si la position a changé, plutôt que de risquer de la détruire.
IMPORTANT : Les clés doivent être uniques parmi les nœuds de frères et sœurs.
import { h } from "superfine"
export const imageGalleryView = ( images ) =>
images . map ( ( { hash , url , description } ) =>
h ( "li" , { key : hash } , [
h ( "img" , {
src : url ,
alt : description ,
} ) ,
] )
) SuperFine patrolra sur HTML rendu côté serveur, recyclant le contenu existant au lieu de créer de nouveaux éléments. Cette technique permet un meilleur référencement, car les robots des moteurs de recherche verront plus facilement la page entièrement rendue. Et sur Internet lent ou les appareils lents, les utilisateurs apprécieront le temps de contenir plus rapidement au fur et à mesure que les rendus HTML avant le téléchargement et l'exécution de votre JavaScript.
<!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 >Notez que tous les HTML nécessaires sont déjà servis avec le document.
SuperFine s'attend à ce que le balisage soit identique entre le serveur et le client. Traitez les inadéquations comme des bugs et corrigez-les! Vous avez maintenant besoin d'un moyen d'envoyer du contenu aux navigateurs.
JSX est une extension de syntaxe linguistique qui vous permet d'écrire des balises HTML entrecoupées de JavaScript. Pour compiler JSX à JavaScript, installez le plugin de transformation JSX et créez un fichier .babelrc dans la racine de votre projet comme celui-ci:
{
"plugins" : [[ " transform-react-jsx " , { "pragma" : " h " }]]
}SuperFine ne prend pas en charge JSX hors de la boîte, mais l'ajouter à votre projet est facile.
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
)
)Importez cela partout où vous utilisez JSX et vous serez prêt à partir. Voici un exemple de travail.
import jsx from "./jsx.js"
import { patch } from "superfine" Mit
