fix: lot of fixes related to function components

- rewrote tests

- remove git hooks

- fixes for self closing elements

Author: danielpza

README.md

@@ -100,6 +100,10 @@ const App = props =>
 
 ## Roadmap/Caveats
 
+- Always handle `children` property implicitly
+
+- Self closing tags will be treated as such, (ie no children handling on the props)
+
 - Using spread operators on html elements require _esnext_ environment because it compiles down to `Object.entries` expression:
 
 ```tsx

package.json

@@ -29,28 +29,18 @@
     "build": "tsc -p tsconfig-build.json",
     "prepare": "npm run build",
     "release": "standard-version",
-    "test": "jest --coverage"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm test && pretty-quick --staged",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
+    "test": "jest"
   },
   "jest": {
     "preset": "ts-jest",
     "testEnvironment": "node"
   },
   "dependencies": {},
   "devDependencies": {
-    "@commitlint/cli": "^7.2.1",
-    "@commitlint/config-conventional": "^7.1.2",
     "@types/jest": "^24.0.5",
     "@types/node": "^10.12.18",
-    "husky": "^1.1.2",
     "jest": "^23.6.0",
-    "prettier": "^1.13.7",
-    "pretty-quick": "^1.8.0",
+    "safe-eval": "^0.4.1",
     "standard-version": "^5.0.0",
     "ts-jest": "^23.10.4",
     "typescript": "^3.1.6"

src/__fixtures/expected.js

@@ -1,35 +1,82 @@
 import * as ts from "typescript";
-import { readFileSync } from "fs";
-import { resolve } from "path";
 import transformer from "./index";
-
-describe("transformer", () => {
-  it("should compile", () => {
-    const inputFile = resolve(__dirname, "__fixtures/input.tsx");
-    const expectedFile = resolve(__dirname, "__fixtures/expected.js");
-    const result = compile(inputFile, compilerOptions);
-    const expected = readFileSync(expectedFile).toString();
-    expect(result).toBe(expected);
-  });
-});
+import safeEval from "safe-eval";
 
 const compilerOptions: ts.CompilerOptions = {
   target: ts.ScriptTarget.ESNext,
   module: ts.ModuleKind.CommonJS,
-  jsx: ts.JsxEmit.Preserve
+  jsx: ts.JsxEmit.Preserve,
 };
 
-function compile(file: string, options: ts.CompilerOptions): string {
-  let content = "";
-  const program = ts.createProgram([file], options);
-  program.emit(
-    undefined,
-    (_, result) => (content = result),
-    undefined,
-    undefined,
-    {
-      after: [transformer(program)]
-    }
-  );
-  return content;
+function compile(source: string) {
+  const { outputText } = ts.transpileModule(source, {
+    compilerOptions,
+    transformers: { after: [transformer] },
+  });
+  return outputText;
+}
+
+function runFunction(source: string) {
+  const compiled = compile(source);
+  const wrapped = `(function () {${compiled}})()`;
+  return safeEval(wrapped);
 }
+
+function run(source: string) {
+  return safeEval(compile(source));
+}
+
+function checkf(source: string, expected: string) {
+  const actual = runFunction(source);
+  expect(actual).toBe(expected);
+}
+
+function check(source: string, expected: string) {
+  const actual = run(source);
+  expect(actual).toBe(expected);
+}
+
+test("simple", () => {
+  check(
+    '<div className="container" moreProps="hello">Hello World</div>;',
+    '<div className="container" moreProps="hello">Hello World</div>'
+  );
+});
+
+test("interpolation", () => {
+  check('<div class={3}>{"hello"}</div>', '<div class="3">hello</div>');
+});
+
+test("fragments", () => {
+  check("<><h1>hello</h1><h2>world</h2></>", "<h1>hello</h1><h2>world</h2>");
+});
+
+test("More Complex", () => {
+  checkf(
+    `
+const Control = ({label, children}: any) => <div><label>{label}</label>{children}</div>
+return <Control label='hello'>world</Control>;
+`,
+    "<div><label>hello</label>world</div>"
+  );
+});
+
+test("spread", () => {
+  checkf(
+    `
+const Control = ({label, children}: any) => <div><label>{label}</label>{children}</div>
+return <Control {...{ label: "hello", children: "world" }} />;
+`,
+    "<div><label>hello</label>world</div>"
+  );
+});
+
+test("spread2", () => {
+  checkf(
+    `
+const Control = ({children, label, ...props}: any) => <label>{label}<a {...props}/></label>
+return <Control label='hello' placeholder='world' type='string' />;
+`,
+    '<label>hello<a placeholder="world" type="string"/></label>'
+  );
+});

src/__fixtures/input.tsx

@@ -31,7 +31,7 @@ class Transformer {
       " ",
       new utils.Identifier("Object")
         .access("entries")
-        .call(ts.createSpread(node.expression))
+        .call(node.expression)
         .access("map")
         .call(
           new utils.ArrowFunction(
@@ -44,6 +44,8 @@ class Transformer {
             ).getNode()
           ).getNode()
         )
+        .access("join")
+        .call(ts.createLiteral(" "))
         .getNode()
     );
   }
@@ -156,12 +158,15 @@ class Transformer {
     node: ts.JsxSelfClosingElement,
     result: utils.StringTemplateHelper
   ) {
-    const parameters = node.attributes.properties.map(
-      this.getObjectLiteralElementFromAttribute.bind(this)
-    );
+    let parameters: ts.ObjectLiteralElementLike[] = [];
     parameters.push(
       ts.createPropertyAssignment("children", ts.createLiteral(""))
     );
+    parameters = parameters.concat(
+      node.attributes.properties.map((property) =>
+        this.getObjectLiteralElementFromAttribute(property)
+      )
+    );
     result.add(
       ts.createCall(node.tagName, [], [ts.createObjectLiteral(parameters)])
     );
@@ -177,8 +182,7 @@ class Transformer {
     }
     result.add("<", node.tagName.getText());
     this.getStringFromAttributes(node.attributes, result);
-    result.add(">");
-    result.add("</", node.tagName.getText(), ">");
+    result.add("/>");
   }
 
   getStringFromJsxExpression(

src/index.test.ts

@@ -0,0 +1,4 @@
+declare module "safe-eval" {
+  function safeEval(content: string, fileName?: string): any;
+  export default safeEval;
+}