Add support for ES Module #113

SaekiRaku · 2020-05-31T16:26:19Z

I've checked out the source code of acorn, so that decided to use the same bundler(rollup) to generate the ES Module version of acorn-jsx. And use index.mjs as the filename of the ES Module, just like acorn-jsx do.

However, I also noticed that acorn-jsx is zero-dependencies for now. I don't know if it's acceptable to include a new dependency. Actually, the easiest way to do that is RegExp + String replace, but without lexical analysis, it will bring new issues in the future.

At last, if someone wants to use acorn-jsx in Deno, you should configure an imports map like below:

{
    "imports": {
        "acorn": "https://cdn.jsdelivr.net/npm/[email protected]/dist/acorn.mjs"
    }
}

Because acorn-jsx has a property tokTypes that relies on acorn, in the ES Module of acorn-jsx it is imported by import "acorn";.

RReverser · 2020-05-31T21:41:57Z

Thanks for the PR, this is a great start!

However, I also noticed that acorn-jsx is zero-dependencies for now. I don't know if it's acceptable to include a new dependency.

These are devDependencies, and so perfectly fine since they will be installed only by maintainers.

I think what we might want here instead though is to make ES module the primary source, and auto-generate CommonJS instead.

This would make the code that maintainers actually work with use modern syntax, and CommonJS a production artifact for older versions of Node, which also makes it easier to deprecate it altogether in some far future when everyone migrates.

…JS module by rollup.

SaekiRaku · 2020-06-01T02:27:31Z

I've transformed all codes to ES6 import/export syntax, including the test. And use these to generate a CommonJS module.

But there is a problem with tokTypes, if use export { tokTypes } in the ES Module. Rollup will bundle up like below:

exports.default = acronJsx;
export.tokTypes = tokTypes;

That will change the require syntax for the CommonJS users. So, for now, I'm keeping the Object.defineProperty(acornJsx, "tokTypes", {...}) and commented export { tokTypes }.

RReverser · 2020-06-01T11:23:11Z

index.js

@@ -70,7 +71,7 @@ function getQualifiedJSXName(object) {
    getQualifiedJSXName(object.property);
 }

