Weird spaces in JSX html tags #1018

day0ops · 2016-06-14T00:42:05Z

Description

I have the default options for JSX and my .jsbeautifyrc is as follows,

{
    "indent_size": 4,
    "indent_char": " ",
    "other": " ",
    "indent_level": 0,
    "indent_with_tabs": false,
    "preserve_newlines": true,
    "max_preserve_newlines": 2,
    "jslint_happy": false,
    "indent_handlebars": true,
}

But in the following JSX code you can see weird spaces in tags e.t.c

ReactDOM.render( < div > This is rendered by React < App translator = {
        translator
    }
    /></div > ,
    document.getElementById('react-container')
);

Expected Results

The beautified code should have looked like:

ReactDOM.render(
    <div>This is rendered by React <App translator = {translator} /></div>,
    document.getElementById('react-container')
);

Steps to Reproduce

Add code to Atom editor
Run command Atom Beautify: Beautify Editor
This beautified code does not look right!

Debug

Here is a link to the debug.md Gist: https://gist.github.com/nixgadget/3f50059d0710498ed5f15e8235b46ca5

Checklist

I have tried uninstalling and reinstalling Atom Beautify to ensure it installed properly
I have reloaded (or restarted) Atom to ensure it is not a caching issue
Searched for existing Atom Beautify Issues at /~https://github.com/Glavin001/atom-beautify/issues
so I know this is not a duplicate issue
Generated debugging information and added link for debug.md Gist to this issue

The text was updated successfully, but these errors were encountered:

prettydiff · 2016-06-14T00:54:43Z

@bitwiseman added

prettydiff · 2016-06-14T00:56:40Z

I am not sure this issue is valid. If the original source sample contained tags with spaces separating the delimiters from the tag names then the tags are invalid, ex: < div >.

day0ops · 2016-06-14T00:59:13Z

The problem is original code did not have spaces. But as soon as beautification is run it turns into that. What I would've expected is shown under the Expected Results.

day0ops · 2016-06-14T01:00:58Z

AFAIK out of the box atom-beautify uses prettydiff for this. Does that mean I need to define a .prettydiffrc ?

day0ops · 2016-06-14T01:23:56Z

If i run prettydiff and js-beautify you can see the difference between the two. It appears prettydiff is never called for jsx files.

~/Projects/Docker_Packages/agent_management_app/Core]node_modules/.bin/prettydiff source:client/javascripts/client.js mode:"beautify"
/* @flow */

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

import UIKit from '../../lib/uikit/js/uikit';

import App from './components/app.jsx';

import translationService from './translationservice';

const translator = translationService.createTranslator(CLIENT_CONTEXT);

ReactDOM.render(
    <div>This is rendered by React
    <App translator={translator}/></div>, document.getElementById('react-container'));

~/Projects/Docker_Packages/agent_management_app/Core]node_modules/.bin/js-beautify -f client/javascripts/client.js
/* @flow */

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

import UIKit from '../../lib/uikit/js/uikit';

import App from './components/app.jsx';

import translationService from './translationservice';

const translator = translationService.createTranslator(CLIENT_CONTEXT);

ReactDOM.render( < div > This is rendered by React < App translator = {
        translator
    }
    /></div > ,
    document.getElementById('react-container')
);

prettydiff · 2016-06-14T15:08:16Z

No, Atom-Beautify does not use a .prettydiffrc file. Atom-Beautify uses the .jsbeautifyrc file for a bunch of beautifiers including Pretty Diff. I need to look into why you cannot choose Pretty Diff as a beautifier for JSX.

prettydiff · 2016-06-14T15:17:38Z

I don't see JSX in the grammar selection list. Beautification works correctly in Pretty Diff if you change the language selection to JavaScript. The code is probably saved with a .jsx extension, and that is likely where the JSX grammar is selected from. I will have to look some more to see why Pretty Diff is not used from there, because Pretty Diff is in the settings as a beautifier for JSX each for the JS and the HTML.

day0ops · 2016-06-14T20:48:28Z

Yes it is selected as the one and only beautifier for JSX. I think you can see that from the debug info as well.

prettydiff · 2016-06-14T22:16:25Z

@Glavin001 Any idea about #1018 (comment)

