Instantly share code, notes, and snippets.

View index.md

demo gif

The final result: require() any module on npm in your browser console with browserify

This article is written to explain how the above gif works in the chrome (and other) browser consoles. A quick disclaimer: this whole thing is a huge hack, it shouldn't be used for anything seriously, and there are probably much better ways of accomplishing the same.

Update: There are much better ways of accomplishing the same, and the script has been updated to use a much simpler method pulling directly from browserify-cdn. See this thread for details: https://github.com/mathisonian/requirify/issues/5

inspiration

View gist:4067528
/*
* Gets the starting index of the selected text
*/
function _getSelectionHtml() {
/*
* Returns HTML String of current selection
*/
var html = "";
View index.js
var Sequelize = require('sequelize');
module.exports = function(config) {
var models = {};
sequelize = new Sequelize(config.database, config.username, config.password, config.options);
// Bootstrap models
fs.readdirSync(__dirname).forEach(function (file) {
View youtube.js
import React from 'react';
let YouTube;
class YoutubeComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
mounted: false
}
View emoji-support.js
/**
* Determine if this browser supports emoji.
*
* Modified from https://gist.github.com/mwunsch/4710561
* and probobly originally github's javascript source
*/
function doesSupportEmoji() {
var context, smiley;
if (!document.createElement('canvas').getContext) return;
context = document.createElement('canvas').getContext('2d');
View d3-component.js
const React = require('react');
const D3Component = require('idyll-d3-component');
const d3 = require('d3');
const size = 600;
class CustomD3Component extends D3Component {
initialize(node, props) {
View filter.js
const React = require('react');
const D3Component = require('idyll-d3-component');
const d3 = require('d3');
class FilterComponent extends D3Component {
initialize(node, props) {
// instead of adding an svg, add a canvas
var canvas = d3.select(node).append("canvas")
View mycomponent.js
import React from 'react';
import ReactDOM from 'react-dom';
class MyComponent extends React.PureComponent {
unwrapChildren() {
return this.props.children.map((c) => {
if (c => c.type.name && c.type.name.toLowerCase() === 'wrapper') {
return c.props.children[0];
}
return c;
View app.js
var svg = d3.select('#example-2')
.append('svg')
.attr('width', '100%')
.attr('viewBox', '0 0 202 202');
var data = d3.range(10).map(function (d, i) {
return i;
});
View slideshow.js
const React = require('react');
const IdyllComponent = require('idyll-component');
const Slide = require('./slide');
class Slideshow extends IdyllComponent {
getChildren(children) {
let processedChildren = [];
React.Children.forEach(children, (child) => {
if (typeof child === 'string') {