torus
Minor rendering bug fixes
torus-dom )Torus ist ein ereignisorientiertes Modell-View-UI-Framework für das Web, das sich darauf konzentriert , winzig, effizient und frei von Abhängigkeiten zu sein.
Sie können das finden? Vollständige Dokumentation für Torus hier auf Github -Seiten .
Torus hat auch eine kommentierte, leicht zu lesen -Version der gesamten (ziemlich prägnanten) Codebasis, ebenfalls auf Github -Seiten. Probieren Sie es aus, wenn Sie mehr darüber erfahren möchten, wie die Frameworks gestaltet sind und wie das virtuelle DOM und die Vorlagen funktioniert!
So sieht Torus in Aktion aus! Dies ist eine voll funktionsfähige Zähler -App, keine Kompilierungs- oder Bündelungsschritte erforderlich.
Lassen Sie dieses Skript -Tag in Ihrem HTML fallen
< script src =" https://unpkg.com/torus-dom/dist/index.min.js " > </ script >... und laden Sie dieses Skript.
// 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 ) ; Torus hat keine Produktionsabhängigkeiten, erfordert keinen Build-Schritt, um alle seine Funktionen zu nutzen, und wiegt unter 5 KB GZIPPED, einschließlich der Templating-Engine, des Renderers, des Komponenten und des Ereignissystems sowie des CSS-in-JS-Wrappers. Dies erleichtert es einfach, zu übernehmen und zu versenden, da alles von der Rendern einer einzelnen Komponente auf der Seite bis zum Erstellen von Anwendungen in vollem Maßstab.
Torus ist nicht als die schnellste virtuelle DOM -Bibliothek konzipiert (es gibt großartige Alternativen wie inferno ), aber Leistung und Reaktionsfähigkeit gehören zu den Hauptzielen des Projekts. Der Torus bleibt zwar winzig und versucht, so schnell und reaktionsschnell wie möglich zu sein, insbesondere beim Rendern. In Kombination mit der kleinen Bündelgröße ist der Torus zum Erstellen von Webanwendungen für überall auf jedem Gerät.
Die Architektur von Torus umfasst alle Render- und Aktualisierungslogik in der Komponente selbst. Daher ist es sicher, Component#node zu nehmen und ihn als einfachen Zeiger auf das Root -Dom -Element der Komponente zu behandeln. Sie können es um die Seite verschieben, es in das Dokument und aus dem Dokument nehmen, in React- oder Vue -Komponenten oder sogar Webkomponenten einbetten und es ansonsten überall verwenden, wo ein herkömmliches DOM -Element verwendet werden kann. Auf diese Weise können Sie Toruskomponenten und Apps in eine Vielzahl von Frontend -Architekturen aufnehmen.
In Kombination mit der geringen Größe des Torus ist es vernünftig, Torus mit nur einer oder wenigen Komponenten für ein größeres Projekt zu versenden, das Elemente aus anderen Frameworks enthält, wenn Sie keine gesamte Torusanwendung versenden möchten oder nicht.
Torus betrifft sich nicht mit der Internationalisierung, aber als Entwickler können wir die APIs, die uns zur Verfügung stellt, die Internationalisierung in unseren Toruskomponenten ermöglichen. Der Torus zeigt Ihnen, dem Entwickler, einen Großteil des Rendering -Prozesses und des virtuellen DOM mit und ermöglicht uns vor allem einen preprocessor , der JDOM aufnehmen kann, und es zu ändern, bevor er den Renderer erreicht, sodass wir Änderungen an den DOM vornehmen können, das der Renderer mit unserem eigenen Code sieht. Dies macht Torus hoch erweiterbar und ideal für i18n. Tatsächlich ist die API der Komponentenpräprozessor -API die so Styled() Komponenten von Torus möglich. ( Styled() fügt der JDOM einen neuen Klassennamen hinzu, bevor die Komponente wiedergegeben wird.)
Zum Beispiel könnten wir eine I18nComponent erstellen, die als Basiskomponentenklasse für ein internationalisiertes Projekt wie dieses fungieren kann.
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 ) ;
}
} Ich (Linus) benutze Torus für die meisten meiner persönlichen Projekte, wenn ich eine Kunden-Seite-UI-Bibliothek benötige. Einige dieser Projekte umfassen:
Die API von Torus ist eine Mischung aus deklarativen Schnittstellen für die Definition von Benutzeroberflächen und Ansichten, und imperativen Muster für das staatliche Management, die ich persönlich finde, ist die beste Balance der beiden Stile beim Erstellen großer Anwendungen. Als allgemeine Praxis sollten Komponenten versuchen, deklarativ und idempotent zu bleiben und über öffentliche, stabile, imperative APIs, die von Datenmodellen ausgesetzt sind, mit Datenmodellen / Zustand zu interagieren.
Das Design von Torus ist von der Komponentenarchitektur von React inspiriert und leiht sich gemeinsame Konzepte aus dem React-Ökosystem, wie die Idee, vor dem Rendern von Virtual Dom zu differenzieren, Kompositionen mit Komponenten höherer Ordnung und Mischen von CSs und Markup in JavaScript zu trennen, um die Bedenken für jede Komponente in eine einzelne Klasse zu trennen. Der Torus baut jedoch auf diesen Ideen auf, indem sie ein minimaleres, weniger munklinärer APIs auf niedrigerer Ebene bereitstellen und sich für ein staatliches Datenmodell entscheiden als für eine Ansicht/Controller-Ebene, die sich bemüht, rein funktionell zu sein.
Torus leiht sich auch im Design des Backbone im Design von Datenmodellen für Aufzeichnungen und Geschäfte für ein ereignisorientiertes Design, die für die Datenaktualisierungen an Ansichten und andere Modelle gebunden sind.
Zuletzt wurde Torus ' jdom Vorlagen-Tag von HTM und Lit-HTML inspiriert, beide Vorlagen-Tags, um HTML-Markup in virtuelles DOM zu verarbeiten.
Frontend Development Tooling war in einem Trend, immer mehr zur Zeit / Kompilierungszeit zu tun, wodurch reichere Syntaxe und Funktionen möglich sind, wie die Einführung von JavaScript-Funktionen und JSX-Vorschlägen. Svelte ist ein wunderbares Beispiel dafür, wie Compiles-Time-Tools eine kategorisch unterschiedliche Unterscheidungsweise über das Erstellen von Benutzeroberflächen schaffen können.
Torus versucht nicht, ein weiteres Build-Time-Tool zu sein. Eines der Ziele von Torus ist es, zur Laufzeit so nützlich wie möglich zu sein und gleichzeitig so wenig Leistung und Overhead wie möglich zu opfern, sodass wir den Kompilierschritt in der Entwicklung beseitigen können. Infolgedessen ist Torus das Goldstandard-Erlebnis der Prototyping-Benutzeroberfläche: Legen Sie einfach ein <script> -Tag im Dokument und beginnen Sie mit dem Schreiben. Der Nachteil dieser bewussten Priorisierung der Laufzeit gegenüber der Kompilierzeit ist, dass einige Funktionen, die nicht Teil der JavaScript-Syntax sind, ohne einen Kompilierschritt einfach nicht möglich sind. Bemerkenswerterweise sind die Syntax und die JSX -Syntax der ECMAScript -Dekorateure nicht möglich, wären jedoch nützlich, um einen Kompilierschritt zum Erstellen von Torus -Apps zu geben. Wir könnten JDOM-Vorlagen in JSX schreiben, was syntaktisch sehr ähnlich ist, und State-Updating-Methoden und Ereignishörer in @render und @bind Decorators, anstatt this.render() und .bind(this) in jeder Instanz.
Das Hinzufügen von Compilation Support ist derzeit nicht auf der Roadmap, sollte jedoch unkompliziert sein, da Torus eine Untergruppe moderner JavaScript ist. Wir können diese marginalen Vorteile der Zusammenstellung in der Zukunft wiederherstellen, insbesondere wenn Dekorateure keine Fortschritte in der Vorschlagstraße zeigen.
Ähnliche deklarative UI -Frameworks wie React und Preact haben den Begriff von Fragmenten eingeführt, nämlich Syntaxzucker, um ein Array von (virtuellen) Dom -Knoten aus einer Funktion zu rendern. Dies liegt daran, dass eine Komponente, die eine Reihe von Knoten zurückgibt, nicht für sich genommen keinen Sinn ergeben, aber oft nützlich ist, interne Funktionen zu haben, die Teile von Komponenten und Ansichten als Knoten ohne Wrapper -Element zurückgeben. Torus unterstützt nativ eine Array -Darstellung einer Liste von Knoten - wickeln Sie einfach JDOM -Objekte in ein Array ein! Obwohl eine Komponente im Gegensatz zu React nicht mehr als einen Knoten rendern kann, werden die meisten Anwendungsfälle von Fragmenten abgedeckt, indem sie einfach eine Darstellung einer Liste von Knoten in einem Array in einer Komponente durchgeben können, und dies wird intuitiv außerhalb der Box in Torus in Torus unterstützt.
Ich habe mit der Idee gespielt, das jdom -Template -Tag zu modifizieren, um Vorlagendarstellungen von Fragmenten wie <>...</> in Knotenarrays verwandeln zu können. jdom ist auch in der Lage, angrenzende Elemente der oberen Ebene in der Vorlage einfach zu analysieren und in einem einzigen Array zurückzugeben. Ich habe mich jedoch vorerst entschieden, diese Funktionen nicht zu versenden, da ich glaube, dass diese Anwendungsfälle angemessen bedeckt sind, indem ich die .children einer JDOM -Vorlage zurückgeben können, sogar vielleicht eine in die <>...</> Fragmentmarker für Lesbarkeit oder einfach ein Array von Jdom -Objekten zurückgegeben. Ich schätze die Explizitheit des zusätzlichen Schritts, der bei der Rückgabe eines nicht traditionellen Arrays aus einer Rendering -Operation verbunden ist, und ich denke, die gelegentlichen Kosten für die Rückgabe von Arrays als Zwischendarstellungen von Teilen einer Ansicht sind die zusätzlichen Funktionskosten nicht wert.
Torus verwendet Symbole, Karten und Sätze. Sie sind daher mit den neuesten Versionen aller wichtigen Browser mit Ausnahme des Internet Explorer 11 kompatibel. Bei älteren Browsern, die keine EG -Array -Spread -Operatoren unterstützen, müssen Sie die Bibliothek möglicherweise mit einem Tool wie Babel nach ES5 übertragen.
Sie können Torus von NPM als torus-dom installieren. Torus gilt immer noch als Beta und noch nicht zu einer 1,0 -Veröffentlichung. Ich glaube, die API ist jetzt stabil und die meisten der wichtigsten Fehler wurden gequetscht, aber keine Garantien bis 1,0.
npm install --save torus-dom
# or
yarn add torus-dom import { StyledComponent , Record , Store , Router } from 'torus-dom' ;Alternativ können Sie auch nur Torus importieren mit:
< script src =" https://unpkg.com/torus-dom/dist/index.min.js " > </ script > Der Torus wird alle standardmäßigen Globals in window.Torus exportieren, sodass Sie Ihre Skripte als globale Namen zugänglich machen. Dies wird in Produktions -Apps nicht empfohlen, sondern auch zum Experimentieren.
Wenn Sie Fehler finden, öffnen Sie bitte ein Problem oder stellen Sie eine Pull -Anfrage mit einem Test ein, um den Fehler gegen das nachzudenken, was Sie erwartet haben. Wenn Sie Feature -Anfragen haben, kann ich sie möglicherweise nicht unbedingt einhalten, da Torus hauptsächlich zu meinen persönlichen Workflow- und Architekturpräferenzen gebaut wird. Aber ich bin offen, Ihre Meinung zu hören! Fühlen Sie sich also frei, ein Problem zu eröffnen, mit der Erwartung, dass ich mich möglicherweise nicht entscheide, die Funktion zum Torus hinzuzufügen (insbesondere, wenn es die Bündelgröße aufblendet oder einen Transpiler erfordert.)
Sie können sowohl NPM als auch Garn verwenden, um den Torus zu entwickeln, aber die NPM -Skripte verwenden Garn, und Garn wird offiziell unterstützt, da es das ist, was ich zur Entwicklung und Erstellung von Torus benutze.
Um Torus aus der Quelle zu bauen, laufen Sie
yarn build Dies wird ./src/torus.js über einen benutzerdefinierten Toolchain ausgeführt, wodurch zuerst alle Debug -Funktionsaufrufe entfernt werden und dieses Ergebnis über WebPack über development und production ausgeführt werden. Beide Ausgänge sowie die Vanilleversion von Torus ohne Webpack -Verarbeitung werden auf ./dist/ gespeichert. Durch das Laufen yarn clean werden solche Build -Artefakte sowie alle erzeugten Berichte gelöscht.
Torus verfügt über ein eindeutiges System zum Generieren von Dokumentationen aus Code -Kommentaren, die mit //> beginnen. Um Kommentare zu generieren, leiten Sie
yarn docs DOCS -Dateien werden unter ./docs/ generiert und können in einem Webbrowser angezeigt werden. Schauen Sie sich die GitHub -Seite für dieses Projekt an, um ein Beispiel dafür zu erhalten, was dieses Skript generiert.
Um die Einheitstests von Torus durchzuführen und einen Deckungsbericht zur coverage/ , rennen
yarn testDadurch wird die grundlegende Testsuite für einen Entwicklungsbau von Torus durchgeführt. Umfangreichere Integrationstests mit vollständigen Benutzeroberflächen wie Todo Apps finden Sie auf der Roadmap.
Wir können auch Tests auf dem Produktionsbau durchführen, mit:
yarn test:prod Dadurch wird kein Deckungsbericht erstellt , sondern die Tests mit einem Minimified -Produktionsbau bei dist/torus.min.js durchführen, um keine Kompilierungsfehler zu überprüfen.
Torus Lints mit Eslint, verwendete eine benutzerdefinierte Konfiguration. Um den Linter auszuführen, laufen Sie
yarn lintOder erwägen Sie, ein Editor -Plugin für Eslint zu verwenden.
