Skip to content

Instantly share code, notes, and snippets.

@ef4
ef4 / shadow-root.gjs
Created Nov 29, 2022
Ember ShadowRoot component that works in a single render pass
View shadow-root.gjs
import Component from '@glimmer/component';
// This component renders its contents in a shadow root:
//
// <ShadowRoot>stuff</ShadowRoot>
//
// Critically, it renders in a single render pass. The more natural
// modifier-based solutions do not.
//
// The "trick" we're relying on here is the little-known feature that helpers
@ef4
ef4 / examples.md
Last active Nov 28, 2022
Webpack 5 Node Polyfills Upgrade Cheatsheet
View examples.md

Webpack 5 Node Polyfills Upgrade Cheatsheet

Webpack 4 automatically polyfilled many Node APIs in the browser. This was not a great system, because it could lead to surprisingly giant libraries getting pulled into your app by accident, and it gave you no control over the exact versions of the polyfills you were using.

So Webpack 5 removed this functionality. That means you need to make changes if you were relying on those polyfills. This is a quick reference for how to replace the most common patterns.

List of polyfill packages that were used in webpack 4

For each automatically-polyfilled node package name on the left, this shows the name of the NPM package that was used to polyfill it on the right. Under webpack 5 you can manually install these packages and use them via resolve.fallback.

View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
View components.alpha-grid.js
import Ember from 'ember';
export default Ember.Component.extend({
rows: Ember.computed('names', function() {
let names = this.get('names');
let columns = Math.floor($(window).width() / 100);
let itemsPerColumn = Math.ceil(names.length / columns);
let rows = [];
for (let rowNumber = 0; rowNumber < itemsPerColumn; rowNumber++) {
View controllers.application.js
import Ember from 'ember';
export default Ember.Controller.extend({
nothing() {}
});
View example.js
let writeFile = require('broccoli-file-creator');
treeForPublic: function() {
const publicTree = this._super.treeForPublic.apply(this, arguments);
const trees = [];
if (publicTree) {
trees.push(publicTree);
}
trees.push(writeFile('the-settings-file.json', this.whateverTheSettingsAre());
View positional-params.md

How to use positionalParams in Angle Bracket invocation

A component with positionalParams always also has named versions of its parameters. For example, the liquid-if component from liquid-fire has this in its Javascript file:

positionalParams: ['predicate']

So these are equivalent:

View components.each-chunk.js
import Ember from 'ember';
const { Component } = Ember;
export default class EachChunk extends Component {};
EachChunk.tagName = '';
EachChunk.reopenClass({
positionalParams: ['items', 'chunkSize']
View application.controller.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
valueList: Ember.A([1, 2, 3, 4]),
updateVal(index, newValue) {
this.valueList.replace(index, 1, newValue);
}
});
@ef4
ef4 / application.controller.js
Last active May 25, 2018 — forked from wonderful123/application.controller.js
Component Subexpressions one-way by default?
View application.controller.js
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
valueList: [1, 2, 3, 4],
updateVal(index, newValue) {
this.set('valueList', this.valueList.map((oldValue, i) => index === i ? newValue : oldValue));
}
});