@tarojs/rn-runner 3.5.0-canary.1 → 3.5.0

package/package.json

@@ -1,21 +1,12 @@
 {
   "name": "@tarojs/rn-runner",
-  "version": "3.5.0-canary.1",
+  "version": "3.5.0",
   "description": "ReactNative build tool for taro",
   "main": "index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/NervJS/taro.git"
   },
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "lint": "eslint .",
-    "test": "jest --silent",
-    "test:dev": "jest --watch",
-    "test:ci": "jest --silent --coverage false",
-    "test:coverage": "jest --coverage"
-  },
   "keywords": [
     "taro"
   ],
@@ -30,21 +21,44 @@
     "npm": ">=6.0.0"
   },
   "dependencies": {
-    "@react-native-community/cli": "^5.0.1",
-    "@react-native-community/cli-server-api": "^5.0.1",
-    "@tarojs/helper": "3.5.0-canary.1",
-    "@tarojs/rn-style-transformer": "3.5.0-canary.1",
-    "@tarojs/rn-supporter": "3.5.0-canary.1",
-    "@tarojs/rn-transformer": "3.5.0-canary.1",
+    "@react-native-community/cli": "^7.0.3",
+    "@react-native-community/cli-plugin-metro": "^7.0.0",
+    "@react-native-community/cli-server-api": "^7.0.0",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-replace": "^4.0.0",
+    "@tarojs/helper": "3.5.0",
+    "@tarojs/rn-style-transformer": "3.5.0",
+    "@tarojs/rn-supporter": "3.5.0",
+    "@tarojs/rn-transformer": "3.5.0",
+    "acorn-jsx": "^5.3.2",
     "fs-extra": "^8.0.1",
     "lodash": "^4.17.21",
-    "metro": "^0.66.2",
-    "metro-cache": "^0.66.2",
-    "metro-config": "^0.66.2",
-    "metro-core": "^0.66.2",
-    "metro-react-native-babel-transformer": "^0.66.2",
-    "metro-resolver": "^0.66.2",
-    "qrcode-terminal": "^0.12.0"
+    "metro": "^0.67.0",
+    "metro-cache": "^0.67.0",
+    "metro-config": "^0.67.0",
+    "metro-core": "^0.67.0",
+    "metro-react-native-babel-transformer": "^0.67.0",
+    "metro-resolver": "^0.67.0",
+    "mime-types": "^2.1.27",
+    "qrcode-terminal": "^0.12.0",
+    "rollup-plugin-clear": "^2.0.7",
+    "rollup-plugin-image-file": "^1.0.2"
   },
-  "gitHead": "c61624d2f763e6d31e67d6cf9c564efc8b0d0887"
-}
+  "devDependencies": {
+    "expo-file-system": "~14.0.0",
+    "react-is": "^16.13.0",
+    "react-native-root-siblings": "^4.1.1"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "lint": "eslint .",
+    "test": "jest --silent",
+    "test:dev": "jest --watch",
+    "test:ci": "jest --silent --coverage false",
+    "test:coverage": "jest --coverage"
+  }
+}

package/src/config/build-component.ts

