Fix deprecated defaultProps error warning

apps/website/package.json

@@ -22,7 +22,7 @@
     "@docusaurus/preset-classic": "2.0.0-beta.759298296",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
-    "docusaurus-plugin-sass": "frilox042/docusaurus-plugin-sass#fix-css-module-identName-dev",
+    "docusaurus-plugin-sass": "^0.2.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-modal": "^3.13.1"

jest-config-base.js

@@ -4,6 +4,6 @@ module.exports = {
   testRegex: 'src/.*\\.test\\.tsx?$',
   coveragePathIgnorePatterns: ['/node_modules/', '__tests__'],
   transformIgnorePatterns: [
-    'node_modules/(?!(react-native|react-native-webview|ramda|react-native-render-html|@react-native)/)'
+    'node_modules/(?!(react-native|react-native-webview|ramda|react-native-render-html|@react-native|react-native-accessibility-engine)/)'
   ]
 };

package.json

@@ -42,10 +42,10 @@
     "svgo": "^2.3.0"
   },
   "resolutions": {
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "@mdx-js/react": "2.0.0-next.9",
-    "react-native": "0.64.2",
+    "react-native": "0.75.5",
     "react-native-webview": "11.13.0",
     "@svgr/webpack": "5.5.0",
     "@svgr/babel-preset": "5.5.0",

packages/render-html/.eslintrc.js

@@ -11,6 +11,12 @@ module.exports = {
           order: 'alphabetically'
         }
       }
+    ],
+    'react-hooks/exhaustive-deps': [
+      'warn',
+      {
+        additionalHooks: '(useMyCustomHook|useMyOtherHook)'
+      }
     ]
   }
 };

packages/render-html/jest/setupAfterEnv.ts

@@ -1,2 +1,3 @@
 import '@testing-library/jest-native';
 import '@testing-library/jest-native/extend-expect';
+import 'react-native-accessibility-engine';

packages/render-html/package.json

@@ -39,39 +39,45 @@
     "prepack:readme": "./scripts/prepack.sh"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.13.16",
-    "@babel/plugin-transform-react-jsx": "^7.13.12",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "^7.13.0",
-    "@babel/runtime": "^7.13.17",
+    "@babel/cli": "^7.20.0",
+    "@babel/core": "^7.20.0",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/plugin-transform-react-jsx": "^7.23.4",
+    "@babel/preset-react": "^7.23.0",
+    "@babel/preset-typescript": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
     "@microsoft/api-extractor": "^7.14.0",
+    "@react-native-community/eslint-config": "^3.0.3",
     "@release-it/conventional-changelog": "^2.0.1",
     "@testing-library/jest-native": "^4.0.2",
     "@testing-library/react-hooks": "^7.0.0",
     "@testing-library/react-native": "^7.2.0",
-    "@types/jest": "^26.0.23",
-    "@types/react-native": "^0.64.4",
-    "@types/react-test-renderer": "^17.0.1",
-    "babel-jest": "^27.0.2",
-    "eslint": "^7.29.0",
+    "@types/jest": "^29.2.1",
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.72.8",
+    "babel-jest": "^29.6.3",
+    "eslint": "^8.20.0",
     "htmlparser2": "^7.1.2",
-    "jest": "^27.0.4",
-    "metro-react-native-babel-preset": "^0.66.0",
-    "prettier": "^2.3.1",
-    "react": "17.0.2",
-    "react-native": "^0.64.0",
-    "react-native-accessibility-engine": "^0.4.1",
-    "react-native-builder-bob": "^0.18.1",
+    "jest": "^29.6.3",
+    "metro-react-native-babel-preset": "^0.73.10",
+    "prettier": "^2.7.1",
+    "react": "18.3.1",
+    "react-native": "0.75.5",
+    "react-native-accessibility-engine": "^3.2.0",
+    "react-native-builder-bob": "^0.30.3",
     "react-performance-testing": "^1.2.3",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.3.1",
     "release-it": "14.11.0-next.1",
