Skip to content

Instantly share code, notes, and snippets.

Tom Dale tomdale

Block or report user

Report or block tomdale

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@tomdale
tomdale / survey.md
Last active Dec 22, 2018
Ember Component Lifecycle Hooks Survey
View survey.md

Component Lifecycle Hooks Survey

Most Ember developers are familiar with component lifecycle hooks, like didInsertElement, willDestroy, etc.

As we think about future APIs for Glimmer components that improve on lifecycle hooks, we want to make sure that we're providing abstractions that are simple, performant, and ergonomic, while nudging users towards good patterns and away from potential footguns.

@tomdale
tomdale / index.js
Created Dec 6, 2018
Tracked property notify API strawman
View index.js
import Timer from 'simple-timer';
import Component from '@glimmer/component';
import { } from '@glimmer/tracking';
export default class TimerComponent extends Component {
constructor() {
// Mark the timer as "untracked" (i.e., we're asserting
// that timer contains no interior tracked properties at all).
// This function gives us back the timer as well as a callback
// function to call when any interior mutation may have occurred.
View components.container-component.js
import Ember from 'ember';
export default Ember.Component.extend({
componentName: "inner-component",
actions: {
handleComponentChange() {
this.set('componentName', "second-component");
}
}
});
View bytecode-format.txt
/* Fixed Opcode */ /* Operand? */ /* Operand? */ /* Operand? */
[0bIIIIIIIILLRRRRRR, 0bAAAAAAAAAAAAAAAA, 0bAAAAAAAAAAAAAAAA, 0bAAAAAAAAAAAAAAAA]
/*
I = instruction (opcode) type
L = operand length
R = reserved
A = operand value
*/
View open-element.ts
APPEND_OPCODES.add(Op.OpenElement, (vm, { op1: tag }) => {
vm.elements().openElement(vm.constants.getString(tag));
});
View program.js
const Program = [25, 1, 0, 0, 22, 2, 0, 0, 32, 0, 0, 0];
View template.json
[
["open-element", "h1", []],
["text", "Hello World"],
["close-element"]
]
View resolver.ts
resolve<U>(handle: number): U {
return this.table[handle];
}
View external-module-table.js
import UserProfile from './src/ui/components/UserProfile/component';
/* ...other component imports */
export let table = [
/* Component1 */,
/* Component2 */,
/* ... */,
/* Component41 */,
UserProfile,
/* Component43 */,
@tomdale
tomdale / bytecode.ts
Created Oct 20, 2017
Glimmer.js Application proposal
View 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());
You can’t perform that action at this time.