Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ReactJS: ascii art issue after JSX transformation

See original GitHub issue

I’m trying to get an ascii art to be properly rendered by my React application.

After jsx-transformer is executed my art looses the format and renders pretty strange in the browser. It seems to be related to not identifying line breaks properly.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">

    var App = React.createClass({
      render: function() {
        return (
          <pre>
            <code>
              +--------+   +-------+    +-------+
              |        |   + ditaa +    |       |
              |  Text  |   +-------+    |diagram|
              |Document|   |!magic!|    |       |
              |        |   |       |    |       |
              +---+----+   +-------+    +-------+
            </code>
          </pre>
        );
      }
    });

    var element = document.getElementById('content');
    React.render(React.createElement(App), element);
  </script>
</body>
</html>

This is just an example, and the real context is in a website generator that starts with markdown -> html -> jsx. That said, I cannot change the React.createClass element.

Someone proposed this:

var App = React.createClass({
  render: function() {
    var ascii = [
      "+--------+   +-------+    +-------+",
      "|        |   + ditaa +    |       |",
      "|  Text  |   +-------+    |diagram|",
      "|Document|   |!magic!|    |       |",
      "|        |   |       |    |       |",
      "+---+----+   +-------+    +-------+",
    ].join('\n');

    return (
      <pre>
        <code>
          {ascii}
        </code>
      </pre>
    );
  }
});

It fixes the problem, but I cannot edit the markdown elements to reflect this. I’m more interested to know why JSX transformation is not identifying to line breaks inside code blocks.

Alan

Issue Analytics

State:
Created 8 years ago
Comments:13 (8 by maintainers)

Top GitHub Comments

2reactions

sophiebitscommented, Aug 24, 2015

JSX collapses whitespace which is almost always what you want but is obviously inconvenient in this case (sorry). If you’re using an ES6 compiler like Babel (just swap out JSXTransformer.js for https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.min.js and use text/babel instead of text/jsx) then you can use an ES6 template string

<code>{`
  +--------+   +-------+    +-------+
  |        |   + ditaa +    |       |
  |  Text  |   +-------+    |diagram|
  |Document|   |!magic!|    |       |
  |        |   |       |    |       |
  +---+----+   +-------+    +-------+
`}</code>

which may be more palatable.

1reaction

alansouzaticommented, Aug 24, 2015

Actually it turns out that adding only {...} fixes the problem, I did not have to switch to Babel. Any idea why it works?

This is the final version that works using jsx-transformer.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">

    var App = React.createClass({
      render: function() {
        return (
          <pre>
            <code>{`
              +--------+   +-------+    +-------+
              |        |   + ditaa +    |       |
              |  Text  |   +-------+    |diagram|
              |Document|   |!magic!|    |       |
              |        |   |       |    |       |
              +---+----+   +-------+    +-------+
            `}</code>
          </pre>
        );
      }
    });

    var element = document.getElementById('content');
    React.render(React.createElement(App), element);
  </script>
</body>
</html>

Top Results From Across the Web

ReactJS: ascii art issue after JSX transformation - Stack Overflow

So I ended up creating an issue in Github and Ben recommended to switch to Babel. Here is the updated code that works...

ascii art issue after JSX transformation-Reactjs

UPDATE: It works because of template literals. Their recommendation is to use babel regardless because JSXTransformer has been deprecated. Alan Souza 7105.

ReactJS: ascii art issue after JSX transformation : codehunter

Focus on AutoComplete in JQuery Not working ? Visual Studio 2015 - Fixing "Dependencies npm not installed" from fsevents with node on Windows...

Build an Image-to-ASCII Art App in React - Filestack Blog

Learn how to convert images to ASCII art in your React app with Filestack's 'picture to ASCII' image transformation. Step by step tutorial....

react-art | Yarn - Package Manager

React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library.