feat: support react-native-render-html@6.0.0-alpha.25; beware of

upstream BREAKING CHANGES
native-html · May 21, 2021 · 55b2014 · 55b2014
1 parent e95d7a8
commit 55b2014
Show file tree

Hide file tree

Showing 34 changed files with 148 additions and 298 deletions.
diff --git a/example/YoutubeExample.js b/example/YoutubeExample.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import RenderHTML from 'react-native-render-html';
-import iframe from '@native-html/iframe-plugin';
+import iframe, { iframeModel } from '@native-html/iframe-plugin';
 import WebView from 'react-native-webview';
 
 const htmlConfig = {
@@ -12,6 +12,9 @@ const htmlConfig = {
       alignSelf: 'center'
     }
   },
+  customHTMLElementModels: {
+    iframe: iframeModel
+  },
   WebView
 };
 

diff --git a/example/package.json b/example/package.json
@@ -24,7 +24,7 @@
     "react-native-gesture-handler": "~1.8.0",
     "react-native-paper": "^4.7.1",
     "react-native-reanimated": "~1.13.2",
-    "react-native-render-html": "6.0.0-alpha.23",
+    "react-native-render-html": "6.0.0-alpha.25",
     "react-native-safe-area-context": "3.1.9",
     "react-native-screens": "~2.15.2",
     "react-native-web": "~0.13.18",

diff --git a/package.json b/package.json
@@ -43,8 +43,7 @@
     "react-test-renderer": "16.13.1",
     "react-native-webview": "11.0.0",
     "@release-it/conventional-changelog": "patch:@release-it/conventional-changelog@2.0.0#patches/@release-it-conventional-changelog.patch",
-    "release-it": "patch:release-it@14.3.0#patches/release-it.patch",
-    "@native-html/transient-render-engine": "4.4.1"
+    "release-it": "patch:release-it@14.3.0#patches/release-it.patch"
   },
   "author": "Jules Sam. Randolph <jules.sam.randolph@gmail.com> (https://github.com/jsamr)",
   "license": "MIT",

