IE11 not compatible as not quoting html attributes value

pmnc-philippe commented 4 years ago

Marko Version: x.x.x

4.21.9

Details

I am using marko/express to generate html pages for a well known ecommerce site and it works great with chrome and firefox. Unfortunately it does not work at all with IE11 for a very syrprising reason:

<!DOCTYPE html>
<html lang="fr">

..... compiles into :

function render(input, out, __component, component, state) {
  var data = input;

  out.w("<!DOCTYPE html><html lang=fr>");

..... and result into the following output: <!DOCTYPE html><html lang=fr>

which is not recognized by IE11 as regular html because it misses quotes

Expected Behavior

<!DOCTYPE html><html lang="fr">

Actual Behavior

<!DOCTYPE html><html lang=fr>

Possible Fix

cloning the project and having a look to the sources, I figured out that a possible fix would be located in the following file: src/runtime/helpers/html/attr.js line 78 by replacing: return value && "=" + (value[len - 1] === "/" ? value + " " : value);

with: return value && "='" + (value[len - 1] === "/" ? value + " " : value) + '"';

Additional Info

node 12 react ubuntu 20.04 build a node app that serve an html page as described above verifiy with curl that it returns html attribute string value as unquoted use IE11 to load the page .... observe HTML1410 error in the console - Environment name and version (e.g. Chrome 39, node.js 5.4): - Operating System and version (desktop or mobile): - Link to your project: ### Steps to Reproduce ### Stack Trace

DylanPiercey commented 4 years ago

@pmnc-philippe the above is valid HTML. See the unquoted attribute spec. I also just double checked this on IE11 and see no issues.

Are you able to expand more on what the actual result you are seeing is? Or providing a reproducible example?

tigt commented 4 years ago

If this is on a well-known eCommerce site, I wonder if IE has a historical old document mode configured for it. Is the bug fixed by adding <meta http-equiv="x-ua-compatible" content="ie=edge"> right after the charset declaration?

tigt commented 4 years ago

Looking up the provided HTML1410 error code suggests that maybe IE isn’t having issue with the lang=fr attribute, but something else on the page:

HTML1410 "Invalid unquoted attribute value. Unquoted attribute values should not contain ("), ('), (<), (=), or (`)."

More context at kangax/html-minifier#757

DylanPiercey commented 4 years ago

@tigt it could be because we are intentionally not checking for <, = or ` (https://github.com/marko-js/marko/blob/master/packages/marko/src/runtime/html/helpers/attr.js#L67-L73).

The reason being was that more checks for more characters negatively impacted performance. I did go through and check that browsers properly parsed attributes with these characters though, including ie11.

@pmnc-philippe if you could share the exact code that is causing the warning I'd happily investigate further.

pmnc-philippe commented 4 years ago

I am impressed with your reactivity - thank you very much. I had so many of these errors that I first thought that absence of quotes in html attribute values was the source of errors. That was essentially due to my ignorance ;-) I tweaked node_modules/marko with the workaround I suggested and of course all these errors disappeared except one - some lib is badly transpiled : the actual error(s) ! IE11 error messages are messy. On the other hand I tried without js and not having quotes in html attribute values works fine. This is clearly not a bug. You can close the issue. Thanks again for all your answers and hints.

DylanPiercey commented 4 years ago

Thanks for getting back to us on this @pmnc-philippe!

marko-js / marko