Skip to content

Instantly share code, notes, and snippets.

View FRICTION.md

October 25, 2022 to November 4, 2022

Generics around missingness

function Name<S extends string | undefined>(name: S): S {
  return name;
}
View sketch.md

Making unique-id a importable function

The Use Cases

import { uniqueId } from "@ember/???";

<template>
  {{#let (unique-id) as |id|}}
View services.md

Factories

A factory is a function that returns a new reactive object.

  • Reactive Factories return reactive objects.
  • Resource Factories also return reactive objects, but they also register cleanup functions that are called when the object is no longer needed.

You can use a class as a factory, but it's not required. When you use a class as a factory, its constructor must take zero required arguments.

View examples.md

I'm assuming these are all talking about cases that didn't already have semis:

Top-Level TemplateDeclaration

<template>
  Hello
</template>|
//         ^ 🚫
@wycats
wycats / 1-unannotated.jsx
Created Sep 2, 2022
An explanation of how Starbeam integrates with React 18's reusable state (https://github.com/reactwg/react-18/discussions/19)
View 1-unannotated.jsx
import { Cell } from "@starbeam/core";
import { useSetup } from "@starbeam/react";
const SYSTEM_LOCALE = Intl.DateTimeFormat().resolvedOptions().locale;
const SYSTEM_TZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
function Clock({ locale = SYSTEM_LOCALE, timeZone = SYSTEM_TZ }) {
const now = useSetup((component) => {
const now = Cell(new Date()));
View components.my-lol\.js
import Component from '@glimmer/component';
export default class extends Component {
}
@wycats
wycats / 1-js.js
Created Jul 30, 2020
alternative observer design
View 1-js.js
// observed popover is interested in changes to `width` and `height` relative to the
// page's origin, and normalized by rounding them to the nearest integer.
let observedPopover = new RectObserver(
popoverElement,
{
width: Math.round,
height: Math.round
},
{
relativeTo: 'origin' // not viewport
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
value: 'Hello world',
inputted(e) {
Ember.set(this, 'value', e.target.value);
}
});
View js.ts
// default tagName is 'div'
// The problem
function createElement(tagName: string): Element {
// very broken
return document.createElement(tagName || 'div');
}
// you might want to use defaults
View components.my-component.js
import Ember from 'ember';
export default Ember.Component.extend({
});