Things I have discovered in this thread:

There is no grammar for JSX in the grammar Select Grammar list in the edit menu.
According to the debug.md JS Beautify, JSCS Fixer, and Pretty Diff are all beautifiers because the sample code is beautified as grammar JavaScript. Pretty Diff is reported as the only beautifier for grammar JSX and the code is being beautified with JS Beautify.

There is probably something here that I am not following correctly.

ttsirkia · 2016-06-17T09:52:49Z

After installing Atom package react or some other JSX package, JSX is available.

*Original File Grammar**: JavaScript (JSX)
**Original File Language**: JSX
**Language namespace**: jsx
**Supported Beautifiers**: Pretty Diff
**Selected Beautifier**: Pretty Diff

ttsirkia · 2016-06-17T09:53:57Z

I cannot reproduce this and I remember that I had similar problems before installing JSX support.

day0ops · 2016-06-18T05:33:31Z

May be thats the trick .. il give it ago. Yes im using atom as well

On Fri, 17 Jun 2016, 21:53 Teemu Sirkiä notifications@github.com wrote:

I cannot reproduce this and I remember that I had similar problems before
installing JSX support.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#1018 (comment),
or mute the thread
/~https://github.com/notifications/unsubscribe/AChqMNY0KI4v0W8I9NmD-sYRnJC2TeWVks5qMm63gaJpZM4I03S1
.

ttsirkia · 2016-07-28T12:15:19Z

@nixgadget did you manage to solve this?

day0ops · 2016-08-09T01:55:49Z

@ttsirkia I cant seem to reproduce this issue anymore. I think we are ok to close it.

prettydiff · 2016-08-09T02:19:52Z

Awesome! Thanks guys.

sangdth · 2016-08-13T16:37:25Z

I have the same issue with @nixgadget. If I install React package, Atom said I can not use both React and language-babel due to some conflicts. Please suggest a way to solve.

achimbode · 2016-08-29T12:30:55Z

Me too. And it is really annoying, because it also inserts whitespaces between tags - leading to lots of "validateDOMNesting(...): #text cannot appear as a child of " (or tbody, etc.) warnings...

achimbode · 2016-08-29T16:22:45Z

Hi all,

thanks for reopening this. To make it easier to track this down (or point me to a simple config solution) I'll provide some additional information:

Problem: Both beautyfiers (i.e. JS Beautify and Pretty Diff) insert whitespaces inside the tags as well as between tags - at least the second of which is obviously not tolerated by react.

I have difficulties to believe that I am only the third one (after @nixgadget and @sangdth) who encounters this problem...

Installed Community Packages:

atom-beautify
autoclose-html
react

atom-beautify offers the following default beautifiers in
Atom > Preferences > Packages > atom-beautify > JavaScript > Default Beautifier

JS Beautify (Warnings in Firebug)
JSCS Fixer (some package not available)
Pretty Diff (Warnings in Firebug)

Original Code from Tutorial

To make sure it was not my own code that caused the problem I used the following code (fragment shown below):

https://facebook.github.io/react/docs/thinking-in-react.html

var ProductTable = React.createClass({
  render: function() {
    var rows = [];
    var lastCategory = null;
    this.props.products.forEach(function(product) {
      if (product.category !== lastCategory) {
        rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
      }
      rows.push(<ProductRow product={product} key={product.name} />);
      lastCategory = product.category;
    });
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>{rows}</tbody>
      </table>
    );
  }
});

Result using Pretty Diff as Default Beautifier

var ProductTable = React.createClass({
    render: function() {
        var rows = [];
        var lastCategory = null;
        this.props.products.forEach(function(product) {
            if (product.category !== lastCategory) {
                rows.push(< ProductCategoryRow category = {
                    product.category
                }
                key = {
                    product.category
                } />);
            }
            rows.push(< ProductRow product = {
                product
            }
            key = {
                product.name
            } />);
            lastCategory = product.category;
        });
        return (< table > < thead > < tr > < th > Name < /th> <
                            th > Price < /th > < /tr> <
                            /thead > < tbody > {
            rows
        } < /tbody> <
                            /table >);
    }
});

Result using JSBeautify as Default Beautifier

