hast-util-to-estree - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

index.js

@@ -6,2 +6,3 @@ 'use strict'
 var commas = require('comma-separated-tokens')
+var attachComments = require('estree-util-attach-comments')
 var whitespace = require('hast-util-whitespace')
@@ -35,2 +36,3 @@ var find = require('property-information/find')
     schema: options && options.space === 'svg' ? svg : html,
+    comments: [],
     esm: [],
@@ -54,3 +56,8 @@ handle: zwitch('type', {
 
-  return create(tree, {type: 'Program', body: body, sourceType: 'module'})
+  return create(tree, {
+    type: 'Program',
+    body: body,
+    sourceType: 'module',
+    comments: context.comments
+  })
 }
@@ -68,3 +75,7 @@
 
-function comment(node) {
+function comment(node, context) {
+  var esnode = create(node, {type: 'Block', value: node.value})
+
+  context.comments.push(esnode)
+
   return create(node, {
@@ -74,13 +85,3 @@ type: 'JSXExpressionContainer',
       type: 'JSXEmptyExpression',
-      // Babel.
-      innerComments: [create(node, {type: 'CommentBlock', value: node.value})],
-      // Recast.
-      comments: [
-        create(node, {
-          type: 'Block',
-          value: node.value,
-          leading: false,
-          trailing: true
-        })
-      ]
+      comments: [Object.assign({}, esnode, {leading: false, trailing: true})]
     })
@@ -193,17 +194,24 @@ })
 function mdxjsEsm(node, context) {
-  push.apply(
-    context.esm,
-    (node.data && node.data.estree && node.data.estree.body) || []
-  )
+  var estree = node.data && node.data.estree
+
+  if (estree) {
+    push.apply(context.comments, estree.comments)
+    attachComments(estree, estree.comments)
+    push.apply(context.esm, estree.body)
+  }
 }
 
-function mdxExpression(node) {
+function mdxExpression(node, context) {
+  var estree = node.data && node.data.estree
+  var expression
+
+  if (estree) {
+    push.apply(context.comments, estree.comments)
+    attachComments(estree, estree.comments)
+    expression = estree.body[0] && estree.body[0].expression
+  }
+
   return create(node, {
     type: 'JSXExpressionContainer',
-    expression:
-      (node.data &&
-        node.data.estree &&
-        node.data.estree.body[0] &&
-        node.data.estree.body[0].expression) ||
-      create(node, {type: 'JSXEmptyExpression'})
+    expression: expression || create(node, {type: 'JSXEmptyExpression'})
   })
@@ -221,2 +229,4 @@ }
   var attr
+  var value
+  var estree
 
@@ -236,4 +246,35 @@ if (
     attr = attrs[index]
+    value = attr.value
 
     if (attr.type === 'mdxJsxAttribute') {
+      if (value == null) {
+        // Empty.
+      }
+      // MDXJsxAttributeValueExpression.
+      else if (typeof value === 'object') {
+        estree = value.data && value.data.estree
+        value = null
+
+        if (estree) {
+          push.apply(context.comments, estree.comments)
+          attachComments(estree, estree.comments)
+          value = estree.body[0] && estree.body[0].expression
+        }
+
+        // To do: `node` is wrong.
+        value = create(node, {
+          type: 'JSXExpressionContainer',
+          expression: value || create(null, {type: 'JSXEmptyExpression'})
+        })
+      }
+      // Anything else.
+      else {
+        // To do: use `value`?
+        value = create(null, {
+          type: 'Literal',
+          value: String(value),
+          raw: JSON.stringify(String(value))
+        })
+      }
+
       attributes.push(
@@ -243,22 +284,3 @@ create(null, {
           name: createJsxName(attr.name),
-          value:
-            attr.value == null
-              ? null
-              : typeof attr.value === 'object'
-              ? // MDXJsxAttributeValueExpression.
-                create(node, {
-                  type: 'JSXExpressionContainer',
-                  expression:
-                    (attr.value.data &&
-                      attr.value.data.estree &&
-                      attr.value.data.estree.body[0] &&
-                      attr.value.data.estree.body[0].expression) ||
-                    create(null, {type: 'JSXEmptyExpression'})
-                })
-              : // Anything else.
-                create(null, {
-                  type: 'Literal',
-                  value: String(attr.value),
-                  raw: JSON.stringify(String(attr.value))
-                })
+          value: value
         })
@@ -269,2 +291,16 @@ )
     else {
+      estree = attr.data && attr.data.estree
+      value = null
+
+      if (estree) {
+        push.apply(context.comments, estree.comments)
+        attachComments(estree, estree.comments)
+        value =
+          estree.body[0] &&
+          estree.body[0].expression &&
+          estree.body[0].expression.properties &&
+          estree.body[0].expression.properties[0] &&
+          estree.body[0].expression.properties[0].argument
+      }
+
       attributes.push(
@@ -274,10 +310,3 @@ create(null, {
           argument:
-            (attr.data &&
-              attr.data.estree &&
-              attr.data.estree.body[0] &&
-              attr.data.estree.body[0].expression &&
-              attr.data.estree.body[0].expression.properties &&
-              attr.data.estree.body[0].expression.properties[0] &&
-              attr.data.estree.body[0].expression.properties[0].argument) ||
-            create(null, {type: 'ObjectExpression', properties: {}})
+            value || create(null, {type: 'ObjectExpression', properties: {}})
         })
@@ -410,13 +439,15 @@ )
 
-function create(hast, esnode) {
+function create(hast, esnode, fromStart, fromEnd) {
   var p = position(hast)
+  var left = fromStart || 0
+  var right = fromEnd || 0
 
   if (p.start.line) {
-    esnode.start = p.start.offset
-    esnode.end = p.end.offset
+    esnode.start = p.start.offset + left
+    esnode.end = p.end.offset - right
     esnode.loc = {
-      start: {line: p.start.line, column: p.start.column - 1},
-      end: {line: p.end.line, column: p.end.column - 1}
+      start: {line: p.start.line, column: p.start.column - 1 + left},
+      end: {line: p.end.line, column: p.end.column - 1 - right}
     }
-    esnode.range = [p.start.offset, p.end.offset]
+    esnode.range = [p.start.offset + left, p.end.offset - right]
   }
@@ -423,0 +454,0 @@

package.json

 {
   "name": "hast-util-to-estree",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "hast utility to transform to estree (JavaScript AST) JSX",
@@ -53,2 +53,5 @@ "license": "MIT",
     "estree-to-babel": "^3.0.0",
+    "estree-util-attach-comments": "^1.0.0",
+    "estree-util-build-jsx": "^1.0.0",
+    "hast-util-from-parse5": "^6.0.1",
     "hastscript": "^6.0.0",
@@ -60,2 +63,3 @@ "mdast-util-from-markdown": "^0.8.0",
     "nyc": "^15.0.0",
+    "parse5": "^6.0.1",
     "prettier": "^2.0.0",
@@ -62,0 +66,0 @@ "recast": "^0.20.0",

readme.md

@@ -58,5 +58,4 @@ # hast-util-to-estree
 
-var js = recast.prettyPrint(estree).code
-
-console.log(js)
+estree.comments = null // `recast` doesn’t like comments on the root.
+console.log(recast.prettyPrint(estree).code)
 ```
@@ -71,6 +70,9 @@
       <title>{'Hi!'}</title>
+      {'\n'}
       <link rel="stylesheet" href="index.css" />
+      {'\n'}
     </head>
     <body>
       <h1>{'Hello, world!'}</h1>
+      {'\n'}
       <a
@@ -83,8 +85,15 @@ download
       />
+      {'\n'}
       {/*commentz*/}
+      {'\n'}
       <svg xmlns="http://www.w3.org/2000/svg">
+        {'\n  '}
         <title>{'SVG `<ellipse>` element'}</title>
+        {'\n  '}
         <ellipse cx="120" cy="70" rx="100" ry="50" />
+        {'\n'}
       </svg>
+      {'\n'}
       <script src="index.js" />
+      {'\n'}
     </body>
@@ -123,11 +132,12 @@ </html>
 
-*   There aren’t many great estree serializers out there that support JSX.
-    [recast][] does a great job.
-    You can also use [`estree-to-babel`][e2b] to get a Babel AST and then use
-    [`@babel/generator`][babel-generator] to serialize JSX
-*   Similarly, to turn the JSX into function calls, use [`estree-to-babel`][e2b]
-    and then [`@babel/plugin-transform-react-jsx`][react-jsx] (for React)
-    or for example [`@vue/babel-plugin-jsx`][vue-jsx] (for Vue), before
-    serializing the tree
+Comments are both attached to the tree in their neighbouring nodes (recast and
+babel style), and added as a `comments` array on the program node (espree
+style).
+You may have to do `program.comments = null` for certain compilers.
 
+There aren’t many great estree serializers out there that support JSX.
+[recast][] does a fine job.
+Or use [`estree-util-build-jsx`][build-jsx] to turn JSX into function
+calls and then serialize with whatever (astring, escodegen).
+
 ## Security
@@ -148,2 +158,4 @@
     — Create a xast tree
+*   [`estree-util-build-jsx`][build-jsx]
+    — Transform JSX to function calls
 
@@ -216,10 +228,4 @@ ## Contribute
 
-[e2b]: https://github.com/coderaiser/estree-to-babel
-
-[babel-generator]: https://babeljs.io/docs/en/babel-generator
-
 [mdast-util-mdx]: https://github.com/syntax-tree/mdast-util-mdx
 
-[react-jsx]: https://babeljs.io/docs/en/babel-plugin-transform-react-jsx
-
-[vue-jsx]: https://github.com/vuejs/jsx-next
+[build-jsx]: https://github.com/wooorm/estree-util-build-jsx

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21494

increased by3.81%

Lines of code

400

increased by5.54%

Number of lines in readme file

226

increased by2.73%

Worsened metrics

Dev dependency count

24

increased by20%

No dependency changes