Skip to content
This repository has been archived by the owner on Apr 29, 2021. It is now read-only.

template literals support within JSX #101

Open
saunders99999 opened this issue Nov 22, 2019 · 0 comments
Open

template literals support within JSX #101

saunders99999 opened this issue Nov 22, 2019 · 0 comments

Comments

@saunders99999
Copy link

saunders99999 commented Nov 22, 2019

Are template literals inside of JSX supported?

Most of the time, template literals are transpiled to ES5 as expected. When there are multiple template literal-JSX snippets in a method, it does not always transpile the template literals.

I've added this sample
https://github.com/saunders99999/babel-inc-dom-sample/blob/master/README.md

https://github.com/saunders99999/babel-inc-dom-sample/blob/master/.babelrc
babel configuration with
transform-incremental-dom and
@babel/plugin-transform-template-literals

code samples
https://github.com/saunders99999/babel-inc-dom-sample/blob/master/src/index.jsx

export function renderDoesNotWork(el) {
  const elemBody = <span class="fred" />;
  return (
      // transpile bad --> (0, _incrementalDom.elementOpen)("div", null, null, "id", `${el.id}-track`);
      <div id={ `${ el.id }-track` }>
          { elemBody }
      </div>
  );
}

export function renderWorks(el) {
  const elemBody = <span class="fred" />;

  // transpile good --> var elid = "".concat(el.id, "-track");
  const elid = `${ el.id }-track`;
  return (
      <div id={ elid }>
          { elemBody }
      </div>
  );
}

export function optionalReturnDoesNotWork(colIndex,idprefix) {
  if (colIndex === 0) {
      return (
          // transpile good -> return (0, _incrementalDom.elementVoid)("th", null, null, "id", "".concat(idprefix, "-fred1"));
          <th id={ `${ idprefix }-fred1`} />
      );
  }
  return (
      // transpile bad --> return (0, _incrementalDom.elementVoid)("th", null, null, "id", `${idprefix}-fred2`);
      <th id={ `${ idprefix }-fred2`} />
  );
}
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant