react-middleware/lib/router-css.js

Connect middleware for serving React components from a standard folder structure.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getOptions = undefined;

var _ramda = require("ramda");

var _ramda2 = _interopRequireDefault(_ramda);

var _fsExtra = require("fs-extra");

var _fsExtra2 = _interopRequireDefault(_fsExtra);

var _path = require("path");

var _path2 = _interopRequireDefault(_path);

var _fileSystemCss = require("file-system-css");

var _fileSystemCss2 = _interopRequireDefault(_fileSystemCss);

var _chalk = require("chalk");

var _chalk2 = _interopRequireDefault(_chalk);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var RESET_NAMES = ["normalize.css", "reset.css"];
var isCssReset = function isCssReset(path) {
  return _ramda2.default.any(function (name) {
    return path.endsWith(name);
  }, RESET_NAMES);
};

var getOptions = exports.getOptions = function getOptions() {
  var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];

  var isProduction = process.env.NODE_ENV === "production";
  return {
    cache: true,
    pathsRequired: false,
    watch: options.watch === undefined ? !isProduction : options.watch,
    minify: options.minify === undefined ? isProduction : options.minify
  };
};

var isMixin = function isMixin(path) {
  var name = _path2.default.basename(path, ".styl");
  if (name === "mixin") {
    return true;
  }
  if (name.endsWith(".mixin")) {
    return true;
  }
  return false;
};

exports.default = function (middleware, paths) {
  var options = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];

  options = getOptions(options);

  // Bail out if the /css folder does not exist.
  if (!_fsExtra2.default.existsSync(paths.css)) {
    return;
  }

  // Determine whether a CSS reset file exists within /css.
  var globalCssPaths = _fsExtra2.default.readdirSync(paths.css).map(function (path) {
    return _path2.default.join(paths.css + "/" + path);
  });
  var globalMixinPaths = _ramda2.default.filter(isMixin, globalCssPaths);
  var cssResetPath = _ramda2.default.pipe(_ramda2.default.filter(isCssReset), _ramda2.default.map(function (fileName) {
    return _path2.default.join(paths.css, fileName);
  }))(globalCssPaths);

  var toSourcePath = function toSourcePath(key, value) {
    var expandPaths = function expandPaths(base, path) {
      return _ramda2.default.pipe(_ramda2.default.split(","), _ramda2.default.map(function (folder) {
        return base + "/" + folder.trim();
      }))(path);
    };

    switch (key) {
      case "global":
        return [cssResetPath, paths.css];

      case "layouts":
        return paths.layouts;
      case "layout":
        return expandPaths(paths.layouts, value);

      case "pages":
        return paths.pages;
      case "page":
        return expandPaths(paths.pages, value);

      case "components":
        return paths.components;
      case "component":
        return expandPaths(paths.components, value);
    }
  };

  var queryToSourcePaths = function queryToSourcePaths(query) {
    // Process the query-string converting it into a set
    // of paths that point to the source CSS files.
    query = _ramda2.default.clone(query);
    query = Object.keys(query).length === 0 ? { global: true, pages: true, components: true, layouts: true } : query;

    return _ramda2.default.pipe(_ramda2.default.keys, _ramda2.default.map(function (key) {
      return toSourcePath(key, query[key]);
    }), _ramda2.default.flatten(), _ramda2.default.reject(_ramda2.default.isNil))(query);
  };

  // Render the CSS response.
  var render = function render(req, res) {
    var sourcePaths = arguments.length <= 2 || arguments[2] === undefined ? [] : arguments[2];

    // Prep the source paths.
    if (!_ramda2.default.is(Array, sourcePaths)) {
      sourcePaths = [sourcePaths];
    }
    sourcePaths = _ramda2.default.flatten(sourcePaths);
    if (sourcePaths.length === 0) {
      return res.status(404).send({ message: "No CSS paths to load." });
    }

    // Compile the CSS (or retrieve from cache).
    _fileSystemCss2.default.compile([globalMixinPaths, sourcePaths], options).then(function (result) {
      var cssResult = result.css;
      if (_ramda2.default.is(String, cssResult)) {
        res.set("Content-Type", "text/css");
        res.send(cssResult);
      } else {
        res.status(404).send({ message: "No CSS at " + req.url });
      }
    }).catch(function (err) {
      var args = {
        error: "Failed to compile CSS for URL path '" + req.url + "'",
        message: err.message,
        paths: sourcePaths
      };
      console.error(_chalk2.default.red(args.error));
      console.error(_chalk2.default.red(args.message));
      res.status(500).send(args);
    });
  };

  var renderGroup = function renderGroup(req, res) {
    var keys = arguments.length <= 2 || arguments[2] === undefined ? [] : arguments[2];

    var query = {};
    keys.forEach(function (key) {
      return query[key] = true;
    });
    render(req, res, queryToSourcePaths(query));
  };

  var renderSpecific = function renderSpecific(req, res, key) {
    var query = _defineProperty({}, key, req.params.name);
    render(req, res, queryToSourcePaths(query));
  };

  // Listen to GET requests for CSS.
  middleware.get("/css", function (req, res) {
    return render(req, res, queryToSourcePaths(req.query));
  });
  middleware.get("/css/common", function (req, res) {
    return renderGroup(req, res, ["global", "layouts", "components"]);
  });
  middleware.get("/css/global", function (req, res) {
    return renderGroup(req, res, ["global"]);
  });

  middleware.get("/css/pages", function (req, res) {
    return renderGroup(req, res, ["pages"]);
  });
  middleware.get("/css/page/:name", function (req, res) {
    return renderSpecific(req, res, "page");
  });

  middleware.get("/css/layouts", function (req, res) {
    return renderGroup(req, res, ["layouts"]);
  });
  middleware.get("/css/layout/:name", function (req, res) {
    return renderSpecific(req, res, "layout");
  });

  middleware.get("/css/components", function (req, res) {
    return renderGroup(req, res, ["components"]);
  });
  middleware.get("/css/component/:name", function (req, res) {
    return renderSpecific(req, res, "component");
  });
};