@tamagui/build 1.61.3 → 1.62.0

package/esbuildAliasPlugin.js

@@ -0,0 +1,42 @@
+/**
+ * alias plugin
+ * @description
+ * config example:
+ * ```
+ * {
+ *   '@lib': '/some/absolute/path'
+ * }
+ * ```
+ * then `import { something } from '@lib/xxx'` will be transformed to
+ * `import { something } from '/some/absolute/path/xxx'`
+ * @param {object} config
+ */
+const aliasPlugin = (config) => {
+  const alias = config && Object.keys(config)
+  return {
+    name: 'path-alias',
+
+    setup(build) {
+      if (!alias || !alias.length) {
+        return
+      }
+      const main = (k, args) => {
+        const targetPath = config[k].replace(/\/$/, '')
+        return {
+          path: targetPath,
+        }
+      }
+
+      alias.forEach((k) => {
+        build.onResolve({ filter: new RegExp(`^.*${k}$`) }, (args) => {
+          return main(k, args)
+        })
+        build.onResolve({ filter: new RegExp(`^.*\\/${k}\\/.*$`) }, (args) => {
+          return main(k, args)
+        })
+      })
+    },
+  }
+}
+
+module.exports = aliasPlugin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/build",
-  "version": "1.61.3",
+  "version": "1.62.0",
   "bin": {
     "tamagui-build": "tamagui-build.js"
   },

package/tamagui-build.js

@@ -8,6 +8,7 @@ const fg = require('fast-glob')
 const createExternalPlugin = require('./externalNodePlugin')
 const debounce = require('lodash.debounce')
 const { dirname } = require('path')
+const alias = require('./esbuildAliasPlugin')
 
 const jsOnly = !!process.env.JS_ONLY
 const skipJS = !!(process.env.SKIP_JS || false)
@@ -15,7 +16,6 @@ const shouldSkipTypes = !!(
   process.argv.includes('--skip-types') || process.env.SKIP_TYPES
 )
 const shouldBundle = !!process.argv.includes('--bundle')
-const shouldIncludeMjs = !!process.argv.includes('--output-mjs')
 const shouldBundleNodeModules = !!process.argv.includes('--bundle-modules')
 const shouldClean = !!process.argv.includes('clean')
 const shouldCleanBuildOnly = !!process.argv.includes('clean:build')
@@ -24,12 +24,20 @@ const declarationToRoot = !!process.argv.includes('--declaration-root')
 const ignoreBaseUrl = process.argv.includes('--ignore-base-url')
 const baseUrlIndex = process.argv.indexOf('--base-url')
 const tsProjectIndex = process.argv.indexOf('--ts-project')
-const baseUrl = baseUrlIndex > -1 && process.argv[baseUrlIndex + 1] ? process.argv[baseUrlIndex + 1] : '.'
-const tsProject = tsProjectIndex > -1 && process.argv[tsProjectIndex + 1] ? process.argv[tsProjectIndex + 1] : null
+const baseUrl =
+  baseUrlIndex > -1 && process.argv[baseUrlIndex + 1]
+    ? process.argv[baseUrlIndex + 1]
+    : '.'
+const tsProject =
+  tsProjectIndex > -1 && process.argv[tsProjectIndex + 1]
+    ? process.argv[tsProjectIndex + 1]
+    : null
 
 const pkg = fs.readJSONSync('./package.json')
 let shouldSkipInitialTypes = !!process.env.SKIP_TYPES_INITIAL
 const pkgMain = pkg.main
+const pkgSource = pkg.source
+const bundleNative = pkg.tamagui?.bundleNative
 const pkgModule = pkg.module
 const pkgModuleJSX = pkg['module:jsx']
 const pkgTypes = Boolean(pkg['types'] || pkg['typings'])
