https://github.com/webqit/oohtml
Towards a more dynamic and object-oriented HTML.
https://github.com/webqit/oohtml
data-binding html-imports html-include html-partials namespaced-html observer-api oohtml proposal quantum-js scoped-css scoped-html scoped-js
Last synced: about 2 months ago
JSON representation
Towards a more dynamic and object-oriented HTML.
- Host: GitHub
- URL: https://github.com/webqit/oohtml
- Owner: webqit
- License: mit
- Created: 2020-12-08T14:36:59.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-03-04T12:01:50.000Z (3 months ago)
- Last Synced: 2025-04-04T06:04:39.701Z (about 2 months ago)
- Topics: data-binding, html-imports, html-include, html-partials, namespaced-html, observer-api, oohtml, proposal, quantum-js, scoped-css, scoped-html, scoped-js
- Language: JavaScript
- Homepage:
- Size: 26 MB
- Stars: 123
- Watchers: 5
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# OOHTML
[![npm version][npm-version-src]][npm-version-href]
[![bundle][bundle-src]][bundle-href]
[![License][license-src]][license-href]
**[Explainer](#explainer) • [Features](#features) • [Modular HTML](#modular-html) • [HTML Imports](#html-imports) • [Data Binding](#data-binding) • [Data Plumbing](#data-plumbing) • [Implementation](#implementation) • [Examples](#examples) • [License](#license)**
Object-Oriented HTML (OOHTML) is a set of features that extend standard HTML and the DOM to enable authoring modular, reusable and reactive markup - with a "buildless" and intuitive workflow as design goal! This project revisits the HTML problem space to solve for an object-oriented approach to HTML!
Building Single Page Applications? OOHTML is a special love letter! Writing Web Components? Now you can do so with zero tooling! Love vanilla HTML but can't go far with that? Well, now you can!
Versions
*This is documentation for `OOHTML@4`. (Looking for [`OOHTML@1`](https://github.com/webqit/oohtml/tree/v1.10.4)?)*
## Status
+ Actively maintained
+ A working implementation
+ [Proposed at the WICG](https://github.com/WICG/proposals/issues/137)
+ Open to contributions
## Implementation
OOHTML may be used today. This implementation adheres closely to the spec and helps evolve the proposal through a practice-driven process.
Load from a CDN
└───────── 
```html
```
└ This is to be placed early on in the document and should be a classic script without any `defer` or `async` directives!
└ For `@webqit/[email protected]` and below, you would need an external polyfill - like the [samthor/scoped](https://github.com/samthor/scoped) polyfill - for the Scoped Styles feature:
```html
```
└ Being an integral part of OOHTML, the Observer and Quantum JS APIs are also accessible on loading the OOHTML polyfill:
```js
const { QuantumFunction, QuantumAsyncFunction, QuantumScript, QuantumModule, QuantumAsyncScript, State, Observer } = window.webqit;
```
Install from NPM
└───────── 
```bash
npm i @webqit/oohtml @webqit/quantum-js
```
```js
// Import
import * as Quantum from '@webqit/quantum-js/lite'; // Or from '@webqit/quantum-js'; See implementation notes below
import init from '@webqit/oohtml/src/init.js';
// Initialize the lib
init.call(window, Quantum[, options = {}]);
```
└ Being an integral part of OOHTML, the Observer API, in addition to the Quantum JS APIs, is also available from the OOHTML installation:
```js
import * as Observer from '@webqit/observer';
```
└ To use the polyfill on server-side DOM instances as made possible by libraries like [jsdom](https://github.com/jsdom/jsdom), simply install and initialize the library with the DOM instance as above.
└ But all things "SSR" for OOHTML are best left to the [`@webqit/oohtml-ssr`](https://github.com/webqit/oohtml-ssr) package!
Extended usage concepts
If you'll be going ahead to build a real app with OOHTML, you may want to consider also using:
+ the [`@webqit/oohtml-cli`](https://github.com/webqit/oohtml-cli) package for operating a file-based templating system.
+ the modest, OOHTML-based [Webflo](https://github.com/webqit/webflo) framework to greatly streamline your workflow!
Implementation Notes
+ **Scoped/Quantum Scripts**. This feature is an extension of [Quantum JS](https://github.com/webqit/quantum-js). While the main OOHTML build is based on the main Quantum JS APIs, a companion "OOHTML Lite" build is also available based on the [Quantum JS Lite](https://github.com/webqit/quantum-js#quantum-js-lite) edition. The trade-off is in the execution timing of `` and `` elements: being "synchronous/blocking" with the former, and "asynchronous/non-blocking" with the latter! (See [`async`/`defer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attributes).)
Of the two, the "OOHTML Lite" edition is the recommend option on web pages (as used above) for faster load times unless there's a requirment to emulate the [native synchronous timing](https://html.spec.whatwg.org/multipage/parsing.html#scripts-that-modify-the-page-as-it-is-being-parsed) of classic scripts, in which case you'd need the main OOHTML build:
```html
```
└─ 
+ **Loading Requirements**. As specified above, the OOHTML script tag is to be placed early on in the document and should be a classic script without any `defer` or `async` directives!
If you must load the script "async", one little trade-off would have to be made for `` and `<script quantum>` elements to have them ignored by the browser until the polyfill comes picking them up: *employing a custom MIME type in place of the standard `text/javascript` and `module` types*, in which case, a `<meta name="scoped-js">` element is used to configure the polyfill to honor the custom MIME type:
```html
<head>
<meta name="scoped-js" content="script.mimeTypes=module|text/javascript|application/javascript|some-mime">
<script async src="https://unpkg.com/@webqit/oohtml/dist/main.lite.js">
console.log(this); // body
```
The custom MIME type strategy also comes in as a "fix" for when in a browser or other runtime where the polyfill is not able to intercept `` and `<script quantum>` elements ahead of the runtime - e.g. where...
```html
<body>
<script scoped>
console.log(this); // body