superfine
8.2.0
Superfine은 웹 인터페이스를 구축하기위한 최소보기 레이어입니다. 스테이트 머신, 효과 또는 구독이없는 프레임 워크없이 HyperApp을 생각하십시오. 좋아하는 State Management Library와 혼합하거나 최대한의 유연성을 위해 독립형을 사용하십시오.
다음은 시작하는 첫 번째 예입니다. 여기에서 시도해보십시오. 빌드 단계가 필요하지 않습니다!
<!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 > 페이지가 Superfine의 모습을 설명 할 때 마크 업을 작성하지 않습니다. 대신, 우리는 h() 및 text() 함수를 사용하여 DOM (또는 가상 DOM)과 patch() 의 가벼운 표현을 생성하여 실제로 DOM을 렌더링합니다.
patch() 사용할 때마다 Superfine은 전체 DOM을 다시 제작하지 않습니다. 구식과 새로운 가상 DOM을 비교함으로써 우리는 모든 것을 처음부터 렌더링하는 대신 변경 해야하는 DOM의 부분 만 변경할 수 있습니다.
다음으로 간단한 TODO 앱을 살펴 보겠습니다. 당신은 그것으로 토 도스를 추가하거나 교차 할 수 있습니다. 코드 주위를 조금 찌르면 무슨 일이 일어나고 있는지 알아낼 수 있습니까? 여기로 가십시오.
< 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 >더 많은 예를 확인하십시오
이제 스핀을 위해 Superfine을 가져갈 차례입니다. 모든 토도를 지우기 위해 버튼을 추가 할 수 있습니까? 한 것처럼 벌크 마킹은 어떻습니까? 당신이 붙어 있거나 질문을하고 싶다면, 문제를 제기하면 당신을 도와 줄 것입니다. 재미 있습니다!
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 속성을 사용하여 DOM 노드에 임의의 CSS 규칙을 적용하십시오. style 속성은 문자열을 기대합니다.
중요 :
style속성을 스타일링 요소의 주요 수단으로 사용하는 것이 좋습니다. 대부분의 경우class외부 CSS 스타일 시트에 정의 된 클래스를 참조하는 데 사용해야합니다.
const alertView = h ( "h1" , { style : "color:red" } , text ( "Great Scott!" ) )key: 키는 DOM을 업데이트 할 때마다 노드를 식별하는 데 도움이됩니다. 가상 DOM 노드에서 key 속성을 설정하면 노드가 특정 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에 패치하여 새로운 요소를 만드는 대신 기존 컨텐츠를 재활용합니다. 이 기술은 검색 엔진 크롤러가 완전히 렌더링 된 페이지를 더 쉽게 볼 수 있으므로 더 나은 SEO를 가능하게합니다. 또한 인터넷이 느리게 또는 느린 장치에서는 JavaScript가 다운로드 및 실행되기 전에 HTML 렌더링으로 사용자가 더 빠른 대륙을 즐길 수 있습니다.
<!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는 JavaScript와 산재 된 HTML 태그를 작성할 수있는 언어 구문 확장입니다. 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" MIT
