thomasboyt

  resolve: {
    alias: {
      '__root': path.join(__dirname, './app'),
    },
  },

thomasboyt

Let's say I have a "main" app and a "widget" app in the same codebase, with some dependencies shared between them. My webpack config might look something like

module.exports = {
  entry: {
    app: './app/appEntry.js',
    widget: './app/widgetEntry.js',
  },
  output: {
    path: 'public/',

thomasboyt

I recently converted a bunch of stores from Fluxxor to Redux with Immutable JS state. Immutable JS requires the use of a get() method to get keys of Immutable maps/arrays, which meant part of the Fluxxor->Redux conversion was doing one of the following in any component that now uses Immutable state:

1. Convert the Immutable JS object to a POJO with toJS(). This required the least amount of code changes, but then means that anything that later accesses the object can't use the often-useful Immutable JS API (instead having to use Lodash/etc, which theoretically should never be needed with Immutable objects)
2. Repace foo.attr with foo.get('attr'). This unfortunately was pretty error-prone, as any leftover .attr accesses wouldn't throw (instead just always being undefined). It also makes it harder to make properly generic components that could be reused in applications that don't use Immutable JS.
3. Use Record types to allow attribute acces

thomasboyt

// How to pass arbitrary arguments to reselect selectors (I think?)

// arbitrary selector to capitalize a todo's name for... some reason
// memoized based on the todo object
const selector = createSelector(
  (state, props) => state.todos.get(props.id),
  (todo) => todo.title.toUpperCase()
);

const TodoTitle = React.createClass({

thomasboyt

/*
 * makes it easy to check an options object for required named params, e.g.
 *
 * export default function getBaseVolumeCurve(points, opts) {
 *  const {time, middleRange, lookbackPeriodDays, volPeriodDays} = ensureFields(opts);
 *  // ...
 * }
 *
 * if the key you're getting doesn't exist, it will throw an error
 */

thomasboyt

Reasons I don't use React's ES6 class syntax:

• I like mixins! They should be applied carefully, but I find them easier to use than HOCs in many cases
  • Some useful libraries also still ship mixins instead of HOCs, and it'd be annoying to convert a component to createClass definition because I decided to use a mixin
• I prefer defining propTypes/defaultProps in the component's body instead of as properties added after definition
• I like auto-bound event handlers
• I don't see any advantage to using ES6 classes for components

thomasboyt

live example: https://jsfiddle.net/pdb7kraL/

thomasboyt

// This loads every file matching `../../songs/*/index.js`

const req = require.context('../../songs', true, /\/index.js$/);

const songs = req.keys().map((key) => {
  return req(key).default;
});

export default songs;

thomasboyt

var webpack = require('webpack');
var path = require('path');
var _ = require('lodash');
var minimatch = require('minimatch');

function matchesPatterns(module, patterns) {
  var modulePath = module.resource;

  if (!modulePath) {
    return false;

thomasboyt

Songs

1. Station to Station
2. Sweet Thing/Candidate/Sweet Thing (reprise)
3. Heroes
4. Life On Mars?
5. The Bewlay Brothers
6. The Man Who Sold the World
7. Rock N' Roll Suicide
8. Sound and Vision