@tarojs/rn-runner 3.5.7-alpha.9 → 3.5.8

package/src/config/preview.ts

@@ -0,0 +1,114 @@
+import { readFile } from 'fs'
+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 { getOpenHost, isWin, PLAYGROUNDINFO } from '../utils'
+
+interface PreviewOption {
+  out: string
+  platform: string
+  assetsDest?: string
+}
+
+const drawableFileTypes = new Set<string>([
+  'gif',
+  'jpeg',
+  'jpg',
+  'png',
+  'webp',
+  'xml'
+])
+
+function getAndroidAssetSuffix (scale: number): string {
+  switch (scale) {
+    case 0.75:
+      return 'ldpi'
+    case 1:
+      return 'mdpi'
+    case 1.5:
+      return 'hdpi'
+    case 2:
+      return 'xhdpi'
+    case 3:
+      return 'xxhdpi'
+    case 4:
+      return 'xxxhdpi'
+    default:
+      return ''
+  }
+}
+
+function getAndroidResourceFolderName (pathname:string): string {
+  const ext = extname(pathname).replace(/^./, '').toLowerCase()
+  if (!drawableFileTypes.has(ext)) {
+    return 'raw'
+  }
+  const suffix = getAndroidAssetSuffix(1) // TODO: auto scale
+  const androidFolder = `drawable-${suffix}`
+  return androidFolder
+}
+
+function getAndroidResourceIdentifier (pathname:string): string {
+  if (pathname[0] === '/') {
+    pathname = pathname.substr(1)
+  }
+  const ext = extname(pathname).toLowerCase()
+  const extReg = new RegExp(ext + '$')
+  return pathname
+    .replace(extReg, '')
+    .toLowerCase()
+    .replace(/\//g, '_')
+    .replace(/([^a-z0-9_])/g, '')
+    .replace(/^assets_/, '') + ext
+}
+
+export default (opt: PreviewOption):void => {
+  const port = process.env.PORT || 8079
+  const host = `http://${getOpenHost()}:${port}`
+
+  createServer(function (request, response) {
+    const url = new URL(request.url || '', host)
+
+    console.log(`${request.method} ${request.url}`)
+
+    if (url.pathname === '/inspector/device') {
+      response.writeHead(404)
+      response.end('404', 'utf-8')
+      return
+    }
+
+    let filePath
+    const contentType = mime.lookup(url.pathname)
+
+    if (url.pathname === '/index.js') {
+      filePath = opt.out
+    } else if (opt.platform === 'ios') {
+      filePath = join(opt.assetsDest || '', url.pathname)
+    } else if (opt.platform === 'android') {
+      filePath = join(opt.assetsDest || '', getAndroidResourceFolderName(url.pathname), getAndroidResourceIdentifier(url.pathname))
+    }
+
+    readFile(filePath, function (error, content) {
+      if (error) {
+        if (error.code === 'ENOENT') {
+          response.writeHead(404)
+          response.end('404', 'utf-8')
+        } else {
+          response.writeHead(500)
+          response.end('500', 'utf-8')
+        }
+      } else {
+        response.writeHead(200, { 'Content-Type': contentType })
+        response.end(content, 'utf-8')
+      }
+    })
+  }).listen(port)
+
+  const url = `${host}/index.js`
+  console.log(PLAYGROUNDINFO)
+  console.log(`print qrcode of ${opt.platform} bundle '${url}':`)
+  qr.generate(url, { small: !isWin })
+}

package/src/config/terminal-reporter.ts

@@ -0,0 +1,96 @@
+import { emptyModulePath } from '@tarojs/rn-supporter'
+import * as MetroTerminalReporter from 'metro/src/lib/TerminalReporter'
+import { Terminal } from 'metro-core'
+
+export class TerminalReporter {
+  _reporter: any
+  _conditionalFileStore: any
+  metroServerInstance: any
+  _initialized: boolean
+  _entry: string
+  _sourceRoot: string
+
+  constructor (entry: string, sourceRoot: string, conditionalFileStore: any, metroServerInstance?: any) {
+    this._reporter = new MetroTerminalReporter(new Terminal(process.stdout))
+    this._conditionalFileStore = conditionalFileStore
+    this.metroServerInstance = metroServerInstance
+    this._initialized = false
+    this._entry = entry
+    this._sourceRoot = sourceRoot
+  }
+
+  async update (args) {
+    // 当依赖图加载之后，检测app和页面配置文件的变化
+    switch (args.type) {
+      case 'initialize_started':
+        this._reporter.terminal.log(`
+  #####   ##   #####   ####     #####  ######   ##    ####  #####    #    #   ##   ##### # #    # ######
+    #    #  #  #    # #    #    #    # #       #  #  #    #   #      ##   #  #  #    #   # #    # #
+    #   #    # #    # #    #    #    # #####  #    # #        #      # #  # #    #   #   # #    # #####
+    #   ###### #####  #    #    #####  #      ###### #        #      #  # # ######   #   # #    # #
+    #   #    # #   #  #    #    #   #  #      #    # #    #   #      #   ## #    #   #   #  #  #  #
+    #   #    # #    #  ####     #    # ###### #    #  ####    #      #    # #    #   #   #   ##   ######
+`)
+        break
+      case 'bundle_build_started':
+        args.bundleDetails.entryFile = './index'
+        this._reporter.update(args)
+        break
+      case 'bundle_build_done': {
+        this._reporter.update(args)
+        const realEntryPath = require.resolve(emptyModulePath)
+        if (this._initialized) {
+          // 恢复入口页面的缓存
+          this._reporter.ignoreEntryFileCache = false
+          return
+        }
+        this._initialized = true
+        if (!this.metroServerInstance) {
+          return
+        }
+        const incrementalBundler = this.metroServerInstance.getBundler()
+        const deltaBundler = incrementalBundler.getDeltaBundler()
+        const bundler = incrementalBundler.getBundler()
+        const findEntryGraphId = keys => {
+          for (const k of keys) {
+            if (JSON.parse(k).entryFile === realEntryPath) {
+              return k
+            }
+          }
+          return null
+        }
+        // 获取入口文件的graph
+        const entryGraphId = findEntryGraphId(incrementalBundler._revisionsByGraphId.keys())
+        const entryGraphVersion = await incrementalBundler.getRevisionByGraphId(entryGraphId)
+
+        // 监听DeltaCalculator的change事件，把入口文件也加入到_modifiedFiles集合中
+        bundler.getDependencyGraph().then(dependencyGraph => {
+          dependencyGraph.getWatcher().on('change', ({ eventsQueue }) => {
+            const changedFiles = eventsQueue.map(item => item.filePath)
+            // 如果配置文件修改之后，把入口文件添加到修改列表中
+            const deltaCalculator = deltaBundler._deltaCalculators.get(entryGraphVersion.graph)
+            const isConfigurationModified = keys => {
+              for (const k of keys) {
+                if (k.includes('.config') && k.includes(this._sourceRoot)) {
+                  return true
+                }
+              }
+              return false
+            }
+            if (isConfigurationModified(changedFiles)) {
+              // 忽略入口文件的转译结果缓存
+              this._conditionalFileStore.ignoreEntryFileCache = true
+              deltaCalculator._modifiedFiles.add(realEntryPath)
+              this._reporter.terminal.flush()
+              console.log('\nConfiguration(s) are changed.')
+            }
+          })
+        })
+      }
+        break
+      default:
+        this._reporter.update(args)
+        break
+    }
+  }
+}

package/src/index.ts

@@ -1,44 +1,104 @@
-import { previewDev, previewProd } from '@tarojs/rn-supporter'
-import { spawn } from 'child_process'
-import { constants, copyFile } from 'fs'
+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 fse from 'fs-extra'
-import { dirname, join } from 'path'
+import * as Metro from 'metro'
+import { getResolveDependencyFn } from 'metro/src/lib/transformHelpers'
+import * as Server from 'metro/src/Server'
+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, isWin, PLAYGROUNDINFO } from './utils'
 
