From f09cfc5167381daf3ca07ece719bb2984db0a599 Mon Sep 17 00:00:00 2001 From: Jasper De Moor Date: Tue, 29 May 2018 13:43:07 +0200 Subject: [PATCH 01/12] process inline style && scripts --- src/Bundler.js | 6 +- src/assets/HTMLAsset.js | 72 ++++++++++++++++++- src/assets/SASSAsset.js | 18 +++-- src/transforms/htmlnano.js | 13 +++- test/html.js | 33 +++++++-- test/integration/html-inline-js/index.html | 23 ++++++ test/integration/html-inline-styles/img.jpg | 1 + .../integration/html-inline-styles/index.html | 19 +++++ 8 files changed, 168 insertions(+), 17 deletions(-) create mode 100644 test/integration/html-inline-js/index.html create mode 100644 test/integration/html-inline-styles/img.jpg create mode 100644 test/integration/html-inline-styles/index.html diff --git a/src/Bundler.js b/src/Bundler.js index 0843580ede3..83248f190e5 100644 --- a/src/Bundler.js +++ b/src/Bundler.js @@ -207,9 +207,9 @@ class Bundler extends EventEmitter { }); }); } - - this.emit('buildStart', this.entryFiles) - + + this.emit('buildStart', this.entryFiles); + let isInitialBundle = !this.entryAssets; let startTime = Date.now(); this.pending = true; diff --git a/src/assets/HTMLAsset.js b/src/assets/HTMLAsset.js index 83fd0b8c280..290e9353918 100644 --- a/src/assets/HTMLAsset.js +++ b/src/assets/HTMLAsset.js @@ -62,6 +62,11 @@ const META = { ] }; +const SCRIPT_TYPES = { + 'application/javascript': 'js', + 'application/json': 'json' +}; + // Options to be passed to `addURLDependency` for certain tags + attributes const OPTIONS = { a: { @@ -160,8 +165,71 @@ class HTMLAsset extends Asset { } } - generate() { - return this.isAstDirty ? render(this.ast) : this.contents; + async generate() { + let parts = []; + this.ast.walk(node => { + if (node.tag === 'script' || node.tag === 'style') { + if (node.content) { + let value = node.content.join('').trim(); + if (value) { + parts.push({ + type: + node.tag === 'style' + ? 'css' + : node.attrs && node.attrs.type + ? SCRIPT_TYPES[node.attrs.type] || 'js' + : 'js', + value + }); + } + } + } + + if (node.attrs && node.attrs.style) { + parts.push({ + type: 'css', + value: node.attrs.style + }); + } + + return node; + }); + + return parts; + } + + async postProcess(generated) { + // Hacky way of filtering out the css hmr JS + // Related: https://github.com/parcel-bundler/parcel/issues/1389 + generated = generated.filter( + generatedAsset => + !(generatedAsset.type === 'js' && generatedAsset.value === '') + ); + + // Update processed inlined assets + let index = 0; + this.ast.walk(node => { + if (node.tag === 'script' || node.tag === 'style') { + if (node.content) { + node.content = generated[index].value; + index++; + } + } + + if (node.attrs && node.attrs.style) { + node.attrs.style = generated[index].value; + index++; + } + + return node; + }); + + return [ + { + type: 'html', + value: render(this.ast) + } + ]; } } diff --git a/src/assets/SASSAsset.js b/src/assets/SASSAsset.js index ff60c0a43c5..95da1847768 100644 --- a/src/assets/SASSAsset.js +++ b/src/assets/SASSAsset.js @@ -27,8 +27,16 @@ class SASSAsset extends Asset { path.dirname(this.name) ); opts.data = opts.data ? opts.data + os.EOL + code : code; - let type = this.options.rendition ? this.options.rendition.type : path.extname(this.name).toLowerCase().replace('.',''); - opts.indentedSyntax = typeof opts.indentedSyntax === 'boolean' ? opts.indentedSyntax : type === 'sass'; + let type = this.options.rendition + ? this.options.rendition.type + : path + .extname(this.name) + .toLowerCase() + .replace('.', ''); + opts.indentedSyntax = + typeof opts.indentedSyntax === 'boolean' + ? opts.indentedSyntax + : type === 'sass'; opts.functions = Object.assign({}, opts.functions, { url: node => { @@ -36,9 +44,11 @@ class SASSAsset extends Asset { return new sass.types.String(`url(${JSON.stringify(filename)})`); } }); - + opts.importer = opts.importer || []; - opts.importer = Array.isArray(opts.importer) ? opts.importer : [opts.importer]; + opts.importer = Array.isArray(opts.importer) + ? opts.importer + : [opts.importer]; opts.importer.push((url, prev, done) => { if (!/^(~|\.\/|\/)/.test(url)) { url = './' + url; diff --git a/src/transforms/htmlnano.js b/src/transforms/htmlnano.js index 96acbf7dd8c..44e22153a4f 100644 --- a/src/transforms/htmlnano.js +++ b/src/transforms/htmlnano.js @@ -4,10 +4,17 @@ const htmlnano = require('htmlnano'); module.exports = async function(asset) { await asset.parseIfNeeded(); - let htmlNanoConfig = await asset.getConfig( - ['.htmlnanorc', '.htmlnanorc.js'], - {packageKey: 'htmlnano'} + let htmlNanoConfig = Object.assign( + {}, + await asset.getConfig(['.htmlnanorc', '.htmlnanorc.js'], { + packageKey: 'htmlnano' + }), + { + minifyCss: false, + minifyJs: false + } ); + let res = await posthtml([htmlnano(htmlNanoConfig)]).process(asset.ast, { skipParse: true }); diff --git a/test/html.js b/test/html.js index cf4313eab93..1588f20137e 100644 --- a/test/html.js +++ b/test/html.js @@ -277,11 +277,6 @@ describe('html', function() { ) ); - // minifyJson - assert( - html.includes('') - ); - // minifySvg is false assert( html.includes( @@ -576,4 +571,32 @@ describe('html', function() { ] }); }); + + it('should process inline JS', async function() { + let b = await bundle(__dirname + '/integration/html-inline-js/index.html', { + production: true + }); + + const bundleContent = (await fs.readFile(b.name)).toString(); + assert(!bundleContent.includes('someArgument')); + }); + + it('should process inline styles', async function() { + let b = await bundle( + __dirname + '/integration/html-inline-styles/index.html', + {production: true} + ); + + await assertBundleTree(b, { + name: 'index.html', + assets: ['index.html'], + childBundles: [ + { + type: 'jpg', + assets: ['img.jpg'], + childBundles: [] + } + ] + }); + }); }); diff --git a/test/integration/html-inline-js/index.html b/test/integration/html-inline-js/index.html new file mode 100644 index 00000000000..edcdbc27493 --- /dev/null +++ b/test/integration/html-inline-js/index.html @@ -0,0 +1,23 @@ + + + + Inline JavaScript Parcel + + + + + + + + \ No newline at end of file diff --git a/test/integration/html-inline-styles/img.jpg b/test/integration/html-inline-styles/img.jpg new file mode 100644 index 00000000000..ff5ab932824 --- /dev/null +++ b/test/integration/html-inline-styles/img.jpg @@ -0,0 +1 @@ +This should be an image \ No newline at end of file diff --git a/test/integration/html-inline-styles/index.html b/test/integration/html-inline-styles/index.html new file mode 100644 index 00000000000..82f66b82417 --- /dev/null +++ b/test/integration/html-inline-styles/index.html @@ -0,0 +1,19 @@ + + + + Inline JavaScript Parcel + + + + +
+