diff --git a/packages/heuristic-table-plugin/README.md b/packages/heuristic-table-plugin/README.md
@@ -109,20 +109,18 @@ See the documentation for this object here: [`HeuristicTablePluginConfig`](docs/
 
 ### Customizing Root renderer
 
-You can customize the renderer logic thanks to `useHtmlTableProps` hook, `tableModel` and `HTMLTable` exports:
+You can customize the renderer logic thanks to `useHtmlTableProps` hook and `HTMLTable` exports:
 
 ```jsx
 import React from 'react';
-import tableRenderers, {useHtmlTableProps, HTMLTable, tableModel} from '@native-html/heuristic-table-plugin';
+import tableRenderers, {useHtmlTableProps, HTMLTable} from '@native-html/heuristic-table-plugin';
 
 function TableRenderer(props) {
   const tableProps = useHtmlTableProps(props, /* config */);
   // Do customize the props here; wrap with your own container...
   return <HTMLTable {..tableProps} />;
 };
 
-TableRenderer.model = tableModel;
-
 const renderers = {
   ...tableRenderers,
   table: TableRenderer
@@ -163,8 +161,6 @@ function TdRenderer(props) {
   return React.createElement(cellProps.TDefaultRenderer, { ...cellProps, style });
 }
 
-TdRenderer.model = tdModel;
-
 const renderers = {
   table: TableRenderer,
   td: TdRenderer,

diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.md
@@ -32,10 +32,7 @@
 |  --- | --- |
 |  [HTMLTable](./heuristic-table-plugin.htmltable.md) | A component to render tables. |
 |  [renderers](./heuristic-table-plugin.renderers.md) | Renderers to be merged in the <code>renderers</code> prop of <code>RenderHTML</code> component. |
-|  [tableModel](./heuristic-table-plugin.tablemodel.md) |  |
 |  [TableRenderer](./heuristic-table-plugin.tablerenderer.md) | A 100% native renderer component for <code>table</code> tag. |
-|  [tdModel](./heuristic-table-plugin.tdmodel.md) |  |
 |  [TdRenderer](./heuristic-table-plugin.tdrenderer.md) | The renderer component for <code>td</code> tag. |
-|  [thModel](./heuristic-table-plugin.thmodel.md) |  |
 |  [ThRenderer](./heuristic-table-plugin.threnderer.md) | The renderer component for <code>th</code> tag. |
 
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablemodel.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tablemodel.md
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tdmodel.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.tdmodel.md
diff --git a/packages/heuristic-table-plugin/docs/heuristic-table-plugin.thmodel.md b/packages/heuristic-table-plugin/docs/heuristic-table-plugin.thmodel.md
diff --git a/packages/heuristic-table-plugin/etc/heuristic-table-plugin.api.md b/packages/heuristic-table-plugin/etc/heuristic-table-plugin.api.md
@@ -6,7 +6,6 @@
 
 import { CustomBlockRenderer } from 'react-native-render-html';
 import { CustomTagRendererProps } from 'react-native-render-html';
-import { DefaultHTMLElementModels } from 'react-native-render-html';
 import { DefaultTagRendererProps } from 'react-native-render-html';
 import { PropsFromParent } from 'react-native-render-html';
 import { default as React_2 } from 'react';
@@ -100,9 +99,6 @@ export interface TableFlexRowContainer {
     type: 'row-container';
 }
 
-// @public (undocumented)
-export const tableModel: DefaultHTMLElementModels['table'];
-
 // @public
 export const TableRenderer: CustomBlockRenderer;
 
@@ -114,15 +110,9 @@ export interface TableRoot {
     type: 'root';
 }
 
-// @public (undocumented)
-export const tdModel: DefaultHTMLElementModels['td'];
-
 // @public
 export const TdRenderer: CustomBlockRenderer<TableCellPropsFromParent>;
 
-// @public (undocumented)
-export const thModel: DefaultHTMLElementModels['th'];
-
 // @public
 export const ThRenderer: CustomBlockRenderer<TableCellPropsFromParent>;
 

diff --git a/packages/heuristic-table-plugin/package.json b/packages/heuristic-table-plugin/package.json
@@ -55,7 +55,7 @@
     "react": "16.13.1",
     "react-native": "^0.63.2",
     "react-native-builder-bob": "^0.17.1",
-    "react-native-render-html": "6.0.0-alpha.23",
+    "react-native-render-html": "6.0.0-alpha.25",
     "react-test-renderer": "16.13.1",
     "release-it": "^14.3.0",
     "typescript": "~4.1.3"
@@ -69,7 +69,7 @@
   "peerDependencies": {
     "react": ">= 16.8.0",
     "react-native": ">= 0.63.0",
-    "react-native-render-html": ">= 6.0.0-alpha.23 || 6.x"
+    "react-native-render-html": ">= 6.0.0-alpha.25 || >= 6.0.0-beta.0 || 6.x"
   },
   "author": "Jules Sam. Randolph <jules.sam.randolph@gmail.com> (https://github.com/jsamr)",
   "homepage": "https://github.com/native-html/plugins/tree/master/packages/heuristic-table-plugin#readme",

diff --git a/packages/heuristic-table-plugin/src/HTMLTable.tsx b/packages/heuristic-table-plugin/src/HTMLTable.tsx
@@ -55,8 +55,7 @@ const HTMLTable = memo(function HTMLTable({
       <Container tableWidth={tableWidth} availableWidth={containerWidth}>
         {React.createElement(TreeRenderer, {
           node: layout.renderTree,
-          config,
-          rootMarkers: props.markers
+          config
         })}
       </Container>
     </TDefaultRenderer>

diff --git a/packages/heuristic-table-plugin/src/TableRenderer.ts b/packages/heuristic-table-plugin/src/TableRenderer.ts
@@ -1,7 +1,6 @@
 import React from 'react';
 import { CustomBlockRenderer } from 'react-native-render-html';
 import HTMLTable from './HTMLTable';
-import tableModel from './models/tableModel';
 import { HeuristicTablePluginConfig } from './shared-types';
 import useHtmlTableProps from './useHtmlTableProps';
 
@@ -21,6 +20,4 @@ const TableRenderer: CustomBlockRenderer = function (props) {
   return React.createElement(HTMLTable, useHtmlTableProps(props));
 };
 
-TableRenderer.model = tableModel;
-
 export default TableRenderer;
diff --git a/packages/heuristic-table-plugin/src/TdRenderer.tsx b/packages/heuristic-table-plugin/src/TdRenderer.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { CustomBlockRenderer } from 'react-native-render-html';
-import tdModel from './models/tdModel';
 import { TableCellPropsFromParent } from './shared-types';
 import useHtmlTableCellProps from './useHtmlTableCellProps';
 
@@ -19,6 +18,4 @@ const TdRenderer: CustomBlockRenderer<TableCellPropsFromParent> = function (
   );
 };
 
-TdRenderer.model = tdModel;
-
 export default TdRenderer;
diff --git a/packages/heuristic-table-plugin/src/ThRenderer.ts b/packages/heuristic-table-plugin/src/ThRenderer.ts
@@ -1,6 +1,5 @@
 import React from 'react';
 import { CustomBlockRenderer } from 'react-native-render-html';
-import thModel from './models/thModel';
 import { TableCellPropsFromParent } from './shared-types';
 import useHtmlTableCellProps from './useHtmlTableCellProps';
 
@@ -19,6 +18,4 @@ const ThRenderer: CustomBlockRenderer<TableCellPropsFromParent> = function (
   );
 };
 
-ThRenderer.model = thModel;
-
 export default ThRenderer;
diff --git a/packages/heuristic-table-plugin/src/TreeRenderer.tsx b/packages/heuristic-table-plugin/src/TreeRenderer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { Markers, TNodeRenderer } from 'react-native-render-html';
+import { TNodeRenderer } from 'react-native-render-html';
 import { HeuristicTablePluginConfig, TableRenderNode } from './shared-types';
 
 const styles = StyleSheet.create({
@@ -10,20 +10,16 @@ const styles = StyleSheet.create({
 
 export default function TreeRenderer({
   node,
-  rootMarkers,
   config
 }: {
   node: TableRenderNode;
   config?: HeuristicTablePluginConfig;
-
-  rootMarkers: Markers;
 }) {
   if (node.type === 'cell') {
     return (
       <View style={{ width: node.width }}>
         <TNodeRenderer
           propsFromParent={{ cell: node, collapsedMarginTop: null, config }}
-          parentMarkers={rootMarkers}
           tnode={node.tnode}
         />
       </View>
@@ -34,8 +30,7 @@ export default function TreeRenderer({
       React.createElement(TreeRenderer, {
         node: v,
         key: i,
-        config,
-        rootMarkers
+        config
       })
     );
     return <View style={styles.colContainer}>{children}</View>;
@@ -47,8 +42,7 @@ export default function TreeRenderer({
           React.createElement(TreeRenderer, {
             node: v,
             key: i,
-            config,
-            rootMarkers
+            config
           })
         )}
       </View>

diff --git a/packages/heuristic-table-plugin/src/helpers/TCellConstraintsComputer.ts b/packages/heuristic-table-plugin/src/helpers/TCellConstraintsComputer.ts
@@ -6,7 +6,6 @@ import prop from 'ramda/src/prop';
 import reduce from 'ramda/src/reduce';
 import { TextStyle } from 'react-native';
 import { TNode } from 'react-native-render-html';
-import { TBlock, TText } from '@native-html/transient-render-engine';
 import { TCellConstraints } from '../shared-types';
 import { getHorizontalMargins, getHorizontalSpacing } from './measure';
 
@@ -109,7 +108,7 @@ export default class TCellConstraintsComputer {
     tnode: TNode,
     stats: TCellStats = getInitCellStatsForTnode(tnode)
   ): TCellStats {
-    if (tnode instanceof TText) {
+    if (tnode.type === 'text') {
       const fontSize =
         tnode.styles.nativeTextFlow.fontSize ?? this.fallbackFontSize;
       const fontWeight = tnode.styles.nativeTextFlow.fontWeight ?? 'normal';
@@ -122,7 +121,7 @@ export default class TCellConstraintsComputer {
         fontWeightCoeff
       });
     } else {
-      if (tnode instanceof TBlock) {
+      if (tnode.type === 'block') {
         const blockStyle = tnode.styles.nativeBlockRet;
         const width =
           typeof blockStyle.width === 'number'

diff --git a/packages/heuristic-table-plugin/src/index.ts b/packages/heuristic-table-plugin/src/index.ts
@@ -29,8 +29,6 @@ const renderers: Record<'th' | 'td' | 'table', CustomBlockRenderer> = {
   td: TdRenderer as any
 };
 
-export * from './models';
-
 export { default as useHtmlTableProps } from './useHtmlTableProps';
 export { default as useHtmlTableCellProps } from './useHtmlTableCellProps';
 export { default as HTMLTable } from './HTMLTable';

diff --git a/packages/heuristic-table-plugin/src/models/index.ts b/packages/heuristic-table-plugin/src/models/index.ts
diff --git a/packages/heuristic-table-plugin/src/models/tableModel.ts b/packages/heuristic-table-plugin/src/models/tableModel.ts
diff --git a/packages/heuristic-table-plugin/src/models/tdModel.ts b/packages/heuristic-table-plugin/src/models/tdModel.ts
diff --git a/packages/heuristic-table-plugin/src/models/thModel.ts b/packages/heuristic-table-plugin/src/models/thModel.ts
diff --git a/packages/heuristic-table-plugin/src/useHtmlTableProps.ts b/packages/heuristic-table-plugin/src/useHtmlTableProps.ts
@@ -3,6 +3,7 @@ import {
   CustomTagRendererProps,
   TBlock,
   TNode,
+  useContentWidth,
   useRendererProps
 } from 'react-native-render-html';
 import { Settings, HTMLTableProps } from './shared-types';
@@ -41,10 +42,11 @@ export default function useHtmlTableProps(
 ): HTMLTableProps {
   const table = useRendererProps('table');
   const forceStretch = table?.forceStretch ?? false;
+  const sharedContentWidth = useContentWidth();
   const contentWidth =
     typeof options.overrideContentWidth === 'number'
       ? options.overrideContentWidth
-      : sharedProps.contentWidth;
+      : sharedContentWidth;
   const settings = useMemo(() => ({ contentWidth, forceStretch }), [
     contentWidth,
     forceStretch