Skip to content

Commit 03eb9d5

Browse files
David Clarkdavidtheclark
David Clark
authored and
davidtheclark
committed
Fixes made while experimenting
1 parent acc9b01 commit 03eb9d5

14 files changed

+71
-85
lines changed

‎bin/batfish.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@ if (configPath) {
9393
configPath
9494
)}`
9595
);
96-
throw error;
9796
}
97+
throw error;
9898
}
9999
}
100100

‎docs/configuration.md

+22-3
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ You can specify an alternate location.
4040
- [postcssPlugins](#postcssplugins)
4141
- [fileLoaderExtensions](#fileloaderextensions)
4242
- [jsxtremeMarkdownOptions](#jsxtrememarkdownoptions)
43+
- [inlineJs](#inlinejs)
4344
- [production](#production)
4445
- [port](#port)
4546

@@ -78,6 +79,7 @@ Origin where the site will be deployed.
7879
`string` - Optional.
7980

8081
Absolute path to a module exporting a React component that will wrap all of your pages.
82+
The component can be exported with `module.exports`, `export default`, or `export { Wrapper }`.
8183

8284
### notFoundPath
8385

@@ -138,7 +140,7 @@ Otherwise, Babel might end up looking in the wrong place for the npm package.
138140

139141
### babelExclude
140142

141-
`WebpackCondition` - Optional. Default: `/node_modules/`
143+
`WebpackCondition` - Optional. Default: `/node_modules\/!(@mapbox\/batfish\/)/`
142144

143145
Any [valid Webpack Condition](https://webpack.js.org/configuration/module/#condition) will work here.
144146

@@ -155,15 +157,15 @@ These stylesheets need to be publicly available at the designated URL so Batfish
155157

156158
`Array<string>` - Optional. Default: `['last 4 versions', 'not ie < 10']`
157159

158-
All of the CSS you load via Webpack is run through [Autoprefixer](https://github.com/postcss/autoprefixer).
160+
All of the CSS you load via Webpack is run through [Autoprefixer].
159161
Use a [Browserslist](https://github.com/ai/browserslist) value to specify which browsers you need to support with vendor prefixes.
160162

161163
### postcssPlugins
162164

163165
`Array<Function>` - Optional.
164166

165167
All of the CSS you load via Webpack is run through [PostCSS](http://postcss.org/), so you can apply any [PostCSS plugins](https://github.com/postcss/postcss/blob/master/docs/plugins.md) to it.
166-
By default, only [Autoprefixer](https://github.com/postcss/autoprefixer) is applied.
168+
By default, only [Autoprefixer] is applied.
167169

168170
This value is passed directly to [postcss-loader](https://github.com/postcss/postcss-loader#plugins).
169171

@@ -181,6 +183,20 @@ Provide any of the following [jsxtreme-markdown] options (please read about them
181183

182184
**To add syntax highlighting to your Markdown pages, you'll probably want to use `remarkPlugins` or `rehypePlugins`.**
183185

186+
### inlineJs
187+
188+
`Array<Object>` - Optional.
189+
190+
If you want to inline JS into static HTML before the Webpack bundle, this is the best way to do it.
191+
192+
On the development server, they will be added at the beginning of the Webpack bundle for debugging (sourcemaps should be available).
193+
For the static build, they will be injected directly into the `<head>`.
194+
195+
Each item is an object with the following properties:
196+
197+
- **filename** `string` - Absolute path to the JS file.
198+
- **uglify** `boolean` - Default: `true`. Whether or not to process the file with [UglifyJs] before inserting into the `<head>` during the static build.
199+
184200
### production
185201

186202
`boolean` - Optional. Default: `false` for `start`, `true` for `build`
@@ -193,3 +209,6 @@ Whether or not to build for production (e.g. minimize files, trim React).
193209

194210
Preferred port for development servers.
195211
If the specified port is unavailable, another port is used.
212+
213+
[UglifyJs]: https://github.com/mishoo/UglifyJS2
214+
[Autoprefixer]: https://github.com/postcss/autoprefixer

‎docs/recipes.md

-45
This file was deleted.

‎examples/inline-js/batfish.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const path = require('path');
44

55
module.exports = () => {
66
return {
7-
wrapperPath: path.join(__dirname, './src/components/wrapper.js'),
8-
siteOrigin: 'https://www.mapbox.com'
7+
siteOrigin: 'https://www.mapbox.com',
8+
inlineJs: [{ filename: path.join(__dirname, './src/js/inline-me.js') }]
99
};
1010
};

‎examples/inline-js/src/components/wrapper.js

-21
This file was deleted.

‎examples/inline-js/src/pages/index.js

-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
const React = require('react');
44
const Helmet = require('react-helmet').Helmet;
5-
const inlineMe = require('raw-loader!../js/inline-me');
65

76
class Home extends React.Component {
87
render() {
@@ -12,9 +11,6 @@ class Home extends React.Component {
1211
<script>
1312
{"console.log('the home page has rendered')"}
1413
</script>
15-
<script>
16-
{inlineMe}
17-
</script>
1814
</Helmet>
1915
here's some regular content
2016
</div>

‎lib/create-webpack-config-base.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -109,9 +109,14 @@ function createWebpackConfigBase(batfishConfig) {
109109
__dirname,
110110
'./helmet-style-loader.js'
111111
)
112-
}
112+
},
113+
// Loader names need to be strings, and to allow them to be looked
114+
// up within batfish's module dependencies, not just the project's,
115+
// we need this.
116+
modules: [path.join(__dirname, '../node_modules'), 'node_modules']
113117
},
114118
resolve: {
119+
// This is how we expose the batfish/* fake modules during compilation.
115120
alias: {
116121
'batfish/context': batfishContextPath,
117122
'batfish/wrapper': batfishConfig.wrapperPath,

‎lib/create-webpack-config-client.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,17 @@ function createWebpackConfigClient(batfishConfig, options) {
7171
clientPlugins.push(uglifyPlugin);
7272
}
7373

74+
const appEntry = [];
75+
if (!batfishConfig.production && batfishConfig.inlineJs) {
76+
batfishConfig.inlineJs.forEach(jsData => {
77+
appEntry.push(jsData.filename);
78+
});
79+
}
80+
appEntry.push(path.join(__dirname, '../src/batfish-app.js'));
81+
7482
const clientConfig = {
7583
entry: {
76-
app: [path.join(__dirname, '../src/batfish-app.js')],
84+
app: appEntry,
7785
vendor: vendorModules
7886
},
7987
output: {

‎lib/create-webpack-config-static.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ function createWebpackConfigStatic(batfishConfig) {
2323
libraryTarget: 'commonjs2'
2424
},
2525
target: 'node',
26-
// Ignore all JS modules in node_modules: the compiled static-render-pages.js
27-
// can require them in without Webpack assistance.
28-
externals: [/node_modules\/.*?\.(?!(jsx?|json))[a-zA-Z]+$/],
26+
// Ignore all non-relative paths except batfish ones, since those should be
27+
// node modules that static-render-pages can handle.
28+
externals: [/^(?!batfish)[a-z0-9]/],
2929
plugins: [
3030
// Ensure that all files will be grouped into one file,
3131
// even if they would otherwise be split into separate chunks.

‎lib/validate-config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ function validateConfig(config, configPath) {
3030
temporaryDirectory: path.join(projectDirectory, '_tmp'),
3131
wrapperPath: path.join(__dirname, '../src/empty-wrapper.js'),
3232
externalStylesheets: [],
33-
babelExclude: /node_modules/,
33+
babelExclude: /node_modules\/!(@mapbox\/batfish\/)/,
3434
siteBasePath: '',
3535
autoprefixerBrowsers: ['last 4 versions', 'not ie < 10'],
3636
fileLoaderExtensions: [

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114
"sitemap-static": "^0.4.2",
115115
"slugg": "^1.2.1",
116116
"style-loader": "^0.18.2",
117-
"uglify-js": "^3.0.15",
117+
"uglify-js": "^3.0.24",
118118
"webpack": "^3.2.0",
119119
"webpack-chunk-hash": "^0.4.0",
120120
"webpack-merge": "^4.1.0",

‎src/batfish-app.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22

33
const React = require('react');
44
const ReactDOM = require('react-dom');
5-
const Wrapper = require('batfish/wrapper');
65
const Router = require('./router');
76
const findMatchingRoute = require('./find-matching-route');
7+
let Wrapper = require('batfish/wrapper');
8+
Wrapper = Wrapper.default || Wrapper.Wrapper || Wrapper;
89

910
// The initialization of any Batfish.
1011
// Get the current page and render it, wrapped in the user's Wrapper component.

‎src/static-render-pages.js

+16
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const fs = require('fs');
1212
const pify = require('pify');
1313
const mkdirp = require('mkdirp');
1414
const path = require('path');
15+
const UglifyJs = require('uglify-js');
1516
const batfishContext = require('batfish/context');
1617
const Wrapper = require('batfish/wrapper');
1718
const StaticHtmlPage = require('./static-html-page');
@@ -28,6 +29,20 @@ const constants = require('../lib/constants');
2829
*/
2930
function staticRenderPages(batfishConfig, assets, manifestJs) {
3031
const renderPage = route => {
32+
let inlineJs;
33+
if (batfishConfig.production && batfishConfig.inlineJs) {
34+
inlineJs = batfishConfig.inlineJs
35+
.map(jsData => {
36+
let code = fs.readFileSync(jsData.filename, 'utf8');
37+
if (jsData.uglify !== false) {
38+
const uglified = UglifyJs.minify(code);
39+
if (uglified.error) throw uglified.error;
40+
code = uglified.code;
41+
}
42+
return `<script>${code}</script>`;
43+
})
44+
.join('\n');
45+
}
3146
return route.getPage().then(pageModule => {
3247
// We render the page content separately from the StaticHtmlPage, because the page
3348
// content is what will be re-rendered when the bundled JS loads so it must
@@ -60,6 +75,7 @@ function staticRenderPages(batfishConfig, assets, manifestJs) {
6075
head.base.toString(),
6176
head.meta.toString(),
6277
head.link.toString(),
78+
inlineJs,
6379
head.script.toString(),
6480
constants.INLINE_CSS_MARKER,
6581
`<script id="loadCss">${loadCssScript}</script>`,

‎yarn.lock

+8-1
Original file line numberDiff line numberDiff line change
@@ -7004,7 +7004,7 @@ ua-parser-js@0.7.12, ua-parser-js@^0.7.9:
70047004
version "0.7.12"
70057005
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
70067006

7007-
uglify-js@3.0.x, uglify-js@^3.0.15:
7007+
uglify-js@3.0.x:
70087008
version "3.0.21"
70097009
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.0.21.tgz#db66690c7a129a2dbb2417f820ca15c119215a05"
70107010
dependencies:
@@ -7020,6 +7020,13 @@ uglify-js@^2.6, uglify-js@^2.8.29:
70207020
optionalDependencies:
70217021
uglify-to-browserify "~1.0.0"
70227022

7023+
uglify-js@^3.0.24:
7024+
version "3.0.24"
7025+
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.0.24.tgz#ee93400ad9857fb7a1671778db83f6a23f033121"
7026+
dependencies:
7027+
commander "~2.9.0"
7028+
source-map "~0.5.1"
7029+
70237030
uglify-to-browserify@~1.0.0:
70247031
version "1.0.2"
70257032
resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"

0 commit comments

Comments
 (0)