Import/require html from js #926

pierredavidbelanger · 2018-03-01T19:09:38Z

This is the first time I contribute to this project, so I am sorry if I missed something important.

I wanted to do something like what is described here #848
In short, I wanted to be able to const template = require('./other.html');

You will see that I have no idea what I'm doing ;)
I am especially not proud of how I ended up butchering src/packagers/HTMLPackager.js

Also, all 232 tests are still passing.

Fixes #848
Closes #178

…'./other.html')`

codecov-io · 2018-03-01T19:19:39Z

Codecov Report

Merging #926 into master will increase coverage by 0.15%.
The diff coverage is 90%.

@@            Coverage Diff             @@
##           master     #926      +/-   ##
==========================================
+ Coverage   89.58%   89.73%   +0.15%     
==========================================
  Files          68       68              
  Lines        3255     3264       +9     
==========================================
+ Hits         2916     2929      +13     
+ Misses        339      335       -4

Impacted Files	Coverage Δ
src/Bundler.js	`92.88% <100%> (+0.02%)`	⬆️
src/packagers/JSPackager.js	`100% <100%> (+10%)`	⬆️
src/packagers/HTMLPackager.js	`95.74% <87.5%> (-1.76%)`	⬇️
src/assets/CSSAsset.js	`81.73% <0%> (-4.35%)`	⬇️
src/utils/installPackage.js	`61.9% <0%> (-3.18%)`	⬇️
src/assets/JSAsset.js	`90.83% <0%> (-3.06%)`	⬇️
src/WorkerFarm.js	`91.93% <0%> (-1.62%)`	⬇️
src/visitors/fs.js	`80.55% <0%> (+0.69%)`	⬆️
src/utils/PromiseQueue.js	`97.67% <0%> (+2.32%)`	⬆️
src/assets/StylusAsset.js	`86.04% <0%> (+2.32%)`	⬆️
... and 2 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e7ea515...ee2236c. Read the comment docs.

…s more like a text-loader

pierredavidbelanger · 2018-03-01T23:33:55Z

I initially assumed some things wrong. So I just pushed a new commit.

All tests are still passing.
Also, I am able to use the new feature in my simple angularjs projets.

Still, I do not really know what I am doing, I essentially just randomly hack here and there.

I do not know why I get this same error with my OnsenUI project.
I hope it is not related to my parcel hack.
I cannot tel for now.

Anyways, I hope this PR can help someone :)

davidnagli · 2018-03-03T17:55:28Z

How does this relate to #293?

pierredavidbelanger · 2018-03-03T18:00:27Z

@davidnagli I am actually using such a custom bundle loader to implements the HTML loading part.

But, in retrospect, and to be honest, I am not sure I am heading the right way with this PR.

I guess, one want to fetch(require('./other.html')).then(...)
but not const content = require('./other.html'); as this PR does.

What do your think ?
I can discuss this further on the Slack if you want.

BrOrlandi · 2018-03-03T20:37:08Z

I want this feature too! 👍

lbguilherme · 2018-03-03T22:42:47Z

@pierredavidbelanger You want import('./other.html').then(...), which this PR seems to cover

arabsight · 2018-03-04T09:18:38Z

This will enable me to use aurelia, I was hoping something like this would be added 👍

davidnagli

Great job! 🎉

davidnagli · 2018-03-07T14:31:41Z

src/builtins/loaders/text-loader.js

@@ -0,0 +1,5 @@
+module.exports = function loadTextBundle(bundle) {
+  return fetch(bundle).then(function (res) {
+    return res.text();


I would use an arrow function here 😀

module.exports.loadTextBundle = bundle => fetch(bundle).then(res => res.text())

The linter (in the pre-commit hook) does not seems to like arrow functions:

src/builtins/loaders/text-loader.js 1:26 error Parsing error: Unexpected token > ✖ 1 problem (1 error, 0 warnings) husky > pre-commit hook failed (add --no-verify to bypass)

I was trying to commit this:

module.exports = bundle => fetch(bundle).then(res => res.text())

Oh ya builtins are supposed to be in ES5 👍

davidnagli · 2018-03-08T13:04:54Z

src/builtins/loaders/text-loader.js

@@ -0,0 +1,5 @@
+module.exports = function loadTextBundle(bundle) {
+  return fetch(bundle).then(function (res) {
+    return res.text();


Oh ya builtins are supposed to be in ES5 👍

ghost · 2018-03-09T18:02:49Z

Is this PR supposed to be released with the next release?

davidnagli · 2018-03-16T01:55:40Z

Just realized the broader implications of merging this PR...

Currently HTML file imports are treated like RawAssets, in that they just return the resolved URL pointing to the file and not the actual contents of the file itself.

However, by changing this behavior to allow HTML imports, we effectively break the way it previously worked.

That means that anything like:

import loginPage from 'login.html'

<a href=loginPage>Link to login page</a>

would suddenly break, since now loginPage would be the actual contents of the login page rather than the url to the login page as it was before.

Maybe I'm wrong? Does your code magically handle this somehow?

Most likely we're gonna need to carefully design how this will play out and potentially introduce a breaking release when the time comes (Parcel 2.0?). Let me know if I'm wrong, but if not we should open a separate RFC issue to discuss / design everything and then come back to this once that's ready.

davidnagli

Adding blocking review to prevent merging for now until we work through those kinks

pierredavidbelanger · 2018-03-16T02:23:21Z

@davidnagli You are absolutely right. This PR breaks the way it previously worked. And my code does NOT magically handle this :)

I had a bad felling a couple days ago about heading the wrong way with this PR.
Now you proved it.

If was just me, I would close this one, until we know what we need and, of course, when Parcel is ready for a breaking release.

pierredavidbelanger · 2018-03-16T16:35:05Z

@davidnagli just to be sure though,

right now, with the master branch, your snippet is not working:

import loginPage from 'login.html'

<a href=loginPage>Link to login page</a>

for at least 2 reasons:

the generated HTML file name (the the file system) is not the same as the dependency name required() in the parent .js file
the HTMLAsset is not treated like a RawAssets, so no module.exports="/whateverf171619ff7dcf2171a706973.html"; is generated in the parent .js like it should with, say, a .txt file

I can try to have a look at this.

pierredavidbelanger · 2018-03-16T17:13:36Z

@davidnagli I created the simplest app that demonstrate the problem:

git clone https://github.com/pierredavidbelanger/parcel-html-test
cd parcel-html-test
yarn install
yarn run build
ls dist && tail dist/*.js

510368565fb792405acc6a86524a444c.html 510368565fb792405acc6a86524a444c.js   index.html

LazyPromise.prototype.then = function (onSuccess, onError) {
  return this.promise || (this.promise = new Promise(this.executor).then(onSuccess, onError));
};

LazyPromise.prototype.catch = function (onError) {
  return this.promise || (this.promise = new Promise(this.executor).catch(onError));
};
},{"./bundle-url":10}],0:[function(require,module,exports) {
var b=require(8);b.load([["6b4a33c18b69460d577328b29c800143.html",6],4]);
},{}]},{},[0])

Just in the little snippet here you can see both points (file name VS dep name, raw URL VS bundle-loader) I mentioned earlier.

pierredavidbelanger · 2018-03-18T01:09:02Z

I am sorry, it may seems spaghetti at first, but I tried to keep the concern separated, in case you accept one PR ant not the other.

I submit two PRs, for both the points I mentioned in a previous comment.

I suggest you try my simple app that demonstrate the problem, then pull #1016 and #1017 into your local parcel, and try again my simple app; the problem is gone.

I think that #1016 and #1017 are better fixes than this PR for the problem of require('./other.html');

adrian7 · 2018-05-04T06:38:30Z

FYI when all you need is to import a html file inside a string (e.g. like a nav menu or a logo with link) -

//Import html as string
import templateString from './template.html';

//Parse string to dom node
let template       = document.createElement('template');
templateString     = templateString.trim(); // Never return a text node of whitespace as the result
template.innerHTML = templateString;

//Return DOM Node
console.log(template.content.firstChild);
return template.content.firstChild;

You can use the babel plugin: babel-plugin-transform-html-import-to-string

bricss · 2018-05-15T18:17:28Z

FIY -> It's impossible to use Parcel almost in any project without this feature.

BrOrlandi · 2018-05-17T04:11:51Z

@adrian7 That's the perfect solution. I think that would be nice to have it by default in Parcel bundler.
@bricss It's not true, I'm using Parcel in projects without needing to import HTML files.
I wanted to import HTML files to be able to develop my own Router, it would be a nice use case.

I have implemented a sample project with @adrian7 solution:
https://github.com/BrOrlandi/ParcelImportHTML

mjgerace · 2018-05-21T19:04:33Z

I think this is a pretty crucial feature to merge in. Voicing support for this feature.

jluisgarcia · 2018-05-21T21:09:31Z

yes, import/include (whatever you want to call it). It would be Awesome
html includes typically to share navigation across multiple pages.
Edit in one place and parcel would take care to include across all pages
i.e. <include src="./nav.html"></include> (inside index.html)

bricss · 2018-05-21T21:32:53Z

Simple question to ask about this PR. What if I don't want to put HTML, CSS and JS in one file, e.i. JSX? How to build projects then? Therefore, Parcel is mainly useful for a projects using React and similar libraries.

Elazul · 2018-05-30T22:27:36Z

@adrian7 I owe you a big thanks. Your solution is perfect for importing AngularJS 1.6 component templates.

stevengill · 2018-06-04T18:16:37Z

Thanks @adrian7! The babel plugin worked at getting a string representation of the html.

One issue it doesn't handle is resolving the dependencies/assets in the html file. For instance, if i have <img src="./imgPath.png" />, ./imgPath.png isn't copied into dist.

stevengill · 2018-06-14T02:03:56Z

I've posted an updated PR based on this work over at #1528.

jpenna · 2018-07-22T14:50:48Z

It would be nice to have the solution @adrian7 suggested (babel-plugin-transform-html-import-to-string) in the docs. I've been struggling with this for a long time already and this not just fixed my problem but also simplified a lot the code, without the readFileSync (which only runs in the entry JS, for what I observed) and it's "results".

If you think it is valid to have it there I can do the PR.

devongovett · 2018-07-22T16:09:49Z

@jpenna this issue has been solved, and the html bundle loader will be available in the next release.

soncodi · 2018-07-22T18:25:54Z

@devongovett Attribute lowercasing in included HTML files appears to break Angular templates:

<div *ngFor="let t of xyz$ | async">
is returned as:
<div *ngfor="let t of xyz$ | async">

JudeOsborn · 2021-01-20T06:36:15Z

Is this supposed to be working? When I do this:

import someFile from './somefile.html

I get this:

Uncaught SyntaxError: Unexpected token '<'

I suppose that's what I would expect with a typical import because I'm importing an HTML file and it's expecting a module, but this ticket gives me the impression it should work with parcel. Am I misunderstanding?

fixes the HTMLPackager and also adds the code to be able to `require(…

dedb0ee

…'./other.html')`

bundleLoader asset was never process(), also, the new raw-loader feel…

ee2236c

…s more like a text-loader

pierredavidbelanger mentioned this pull request Mar 2, 2018

AngularJS Routing + Parcel = Error #848

Closed

davidnagli added the 📝 WIP Work In Progress label Mar 3, 2018

davidnagli removed the 📝 WIP Work In Progress label Mar 7, 2018

davidnagli reviewed Mar 7, 2018

View reviewed changes

davidnagli approved these changes Mar 8, 2018

View reviewed changes

davidnagli suggested changes Mar 16, 2018

View reviewed changes

This was referenced Mar 18, 2018

Use the same naming strategy as the raw packager #1016

Closed

Export path to a js dep when it has no loader associated #1017

Closed

teabyii mentioned this pull request Mar 30, 2018

Importing html files does not work #1082

Closed

stevengill mentioned this pull request Jun 12, 2018

added html importing from js file #1528

Closed

devongovett mentioned this pull request Jul 15, 2018

HTML bundle loader #1732

Merged

devongovett closed this in #1732 Jul 16, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Import/require html from js #926

Import/require html from js #926

pierredavidbelanger commented Mar 1, 2018 •

edited by davidnagli

Loading

codecov-io commented Mar 1, 2018 •

edited

Loading

pierredavidbelanger commented Mar 1, 2018

davidnagli commented Mar 3, 2018

pierredavidbelanger commented Mar 3, 2018

BrOrlandi commented Mar 3, 2018

lbguilherme commented Mar 3, 2018

arabsight commented Mar 4, 2018

davidnagli left a comment

davidnagli Mar 7, 2018

pierredavidbelanger Mar 8, 2018

pierredavidbelanger Mar 8, 2018

davidnagli Mar 8, 2018

davidnagli Mar 8, 2018

ghost commented Mar 9, 2018 •

edited by ghost

Loading

davidnagli commented Mar 16, 2018

davidnagli left a comment

pierredavidbelanger commented Mar 16, 2018

pierredavidbelanger commented Mar 16, 2018

pierredavidbelanger commented Mar 16, 2018

pierredavidbelanger commented Mar 18, 2018

adrian7 commented May 4, 2018

bricss commented May 15, 2018

BrOrlandi commented May 17, 2018

mjgerace commented May 21, 2018

jluisgarcia commented May 21, 2018 •

edited

Loading

bricss commented May 21, 2018

Elazul commented May 30, 2018

stevengill commented Jun 4, 2018

stevengill commented Jun 14, 2018

jpenna commented Jul 22, 2018 •

edited

Loading

devongovett commented Jul 22, 2018

soncodi commented Jul 22, 2018

JudeOsborn commented Jan 20, 2021

Import/require html from js #926

Import/require html from js #926

Conversation

pierredavidbelanger commented Mar 1, 2018 • edited by davidnagli Loading

codecov-io commented Mar 1, 2018 • edited Loading

Codecov Report

pierredavidbelanger commented Mar 1, 2018

davidnagli commented Mar 3, 2018

pierredavidbelanger commented Mar 3, 2018

BrOrlandi commented Mar 3, 2018

lbguilherme commented Mar 3, 2018

arabsight commented Mar 4, 2018

davidnagli left a comment

Choose a reason for hiding this comment

davidnagli Mar 7, 2018

Choose a reason for hiding this comment

pierredavidbelanger Mar 8, 2018

Choose a reason for hiding this comment

pierredavidbelanger Mar 8, 2018

Choose a reason for hiding this comment

davidnagli Mar 8, 2018

Choose a reason for hiding this comment

davidnagli Mar 8, 2018

Choose a reason for hiding this comment

ghost commented Mar 9, 2018 • edited by ghost Loading

davidnagli commented Mar 16, 2018

davidnagli left a comment

Choose a reason for hiding this comment

pierredavidbelanger commented Mar 16, 2018

pierredavidbelanger commented Mar 16, 2018

pierredavidbelanger commented Mar 16, 2018

pierredavidbelanger commented Mar 18, 2018

adrian7 commented May 4, 2018

bricss commented May 15, 2018

BrOrlandi commented May 17, 2018

mjgerace commented May 21, 2018

jluisgarcia commented May 21, 2018 • edited Loading

bricss commented May 21, 2018

Elazul commented May 30, 2018

stevengill commented Jun 4, 2018

stevengill commented Jun 14, 2018

jpenna commented Jul 22, 2018 • edited Loading

devongovett commented Jul 22, 2018

soncodi commented Jul 22, 2018

JudeOsborn commented Jan 20, 2021

pierredavidbelanger commented Mar 1, 2018 •

edited by davidnagli

Loading

codecov-io commented Mar 1, 2018 •

edited

Loading

ghost commented Mar 9, 2018 •

edited by ghost

Loading

jluisgarcia commented May 21, 2018 •

edited

Loading

jpenna commented Jul 22, 2018 •

edited

Loading