perf: add typescript support (#26)

.github/workflows/pull_requests.yml

@@ -27,6 +27,7 @@ jobs:
         id: coverage
         with:
           output: report-markdown
+          test-script: npm test -- --ci --json --coverage --testLocationInResults --outputFile=report.json
       - name: Publish Coverage
         uses: marocchino/sticky-pull-request-comment@v2
         with:

.github/workflows/release.yml

@@ -16,7 +16,6 @@ jobs:
           node-version-file: '.nvmrc'
       - run: npm ci
       - run: npm run build --if-present
-      - run: npm run test:coverage --if-present
       - run: npx semantic-release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.nvmrc

@@ -1 +1 @@
-v18.15.0
+v20.11.0

config/webpack.common.js

@@ -46,6 +46,7 @@ module.exports = {
         loader: 'file-loader',
       },
     ],
+    noParse: [require.resolve('typescript/lib/typescript.js')],
   },
   resolve: {
     modules: ['src', 'node_modules'],

jest.config.js

@@ -17,7 +17,7 @@ module.exports = {
   coverageThreshold: {
     global: {
       statements: 63,
-      branches: 60,
+      branches: 50,
       functions: 63,
       lines: 61,
     },

package.json

@@ -9,8 +9,8 @@
     "start": "NODE_ENV=development webpack serve",
     "build": "NODE_ENV=production webpack",
     "test": "jest",
-    "test:watch": "jest test  --watch",
-    "test:coverage": "jest test --coverage . --silent",
+    "test:watch": "jest test --watch",
+    "test:coverage": "jest test --coverage . --silent --watch",
     "prepare": "husky install",
     "pre-commit": "lint-staged",
     "lint": "eslint src/**/*.{ts,tsx} --fix"
@@ -42,9 +42,9 @@
   },
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
-    "axios": "^0.21.4",
+    "axios": "^1.7.2",
     "date-fns": "^2.29.3",
-    "gh-pages": "^3.2.3",
+    "gh-pages": "^6.1.1",
     "github-fork-ribbon-css": "^0.2.3",
     "lodash": "^4.17.21",
     "luxon": "^1.28.0",
@@ -95,7 +95,7 @@
     "lint-staged": "^13.0.2",
     "mini-css-extract-plugin": "^2.6.1",
     "prettier": "^2.3.2",
-    "semantic-release": "^21.0.0",
+    "semantic-release": "^24.0.0",
     "ts-jest": "^29.0.1",
     "ts-loader": "^9.3.1",
     "webpack": "^5.74.0",

src/components/ActionButton/ActionButton.spec.tsx

@@ -5,22 +5,13 @@ const buttonTestId = 'actionbutton-button';
 const iconTestId = 'actionbutton-icon';
 describe('<ActionButton />', () => {
   const onClick = jest.fn();
-  it('render reset button when button type is reset', () => {
-    render(<ActionButton onClick={onClick} type="reset" />);
-    const button = screen.getByTestId(`${buttonTestId}-reset`);
-    const icon = screen.getByTestId(iconTestId);
-
-    expect(button.textContent?.trim()).toEqual('Reset');
-    expect(button).toHaveClass('btn-danger');
-    expect(icon).toHaveClass('fa-redo');
-  });
 
   it('render clear button when button type is clear', () => {
     render(<ActionButton onClick={onClick} type="clear" />);
     const button = screen.getByTestId(`${buttonTestId}-clear`);
     const icon = screen.getByTestId(iconTestId);
 
-    expect(button.textContent?.trim()).toEqual('Clear');
+    expect(button.textContent?.trim()).toEqual('Clear result');
     expect(button).toHaveClass('btn-info');
     expect(icon).toHaveClass('fa-trash');
   });

src/components/ActionButton/ActionButton.tsx

@@ -1,12 +1,6 @@
 const ButtonProps: Record<ActionButtonType, ActionButtonTypeProps> = {
-  reset: {
-    title: 'Reset',
-    className: 'btn btn-danger',
-    icon: 'fas fa-redo',
-    toolTip: 'Clear code in editor and result',
-  },
   clear: {
-    title: 'Clear',
+    title: 'Clear result',
     icon: 'fas fa-trash',
     className: 'btn btn-info',
     toolTip: 'Clear result (CtrCmd + l)',

src/components/ActionButton/types.d.ts

@@ -1,4 +1,4 @@
-type ActionButtonType = 'execute' | 'reset' | 'clear';
+type ActionButtonType = 'execute' | 'clear';
 
 interface ActionButtonProps {
   type: ActionButtonType;

src/components/App/App.tsx

@@ -1,19 +1,18 @@
-import { createRef, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import Header from 'components/Header';
-import useResizer from 'hooks/useResizer';
 import About from 'components/About';
-import Tab from 'components/Tab';
-import { editorTab, consoleTab } from 'components/App/tabs';
 import { AppContext } from 'context/AppContext';
 import { AppAactions } from 'context/Reducer';
 import ContextMenu from 'components/ContextMenu';
 import JsonView from 'components/JsonView';
+import CodeEditor from 'components/CodeEditor';
+import Console from 'components/Console';
+
+const width = 1400;
 
 const App: React.FC = () => {
   const { dispatch } = useContext(AppContext);
   const [position, setPosition] = useState<MenuPosition | null>(null);
-  const resizerRef = createRef<HTMLDivElement>();
-  const { width } = useResizer(resizerRef);
 
   useEffect(() => {
     const consoleProxy = console.log;
@@ -35,14 +34,12 @@ const App: React.FC = () => {
 
       <div className="appConainer">
         <div style={{ width }}>
-          <Tab tab={editorTab} />
+          <CodeEditor />
         </div>
 
-        <div className="resizer" ref={resizerRef} />
-
         <div style={{ width: window.innerWidth - width - 20 }}>
           <div style={{ height: '100%' }} onContextMenu={handleContextMenu}>
-            <Tab tab={consoleTab} />
+            <Console />
           </div>
         </div>
       </div>

src/components/CodeEditor/CodeEditor.tsx

@@ -15,7 +15,7 @@ const CodeEditor: React.FC = () => {
   const initEditor = () => {
     const editorConfig = {
       value: '',
-      language: 'javascript',
+      language: 'typescript',
       fontSize: 20,
       theme: state.theme,
       minimap: {
@@ -28,7 +28,7 @@ const CodeEditor: React.FC = () => {
       editorConfig
     );
 
-    monaco.editor.setModelLanguage(editorInstance.getModel()!, 'javascript');
+    monaco.editor.setModelLanguage(editorInstance.getModel()!, 'typescript');
 
     editorInstance.layout();
 
@@ -72,6 +72,7 @@ const CodeEditor: React.FC = () => {
   useEffect(() => {
     editor?.updateOptions({ theme: state.theme });
   }, [state.theme]);
+
   useEffect(() => {
     editor?.setValue(state.codeSample);
   }, [state.codeSample]);

src/components/Console/Console.tsx

@@ -4,15 +4,16 @@ import { AppContext } from 'context/AppContext';
 
 const Console: React.FC = () => {
   const { state } = useContext(AppContext);
-  const { result, error } = state;
+  const { result, error, theme } = state;
+  const extraClass = theme === 'vs-light' ? 'console-light' : '';
 
   const createKey = (index: number) => {
     return `key${index}`;
   };
 
   if (error) {
     return (
-      <div style={{ width: '100%', height: '90%' }} className="console">
+      <div className="console">
         <div data-testid="console-error" className="error">
           {error}
         </div>
@@ -21,7 +22,7 @@ const Console: React.FC = () => {
   }
 
   return (
-    <div data-testid="console-result" className="console">
+    <div data-testid="console-result" className={`console ${extraClass}`}>
       {result.map((item, index) => {
         const resut = !_.isString(item) ? JSON.stringify(item) : item;
         return (

src/components/Header/Header.spec.tsx

@@ -50,14 +50,6 @@ describe('<Header />', () => {
       });
     });
 
-    it('dispatch reset action when reset button is clicked', () => {
-      jest.spyOn(global, 'confirm' as any).mockReturnValueOnce(true);
-      fireEvent.click(screen.getByTestId('actionbutton-button-reset'));
-      expect(dispatch).toHaveBeenCalledWith({
-        type: AppAactions.RESET_ALL,
-      });
-    });
-
     it('dispatch load code sample on sample change', () => {
       fireEvent.change(screen.getByTestId('header-code-selector'), {
         target: { value: 'Axios' },

src/components/Header/Header.tsx

@@ -10,13 +10,6 @@ const Header: React.FC = () => {
   const { runCode } = useCodeRunner();
   const { theme, codeSampleName } = state;
 
-  const handleReset = () => {
-    // eslint-disable-next-line no-restricted-globals
-    const answer = confirm('This will clear history and code. Are you sure?');
-    if (answer) {
-      dispatch({ type: AppAactions.RESET_ALL });
-    }
-  };
   const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
     const {
       target: { value },
@@ -78,6 +71,7 @@ const Header: React.FC = () => {
 
           <div className="btn-group" role="group">
             {EDITOR_THEMES.map(item => (
+              // eslint-disable-next-line jsx-a11y/control-has-associated-label
               <button
                 key={item.id}
                 type="button"
@@ -96,8 +90,6 @@ const Header: React.FC = () => {
               </button>
             ))}
           </div>
-          <span style={{ marginLeft: 20, marginRight: 20 }} />
-          <ActionButton type="reset" onClick={handleReset} />
 
           <span style={{ marginLeft: 20, marginRight: 20 }} />
           <ActionButton