Allow defining config in various ways; e.g. package.json or .reactsnaprc.js

[maxmilton]

Feature request

Feature description

Right now react-snap allows configuration via a reactSnap property in package.json. It's perfectly fine for simple use cases but for more advanced use the full power of JS is desirable. Or perhaps the simplicity of YAML might be appealing to some.

Provide a way to load configuration from various sources. Examples:

• package.json property (current)
• .reactsnaprc.js
• .reactsnap.conf.js
• .reactsnaprc.yml
• .reactsnaprc (not sure what format it should be, maybe infer from the contents?)

Use case

For my specific use case, I want to use normal JS to I can import some predefined configs. I use UglifyJS in other places in my projects, so I want to import an object with the UglifyJS config and use that for reactSnap.minifyHtml.minifyJS.

Another use case would be to allow using non JSON values. E.g. reactSnap.minifyHtml.minifyJS.mangle.properties.regex and reactSnap.minifyHtml.ignoreCustomComments take a RegExp.

Implementation details

You could roll your own solution like eslint but that seams like overkill.

It may be better to use an existing package instead. nconf and node-config look pretty sweet. There're also a bunch of other options listed here.

[stereobooster]

If this will happen I would use https://github.com/davidtheclark/cosmiconfig.

and use that for reactSnap.minifyHtml.minifyJS.

As far as I remember react-snap currently doesn't minify JS. See #86

Issue with reactSnap.minifyHtml.ignoreCustomComments and VueJS SSR should be addressed. I haven't decided yet how to do it.

[maxmilton]

Nice, cosmiconfig, looks like a winner. Super simple API 👍

Inline JS can already be minified with react-snap. minifyJS is an option for html-minifier, and works great. For example, a working reactSnap config from one of my projects:

"reactSnap": {
    "minifyHtml": {
      "minifyCSS": {
        "level": {
          "1": {
            "all": true
          },
          "2": {
            "all": true
          }
        }
      },
      "minifyJS": {
        "compress": {
          "drop_console": true,
          "drop_debugger": true,
          "negate_iife": false,
          "passes": 2,
          "pure_getters": true,
          "unsafe": true,
          "unsafe_proto": true
        },
        "output": {
          "wrap_iife": true,
          "comments": false
        },
        "toplevel": true,
        "warnings": true
      },
      "collapseBooleanAttributes": true,
      "collapseWhitespace": true,
      "decodeEntities": true,
      "FIXME:_NEED REGEX SUPPORT____ignoreCustomComments": "[/^$/]",
      "keepClosingSlash": true,
      "removeAttributeQuotes": true,
      "FIXME:_ENABLE____removeComments": true,
      "removeEmptyAttributes": true,
      "removeRedundantAttributes": true,
      "removeScriptTypeAttributes": true,
      "removeStyleLinkTypeAttributes": true,
      "sortAttributes": true,
      "sortClassName": true
    },
    "source": "dist",
    "FIXME:_ENABLE_ONCE_STABLE____inlineCss": true,
    "skipThirdPartyRequests": true,
    "preconnectThirdParty": false,
    "asyncScriptTags": false
  }