From 9dd356f8e12d0b649a9888c25674801b90f174fd Mon Sep 17 00:00:00 2001 From: Giancarlo Anemone Date: Tue, 9 Jan 2018 13:26:07 -0800 Subject: [PATCH] Fix issue with serving assets from memory --- build/compiler.js | 8 ++++-- lib/simple-webpack-dev-middleware/index.js | 7 ++---- package.json | 1 - test/cli/dev.js | 29 ++++++++++++++++------ test/fixtures/assets/src/main.js | 2 +- test/fixtures/assets/src/static/test.css | 3 +++ test/fixtures/assets/src/static/test.js | 0 test/run-command.js | 4 +-- yarn.lock | 12 --------- 9 files changed, 36 insertions(+), 30 deletions(-) create mode 100644 test/fixtures/assets/src/static/test.css delete mode 100644 test/fixtures/assets/src/static/test.js diff --git a/build/compiler.js b/build/compiler.js index 84bcb404..cb981e46 100644 --- a/build/compiler.js +++ b/build/compiler.js @@ -11,7 +11,6 @@ const webpackDevMiddleware = require('../lib/simple-webpack-dev-middleware'); const ChunkManifestPlugin = require('./external-chunk-manifest-plugin.js'); const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); -const composeMiddleware = require('compose-middleware').compose; const { //zopfliWebpackPlugin, brotliWebpackPlugin, @@ -612,7 +611,12 @@ function Compiler({ publicPath: '/_static/', }); const hot = webpackHotMiddleware(compiler, {log: false}); - return composeMiddleware([dev, hot]); + return (req, res, next) => { + dev(req, res, err => { + if (err) return next(err); + return hot(req, res, next); + }); + }; }; this.clean = () => { diff --git a/lib/simple-webpack-dev-middleware/index.js b/lib/simple-webpack-dev-middleware/index.js index fc5ef46a..0317b4e7 100644 --- a/lib/simple-webpack-dev-middleware/index.js +++ b/lib/simple-webpack-dev-middleware/index.js @@ -61,17 +61,14 @@ module.exports = function(compiler, options) { let content = context.fs.readFileSync(filename); content = shared.handleRangeHeaders(content, req, res); res.setHeader('Access-Control-Allow-Origin', '*'); // To support XHR, etc. - res.setHeader('Content-Type', mime.lookup(filename) + '; charset=UTF-8'); + res.setHeader('Content-Type', mime.getType(filename) + '; charset=UTF-8'); res.setHeader('Content-Length', content.length); if (context.options.headers) { for (const name in context.options.headers) { res.setHeader(name, context.options.headers[name]); } } - // Express automatically sets the statusCode to 200, but not all servers do (Koa). - res.statusCode = res.statusCode || 200; - if (res.send) res.send(content); - else res.end(content); + res.end(content); } } diff --git a/package.json b/package.json index d6ff365e..b47ca324 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,6 @@ "browser-unhandled-rejection": "^1.0.1", "case-sensitive-paths-webpack-plugin": "^2.1.1", "chalk": "^2.3.0", - "compose-middleware": "4.0.0", "compression-webpack-plugin": "^1.1.3", "core-js": "^2.5.3", "enzyme-adapter-react-16": "^1.1.1", diff --git a/test/cli/dev.js b/test/cli/dev.js index 7d1216a7..76726630 100644 --- a/test/cli/dev.js +++ b/test/cli/dev.js @@ -5,6 +5,7 @@ const path = require('path'); const test = require('tape'); const {dev} = require('../run-command'); const {promisify} = require('util'); +const request = require('request-promise'); const exists = promisify(fs.exists); const readFile = promisify(fs.readFile); @@ -21,7 +22,7 @@ test('`fusion dev` works', async t => { t.end(); }); -test('`fusion dev` works with assets', async t => { +test.only('`fusion dev` works with assets', async t => { const dir = path.resolve(__dirname, '../fixtures/assets'); const entryPath = path.resolve( dir, @@ -29,15 +30,29 @@ test('`fusion dev` works with assets', async t => { ); const testFilePath = path.resolve(dir, '.fusion/test-asset'); - const {proc} = await dev(`--dir=${dir}`); + const {proc, port} = await dev(`--dir=${dir}`); t.ok(await exists(testFilePath), 'Generates test file'); t.ok(await exists(entryPath), 'Entry file gets compiled'); const assetPath = await readFile(testFilePath); - t.equal( - assetPath.toString(), - '/_static/d41d8cd98f00b204e9800998ecf8427e.js', - 'sets correct asset path' - ); + const expectedAssetPath = '/_static/c300a7df05c8142598558365dbdaa451.css'; + t.equal(assetPath.toString(), expectedAssetPath, 'sets correct asset path'); + try { + t.ok( + await request(`http://localhost:${port}/_static/client-main.js`), + 'serves client-main from memory correctly' + ); + t.ok( + await request(`http://localhost:${port}/_static/client-vendor.js`), + 'serves client-vendor from memory correctly' + ); + t.equal( + fs.readFileSync(path.resolve(dir, 'src/static/test.css')).toString(), + await request(`http://localhost:${port}${expectedAssetPath}`), + 'serves css file from memory correctly' + ); + } catch (e) { + t.iferror(e); + } proc.kill(); t.end(); }); diff --git a/test/fixtures/assets/src/main.js b/test/fixtures/assets/src/main.js index 9fbc3035..be172ccd 100644 --- a/test/fixtures/assets/src/main.js +++ b/test/fixtures/assets/src/main.js @@ -3,7 +3,7 @@ import {assetUrl} from 'fusion-core'; export default async function() { if (__NODE__) { const fs = require('fs'); - fs.writeFileSync('.fusion/test-asset', assetUrl('./static/test.js')); + fs.writeFileSync('.fusion/test-asset', assetUrl('./static/test.css')); } const app = new App('element', el => el); return app; diff --git a/test/fixtures/assets/src/static/test.css b/test/fixtures/assets/src/static/test.css new file mode 100644 index 00000000..f60a32ca --- /dev/null +++ b/test/fixtures/assets/src/static/test.css @@ -0,0 +1,3 @@ +.test { + color: black; +} \ No newline at end of file diff --git a/test/fixtures/assets/src/static/test.js b/test/fixtures/assets/src/static/test.js deleted file mode 100644 index e69de29b..00000000 diff --git a/test/run-command.js b/test/run-command.js index a7e32287..fead76b5 100644 --- a/test/run-command.js +++ b/test/run-command.js @@ -50,14 +50,14 @@ async function start(args, options) { const port = await getPort(); const {proc} = cmd(`start --port=${port} ${args}`, options); const res = await waitForServer(port); - return {proc, res}; + return {proc, res, port}; } async function dev(args, options) { const port = await getPort(); const {proc} = cmd(`dev --port=${port} --no-open ${args}`, options); const res = await waitForServer(port); - return {proc, res}; + return {proc, res, port}; } async function waitForServer(port) { diff --git a/yarn.lock b/yarn.lock index fd66924d..1edc1f92 100644 --- a/yarn.lock +++ b/yarn.lock @@ -125,10 +125,6 @@ version "0.9.44" resolved "https://registry.yarnpkg.com/@types/core-js/-/core-js-0.9.44.tgz#0d3b179ffa612898beed19fe8cc863822da507e5" -"@types/debug@0.0.29": - version "0.0.29" - resolved "https://registry.yarnpkg.com/@types/debug/-/debug-0.0.29.tgz#a1e514adfbd92f03a224ba54d693111dbf1f3754" - "@types/mkdirp@^0.3.29": version "0.3.29" resolved "https://registry.yarnpkg.com/@types/mkdirp/-/mkdirp-0.3.29.tgz#7f2ad7ec55f914482fc9b1ec4bb1ae6028d46066" @@ -1642,14 +1638,6 @@ commondir@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b" -compose-middleware@4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/compose-middleware/-/compose-middleware-4.0.0.tgz#1e7298257cd9c841485f3ca1de385d3e7da0dd0f" - dependencies: - "@types/debug" "0.0.29" - array-flatten "^2.1.0" - debug "^3.1.0" - compressible@~2.0.11: version "2.0.12" resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.12.tgz#c59a5c99db76767e9876500e271ef63b3493bd66"