Upgrade refractor dependency to v5.0.0

packages/eui/changelogs/upcoming/8618.md

@@ -0,0 +1,3 @@
+**Dependency updates**
+
+- Updated `refractor` to v5.0.0

packages/eui/package.json

@@ -58,7 +58,6 @@
     "@types/lodash": "^4.14.202",
     "@types/numeral": "^2.0.5",
     "@types/react-window": "^1.8.8",
-    "@types/refractor": "^3.4.0",
     "chroma-js": "^2.4.2",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
@@ -72,7 +71,7 @@
     "react-remove-scroll-bar": "^2.3.4",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
-    "refractor": "^3.6.0",
+    "refractor": "5.0.0",
     "rehype-raw": "^5.1.0",
     "rehype-react": "^6.2.1",
     "rehype-stringify": "^8.0.0",

packages/eui/scripts/jest/.babelrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: '../../.babelrc.js',
+  extends: '<rootDir>/../../.babelrc.js',
   presets: [
     [
       '@babel/env',

packages/eui/scripts/jest/config.js

@@ -1,6 +1,19 @@
 const jestConfig = require('jest-config');
+const babelConfig = require('../../scripts/jest/.babelrc.js');
+
 const getCacheDirectory = () => jestConfig.defaults.cacheDirectory;
 
+// dependencies that provide ESM only,
+// we'll need to manually transform them to commonJS for Jest
+const esModules = [
+  'refractor',
+  'hastscript',
+  'hast-util-parse-selector',
+  'parse-entities',
+  'character-reference-invalid',
+  'decode-named-character-reference',
+].join('|');
+
 // Set REACT_VERSION env variable to latest if empty or invalid
 if (!['16', '17', '18'].includes(process.env.REACT_VERSION)) {
   process.env.REACT_VERSION = '18';
@@ -62,8 +75,10 @@ const config = {
   testEnvironment: 'jsdom',
   testMatch: ['**/*.test.js', '**/*.test.ts', '**/*.test.tsx'],
   transform: {
+    [`^.+\\/(${esModules})\\/.*\\.js$`]: ['babel-jest', babelConfig],
     '^.+\\.(js|tsx?)$': 'babel-jest',
   },
+  transformIgnorePatterns: [`<rootDir>/node_modules/(?!${esModules})`],
   snapshotSerializers: [
     '<rootDir>/node_modules/enzyme-to-json/serializer',
     '<rootDir>/scripts/jest/setup/emotion',

packages/eui/src/components/code/code.tsx

@@ -7,13 +7,14 @@
  */
 
 import React, { useMemo, FunctionComponent } from 'react';
-import { highlight, RefractorNode } from 'refractor';
+import { refractor } from 'refractor';
 import classNames from 'classnames';
 import {
   EuiCodeSharedProps,
   DEFAULT_LANGUAGE,
   checkSupportedLanguage,
   getHtmlContent,
+  type RefractorBaseNode,
 } from './utils';
 import { useEuiMemoizedStyles } from '../../services';
 import { euiCodeStyles } from './code.styles';
@@ -32,11 +33,12 @@ export const EuiCode: FunctionComponent<EuiCodeProps> = ({
     [_language]
   );
 
-  const data: RefractorNode[] = useMemo(() => {
+  const data: RefractorBaseNode[] = useMemo(() => {
     if (typeof children !== 'string') {
       return [];
     }
-    return highlight(children, language);
+    return refractor.highlight(children, language)
+      .children as RefractorBaseNode[];
   }, [children, language]);
 
   const content = useMemo(

packages/eui/src/components/code/code_block.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { FunctionComponent, useMemo } from 'react';
-import { RefractorNode } from 'refractor';
 import classNames from 'classnames';
 
 import {
@@ -23,6 +22,7 @@ import {
   checkSupportedLanguage,
   getHtmlContent,
   highlightByLine,
+  type RefractorNode,
 } from './utils';
 import { LineAnnotationMap } from './code_block_annotations';
 import { useOverflow } from './code_block_overflow';

packages/eui/src/components/code/code_block_virtualized.tsx

@@ -8,14 +8,13 @@
 
 import React, { HTMLAttributes, forwardRef, useMemo } from 'react';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';
-import { RefractorNode } from 'refractor';
 import { logicalStyles } from '../../global_styling';
 import {
   EuiAutoSizer,
   EuiAutoSize,
   EuiAutoSizeHorizontal,
 } from '../auto_sizer';
-import { nodeToHtml } from './utils';
+import { nodeToHtml, type RefractorNode } from './utils';
 
 export const EuiCodeBlockVirtualized = ({
   data,

packages/eui/src/components/code/types.d.ts

@@ -0,0 +1,11 @@
+declare module 'refractor' {
+  export * from 'refractor/lib/common';
+}
+
+declare module 'refractor/all' {
+  export * from 'refractor/lib/all';
+}
+
+declare module 'refractor/core' {
+  export * from 'refractor/lib/core';
+}

packages/eui/src/components/code/utils.test.tsx

@@ -17,6 +17,7 @@ import {
   nodeToHtml,
   highlightByLine,
   parseLineRanges,
+  AnnotationElement,
 } from './utils';
 
 describe('shared utils', () => {
@@ -83,7 +84,7 @@ describe('shared utils', () => {
             },
           ],
           properties: { className: ['hello-world'] },
-        },
+        } as unknown as AnnotationElement,
         0,
         []
       );

packages/eui/src/components/code/utils.tsx

@@ -12,14 +12,11 @@ import React, {
   ReactNode,
   HTMLAttributes,
 } from 'react';
-import {
-  listLanguages,
-  highlight,
-  AST,
-  RefractorNode,
-  register,
-  type RefractorSyntax,
-} from 'refractor';
+// uses refractor/all to ensure all languages are supported OOTB
+import { refractor } from 'refractor/all';
+import { type Syntax } from 'refractor';
+import type { Element, Text, Comment } from 'hast';
+
 import { cx } from '@emotion/css';
 import { esql as esqlLanguage } from '@elastic/prismjs-esql';
 
@@ -32,7 +29,13 @@ import {
 } from './code_block_annotations';
 import { euiCodeBlockLineStyles } from './code_block_line.styles';
 
-register(esqlLanguage as RefractorSyntax);
+export type RefractorBaseNode = Element | Text;
+export type RefractorNode = RefractorBaseNode | Comment;
+export type AnnotationElement = Element & { annotation: string };
+
+const { listLanguages, highlight, register } = refractor;
+
+register(esqlLanguage as Syntax);
 
 /**
  * Utils shared between EuiCode and EuiCodeBlock
@@ -81,9 +84,12 @@ export const getHtmlContent = (
   return data.map(nodeToHtml);
 };
 
-export const isAstElement = (node: RefractorNode): node is AST.Element =>
+export const isAstElement = (node: RefractorNode): node is Element =>
   node.hasOwnProperty('type') && node.type === 'element';
 
+export const isAstTextElement = (node: RefractorNode): node is Text =>
+  node.hasOwnProperty('type') && node.type === 'text';
+
 export const nodeToHtml = (
   node: RefractorNode,
   idx: number,
@@ -100,7 +106,11 @@ export const nodeToHtml = (
       {
         ...properties,
         key,
-        className: cx(properties.className),
+        className: Array.isArray(properties?.className)
+          ? cx(properties?.className.join(' '))
+          : typeof properties?.className === 'string'
+          ? cx(properties?.className)
+          : undefined,
       },
       children &&
         children.map((el, i) =>
@@ -168,7 +178,7 @@ const addLineData = (
 ): ExtendedRefractorNode[] => {
   return nodes.reduce<ExtendedRefractorNode[]>((result, node) => {
     const lineStart = data.lineNumber;
-    if (node.type === 'text') {
+    if (isAstTextElement(node) && node.type === 'text') {
       if (!node.value.match(NEW_LINE_REGEX)) {
         node.lineStart = lineStart;
         node.lineEnd = lineStart;
@@ -188,7 +198,7 @@ const addLineData = (
       return result;
     }
 
-    if (node.children && node.children.length) {
+    if (isAstElement(node) && node.children && node.children.length) {
       const children = addLineData(node.children, data);
       const first = children[0];
       const last = children[children.length - 1];
@@ -249,7 +259,7 @@ function wrapLines(
         styles.lineText.euiCodeBlock__lineText,
         highlights.includes(lineNumber) && styles.lineText.isHighlighted,
       ]);
-      const lineTextElement: RefractorNode = {
+      const lineTextElement: Element = {
         type: 'element',
         tagName: 'span',
         properties: {
@@ -262,10 +272,11 @@ function wrapLines(
       const lineNumberWrapperStyles = cx(
         styles.lineNumber.euiCodeBlock__lineNumberWrapper
       );
-      const lineNumberWrapperElement: RefractorNode = {
+      const lineNumberWrapperElement: Element = {
         type: 'element',
         tagName: 'span',
         properties: {
+          // @ts-expect-error - expects string style but we're relying on object notation
           style: { inlineSize: width },
           className: [
             'euiCodeBlock__lineNumberWrapper',
@@ -277,7 +288,7 @@ function wrapLines(
 
       // Line number element
       const lineNumberStyles = cx(styles.lineNumber.euiCodeBlock__lineNumber);
-      const lineNumberElement: RefractorNode = {
+      const lineNumberElement: Element = {
         type: 'element',
         tagName: 'span',
         properties: {
@@ -287,6 +298,7 @@ function wrapLines(
         },
         children: [],
       };
+
       lineNumberWrapperElement.children.push(lineNumberElement);
 
       // Annotation element
@@ -296,7 +308,7 @@ function wrapLines(
           type: 'annotation',
           annotation: options.annotations[lineNumber],
           lineNumber,
-        } as unknown as RefractorNode;
+        } as unknown as AnnotationElement;
         lineNumberWrapperElement.children.push(annotationElement);
       }
 
@@ -322,7 +334,10 @@ export const highlightByLine = (
   euiTheme: UseEuiTheme
 ) => {
   return wrapLines(
-    addLineData(highlight(children, language), { lineNumber: data.start }),
+    // @ts-expect-error RefractorNode
+    addLineData(highlight(children, language).children, {
+      lineNumber: data.start,
+    }),
     {
       showLineNumbers: data.show,
       highlight: data.highlight,

packages/eui/src/components/markdown_editor/plugins/remark/remark_prismjs.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import refractor from 'refractor';
+import { refractor } from 'refractor';
 import visit from 'unist-util-visit';
 import { Plugin } from 'unified';
 
@@ -23,7 +23,7 @@ const attacher: Plugin = () => {
     }
 
     node.data = data;
-    data.hChildren = refractor.highlight(node.value, language);
+    data.hChildren = refractor.highlight(node.value, language).children;
     data.hProperties = {
       ...data.hProperties,
       language,