Skip to content

Instantly share code, notes, and snippets.

Andrew Levine DrewML

Block or report user

Report or block DrewML

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@DrewML
DrewML / react-devtools-architecture-research.md
Last active Oct 8, 2015
A high-level overview of React DevTools new cross-browser extension
View react-devtools-architecture-research.md

React DevTools Research

Concepts

  • Shell - A view layer for the inspector
    • Shells included: Chrome, Firefox, and plain (iframe)
  • Front End - A react application that mimics the typical DevTools element panel (node tree)
    • Is always displayed inside a shell
    • Receives data from bridge
    • Fires the following events
      • setState
View hipchat-titlebar.css
// Application title bar
body.dark .aui-header {
background: #000;
}
// "New Chat" button
body.dark .aui-header .aui-button {
background: #3C4444;
}
View protractor-mocha-tags.js
// Note: ES6 syntax requires a version of Node.js >= 4.0.0
'use strict';
// Can use any lib (or none, if you choose) to parse args.
// "npm install yargs --save" to use this example as-is
let argv = require('yargs').argv;
const DELIMITER = ',';
const TAG_IDENT = '#';
let tagsOpt = typeof argv.tags === 'string' && argv.tags;
View assertion-methods.js
// Determine which `assert.x` methods are used in a codebase
// Run with jscodeshift using the --dry option
export default function transformer(file, api) {
const { jscodeshift: j, stats} = api;
const root = j(file.source);
root.find(j.CallExpression, {
callee: {
object: { name: 'assert' }
View this-doesnt-work.js
const window = {
a: 1
};
global = new Proxy(global, {
get(target, prop, receiver) {
if (target[prop] !== undefined) {
return target[prop];
}
return window[prop];
View jsdom-global.js
const jsdom = require("jsdom").jsdom;
const doc = jsdom(undefined, { url: "http://localhost" });
const jsdomWindow = doc.defaultView;
global.document = doc;
global.window = new Proxy(jsdomWindow, {
set(target, property, value) {
global[property] = value;
return value;
}
View webpack-perf-tricks.md

webpack Build Performance Tips

Limit the number of extensions passed to the resolver

When the resolver is working through its version of the node module resolution algorithm, it has to perform a large number of file system operations to determine what an ambiguous require/import string is. This means, every extension webpack needs to look for can drastically increase the number of disk hits necessary when enhanced-resolve is attempting to locate an import.

Suggestion

View dynamic-define-calls.js
module.exports = function transformer(file, api) {
const j = api.jscodeshift;
const ast = j(file.source);
ast.find(j.CallExpression, {
callee: {
name: 'define'
}
}).forEach(path => {
const args = path.node.arguments;
View dynamic-require-calls.js
module.exports = function transformer(file, api) {
const j = api.jscodeshift;
const ast = j(file.source);
ast.find(j.CallExpression, {
callee: {
name: 'require'
}
}).forEach(path => {
const args = path.node.arguments;
@DrewML
DrewML / emit-all-plugin.js
Last active Aug 5, 2018
Output every file in a webpack build to the specified dist directory in the webpack config. Each file is output after having each loader run against it, but before the webpack module wrapper is added.
View emit-all-plugin.js
const path = require('path');
module.exports = class EmitAllPlugin {
constructor(opts = {}) {
this.ignorePattern = opts.ignorePattern || /node_modules/;
}
shouldIgnore(path) {
return this.ignorePattern.test(path);
}
You can’t perform that action at this time.