[DRAFT] Many changes made to in order to function with React 18.3.1

.gitignore

@@ -9,3 +9,4 @@ npm-debug.log*
 .DS_Store
 yarn-error.log
 .envrc
+.yarn/*

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

demo/src/main.tsx

@@ -1,4 +1,5 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { App } from './index'
+import React from 'react'
 
-render(<App />, document.getElementById('root'))
+createRoot(document.getElementById('root')!).render(<App />)

package.json

@@ -3,6 +3,7 @@
   "version": "3.6.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
+  "type": "module",
   "description": "A React component that displays console logs from the current page, an iframe or transported across a server",
   "scripts": {
     "prepack": "yarn build",
@@ -15,33 +16,36 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.10",
-    "@emotion/styled": "^10.0.12",
-    "emotion-theming": "^10.0.10",
-    "linkifyjs": "^2.1.6",
-    "react-inline-center": "1.0.1",
-    "react-inspector": "^5.1.0"
+    "@emotion/core": "^11.0.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "emotion-theming": "^11.0.0",
+    "linkify-html": "^4.1.3",
+    "linkify-react": "^4.1.3",
+    "linkifyjs": "^4.1.3",
+    "react-inline-center": "1.0.3",
+    "react-inspector": "^6.0.2"
   },
   "devDependencies": {
-    "@types/enzyme": "^3.1.9",
-    "@types/jest": "^22.2.3",
-    "@types/linkifyjs": "2.1.3",
-    "@types/react": "^16.9.50",
-    "@types/react-dom": "^16.9.8",
-    "@vitejs/plugin-react": "^4.2.1",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "husky": "^0.14.3",
-    "immutability-helper": "^2.6.6",
-    "jest": "^22.4.3",
-    "lodash": "^4.17.5",
-    "prettier": "^2.1.2",
-    "pretty-quick": "^1.6.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "ts-jest": "^22.4.2",
-    "typescript": "^5.4.3",
-    "vite": "^5.2.7"
+    "@types/enzyme": "^3.10.18",
+    "@types/jest": "^29.5.13",
+    "@types/linkifyjs": "2.1.7",
+    "@types/react": "^18.3.6",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.8",
+    "husky": "^9.1.6",
+    "immutability-helper": "^3.1.1",
+    "jest": "^29.7.0",
+    "lodash": "^4.17.21",
+    "prettier": "^3.3.3",
+    "pretty-quick": "^4.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.6"
   },
   "jest": {
     "setupTestFrameworkScriptFile": "./scripts/test.js",

src/Component/Message.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { MessageProps, Theme } from '../definitions/Component'
-import { ThemeProvider } from 'emotion-theming'
+import { ThemeProvider } from '@emotion/react'
 import InlineCenter from 'react-inline-center'
 
 import {
@@ -33,19 +33,29 @@ class ConsoleMessage extends React.Component<MessageProps, any> {
     const { log } = this.props
     return (
       <ThemeProvider theme={this.theme}>
-        <Message data-method={log.method}>
+        <Message data-method={log.method} theme={undefined} method={''}>
           <IconContainer>
             {/* Align icon to adjacent text, and let the icon can be different size than the text */}
             <InlineCenter>
               {log.amount > 1 ? (
-                <AmountIcon>{log.amount}</AmountIcon>
+                <AmountIcon theme={undefined} method={''}>
+                  {log.amount}
+                </AmountIcon>
               ) : (
-                <Icon />
+                <Icon theme={undefined} method={''} />
               )}
             </InlineCenter>
           </IconContainer>
-          {log.timestamp ? <Timestamp>{log.timestamp}</Timestamp> : <span />}
-          <Content>{this.getNode()}</Content>
+          {log.timestamp ? (
+            <Timestamp theme={undefined} method={''}>
+              {log.timestamp}
+            </Timestamp>
+          ) : (
+            <span />
+          )}
+          <Content theme={undefined} method={''}>
+            {this.getNode()}
+          </Content>
         </Message>
       </ThemeProvider>
     )

src/Component/devtools-parser/index.ts

