superfine
8.2.0
Superfine - это минимальный просмотр слоя для построения веб -интерфейсов. Подумайте о HyperApp без рамки - без государственных машин, эффектов или подписок - просто абсолютный голый минимум (минимум 1 КБ+GZIPPED). Смешайте его с вашей любимой библиотекой управления государством или используйте ее отдельно для максимальной гибкости.
Вот первый пример, который вы начали. Попробуйте здесь - не требуется шаг строительства!
<!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 > Описывая, как страница выглядит в суперзоре, мы не пишем разметку. Вместо этого мы используем функции h() и text() для создания легкого представления DOM (или виртуального DOM для краткости) и patch() чтобы фактически отображать DOM.
Superfine не будет воссоздать весь DOM каждый раз, когда мы используем patch() . Сравнивая старый и новый виртуальный DOM, мы можем изменить только части DOM, которые необходимо изменить вместо того, чтобы рендерировать все с нуля.
Далее, давайте посмотрим на простое приложение Todo. Вы можете только добавить или вычеркнуть Todos с ним. Можете ли вы выяснить, что происходит, просто немного выпивая код? Попробуй сюда.
< 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 >Проверьте больше примеров
Теперь ваша очередь принять супержиль для вращения. Можете ли вы добавить кнопку, чтобы очистить все тодо? Как насчет того, как это сделано? Если вы застряли или хотите задать вопрос, просто подать проблему, и я постараюсь помочь вам - повеселиться!
npm install superfine h(type, props, [children]) Создайте их виртуальные узлы DOM! h() принимает тип узла; объект атрибутов HTML или SVG и массив детских узлов (или только одного ребенка).
h ( "main" , { class : "relative" } , [
h ( "label" , { for : "outatime" } , text ( "Destination time:" ) ) ,
h ( "input" , { id : "outatime" , type : "date" , value : "2015-10-21" } ) ,
] )text(string)Создайте виртуальный текстовый узел DOM.
h ( "h1" , { } , text ( "1.21 Gigawatts!?!" ) )patch(node, vdom) Определить виртуальный DOM на DOM эффективно. patch() принимает существующий узел DOM, виртуальный DOM, и возвращает свежевыплаченный DOM.
const node = patch (
document . getElementById ( "app" ) ,
h ( "main" , { } , [
// ...
] )
) Узлы Superfine могут использовать любой из атрибутов HTML, атрибутов SVG, событий DOM, а также ключей.
class: Чтобы указать один или несколько классов CSS, используйте атрибут class . Это относится и ко всем обычным элементам DOM и SVG. Атрибут class ожидает строки.
const mainView = h ( "main" , { class : "relative flux" } , [
// ...
] )style: Используйте атрибут style , чтобы применить произвольные правила CSS к своим узлам DOM. Атрибут style ожидает строки.
ВАЖНО : Мы не рекомендуем использовать атрибут
styleв качестве основного средства стиля. В большинстве случаевclassдолжен использоваться для ссылки классов, определенных во внешней таблице стилей CSS.
const alertView = h ( "h1" , { style : "color:red" } , text ( "Great Scott!" ) )key: Ключи помогают идентифицировать узлы всякий раз, когда мы обновляем DOM. Установив свойство key на виртуальном узле DOM, вы заявляете, что узел должен соответствовать конкретному элементу DOM. Это позволяет нам переделать элемент в его новую позицию, если позиция изменилась, а не рискует уничтожить его.
ВАЖНО : Ключи должны быть уникальными среди братьев и сестер.
import { h } from "superfine"
export const imageGalleryView = ( images ) =>
images . map ( ( { hash , url , description } ) =>
h ( "li" , { key : hash } , [
h ( "img" , {
src : url ,
alt : description ,
} ) ,
] )
) Superfine будет исправлять HTML, переработав HTML, переработав существующий контент, вместо создания новых элементов. Эта техника позволяет лучше SEO, так как сканеры поисковых систем будут легче увидеть полностью отображаемую страницу. А на медленных интернете или медленных устройствах пользователи будут наслаждаться более быстрым временем, поскольку HTML рендеры до того, как ваш 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 >Обратите внимание, что весь необходимый HTML уже обслуживается с документом.
Superfine ожидает, что разметка будет идентичной между сервером и клиентом. Относитесь к несоответствиям как к ошибкам и исправьте их! Теперь вам просто нужен способ отправить контент в браузеры.
JSX - это расширение синтаксиса языка, которое позволяет писать теги HTML, перемежающиеся с JavaScript. Чтобы составить JSX в JavaScript, установите плагин JSX Transform и создайте файл .babelrc в корне вашего проекта, как это:
{
"plugins" : [[ " transform-react-jsx " , { "pragma" : " h " }]]
}Superfine не поддерживает JSX из коробки, но добавить его в свой проект легко.
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
)
)Импортируйте это везде, где вы используете JSX, и вам будет хорошо. Вот рабочий пример.
import jsx from "./jsx.js"
import { patch } from "superfine" Грань
