tiny jsx

Tinyjsx

O TinyJSX é uma biblioteca de JavaScript de interface do usuário leve para o desenvolvimento de interfaces de usuário usando componentes funcionais.

Tamanhos de pacotes GZIP

Tamanhos dos pacotes Brotli

---

Uso

O TinyJSX expõe uma API que imita a recente implementação do React Gays, mas é realmente pequena.

O TinyJSX suporta apenas componentes funcionais.

 import TinyJSX from 'tiny-jsx' ;
import { render } from 'tiny-jsx/dom' ;
import useEffect from 'tiny-jsx/hooks/useEffect' ;
import useState from 'tiny-jsx/hooks/useState' ;

function Clock ( ) {
  const [ tick , setTick ] = useState ( 0 ) ;
  useEffect ( ( ) => {
    const interval = setInterval ( ( ) => {
      setTick ( tick + 1 ) ;
    } , 1000 ) ;
    return ( ) => clearInterval ( interval ) ;
  } , [ tick ] ) ;

  return (
    < div > Seconds: { tick } </ div >
  ) ;
}

render ( < Clock /> , document . body ) ;

Para tamanhos de pacote menores, todos os ganchos são exportados por conta própria. Você ainda pode importar os ganchos do exemplo acima como este:

 import { useState , useEffect } from 'tiny-jsx/hooks' ; 

Exemplos

Alguns exemplos simples podem ser encontrados no diretório exemplos. Você também pode ver a biblioteca em ação usando o UMD construindo aqui:

• Relógio
• Todos
• Roteador

Começando

Instalar

Ao usar nodejs com yarn ou npm

$ yarn add tiny-jsx
or
$ npm install --save tiny-jsx

ou no navegador

 < script defer type =" text/javascript " src =" https://unpkg.com/tiny-jsx@latest/tiny-jsx.min.js " > </ script >
< script defer type =" text/javascript " src =" https://unpkg.com/tiny-jsx@latest/tiny-jsx-hooks.min.js " > </ script >
< script defer type =" text/javascript " src =" https://unpkg.com/tiny-jsx@latest/tiny-jsx-dom.min.js " > </ script >
< script defer type =" text/javascript " src =" https://unpkg.com/tiny-jsx@latest/tiny-jsx-router.min.js " > </ script >

Importar

A biblioteca tiny-jsx permite o uso de exportações nomeadas e padrão.

Importações nomeadas:

 import { createElement } from 'tiny-jsx' ;

// Tell Babel to transform JSX into createElement() calls:
/** @jsx createElement */ 

Importações padrão:

 import TinyJSX from 'tiny-jsx' ;

// Tell Babel to transform JSX into TinyJSX.createElement() calls:
/** @jsx TinyJSX.createElement */

Em vez de declarar o @jsx Pragma, você pode usá -lo globalmente adicionando -o ao seu arquivo de configuração Babel

Para Babel 5 e anterior:

{ "jsxPragma" : " TinyJSX.createElement " }

Para Babel 6: instale o plug-in transform-react-jsx e adicione-o ao arquivo de configuração:

{
  "plugins" : [
     [ " transform-react-jsx " , { "pragma" : " TinyJSX.createElement " }]
  ]
}

Para Babel 7: instale o plug-in @Babel/Plugin-Transform-React-JSX e adicione-o ao arquivo de configuração:

{
  "plugins" : [
    [ " @babel/plugin-transform-react-jsx " , { "pragma" : " TinyJSX.createElement " , "pragmaFrag" : " TinyJSX.Fragment " }]
  ]
}

Para o TypeScript, adicione a tsconfig.json :

{
  "jsx" : " react " ,
  "jsxFactory" : " TinyJSX.createElement "
}

Renderização

A função TinyJSX Transpile converte os componentes JSX em elementos DOM virtuais (como descrever aqui) . Para renderizar os elementos DOM virtuais em um navegador, o TinyJSX fornece uma função render() que cria a árvore Dom correspondente e a transforma em um elemento da árvore Dom existente.

 import TinyJSX from 'tiny-jsx' ;
import { render } from 'tiny-jsx/dom' ; 

render ( < div > Hello World! </ div > , document . body ) ;