Instantly share code, notes, and snippets.

Embed
What would you like to do?
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