@@ -0,0 +1,171 @@
+import babel from '@rollup/plugin-babel'
+import * as commonjs from '@rollup/plugin-commonjs'
+import * as json from '@rollup/plugin-json'
+import nodeResolve from '@rollup/plugin-node-resolve'
+import * as pluginReplace from '@rollup/plugin-replace'
+import { recursiveMerge } from '@tarojs/helper'
+import { rollupTransform as styleTransformer } from '@tarojs/rn-style-transformer'
+import { resolveExtFile, rollupResolver as taroResolver } from '@tarojs/rn-supporter'
+import { getAppConfig } from '@tarojs/rn-transformer'
+import * as jsx from 'acorn-jsx'
+import * as path from 'path'
+import { rollup, RollupOptions } from 'rollup'
+import * as clear from 'rollup-plugin-clear'
+import image from 'rollup-plugin-image-file'
+
+type ExternalFn = (arr: Array<string | RegExp>) => Array<string | RegExp>
+
+interface IComponentConfig {
+  input: string[] | string
+  output?: string
+  sourceRootPath?: string
+  external?: Array<string | RegExp> | ExternalFn
+  externalResolve?: (importee, importer) => string | null | void
+  modifyRollupConfig?: (
+    config: RollupOptions,
+    innerplugins?: [typeof taroResolver, typeof styleTransformer]
+  ) => RollupOptions
+}
+
+const DEFAULT_CONFIG: Pick<
+IComponentConfig,
+'external' | 'output' | 'externalResolve' | 'sourceRootPath' | 'modifyRollupConfig'
+> = {
+  external: [/^react(\/.*)?$/, /^react-native(\/.*)?$/, /^@react-native/],
+  output: 'dist',
+  externalResolve: importee => (likeDependent(importee) ? importee : null),
+  sourceRootPath: process.cwd(),
+  modifyRollupConfig: config => config
+}
+
+export const build = async (projectConfig, componentConfig: IComponentConfig) => {
+  const mergedConfig = recursiveMerge({ ...DEFAULT_CONFIG }, componentConfig)
+  const { input, external, output, externalResolve, sourceRootPath, modifyRollupConfig } = mergedConfig
+
+  const getInputOption = () => {
+    const components: string[] = Array.isArray(input) ? input : [input]
+
+    const inputOptions = components.reduce((pre, cur) => {
+      let absolutePath = cur
+      if (!path.isAbsolute(cur)) {
+        absolutePath = path.resolve(sourceRootPath, cur)
+      }
+      const realPath = resolveExtFile({ originModulePath: absolutePath }, absolutePath)
+      const relativePath = path
+        .relative(sourceRootPath, realPath)
+        .replace(/\.(js|ts|jsx|tsx)$/, '')
+        .replace(/\.{1,}\//g, '')
+
+      return {
+        ...pre,
+        [relativePath]: realPath
+      }
+    }, {})
+    if (components.length === 1) {
+      return {
+        index: Object.values(inputOptions)[0]
+      }
+    }
+    return inputOptions
+  }
+
+  const getExternal = () => {
+    if (typeof external === 'function') {
+      return external(DEFAULT_CONFIG.external)
+    }
+    const _external = Array.isArray(external) ? external : [external]
+    return _external.filter(Boolean).map(item => {
+      if (((item as unknown) as RegExp).test) return item
+      const match = (item as string).match(/^\/(.+)\/$/)
+      return match ? new RegExp(match[1]) : item
+    })
+  }
+
+  const rollupOptions: RollupOptions = {
+    input: getInputOption(),
+    output: {
+      format: 'es',
+      dir: output
+    },
+    external: getExternal(),
+    // @ts-ignore react native 相关的一些库中可能包含 jsx 语法
+    acornInjectPlugins: [jsx()],
+    plugins: [
+      clear({ targets: [output] }),
+      // TODO: 使用 react-native-svg-transformer 处理
+      // @ts-ignore
+      image({
+        extensions: ['.jpg', '.jpeg', '.png', '.webp', '.gif', '.svg', '.svgx']
+      }),
+      // @ts-ignore
+      json(),
+      taroResolver({
+        externalResolve
+      }),
+      nodeResolve({
+        extensions: ['.mjs', '.js', '.json', '.node', '.ts', '.tsx']
+      }),
+      // @ts-ignore
+      pluginReplace({
+        'process.env.NODE_ENV': JSON.stringify('production')
+      }),
+      // @ts-ignore
+      commonjs(),
+      babel({
+        babelHelpers: 'runtime',
+        presets: [
+          [
+            'babel-preset-taro',
+            {
+              framework: 'react',
+              ts: true,
+              reactJsxRuntime: projectConfig.reactJsxRuntime || 'automatic',
+              disableImportExportTransform: true
+            }
+          ]
+        ],
+        extensions: ['js', 'ts', 'jsx', 'tsx']
+      }),
+      styleTransformer({ config: projectConfig })
+    ]
+  }
+
+  const newRollupOptions = modifyRollupConfig(rollupOptions, {
+    taroResolver,
+    styleTransformer
+  })
+  const { output: outputOptions, ...inputOptions } = newRollupOptions
+
+  let bundle
+  try {
+    bundle = await rollup(inputOptions)
+
+    const result = await bundle.write(outputOptions)
+    return result
+  } catch (error) {
+    console.error(error)
+  }
+  if (bundle) {
+    await bundle.close()
+  }
+}
+
+function likeDependent (str: string) {
+  return !str.match(/^\.?\.\//) && !path.isAbsolute(str)
+}
+
+export default async function (projectPath: string, config: any) {
+  const { sourceRoot, entry, nativeComponents } = config
+  const appPath = path.join(projectPath, sourceRoot, entry)
+  const appConfig = getAppConfig(appPath)
+  const { output = DEFAULT_CONFIG.output } = nativeComponents || {}
+
+  const componentConfig = {
+    ...nativeComponents,
+    input: appConfig?.components,
+    output: path.join(projectPath, output),
+    sourceRootPath: path.join(projectPath, sourceRoot)
+  }
+
+  return build(config, componentConfig)
+}

package/src/config/config-holder.ts

@@ -1,4 +1,5 @@
 import { merge } from 'lodash'
+
 import { Config, RNConfig } from '../types'
 
 const fs = require('fs')
@@ -66,4 +67,4 @@ const getRNConfigBabelPlugin = () => {
   }
 }
 
-export { getConfig, getRNConfig, getRNConfigEntry, getRNConfigOutput, getRNConfigTransformer, getRNConfigBabelPlugin }
+export { getConfig, getRNConfig, getRNConfigBabelPlugin, getRNConfigEntry, getRNConfigOutput, getRNConfigTransformer }

package/src/config/index.ts

@@ -1,9 +1,10 @@
+import findProjectRoot from '@react-native-community/cli/build/tools/config/findProjectRoot'
+import resolveReactNativePath from '@react-native-community/cli/build/tools/config/resolveReactNativePath'
+import { Supporter } from '@tarojs/rn-supporter'
 import * as Metro from 'metro'
 import * as os from 'os'
 import * as path from 'path'
-import resolveReactNativePath from '@react-native-community/cli/build/tools/config/resolveReactNativePath'
-import findProjectRoot from '@react-native-community/cli/build/tools/config/findProjectRoot'
-import * as Supporter from '@tarojs/rn-supporter'
+
 import ConditionalFileStore from './conditional-file-store'
 
 const reactNativePath: string = resolveReactNativePath(findProjectRoot())
@@ -13,21 +14,21 @@ type GetModulesRunBeforeMainModuleFunc = () => any
 type GetPolyfillsFunc = () => any
 interface MetroConfig {
   transformer: {
-    dynamicDepsInPackages: string;
-    babelTransformerPath: string;
-    assetRegistryPath: string;
-  },
+    dynamicDepsInPackages: string
+    babelTransformerPath: string
+    assetRegistryPath: string
+  }
   resolver: {
-    sourceExts: string[];
-    resolveRequest?: ResolveRequestFunc;
-  },
+    sourceExts: string[]
+    resolveRequest?: ResolveRequestFunc
+  }
   serializer: {
-    getModulesRunBeforeMainModule: GetModulesRunBeforeMainModuleFunc,
+    getModulesRunBeforeMainModule: GetModulesRunBeforeMainModuleFunc
     getPolyfills: GetPolyfillsFunc
-  },
-  cacheStores: ConditionalFileStore<any>[],
+  }
+  cacheStores: ConditionalFileStore<any>[]
   server: {
-    port: number;
+    port: number
   }
 }
 