-    "typescript": "4.2.2"
+    "typescript": "^5.6.3"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
+  "resolutions": {
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.72.0"
+  },
   "publishConfig": {
     "access": "public"
   },

packages/render-html/prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  bracketSpacing: false,
+  jsxBracketSameLine: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  proseWrap: 'preserve'
+};

packages/render-html/src/TNodeRenderer.tsx

@@ -1,5 +1,9 @@
 import React, { memo, ReactElement } from 'react';
-import { TDefaultRenderer, TNodeRendererProps } from './shared-types';
+import {
+  TDefaultRenderer,
+  TDefaultRendererProps,
+  TNodeRendererProps
+} from './shared-types';
 import { useSharedProps } from './context/SharedPropsProvider';
 import {
   TText,
@@ -112,13 +116,18 @@ const TNodeRenderer = memo(function MemoizedTNodeRenderer(
       }
       break;
   }
-  const renderFn =
-    tnode.type === 'block' || tnode.type === 'document'
-      ? renderBlockContent
-      : renderTextualContent;
-  return Renderer === null
-    ? renderFn(assembledProps)
-    : React.createElement(Renderer as any, assembledProps);
+  if (Renderer !== null) {
+    return React.createElement(Renderer as any, assembledProps);
+  }
+  if (tnode.type === 'block' || tnode.type === 'document') {
+    return renderBlockContent(assembledProps as TDefaultRendererProps<TBlock>);
+  } else if (tnode.type === 'phrasing') {
+    return renderTextualContent(
+      assembledProps as TDefaultRendererProps<TPhrasing>
+    );
+  } else {
+    return renderTextualContent(assembledProps as TDefaultRendererProps<TText>);
+  }
 });
 
 export {

packages/render-html/src/__tests__/__snapshots__/component.render-html.test.tsx.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RenderHTML regarding customHTMLElementsModels prop should support changing block content model to mixed 1`] = `
-"<TDocument tagName=\\"html\\">
-  <TBlock tagName=\\"body\\">
+"<TDocument tagName=\"html\">
+  <TBlock tagName=\"body\">
     <TPhrasing anonymous>
-      <TPhrasing tagName=\\"span\\">
-        <TText tagName=\\"article\\" data=\\"\\" />
-        <TText anonymous data=\\"Text\\" />
+      <TPhrasing tagName=\"span\">
+        <TText tagName=\"article\" data=\"\" />
+        <TText anonymous data=\"Text\" />
       </TPhrasing>
     </TPhrasing>
   </TBlock>

packages/render-html/src/__tests__/component.render-html-a11y.test.tsx

@@ -5,7 +5,6 @@ import {
   TBlock
 } from '@native-html/transient-render-engine';
 import { render } from '@testing-library/react-native';
-import AccessibilityEngine from 'react-native-accessibility-engine';
 import RenderHTML from '../RenderHTML';
 import { CustomRendererProps } from '../shared-types';
 
@@ -33,7 +32,7 @@ describe('RenderHTML a11y', () => {
           const anchor = getByTestId('a');
           expect(anchor).toHaveProp('accessibilityRole', 'link');
           expect(anchor).toHaveProp('accessible', true);
-          expect(() => AccessibilityEngine.check(element)).not.toThrow();
+          expect(anchor).toBeAccessible();
         });
       }
     });
@@ -51,7 +50,6 @@ describe('RenderHTML a11y', () => {
       const anchor = getByTestId('a');
       expect(anchor).not.toHaveProp('accessibilityRole');
       expect(anchor).not.toHaveProp('accessible');
-      expect(() => AccessibilityEngine.check(element)).not.toThrow();
     });
   });
   describe('regarding headings', () => {
@@ -68,7 +66,7 @@ describe('RenderHTML a11y', () => {
         );
         const { getByTestId } = render(element);
         expect(getByTestId(header)).toHaveProp('accessibilityRole', 'header');
-        expect(() => AccessibilityEngine.check(element)).not.toThrow();
+        expect(getByTestId(header)).toBeAccessible();
       }
     });
   });
