@tarojs/rn-runner 3.5.0-beta.3 → 3.5.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/rn-runner",
-  "version": "3.5.0-beta.3",
+  "version": "3.5.0-beta.4",
   "description": "ReactNative build tool for taro",
   "main": "index.js",
   "repository": {
@@ -32,10 +32,16 @@
   "dependencies": {
     "@react-native-community/cli-plugin-metro": "^7.0.0",
     "@react-native-community/cli-server-api": "^7.0.0",
-    "@tarojs/helper": "3.5.0-beta.3",
-    "@tarojs/rn-style-transformer": "3.5.0-beta.3",
-    "@tarojs/rn-supporter": "3.5.0-beta.3",
-    "@tarojs/rn-transformer": "3.5.0-beta.3",
+    "@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-beta.4",
+    "@tarojs/rn-style-transformer": "3.5.0-beta.4",
+    "@tarojs/rn-supporter": "3.5.0-beta.4",
+    "@tarojs/rn-transformer": "3.5.0-beta.4",
+    "acorn-jsx": "^5.3.2",
     "fs-extra": "^8.0.1",
     "lodash": "^4.17.21",
     "metro": "^0.67.0",
@@ -45,7 +51,9 @@
     "metro-react-native-babel-transformer": "^0.67.0",
     "metro-resolver": "^0.67.0",
     "mime-types": "^2.1.27",
-    "qrcode-terminal": "^0.12.0"
+    "qrcode-terminal": "^0.12.0",
+    "rollup-plugin-clear": "^2.0.7",
+    "rollup-plugin-image-file": "^1.0.2"
   },
-  "gitHead": "bd1aa21707e51500eac9b16526e4ba4171fa8e5f"
+  "gitHead": "7aca7841ed7e2af1b182ff5d24e91f44730ce783"
 }

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/index.ts

@@ -14,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/index.ts

@@ -12,6 +12,7 @@ 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'
@@ -108,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 = {}
@@ -119,7 +125,11 @@ export default async function build (_appPath: string, config: any): Promise<any
       metroConfig.server.port = config.port
     }
 
-    const { middleware, messageSocketEndpoint } = createDevServerMiddleware({
+    const {
+      middleware,
+      messageSocketEndpoint,
+      websocketEndpoints
+    } = createDevServerMiddleware({
       port: metroConfig.server.port,
       watchFolders: metroConfig.watchFolders
     })
@@ -144,7 +154,8 @@ 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')

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.root.json",
   "compilerOptions": {
-    "rootDir": "./src",
+    "jsx": "react",
     "outDir": "./dist",
     "sourceMap": true,
     "module": "commonjs"