Glimmer.js Application proposal

bytecode.ts

// 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(() => {/* ... */});

rehydrating-bytecode.ts

// 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(() => {/* ... */});

ssr.ts

// 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());
  });
});

streaming-ssr.ts

// 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);

today.ts

// 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();