+

+
+ + \ No newline at end of file From a612b82e81ac2ad49acc120c2460a814e9ca802e Mon Sep 17 00:00:00 2001 From: Jasper De Moor Date: Tue, 29 May 2018 13:53:27 +0200 Subject: [PATCH 02/12] minor fix --- src/assets/HTMLAsset.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/HTMLAsset.js b/src/assets/HTMLAsset.js index 290e9353918..5070d9dc6f5 100644 --- a/src/assets/HTMLAsset.js +++ b/src/assets/HTMLAsset.js @@ -210,7 +210,7 @@ class HTMLAsset extends Asset { let index = 0; this.ast.walk(node => { if (node.tag === 'script' || node.tag === 'style') { - if (node.content) { + if (node.content && node.content.join('').trim()) { node.content = generated[index].value; index++; } From 63cd6c8591762c67bec19c15f4fc03802f8a13ed Mon Sep 17 00:00:00 2001 From: Jasper De Moor Date: Thu, 14 Jun 2018 08:26:38 +0200 Subject: [PATCH 03/12] add bg-img test --- test/html.js | 5 +++++ test/integration/html-inline-styles/bg.jpg | 1 + test/integration/html-inline-styles/index.html | 1 + 3 files changed, 7 insertions(+) create mode 100644 test/integration/html-inline-styles/bg.jpg diff --git a/test/html.js b/test/html.js index 1588f20137e..a9c6a67fcab 100644 --- a/test/html.js +++ b/test/html.js @@ -591,6 +591,11 @@ describe('html', function() { name: 'index.html', assets: ['index.html'], childBundles: [ + { + type: 'jpg', + assets: ['bg.jpg'], + childBundles: [] + }, { type: 'jpg', assets: ['img.jpg'], diff --git a/test/integration/html-inline-styles/bg.jpg b/test/integration/html-inline-styles/bg.jpg new file mode 100644 index 00000000000..084f7b47390 --- /dev/null +++ b/test/integration/html-inline-styles/bg.jpg @@ -0,0 +1 @@ +This is a background image \ No newline at end of file diff --git a/test/integration/html-inline-styles/index.html b/test/integration/html-inline-styles/index.html index 82f66b82417..8379ebc2c5c 100644 --- a/test/integration/html-inline-styles/index.html +++ b/test/integration/html-inline-styles/index.html @@ -14,6 +14,7 @@

+

\ No newline at end of file From a496c4a1fe6e71b31fe8d7362b0e39c5d371c366 Mon Sep 17 00:00:00 2001 From: DeMoorJasper Date: Tue, 17 Jul 2018 16:09:41 -0700 Subject: [PATCH 04/12] fix html test --- src/assets/HTMLAsset.js | 10 ++++++++-- src/utils/md5.js | 3 +-- test/graphql.js | 1 + test/html.js | 2 +- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/assets/HTMLAsset.js b/src/assets/HTMLAsset.js index de3243034c0..f9316560a3a 100644 --- a/src/assets/HTMLAsset.js +++ b/src/assets/HTMLAsset.js @@ -211,13 +211,19 @@ class HTMLAsset extends Asset { } async postProcess(generated) { - // Hacky way of filtering out the css hmr JS + // Hacky way of filtering out CSS HMR & sourcemaps // Related: https://github.com/parcel-bundler/parcel/issues/1389 generated = generated.filter( generatedAsset => - !(generatedAsset.type === 'js' && generatedAsset.value === '') + !( + (generatedAsset.type === 'js' && generatedAsset.value === '') || + generatedAsset.type === 'map' || + generatedAsset.value.includes('_css_loader') + ) ); + console.log(generated); + // Update processed inlined assets let index = 0; this.ast.walk(node => { diff --git a/src/utils/md5.js b/src/utils/md5.js index 2f2184d59bb..5d53698d51e 100644 --- a/src/utils/md5.js +++ b/src/utils/md5.js @@ -10,8 +10,7 @@ function md5(string, encoding = 'hex') { md5.file = function(filename) { return new Promise((resolve, reject) => { - fs - .createReadStream(filename) + fs.createReadStream(filename) .pipe(crypto.createHash('md5').setEncoding('hex')) .on('finish', function() { resolve(this.read()); diff --git a/test/graphql.js b/test/graphql.js index b532006994a..ed6eacc93af 100644 --- a/test/graphql.js +++ b/test/graphql.js @@ -31,6 +31,7 @@ describe('graphql', function() { firstName lastName } + `.definitions ); }); diff --git a/test/html.js b/test/html.js index ac514a33b9d..b102365600d 100644 --- a/test/html.js +++ b/test/html.js @@ -286,7 +286,7 @@ describe('html', function() { // mergeStyles assert( html.includes( - '' + '' ) ); From 0c2bbd5a5221732f2fa8e2ca995c9f73b933a0c8 Mon Sep 17 00:00:00 2001 From: DeMoorJasper Date: Tue, 17 Jul 2018 16:12:19 -0700 Subject: [PATCH 05/12] restore failing json test --- test/html.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/test/html.js b/test/html.js index b102365600d..21a4bf3a2c9 100644 --- a/test/html.js +++ b/test/html.js @@ -283,6 +283,11 @@ describe('html', function() { let html = await fs.readFile(__dirname + '/dist/index.html', 'utf8'); + // minifyJson + assert( + html.includes('') + ); + // mergeStyles assert( html.includes( From b5de45f6ee536264c2d10f937df477979b82f520 Mon Sep 17 00:00:00 2001 From: DeMoorJasper Date: Tue, 17 Jul 2018 16:26:56 -0700 Subject: [PATCH 06/12] add support for custom style syntaxes --- src/assets/HTMLAsset.js | 8 +++++++- test/html.js | 16 ++++++++++++++++ test/integration/html-inline-sass/index.html | 12 ++++++++++++ 3 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 test/integration/html-inline-sass/index.html diff --git a/src/assets/HTMLAsset.js b/src/assets/HTMLAsset.js index f9316560a3a..587e444bf95 100644 --- a/src/assets/HTMLAsset.js +++ b/src/assets/HTMLAsset.js @@ -187,12 +187,18 @@ class HTMLAsset extends Asset { parts.push({ type: node.tag === 'style' - ? 'css' + ? node.attrs.type + ? node.attrs.type.replace('text/', '') + : 'css' : node.attrs && node.attrs.type ? SCRIPT_TYPES[node.attrs.type] || 'js' : 'js', value }); + + if (node.tag === 'style') { + node.attrs.type = 'text/css'; + } } } } diff --git a/test/html.js b/test/html.js index 21a4bf3a2c9..fa88fc025ac 100644 --- a/test/html.js +++ b/test/html.js @@ -622,4 +622,20 @@ describe('html', function() { ] }); }); + + it.only('should process inline styles using lang', async function() { + let b = await bundle( + __dirname + '/integration/html-inline-sass/index.html', + {production: true} + ); + + await assertBundleTree(b, { + name: 'index.html', + assets: ['index.html'] + }); + + let html = await fs.readFile(__dirname + '/dist/index.html', 'utf8'); + + assert(html.includes('')); + }); }); diff --git a/test/integration/html-inline-sass/index.html b/test/integration/html-inline-sass/index.html new file mode 100644 index 00000000000..51d5848b1dd --- /dev/null +++ b/test/integration/html-inline-sass/index.html @@ -0,0 +1,12 @@ + + + + Inline JavaScript Parcel + + + + + \ No newline at end of file From 5524c8299f4d959f2071b27a85a2e9557d6d276b Mon Sep 17 00:00:00 2001 From: DeMoorJasper Date: Tue, 17 Jul 2018 16:48:25 -0700 Subject: [PATCH 07/12] support custom scripting languages inline --- src/assets/HTMLAsset.js | 42 ++++++++++++++++++++++++++++------------- test/html.js | 2 +- 2 files changed, 30 insertions(+), 14 deletions(-) diff --git a/src/assets/HTMLAsset.js b/src/assets/HTMLAsset.js index 587e444bf95..5d808fc6c80 100644 --- a/src/assets/HTMLAsset.js +++ b/src/assets/HTMLAsset.js @@ -184,20 +184,38 @@ class HTMLAsset extends Asset { if (node.content) { let value = node.content.join('').trim(); if (value) { - parts.push({ - type: - node.tag === 'style' - ? node.attrs.type - ? node.attrs.type.replace('text/', '') - : 'css' - : node.attrs && node.attrs.type - ? SCRIPT_TYPES[node.attrs.type] || 'js' - : 'js', - value - }); + let type; + + if (node.tag === 'style') { + if (node.attrs && node.attrs.type) { + type = node.attrs.type.replace('text/', ''); + } else { + type = 'css'; + } + } else { + if (node.attrs && node.attrs.type) { + if (SCRIPT_TYPES[node.attrs.type]) { + type = SCRIPT_TYPES[node.attrs.type]; + } else { + type = node.attrs.type.replace('application/', ''); + } + } else { + type = 'js'; + } + } + + console.log(type); + + parts.push({type, value}); + + if (!node.attrs) { + node.attrs = {}; + } if (node.tag === 'style') { node.attrs.type = 'text/css'; + } else if (node.attrs && !SCRIPT_TYPES[node.attrs.type]) { + node.attrs.type = 'application/javascript'; } } } @@ -228,8 +246,6 @@ class HTMLAsset extends Asset { ) ); - console.log(generated); - // Update processed inlined assets let index = 0; this.ast.walk(node => { diff --git a/test/html.js b/test/html.js index fa88fc025ac..38e4949c092 100644 --- a/test/html.js +++ b/test/html.js @@ -623,7 +623,7 @@ describe('html', function() { }); }); - it.only('should process inline styles using lang', async function() { + it('should process inline styles using lang', async function() { let b = await bundle( __dirname + '/integration/html-inline-sass/index.html', {production: true} From 3b5c509b9d8e28b874ea4308d619f41465170b5c Mon Sep 17 00:00:00 2001 From: DeMoorJasper Date: Tue, 17 Jul 2018 17:02:05 -0700 Subject: [PATCH 08/12] inline coffee test --- src/assets/HTMLAsset.js | 2 -- test/html.js | 16 ++++++++++++++++ .../html-inline-coffeescript/index.html | 11 +++++++++++ 3 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 test/integration/html-inline-coffeescript/index.html diff --git a/src/assets/HTMLAsset.js b/src/assets/HTMLAsset.js index 5d808fc6c80..cdc7af2daec 100644 --- a/src/assets/HTMLAsset.js +++ b/src/assets/HTMLAsset.js @@ -204,8 +204,6 @@ class HTMLAsset extends Asset { } } - console.log(type); - parts.push({type, value}); if (!node.attrs) { diff --git a/test/html.js b/test/html.js index 38e4949c092..d156a9aa274 100644 --- a/test/html.js +++ b/test/html.js @@ -638,4 +638,20 @@ describe('html', function() { assert(html.includes('')); }); + + it.only('should process inline non-js scripts', async function() { + let b = await bundle( + __dirname + '/integration/html-inline-coffeescript/index.html', + {production: true} + ); + + await assertBundleTree(b, { + name: 'index.html', + assets: ['index.html'] + }); + + let html = await fs.readFile(__dirname + '/dist/index.html', 'utf8'); + + assert(html.includes('alert("Hello, World!")')); + }); }); diff --git a/test/integration/html-inline-coffeescript/index.html b/test/integration/html-inline-coffeescript/index.html new file mode 100644 index 00000000000..2f6cc931d76 --- /dev/null +++ b/test/integration/html-inline-coffeescript/index.html @@ -0,0 +1,11 @@ + + + + Inline JavaScript Parcel + + + + + \ No newline at end of file From 7a6d18c291faf994218b70ec14959998e5fd23aa Mon Sep 17 00:00:00 2001 From: DeMoorJasper Date: Tue, 17 Jul 2018 17:19:32 -0700 Subject: [PATCH 09/12] fix json --- src/assets/HTMLAsset.js | 16 +++++++++++++++- test/html.js | 4 ++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/assets/HTMLAsset.js b/src/assets/HTMLAsset.js index cdc7af2daec..9f9afa67ce4 100644 --- a/src/assets/HTMLAsset.js +++ b/src/assets/HTMLAsset.js @@ -63,7 +63,7 @@ const META = { const SCRIPT_TYPES = { 'application/javascript': 'js', - 'application/json': 'json' + 'application/json': false }; // Options to be passed to `addURLDependency` for certain tags + attributes @@ -194,6 +194,11 @@ class HTMLAsset extends Asset { } } else { if (node.attrs && node.attrs.type) { + // Skip JSON + if (SCRIPT_TYPES[node.attrs.type] === false) { + return node; + } + if (SCRIPT_TYPES[node.attrs.type]) { type = SCRIPT_TYPES[node.attrs.type]; } else { @@ -248,6 +253,15 @@ class HTMLAsset extends Asset { let index = 0; this.ast.walk(node => { if (node.tag === 'script' || node.tag === 'style') { + // Skip JSON + if ( + node.attrs && + node.attrs.type && + SCRIPT_TYPES[node.attrs.type] === false + ) { + return node; + } + if (node.content && node.content.join('').trim()) { node.content = generated[index].value; index++; diff --git a/test/html.js b/test/html.js index d156a9aa274..3c3147d8808 100644 --- a/test/html.js +++ b/test/html.js @@ -291,7 +291,7 @@ describe('html', function() { // mergeStyles assert( html.includes( - '' + '' ) ); @@ -639,7 +639,7 @@ describe('html', function() { assert(html.includes('')); }); - it.only('should process inline non-js scripts', async function() { + it('should process inline non-js scripts', async function() { let b = await bundle( __dirname + '/integration/html-inline-coffeescript/index.html', {production: true} From d6facce7a128f423cfcce1ffc334dcdcfae0495b Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Sat, 21 Jul 2018 09:57:46 -0700 Subject: [PATCH 10/12] Slight simplification --- src/Pipeline.js | 6 +++ src/assets/HTMLAsset.js | 112 +++++++++++++++++----------------------- test/html.js | 4 +- 3 files changed, 55 insertions(+), 67 deletions(-) diff --git a/src/Pipeline.js b/src/Pipeline.js index 16c9a9c5b02..4d20622ae3c 100644 --- a/src/Pipeline.js +++ b/src/Pipeline.js @@ -65,6 +65,12 @@ class Pipeline { subAsset.cacheData = Object.assign(asset.cacheData, subAsset.cacheData); let processed = await this.processAsset(subAsset); + if (rendition.meta) { + for (let res of processed) { + res.meta = rendition.meta; + } + } + generated = generated.concat(processed); asset.hash = md5(asset.hash + subAsset.hash); } else { diff --git a/src/assets/HTMLAsset.js b/src/assets/HTMLAsset.js index 9f9afa67ce4..48ba6d392d1 100644 --- a/src/assets/HTMLAsset.js +++ b/src/assets/HTMLAsset.js @@ -63,6 +63,7 @@ const META = { const SCRIPT_TYPES = { 'application/javascript': 'js', + 'text/javascript': 'js', 'application/json': false }; @@ -178,56 +179,55 @@ class HTMLAsset extends Asset { } async generate() { + // Extract inline + + \ No newline at end of file diff --git a/test/integration/html-inline-js-require/test.js b/test/integration/html-inline-js-require/test.js new file mode 100644 index 00000000000..4b2e66372c8 --- /dev/null +++ b/test/integration/html-inline-js-require/test.js @@ -0,0 +1 @@ +console.log('test')