var ProductTable = React.createClass({
            render: function() {
                var rows = [];
                var lastCategory = null;
                this.props.products.forEach(function(product) {
                        if (product.category !== lastCategory) {
                            rows.push( < ProductCategoryRow category = {
                                    product.category
                                }
                                key = {
                                    product.category
                                }
                                />);
                            }
                            rows.push( < ProductRow product = {
                                    product
                                }
                                key = {
                                    product.name
                                }
                                />);
                                lastCategory = product.category;
                            });
                        return ( <
                            table >
                            <
                            thead >
                            <
                            tr >
                            <
                            th > Name < /th> <
                            th > Price < /th> <
                            /tr> <
                            /thead> <
                            tbody > {
                                rows
                            } < /tbody> <
                            /table>
                        );
                    }
                });

Warnings in Firebug:

Warning: validateDOMNesting(...): #text cannot appear as a child of <table>. See FilterableComponentTable > ComponentTable > table > #text.

... and the same with tbody, etc.

See facebook/react#5071 and facebook/react#7515 where spicyj added a line comment 12 days ago:

Whitespace between tags on a single line matters, and I believe that's the most common cause of extra whitespace.

So one of the beautifiers (JSBeautify) produces code like a broken pile of Mikado pick-up sticks, while Pretty Diff does exactly of what spicyj says it is not allowed: insert whitespace between tags on a single line...

PS: @sangdth: I also tried language-babel package (with react package disabled!) and stumbled upon similar problems - even with the most basic tutorial code. Am I missing sth important?

bitwiseman · 2016-08-29T18:14:44Z

@achimbode
When I put your code into http://jsbeautifier.org/ (with Support e4x/jsx syntax checked), I get well-formatted output.
When I uncheck Support e4x/jsx syntax, I get the broken output you showed above.

Have you set enabled e4x/jsx support in JSBeautify in atom-beautify?

ttsirkia · 2016-08-30T11:23:53Z

I'm still unable to reproduce this problem. Here is my debug gist:
https://gist.github.com/anonymous/2603a6bbe2ef96f1d42cd099e3effb09

ttsirkia · 2016-08-30T11:31:20Z

Make sure that correct language is set to the editor before using atom-beautify (Ctrl+Shift+L -> JavaScript (JSX))

achimbode · 2016-08-30T12:16:02Z

Hi all,
I am not really sure what it was, but it works now.
Thank you so much for your help!

@ttsirkia Ctrl+Shift+L only had Babel ES6 JavaScript on offer, which was apparently selected by the Auto Detect mode.

I tried to find what actually caused the problems in the beginning, but I am not sure after all these changes. After some fiddling I found that I probably had set the file extension to *.js instead of *.jsx - at least this is the only way of reproducing the damaged formatting.
Sorry for bothering you and thanks again,
Achim

prettydiff · 2016-08-30T12:34:59Z

The problem is most likely related to setting the language to Babel ES6 JavaScript opposed to JSX.

gandm · 2016-09-10T14:09:31Z

@prettydiff I did a pull request #1068 that adds my language-babel grammar Babel ES6 JavaScript to the list of supported grammars but decided to remove the PR as my package also supports es2015, es2016, ESNext, JSX and Flow. I'm not sure if any beautifiers support this range of syntax. I could add the PR back if anyone is interested.

Glavin001 · 2016-09-10T14:40:58Z

@prettydiff's beautifier and JS-Beautify likely support most, if not all of those already. The only thing missing would be mapping the language grammars for Atom to the appropriate language in Atom-Beautify. I'd recommend adding es2015, es2016, ESNext grammars to JavaScript language file in Atom-Beautify and JSX grammar to JSX language, if it is missing. However, I'm not sure about Flow. @prettydiff thoughts on supporting Flow?

prettydiff · 2016-09-11T11:42:31Z

Is there an official link for flow? When I search for this I only see a static data type checker.

gandm · 2016-09-11T12:08:01Z

@prettydiff Yes flow is Facebook's open sourced it static type checker that adds new syntax to JavaScript in a way that is similar to Typescript. You presumably found the doc, but the syntax definitions start here.

prettydiff · 2016-09-12T03:53:48Z

@gandm I will be supporting Flow in the next release of Pretty Diff (2.1.10). It is similar to TypeScript, which Pretty Diff recently opened support for.

