First commit

Author: Maël Nison

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": ["react", ["env", {
+    "targets": {
+      "browsers": ["last 2 versions"]
+    }
+  }]],
+  "plugins": [
+    "transform-class-properties",
+    "transform-decorators-legacy"
+  ]
+}

.eslintrc.json

@@ -0,0 +1,16 @@
+{
+    "parser": "babel-eslint",
+    "plugins": [
+        "prettier",
+        "react"
+    ],
+    "rules": {
+        "prettier/prettier": [ "error", {
+            "singleQuote": true,
+            "trailingComma": "all",
+            "bracketSpacing": false,
+            "printWidth": 120,
+            "parser": "babylon"
+        } ]
+    }
+}

.gitignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+yarn-error.log
+.pnp*

.yarnrc

@@ -0,0 +1 @@
+plugnplay-experimental true

README.md

@@ -0,0 +1,15 @@
+# Plug'n'play sample app
+
+This app showcase a wide range of popular packages, and show that Plug'n'play has no issue working with them. Feel free to open PRs to add more, even if they would make little sense in a classic application!
+
+The packages currently configured are:
+
+  - Babel
+  - ESLint
+  - Gulp
+  - Http-server
+  - Jest
+  - Prettier
+  - React
+  - Uglifyjs
+  - Webpack

gulpfile.js

@@ -0,0 +1,13 @@
+const gulp = require(`gulp`);
+const gulpif = require(`gulp-if`);
+const uglify = require(`gulp-uglify`);
+const webpack = require(`webpack-stream`);
+
+gulp.task('default', function() {
+
+    return gulp.src(`src/app.js`)
+        .pipe(webpack(require(`./webpack.config.js`), require(`webpack`)))
+        .pipe(gulpif(/\.js$/, uglify()))
+        .pipe(gulp.dest(`dist/`));
+
+});

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    resolver: './scripts/jest-resolver',
+};

package.json

@@ -0,0 +1,40 @@
+{
+    "private": true,
+    "dependencies": {
+        "babel-eslint": "^8.2.2",
+        "core-decorators": "^0.20.0",
+        "eslint": "^4.19.1",
+        "eslint-plugin-prettier": "^2.6.0",
+        "eslint-plugin-react": "^7.7.0",
+        "lodash": "^4.17.5",
+        "prettier": "^1.12.0",
+        "react": "^16.2.0",
+        "react-dom": "^16.2.0"
+    },
+    "devDependencies": {
+        "babel-core": "^6.4.1",
+        "babel-loader": "^7.1.4",
+        "babel-plugin-transform-class-properties": "^6.24.1",
+        "babel-plugin-transform-decorators-legacy": "^1.3.4",
+        "babel-preset-env": "^1.6.1",
+        "babel-preset-react": "^6.24.1",
+        "gulp": "^3.9.1",
+        "gulp-if": "^2.0.2",
+        "gulp-uglify": "^3.0.0",
+        "html-webpack-plugin": "^3.1.0",
+        "http-server": "^0.11.1",
+        "jest": "23.0.0-alpha.6r",
+        "jest-environment-jsdom": "23.0.0-alpha.6r",
+        "webpack": "^4.4.1",
+        "webpack-cli": "^2.0.13",
+        "webpack-stream": "^4.0.3"
+    },
+    "scripts": {
+        "build": "webpack",
+        "serve": "http-server -c-1 dist",
+        "bench:size": "./scripts/bench-size.sh"
+    },
+    "resolutions": {
+        "jest-config": "file:/Users/mael/jest/packages/jest-config"
+    }
+}

scripts/bench-size.sh

@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+
+export YARN_PLUGNPLAY_EXPERIMENTAL=false
+./yarn.js install  >/dev/null
+./yarn.js build    >/dev/null
+
+echo Before:
+ls -lh ./dist/app.js
+
+export YARN_PLUGNPLAY_EXPERIMENTAL=true
+./yarn.js install  >/dev/null
+./yarn.js build    >/dev/null
+
+echo After:
+ls -lh ./dist/app.js

scripts/jest-resolver.js

@@ -0,0 +1,5 @@
+let pnp = require('../.pnp.js');
+
+module.exports = (request, {basedir}) => {
+  return pnp.resolveRequest(request, `${basedir}/`);
+};

scripts/webpack-resolver.js

