bendemboski

const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
const { Webpack } = require('@embroider/webpack');

module.exports = function (defaults) {
  let app = new EmberAddon(defaults, {});

  return require('@embroider/compat').compatBuild(app, Webpack, {
    packagerOptions: {
      webpackConfig: require('./webpack.config'),
    },

bendemboski

module.exports = {
  module: {
    rules: [
      {
        test: /\/ember-validated-form\/.+\/validated-button\.hbs$/,
        loader: 'string-replace-loader',
        options: {
          multiple: [
            {
              search: 'component buttonComponent',

bendemboski

module.exports = {
  module: {
    rules: [
      // ember-validators (dependency of ember-changeset-validations)
      // does dynamic imports, which isn't necessary and messes up
      // embroider-optimized, so rewrite it to statically import the
      // only two validators we actually use/need.
      {
        test: /\/ember-validators\/index\.js$/,
        loader: 'string-replace-loader',

bendemboski

module.exports = {
  module: {
    rules: [
      // ember-cli-page-object's compatiblity module is a wrapper around
      // @ember/test-helpers that synthesizes its methods using older APIs when
      // in an app with an old/missing version of @ember/test-helpers. The
      // dynamic-ness disagrees with embroider's staticAddonTestSupportTrees
      // flag, so since we know we will only run in environments with a
      // sufficiently new @ember/test-helpers, string-replace the compatiblity
      // module to statically re-export @ember/test-helpers, and also to export

bendemboski

module.exports = {
  module: {
    rules: [
      // ember-power-select does a lot of dynamic component acrobatics that
      // embroider can't statically analyze. Fortunately, we don't actually use
      // any of the dynamic-ness, so we can just flatten it all to static
      // invocations.
      {
        test: /\/ember-power-select\/.+\/power-select\.hbs$/,
        loader: 'string-replace-loader',

bendemboski

prettier

prettier in now integrated into our projects' linting. prettier is an opinionated (supports very minimal configuration) code formatter that essentially replaces all the formatting eslint rules, so in general eslint should be about code correctness (flagging references to undefined variables, enforcing super() calls in constructors, etc.) while prettier handles all the code formatting. Because it runs as an eslint plugin, it's well integrated into VSCode.

I personally have pretty mixed feelings about prettier. I think that code formatting is about communication, and I don't think that a one-size-fits-all-subject-matter approach is ideal for communicating. prettier definitely formats some things in a way that I think is less readable sometimes, but the broader Javascript community seems to be converging on it, and it's now included in Ember's default app/addon blueprints, so I think it makes sense to get on board. Maybe after using it for long enough, I'll change my mind a

bendemboski

import Controller from '@ember/controller';

let i = 0;

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';

  get foo() {
    return i++;
  }

bendemboski

import { tracked } from '@glimmer/tracking';

//
// A tracked macro is a getter (with optional setter) that acts as tracked state.
// The usage is as follows:
//
// import { trackedMacro, dirtyTrackedMacro } from 'tracked-macro';
//
// class MyClass {
//   externalLibrary = new ExternalLibraryThatIsNotTrackedAware()

bendemboski

<!-- Empty -->

bendemboski

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}