Added prettier (#5)

.github/workflows/ci.yml

@@ -44,6 +44,7 @@ jobs:
     - name: Run tests
       run: |
         npm i
+        npm run formatCheck
         npx tsc
         NODE_V8_COVERAGE=coverage0 npx c8 -r json --all --src ./src node --experimental-test-coverage ./test/all.mjs
       if: ${{ env.TAG_NAME == '' }}

package.json

@@ -4,6 +4,11 @@
   "version": "0.0.0",
   "license": "MIT",
   "description": "Terminal UI React.js components library",
+  "scripts": {
+    "test": "tsc && bun test && node ./test/all.mjs",
+    "format": "prettier **/*.mjs **/*.ts --write",
+    "formatCheck": "prettier **/*.mjs **/*.ts --check"
+  },
   "type": "module",
   "exports": {
     "./*": "./src/*"
@@ -41,6 +46,7 @@
     "@types/react-blessed": "^0.7.3",
     "@types/react-test-renderer": "^17.0.1",
     "c8": "^7.13.0",
+    "prettier": "^2.8.8",
     "react-test-renderer": "^17.0.1",
     "typescript": "^4.9.5"
   }

src/Button.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 
-import { Widgets } from 'blessed';
+import { Widgets } from "blessed";
 
 export interface ButtonProps {
   left: number;

src/Button.mjs

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import * as UI from './UI.mjs';
+import React, { useState } from "react";
+import * as UI from "./UI.mjs";
 
 const h = React.createElement;
 
@@ -11,7 +11,7 @@ const Button = (props) => {
   const style = focused ? props.style.focus : props.style;
   const content = UI.renderText2(style, props.label);
 
-  return h('button', {
+  return h("button", {
     mouse: true,
     tags: true,
     wrap: false,
@@ -30,6 +30,6 @@ const Button = (props) => {
   });
 };
 
-Button.displayName = 'Button';
+Button.displayName = "Button";
 
 export default Button;

src/Button.test.mjs

@@ -1,37 +1,39 @@
-import React from 'react';
-import TestRenderer from 'react-test-renderer';
-import Button from './Button.mjs';
-import * as UI from './UI.mjs';
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import Button from "./Button.mjs";
+import * as UI from "./UI.mjs";
 
-import { strict as assert } from 'node:assert';
-const { describe, it } = await (async () => { // @ts-ignore
-  return process.isBun ? Promise.resolve({describe: (_, fn) => fn(), it: test}) : import('node:test');
+import { strict as assert } from "node:assert";
+const { describe, it } = await (async () => {
+  // @ts-ignore
+  return process.isBun // @ts-ignore
+    ? Promise.resolve({ describe: (_, fn) => fn(), it: test })
+    : import("node:test");
 })();
-import mockFunction from '../test/mockFunction.mjs';
+import mockFunction from "../test/mockFunction.mjs";
 
 const h = React.createElement;
 
-describe('Button.test.mjs', () => {
-
-  it('should call onPress when press button', () => {
+describe("Button.test.mjs", () => {
+  it("should call onPress when press button", () => {
     //given
     const onPressMock = mockFunction();
     const props = getButtonProps(onPressMock);
     const result = TestRenderer.create(h(Button, props)).root;
-    const button = result.findByType('button')
-    
+    const button = result.findByType("button");
+
     //when
     button.props.onPress();
-    
+
     //then
     assert.deepEqual(onPressMock.times, 1);
   });
 
-  it('should change focused state when onFocus/onBlur', () => {
+  it("should change focused state when onFocus/onBlur", () => {
     //given
     const props = getButtonProps();
     const renderer = TestRenderer.create(h(Button, props));
-    const button = renderer.root.findByType('button')
+    const button = renderer.root.findByType("button");
     assertButton(renderer.root, props, false);
 
     //when & then
@@ -43,15 +45,15 @@ describe('Button.test.mjs', () => {
     assertButton(renderer.root, props, false);
   });
 
-  it('should render component', () => {
+  it("should render component", () => {
     //given
     const props = getButtonProps();
-    
+
     //when
     const result = TestRenderer.create(h(Button, props)).root;
-    
+
     //then
-    assert.deepEqual(Button.displayName, 'Button');
+    assert.deepEqual(Button.displayName, "Button");
     assertButton(result, props, false);
   });
 });
@@ -66,8 +68,8 @@ function getButtonProps(onPress = () => {}) {
       bg: "blue",
       focus: {
         fg: "cyan",
-        bg: "black"
-      }
+        bg: "black",
+      },
     },
     onPress,
   };

src/UI.mjs

@@ -1,4 +1,4 @@
-import Blessed from '@farjs/blessed';
+import Blessed from "@farjs/blessed";
 
 /**
  * @typedef { import('blessed').Widgets.Types.TStyle } BlessedStyle
@@ -14,7 +14,7 @@ export function renderText2(style, text) {
     style?.bold || false,
     style?.fg || "white",
     style?.bg || "black",
-    text,
+    text
   );
 }
 

src/UI.test.mjs

@@ -1,30 +1,32 @@
-import * as UI from './UI.mjs';
+import * as UI from "./UI.mjs";
 
-import { strict as assert } from 'node:assert';
-const { describe, it } = await (async () => { // @ts-ignore
-  return process.isBun ? Promise.resolve({describe: (_, fn) => fn(), it: test}) : import('node:test');
+import { strict as assert } from "node:assert";
+const { describe, it } = await (async () => {
+  // @ts-ignore
+  return process.isBun // @ts-ignore
+    ? Promise.resolve({ describe: (_, fn) => fn(), it: test })
+    : import("node:test");
 })();
 
-describe('UI.test.mjs', () => {
-
-  it('should use defaults if style is undefined when renderText2', () => {
+describe("UI.test.mjs", () => {
+  it("should use defaults if style is undefined when renderText2", () => {
     //when
-    const result = UI.renderText2(undefined, 'test');
-    
+    const result = UI.renderText2(undefined, "test");
+
     //then
-    assert.deepEqual(result, '{white-fg}{black-bg}test{/}');
+    assert.deepEqual(result, "{white-fg}{black-bg}test{/}");
   });
 
-  it('should use defaults if style is null when renderText2', () => {
+  it("should use defaults if style is null when renderText2", () => {
     //when
     // @ts-ignore
-    const result = UI.renderText2(null, 'test');
-    
+    const result = UI.renderText2(null, "test");
+
     //then
-    assert.deepEqual(result, '{white-fg}{black-bg}test{/}');
+    assert.deepEqual(result, "{white-fg}{black-bg}test{/}");
   });
 
-  it('should use style if defined when renderText2', () => {
+  it("should use style if defined when renderText2", () => {
     //given
     const style = {
       bold: true,
@@ -33,53 +35,53 @@ describe('UI.test.mjs', () => {
     };
 
     //when
-    const result = UI.renderText2(style, 'test');
-    
+    const result = UI.renderText2(style, "test");
+
     //then
-    assert.deepEqual(result, '{bold}{yellow-fg}{blue-bg}test{/}');
+    assert.deepEqual(result, "{bold}{yellow-fg}{blue-bg}test{/}");
   });
 
-  it('should return original text if empty when renderText', () => {
+  it("should return original text if empty when renderText", () => {
     //given
-    const text = '';
+    const text = "";
 
     //when
-    const result = UI.renderText(false, 'yellow', 'blue', text);
-    
+    const result = UI.renderText(false, "yellow", "blue", text);
+
     //then
     assert.deepEqual(result, text);
   });
 
-  it('should render bold text when renderText', () => {
+  it("should render bold text when renderText", () => {
     //given
     const isBold = true;
 
     //when
-    const result = UI.renderText(isBold, 'yellow', 'blue', 'test');
-    
+    const result = UI.renderText(isBold, "yellow", "blue", "test");
+
     //then
-    assert.deepEqual(result, '{bold}{yellow-fg}{blue-bg}test{/}');
+    assert.deepEqual(result, "{bold}{yellow-fg}{blue-bg}test{/}");
   });
 
-  it('should render non-bold text when renderText', () => {
+  it("should render non-bold text when renderText", () => {
     //given
     const isBold = false;
 
     //when
-    const result = UI.renderText(isBold, 'yellow', 'blue', 'test');
-    
+    const result = UI.renderText(isBold, "yellow", "blue", "test");
+
     //then
-    assert.deepEqual(result, '{yellow-fg}{blue-bg}test{/}');
+    assert.deepEqual(result, "{yellow-fg}{blue-bg}test{/}");
   });
 
-  it('should escape special chars when renderText', () => {
+  it("should escape special chars when renderText", () => {
     //given
-    const text = 'start/-{}end';
+    const text = "start/-{}end";
 
     //when
-    const result = UI.renderText(false, 'yellow', 'blue', text);
-    
+    const result = UI.renderText(false, "yellow", "blue", text);
+
     //then
-    assert.deepEqual(result, '{yellow-fg}{blue-bg}start/-{open}{close}end{/}');
+    assert.deepEqual(result, "{yellow-fg}{blue-bg}start/-{open}{close}end{/}");
   });
 });

test/all.mjs

@@ -1,5 +1,4 @@
+await import("../src/Button.test.mjs");
+await import("../src/UI.test.mjs");
 
-await import('../src/Button.test.mjs');
-await import('../src/UI.test.mjs');
-
-await import('./mockFunction.test.mjs');
+await import("./mockFunction.test.mjs");

test/mockFunction.d.ts

@@ -1,5 +1,6 @@
-
-declare function mockFunction<T extends (...args: any[]) => any>(impl?: T): {
+declare function mockFunction<T extends (...args: any[]) => any>(
+  impl?: T
+): {
   (...args: Parameters<T>): ReturnType<T>;
 
   times: number;

test/mockFunction.mjs

@@ -1,18 +1,16 @@
-
 /**
  * @type { import('./mockFunction').default }
  */
 function mockFunction(impl) {
+  // @ts-ignore
+  function mock(...args) {
+    mock.times += 1;
 
-    // @ts-ignore
-    function mock(...args) {
-      mock.times += 1;
-
-      return impl ? impl.apply(undefined, args) : undefined;
-    }
+    return impl ? impl.apply(undefined, args) : undefined;
+  }
 
-    mock.times = 0;
-    return mock;
+  mock.times = 0;
+  return mock;
 }
 
 export default mockFunction;

test/mockFunction.test.mjs

@@ -1,8 +1,11 @@
-import mockFunction from './mockFunction.mjs';
+import mockFunction from "./mockFunction.mjs";
 
-import { strict as assert } from 'node:assert';
-const { describe, it } = await (async () => { // @ts-ignore
-  return process.isBun ? Promise.resolve({describe: (_, fn) => fn(), it: test}) : import('node:test');
+import { strict as assert } from "node:assert";
+const { describe, it } = await (async () => {
+  // @ts-ignore
+  return process.isBun // @ts-ignore
+    ? Promise.resolve({ describe: (_, fn) => fn(), it: test })
+    : import("node:test");
 })();
 
 /**
@@ -19,31 +22,30 @@ function callFn(fn) {
   return fn(1, 2);
 }
 
-describe('mockFunction.test.mjs', () => {
-
-  it('should mock void function', () => {
+describe("mockFunction.test.mjs", () => {
+  it("should mock void function", () => {
     //given
     const voidFnMock = mockFunction();
-    
+
     //when
     callVoidFn(voidFnMock);
-    
+
     //then
     assert.deepEqual(voidFnMock.times, 1);
   });
 
-  it('should mock non-void function', () => {
+  it("should mock non-void function", () => {
     //given
     const fnMock = mockFunction((a, b) => {
       assert.deepEqual(fnMock.times, 1);
       assert.deepEqual(a, 1);
       assert.deepEqual(b, 2);
       return 123;
     });
-    
+
     //when
     const result = callFn(fnMock);
-    
+
     //then
     assert.deepEqual(fnMock.times, 1);
     assert.deepEqual(result, 123);