Skip to content

Instantly share code, notes, and snippets.

View components.flip-animator\.js
import Component from '@glimmer/component';
export default class extends Component {
}
@sukima
sukima / controllers.application\.js
Last active Aug 6, 2020
Autotracking adds hidden goodies
View controllers.application\.js
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action, computed } from '@ember/object';
// Ember 3.18.1
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle'; // NOT Tracked
@computed('appName') // Dirty Dependancy
get foo1() {
return `${this.appName}-1`;
@sukima
sukima / controllers.application\.js
Last active Aug 8, 2020
tracking polyfill autotrack
View controllers.application\.js
import Controller from '@ember/controller';
import EmberObject, { action, computed, notifyPropertyChange } from '@ember/object';
let currentAutoTrackings = [];
function trackedData(key, initializer) {
let values = new WeakMap();
let autoTrackingData = new WeakMap();
let hasInitializer = typeof initializer === 'function';
@sukima
sukima / controllers.application\.js
Last active Aug 5, 2020
Lagacy Tracked Polyfill-ish
View controllers.application\.js
import Controller from '@ember/controller';
import EmberObject, { action } from '@ember/object';
function trackedData(key, initializer) {
let values = new WeakMap();
let hasInitializer = typeof initializer === 'function';
function getter(self) {
let value;
if (hasInitializer && !values.has(self)) {
View controllers.application\.js
import Controller from '@ember/controller';
import EmberObject, { action, computed } from '@ember/object';
const PROPERTY_BAG = Symbol('PROPERTY_BAG');
function legacyTrackedVanilla(target, key, descriptor) {
target[PROPERTY_BAG] = target[PROPERTY_BAG] ?? EmberObject.create();
target[PROPERTY_BAG].set(key, descriptor.initializer?.());
descriptor.get = function() {
console.log(1); // NEVER CALLED
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
@sukima
sukima / component.js
Last active Jul 8, 2020
ui-link-to Component OCTANE
View component.js
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';
export default class UiLinkTo extends Component {
@service router;
get href() {
return this.router.urlFor(...this.route);
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
@sukima
sukima / components.booleans-example\.js
Last active May 20, 2020
Statecharts iterative example
View components.booleans-example\.js
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import mockFetch from '../utils/mock-fetch';
export default class extends Component {
@tracked state = 'idle';
@tracked isLoading = false;
@tracked hasSuccess = false;
View app.uml
@startuml
title Diceware+
state Bootstrap {
state "Booting" as Bootstrap.Booting
state "Done" as Bootstrap.Done
state "Error" as Bootstrap.Error
Bootstrap.Booting : invoke / fetchWords
Bootstrap.Booting --> Bootstrap.Done : //done// (fetchWords)
You can’t perform that action at this time.