@@ -0,0 +1,43 @@
+let pnp;
+
+try {
+  pnp = require(`../.pnp.js`);
+} catch (error) {}
+
+module.exports = {
+  apply: function(resolver) {
+    if (!pnp) {
+      return;
+    }
+
+    const resolvedHook = resolver.ensureHook(`resolved`);
+    resolver.getHook(`resolve`).tapAsync(`PnpResolver`, (request, resolveContext, callback) => {
+      if (request.context.issuer === undefined) {
+        return callback();
+      }
+
+      let issuer;
+      let resolution;
+
+      if (!request.context.issuer) {
+        issuer = `${request.path}/`;
+      } else if (request.context.issuer.startsWith(`/`)) {
+        issuer = request.context.issuer;
+      } else {
+        throw new Error(`Cannot successfully resolve this dependency`);
+      }
+
+      try {
+        resolution = pnp.resolveRequest(request.request, issuer);
+      } catch (error) {
+        // TODO This is not good! But the `debug` package tries to require `supports-color` without declaring it in its
+        // package.json, and Webpack accepts this because it`s in a try/catch, so we need to do it as well.
+        return callback(error);
+      }
+
+      resolver.doResolve(resolvedHook, Object.assign({}, request, {
+        path: resolution,
+      }), null, resolveContext, callback);
+    });
+  }
+};

sources/__tests__/fibonacci.js

@@ -0,0 +1,36 @@
+import {fibonacci} from '../fibonacci';
+
+describe(`fibonacci`, () => {
+  it(`should work for negative values`, () => {
+    expect(fibonacci(-10)).toEqual(-55);
+    expect(fibonacci(-9)).toEqual(34);
+    expect(fibonacci(-8)).toEqual(-21);
+    expect(fibonacci(-7)).toEqual(13);
+    expect(fibonacci(-6)).toEqual(-8);
+    expect(fibonacci(-5)).toEqual(5);
+    expect(fibonacci(-4)).toEqual(-3);
+    expect(fibonacci(-3)).toEqual(2);
+    expect(fibonacci(-2)).toEqual(-1);
+    expect(fibonacci(-1)).toEqual(1);
+  });
+
+  it(`should work for zero values`, () => {
+    expect(fibonacci(-0)).toEqual(0);
+    expect(fibonacci(+0)).toEqual(0);
+  });
+
+  it(`should work for positive values`, () => {
+    expect(fibonacci(+1)).toEqual(1);
+    expect(fibonacci(+2)).toEqual(1);
+    expect(fibonacci(+5)).toEqual(5);
+    expect(fibonacci(+10)).toEqual(55);
+  });
+
+  it(`should return -Infinity for -Infinity`, () => {
+    expect(fibonacci(-Infinity)).toEqual(-Infinity);
+  });
+
+  it(`should return +Infinity for +Infinity`, () => {
+    expect(fibonacci(+Infinity)).toEqual(+Infinity);
+  });
+});

sources/fibonacci.js

@@ -0,0 +1,16 @@
+export function fibonacci(n) {
+  if (n === -Infinity) return -Infinity;
+
+  if (n === +Infinity) return +Infinity;
+
+  if (n === 0) return 0;
+
+  let A = (1 + Math.sqrt(5)) / 2;
+  let B = (1 - Math.sqrt(5)) / 2;
+
+  let res = Math.ceil((Math.pow(A, n) - Math.pow(B, n)) / Math.sqrt(5));
+
+  if (res <= 0) res -= 1;
+
+  return res;
+}

sources/index.js

@@ -0,0 +1,32 @@
+import {autobind} from 'core-decorators';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import {fibonacci} from './fibonacci';
+
+class Application extends React.PureComponent {
+  state = {
+    n: `1`,
+  };
+
+  @autobind
+  handleChange(e) {
+    this.setState({
+      n: e.target.value,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        Everything is working just fine! And as a bonus, here's a fibonacci number calculator:
+        <div style={{marginTop: 10}}>
+          <input value={this.state.n} onChange={this.handleChange} />
+          <input value={fibonacci(parseInt(this.state.n, 10) || 1)} readOnly={true} />
+        </div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Application />, document.body);

webpack.config.js

@@ -0,0 +1,41 @@
+const HtmlWebpackPlugin = require(`html-webpack-plugin`);
+const PnpWebpackPlugin = require(`./scripts/webpack-resolver`);
+
+module.exports = {
+
+    mode: `production`,
+
+    entry: {
+        [`app`]: `./sources/index.js`,
+    },
+
+    output: {
+        filename: `[name].js`,
+    },
+
+    module: {
+        rules: [{
+            test: /\.js$/,
+            exclude: /node_modules/,
+            loader: require.resolve('babel-loader'),
+            options: {},
+        }]
+    },
+
+    resolve: {
+        plugins: [
+            PnpWebpackPlugin,
+        ]
+    },
+
+    resolveLoader: {
+        plugins: [
+            PnpWebpackPlugin,
+        ]
+    },
+
+    plugins: [
+        new HtmlWebpackPlugin()
+    ]
+
+};