fix: Debounce code updates to improve typing performance (#102)

.eslintrc

@@ -4,14 +4,19 @@
     "__PLAYROOM_GLOBAL__CONFIG__": true,
     "__PLAYROOM_GLOBAL__STATIC_TYPES__": true
   },
-  "rules": {
-    "no-console": 0,
-    "no-process-exit": 0
-  },
-  "overrides": [{
-    "files": ["examples/**/*.js"],
-    "rules": {
-      "import/no-unresolved": 0
+  "overrides": [
+    {
+      "files": ["bin/**/*.js", "lib/**/*.js"],
+      "rules": {
+        "no-console": 0,
+        "no-process-exit": 0
+      }
+    },
+    {
+      "files": ["examples/**/*.js"],
+      "rules": {
+        "import/no-unresolved": 0
+      }
     }
-  }]
+  ]
 }

examples/typescript/playroom.config.js

@@ -6,6 +6,7 @@ module.exports = {
       rules: [
         {
           test: /\.tsx?$/,
+          include: /components/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',

package.json

@@ -15,7 +15,7 @@
     "example:serve": "PORT=9000 serve cypress/projects/basic/dist",
     "example:build-and-serve": "yarn example:build && yarn example:serve",
     "commit": "git-cz",
-    "lint": "eslint . && prettier --list-different '**/*.{js,md,less,ts,tsx}'",
+    "lint": "eslint . && prettier --list-different '**/*.{js,md,less,ts,tsx}' && tsc --noEmit",
     "format": "prettier --write '**/*.{js,md,less,ts,tsx}'",
     "semantic-release": "semantic-release",
     "jest": "jest src"
@@ -28,11 +28,11 @@
   },
   "lint-staged": {
     "**/*.{js,ts,tsx}": [
-      "yarn lint",
+      "yarn eslint",
       "git add"
     ],
     "**/*.{js,md,less,ts,tsx}": [
-      "yarn format",
+      "prettier --write",
       "git add"
     ]
   },
@@ -61,6 +61,12 @@
     "@babel/preset-env": "^7.7.6",
     "@babel/preset-react": "^7.7.4",
     "@babel/preset-typescript": "^7.7.4",
+    "@types/base64-url": "^2.2.0",
+    "@types/buble": "^0.19.2",
+    "@types/classnames": "^2.2.9",
+    "@types/dedent": "^0.7.0",
+    "@types/lodash": "^4.14.149",
+    "@types/lz-string": "^1.3.33",
     "@types/react": "^16.9.16",
     "@types/react-dom": "^16.9.4",
     "babel-loader": "^8.0.6",
@@ -96,6 +102,7 @@
     "style-loader": "^1.0.1",
     "typescript": "^3.7.3",
     "url-join": "^4.0.1",
+    "use-debounce": "^3.3.0",
     "webpack": "^4.41.2",
     "webpack-dev-server": "^3.9.0",
     "webpack-merge": "^4.2.2"
@@ -108,7 +115,7 @@
     "cypress": "^3.7.0",
     "cz-conventional-changelog": "^3.0.2",
     "eslint": "^6.7.2",
-    "eslint-config-seek": "^4.3.2",
+    "eslint-config-seek": "^5.0.0",
     "husky": "^3.1.0",
     "jest": "^24.9.0",
     "lint-staged": "^9.5.0",

src/Playroom/CodeEditor/CodeEditor.js

@@ -1,4 +1,5 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/neo.css';
 
@@ -76,7 +77,11 @@ const validateCode = (editorInstance, code) => {
 
 export const CodeEditor = ({ code, onChange, hints }) => {
   const editorInstanceRef = useRef(null);
-
+  const [localCode, setLocalCode] = useState(code);
+  const [debouncedChange] = useDebouncedCallback(
+    newCode => onChange(newCode),
+    100
+  );
   useEffect(() => {
     const handleKeyDown = e => {
       if (
@@ -88,11 +93,11 @@ export const CodeEditor = ({ code, onChange, hints }) => {
         e.preventDefault();
 
         const { formattedCode, line, ch } = format({
-          code,
+          code: localCode,
           cursor: editorInstanceRef.current.getCursor()
         });
 
-        onChange(formattedCode);
+        setLocalCode(formattedCode);
 
         setTimeout(() => {
           editorInstanceRef.current.focus();
@@ -109,7 +114,13 @@ export const CodeEditor = ({ code, onChange, hints }) => {
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
-  }, [code, onChange]);
+  }, [localCode, setLocalCode]);
+
+  useEffect(() => {
+    if (localCode !== code) {
+      debouncedChange(localCode);
+    }
+  }, [localCode, code, debouncedChange]);
 
   return (
     <ReactCodeMirror
@@ -119,9 +130,9 @@ export const CodeEditor = ({ code, onChange, hints }) => {
         editorInstance.focus();
         editorInstance.setCursor(0, 0);
       }}
-      value={code}
+      value={localCode}
       onBeforeChange={(editor, data, newCode) => {
-        onChange(newCode);
+        setLocalCode(newCode);
         validateCode(editorInstanceRef.current, newCode);
       }}
       options={{

src/Playroom/DockPosition/DockPosition.js → src/Playroom/DockPosition/DockPosition.tsx

@@ -3,10 +3,17 @@ import EditorUndockedSvg from './icons/EditorUndockedSvg';
 import EditorLeftSvg from './icons/EditorLeftSvg';
 import EditorBottomSvg from './icons/EditorBottomSvg';
 import EditorRightSvg from './icons/EditorRightSvg';
+import { EditorPosition } from '../../StoreContext/StoreContext';
 
+// @ts-ignore
 import styles from './DockPosition.less';
 
-export default ({ position, setPosition }) => {
+interface DockPositionProps {
+  position: EditorPosition;
+  setPosition: (position: EditorPosition) => void;
+}
+
+export default ({ position, setPosition }: DockPositionProps) => {
   return (
     <div className={styles.root}>
       <div className={styles.container}>

src/Playroom/Playroom.less

@@ -44,11 +44,6 @@
   max-height: 95vh;
 }
 
-.editorContainer_isUndocked {
-  width: 100vw;
-  height: 100vh;
-}
-
 .dockPosition {
   position: absolute;
   top: 0;