superfine
8.2.0
O Superfine é uma camada de visão mínima para a criação de interfaces da Web. Pense no HypeRAPP sem a estrutura - nenhuma máquinas, efeitos ou assinaturas de estado - apenas o mínimo absoluto (1 kb minificado+gziped). Misture -o com sua biblioteca de gerenciamento de estado favorita ou use -a independente para obter a máxima flexibilidade.
Aqui está o primeiro exemplo a começar. Experimente aqui - não é necessário etapa de construção!
<!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 > Ao descrever a aparência de uma página no Superfine, não escrevemos marcação. Em vez disso, usamos as funções h() e text() para criar uma representação leve do DOM (ou DOM virtual para curta) e patch() para realmente renderizar o DOM.
O Superfine não recrie todo o DOM toda vez que usamos patch() . Ao comparar o antigo e o novo DOM virtual, somos capazes de alterar apenas as partes do DOM que precisam mudar em vez de renderizar tudo do zero.
Em seguida, vamos dar uma olhada em um aplicativo simples para TODO. Você só pode adicionar ou cruzar Todos. Você consegue descobrir o que está acontecendo apenas cutucando um pouco o código? Faça um vá aqui.
< 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 >Confira mais exemplos
Agora é a sua vez de levar o Superfine para dar uma volta. Você pode adicionar um botão para limpar todo o Todos? Que tal marcar em massa como feito? Se você ficar preso ou quiser fazer uma pergunta, basta arquivar um problema e tentarei ajudá -lo - se divertirá!
npm install superfine h(type, props, [children]) Crie -os nós Virtual DOM! h() pega o tipo de nó; um objeto de atributos HTML ou SVG e uma variedade de nós filhos (ou apenas um nó filho).
h ( "main" , { class : "relative" } , [
h ( "label" , { for : "outatime" } , text ( "Destination time:" ) ) ,
h ( "input" , { id : "outatime" , type : "date" , value : "2015-10-21" } ) ,
] )text(string)Crie um nó de texto Virtual DOM.
h ( "h1" , { } , text ( "1.21 Gigawatts!?!" ) )patch(node, vdom) Renderizar um DOM virtual no DOM com eficiência. patch() pega um nó DOM existente, um DOM virtual e retorna o DOM recém -corrigido.
const node = patch (
document . getElementById ( "app" ) ,
h ( "main" , { } , [
// ...
] )
) Os nós superfinos podem usar qualquer um dos atributos HTML, atributos SVG, eventos DOM e também chaves.
class: Para especificar uma ou mais classes CSS, use o atributo class . Isso se aplica a todos os elementos regulares de DOM e SVG. O atributo class espera uma string.
const mainView = h ( "main" , { class : "relative flux" } , [
// ...
] )style: Use o atributo de style para aplicar regras CSS arbitrárias aos seus nós DOM. O atributo style espera uma string.
IMPORTANTE : Não recomendamos o uso do atributo
stylecomo os principais meios de elementos de estilo. Na maioria dos casos,classdeve ser usada para fazer referência a classes definidas em uma folha de estilo CSS externa.
const alertView = h ( "h1" , { style : "color:red" } , text ( "Great Scott!" ) )key: As chaves ajudam a identificar nós sempre que atualizamos o DOM. Ao definir a propriedade key em um nó DOM virtual, você declara que o nó deve corresponder a um elemento DOM específico. Isso nos permite reordenar o elemento em sua nova posição, se a posição mudou, em vez de correr o risco de destruí-lo.
IMPORTANTE : As chaves devem ser únicas entre os nós irmãos.
import { h } from "superfine"
export const imageGalleryView = ( images ) =>
images . map ( ( { hash , url , description } ) =>
h ( "li" , { key : hash } , [
h ( "img" , {
src : url ,
alt : description ,
} ) ,
] )
) O Superfine patorará o HTML renderizado do lado do servidor, reciclando o conteúdo existente em vez de criar novos elementos. Essa técnica permite melhor SEO, pois os rastreadores de mecanismos de pesquisa verão a página totalmente renderizada com mais facilidade. E na Internet lenta ou em dispositivos lentos, os usuários desfrutarão de tempo mais rápido, pois o HTML renderiza antes que seu JavaScript seja baixado e executado.
<!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 o HTML necessário já está servido com o documento.
O Superfine espera que a marcação seja idêntica entre o servidor e o cliente. Trate as incompatibilidades como insetos e corrija -os! Agora você só precisa de uma maneira de enviar conteúdo para os navegadores.
O JSX é uma extensão de sintaxe do idioma que permite escrever tags HTML intercaladas com JavaScript. Para compilar o JSX ao JavaScript, instalar o plug -in de transformação JSX e criar um arquivo .babelrc na raiz do seu projeto como este:
{
"plugins" : [[ " transform-react-jsx " , { "pragma" : " h " }]]
}O Superfine não suporta JSX fora da caixa, mas adicioná -lo ao seu projeto é 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
)
)Importe isso em todos os lugares que você está usando JSX e estará pronto para ir. Aqui está um exemplo de funcionamento.
import jsx from "./jsx.js"
import { patch } from "superfine" Mit