@@ -76,9 +84,9 @@ if (shouldWatch) {
 
   // do one js build but not types
   build({
-    skipTypes: true
+    skipTypes: true,
   })
-  
+
   chokidar
     // prevent infinite loop but cause race condition if you just build directly
     .watch('src', {
@@ -128,7 +136,7 @@ async function buildTsc() {
     shouldSkipInitialTypes = false
     return
   }
-  
+
   const targetDir = 'types'
   try {
     // typescripts build cache messes up when doing declarationOnly
@@ -140,7 +148,7 @@ async function buildTsc() {
     const tsProjectFlag = tsProject ? ` --project ${tsProject}` : ''
     const cmd = `tsc${baseUrlFlag}${tsProjectFlag} --outDir ${targetDir} --rootDir src ${declarationToRootFlag}--emitDeclarationOnly --declarationMap`
 
-    // console.log('\x1b[2m$', `npx ${cmd}`)
+    console.log('\x1b[2m$', `npx ${cmd}`)
     await exec('npx', cmd.split(' '))
   } catch (err) {
     // rome-ignore lint/suspicious/noConsoleLog: <explanation>
@@ -157,117 +165,173 @@ async function buildJs() {
   if (skipJS) {
     return
   }
-  let files = (await fg(['src/**/*.(m)?[jt]s(x)?', 'src/**/*.css'])).filter(
-    (x) => !x.includes('.d.ts')
-  )
+  let files = shouldBundle
+    ? [pkgSource || './src/index.ts']
+    : (await fg(['src/**/*.(m)?[jt]s(x)?', 'src/**/*.css'])).filter(
+        (x) => !x.includes('.d.ts')
+      )
   const externalPlugin = createExternalPlugin({
     skipNodeModulesBundle: true,
   })
 
   const external = shouldBundle ? ['@swc/*', '*.node'] : undefined
-  
+
   const start = Date.now()
   return await Promise.all([
+    // web output to cjs
     pkgMain
-      ? esbuildWriteIfChanged({
-          entryPoints: files,
-          outdir: flatOut ? 'dist' : 'dist/cjs',
-          bundle: shouldBundle,
-          external,
-          sourcemap: true,
-          sourcesContent: false,
-          target: 'node14',
-          keepNames: false,
-          format: 'cjs',
-          color: true,
-          allowOverwrite: true,
-          jsx: 'automatic',
-          logLevel: 'error',
-          plugins: shouldBundleNodeModules ? [] : [externalPlugin],
-          minify: process.env.MINIFY ? true : false,
-          platform: 'node',
-        })
+      ? esbuildWriteIfChanged(
+          {
+            entryPoints: files,
+            outdir: flatOut ? 'dist' : 'dist/cjs',
+            bundle: shouldBundle,
+            external,
+            target: 'node18',
+            format: 'cjs',
+            jsx: 'automatic',
+            plugins: shouldBundleNodeModules ? [] : [externalPlugin],
+            minify: process.env.MINIFY ? true : false,
+            platform: 'node',
+          },
+          {
+            platform: 'web',
+          }
+        )
       : null,
-    pkgModule
-      ? esbuildWriteIfChanged({
-          entryPoints: files,
-          outdir: flatOut ? 'dist' : 'dist/esm',
-          bundle: shouldBundle,
-          external,
-          sourcemap: true,
-          sourcesContent: false,
-          target: 'node16',
-          keepNames: false,
-          jsx: 'automatic',
-          allowOverwrite: true,
-          format: 'esm',
-          color: true,
-          logLevel: 'error',
-          minify: process.env.MINIFY ? true : false,
-          platform: shouldBundle ? 'node' : 'neutral',
-        })
+
+    // native output to cjs
+    pkgMain
+      ? esbuildWriteIfChanged(
+          {
+            entryPoints: files,
+            outdir: flatOut ? 'dist' : 'dist/cjs',
+            bundle: shouldBundle,
+            external,
+            target: 'node18',
+            format: 'cjs',
+            jsx: 'automatic',
+            plugins: shouldBundleNodeModules ? [] : [externalPlugin],
+            minify: process.env.MINIFY ? true : false,
+            platform: 'node',
+          },
+          {
+            platform: 'native',
+          }
+        )
       : null,
-    pkgModule && shouldIncludeMjs
-      ? esbuildWriteIfChanged({
-          entryPoints: files,
-          outExtension: { '.js': '.mjs' },
-          outdir: flatOut ? 'dist' : 'dist/esm',
-          bundle: shouldBundle,
-          external,
-          sourcemap: true,
-          sourcesContent: false,
-          target: 'node16',
-          keepNames: false,
-          jsx: 'automatic',
-          allowOverwrite: true,
-          format: 'esm',
-          color: true,
-          logLevel: 'error',
-          minify: process.env.MINIFY ? true : false,
-          platform: shouldBundle ? 'node' : 'neutral',
-        })
+
+    // for tests to load native-mode from node
+    bundleNative
+      ? esbuildWriteIfChanged(
+          {
+            entryPoints: [bundleNative],
+            outdir: 'dist',
+            bundle: true,
+            external,
+            target: 'node18',
+            format: 'cjs',
+            jsx: 'automatic',
+            plugins: [
+              alias({
+                '@tamagui/web': require.resolve('@tamagui/web/native'),
+                'react-native': require.resolve('@tamagui/fake-react-native'),
+                'react-native/Libraries/Pressability/Pressability': require.resolve(
+                  '@tamagui/fake-react-native'
+                ),
+                'react-native/Libraries/Pressability/usePressability': require.resolve(
+                  '@tamagui/fake-react-native'
+                ),
+                'react-native-safe-area-context': require.resolve(
+                  '@tamagui/fake-react-native'
+                ),
+                'react-native-gesture-handler': require.resolve('@tamagui/proxy-worm'),
+              }),
+            ],
+            external: ['react', 'react-dom'],
+            resolveExtensions: [
+              '.native.ts',
+              '.native.tsx',
+              '.native.js',
+              '.ts',
+              '.tsx',
+              '.js',
+              '.jsx',
+            ],
+            minify: process.env.MINIFY ? true : false,
+            define: {
+              'process.env.TAMAGUI_IS_CORE_NODE': '"1"',
+            },
+          },
+          {
+            platform: 'native',
+          }
+        )
       : null,
-    pkgModuleJSX && shouldIncludeMjs
-      ? esbuildWriteIfChanged({
-          // only diff is jsx preserve and outdir
-          jsx: 'preserve',
-          outdir: flatOut ? 'dist' : 'dist/jsx',
-          outExtension: { '.js': '.mjs' },
-          entryPoints: files,
-          bundle: shouldBundle,
-          external,
-          sourcemap: true,
-          sourcesContent: false,
-          allowOverwrite: true,
-          target: 'es2020',
-          keepNames: false,
-          format: 'esm',
-          color: true,
-          logLevel: 'error',
-          minify: process.env.MINIFY ? true : false,
-          platform: 'neutral',
-        })
+
+    // web output to esm
+    pkgModule
+      ? esbuildWriteIfChanged(
+          {
+            entryPoints: files,
+            outdir: flatOut ? 'dist' : 'dist/esm',
+            bundle: shouldBundle,
+            external,
+            target: 'esnext',
+            jsx: 'automatic',
+            allowOverwrite: true,
+            format: 'esm',
+            minify: process.env.MINIFY ? true : false,
+            platform: shouldBundle ? 'node' : 'neutral',
+          },
+          {
+            platform: 'web',
+          }
+        )
       : null,
+
+    // jsx web
     pkgModuleJSX
-      ? esbuildWriteIfChanged({
-          // only diff is jsx preserve and outdir
-          jsx: 'preserve',
-          outdir: flatOut ? 'dist' : 'dist/jsx',
-          entryPoints: files,
-          bundle: shouldBundle,
-          sourcemap: true,
-          sourcesContent: false,
-          allowOverwrite: true,
-          target: 'es2020',
-          keepNames: false,
-          format: 'esm',
-          color: true,
-          logLevel: 'error',
-          minify: process.env.MINIFY ? true : false,
-          platform: 'neutral',
-        })
+      ? esbuildWriteIfChanged(
+          {
+            // only diff is jsx preserve and outdir
+            jsx: 'preserve',
+            outdir: flatOut ? 'dist' : 'dist/jsx',
+            entryPoints: files,
+            bundle: shouldBundle,
+            allowOverwrite: true,
+            target: 'esnext',
+            format: 'esm',
+            minify: process.env.MINIFY ? true : false,
+            platform: 'neutral',
+          },
+          {
+            platform: 'web',
+          }
+        )
+      : null,
+
+    // jsx native
+    pkgModuleJSX
+      ? esbuildWriteIfChanged(
+          {
+            // only diff is jsx preserve and outdir
+            jsx: 'preserve',
+            outdir: flatOut ? 'dist' : 'dist/jsx',
+            entryPoints: files,
+            bundle: shouldBundle,
+            allowOverwrite: true,
+            target: 'node18',
+            format: 'esm',
+            minify: process.env.MINIFY ? true : false,
+            platform: 'neutral',
+          },
+          {
+            platform: 'native',
+          }
+        )
       : null,
   ]).then(() => {
+    // rome-ignore lint/suspicious/noConsoleLog: <explanation>
     if (process.env.DEBUG) console.log(`built js in ${Date.now() - start}ms`)
   })
 }
@@ -277,27 +341,112 @@ async function buildJs() {
  * @param {esbuild.BuildOptions} opts
  * @returns {Promise<void>}
  */
-async function esbuildWriteIfChanged(opts) {
-  if (shouldWatch) {
-    const built = await esbuild.build({ ...opts, write: false })
-    if (!built.outputFiles) {
-      return
-    }
-    await Promise.all(
-      built.outputFiles.map(async (file) => {
-        const outDir = dirname(file.path)
-        await fs.ensureDir(outDir)
-        const outString = new TextDecoder().decode(file.contents)
+async function esbuildWriteIfChanged(
+  /** @type { import('esbuild').BuildOptions } */
+  opts,
+  { platform } = {
+    platform: '',
+  }
+) {
+  if (!shouldWatch && !platform) {
+    return await esbuild.build(opts)
+  }
+
+  const built = await esbuild.build({
+    ...opts,
+
+    treeShaking: true,
+    minifySyntax: true,
+    // minifyIdentifiers: true,
+    write: false,
+    color: true,
+    allowOverwrite: true,
+    color: true,
+    allowOverwrite: true,
+    keepNames: false,
+    sourcemap: true,
+    sourcesContent: false,
+    logLevel: 'error',
+
+    ...(platform === 'web' && {
+      tsconfigRaw: {
+        compilerOptions: {
+          paths: {
+            'react-native': ['react-native-web'],
+          },
+        },
+      },
+    }),
+
+    define: {
+      ...(platform && {
+        'process.env.TAMAGUI_TARGET': `"${platform}"`,
+      }),
+      ...opts.define,
+    },
+  })
+
+  if (!built.outputFiles) {
+    return
+  }
+
+  const nativeFilesMap = Object.fromEntries(
+    built.outputFiles.flatMap((p) => {
+      if (p.path.includes('.native.js')) {
+        return [[p.path, true]]
+      }
+      return []
+    })
+  )
+
+  await Promise.all(
+    built.outputFiles.map(async (file) => {
+      let outPath = file.path
+
+      if (outPath.endsWith('.js') || outPath.endsWith('.js.map')) {
+        const [_, extPlatform] =
+          outPath.match(/(web|native|ios|android)\.js(\.map)?$/) ?? []
+
+        if (platform === 'native') {
+          if (!extPlatform && nativeFilesMap[outPath.replace('.js', '.native.js')]) {
+            // if native exists, avoid outputting non-native
+            return
+          }
+
+          if (extPlatform === 'web') {
+            return
+          }
+          if (!extPlatform) {
+            outPath = outPath.replace('.js', '.native.js')
+          }
+        }
+
+        if (platform === 'web') {
+          if (
+            extPlatform === 'native' ||
+            extPlatform === 'android' ||
+            extPlatform === 'ios'
+          ) {
+            return
+          }
+        }
+      }
+
+      const outDir = dirname(outPath)
+
+      await fs.ensureDir(outDir)
+      const outString = new TextDecoder().decode(file.contents)
+
+      if (shouldWatch) {
         if (
-          !(await fs.pathExists(file.path)) ||
-          (await fs.readFile(file.path, 'utf8')) !== outString
+          !(await fs.pathExists(outPath)) ||
+          (await fs.readFile(outPath, 'utf8')) !== outString
         ) {
-          // console.log('write', file.path)
-          await fs.writeFile(file.path, outString)
+          await fs.writeFile(outPath, outString)
         }
-      })
-    )
-  } else {
-    await esbuild.build(opts)
-  }
+      } else {
+        await fs.writeFile(outPath, outString)
+      }
+    })
+  )
 }