Heath Dernovich sTiLL-iLL

## index.md

      
              1 file
            
          
              21 forks
            
          
              26 comments
            
          
              279 stars
            
          
                mathisonian
                / index.md
            
            
              Last active
              March 22, 2023 05:31
            
              
                requiring npm modules in the browser console
              
          
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: mathisonian/requirify#5
inspiration


## objProtaddl.js

// functional additions to the Object prototype

Object.prototype.extend = function() {
  if (arguments.length === 0)
    return this;

  for (var i = 0; i < arguments.length; i++) {
    for (var property in arguments[i]) {
      if (arguments[i].hasOwnProperty(property))

## thepool.js


function PoolFactory() {

	var createPool = function (options) {

		var wrkrs = [], freeWrkrs = [],
			opts = options || {},
			wCnt = options.maxWorkers || 4,
			wrkrPth = options.path || 'whateveryouwant.js';

## seshCache.js

// session storage caching

define(function() {

    var cacheObj = window.sessionStorage || {
        getItem: function(key) {
            return this[key];
        },
        setItem: function(key, value) {

## debounce.js
/*
  The debounce method returns a function which wraps your callback,
  limiting its execution rate to the limit specified in the second argument.
  Now your frequent callbacks can't brick the user's browser!
*/

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;

## dialogz.html
<!doctype html>
<html>
<head>
  <title>Dialog Test</title>
<style>
  dialog::backdrop {
    background: rgba(255, 0, 255, 0.25);
  }
</style>
</head>

## EventEmitterPattern.js
// Require our emitter

var Emitter = require('events').EventEmitter;

// Our main constructor

var myEmitter = function (config) {
  // extend with emitter
  Emitter.call(this);
  };

## observe.js

  var events = (function(){

	  var topics = {};
	  return {
	    	subscribe: function(topic, listener) {
		      	if(!topics[topic]) topics[topic] = {
		      		queue: []
		      	};

## OP_NS.js
(function (context) {


	var createKontxt = function (nameStr, baseLine) {

		var x, j, r, baseKnTxt, name;
		var wdgts = nameStr.split('.');

		j = baseKnTxt = baseLine ? baseLine : (Function('return this')());


## blobStorage.js
  // make a blob
  var blob = new Blob(['blobyJo'], {
      type: 'text/plain'
  });

  try {
    var store = db.transaction(['buckets'], 'readwrite')
        .objectStore('buckets');

    var fngr = store.put(blob, 'blob');

	// functional additions to the Object prototype

	Object.prototype.extend = function() {
	if (arguments.length === 0)
	return this;

	for (var i = 0; i < arguments.length; i++) {
	for (var property in arguments[i]) {
	if (arguments[i].hasOwnProperty(property))


	function PoolFactory() {

	var createPool = function (options) {

	var wrkrs = [], freeWrkrs = [],
	opts = options \|\| {},
	wCnt = options.maxWorkers \|\| 4,
	wrkrPth = options.path \|\| 'whateveryouwant.js';

	// session storage caching

	define(function() {

	var cacheObj = window.sessionStorage \|\| {
	getItem: function(key) {
	return this[key];
	},
	setItem: function(key, value) {
	/*
	The debounce method returns a function which wraps your callback,
	limiting its execution rate to the limit specified in the second argument.
	Now your frequent callbacks can't brick the user's browser!
	*/

	function debounce(func, wait, immediate) {
	var timeout;
	return function() {
	var context = this, args = arguments;
	<!doctype html>
	<html>
	<head>
	<title>Dialog Test</title>
	<style>
	dialog::backdrop {
	background: rgba(255, 0, 255, 0.25);
	}
	</style>
	</head>
	// Require our emitter

	var Emitter = require('events').EventEmitter;

	// Our main constructor

	var myEmitter = function (config) {
	// extend with emitter
	Emitter.call(this);
	};

	var events = (function(){

	var topics = {};
	return {
	subscribe: function(topic, listener) {
	if(!topics[topic]) topics[topic] = {
	queue: []
	};
	(function (context) {


	var createKontxt = function (nameStr, baseLine) {

	var x, j, r, baseKnTxt, name;
	var wdgts = nameStr.split('.');

	j = baseKnTxt = baseLine ? baseLine : (Function('return this')());
	// make a blob
	var blob = new Blob(['blobyJo'], {
	type: 'text/plain'
	});

	try {
	var store = db.transaction(['buckets'], 'readwrite')
	.objectStore('buckets');

	var fngr = store.put(blob, 'blob');