-module.exports = function(options) {
+var acornJsx = function(options) {


This can be a function declaration.

RReverser · 2020-06-01T11:25:11Z

test/run.js

@@ -18,7 +20,7 @@ function log(title, message) {
  if (typeof console === "object") console.log(title, message);
 }

-const acorn = require("acorn"), jsx = require("..")
+// const acorn = require("acorn"), jsx = require("..")


This looks like a leftover?

(same for few other comments)

RReverser · 2020-06-01T11:54:36Z

But there is a problem with tokTypes, if use export { tokTypes } in the ES Module. Rollup will bundle up like below:

Yeah that makes sense. Note that you couldn't use an export { tokTypes } because it's a getter anyway.

However, that property was added mainly for backwards compatibility and the right way to use it is now via the value returned from the factory function. I wonder if, together with this change, we could just get rid of it and make a major bump...

…claration.

SaekiRaku · 2020-06-02T03:01:32Z

Okey, all left over comments were removed, and acornJsx is changed to function declaration.

But I'm not very familiar with acorn, I just start to using it recently. 😅I'm not quite understanding how tokTypes works.

Alaboudi1 · 2020-06-25T15:31:12Z

Any update on this?

elevatebart · 2020-11-12T14:11:06Z

Thank you both for the hard work!!!
How can I help bring it closer to ready to merge?

elevatebart · 2020-11-12T14:12:38Z

index.cjs.js

@@ -0,0 +1,747 @@
+// DO NOT edit this file, it's auto generate from 'constructor/build.js', any changes will be overwrite. 


Should this file be in .gitignore since it is generated?

Yes, I have added it to .gitignore.

SaekiRaku · 2020-11-13T10:34:14Z

@elevatebart Emm, in this PR, I also changed the test scripts to use import Syntax. So they need esm as devDependencies to run the test scripts. But the travis-ci config didn't install all dependencies, therefore the ci checks have failed.

thescientist13 · 2024-01-31T13:31:30Z

Any updates available or anything anyone can do to help push this along?

thescientist13 · 2024-01-31T13:33:25Z

index.js

@@ -1,6 +1,7 @@
 'use strict';

-const XHTMLEntities = require('./xhtml');
+import * as acorn from "acorn";
+import XHTMLEntities from './xhtml';


I think this import would need to have an extension?

import XHTMLEntities from './xhtml.js';

thescientist13 · 2024-01-31T13:39:30Z

package.json

@@ -3,6 +3,8 @@
  "description": "Modern, fast React.js JSX parser",
  "homepage": "https://github.com/acornjs/acorn-jsx",
  "version": "5.3.1",
+  "main": "index.cjs.js",


also, I think we would want to add "type": "module" to package.json as well

Add support for ES Module

9da643a

Transoform all codes to ES6 import/export syntax, and generate Common…

9ff4c42

…JS module by rollup.

RReverser reviewed Jun 1, 2020

View reviewed changes

Removed all leftover comments, and change var acornJsx to function de…

b399342

…claration.

elevatebart reviewed Nov 12, 2020

View reviewed changes

guoqiqi added 2 commits November 13, 2020 12:30

fix conflict

d60fa99

add index.cjs.js to the .gitignore

12f4a5b

thescientist13 reviewed Jan 31, 2024

View reviewed changes

thescientist13 mentioned this pull request Feb 1, 2024

feature/issue 1197 Lit v3 upgrade and SSR fixes and enhancements ProjectEvergreen/greenwood#1201

Merged

16 tasks

thescientist13 mentioned this pull request Feb 10, 2024

adopt a bundle friendly and ESM compatible version of acorn-jsx ProjectEvergreen/wcc#142

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for ES Module #113

Add support for ES Module #113

SaekiRaku commented May 31, 2020

RReverser commented May 31, 2020

SaekiRaku commented Jun 1, 2020

RReverser Jun 1, 2020

RReverser Jun 1, 2020

RReverser Jun 1, 2020

RReverser commented Jun 1, 2020

SaekiRaku commented Jun 2, 2020 •

edited

Loading

Alaboudi1 commented Jun 25, 2020

elevatebart commented Nov 12, 2020

elevatebart Nov 12, 2020

SaekiRaku Nov 13, 2020 •

edited

Loading

SaekiRaku commented Nov 13, 2020

thescientist13 commented Jan 31, 2024

thescientist13 Jan 31, 2024 •

edited

Loading

thescientist13 Jan 31, 2024

		@@ -0,0 +1,747 @@
		// DO NOT edit this file, it's auto generate from 'constructor/build.js', any changes will be overwrite.

Add support for ES Module #113

Are you sure you want to change the base?

Add support for ES Module #113

Conversation

SaekiRaku commented May 31, 2020

RReverser commented May 31, 2020

SaekiRaku commented Jun 1, 2020

RReverser Jun 1, 2020

Choose a reason for hiding this comment

RReverser Jun 1, 2020

Choose a reason for hiding this comment

RReverser Jun 1, 2020

Choose a reason for hiding this comment

RReverser commented Jun 1, 2020

SaekiRaku commented Jun 2, 2020 • edited Loading

Alaboudi1 commented Jun 25, 2020

elevatebart commented Nov 12, 2020

elevatebart Nov 12, 2020

Choose a reason for hiding this comment

SaekiRaku Nov 13, 2020 • edited Loading

Choose a reason for hiding this comment

SaekiRaku commented Nov 13, 2020

thescientist13 commented Jan 31, 2024

thescientist13 Jan 31, 2024 • edited Loading

Choose a reason for hiding this comment

thescientist13 Jan 31, 2024

Choose a reason for hiding this comment

SaekiRaku commented Jun 2, 2020 •

edited

Loading

SaekiRaku Nov 13, 2020 •

edited

Loading

thescientist13 Jan 31, 2024 •

edited

Loading