fix!: upgrade to refractor 5.0.0

BREAKING CHANGE: Module now uses refractor v5 under the hood

Author: RitaDias

demo/demo.tsx

@@ -1,13 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import javascript from 'refractor/lang/javascript.js'
-import markup from 'refractor/lang/markup.js'
-import css from 'refractor/lang/css.js'
-import clike from 'refractor/lang/clike.js'
-import jsx from 'refractor/lang/jsx.js'
-
 import {Refractor, registerLanguage} from '../src/index.js'
+import javascript from 'refractor/javascript'
+import markup from 'refractor/markup'
+import css from 'refractor/css'
+import clike from 'refractor/clike'
+import jsx from 'refractor/jsx'
 
 registerLanguage(javascript)
 registerLanguage(markup)

package-lock.json

@@ -51,7 +51,7 @@
   },
   "homepage": "https://github.com/rexxars/react-refractor#readme",
   "dependencies": {
-    "refractor": "^4.8.1",
+    "refractor": "^5.0.0",
     "unist-util-filter": "^5.0.1",
     "unist-util-visit-parents": "^6.0.1"
   },

package.json

@@ -1,6 +1,7 @@
 import type {HTMLAttributes} from 'react'
 import type {Syntax} from 'refractor'
-import {refractor as fract} from 'refractor/lib/core.js'
+import {refractor as fract} from 'refractor/core'
+import {Element as RefractorElement, Text} from 'hast'
 import {addMarkers} from './addMarkers.js'
 import {mapWithDepth} from './mapChildren.js'
 import type {RefractorProps} from './types.js'
@@ -31,7 +32,10 @@ export function Refractor(props: RefractorProps) {
     ast = addMarkers(ast, {markers: props.markers})
   }
 
-  const value = ast.children.length === 0 ? props.value : ast.children.map(mapWithDepth(0))
+  const value =
+    ast.children.length === 0
+      ? props.value
+      : (ast.children as (RefractorElement | Text)[]).map(mapWithDepth(0))
 
   const code = <code {...codeProps}>{value}</code>
   return props.inline ? code : <pre className={preClass}>{code}</pre>

src/Refractor.tsx

@@ -1,4 +1,4 @@
-import type {RefractorElement, RefractorRoot, Text} from 'refractor'
+import type {Element as RefractorElement, Root as RefractorRoot, Text} from 'hast'
 import {filter} from 'unist-util-filter'
 import {visitParents} from 'unist-util-visit-parents'
 
@@ -17,7 +17,7 @@ export function addMarkers(
     .map((marker) => (typeof marker === 'number' ? {line: marker} : marker))
     .sort((nodeA, nodeB) => nodeA.line - nodeB.line)
 
-  const numbered = lineNumberify(ast.children).nodes
+  const numbered = lineNumberify(ast.children as (RefractorElement | Text)[]).nodes
   if (markers.length === 0 || numbered.length === 0) {
     return {...ast, children: numbered}
   }
@@ -58,7 +58,7 @@ function lineNumberify(ast: (RefractorElement | Text)[], context = {lineNumber:
       }
 
       if (node.children) {
-        const processed = lineNumberify(node.children, context)
+        const processed = lineNumberify(node.children as (RefractorElement | Text)[], context)
         const firstChild = processed.nodes[0]
         const lastChild = processed.nodes[processed.nodes.length - 1]
         setLineInfo(
@@ -141,21 +141,24 @@ function unwrapLine(markerLine: number, nodes: (RefractorElement | Text)[]) {
     }
 
     // These nodes are on previous lines, but nested within the same structure
-    if (getLineStart(node) < markerLine) {
-      addCopy(headMap, node, ancestors)
+    if (getLineStart(node as RefractorElement | Text) < markerLine) {
+      addCopy(headMap, node as Text, ancestors)
       return
     }
 
     // These nodes are on the target line
-    if (getLineStart(node) === markerLine) {
-      addCopy(lineMap, node, ancestors)
+    if (getLineStart(node as RefractorElement | Text) === markerLine) {
+      addCopy(lineMap, node as Text, ancestors)
       return
     }
 
     // If we have shared ancestors with some of the cloned elements,
     // create another tree of the remaining nodes
-    if (getLineEnd(node) > markerLine && cloned.some((clone) => ancestors.includes(clone as any))) {
-      addCopy(tailMap, node, ancestors)
+    if (
+      getLineEnd(node as RefractorElement | Text) > markerLine &&
+      cloned.some((clone) => ancestors.includes(clone as any))
+    ) {
+      addCopy(tailMap, node as Text, ancestors)
     }
   })
 
@@ -222,13 +225,14 @@ function wrapLines(
   markers: Marker[],
   options: {markers: (Marker | number)[]},
 ): RefractorRoot {
-  const ast = markers.reduce((acc, marker) => unwrapLine(marker.line, acc), treeNodes)
-
-  // Container for the new AST
+  const ast = markers.reduce<(RefractorElement | Text)[]>(
+    (acc, marker) => unwrapLine(marker.line, acc) as (RefractorElement | Text)[],
+    treeNodes.map((node) => node as RefractorElement | Text),
+  )
   const wrapped: (RefractorElement | Text)[] = []
 
   // Note: Markers are already sorted by line number (ascending)
-  let astIndex = 0
+  let astIndex: number = 0
   for (let m = 0; m < markers.length; m++) {
     const marker = markers[m]
 

src/addMarkers.ts

@@ -1,5 +1,5 @@
 import {createElement, type JSXElementConstructor, type ReactElement} from 'react'
-import type {RefractorElement, Text} from 'refractor'
+import {Element as RefractorElement, Text} from 'hast'
 import type {ReactRefractorMarkerDataWithComponent} from './types.js'
 
 /**
@@ -29,7 +29,8 @@ function mapChild(child: RefractorElement | Text, i: number, depth: number): str
   }
 
   const key = `fract-${depth}-${i}`
-  const children = child.children && child.children.map(mapWithDepth(depth + 1))
+  const children =
+    child.children && (child.children as (RefractorElement | Text)[]).map(mapWithDepth(depth + 1))
 
   if (!isReactRefractorMarkerDataWithComponent(child.data)) {
     return createElement(child.tagName, {key, className}, children)

src/mapChildren.ts

@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom/server'
-import haml from 'refractor/lang/haml'
-import js from 'refractor/lang/javascript'
+import haml from 'refractor/haml'
+import js from 'refractor/javascript'
 import {beforeAll, expect, test} from 'vitest'
 
 import {Refractor, RefractorProps, registerLanguage} from '../src'

test/Refractor.test.ts

@@ -1,4 +1,4 @@
-import type {RefractorRoot} from 'refractor'
+import {Root as RefractorRoot} from 'hast'
 import {expect, test} from 'vitest'
 import {addMarkers} from '../src/addMarkers'
 import {astFixtures} from './fixtures/ast'

test/addMarkers.test.ts

@@ -1,4 +1,4 @@
-import type {RefractorElement, Text} from 'refractor'
+import type {Element as RefractorElement, Text} from 'hast'
 
 export const astFixtures: Array<RefractorElement | Text> = [
   {