superfine
8.2.0
Superfine es una capa de vista mínima para construir interfaces web. Piense en HyperApp sin el marco, sin máquinas de estado, efectos o suscripciones), solo el mínimo absoluto (1 kb minificado+Gzipped). Mezclarlo con su biblioteca de administración estatal favorita o úsela independiente para obtener la máxima flexibilidad.
Aquí está el primer ejemplo para comenzar. Pruébelo aquí, ¡no se requiere un paso de construcción!
<!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 > Al describir cómo se ve una página en Superfine, no escribimos marcado. En su lugar, usamos las funciones h() y text() para crear una representación liviana del DOM (o DOM virtual para abreviar), y patch() para representar el DOM.
Superfine no volverá a crear todo el DOM cada vez que usemos patch() . Al comparar el DOM virtual antiguo y nuevo, podemos cambiar solo las partes del DOM que necesitan cambiar en lugar de representar todo desde cero.
A continuación, echemos un vistazo a una aplicación simple. Solo puede agregar o tachar a TODOS con él. ¿Puedes averiguar qué está sucediendo con solo hacer un poco el código? Vaya aquí.
< 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 >Mira más ejemplos
Ahora es tu turno de dar a Superfine para dar una vuelta. ¿Puede agregar un botón para borrar todos los TODO? ¿Qué hay de la marca a granel tal como lo hizo? Si te atascas o te gustaría hacer una pregunta, solo presenta un problema e intentaré ayudarte, ¡diviértete!
npm install superfine h(type, props, [children]) ¡Ciéntales nodos DOM virtuales! h() toma el tipo de nodo; Un objeto de atributos HTML o SVG, y una matriz de nodos infantiles (o solo un nodo infantil).
h ( "main" , { class : "relative" } , [
h ( "label" , { for : "outatime" } , text ( "Destination time:" ) ) ,
h ( "input" , { id : "outatime" , type : "date" , value : "2015-10-21" } ) ,
] )text(string)Crea un nodo de texto DOM virtual.
h ( "h1" , { } , text ( "1.21 Gigawatts!?!" ) )patch(node, vdom) Renderiza un DOM virtual en el DOM de manera eficiente. patch() toma un nodo DOM existente, un DOM virtual, y devuelve el DOM recién parcheado.
const node = patch (
document . getElementById ( "app" ) ,
h ( "main" , { } , [
// ...
] )
) Los nodos superfinos pueden usar cualquiera de los atributos HTML, atributos SVG, eventos DOM y también claves.
class: Para especificar una o más clases de CSS, use el atributo class . Esto se aplica a todos los elementos DOM y SVG regulares por igual. El atributo class espera una cadena.
const mainView = h ( "main" , { class : "relative flux" } , [
// ...
] )style: Use el atributo de style para aplicar reglas CSS arbitrarias a sus nodos DOM. El atributo style espera una cadena.
IMPORTANTE : No recomendamos usar el atributo
stylecomo el medio principal de estilo elementos. En la mayoría de los casos,classdebe usarse para referencia a clases definidas en una hoja de estilo CSS externa.
const alertView = h ( "h1" , { style : "color:red" } , text ( "Great Scott!" ) )key: Las teclas ayudan a identificar nodos cada vez que actualizamos el DOM. Al establecer la propiedad key en un nodo DOM virtual, declara que el nodo debe corresponder a un elemento DOM particular. Esto nos permite reordenar el elemento en su nueva posición, si la posición cambió, en lugar de arriesgarse a destruirlo.
Importante : las claves deben ser únicas entre los nodos hermanos.
import { h } from "superfine"
export const imageGalleryView = ( images ) =>
images . map ( ( { hash , url , description } ) =>
h ( "li" , { key : hash } , [
h ( "img" , {
src : url ,
alt : description ,
} ) ,
] )
) Superfine parchará sobre HTML renderizado del lado del servidor, reciclar el contenido existente en lugar de crear nuevos elementos. Esta técnica permite un mejor SEO, ya que los rastreadores de motores de búsqueda verán la página completamente renderizada más fácilmente. Y en Internet lento o dispositivos lentos, los usuarios disfrutarán de un tiempo de contenido más rápido a medida que HTML se repite antes de que su JavaScript se descargue y ejecute.
<!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 >Observe que todo el HTML necesario ya se sirve con el documento.
Superfine espera que el marcado sea idéntico entre el servidor y el cliente. ¡Trate los desajustes como errores y corrígelos! Ahora solo necesita una forma de enviar contenido a los navegadores.
JSX es una extensión de sintaxis del lenguaje que le permite escribir etiquetas HTML intercaladas con JavaScript. Para compilar JSX a JavaScript, instale el complemento de transformación JSX y cree un archivo .babelrc en la raíz de su proyecto como este:
{
"plugins" : [[ " transform-react-jsx " , { "pragma" : " h " }]]
}Superfine no admite JSX fuera de la caja, pero agregarlo a su proyecto es fácil.
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
)
)Importa eso en cualquier lugar donde estés usando JSX y estarás listo para ir. Aquí hay un ejemplo de funcionamiento.
import jsx from "./jsx.js"
import { patch } from "superfine" MIT
