From 856cada8869a028f48fb5adcbd555263e2991caa Mon Sep 17 00:00:00 2001 From: Jan Klaas Kollhof Date: Tue, 29 Sep 2020 17:01:53 +0200 Subject: [PATCH] feat(jsx): add support for fragments `<>` --- package-lock.json | 30 ++++++------- package.json | 6 +-- src/lang/jsx/index.fnk | 18 +++++++- src/lang/jsx/index.test.fnk | 74 ++++++++++++++++++++++++-------- src/lang/jsx/index.test.fnk.snap | 42 ++++++++++++------ 5 files changed, 121 insertions(+), 49 deletions(-) diff --git a/package-lock.json b/package-lock.json index 436c367..1aa32f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -430,9 +430,9 @@ } }, "@fink/jest": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/@fink/jest/-/jest-5.3.0.tgz", - "integrity": "sha512-RIZx96RG0nmd45zBKpDUUBcHbvwRHgMowoHZGpMzhwIz2qeABRmijqK+CihtPdN72Ex2lFrxha5ZkeGizBLn2Q==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/@fink/jest/-/jest-5.4.0.tgz", + "integrity": "sha512-LoBZZivJ3o38+hTJ7WQODX2s3y3T0l9fQaoYqr44DSVxK/hvG1YIlJ4WFuaUB5Ve67tLYq34+LHkPip+/Dd+bQ==", "dev": true, "requires": { "@babel/core": "^7.11.6", @@ -446,26 +446,26 @@ "integrity": "sha512-KNK1E7B8C5haHibJWIQvcHHpaoaKbD4jTmOxca5bRXEGZbzI5WlwJ/bdvXcVHajBpLkbGUPiUGTiE1h7kC4r2g==" }, "@fink/larix": { - "version": "12.2.1", - "resolved": "https://registry.npmjs.org/@fink/larix/-/larix-12.2.1.tgz", - "integrity": "sha512-lkrfNBb6OwvMkuSL/Z23LHJDFSROhFLNFd6PVAblvcm+yegexY/zqx1067AV4tWpCTib29mHjjxo+4qhuxBpig==", + "version": "12.3.0", + "resolved": "https://registry.npmjs.org/@fink/larix/-/larix-12.3.0.tgz", + "integrity": "sha512-bycT2FxKNPYd77XjO0PmEu7/kH9n7n6o61opvxFZrl8WaOeEPlsL/rqIdSFQqbLosXS4hxOAImoEHPl+wWb3iA==", "dev": true, "requires": { "@fink/prattler": "^5.3.1", - "@fink/std-lib": "^4.0.0" + "@fink/std-lib": "^4.0.1" } }, "@fink/loxia": { - "version": "12.2.1", - "resolved": "https://registry.npmjs.org/@fink/loxia/-/loxia-12.2.1.tgz", - "integrity": "sha512-a0OQdVtrF121IxwC1gdlKSZwm1CtVbfVO0aidKYSU5LQ52dn7fn3ORyHxWI7DYvD1kJsS2595/WfIoC+jP+8Uw==", + "version": "12.2.2", + "resolved": "https://registry.npmjs.org/@fink/loxia/-/loxia-12.2.2.tgz", + "integrity": "sha512-s3J2HTTcE/Afz+UpR2/WhkJZTvoGmQtE98eSPGfK22IGNdK+OIwrYVvO7LhV0Gni4jy0uFvb9q1hMh3obsPy3Q==", "dev": true, "requires": { "@babel/core": "^7.10.5", "@babel/traverse": "^7.10.5", "@babel/types": "^7.10.5", - "@fink/js-interop": "^1.1.0", - "@fink/std-lib": "^4.0.0" + "@fink/js-interop": "^1.1.1", + "@fink/std-lib": "^4.0.1" } }, "@fink/prattler": { @@ -479,9 +479,9 @@ } }, "@fink/snippet": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@fink/snippet/-/snippet-1.2.0.tgz", - "integrity": "sha512-SqQmwfInWiyIouEa5MjCJRt1jMp13hie9Xo9IIhBQn4V9Q3WLuPCW9VRKkfgDAzl23R4zbyN1VFqDeR5w7o7/w==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@fink/snippet/-/snippet-1.2.1.tgz", + "integrity": "sha512-WARvWOaGYPNJu/vQgoO/fGT9L5Z5lYjeVVSwS8vjG/gPH09u4V4gmBtKR10Gw8eiKbE5kwCj+e6WGQAZbqajSQ==", "dev": true, "requires": { "@fink/std-lib": "^4.0.0" diff --git a/package.json b/package.json index 9690a93..40875d4 100644 --- a/package.json +++ b/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", diff --git a/src/lang/jsx/index.fnk b/src/lang/jsx/index.fnk index ba50e32..4c4bae4 100644 --- a/src/lang/jsx/index.fnk +++ b/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 diff --git a/src/lang/jsx/index.test.fnk b/src/lang/jsx/index.test.fnk index fecedfd..eba27ed 100644 --- a/src/lang/jsx/index.test.fnk +++ b/src/lang/jsx/index.test.fnk @@ -3,24 +3,64 @@ describe 'jsx', fn: - it 'compiles', fn: - expect - fink2js ' - jsx1 = - jsx2 = - jsx3 = - jsx4 = - jsx5 = - jsx6 = - - foo {ni} - ham - spam - - ni - - ' + it 'compiles shorthand', fn: + expect + fink2js 'elem = ' + to_match_snapshot + + + it 'compiles with str params', fn: + expect + fink2js 'elem = ' + to_match_snapshot + + expect + fink2js "elem = " + to_match_snapshot + + + it 'compiles with expr params', fn: + expect + fink2js 'elem = ' + to_match_snapshot + + expect + fink2js "elem = " to_match_snapshot + it 'compiles empty elem', fn: + expect + fink2js 'elem = ' + to_match_snapshot + + + it 'compiles with children and expr', fn: + expect + fink2js 'elem = + + foo {ni} + ham + spam + + ni + ' + to_match_snapshot + + + it 'compiles fragment', fn: + expect + fink2js 'elem = <>' + to_match_snapshot + + + it 'compiles fragment with children', fn: + expect + fink2js 'elem = + <> + foo +

bar

+ ' + to_match_snapshot + diff --git a/src/lang/jsx/index.test.fnk.snap b/src/lang/jsx/index.test.fnk.snap index ae6c6e7..18082ca 100644 --- a/src/lang/jsx/index.test.fnk.snap +++ b/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 = ; -export const jsx2 = ; -export const jsx3 = ; -export const jsx4 = ; -export const jsx5 = ; -export const jsx6 = - foo {ni} - ham - spam - - ni - ;" +exports[`jsx compiles empty elem 1`] = `"export const elem = ;"`; + +exports[`jsx compiles fragment 1`] = `"export const elem = <>;"`; + +exports[`jsx compiles fragment with children 1`] = ` +"export const elem = <> + foo +

bar

+;" +`; + +exports[`jsx compiles shorthand 1`] = `"export const elem = ;"`; + +exports[`jsx compiles with children and expr 1`] = ` +"export const elem = + foo {ni} + ham + spam + + ni +;" `; + +exports[`jsx compiles with expr params 1`] = `"export const elem = ;"`; + +exports[`jsx compiles with expr params 2`] = `"export const elem = ;"`; + +exports[`jsx compiles with str params 1`] = `"export const elem = ;"`; + +exports[`jsx compiles with str params 2`] = `"export const elem = ;"`;