-// 确认根目录下 metro.config.js index.js 是否存在
-const files = ['metro.config.js', 'index.js']
-function confirmFiles () {
-  files.forEach(file => {
-    const filePath = join(process.cwd(), file)
-    copyFile(join(__dirname, '..', 'templates', file), filePath, constants.COPYFILE_EXCL, err => {
-      if (err) {
-        if (err.code !== 'EEXIST') {
-          // 不重复生成配置文件
-          console.log(err)
-        }
-      } else {
-        console.log(`${file} created`)
+function concatOutputFileName (config: any): string {
+  // 优先级：--bundle-output > config.output > config.outputRoot
+  let output = path.join(config.outputRoot, 'index.bundle')
+  if (config.output) {
+    const outputType = typeof config.output
+    if (outputType === 'string') {
+      output = config.output
+    } else if (outputType === 'object') {
+      output = config.output[config.deviceType]
+      if (!output) {
+        console.error(`lack value for 'rn.output' configuration with platform '${config.deviceType}': ${JSON.stringify(config.output)}`)
       }
-    })
-  })
+    } else {
+      console.error(`invalid value for 'rn.output' configuration: ${JSON.stringify(config.output)}`)
+    }
+  }
+  if (config.bundleOutput) {
+    output = config.bundleOutput
+  }
+  const res = path.isAbsolute(output) ? output : path.join('.', output)
+  fse.ensureDirSync(path.dirname(res))
+  return res
 }
 
-const isWin = /^win/.test(process.platform)
-const npxCmd = isWin ? 'npx.cmd' : 'npx'
+function concatOutputAssetsDest (config: any): string | undefined {
+  // 优先级：--assets-dest > config.output > config.outputRoot
+  let assetDest
+  if (!config?.deviceType || !config?.output) {
+    assetDest = config.outputRoot
+  } else {
+    assetDest = config.deviceType === 'ios' ? config.output.iosAssetsDest : config.output.androidAssetsDest
+  }
+  if (config.assetsDest) {
+    assetDest = config.assetsDest
+  }
+  if (!assetDest) return undefined
+  const res = path.isAbsolute(assetDest) ? assetDest : path.join('.', assetDest)
+  fse.ensureDirSync(path.dirname(res))
+  return res
+}
 
-export default async function build (_appPath: string, config: any): Promise<any> {
-  process.env.TARO_ENV = 'rn'
+function getOutputSourceMapOption (config: any): Record<string, any> {
+  if (!config?.deviceType) {
+    return {}
+  }
   const isIos = config.deviceType === 'ios'
-  const cliParams:string[] = []
-  config.output = config.output || {}
-  // cli & config 参数透传
+  const sourceMapUrl = config.sourceMapUrl || (isIos ? config?.output?.iosSourceMapUrl : config?.output?.androidSourceMapUrl)
+  const sourcemapOutput = config.sourcemapOutput || (isIos ? config?.output?.iosSourcemapOutput : config?.output?.androidSourcemapOutput)
+  const sourcemapSourcesRoot = config.sourcemapSourcesRoot || (isIos ? config?.output?.iosSourcemapSourcesRoot : config?.output?.androidSourcemapSourcesRoot)
+  sourcemapOutput && fse.ensureDirSync(path.dirname(sourcemapOutput))
+  return {
+    sourceMapUrl,
+    sourcemapOutput,
+    sourcemapSourcesRoot
+  }
+}
+
+// TODO: 返回值
+// HttpServer | {code: string, map: string}
+// IBuildConfig
+export default async function build (_appPath: string, config: any): Promise<any> {
+  process.env.TARO_ENV = PLATFORMS.RN
+  // TODO:新增环境变量是否可以在metro构建过程中可以访问到？
+  const entry = getRNConfigEntry()
+  config.entry = entry
+  const metroConfig = await getMetroConfig(config)
+  const sourceRoot = config.sourceRoot || 'src'
+
+  const commonOptions = {
+    platform: config.deviceType,
+    minify: process.env.NODE_ENV === 'production' || !config.isWatch,
+    dev: config.isWatch
+  }
   if (config.resetCache) {
-    cliParams.push('--reset-cache')
+    metroConfig.resetCache = config.resetCache
   }
   if (config.publicPath) {
-    cliParams.push('--public-path', config.publicPath)
+    metroConfig.transformer.publicPath = config.publicPath
   }
+  metroConfig.reporter = new TerminalReporter(entry, sourceRoot, metroConfig.cacheStores[0])
+
   const onFinish = function (error?) {
     if (typeof config.onBuildFinish === 'function') {
       config.onBuildFinish({
@@ -48,79 +108,145 @@ export default async function build (_appPath: string, config: any): Promise<any
     }
     if (error instanceof Error) throw error
   }
+
   if (config.isBuildNativeComp) {
     return buildComponent(
       _appPath,
       config
     )
-  }
-  confirmFiles()
-  if (config.isWatch) {
+  } else if (config.isWatch) {
+    if (!metroConfig.server || (metroConfig.server.useGlobalHotkey === undefined)) {
+      if (!metroConfig.server) {
+        metroConfig.server = {}
+      }
+      metroConfig.server.useGlobalHotkey = true
+    }
     if (config.port) {
-      cliParams.push('--port', config.port)
+      metroConfig.server.port = config.port
     }
-    try {
-      spawn(npxCmd, ['react-native', 'start'].concat(cliParams), {
-        stdio: 'inherit'
+
+    const {
+      middleware,
+      messageSocketEndpoint,
+      websocketEndpoints
+    } = createDevServerMiddleware({
+      port: metroConfig.server.port,
+      watchFolders: metroConfig.watchFolders
+    })
+    metroConfig.server.enhanceMiddleware = (metroMiddleware, metroServer) => {
+      metroConfig.reporter.metroServerInstance = metroServer
+
+      // bundle路由只识别/index.bundle
+      return middleware.use((req, res, next) => {
+        // eslint-disable-next-line node/no-deprecated-api
+        const urlObj = url.parse(req.url)
+        if (/\/[^]+.bundle/.test(urlObj.pathname || '') && (urlObj.pathname || '').toLowerCase() !== '/index.bundle') {
+          res.writeHead(400)
+          res.end('Please access /index.bundle for entry bundling.')
+        } else if (/^\/debugger-ui\//.test(urlObj.pathname || '')) {
+          next()
+        } else {
+          metroMiddleware(req, res, next)
+        }
       })
-      if(config.qr) {
-        previewDev({
-          port: parseInt(config.port) || 8081,
-        })
+    }
+
+    // 支持host
+    return Metro.runServer(metroConfig, {
+      ...commonOptions,
+      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')
+
+      readline.emitKeypressEvents(process.stdin)
+      process.stdin.setRawMode && process.stdin.setRawMode(true)
+      process.stdin.on('keypress', (_key, data) => {
+        const { ctrl, name } = data
+        if (name === 'r') {
+          messageSocketEndpoint.broadcast('reload')
+          console.log('Reloading app...')
+        } else if (name === 'd') {
+          messageSocketEndpoint.broadcast('devMenu')
+          console.log('Opening developer menu...')
+        } else if (ctrl && (name === 'c')) {
+          process.exit()
+        }
+      })
+
+      if (config.qr) {
+        const host = getOpenHost()
+        if (host) {
+          const url = `taro://${host}:${metroConfig.server.port}`
+          console.log(PLAYGROUNDINFO)
+          console.log(`print qrcode of '${url}':`)
+          qr.generate(url, { small: !isWin })
+        } else {
+          console.log('print qrcode error: host not found.')
+        }
       }
       onFinish(null)
-    } catch(e) {
+      return server
+    }).catch(e => {
       onFinish(e)
-    }
+    })
   } else {
-    const defaultOutputDir = join(process.cwd(), config.outputRoot || 'dist')
-    const defaultBundleOutput = join(defaultOutputDir, 'index.bundle')
-    const bundleOutput = (config.bundleOutput ? config.bundleOutput : (isIos ? config.output.ios : config.output.android)) || defaultBundleOutput
-    fse.ensureDirSync(dirname(bundleOutput))
-    cliParams.push('--bundle-output', bundleOutput)
-
-    const sourcemapOutput = config.sourcemapOutput ? config.sourcemapOutput : (isIos ? config.output.iosSourcemapOutput : config.output.androidSourcemapOutput)
-    if (sourcemapOutput) {
-      cliParams.push('--sourcemap-output', sourcemapOutput)
+    const options = {
+      ...commonOptions,
+      entry: './index',
+      out: concatOutputFileName(config)
     }
-    const sourceMapUrl = config.sourceMapUrl ? config.sourceMapUrl : (isIos ? config.output.iosSourceMapUrl : config.output.androidSourceMapUrl)
-    if (sourceMapUrl) {
-      cliParams.push('--sourcemap-use-absolute-path', sourceMapUrl)
+    const savedBuildFunc = outputBundle.build
+    outputBundle.build = async (packagerClient, requestOptions) => {
+      const resolutionFn = await getResolveDependencyFn(packagerClient.getBundler().getBundler(), requestOptions.platform)
+      // try for test case build_noWatch
+      try {
+        requestOptions.entryFile = resolutionFn(metroConfig.projectRoot, requestOptions.entryFile)
+      } catch (e) {} // eslint-disable-line no-empty
+      return savedBuildFunc(packagerClient, requestOptions)
     }
 
-    const sourcemapSourcesRoot = config.sourcemapSourcesRoot ? config.sourcemapSourcesRoot : (isIos ? config.output.iosSourcemapSourcesRoot : config.output.androidSourcemapSourcesRoot)
-    if (sourcemapSourcesRoot) {
-      cliParams.push('--sourcemap-sources-root', sourcemapSourcesRoot)
-    }
+    const server = new Server(metroConfig)
 
-    const assetsDest = (config.assetsDest ? config.assetsDest : (isIos ? config.output.iosAssetsDest : config.output.androidAssetsDest)) || defaultOutputDir
-    cliParams.push('--assets-dest', assetsDest)
+    const sourceMapOption = getOutputSourceMapOption(config)
 
     try {
-      spawn(npxCmd, [
-        'react-native',
-        'bundle',
-        '--platform',
-        config.deviceType,
-        '--dev',
-        'false',
-        '--entry-file',
-        'index.js'
-      ].concat(cliParams), {
-        stdio: 'inherit'
+      const requestOptions = {
+        ...commonOptions,
+        ...sourceMapOption,
+        entryFile: options.entry,
+        inlineSourceMap: false,
+        createModuleIdFactory: metroConfig.serializer.createModuleIdFactory
+      }
+      const bundle = await outputBundle.build(server, requestOptions)
+      const outputOptions = {
+        ...commonOptions,
+        ...sourceMapOption,
+        bundleOutput: options.out
+      }
+      await outputBundle.save(bundle, outputOptions, console.log)
+
+      // Save the assets of the bundle
+      const outputAssets = await server.getAssets({
+        ...Server.DEFAULT_BUNDLE_OPTIONS,
+        ...requestOptions
       })
-      if(config.qr) {
-        process.on('beforeExit', () => {
-          previewProd({
-            out: bundleOutput,
-            platform: config.deviceType,
-            assetsDest: assetsDest,
+      const assetsDest = concatOutputAssetsDest(config)
+      return await saveAssets(outputAssets, options.platform, assetsDest).then(() => {
+        if (config.qr) {
+          preview({
+            out: options.out,
+            assetsDest,
+            platform: options.platform
           })
-        })
-      }
-      onFinish(null)
-    } catch(e) {
+        }
+        onFinish(null)
+      })
+    } catch (e) {
       onFinish(e)
+    } finally {
+      server.end()
     }
   }
 }

package/src/utils.ts

@@ -0,0 +1,27 @@
+import { networkInterfaces } from 'os'
+
+export function getOpenHost () {
+  let result
+  const interfaces = networkInterfaces()
+  for (const devName in interfaces) {
+    const isEnd = interfaces[devName]?.some(item => {
+      // 取IPv4, 不为127.0.0.1的内网ip
+      if (['IPv4', 4, '4'].includes(item.family) && item.address !== '127.0.0.1' && !item.internal) {
+        result = item.address
+        return true
+      }
+      return false
+    })
+    // 若获取到ip, 结束遍历
+    if (isEnd) {
+      break
+    }
+  }
+  return result
+}
+
+export const PLAYGROUNDREPO = 'https://github.com/wuba/taro-playground'
+
+export const PLAYGROUNDINFO = `use [Taro Playground App](${PLAYGROUNDREPO}) to scan`
+
+export const isWin = /^win/.test(process.platform)

package/templates/index.js

@@ -1 +0,0 @@
-import '@tarojs/rn-supporter/entry-file.js'

package/templates/metro.config.js

@@ -1,8 +0,0 @@
-const { mergeConfig } = require('metro-config')
-const { getMetroConfig } = require('@tarojs/rn-supporter')
-
-module.exports = mergeConfig({
-  // custom your metro config here
-  // https://facebook.github.io/metro/docs/configuration
-  resolver: {}
-}, getMetroConfig())