feat: compatible with metro 0.70

NervJS · Sep 2, 2022 · 24b6b96 · 24b6b96
1 parent abcf6a9
commit 24b6b96
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 97 deletions.
diff --git a/packages/taro-components-rn/src/__tests__/__snapshots__/richText.spec.tsx.snap b/packages/taro-components-rn/src/__tests__/__snapshots__/richText.spec.tsx.snap
@@ -45,7 +45,7 @@ exports[`RichText RichText render 1`] = `
       scalesPageToFit={false}
       source={
         Object {
-          "html": "<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, maximum-scale=1\\"/><div class=\\"div_class\\" style=\\"line-height:60px;color:white;font-size:60px\\"><span>Hello World!</span></div>",
+          "html": "<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, maximum-scale=1\\"/><div class=\\"div_class\\" style=\\"line-height:60px;color:white;font-size:60px;\\">Hello World!</div>",
         }
       }
       style={

diff --git a/packages/taro-components-rn/src/__tests__/richText.spec.tsx b/packages/taro-components-rn/src/__tests__/richText.spec.tsx
@@ -10,11 +10,7 @@ describe('RichText', () => {
         type: 'node',
         attrs: {
           class: 'div_class',
-          style: `
-            line-height: 60px;
-            color: white;
-            font-size: 60px;
-          `
+          style: 'line-height:60px;color:white;font-size:60px;'
         },
         children: [
           {

diff --git a/packages/taro-components-rn/src/components/RichText/index.tsx b/packages/taro-components-rn/src/components/RichText/index.tsx
@@ -8,8 +8,6 @@ import {
   WebView,
   WebViewMessageEvent
 } from 'react-native-webview'
-import * as ReactDOMServer from 'react-dom/server.browser'
-import { omit, parseStyles } from '../../utils'
 import { RichTextProps, RichTextState, Node } from './PropsType'
 
 class _RichText extends React.Component<RichTextProps, RichTextState> {
@@ -23,35 +21,21 @@ class _RichText extends React.Component<RichTextProps, RichTextState> {
 
   private webview = React.createRef<WebView>()
 
-  renderChildrens = (arr: Array<any> = []): JSX.Element[] | undefined => {
-    if (arr.length === 0) return
+  renderChildrens = (arr: Node []): string => {
+    if (arr.length === 0) return ''
     return arr.map((list) => {
       if (list.type === 'text') {
-        return this.renderText(list.text)
+        return list.text
       }
       return this.renderNodes(list)
-    })
+    }).join('')
   }
 
-  renderText = (text = ''): JSX.Element => {
-    return React.createElement('span', {
-      dangerouslySetInnerHTML: { __html: text },
-      key: Math.random()
-    })
-  }
-
-  renderNodes = (item: Node): React.ReactElement => {
-    const child = this.renderChildrens(item.children)
-    return React.createElement(
-      item.name || 'div',
-      {
-        key: Math.random(),
-        ...omit(item.attrs, ['class', 'style']),
-        className: item.attrs.class,
-        style: parseStyles(item.attrs.style)
-      },
-      child
-    )
+  renderNodes = (item: Node): string => {
+    const child = item.children ? this.renderChildrens(item.children) : ''
+    return `<${item.name} ${item.attrs && Object.keys(item.attrs).map(key => {
+      return `${key}="${item.attrs[key]}"`
+    }).join(' ')}>${child}</${item.name}>`
   }
 
   onWebViewMessage = (event: WebViewMessageEvent):void => {
@@ -69,8 +53,8 @@ class _RichText extends React.Component<RichTextProps, RichTextState> {
     const html: string = typeof nodes === 'string'
       ? nodes
       : nodes.map((item: Node): string => {
-        return ReactDOMServer.renderToStaticMarkup(this.renderNodes(item))
-      }).join(',')
+        return this.renderNodes(item)
+      }).join('')
 
     return (
       <View style={Object.assign({

diff --git a/packages/taro-components-rn/src/types/definition.d.ts b/packages/taro-components-rn/src/types/definition.d.ts
@@ -6,11 +6,6 @@
 //   }
 // }
 
-declare module 'react-dom/server.browser' {
-  import { ReactElement } from 'react'
-
-  export const renderToStaticMarkup: (element: ReactElement) => string
-}
 
 // 修复第三方库的类型定义依赖DOM，但是DOM与react-native类型冲突
 // begin

diff --git a/packages/taro-rn-runner/src/config/index.ts b/packages/taro-rn-runner/src/config/index.ts
@@ -9,7 +9,7 @@ import ConditionalFileStore from './conditional-file-store'
 
 const reactNativePath: string = resolveReactNativePath(findProjectRoot())
 
-type ResolveRequestFunc = (context, realModuleName, platform, moduleName) => any
+type ResolveRequestFunc = (context, moduleName, platform) => any
 type GetModulesRunBeforeMainModuleFunc = () => any
 type GetPolyfillsFunc = () => any
 interface MetroConfig {

diff --git a/packages/taro-rn-supporter/src/Support.ts b/packages/taro-rn-supporter/src/Support.ts
@@ -19,6 +19,8 @@ export class Supporter {
   getTransformer () {
     const transformerPath = this.fromRunner ? './taroTransformer' : './transformer'
     return {
+      allowOptionalDependencies: true,
+      asyncRequireModulePath: require.resolve('metro-runtime/src/modules/asyncRequire'),
       dynamicDepsInPackages: 'reject',
       babelTransformerPath: require.resolve(transformerPath),
       assetRegistryPath: require.resolve('react-native/Libraries/Image/AssetRegistry', {
@@ -49,8 +51,8 @@ export class Supporter {
     // 兼容0.60
     const rnVersion = getReactNativeVersion()
     if (rnVersion && (rnVersion.major === 0) && (rnVersion.minor === 60)) {
-      resolver.resolveRequest = (context, realModuleName, platform, moduleName) => {
-        const res = handleEntryFile(context, realModuleName, platform, moduleName)
+      resolver.resolveRequest = (context, moduleName, platform) => {
+        const res = handleEntryFile(context, moduleName, platform)
         if (res) {
           return res
         }

diff --git a/packages/taro-rn-supporter/src/taroResolver.ts b/packages/taro-rn-supporter/src/taroResolver.ts
@@ -1,5 +1,5 @@
 import * as fs from 'fs'
-import * as MetroResolver from 'metro-resolver'
+import type { ResolutionContext } from 'metro-resolver'
 import * as path from 'path'
 
 import { emptyModulePath } from './defaults'
@@ -61,76 +61,30 @@ function searchReactNativeModule (moduleName: string, platform: string): string
 
 /**
  * resolveRequest 文件处理，alias，文件后缀加载等
+ * metro 0.70 type ResolveRequestFunc = (context, moduleName, platform) => any
  */
-function handleFile (context, _realModuleName, platform, moduleName) {
-  const savedOriginModulePath = context.originModulePath
-  const savedAllowHaste = context.allowHaste
-  if (moduleName.startsWith('@tarojs/')) {
-    // 通过Haste去查找软链接模块
-    context.allowHaste = true
-  }
-
+function handleFile (context: ResolutionContext, moduleName, platform) {
   // 处理 alias
   moduleName = resolvePathFromAlias(moduleName)
 
   // 处理后缀 .rn.ts
   moduleName = resolveExtFile(context, moduleName, platform)
-
-  let res = null
-  const savedResolveRequest = context.resolveRequest
-  context.resolveRequest = null
-
-  try {
-    res = MetroResolver.resolve(context, moduleName, platform)
-  } catch (ex) {
-    // console.log(ex)
-    // nothing to do
-  } finally {
-    context.originModulePath = savedOriginModulePath
-    context.allowHaste = savedAllowHaste
-    context.resolveRequest = savedResolveRequest
-  }
-  return res
+  return context.resolveRequest(context, moduleName, platform)
 }
 
 // rn runner调用
-function handleTaroFile (context, realModuleName, platform, moduleName) {
+function handleTaroFile (context: ResolutionContext, moduleName, platform) {
   if (moduleName === './index') {
     return {
-      filePath: realModuleName,
+      filePath: moduleName,
       type: 'empty'
     }
   }
-  const savedOriginModulePath = context.originModulePath
-  if ((savedOriginModulePath === require.resolve(emptyModulePath)) && moduleName.startsWith('./')) {
-    context.originModulePath = path.join(context.projectRoot, './index')
-  }
-  const savedAllowHaste = context.allowHaste
-  if (moduleName.startsWith('@tarojs/')) {
-    // 通过Haste去查找软链接模块
-    context.allowHaste = true
-  }
-
-  // 处理 alias
-  moduleName = resolvePathFromAlias(moduleName)
-
-  // 处理后缀 .rn.ts
-  moduleName = resolveExtFile(context, moduleName, platform)
-
-  let res = null
-  const savedResolveRequest = context.resolveRequest
-  context.resolveRequest = null
-
-  try {
-    res = MetroResolver.resolve(context, moduleName, platform)
-  } catch (ex) {
-    // nothing to do
-  } finally {
-    context.originModulePath = savedOriginModulePath
-    context.allowHaste = savedAllowHaste
-    context.resolveRequest = savedResolveRequest
+  const newContext = {...context}
+  if(context.originModulePath === require.resolve(emptyModulePath)) {
+    newContext.originModulePath = path.join(context.projectRoot, './index.js')
   }
-  return res
+  return handleFile(newContext, moduleName, platform)
 }
 
 export {

diff --git a/packages/taro-runtime-rn/src/page.ts b/packages/taro-runtime-rn/src/page.ts
@@ -319,6 +319,7 @@ export function createPageConfig (Page: any, pageConfig: PageConfig): any {
       }
 
       onPageScroll (e) {
+        if(!e?.nativeEvent) return
         const { contentOffset } = e.nativeEvent
         const scrollTop = contentOffset.y
         if (scrollTop < 0) return
@@ -332,6 +333,7 @@ export function createPageConfig (Page: any, pageConfig: PageConfig): any {
 
       // 监听的onMomentumScrollEnd
       onReachBottom (e) {
+        if(!e?.nativeEvent) return
         const { onReachBottomDistance = 50 } = pageConfig
         const { layoutMeasurement, contentSize, contentOffset } = e.nativeEvent
         if (contentOffset?.y + layoutMeasurement?.height + onReachBottomDistance >= contentSize.height) {