@@ -1,4 +1,4 @@
-import Linkify from 'linkifyjs/html'
+import linkifyHtml from 'linkify-html'
 import formatMessageString from './format-message'
 
 /**
@@ -10,7 +10,9 @@ function formatMessage(args: any[]): string {
 
   formatMessageString(args[0], args.slice(1), formattedResult)
 
-  return Linkify(formattedResult.outerHTML.replace(/(?:\r\n|\r|\n)/g, '<br />'))
+  return linkifyHtml(
+    formattedResult.outerHTML.replace(/(?:\r\n|\r|\n)/g, '<br />'),
+  )
 }
 
 export default formatMessage

src/Component/elements.tsx

@@ -5,10 +5,20 @@ import styled from './theme'
  * @param style The style
  * @param type The method
  */
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  method: string
+  theme: {
+    styles: {
+      [name: string]: string
+    }
+  }
+}
+
 const Themed = (
   style: string,
   method: string,
-  styles: { [name: string]: string }
+  styles: { [name: string]: string },
 ) =>
   styles[`LOG_${method.toUpperCase()}_${style.toUpperCase()}`] ||
   styles[`LOG_${style.toUpperCase()}`]
@@ -24,27 +34,30 @@ export const Root = styled('div')({
 /**
  * console-message
  */
-export const Message = styled('div')(({ theme: { styles, method } }) => ({
-  position: 'relative',
-  display: 'flex',
-  color: Themed('color', method, styles),
-  backgroundColor: Themed('background', method, styles),
-  borderTop: `1px solid ${Themed('border', method, styles)}`,
-  borderBottom: `1px solid ${Themed('border', method, styles)}`,
-  marginTop: -1,
-  marginBottom: +/^warn|error$/.test(method),
-  padding: styles.PADDING,
-  boxSizing: 'border-box',
-  '& *': {
-    boxSizing: 'border-box',
-    fontFamily: styles.BASE_FONT_FAMILY,
-    whiteSpace: 'pre-wrap',
-    fontSize: styles.BASE_FONT_SIZE,
-  },
-  '& a': {
-    color: styles.LOG_LINK_COLOR,
-  },
-}))
+export const Message = styled.div<Props>`
+  position: relative;
+  display: flex;
+  color: ${(props) => Themed('color', props.method, props.theme.styles)};
+  background-color: ${(props) =>
+    Themed('background', props.method, props.theme.styles)};
+  border-top: ${(props) =>
+    `1px solid ${Themed('border', props.method, props.theme.styles)}`};
+  border-bottom: ${(props) =>
+    `1px solid ${Themed('border', props.method, props.theme.styles)}`};
+  margin-top: -1;
+  margin-bottom: +/ ^warn|error$/.test(props.method);
+  padding: ${(props) => props.theme.styles.PADDING};
+  box-sizing: border-box;
+  & * {
+    box-sizing: border-box;
+    font-family: ${(props) => props.theme.styles.BASE_FONT_FAMILY};
+    white-space: pre-wrap;
+    font-size: ${(props) => props.theme.styles.BASE_FONT_SIZE};
+  }
+  & a {
+    color: ${(props) => props.theme.styles.LOG_LINK_COLOR};
+  }
+`
 
 /**
  * Icon container
@@ -56,48 +69,82 @@ export const IconContainer = styled('div')(() => ({
 /**
  * message-icon
  */
-export const Icon = styled('div')(({ theme: { styles, method } }) => ({
-  width: styles.LOG_ICON_WIDTH,
-  height: styles.LOG_ICON_HEIGHT,
-  backgroundImage: Themed('icon', method, styles),
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: styles.LOG_ICON_BACKGROUND_SIZE,
-  backgroundPosition: 'center',
-}))
+export const Icon = styled.div<Props>`
+  width: ${(props) => props.theme.styles.LOG_ICON_WIDTH};
+  height: ${(props) => props.theme.styles.LOG_ICON_HEIGHT};
+  background-image: ${(props) =>
+    Themed('icon', props.method, props.theme.styles)};
+  background-repeat: no-repeat;
+  background-size: ${(props) => props.theme.styles.LOG_ICON_BACKGROUND_SIZE};
+  background-position: center;
+`
+// export const Icon = styled('div')(({ theme: { styles, method } }) => ({
+//   width: styles.LOG_ICON_WIDTH,
+//   height: styles.LOG_ICON_HEIGHT,
+//   backgroundImage: Themed('icon', method, styles),
+//   backgroundRepeat: 'no-repeat',
+//   backgroundSize: styles.LOG_ICON_BACKGROUND_SIZE,
+//   backgroundPosition: 'center',
+// }))
 
 /**
  * message-amount
  */
-export const AmountIcon = styled('div')(({ theme: { styles, method } }) => ({
-  // make it a circle if the amount is one digit
-  minWidth: `${16 / 12}em`,
-  height: `${16 / 12}em`,
-  margin: '1px 0',
-  whiteSpace: 'nowrap',
-  fontSize: `${10 / 12}em!important`,
-  padding: '0px 3px',
-  background: Themed('amount_background', method, styles),
-  color: Themed('amount_color', method, styles),
-  borderRadius: '9999px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-}))
+export const AmountIcon = styled.div<Props>`
+  min-width: ${(props) => props.theme.styles.LOG_AMOUNT_MIN_WIDTH};
+  height: ${(props) => props.theme.styles.LOG_AMOUNT_HEIGHT};
+  margin: ${(props) => props.theme.styles.LOG_AMOUNT_MARGIN};
+  white-space: nowrap;
+  font-size: ${(props) => props.theme.styles.LOG_AMOUNT_FONT_SIZE};
+  padding: ${(props) => props.theme.styles.LOG_AMOUNT_PADDING};
+  background: ${(props) =>
+    Themed('amount_background', props.method, props.theme.styles)};
+  color: ${(props) => Themed('amount_color', props.method, props.theme.styles)};
+  border-radius: ${(props) => props.theme.styles.LOG_AMOUNT_BORDER_RADIUS};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+// export const AmountIcon = styled('div')(({ theme: { styles, method } }) => ({
+//   // make it a circle if the amount is one digit
+//   minWidth: `${16 / 12}em`,
+//   height: `${16 / 12}em`,
+//   margin: '1px 0',
+//   whiteSpace: 'nowrap',
+//   fontSize: `${10 / 12}em!important`,
+//   padding: '0px 3px',
+//   background: Themed('amount_background', method, styles),
+//   color: Themed('amount_color', method, styles),
+//   borderRadius: '9999px',
+//   display: 'flex',
+//   alignItems: 'center',
+//   justifyContent: 'center',
+// }))
 
 /**
  * timestamp
  */
-export const Timestamp = styled('div')(({ theme: { styles, method } }) => ({
-  marginLeft: 5,
-  color: 'dimgray',
-}))
+export const Timestamp = styled.div<Props>`
+  margin-left: 5;
+  color: dimgray;
+`
+// export const Timestamp = styled('div')(({ theme: { styles, method } }) => ({
+//   marginLeft: 5,
+//   color: 'dimgray',
+// }))
 
 /**
  * console-content
  */
-export const Content = styled('div')(({ theme: { styles } }) => ({
-  clear: 'right',
-  position: 'relative',
-  marginLeft: 15,
-  flex: 1,
-}))
+export const Content = styled.div<Props>`
+  clear: right;
+  position: relative;
+  margin-left: 15;
+  flex: 1;
+`
+// export const Content = styled('div')(({ theme: { styles } }) => ({
+//   clear: 'right',
+//   position: 'relative',
+//   marginLeft: 15,
+//   flex: 1,
+// }))

src/Component/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ThemeProvider } from 'emotion-theming'
+import { ThemeProvider } from '@emotion/react'
 import { Props } from '../definitions/Component'
 import Styles from './theme/default'
 

src/Component/message-parsers/Error.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
-import Linkify from 'linkifyjs/react'
+import Linkify from 'linkify-react'
 
 function splitMessage(message: string): string {
   const breakIndex = message.indexOf('\n')
   // consider that there can be line without a break
   if (breakIndex === -1) {
     return message
   }
-  return message.substr(0, breakIndex)
+  return message.substring(0, breakIndex)
 }
 
 function ErrorPanel({ error }: { error: string }) {

src/Component/message-parsers/Object.tsx

@@ -1,18 +1,17 @@
 import * as React from 'react'
-import { Theme } from '../../definitions/Component'
-import { withTheme } from 'emotion-theming'
+import { Theme, Message } from '../../definitions/Component'
+import { withTheme } from '@emotion/react'
 import { Root } from '../react-inspector/elements'
 
-import Linkify from 'linkifyjs/react'
-import type { Options } from 'linkifyjs'
-import { Message } from '../../definitions/Component'
+import Linkify from 'linkify-react'
+import type { Options, Opts } from 'linkifyjs'
 import Inspector from '../react-inspector'
 
 interface Props {
   log: Message
   quoted: boolean
   theme?: Theme
-  linkifyOptions?: Options
+  linkifyOptions?: Options & Opts
 }
 
 class ObjectTree extends React.PureComponent<Props, any> {