simonihmig

WIP - Ember Headless Forms

Goals

• focus on reusable behavior that every form should have
• have no opinions on styling or app-specific use cases
• have opinions on form best-practices and a11y
• render as little as possible
  • render things for which we have strong opinions (e.g. an input should have an associated <label>)

simonihmig

import EmbeddedService from 'ember-embedded-snippet/services/embedded';
import BaseAdapter from 'ember-metrics/metrics-adapters/base';
import fetch from 'fetch';
import { inject as service } from '@ember/service';

export interface Config {
  identificationCode: string;
  apiUrlForHit?: string;
  apiUrlForEvent?: string;
  trackUrlBase?: string;

simonihmig

  test('switching the target moves existing content without new invocation - modifier', async function (assert) {
    this.set('show', false);
    let count = 0;
    this.trackRender = () => count++;
    await render(hbs`
      <div id="p1"></div>
      <div id="p2"></div>
      {{#if this.show}}
        {{#in-element this.dest insertBefore=null}}
          <div id="content" {{did-insert this.trackRender}}>foo</div>

simonihmig

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

simonihmig

import Controller from '@ember/controller';

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


const Foo = Ember.Object.extend({
  foo: 'bar'
});

simonihmig

import Ember from 'ember';


export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
});

simonihmig

import Ember from 'ember';

Ember.onerror = function() {
  console.error('This should never happen!');
};

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  actions: {

simonihmig

version: "3"
services:
  # for development only
  ember-cli:
    build: docker/ember-cli
    shm_size: 1G
    command: /bin/bash -c "FASTBOOT_DISABLED=true ember server"
    ports:
      - 4200:4200
      - 49152:49152

simonihmig

import Ember from 'ember';

export default class TestComponent extends Ember.Component {
};

simonihmig

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  logs: [],
  
  cp: Ember.computed('foo.bar', function() {
    this.get('logs').pushObject('CP has been called');
    return this.get('foo.bar');