tiny jsx

Tinyjsx

TinyJSX es una biblioteca de JavaScript de interfaz de usuario ligera para desarrollar interfaces de usuario utilizando componentes funcionales.

Tamaños de paquetes de gzip

Tamaños de paquetes brotli

---

Uso

TinyJSX expone una API que imita la reciente implementación de Hooks React pero es realmente pequeño.

TinyJSX admite solo componentes funcionales.

 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 tamaños de paquete más pequeños, todos los ganchos se exportan por su cuenta. Todavía puede importar los ganchos del ejemplo anterior como este:

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

Ejemplos

Algunos ejemplos simples se pueden encontrar en el directorio de ejemplos. También puede ver la biblioteca en acción utilizando las compilaciones de UMD aquí:

• Reloj
• Diádico
• Enrutador

Empezando

Instalar

Al usar NodeJs con yarn o npm

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

o en el 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

La biblioteca tiny-jsx permite usar exportaciones con nombre y predeterminada.

Importaciones nombradas:

 import { createElement } from 'tiny-jsx' ;

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

Importaciones predeterminadas:

 import TinyJSX from 'tiny-jsx' ;

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

En lugar de declarar el pragma @jsx puede usarlo a nivel mundial agregándolo a su archivo de configuración de Babel

Para Babel 5 y antes:

{ "jsxPragma" : " TinyJSX.createElement " }

Para Babel 6: instale el complemento Transform-React-JSX y agréguelo al archivo de configuración:

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

Para Babel 7: instale el complemento @babel/complement-transform-react-jsx y agréguelo al archivo de configuración:

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

Para TypeScript Agregar a tsconfig.json :

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

Representación

La función Transpile TinyJSX convierte los componentes JSX en elementos DOM virtuales (como se describe aquí) . Para representar los elementos DOM virtuales en un navegador, TinyJSX proporciona una función render() que crea el árbol DOM correspondiente y lo convierte en un elemento del árbol DOM existente.

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

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