feat(CDM-261/Code): update react-ace (#4328)

* feat(CDM-261) update existing Code component to v10 (prerequisite to add it in DS) * chore: yarn-deduplicate * Update * fix: merge master and make sb works * fix: autocomplete * fix: autocomplete * fix: build * Fix scope override * fix: make it works without timeout * chore: cleanup * test: fix * Cleanup & add changeset * Cleanup empty file * Fix playground compilation * Remove enter key catcher * Update .changeset/long-pigs-lie.md Co-authored-by: Jean-Michel FRANCOIS <[email protected]> --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: jmfrancois <[email protected]>
Talend · Jul 25, 2023 · f65073e · f65073e
1 parent c15088d
commit f65073e
Show file tree

Hide file tree

Showing 14 changed files with 72 additions and 133 deletions.
diff --git a/.changeset/clever-snails-whisper.md b/.changeset/clever-snails-whisper.md
@@ -0,0 +1,5 @@
+---
+'@talend/module-to-cdn': minor
+---
+
+feat: add ace-builds
diff --git a/.changeset/long-pigs-lie.md b/.changeset/long-pigs-lie.md
@@ -0,0 +1,9 @@
+---
+'@talend/react-forms': minor
+---
+
+Update react-ace lib and improve its lazy loading.
+Fix auto-completion.
+Remove the need to add a copy configuration in application to work.
+
+New library no more use *brace* but *ace-builds* instead.
diff --git a/fork/module-to-cdn/modules.json b/fork/module-to-cdn/modules.json
@@ -155,6 +155,14 @@
       }
     }
   },
