anthonyshort

{
  type: 'element',
  tagName: 'div',
  attributes: { class: 'foo' },
  children: [{
    type: 'element',
    tagName: 'span',
    attributes: {},
    children: []
  }]

anthonyshort

• Prefer composition over mixins
• Prefer immutablity
• Avoid using events as they create side-effects
• Lifecycle methods should always be a single function. e.g. button.beforeMount(cxt)
• Declarative API with everything declared the same way in the same place
• Avoid the need for deku-specific plugins, it should make composition easy
• Avoid magic and complex APIs. Functions should just be functions with no side-effects.

anthonyshort

import Component from "tron";

class MyThing extends Component {
  initialState(){
    return { open: false }
  }
  mounted(parent, el) {
    console.log("omg I'm in the dom")
  }
  onClick(event) {

anthonyshort

.u-enableKerning {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
}

anthonyshort

function update (data) {
  var request = new XMLHttpRequest();
  request.open('POST', '/whatevers', true);
  request.send(data);
}

var View = ripple(template)
  .use(events);
  
// Might need different change events for each field

anthonyshort

;(function(){

/**
 * Require the module at `name`.
 *
 * @param {String} name
 * @return {Object} exports
 * @api public
 */

anthonyshort

var main = document.querySelector('#main-nav');

parent.addEventListener('click', function(e){
  if(e.target.matches('.toggleNav')) {
    e.preventDefault();
    main.classList.toggle('in');
  }
});

anthonyshort

var Form = require('form');

function PersonalDetails(el, model) {
  this.el = el;
  this.model = model;
  this.form = new Form(el);
}

anthonyshort

/**
 * Stream of dots from the integrations browser
 */
var dots = new IntegrationStream({
  el: document.querySelector('.js-integration-stream')
});

/**
 * Create a stream
 *

anthonyshort

module.exports = function(grunt) {
  
  grunt.initConfig({
    foo: {}
  });
  
  require('./plugin')(grunt);
  
  // It would be even easier if grunt had a 'use' method
  // grunt.use(plugin).use(another);