Merge pull request #80 from fink-lang/jsx

feat(jsx): add support for fragments `<></>`

package.json

@@ -37,9 +37,9 @@
   },
   "devDependencies": {
     "@fink/cli": "^6.2.1",
-    "@fink/jest": "^5.3.0",
-    "@fink/larix": "^12.2.1",
-    "@fink/loxia": "^12.2.1",
+    "@fink/jest": "^5.4.0",
+    "@fink/larix": "^12.3.0",
+    "@fink/loxia": "^12.2.2",
     "commitizen": "^4.1.2",
     "cz-conventional-changelog": "^3.1.0",
     "jest-cli": "^26.1.0",

src/lang/jsx/index.fnk

@@ -1,10 +1,12 @@
 {
   jsxElement, jsxOpeningElement, jsxIdentifier, jsxClosingElement, jsxAttribute
-  stringLiteral, jsxExpressionContainer, jsxText
+  stringLiteral, jsxExpressionContainer, jsxText, jsxFragment, jsxOpeningFragment
+  jsxClosingFragment
 } = import '@babel/types'
 {add, any} = import '../context'
 
 
+
 transform_jsx_elem = fn node, {transform}:
   id = jsxIdentifier node.name
   [...attrs] = pipe node.props:
@@ -20,6 +22,17 @@ transform_jsx_elem = fn node, {transform}:
 
 
 
+transform_jsx_frag = fn node, {transform}:
+  [...children] = pipe node.children:
+    map expr: transform expr
+
+  jsxFragment
+    jsxOpeningFragment _
+    jsxClosingFragment _
+    children
+
+
+
 transform_jsx_attr = fn node, {transform}:
   id = jsxIdentifier node.name
 
@@ -30,10 +43,12 @@ transform_jsx_attr = fn node, {transform}:
   jsxAttribute id, ...value
 
 
+
 transform_jsx_str = fn node:
   stringLiteral node.value
 
 
+
 transform_jsx_text = fn node:
   jsxText node.value
 
@@ -45,6 +60,7 @@ transform_jsx_expr_container = fn node, {transform}:
 
 add_jsx = fn ctx:
   pipe ctx:
+    add 'jsx:frag', any, transform_jsx_frag
     add 'jsx:elem', any, transform_jsx_elem
     add 'jsx:attr', any, transform_jsx_attr
     add 'jsx:string', any, transform_jsx_str

src/lang/jsx/index.test.fnk

@@ -3,24 +3,64 @@
 
 
 describe 'jsx', fn:
-  it 'compiles', fn:
-    expect
-      fink2js '
-        jsx1 = <a/>
-        jsx2 = <b></b>
-        jsx3 = <a foo bar="ni" />
-        jsx4 = <a foo bar=\'ni\' />
-        jsx5 = <a foo bar={1234} />
-        jsx6 =
-          <a>
-            foo {ni}
-            <b /> ham
-            spam
-            <c />
-            ni
-          </a>
-        '
+  it 'compiles shorthand', fn:
+    expect
+      fink2js 'elem = <a/>'
+      to_match_snapshot
+
+
+  it 'compiles with str params', fn:
+    expect
+      fink2js 'elem = <a foo bar="ni" />'
+      to_match_snapshot
+
+    expect
+      fink2js "elem = <a foo bar='ni' />"
+      to_match_snapshot
+
+
+  it 'compiles with expr params', fn:
+    expect
+      fink2js 'elem = <a foo bar={1234} />'
+      to_match_snapshot
+
+    expect
+      fink2js "elem = <a foo bar='ni' />"
       to_match_snapshot
 
 
+  it 'compiles empty elem', fn:
+    expect
+      fink2js 'elem = <b></b>'
+      to_match_snapshot
+
+
+  it 'compiles with children and expr', fn:
+    expect
+      fink2js 'elem =
+        <a>
+          foo {ni}
+          <b /> ham
+          spam
+          <c />
+          ni
+        </a>'
+      to_match_snapshot
+
+
+  it 'compiles fragment', fn:
+    expect
+      fink2js 'elem = <></>'
+      to_match_snapshot
+
+
+  it 'compiles fragment with children', fn:
+    expect
+      fink2js 'elem =
+        <>
+          foo
+          <p>bar</p>
+        </>'
+      to_match_snapshot
+
 

src/lang/jsx/index.test.fnk.snap

@@ -1,16 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`jsx compiles 1`] = `
-"export const jsx1 = <a />;
-export const jsx2 = <b></b>;
-export const jsx3 = <a foo bar=\\"ni\\" />;
-export const jsx4 = <a foo bar=\\"ni\\" />;
-export const jsx5 = <a foo bar={1234} />;
-export const jsx6 = <a>
-    foo {ni}
-    <b /> ham
-    spam
-    <c />
-    ni
-  </a>;"
+exports[`jsx compiles empty elem 1`] = `"export const elem = <b></b>;"`;
+
+exports[`jsx compiles fragment 1`] = `"export const elem = <></>;"`;
+
+exports[`jsx compiles fragment with children 1`] = `
+"export const elem = <>
+  foo
+  <p>bar</p>
+</>;"
+`;
+
+exports[`jsx compiles shorthand 1`] = `"export const elem = <a />;"`;
+
+exports[`jsx compiles with children and expr 1`] = `
+"export const elem = <a>
+  foo {ni}
+  <b /> ham
+  spam
+  <c />
+  ni
+</a>;"
 `;
+
+exports[`jsx compiles with expr params 1`] = `"export const elem = <a foo bar={1234} />;"`;
+
+exports[`jsx compiles with expr params 2`] = `"export const elem = <a foo bar=\\"ni\\" />;"`;
+
+exports[`jsx compiles with str params 1`] = `"export const elem = <a foo bar=\\"ni\\" />;"`;
+
+exports[`jsx compiles with str params 2`] = `"export const elem = <a foo bar=\\"ni\\" />;"`;