torus
Minor rendering bug fixes
torus-dom )Toro es un marco de UI de vista modelo-visión de eventos para la web, centrado en ser pequeño, eficiente y libre de dependencias .
Puedes encontrar el? Documentación completa para Toro aquí, en páginas GitHub .
Torus también tiene una versión de código anotada y fácil de leer de la base de código completa (bonita), también en las páginas GitHub. ¡Compruébelo si desea obtener más información sobre cómo se diseñan los marcos y cómo funciona el DOM virtual y la plantilla!
¡Así es como se ve en la acción Toro! Esta es una aplicación de contador completamente funcional, sin necesidad de compilación o agrupación.
Deja esta etiqueta de script en tu HTML
< script src =" https://unpkg.com/torus-dom/dist/index.min.js " > </ script >... y cargue este script.
// every view extends Component or StyledComponent
class App extends Torus . StyledComponent {
init ( ) {
// initialize our local state
this . count = 0 ;
}
styles ( ) {
// we can define dynamically and efficiently injected
// styles for our component with styles(), like this.
// These styles are also automatically scoped to the
// component, and we can use the full, nested SCSS syntax.
return css `
font-family: system-ui, sans-serif;
h1 {
text-align: center;
}
button {
padding: 4px 8px;
&:hover {
opacity: .8;
}
}
` ;
}
compose ( ) {
// We define the structure of our component in compose(),
// using a JSX- and lit-html-like syntax as a template string.
return jdom `<main>
<h1>Hi! You clicked ${ this . count } times.</h1>
<button onclick=" ${ ( ) => {
this . count ++ ;
this . render ( ) ;
} } ">Count up!</button>
</main>` ;
}
}
// mount the app to the page
document . body . appendChild ( new App ( ) . node ) ; El toro no tiene dependencias de producción, no requiere un paso de compilación para aprovechar todas sus características y pesa menos de 5 kb Gzipped, incluido el motor de plantilla, el renderizador, el componente y el sistema de eventos, y el envoltorio CSS-in-JS. Esto hace que sea fácil de adoptar y enviar, para cualquier cosa, desde hacer un solo componente en la página hasta la creación de aplicaciones a gran escala.
El toro no está diseñado para ser la biblioteca DOM virtual más rápida (hay grandes alternativas como inferno ), pero el rendimiento y la capacidad de respuesta se encuentran entre los objetivos principales del proyecto. Mientras permanece pequeño, Toro intenta ser lo más rápido y receptivo posible, especialmente en la representación. Combinado con el pequeño tamaño del paquete, esto hace que Toro sea excelente para construir aplicaciones web para cualquier lugar, en cualquier dispositivo.
La arquitectura de Toro encapsula toda la lógica de representación y actualización dentro del componente en sí, por lo que es seguro tomar Component#node y tratarlo como un puntero simple al elemento ROOT DOM del componente. Puede moverlo alrededor de la página, llevarlo dentro y fuera del documento, incrustarlo en componentes React o Vue o incluso componentes web, y usarlo en cualquier lugar donde se pueda usar un elemento DOM tradicional. Esto le permite incluir componentes y aplicaciones de toro en una variedad de arquitecturas frontend.
Combinado con el pequeño tamaño del toro, esto hace que sea razonable enviar toro con solo uno o unos pocos componentes para un proyecto más grande que incluya elementos de otros marcos, si no desea o no puede enviar una aplicación completa de Torus.
El toro no se refiere a la internacionalización, pero como desarrolladores, podemos usar las API disponibles para nosotros hacer posible la internacionalización dentro de nuestros componentes del toro. El toro expone gran parte del proceso de renderizado y el DOM virtual para usted, el desarrollador, y es importante que nos permita crear un preprocessor que pueda tomar JDOM y modificarlo antes de que llegue al renderizador, para que podamos hacer modificaciones al DOM que el renderizador ve con nuestro propio código. Esto hace que el toro sea altamente extensible e ideal para i18n. De hecho, la API del preprocesador de componentes es lo que hace posibles los componentes Styled() de Toro. ( Styled() agrega un nuevo nombre de clase al JDOM antes de que se represente el componente).
Por ejemplo, podríamos hacer un I18nComponent , que puede actuar como una clase de componentes base para un proyecto internacionalizado, como este.
class I18nComponent extends Component {
// The default preprocess method just returns the jdom as-is. We can override it
// to modify the JDOM given by component's `#compose()` method before it reaches the
// virtual DOM renderer.
preprocess ( jdom , _data ) {
// Here, we might recursively traverse the JDOM tree of children
// and call some custom `translate()` function on each string child
// and any displayed props like `placeholder` and `title`.
// As a trivial example, if we only cared about text nodes on the page,
// we could write...
const translate = jdom => {
if ( typeof jdom === 'string' ) {
// translate text nodes
return yourImplementationOfTranslateString ( jdom ) ;
} else if ( Array . isArray ( jdom . children ) ) {
// it's an object-form JDOM, so recursively translate children
jdom . children = jdom . children . map ( yourImplementationOfTranslateString ) ;
return jdom ;
}
return jdom ;
}
// In production, we'd also want to translate some user-visible properties,
// so we may also detect and translate attrs like `title` and `placeholder`.
return translate ( jdom ) ;
}
} Yo (Linus) uso Torus para la mayoría de mis proyectos personales cuando necesito una biblioteca de interfaz de usuario del lado del cliente. Algunos de estos proyectos incluyen:
La API de Torus es una mezcla de interfaces declarativas para definir las interfaces y vistas de los usuarios, y los patrones imperativos para la gestión del estado, que personalmente encuentro es el mejor equilibrio de los dos estilos al construir grandes aplicaciones. Como práctica general, los componentes deben tratar de permanecer declarativos e ideempotentes, e interactuar con modelos de datos / estado a través de API imperativas públicas e estables expuestas por modelos de datos.
El diseño de Torus está inspirado en la arquitectura impulsada por componentes de React, y toma prestados conceptos comunes del ecosistema React, como la idea de difundir en DOM virtual antes de representar, composición con componentes de orden superior y mezclar CSS y marcar en JavaScript para separar las preocupaciones de cada componente en una sola clase. Pero Toro se basa en esas ideas al proporcionar una API de nivel inferior más mínima y menos obstinada, y optar por un modelo de datos con estado en lugar de una capa de vista/controlador que se esfuerza por ser puramente funcional.
Toro también toma prestado de la columna vertebral en su diseño de modelos de datos, para registros y tiendas, por tener un diseño basado en eventos detrás de cómo las actualizaciones de datos están vinculadas a vistas y otros modelos.
Por último, la etiqueta de plantilla jdom de Torus se inspiró en HTM e Lit-HTML, ambas etiquetas de plantilla para procesar el marcado HTML en DOM virtual.
Frontend Development Tooling ha estado en una tendencia a hacer cada vez más en el tiempo de compilación / tiempo de compilación, haciendo posibles sintaxis y características más ricas, como adoptar las funciones de JavaScript de la pista de propuestas y JSX. Svelte es un maravilloso ejemplo de cómo las herramientas de tiempo de compilación pueden crear una forma categóricamente de diferencia de pensar en la construcción de interfaces de usuario.
Toro no intenta ser otra herramienta de tiempo de construcción. Uno de los objetivos de Toro es ser lo más útil posible en tiempo de ejecución mientras sacrifica el menor rendimiento y la sobrecarga posible, por lo que podemos eliminar el paso de compilación en el desarrollo. Como resultado, Toro es la experiencia estándar de oro de las ideas de prototipos de la interfaz de usuario: simplemente suelte una etiqueta <script> en el documento y comience a escribir. La desventaja de esta priorización consciente del tiempo de ejecución durante el tiempo de compilación es que algunas características que no son parte de la sintaxis de JavaScript simplemente no son posibles sin un paso de compilación. En particular, la sintaxis del decorador de Ecmascript y la sintaxis JSX no son posibles, pero sería útil si hubiera un paso de compilación en la construcción de aplicaciones Toro. Podríamos escribir plantillas JDOM en JSX, que es sintácticamente muy similar, y envolver métodos de actualización de estado y oyentes de eventos en decoradores @render y @bind en lugar de llamar this.render() y .bind(this) en cada caso.
Agregar soporte de compilación no está actualmente en la hoja de ruta, pero debería ser sencillo, ya que el torus es un subconjunto de JavaScript moderno. Podemos volver a abordar estos beneficios marginales de la compilación en el futuro, especialmente si los decoradores no muestran progresos en la pista de propuesta.
Los marcos de UI declarativos similares como React y Preact han introducido la noción de fragmentos, que es el azúcar de sintaxis para hacer una matriz de nodos DOM (virtuales) desde una función. Esto se debe a que, si bien tener un componente devuelve una matriz de nodos no tiene sentido por sí solo, a menudo es útil tener funciones internas que devuelvan partes de componentes y vistas como nodos sin un elemento de envoltura. Toro es compatible de forma nativa una representación de matriz de una lista de nodos, ¡solo envuelva los objetos JDOM en una matriz! Aunque, a diferencia de React, un componente no puede representar más de un nodo, la mayoría de los casos de uso de fragmentos se cubren simplemente por ser capaz de pasar por una representación de una lista de nodos en una matriz internamente dentro de un componente, y esto es compatible intuitivamente fuera de la caja en el toro.
He jugado con la idea de modificar la etiqueta de plantilla jdom para poder convertir las representaciones de la plantilla de fragmentos como <>...</> en matrices de nodos. jdom también es capaz de analizar elementos de nivel superior adyacentes en la plantilla y devolverlos en una sola matriz. Sin embargo, decidí no enviar estas características por ahora, porque creo que estos casos de uso están adecuadamente cubiertos por poder devolver a los .children de una plantilla de JDOM, incluso quizás uno envuelto dentro de los marcadores de fragmentos <>...</> para legibilidad, o simplemente devolver una variedad de objetos JDOM. Aprecio la explicidad del paso adicional involucrado en devolver una matriz no tradicional de una operación de representación, y creo que el costo ocasional de regresar las matrices como representaciones intermedias de partes de una vista no vale la pena el costo adicional de la característica.
Toro usa símbolos, mapas y conjuntos, por lo que es compatible con las últimas versiones de todos los principales navegadores, excepto Internet Explorer 11. En los navegadores más antiguos que no admiten EG Operadores de propagación de la matriz, es posible que necesite transpionar la biblioteca a ES5 usando una herramienta como Babel.
Puede instalar Toro desde NPM como torus-dom . El toro todavía se considera beta , y aún no a una liberación de 1.0. Creo que la API es estable ahora y la mayoría de los principales errores han sido aplastados, pero no hay garantías hasta 1.0.
npm install --save torus-dom
# or
yarn add torus-dom import { StyledComponent , Record , Store , Router } from 'torus-dom' ;Alternativamente, también puede importar Toro con:
< script src =" https://unpkg.com/torus-dom/dist/index.min.js " > </ script > Toro exportará todos sus globales predeterminados a window.Torus , por lo que se pueden acceder como nombres globales para sus scripts. Esto no se recomienda en las aplicaciones de producción, pero es excelente para experimentar.
Si encuentra errores, abra un problema o realice una solicitud de extracción con una prueba para recrear el error contra lo que esperaba que hiciera Toro. Si tiene solicitudes de funciones, no necesariamente lo honraré, porque el toro se está construyendo principalmente para adaptarse a mi flujo de trabajo personal y preferencias de arquitectura. ¡Pero estoy abierto a escuchar tu opinión! Así que siéntase libre de abrir un problema, con la expectativa de que no decida agregar la función al toro (especialmente si infla el tamaño del paquete o requerir un transpilador).
Puede usar NPM y hilo para desarrollar toro, pero los scripts de NPM usan hilo, y el hilo es oficialmente compatible ya que es lo que uso para desarrollar y construir toro.
Para construir toro desde la fuente, ejecute
yarn build Esto se ejecutará ./src/torus.js a través de una cadena de herramientas personalizada, primero eliminar las llamadas de función de depuración y ejecutar ese resultado a través de Webpack, a través de modos development y production . Ambas salidas, así como la versión de vainilla de Toro sin procesamiento de Webpack, se guardan en ./dist/ . Ejecutar yarn clean eliminará cualquier artefactos de construcción, así como cualquier informe de cobertura generado.
Toro tiene un sistema único para generar documentación a partir de comentarios de código que comienzan con //> . Para generar documentos de comentarios, ejecutar
yarn docs Los archivos DOCS se generarán en ./docs/ y se pueden ver en un navegador web. Consulte la página GitHub para este proyecto para obtener un ejemplo de lo que genera este script.
Para ejecutar las pruebas unitarias de Torus y generar un informe de cobertura a coverage/ , ejecutar
yarn testEsto ejecutará la suite de prueba básica en una construcción de desarrollo de toro. Pruebas de integración más completas que utilizan interfaces de usuario completas como TODO Apps están en la hoja de ruta.
También podemos ejecutar pruebas en la construcción de producción, con:
yarn test:prod Esto no generará un informe de cobertura , pero ejecutará las pruebas contra una construcción minificada de producción en dist/torus.min.js para verificar no se produjeron errores de compilación.
Las pelusas de toro con Eslint, utilizando una configuración personalizada. Para ejecutar el enlace, ejecutar
yarn lintO considere usar un complemento de editor para Eslint.
