Glimmer.js Application proposal
// This is the API for constructing a Glimmer.js application with | |
// precompiled binary bytecode templates and using an async renderer | |
// (via requestAnimationFrame, requestIdleCallback, etc). | |
import Application, { DOMBuilder, AsyncRenderer, BytecodeLoader } from '@glimmer/application'; | |
import data from './__compiled__/data'; | |
let bytecode = fetch('./__compiled__/templates.gbx') | |
.then(req => req.arrayBuffer()); | |
let element = document.getElementById('app'); | |
let app = new Application({ | |
builder: new DOMBuilder({ element }), | |
renderer: new AsyncRenderer(), | |
loader: new BytecodeLoader({ data, bytecode }) | |
}); | |
app.boot().then(() => {/* ... */}); |
// This is the API for constructing a Glimmer.js application with precompiled | |
// binary bytecode templates and using an async renderer, but that rehydrates | |
// from server-side rendered HTML. | |
// | |
// Notice that the only change between this and client-side bytecode apps is the | |
// builder has changed. | |
import Application, { RehydratingBuilder, AsyncRenderer, BytecodeLoader } from '@glimmer/application'; | |
import data from './__compiled__/data'; | |
let bytecode = fetch('./__compiled__/templates.gbx') | |
.then(req => req.arrayBuffer()); | |
let element = document.getElementById('app'); | |
let app = new Application({ | |
builder: new RehydratingBuilder({ element }), | |
renderer: new AsyncRenderer(), | |
loader: new BytecodeLoader({ data, bytecode }) | |
}); | |
app.boot().then(() => {/* ... */}); |
// This example shows constructing a Glimmer.js application in Node.js and how | |
// it may be used to perform server-side rendering. The initialization is nearly | |
// identical to the browser version, but using classes from @glimmer/ssr that | |
// have been tuned for SSR use cases. | |
import { SSRApplication, StringBuilder, AsyncRenderer, BytecodeLoader } from '@glimmer/ssr'; | |
import { readFileSync } from 'fs'; | |
import data from './__compiled__/data'; | |
let bytecode = readFileSync('./__compiled__/templates.gbx'); | |
let app = new SSRApplication({ | |
builder: new StringBuilder(), | |
renderer: new AsyncRenderer(), | |
loader: new BytecodeLoader({ data, bytecode }) | |
}); | |
import express from 'express'; | |
let server = express(); | |
server.listen(3000, function () { | |
server.get('/', function (req, res) { | |
res.send(app.renderToString()); | |
}); | |
}); |
// In this example, we augment the string-based SSR to use a streams-based API | |
// for getting response to users faster. | |
import { SSRApplication, StreamingBuilder, AsyncRenderer, BytecodeLoader } from '@glimmer/ssr'; | |
import { readFileSync } from 'fs'; | |
import data from './__compiled__/data'; | |
let bytecode = readFileSync('./__compiled__/templates.gbx'); | |
let app = new SSRApplication({ | |
builder: new StreamingBuilder(), | |
renderer: new AsyncRenderer(), | |
loader: new BytecodeLoader({ data, bytecode }) | |
}); | |
app.renderToStream(someStream); |
// This is the updated API for constructing a Glimmer.js application while | |
// maintaining the exact same semantics: | |
// 1. Lazy, on-client template compilation into bytecode | |
// 2. On-client component resolution via the MU resolution map | |
// 3. Synchronous initial render | |
// 4. No rehydration | |
import Application, { DOMBuilder, SyncRenderer, RuntimeLoader } from '@glimmer/application'; | |
import Resolver, { BasicModuleRegistry } from '@glimmer/resolver'; | |
import moduleMap from '../config/module-map'; | |
import resolverConfiguration from '../config/resolver-configuration'; | |
let moduleRegistry = new BasicModuleRegistry(moduleMap); | |
let resolver = new Resolver(resolverConfiguration, moduleRegistry); | |
let element = document.getElementById('app'); | |
let app = new Application({ | |
builder: new DOMBuilder({ element }), | |
renderer: new SyncRenderer(), | |
loader: new RuntimeLoader(resolver) | |
}); | |
app.boot(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment