Initial commit for react-router-config-loader implementation

Author: grayyang

.gitignore

@@ -57,3 +57,5 @@ typings/
 # dotenv environment variables file
 .env
 
+# test Output
+test/dist

.npmignore

@@ -0,0 +1,3 @@
+.gitignore
+.vscode
+test

.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+    // Use IntelliSense to learn about possible Node.js debug attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Mocha Tests",
+            "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
+            "args": [
+                "-u",
+                "tdd",
+                "--timeout",
+                "999999",
+                "--colors",
+                "${workspaceRoot}/test"
+            ],
+            "internalConsoleOptions": "openOnSessionStart"
+        }
+    ]
+}

index.js

@@ -0,0 +1,143 @@
+const path = require('path');
+const toSource = require('tosource');
+const deepCopy = require('deepcopy');
+const loaderUtils = require("loader-utils");
+
+class Loader {
+  constructor(loaderApi) {
+    this.loaderApi = loaderApi;
+
+    const options = loaderUtils.getOptions(this.loaderApi) || {};
+    this.componentsDir = options.componentsDir || '.';
+    this.relativePath = options.relativePath || false;
+    this.inheritProps = options.inheritProps || {};
+  }
+
+  transform(source) {
+    let [ imports, routes ] = this.transformRoutes(eval(source));
+    return (
+      `${this.generateImports(imports)}`
+      + `${this.generateRoutes(routes)}`
+    );
+  }
+
+  /**
+   * Get name of component in the route
+   * 
+   * @param {*} route route config object
+   * @returns {string} component name
+   */
+  componentName(route) {
+    // use component name specified in route
+    if (route.componentName) {
+      return route.componentName;
+    }
+
+    // default name equals base name of component path 
+    return path.basename(route.component, path.extname(route.component));
+  }
+
+  /**
+   * Get path to import component from
+   * 
+   * @param {*} route route config object
+   * @returns {string} component path
+   */
+  componentPath(route) {
+    if (path.isAbsolute(route.component) || !route.component.startsWith('.')) {
+      // load for absolute path or node_modules, no change
+      return route.component.replace(/\\/g, '\\\\');
+    }
+    else {
+      // relative path, join with base path
+      // NB: prefix ./ to not load from node_modules
+      return `./${path.join(this.componentsDir, route.component)}`.replace(/\\/g, '\\\\');
+    }
+  }
+
+  /**
+   * Transform routes config into react router config by collecting component imports
+   * 
+   * @param {Array} routes routes config
+   * @returns { [ Array, Array ] } [ component path to import, react routes config ]
+   */
+  transformRoutes(routes) {
+    let imports = new Set();
+    routes.forEach(route => this.transformRouteIter(route, imports, '', this.inheritProps));
+
+    return [ Array.from(imports), routes ];
+  }
+
+  transformRouteIter(route, imports, cwd, inheritProps) {
+    // transform component configuration into name and import
+    if (route.component) {
+      imports.add(`${this.componentName(route)}|${this.componentPath(route)}`);
+      route.component = this.componentName(route);
+      delete route.componentName;
+    }
+
+    // transform relative path to absolute
+    if (route.path && this.relativePath) {
+      cwd = route.path = path.posix.join(cwd, route.path);
+    }
+
+    // merge inherit props to route
+    if (route.inheritProps) {
+      inheritProps = Object.assign(inheritProps, route.inheritProps);
+      delete route.inheritProps;
+    }
+    Object.assign(route, inheritProps);
+
+    // recursive transform child routes
+    if (route.routes) {
+      route.routes.forEach(route => this.transformRouteIter(route, imports, cwd, inheritProps));
+    }
+  }
+
+  /**
+   * Generate js import expression for components
+   * 
+   * @param {string} imports import information for react components
+   * @returns {string} js source code that import components 
+   */
+  generateImports(imports) {
+    return imports.map(kv => {
+      let [ name, file ] = kv.split('|');
+      return `import ${name} from '${file}';\n`;
+    }).join('');
+  }
+
+  /**
+   * Generate js export expression for react-router-config
+   * 
+   * @param {*} routes react route configs
+   * @returns {string} js source code that export react router config
+   */
+  generateRoutes(routes) {
+    return `export default [${routes.map(route => this.generateRouteIter(route, '')).join(',\n')}];`;
+  }
+
+  generateRouteIter(route, indent) {
+    let component = deepCopy(route.component);
+    let routes = deepCopy(route.routes);
+    delete route.component;
+    delete route.routes;
+    
+    let source = toSource(route, null, '  ', indent);
+    let nextIndent = indent + '  ';
+    
+    return [
+      source === '{}' ? '{' : `${source.substring(0, source.length - 2)},`,
+      component ? `${nextIndent}component:${component},` : '', 
+      routes ? `${nextIndent}routes:[${routes.map(route => `${this.generateRouteIter(route, `${nextIndent}`)}`).join(`,\n${nextIndent}`)}]` : '', 
+      `${indent}}`
+    ].filter(str => str).join('\n');
+  }
+}
+
+module.exports= exports = function(source) {
+  let loader = new Loader(this);
+  return loader.transform(source);
+};
+
+exports.Loader = Loader;

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "react-router-config-loader",
+  "version": "0.1.0",
+  "description": "Webpack loader to load react-router-config",
+  "main": "index.js",
+  "scripts": {
+    "test": "nyc mocha"
+  },
+  "author": {
+    "name": "grayyang",
+    "email": "[email protected]"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "deepcopy": "^0.6.3",
+    "tosource": "^1.0.0"
+  },
+  "devDependencies": {
+    "chai": "^4.1.1",
+    "chai-as-promised": "^7.1.1",
+    "js-promisify": "^1.1.0",
+    "mocha": "^3.5.0",
+    "nyc": "^11.1.0",
+    "rimraf": "^2.6.1",
+    "webpack": "^3.5.4",
+    "yaml-loader": "^0.5.0"
+  }
+}

test/componentName.spec.js

@@ -0,0 +1,28 @@
+const Loader = require('../index.js').Loader;
+const chai = require('chai');
+chai.should();
+
+describe('Loader', () => {
+  describe('#componentName', () => {
+    it('should return path name by default', () => {
+      let loader = new Loader({});
+      let route = {
+        component: './src/Componnet.js',
+      };
+
+      let name = loader.componentName(route);
+      name.should.equal('Componnet');
+    });
+
+    it('should return componentName if it is specified', () => {
+      let loader = new Loader({});
+      let route = {
+        component: './Componnet',
+        componentName: 'TestComponent',
+      };
+
+      let name = loader.componentName(route);
+      name.should.equal('TestComponent');
+    });
+  });
+});

test/componentPath.spec.js

@@ -0,0 +1,61 @@
+const Loader = require('../index.js').Loader;
+const path = require('path');
+const chai = require('chai');
+chai.should();
+
+describe('Loader', () => {
+  describe('#componentPath', () => {
+    it('should return relative path if one relative path specified', () => {
+      let loader = new Loader({});
+      let route = {
+        component: './src/Component',
+      }
+
+      let filepath = loader.componentPath(route);
+      path.resolve(filepath).should.equal(path.resolve('./src/Component'));
+      filepath.startsWith('.').should.be.true;
+    });
+
+    it('should return absolute path if one absolute path specified', () => {
+      let loader = new Loader({});
+      let route = { 
+        component: path.resolve('./src/Component'),
+      };
+
+      let filepath = loader.componentPath(route);
+      path.isAbsolute(filepath).should.be.true;
+      path.resolve(filepath).should.equal(path.resolve('./src/Component'));
+    });
+
+    it('should return module path if one npm module specified', () => {
+      let loader = new Loader({});
+      let route = {
+        component: 'Module/Component',
+      };
+
+      let filepath = loader.componentPath(route);
+      filepath.should.equal('Module/Component');
+    });
+
+    it('should return path relative to componentsDir if it is specified', () => {
+      let loader = new Loader({ query: { componentsDir: './src' } });
+      let route = {
+        component: './Component',
+      };
+
+      let filepath = loader.componentPath(route);
+      path.resolve(filepath).should.equal(path.resolve('./src/Component'));
+      filepath.startsWith('.').should.be.true;
+    });
+
+    it('should return escape character \\\\ if including \\ in path', () => {
+      let loader = new Loader({});
+      let route = {
+        component: 'Module\\Component',
+      };
+
+      let filepath = loader.componentPath(route);
+      filepath.should.equal('Module\\\\Component');
+    });
+  });
+});

test/data/components/Child.js

@@ -0,0 +1,7 @@
+class Child {
+  get whoami() {
+    return 'Child';
+  }
+}
+
+export default Child;

test/data/components/GrandChild.js

@@ -0,0 +1,7 @@
+class GrandChild {
+  get whoami() {
+    return 'GrandChild';
+  }
+}
+
+export default GrandChild;

test/data/components/Home.js

@@ -0,0 +1,7 @@
+class Home {
+  get whoami() {
+    return 'Home';
+  }
+}
+
+export default Home;