search

beautifier / js-beautify

Beautifier for javascript
https://beautifier.io
MIT License
8.59k stars 1.38k forks source link

Beautification problem with JS Single Line Comment <!-- #1835

Open Nowasky opened 4 years ago

Nowasky commented 4 years ago

In Javascript <!-- is treated as a single-line comment just like //.

js-beautify works as expected when the line starts with <!--:

Input: <!--alert(1)commented

Output: <!--alert(1)commented

Otherwise it will break the syntax:

Input: alert(1)<!--commented

Output: alert(1) < !--commented

bitwiseman commented 4 years ago

In pure javascript, I don't think <!-- is a comment. https://www.ecma-international.org/ecma-262/11.0/index.html#sec-comments

If that Javascript is inside a <script> tag in an html file, then <!-- should be treated as a comment. Beautifier currently supports these as the first element, but not after.

This was due to limitations in the beautifier at one time. At this time, it might be reasonable to remove the limitation.

https://github.com/beautify-web/js-beautify/blob/5c00e1d7ec2be058c1c652958bca24e38a1699af/js/src/javascript/tokenizer.js#L285-L300

This is has potential to break some cases so tests will need to be added.

Nowasky commented 4 years ago

Please refer to annex B1.3 of the ES6 espec. https://www.ecma-international.org/ecma-262/11.0/index.html#prod-annexB-SingleLineHTMLOpenComment

B.1.3 HTML-like Comments

Comment:: MultiLineComment SingleLineComment SingleLineHTMLOpenComment SingleLineHTMLCloseComment SingleLineDelimitedComment

SingleLineHTMLOpenComment:: <!--SingleLineCommentCharsopt

Although it's a legacy support as noted:

This annex describes various legacy features and other characteristics of web browser based ECMAScript implementations. All of the language features and behaviours specified in this annex have one or more undesirable characteristics and in the absence of legacy usage would be removed from this specification. However, the usage of these features by large numbers of existing web pages means that web browsers must continue to support them. The specifications in this annex define the requirements for interoperable implementations of these legacy features.

These features are not considered part of the core ECMAScript language. Programmers should not use or assume the existence of these features and behaviours when writing new ECMAScript code. ECMAScript implementations are discouraged from implementing these features unless the implementation is part of a web browser or is required to run the same legacy ECMAScript code that web browsers encounter.

bitwiseman commented 3 years ago

Just to be clear, I have no objection to someone filing a PR to fix this.

carlosmarin96 commented 3 years ago

Hi I'm new to contributing a open source projects. Could I take this issue?

bitwiseman commented 3 years ago

Go for it.

carlosmarin96 commented 3 years ago

Could you give a example to replicate the ideal behavior? because I'm trying to comment a js code in scripttag using <!--, but it doesn't work and I did some research I found that it just work in old browsers. Thanks for your time

image

bitwiseman commented 3 years ago

Switch to JavaScript beautification an try the example from the original description.

alert(1)<!--commented

bharathks005 commented 2 years ago

Hi Team, I'm new to contributing a open source projects. I'm unable to run the project in my local computer[windows OS]. it's throws error [make × ERR not found: make-$(BUILD_DIR)/node] could you tell me how to resolve the issue. link [https://user-images.githubusercontent.com/36472845/144790219-e9e8d060-8dd0-49a1-8fd8-8d662199126b.png]