ryansolid / dom-expressions

A Fine-Grained Runtime for Performant DOM Rendering
MIT License
863 stars 125 forks source link

Bundle gets es6 syntax #216

Closed aimuzov closed 1 year ago

aimuzov commented 1 year ago

Hi, I've encountered a problem. My code should be in es5 standard, but the bundle gets code with es6. I started looking into why this is happening and found a line of code that adds the 'const' declaration to the bundle.

If I change it here from const to var, the problem goes away:

- path.node.body.unshift(t.variableDeclaration("const", declarators));
+ path.node.body.unshift(t.variableDeclaration("var", declarators));

(link to reference)

Example of code from bundle (before fix):

const _tmpl$ = /*#__PURE__*/template(`<div><div></div><div></div></div>`, 6);

var ConfigOptionsPreview = function ConfigOptionsPreview(props) {
  // some code (es5)
};

Example of code from bundle (after fix):

var _tmpl$ = /*#__PURE__*/template(`<div><div></div><div></div></div>`, 6);
// ^ the fix replace 'const' by 'var'

var ConfigOptionsPreview = function ConfigOptionsPreview(props) {
  // some code (es5)
};

I think this is the wrong solution to the problem, but I haven't found any other way to downgrade the standard from es6 to es5. I started researching how other babel plugins are written and noticed that they specify var instead of const/let (for example: 1, 2, etc...).

How to solve this problem? I can create repo for reproduce problem if needed.

babel config:

module.exports = {
    // ...
    presets: [
        "solid",
        [
            "@babel/preset-env",
            {
                exclude: [
                    "transform-async-to-generator",
                    "transform-regenerator",
                ],
            },
        ],
    ],
  // ...
}

P.S: Sorry for my bad English, it's not my native language.

trusktr commented 1 year ago

I think you need to set preset-env's targets option to the older targets you support.

aimuzov commented 1 year ago

It's already setupped.

LinsRock commented 8 months ago

It's already setupped.

Hi, Have you solved it yet? I had the same problem, my targets were set low enough (chrome >= 40), but the jsx template product I built still contained const

// ...
function template(html, isCE, isSVG) {
  var node;
  var create = function create() {
    var t = document.createElement("template");
    t.innerHTML = html;
    return isSVG ? t.content.firstChild.firstChild : t.content.firstChild;
  };
  var fn = isCE ? function () {
    return untrack(function () {
      return document.importNode(node || (node = create()), true);
    });
  } : function () {
    return (node || (node = create())).cloneNode(true);
  };
  fn.cloneNode = fn;
  return fn;
}

const _tmpl$ = /*#__PURE__*/template(`<div b=2 a>`);
// ^ this