Skip to content

Instantly share code, notes, and snippets.

Avatar

Steven Glanzer acdn-sglanzer

View GitHub Profile
@acdn-sglanzer
acdn-sglanzer / component.ts
Last active Nov 1, 2022
Wiring WunderGraph to non-react project (generic TS)
View component.ts
import { createClient, Operations } from '<package>/.wundergraph/generated/client'
import { createHooks } from './hooks'
const client = createClient()
const hooks = createHooks<Operations>(client)
export async function foo(): Promise<void> {
const response = await hooks.query({
operationName: '<operation>',
})
View components.highlighter\.js
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { task } from 'ember-concurrency'
export default class extends Component {
@task * highlight() {
document.querySelector(this.args.target)?.classList.add('highlight')
yield new Promise((resolve) => setTimeout(resolve, 1))
document.querySelector(this.args.target)?.classList.add('transition')
View controllers.application\.js
import Controller from '@ember/controller';
import { MyClass } from '../my-class'
import { action } from '@ember/object'
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
myClass = new MyClass()
clone = new MyClass(trackedSpread(this.myClass, { a: 'foo' }))
View controllers.application\.js
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
}
View controllers.a\.js
import Controller from '@ember/controller';
export default Controller.extend({
get routeHeader () {
return document.getElementById('route-header')
}
});
View controllers.application\.js
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
class Foo {
@tracked thing = false
}
class Bar {
thing = false
}
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
View components.my-button.js
import Ember from 'ember';
export default Ember.Component.extend({
attributeBindings: ['role'],
tagName: 'button'
});
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
bar: {
name: 'cached'
},
proxy: Ember.computed('bar', function () {