package/src/config/preview.ts

@@ -1,10 +1,11 @@
-import * as mime from 'mime-types'
-import { createServer } from 'http'
 import { readFile } from 'fs'
-import { generate } from 'qrcode-terminal'
-import { getOpenHost, PLAYGROUNDINFO } from '../utils'
+import { createServer } from 'http'
+import * as mime from 'mime-types'
+import { extname, join } from 'path'
+import * as qr from 'qrcode-terminal'
 import { URL } from 'url'
-import { join, extname } from 'path'
+
+import { getOpenHost, PLAYGROUNDINFO } from '../utils'
 
 interface PreviewOption {
   out: string
@@ -109,5 +110,5 @@ export default (opt: PreviewOption):void => {
   const url = `${host}/index.js`
   console.log(PLAYGROUNDINFO)
   console.log(`print qrcode of ${opt.platform} bundle '${url}':`)
-  generate(url, { small: true })
+  qr.generate(url, { small: true })
 }

package/src/config/terminal-reporter.ts

@@ -1,6 +1,6 @@
-import { Terminal } from 'metro-core'
+import { emptyModulePath } from '@tarojs/rn-supporter'
 import * as MetroTerminalReporter from 'metro/src/lib/TerminalReporter'
-import * as ModuleResolution from 'metro/src/node-haste/DependencyGraph/ModuleResolution'
+import { Terminal } from 'metro-core'
 
 export class TerminalReporter {
   _reporter: any
@@ -38,7 +38,7 @@ export class TerminalReporter {
         break
       case 'bundle_build_done': {
         this._reporter.update(args)
-        const realEntryPath = ModuleResolution.ModuleResolver.EMPTY_MODULE
+        const realEntryPath = require.resolve(emptyModulePath)
         if (this._initialized) {
           // 恢复入口页面的缓存
           this._reporter.ignoreEntryFileCache = false

package/src/index.ts

@@ -1,22 +1,22 @@
-import * as Metro from 'metro'
-import getMetroConfig from './config'
-import { getRNConfigEntry } from './config/config-holder'
-import { getOpenHost, PLAYGROUNDINFO } from './utils'
-import preview from './config/preview'
-
+import saveAssets from '@react-native-community/cli-plugin-metro/build/commands/bundle/saveAssets'
+import { createDevServerMiddleware } from '@react-native-community/cli-server-api'
 import { PLATFORMS } from '@tarojs/helper'
-import * as path from 'path'
 import * as fse from 'fs-extra'
-import * as url from 'url'
-import { generate } from 'qrcode-terminal'
-
-import * as readline from 'readline'
-import { createDevServerMiddleware } from '@react-native-community/cli-server-api'
-import { TerminalReporter } from './config/terminal-reporter'
+import * as Metro from 'metro'
 import { getResolveDependencyFn } from 'metro/src/lib/transformHelpers'
 import * as Server from 'metro/src/Server'
-import saveAssets from '@react-native-community/cli/build/commands/bundle/saveAssets'
 import * as outputBundle from 'metro/src/shared/output/bundle'
+import * as path from 'path'
+import * as qr from 'qrcode-terminal'
+import * as readline from 'readline'
+import * as url from 'url'
+
+import getMetroConfig from './config'
+import buildComponent from './config/build-component'
+import { getRNConfigEntry } from './config/config-holder'
+import preview from './config/preview'
+import { TerminalReporter } from './config/terminal-reporter'
+import { getOpenHost, PLAYGROUNDINFO } from './utils'
 
 function concatOutputFileName (config: any): string {
   // 优先级：--bundle-output > config.output > config.outputRoot
@@ -78,7 +78,7 @@ function getOutputSourceMapOption (config: any): Record<string, any> {
 // TODO: 返回值
 // HttpServer | {code: string, map: string}
 // IBuildConfig
-export default async function build (appPath: string, config: any): Promise<any> {
+export default async function build (_appPath: string, config: any): Promise<any> {
   process.env.TARO_ENV = PLATFORMS.RN
   // TODO:新增环境变量是否可以在metro构建过程中可以访问到？
   const entry = getRNConfigEntry()
@@ -109,7 +109,12 @@ export default async function build (appPath: string, config: any): Promise<any>
     if (error instanceof Error) throw error
   }
 
-  if (config.isWatch) {
+  if (config.isBuildNativeComp) {
+    return buildComponent(
+      _appPath,
+      config
+    )
+  } else if (config.isWatch) {
     if (!metroConfig.server || (metroConfig.server.useGlobalHotkey === undefined)) {
       if (!metroConfig.server) {
         metroConfig.server = {}
@@ -120,7 +125,11 @@ export default async function build (appPath: string, config: any): Promise<any>
       metroConfig.server.port = config.port
     }
 
-    const { middleware, attachToServer } = createDevServerMiddleware({
+    const {
+      middleware,
+      messageSocketEndpoint,
+      websocketEndpoints
+    } = createDevServerMiddleware({
       port: metroConfig.server.port,
       watchFolders: metroConfig.watchFolders
     })
@@ -145,22 +154,21 @@ export default async function build (appPath: string, config: any): Promise<any>
     // 支持host
     return Metro.runServer(metroConfig, {
       ...commonOptions,
-      hmrEnabled: true
+      hmrEnabled: true,
+      websocketEndpoints
     }).then(server => {
       console.log(`React-Native Dev server is running on port: ${metroConfig.server.port}`)
       console.log('\n\nTo reload the app press "r"\nTo open developer menu press "d"\n')
 
-      const { messageSocket } = attachToServer(server)
-
       readline.emitKeypressEvents(process.stdin)
       process.stdin.setRawMode && process.stdin.setRawMode(true)
-      process.stdin.on('keypress', (key, data) => {
+      process.stdin.on('keypress', (_key, data) => {
         const { ctrl, name } = data
         if (name === 'r') {
-          messageSocket.broadcast('reload')
+          messageSocketEndpoint.broadcast('reload')
           console.log('Reloading app...')
         } else if (name === 'd') {
-          messageSocket.broadcast('devMenu')
+          messageSocketEndpoint.broadcast('devMenu')
           console.log('Opening developer menu...')
         } else if (ctrl && (name === 'c')) {
           process.exit()
@@ -173,7 +181,7 @@ export default async function build (appPath: string, config: any): Promise<any>
           const url = `taro://${host}:${metroConfig.server.port}`
           console.log(PLAYGROUNDINFO)
           console.log(`print qrcode of '${url}':`)
-          generate(url, { small: true })
+          qr.generate(url, { small: true })
         } else {
           console.log('print qrcode error: host not found.')
         }
@@ -192,7 +200,10 @@ export default async function build (appPath: string, config: any): Promise<any>
     const savedBuildFunc = outputBundle.build
     outputBundle.build = async (packagerClient, requestOptions) => {
       const resolutionFn = await getResolveDependencyFn(packagerClient.getBundler().getBundler(), requestOptions.platform)
-      requestOptions.entryFile = resolutionFn(metroConfig.projectRoot, requestOptions.entryFile)
+      // try for test case build_noWatch
+      try {
+        requestOptions.entryFile = resolutionFn(metroConfig.projectRoot, requestOptions.entryFile)
+      } catch (e) {}
       return savedBuildFunc(packagerClient, requestOptions)
     }
 

package/src/types/index.ts

@@ -1,55 +1,55 @@
 // https://taro-docs.jd.com/taro/docs/config-detail/
 interface Output {
-  android: string,
+  android: string
   ios: string
 }
 
 interface Copy {
-  patterns: [],
+  patterns: []
   options: Record<string, any>
 }
 
 interface Csso {
-  enable: boolean,
+  enable: boolean
   config: Record<string, any>
 }
 
 interface Sass {
-  resource: [],
-  projectDirectory: string,
+  resource: []
+  projectDirectory: string
   data: string
 }
 
 export interface Config {
-  projectName?: string,
-  date?: string,
-  designWidth?: number,
-  deviceRatio?: Record<string, any>,
-  sourceRoot?: string,
-  outputRoot?: string,
-  defineConstants?: Record<string, any>,
-  alias?: Record<string, any>,
-  env?: Record<string, any>,
-  sass?: Sass,
-  copy?: Copy,
-  plugins?: [],
-  presets?: [],
-  terser?: Record<string, any>,
-  csso?: Csso,
-  framework?: Record<string, any>,
-  mini?: Record<string, any>,
-  h5?: Record<string, any>,
-  rn?: Record<string, any>,
+  projectName?: string
+  date?: string
+  designWidth?: number
+  deviceRatio?: Record<string, any>
+  sourceRoot?: string
+  outputRoot?: string
+  defineConstants?: Record<string, any>
+  alias?: Record<string, any>
+  env?: Record<string, any>
+  sass?: Sass
+  copy?: Copy
+  plugins?: []
+  presets?: []
+  terser?: Record<string, any>
+  csso?: Csso
+  framework?: Record<string, any>
+  mini?: Record<string, any>
+  h5?: Record<string, any>
+  rn?: Record<string, any>
 }
 
 export interface RNConfig extends Config {
-  appName?: boolean,
-  entry?: string,
-  output?: Output,
-  sourceDir?: string,
-  postcss?: Record<string, any>,
-  less?: Record<string, any>,
-  stylus?: Record<string, any>,
-  transformer?: any,
-  babelPlugin?: any,
+  appName?: boolean
+  entry?: string
+  output?: Output
+  sourceDir?: string
+  postcss?: Record<string, any>
+  less?: Record<string, any>
+  stylus?: Record<string, any>
+  transformer?: any
+  babelPlugin?: any
 }

package/src/utils.ts

@@ -6,7 +6,7 @@ export function getOpenHost () {
   for (const devName in interfaces) {
     const isEnd = interfaces[devName]?.some(item => {
       // 取IPv4, 不为127.0.0.1的内网ip
-      if (item.family === 'IPv4' && item.address !== '127.0.0.1' && !item.internal) {
+      if (['IPv4', 4, '4'].includes(item.family) && item.address !== '127.0.0.1' && !item.internal) {
         result = item.address
         return true
       }

package/tsconfig.json

@@ -1,28 +1,10 @@
 {
-    "include": [
-      "src/**/*"
-    ],
-    "compilerOptions": {
-      "rootDir": "./src",
-      "outDir": "./dist",
-      "strictNullChecks": true,
-      "sourceMap": true,
-      "allowJs": true,
-      "noImplicitAny": false,
-      "allowSyntheticDefaultImports": true,
-      "downlevelIteration": true,
-      "moduleResolution": "node",
-      "target": "es5",
-      "skipLibCheck": true,
-      "lib": [
-        "ES2015",
-      ],
-      "types": [
-        "node"
-      ],
-      "typeRoots": [
-        "./node_modules",
-        "./src/types"
-      ]
-    }
-  }
+  "extends": "../../tsconfig.root.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "outDir": "./dist",
+    "sourceMap": true,
+    "module": "commonjs"
+  },
+  "include": ["./src"]
+}