gandm · 2016-09-12T08:23:41Z

@prettydiff Sounds good. One thing, flow files, unlike Typescript, do not use specific file extension, and will typically use .jsx, .js and .flow. I'm not sure if this makes a difference to how I need to define my grammar.

Glavin001 · 2017-01-01T04:30:53Z

Closing this as a Pretty Diff bug.

prettydiff added the third-party-bug label Jun 14, 2016

prettydiff self-assigned this Jul 28, 2016

prettydiff closed this as completed Aug 9, 2016

prettydiff reopened this Aug 29, 2016

gandm mentioned this issue Sep 10, 2016

Add JavaScript and JSX language support for language-babel grammar. #1186

Merged

4 tasks

prettydiff mentioned this issue Sep 12, 2016

Flow JS prettydiff/prettydiff#362

Closed

Glavin001 closed this as completed Jan 1, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Weird spaces in JSX html tags #1018

Weird spaces in JSX html tags #1018

day0ops commented Jun 14, 2016 •

edited

Loading

prettydiff commented Jun 14, 2016

prettydiff commented Jun 14, 2016

day0ops commented Jun 14, 2016

day0ops commented Jun 14, 2016

day0ops commented Jun 14, 2016

prettydiff commented Jun 14, 2016

prettydiff commented Jun 14, 2016

day0ops commented Jun 14, 2016

prettydiff commented Jun 14, 2016

ttsirkia commented Jun 17, 2016

ttsirkia commented Jun 17, 2016

day0ops commented Jun 18, 2016

ttsirkia commented Jul 28, 2016

day0ops commented Aug 9, 2016

prettydiff commented Aug 9, 2016

sangdth commented Aug 13, 2016

achimbode commented Aug 29, 2016

achimbode commented Aug 29, 2016 •

edited

Loading

bitwiseman commented Aug 29, 2016

ttsirkia commented Aug 30, 2016

ttsirkia commented Aug 30, 2016

achimbode commented Aug 30, 2016 •

edited

Loading

prettydiff commented Aug 30, 2016

gandm commented Sep 10, 2016

Glavin001 commented Sep 10, 2016 •

edited

Loading

prettydiff commented Sep 11, 2016

gandm commented Sep 11, 2016

prettydiff commented Sep 12, 2016

gandm commented Sep 12, 2016

Glavin001 commented Jan 1, 2017

Weird spaces in JSX html tags #1018

Weird spaces in JSX html tags #1018

Comments

day0ops commented Jun 14, 2016 • edited Loading

Description

Expected Results

Steps to Reproduce

Debug

Checklist

prettydiff commented Jun 14, 2016

prettydiff commented Jun 14, 2016

day0ops commented Jun 14, 2016

day0ops commented Jun 14, 2016

day0ops commented Jun 14, 2016

prettydiff commented Jun 14, 2016

prettydiff commented Jun 14, 2016

day0ops commented Jun 14, 2016

prettydiff commented Jun 14, 2016

ttsirkia commented Jun 17, 2016

ttsirkia commented Jun 17, 2016

day0ops commented Jun 18, 2016

ttsirkia commented Jul 28, 2016

day0ops commented Aug 9, 2016

prettydiff commented Aug 9, 2016

sangdth commented Aug 13, 2016

achimbode commented Aug 29, 2016

achimbode commented Aug 29, 2016 • edited Loading

bitwiseman commented Aug 29, 2016

ttsirkia commented Aug 30, 2016

ttsirkia commented Aug 30, 2016

achimbode commented Aug 30, 2016 • edited Loading

prettydiff commented Aug 30, 2016

gandm commented Sep 10, 2016

Glavin001 commented Sep 10, 2016 • edited Loading

prettydiff commented Sep 11, 2016

gandm commented Sep 11, 2016

prettydiff commented Sep 12, 2016

gandm commented Sep 12, 2016

Glavin001 commented Jan 1, 2017

day0ops commented Jun 14, 2016 •

edited

Loading

achimbode commented Aug 29, 2016 •

edited

Loading

achimbode commented Aug 30, 2016 •

edited

Loading

Glavin001 commented Sep 10, 2016 •

edited

Loading