+  "ace-builds": {
+    "versions": {
+      ">= 1.10.1": {
+        "development": "/",
+        "production": "/"
+      }
+    }
+  },
   "aframe": {
     "var": "AFRAME",
     "versions": {

diff --git a/packages/forms/.npmignore b/packages/forms/.npmignore
@@ -58,5 +58,4 @@ stylelint-report.json
 talend-scripts.json
 tsconfig.build.json
 tsconfig.json
-webpack.ace.config.js
 talend-i18n.json
diff --git a/packages/forms/README.md b/packages/forms/README.md
@@ -143,27 +143,7 @@ function isValid({ payload }) {
 ## Build with webpack
 
 @talend/react-forms comes with react-ace lazy loaded.
-No modes are loaded with the build and ace is trying to fetch modes,
-this is why you need to add a copyconfig to your build to use the 'code' widget.
-
-Please adapt from this webpack config example:
-
-```javascript
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const buildFormUtils = require('@talend/react-forms/build-utils');
-
-const patterns = buildFormUtils.getWebpackCopyConfig();
-
-module.exports = {
-	entry: './src/app/index.js'
-	output: {
-		//...
-	},
-	plugins: [
-		new CopyWebpackPlugin({ patterns })
-	]
-}
-```
+Modes are loaded from CDN. No more additional config is required.
 
 ## LICENSE
 

diff --git a/packages/forms/build-utils.js b/packages/forms/build-utils.js
diff --git a/packages/forms/package.json b/packages/forms/package.json
@@ -6,11 +6,10 @@
   "types": "./lib/index.d.ts",
   "license": "Apache-2.0",
   "scripts": {
-    "build:ace": "webpack --config=./webpack.ace.config.js",
     "build:dev": "talend-scripts build --umd --dev",
     "build:prod": "talend-scripts build --umd --prod",
     "build-storybook": "talend-scripts build-storybook",
-    "pre-release": "yarn build:dev && yarn build:prod && yarn build:ace",
+    "pre-release": "yarn build:dev && yarn build:prod",
     "build:lib": "talend-scripts build",
     "test": "cross-env TZ=Europe/Paris talend-scripts test",
     "test:watch": "talend-scripts test --watch",
@@ -43,6 +42,7 @@
     "@talend/design-system": "^7.10.0",
     "@talend/design-tokens": "^2.7.3",
     "@talend/utils": "^2.5.1",
+    "ace-builds": "^1.10.1",
     "ajv": "^6.12.6",
     "classnames": "^2.3.2",
     "json-logic-js": "^2.0.2",
@@ -51,7 +51,7 @@
     "memoize-one": "^6.0.0",
     "react-autowhatever": "10.2.0",
     "@talend/react-bootstrap": "^1.35.2",
-    "react-ace": "^6.6.0",
+    "react-ace": "^10.1.0",
     "react-hook-form": "^6.15.8",
     "react-jsonschema-form": "0.51.0",
     "tv4": "^1.3.0"

diff --git a/packages/forms/src/UIForm/fields/Code/Code.component.test.tsx b/packages/forms/src/UIForm/fields/Code/Code.component.test.tsx
@@ -5,6 +5,7 @@ import { render, waitFor, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import ReactAce from 'react-ace';
 import Code, { CodeProps } from './Code.component';
+import 'ace-builds/src-noconflict/ext-language_tools';
 
 // fix cannot read appendChild of null;
 jest.mock('ally.js');

diff --git a/packages/forms/src/UIForm/fields/Code/Code.component.tsx b/packages/forms/src/UIForm/fields/Code/Code.component.tsx
@@ -1,25 +1,35 @@
-import {
-	lazy,
-	DetailedHTMLProps,
-	KeyboardEvent,
-	LabelHTMLAttributes,
-	Suspense,
-	useEffect,
-	useRef,
-	useState,
-} from 'react';
+import { lazy, DetailedHTMLProps, LabelHTMLAttributes, Suspense, useEffect, useState } from 'react';
+import { IAceEditorProps } from 'react-ace';
 import { useTranslation } from 'react-i18next';
-import { isEventKey, codes } from 'keycode';
+
 import assetsApi from '@talend/assets-api';
-import { AceEditorProps } from 'react-ace';
-import FieldTemplate from '../FieldTemplate';
-import { generateId, generateDescriptionId, generateErrorId } from '../../Message/generateId';
 
 import { I18N_DOMAIN_FORMS } from '../../../constants';
+import { generateId, generateDescriptionId, generateErrorId } from '../../Message/generateId';
+import FieldTemplate from '../FieldTemplate';
 import CodeSkeleton from './CodeSkeleton.component';
 
+// Define ace namespace to avoid compiler error
+// And use it during react-ace lazy load without importing it (that will break lazy loading)
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const ace: any;
+
 const ReactAce = lazy(() =>
-	assetsApi.getUMD('react-ace').then((mod: any) => assetsApi.toDefaultModule(mod.default)),
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	assetsApi.getUMD('react-ace').then((mod: any) => {
+		const extUrl = assetsApi.getURL('/src-min-noconflict/ext-language_tools.js', 'ace-builds');
+		ace.config.set('basePath', extUrl.replace('ext-language_tools.js', ''));
+		assetsApi.addScript({ src: extUrl });
+		// wait for ext-language_tools.js to be loaded before return the ace module
+		return new Promise(resolve => {
+			const cancel = setInterval(() => {
+				if (ace.require('ace/ext/language_tools')) {
+					clearInterval(cancel);
+					resolve(assetsApi.toDefaultModule(mod.default));
+				}
+			}, 100);
+		});
+	}),
 );
 
 const DEFAULT_SET_OPTIONS = {
@@ -32,7 +42,7 @@ interface CodeSchema {
 	autoFocus: boolean;
 	description: string;
 	disabled: boolean;
-	options: AceEditorProps & { language?: string };
+	options: IAceEditorProps & { language?: string };
 	readOnly: boolean;
 	required: boolean;
 	title: string;
@@ -68,7 +78,6 @@ export default function Code({
 	const descriptionId = generateDescriptionId(id);
 	const errorId = generateErrorId(id);
 	const instructionsId = generateId(id, 'instructions');
-	const containerRef = useRef<any>(null);
 	const [editor, setEditor] = useState<any>(null);
 
 	useEffect(() => {
@@ -79,22 +88,6 @@ export default function Code({
 		}
 	}, [editor, instructionsId, descriptionId, errorId, id]);
 
-	function onKeyDown(event: KeyboardEvent) {
-		if (isEventKey(event.nativeEvent, codes.enter)) {
-			const now = Date.now();
-
-			if (containerRef.current.lastEsc && containerRef.current.lastEsc - now < 1000) {
-				containerRef.current.lastEsc = null;
-				containerRef.current.focus();
-				editor.textInput.getElement().setAttribute('tabindex', -1);
-			} else {
-				containerRef.current.lastEsc = now;
-			}
-		} else {
-			containerRef.current.lastEsc = null;
-		}
-	}
-
 	function onBlur() {
 		editor.textInput.getElement().removeAttribute('tabindex');
 	}
@@ -115,8 +108,6 @@ export default function Code({
 			<div // eslint-disable-line jsx-a11y/no-static-element-interactions
 				id={id && `${id}-editor-container`}
 				onBlur={onBlur}
-				onKeyDown={onKeyDown}
-				ref={containerRef}
 				tabIndex={-1}
 			>
 				<div id={instructionsId} className="sr-only">
@@ -133,7 +124,7 @@ export default function Code({
 						name={`${id}_wrapper`}
 						mode={options?.language}
 						onBlur={(event: Event) => onFinish(event, { schema })}
-						onLoad={(ace: any) => setEditor(ace)}
+						onLoad={(component: unknown) => setEditor(component)}
 						onChange={(newValue: string | number, event: Event) =>
 							onChange(event, { schema: schema, value: newValue })
 						}

diff --git a/packages/forms/stories/json/fields/core-code.json b/packages/forms/stories/json/fields/core-code.json
@@ -18,6 +18,7 @@
       "title": "Code with gutter and style",
       "options": {
         "showGutter": true,
+        "language": "sql",
         "style": {
           "border": 0,
           "font": "400 1.4rem/140% 'Inconsolata', monospace",

diff --git a/packages/forms/webpack.ace.config.js b/packages/forms/webpack.ace.config.js
diff --git a/packages/playground/webpack.config.dev.js b/packages/playground/webpack.config.dev.js
@@ -1,7 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
 const resolve = require('@talend/dynamic-cdn-webpack-plugin/src/resolve-pkg');
-const buildFormUtils = require('@talend/react-forms/build-utils');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const mockBackend = require('./mockBackend/server');
@@ -49,7 +48,7 @@ const patterns = PKGS.map(pkg => ({
 	from: path.resolve(getPath(pkg), 'dist'),
 	to: `${to(pkg)}/`,
 	info: { minimized: true },
-})).concat(buildFormUtils.getWebpackCopyConfig());
+}));
 
 const webpackConfig = {
 	plugins: [

diff --git a/tools/scripts-config-storybook-lib/.eslintignore b/tools/scripts-config-storybook-lib/.eslintignore
@@ -0,0 +1,2 @@
+.storybook-templates/main.js
+
diff --git a/yarn.lock b/yarn.lock
@@ -1233,14 +1233,6 @@
     "@babel/helper-create-regexp-features-plugin" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/polyfill@^7.4.4":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.12.1.tgz#1f2d6371d1261bbd961f3c5d5909150e12d0bd96"
-  integrity sha512-X0pi0V6gxLi6lFZpGmeNa4zxtwEmCs42isWLNjZZDE0Y8yVfgu0T2OAHlzBbdYlqbW/YXVvoBHpATEM+goCj8g==
-  dependencies:
-    core-js "^2.6.5"
-    regenerator-runtime "^0.13.4"
-
 "@babel/preset-env@^7.12.1", "@babel/preset-env@^7.12.11", "@babel/preset-env@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.22.5.tgz#3da66078b181f3d62512c51cf7014392c511504e"
@@ -5131,6 +5123,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
+ace-builds@^1.10.1, ace-builds@^1.4.14:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.10.1.tgz#612b78fabb0f2b6bce2d13ef9e44565d1fe01c6b"
+  integrity sha512-w8Xj6lZUtOYAquVYvdpZhb0GxXrZ+qpVfgj5LP2FwUbXE8fPrCmfu86FjwOiSphx/8PMbXXVldFLD2+RIXayyA==
+
 acorn-class-fields@^0.3.7:
   version "0.3.7"
   resolved "https://registry.yarnpkg.com/acorn-class-fields/-/acorn-class-fields-0.3.7.tgz#a35122f3cc6ad2bb33b1857e79215677fcfdd720"
@@ -6205,11 +6202,6 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-brace@^0.11.1:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
-  integrity sha512-Fc8Ne62jJlKHiG/ajlonC4Sd66Pq68fFwK4ihJGNZpGqboc324SQk+lRvMzpPRuJOmfrJefdG8/7JdWX4bzJ2Q==
-
 braces@^2.3.1:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
@@ -7193,7 +7185,7 @@ core-js-pure@^3.23.3:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.31.0.tgz#052fd9e82fbaaf86457f5db1fadcd06f15966ff2"
   integrity sha512-/AnE9Y4OsJZicCzIe97JP5XoPKQJfTuEG43aEVLFJGOJpyqELod+pE6LEl63DfG1Mp8wX97LDaDpy1GmLEUxlg==
 
-core-js@^2.4.0, core-js@^2.6.5:
+core-js@^2.4.0:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
@@ -8280,7 +8272,7 @@ didyoumean@^1.2.1:
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
-diff-match-patch@^1.0.4:
+diff-match-patch@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
   integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==
@@ -15509,14 +15501,13 @@ react-a11y@^0.3.4:
   dependencies:
     object.assign "^4.0.3"
 
-react-ace@^6.6.0:
-  version "6.6.0"
-  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-6.6.0.tgz#a79457ef03c3b1f8d4fc598a003b1d6ad464f1a0"
-  integrity sha512-Jehhp8bxa8kqiXk07Jzy+uD5qZMBwo43O+raniGHjdX7Qk93xFkKaAz8LxtUVZPJGlRnV5ODMNj0qHwDSN+PBw==
+react-ace@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-10.1.0.tgz#d348eac2b16475231779070b6cd16768deed565f"
+  integrity sha512-VkvUjZNhdYTuKOKQpMIZi7uzZZVgzCjM7cLYu6F64V0mejY8a2XTyPUIMszC6A4trbeMIHbK5fYFcT/wkP/8VA==
   dependencies:
-    "@babel/polyfill" "^7.4.4"
-    brace "^0.11.1"
-    diff-match-patch "^1.0.4"
+    ace-builds "^1.4.14"
+    diff-match-patch "^1.0.5"
     lodash.get "^4.4.2"
     lodash.isequal "^4.5.0"
     prop-types "^15.7.2"
@@ -16208,7 +16199,7 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
+regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.7:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==