npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

proxyrequire

v1.0.21

Published

Proxies module references, can be used with FuseBox, Webpack, pure node.js

Downloads

1,105

Readme

Introduction

Easily stub module references in node.js, FuseBox or webpack

Stubbing References

Fitrst, you need to configure your environment to start stubbing (e.g. see FuseBox below). Once the environment is configured, you can follow notation from well known proxyquire package.

import { proxy } from 'proxyrequire';

const Stub = proxy(() => require('$module_path'), {
  '$stubbed_reference': your_stub
});

For example, if I wish to stub the ../container and '../other' reference in file 'myFile.ts':

// myFile.ts
import { Container } from '../container';
import Other from '../../other';

In my test file (sitting in subdirectory tests)

import { proxy } from 'proxyrequire';
const Stub = proxy(() => require('../myFile').Container, {
  '../container': { Container: () => <div>Stubbed Container</div> },
  '../../other': { default: { stubbedObject } } // please note the object contruction with 'default'
});

FuseBox

Use the package plugin to rewrite all your require references to allow stubbing. In your fusebox config add plugin. Plugin parameter specifies the regular expression as filter on files which you want to stub:

const StubPlugin = require('proxyrequire').FuseBoxStubPlugin(/\.tsx?/);

fsbx.FuseBox.init({
  homeDir: "src",
  ...
  plugins: [
    StubPlugin, // add this plugin
    ...
  ]
}).devServer("...", {
  ...
});

Then, in your entry file, make sure you register global helpers. Please, make sure that the entry file is not processed by the plugin.

// entry file
require('proxyrequire').registerGlobals()

If you cannot isolate this file, please use the following boilerplate:

global.$_stubs_$ = {};
function proxyRequire (require, path) {
   return global.$_stubs_$[path] || require(path);
};
global.proxyRequire = proxyRequire;

Webpack

Import the webpack loader and chain it after the typescript compilation.

const StubLoader = require('proxyrequire').WebpackLoader;

Make sure you register global variables in your entry file, same as in FuseBox.

** WARNING** This functionality has not yet been tested.

Node.JS - Mocha

You need to register the stubbing environment in your entry file (e.g. in the setup function of wallaby.js). For Jest, see below.

require('proxyrequire').registerNode();

Just start using proxy function straight away.

Node.JS - Jest

Jest uses its own implementation of require, therefore we need to rewrite our sources. Luckily, jest gives us tools to do that easily. Following is a configuration for Typescript, but you can easily devise configuration for Javascript.

First, create a preprocessor and place it in the root directory:

// preprocessor.js
const tsc = require('typescript');
const tsConfig = require('./tsconfig.fuse.json');
const transform = require('jsx-controls-loader').loader;
const stubLoader = require('proxyrequire').webpackStubLoader;


module.exports = {
  process(src, path) {
    if (path.endsWith('.ts') || path.endsWith('.tsx')) {
      let res = tsc.transpile(
        path.endsWith('.tsx') ? transform(src): src,
        tsConfig.compilerOptions,
        path,
        []
      );
      res = stubLoader(res);
      res = 'const proxyRequire = require("proxyrequire").proxyRequire\n' + res;
      return res;
    }
    return src;
  },
};

And in your Jest config in package.json specify:

// package.json
"jest": {
    "transform": {
      ".(ts|tsx)": "<rootDir>/preprocessor.js"
    }
}

Note

Node.js implementation is optimised for Wallaby.js and you can see the source code below. Please PR if you need to support more environments:

export function registerNode() {
  global.$_stubs_$ = {};

  var Module = require('module');
  var originalRequire = Module.prototype.require;

  Module.prototype.require = function (this: any, path: string) {
    //do your thing here
    return global.$_stubs_$[path] || originalRequire.apply(this, arguments);
  };
}