@@ -146,7 +144,7 @@ describe('RenderHTML a11y', () => {
       const { getByA11yRole } = render(element);
       const button = getByA11yRole('button');
       expect(button).toHaveProp('accessibilityRole', 'button');
-      expect(() => AccessibilityEngine.check(element)).not.toThrow();
+      expect(button).toBeAccessible();
     });
     it('should add a button role if onPress is defined for custom renderers with a textual content model', () => {
       const element = (
@@ -173,7 +171,7 @@ describe('RenderHTML a11y', () => {
       const { getByA11yRole } = render(element);
       const button = getByA11yRole('link');
       expect(button).toHaveProp('accessibilityRole', 'link');
-      expect(() => AccessibilityEngine.check(element)).not.toThrow();
+      expect(button).toBeAccessible();
     });
   });
 });

packages/render-html/src/__tests__/regression.684.default-props-warning.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import RenderHTML from '../RenderHTML';
+
+/**
+ * https://github.com/meliorence/react-native-render-html/issues/684
+ */
+describe('RenderHTML component', () => {
+  it('should not trigger defaultProps warning', () => {
+    // Mock console.warn to capture warnings
+    const originalWarn = console.warn;
+    const warnings: string[] = [];
+    console.warn = (...args) => {
+      warnings.push(args.join(' '));
+    };
+
+    // Render a component that would previously trigger the warning
+    render(
+      <RenderHTML
+        source={{ html: '<div>Test content</div>' }}
+        contentWidth={300}
+      />
+    );
+
+    // Restore console.warn
+    console.warn = originalWarn;
+
+    // Check that no defaultProps warnings were emitted
+    const defaultPropsWarnings = warnings.filter(
+      (warning) =>
+        warning.includes('defaultProps') &&
+        warning.includes('function components')
+    );
+    expect(defaultPropsWarnings).toHaveLength(0);
+  });
+});

packages/render-html/src/__tests__/utils.tsx

@@ -38,7 +38,6 @@ export function expectTranslatedInlineCSSRuleTo({
     />
   );
   const text = getByText('hello world');
-  // eslint-disable-next-line jest/no-disabled-tests
   test(StyleSheet.flatten(text.props.style));
 }
 

packages/render-html/src/elements/ListElement.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, type DimensionValue } from 'react-native';
 import React from 'react';
 import { TBlock, TNode } from '@native-html/transient-render-engine';
 import { MarkedListItem, useMarkedList } from '@jsamr/react-native-li';
@@ -49,7 +49,7 @@ function extractMarkerTextStyle(tnode: TNode) {
 
 export function getMarkerBoxStyle(
   markerWidth: number | false,
-  paddingValue: string | number | undefined
+  paddingValue: DimensionValue | undefined
 ) {
   const markerBoxWidth =
     typeof markerWidth === 'number'

packages/render-html/src/hooks/useInternalRenderer.ts

@@ -58,7 +58,9 @@ export default function useInternalRenderer<T extends TagName>(
   tagName: T,
   props: InternalRendererProps<any>
 ): T extends InternalSpecialRenderedTag
-  ? InternalRendererConfig<ReturnType<typeof specialRenderersConfig[T]['hook']>>
+  ? InternalRendererConfig<
+      ReturnType<(typeof specialRenderersConfig)[T]['hook']>
+    >
   : InternalRendererConfig<TDefaultRendererProps<any>> {
   const { TDefaultRenderer, ...rendererProps } = props;
   if (hasSpecialInternalRenderer(tagName)) {

packages/render-html/tsconfig.json

@@ -3,7 +3,9 @@
   "extends": "../../tsconfig-base.json",
   "compilerOptions": {
     "experimentalDecorators": true,
-    "emitDecoratorMetadata": true
+    "emitDecoratorMetadata": true,
+    "types": ["react", "react-native", "jest"]
   },
-  "include": ["src", "jest"]
+  "include": ["src", "jest"],
+  "exclude": ["node_modules", "lib", "**/__tests__/*"]
 }