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

template literals support within JSX #101

@saunders99999

Description

@saunders99999

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`} />
  );
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions