@tamagui/static 1.61.2 → 1.62.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/static",
-  "version": "1.61.2",
+  "version": "1.62.0",
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "main": "dist/cjs/index.js",
@@ -35,17 +35,17 @@
     "@babel/runtime": "^7.21.5",
     "@babel/traverse": "^7.21.5",
     "@babel/types": "^7.21.5",
-    "@tamagui/build": "1.61.2",
-    "@tamagui/cli-color": "1.61.2",
-    "@tamagui/config-default-node": "1.61.2",
-    "@tamagui/core-node": "1.61.2",
-    "@tamagui/fake-react-native": "1.61.2",
-    "@tamagui/generate-themes": "1.61.2",
-    "@tamagui/helpers": "1.61.2",
-    "@tamagui/helpers-node": "1.61.2",
-    "@tamagui/proxy-worm": "1.61.2",
-    "@tamagui/shorthands": "1.61.2",
-    "@tamagui/types": "1.61.2",
+    "@tamagui/build": "1.62.0",
+    "@tamagui/cli-color": "1.62.0",
+    "@tamagui/config-default": "1.62.0",
+    "@tamagui/core": "1.62.0",
+    "@tamagui/fake-react-native": "1.62.0",
+    "@tamagui/generate-themes": "1.62.0",
+    "@tamagui/helpers": "1.62.0",
+    "@tamagui/helpers-node": "1.62.0",
+    "@tamagui/proxy-worm": "1.62.0",
+    "@tamagui/shorthands": "1.62.0",
+    "@tamagui/types": "1.62.0",
     "babel-literal-to-ast": "^2.1.0",
     "esbuild": "^0.19.0",
     "esbuild-register": "^3.4.2",
@@ -55,13 +55,13 @@
     "invariant": "^2.2.4",
     "lodash": "^4.17.21",
     "react-native-web": "^0.19.6",
-    "react-native-web-internals": "1.61.2",
-    "react-native-web-lite": "1.61.2"
+    "react-native-web-internals": "1.62.0",
+    "react-native-web-lite": "1.62.0"
   },
   "devDependencies": {
     "@babel/plugin-syntax-typescript": "^7.21.4",
     "@expo/match-media": "^0.4.0",
-    "@tamagui/test-design-system": "1.61.2",
+    "@tamagui/test-design-system": "1.62.0",
     "@testing-library/react": "^14.0.0",
     "@types/babel__generator": "^7.6.4",
     "@types/babel__traverse": "^7.18.2",

package/src/extractor/bundle.ts

@@ -3,6 +3,8 @@ import { basename, dirname, join } from 'path'
 import esbuild from 'esbuild'
 import { pathExists, stat, writeFile } from 'fs-extra'
 
+import { TamaguiPlatform } from '../types'
+import { esbuildAliasPlugin } from './esbuildAliasPlugin'
 import { resolveWebOrNativeSpecificEntry } from './loadTamagui'
 
 /**
@@ -17,9 +19,9 @@ type Props = Omit<Partial<esbuild.BuildOptions>, 'entryPoints'> & {
 
 function getESBuildConfig(
   { entryPoints, resolvePlatformSpecificEntries, ...options }: Props,
+  platform: TamaguiPlatform,
   aliases?: Record<string, string>
 ) {
-  const alias = require('@tamagui/core-node').aliasPlugin
   if (process.env.DEBUG?.startsWith('tamagui')) {
     // rome-ignore lint/suspicious/noConsoleLog: ok
     console.log(`Building`, entryPoints)
@@ -71,7 +73,7 @@ function getESBuildConfig(
         setup(build) {
           build.onResolve({ filter: /@tamagui\/core/ }, (args) => {
             return {
-              path: '@tamagui/core-node',
+              path: platform === 'native' ? '@tamagui/core/native' : '@tamagui/core',
               external: true,
             }
           })
@@ -83,7 +85,7 @@ function getESBuildConfig(
           })
           build.onResolve({ filter: /@tamagui\/web/ }, (args) => {
             return {
-              path: '@tamagui/core-node',
+              path: platform === 'native' ? '@tamagui/core/native' : '@tamagui/core',
               external: true,
             }
           })
@@ -96,7 +98,7 @@ function getESBuildConfig(
           })
         },
       },
-      alias({
+      esbuildAliasPlugin({
         ...aliases,
       }),
     ],
@@ -106,16 +108,16 @@ function getESBuildConfig(
   return res
 }
 
-export async function bundle(props: Props, aliases?: Record<string, string>) {
+export async function bundle(
+  props: Props,
+  platform: TamaguiPlatform,
+  aliases?: Record<string, string>
+) {
   await asyncLock(props)
-  const config = getESBuildConfig(props, aliases)
+  const config = getESBuildConfig(props, platform, aliases)
   return esbuild.build(config)
 }
 
-export function bundleSync(props: Props, aliases?: Record<string, string>) {
-  return esbuild.buildSync(getESBuildConfig(props, aliases))
-}
-
 // until i do fancier things w plugins:
 async function asyncLock(props: Props) {
   const lockFile = join(dirname(props.outfile), basename(props.outfile, '.lock'))

package/src/extractor/bundleConfig.ts

@@ -9,7 +9,7 @@ import type { StaticConfig, TamaguiInternalConfig } from '@tamagui/web'
 import esbuild from 'esbuild'
 import { ensureDir, removeSync, writeFileSync } from 'fs-extra'
 
-import { registerRequire } from '../require'
+import { registerRequire } from '../registerRequire'
 import { TamaguiOptions } from '../types'
 import { babelParse } from './babelParse'
 import { bundle } from './bundle'
@@ -38,7 +38,6 @@ export type TamaguiProjectInfo = {
 const external = [
   '@tamagui/core',
   '@tamagui/web',
-  '@tamagui/core-node',
   'react',
   'react-dom',
   'react-native-svg',
@@ -124,23 +123,29 @@ export async function bundleConfig(props: TamaguiOptions) {
 
     await Promise.all([
       props.config
-        ? bundle({
-            entryPoints: [configEntry],
+        ? bundle(
+            {
+              entryPoints: [configEntry],
+              external,
+              outfile: configOutPath,
+              target: 'node16',
+              ...esbuildExtraOptions,
+            },
+            props.platform
+          )
+        : null,
+      ...baseComponents.map((componentModule, i) => {
+        return bundle(
+          {
+            entryPoints: [componentModule],
+            resolvePlatformSpecificEntries: true,
             external,
-            outfile: configOutPath,
+            outfile: componentOutPaths[i],
             target: 'node16',
             ...esbuildExtraOptions,
-          })
-        : null,
-      ...baseComponents.map((componentModule, i) => {
-        return bundle({
-          entryPoints: [componentModule],
-          resolvePlatformSpecificEntries: true,
-          external,
-          outfile: componentOutPaths[i],
-          target: 'node16',
-          ...esbuildExtraOptions,
-        })
+          },
+          props.platform
+        )
       }),
     ])
 
@@ -160,14 +165,14 @@ export async function bundleConfig(props: TamaguiOptions) {
     )
 
     let out
-    const unregisterTamagui = registerRequire()
+    const { unregister } = registerRequire(props.platform)
     try {
       out = require(configOutPath)
     } catch (err) {
       // rome-ignore lint/complexity/noUselessCatch: <explanation>
       throw err
     } finally {
-      unregisterTamagui()
+      unregister()
     }
     const config = out.default || out
 
@@ -203,7 +208,7 @@ export async function bundleConfig(props: TamaguiOptions) {
     // always load core so we can optimize if directly importing
     const coreComponents = loadComponents({
       ...props,
-      components: ['@tamagui/core-node'],
+      components: ['@tamagui/core'],
     })
     if (coreComponents) {
       coreComponents[0].moduleName = '@tamagui/core'
@@ -248,7 +253,7 @@ export function loadComponents(props: TamaguiOptions): null | LoadedComponents[]
     return cacheComponents[key]
   }
 
-  const unregister = registerRequire()
+  const { unregister } = registerRequire(props.platform)
 
   try {
     const info: LoadedComponents[] = componentsModules.flatMap((name) => {

package/src/extractor/createEvaluator.ts

@@ -3,13 +3,11 @@ import vm from 'vm'
 import generate from '@babel/generator'
 import { NodePath } from '@babel/traverse'
 import * as t from '@babel/types'
-import { createCSSVariable } from '@tamagui/core-node'
 import esbuild from 'esbuild'
 
 import { FAILED_EVAL } from '../constants'
 import { TamaguiOptionsWithFileInfo } from '../types'
 import { evaluateAstNode } from './evaluateAstNode'
-import { isValidThemeHook } from './extractHelpers'
 
 export function createEvaluator({
   props,
@@ -26,20 +24,6 @@ export function createEvaluator({
 }) {
   // called when evaluateAstNode encounters a dynamic-looking prop
   const evalFn = (n: t.Node) => {
-    // themes
-    if (
-      t.isMemberExpression(n) &&
-      t.isIdentifier(n.property) &&
-      traversePath &&
-      isValidThemeHook(props, traversePath, n, sourcePath)
-    ) {
-      const key = n.property.name
-      if (shouldPrintDebug) {
-        // rome-ignore lint/suspicious/noConsoleLog: ok
-        console.log('    > found theme prop', key)
-      }
-      return createCSSVariable(key)
-    }
     // variable
     if (t.isIdentifier(n) && typeof staticNamespace[n.name] !== 'undefined') {
       return staticNamespace[n.name]

package/src/extractor/createExtractor.ts

@@ -3,14 +3,6 @@ import { basename, relative } from 'path'
 
 import traverse, { NodePath, TraverseOptions } from '@babel/traverse'
 import * as t from '@babel/types'
-import {
-  expandStylesAndRemoveNullishValues,
-  getSplitStyles,
-  mediaQueryConfig,
-  propMapper,
-  proxyThemeVariables,
-  pseudoDescriptors,
-} from '@tamagui/core-node'
 import type {
   GetStyleState,
   PseudoStyles,
@@ -22,6 +14,7 @@ import type { ViewStyle } from 'react-native'
 import { createDOMProps } from 'react-native-web-internals'
 
 import { FAILED_EVAL } from '../constants'
+import { requireTamaguiCore } from '../helpers/requireTamaguiCore'
 import type {
   ExtractedAttr,
   ExtractedAttrStyle,
@@ -187,6 +180,15 @@ export function createExtractor(
       ...restProps
     } = options
 
+    const {
+      expandStylesAndRemoveNullishValues,
+      getSplitStyles,
+      mediaQueryConfig,
+      propMapper,
+      proxyThemeVariables,
+      pseudoDescriptors,
+    } = requireTamaguiCore(target === 'html' ? 'web' : 'native')
+
     let shouldPrintDebug = options.shouldPrintDebug || false
 
     if (disable === true || (Array.isArray(disable) && disable.includes(sourcePath))) {
@@ -1646,7 +1648,7 @@ export function createExtractor(
                         t.identifier('Theme')
                       ),
                     ],
-                    t.stringLiteral('@tamagui/core')
+                    t.stringLiteral('@tamagui/web')
                   )
                 )
               }
@@ -1929,6 +1931,7 @@ export function createExtractor(
                 componentState,
                 {
                   ...styleProps,
+                  noClassNames: true,
                   fallbackProps: completeProps,
                 },
                 undefined,

package/src/extractor/esbuildAliasPlugin.ts

@@ -0,0 +1,40 @@
+/**
+ * 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
+ */
+export const esbuildAliasPlugin = (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)
+        })
+      })
+    },
+  }
+}

package/src/extractor/extractMediaStyle.ts

@@ -1,13 +1,10 @@
 import { NodePath } from '@babel/traverse'
 import * as t from '@babel/types'
-import {
-  TamaguiInternalConfig,
-  getStylesAtomic,
-  mediaObjectToString,
-} from '@tamagui/core-node'
+import type { TamaguiInternalConfig } from '@tamagui/core'
 import type { ViewStyle } from 'react-native'
 
 import { MEDIA_SEP } from '../constants'
+import { requireTamaguiCore } from '../helpers/requireTamaguiCore'
 import type { StyleObject, TamaguiOptionsWithFileInfo, Ternary } from '../types'
 import { isPresent, isValidImport } from './extractHelpers'
 
@@ -20,6 +17,7 @@ export function extractMediaStyle(
   importance = 0,
   shouldPrintDebug: boolean | 'verbose' = false
 ) {
+  const { getStylesAtomic, mediaObjectToString } = requireTamaguiCore('web')
   const mt = getMediaQueryTernary(props, ternary, jsxPath, sourcePath)
   if (!mt) {
     return null

package/src/extractor/extractToClassNames.ts

@@ -4,10 +4,10 @@ import * as util from 'util'
 
 import generate from '@babel/generator'
 import * as t from '@babel/types'
-import { getStylesAtomic } from '@tamagui/core-node'
 import { concatClassName } from '@tamagui/helpers'
 import type { ViewStyle } from 'react-native'
 
+import { requireTamaguiCore } from '../helpers/requireTamaguiCore'
 import type { ClassNameObject, StyleObject, TamaguiOptions, Ternary } from '../types'
 import { babelParse } from './babelParse'
 import { buildClassName } from './buildClassName'
@@ -52,6 +52,7 @@ export async function extractToClassNames({
   shouldPrintDebug,
 }: ExtractToClassNamesProps): Promise<ExtractedResponse | null> {
   const tm = timer()
+  const { getStylesAtomic } = requireTamaguiCore('web')
 
   if (sourcePath?.includes('node_modules')) {
     return null

package/src/extractor/generateTamaguiStudioConfig.ts

@@ -1,10 +1,10 @@
 import { join } from 'path'
 
-import { getVariableValue } from '@tamagui/core-node'
 import { generateThemes, writeGeneratedThemes } from '@tamagui/generate-themes'
 import { TamaguiOptions } from '@tamagui/types'
 import fs, { readFile } from 'fs-extra'
 
+import { requireTamaguiCore } from '../helpers/requireTamaguiCore'
 import { BundledConfig, getBundledConfig } from './bundleConfig'
 
 const tamaguiDir = join(process.cwd(), '.tamagui')
@@ -104,6 +104,8 @@ function transformConfig(config: BundledConfig) {
     return null
   }
 
+  const { getVariableValue } = requireTamaguiCore('web')
+
   // ensure we don't mangle anything in the original
   const next = cloneDeepSafe(config, {
     validStyles: true,

package/src/extractor/loadTamagui.ts

@@ -1,15 +1,15 @@
 import { basename, dirname, extname, join, relative, resolve } from 'path'
 
 import { Color, colorLog } from '@tamagui/cli-color'
-import { getDefaultTamaguiConfig } from '@tamagui/config-default-node'
-import { createTamagui } from '@tamagui/core-node'
+import { getDefaultTamaguiConfig } from '@tamagui/config-default'
 import { CLIResolvedOptions, CLIUserOptions, TamaguiOptions } from '@tamagui/types'
 import type { TamaguiInternalConfig } from '@tamagui/web'
 import esbuild from 'esbuild'
 import { existsSync, pathExists, readJSON, writeFile } from 'fs-extra'
 
 import { SHOULD_DEBUG } from '../constants'
-import { getNameToPaths, registerRequire } from '../require'
+import { requireTamaguiCore } from '../helpers/requireTamaguiCore'
+import { getNameToPaths, registerRequire } from '../registerRequire'
 import {
   TamaguiProjectInfo,
   getBundledConfig,
@@ -25,20 +25,21 @@ import { getTamaguiConfigPathFromOptionsConfig } from './getTamaguiConfigPathFro
 
 const getFilledOptions = (propsIn: Partial<TamaguiOptions>): TamaguiOptions => ({
   // defaults
+  platform: (process.env.TAMAGUI_TARGET as any) || 'web',
   config: 'tamagui.config.ts',
   components: ['tamagui'],
   ...(propsIn as Partial<TamaguiOptions>),
 })
 
 export async function loadTamagui(
-  propsIn: TamaguiOptions
+  propsIn: Partial<TamaguiOptions>
 ): Promise<TamaguiProjectInfo | null> {
-  const options = getFilledOptions(propsIn)
+  const props = getFilledOptions(propsIn)
 
   // this affects the bundled config so run it first
-  await generateThemesAndLog(options)
+  await generateThemesAndLog(props)
 
-  const bundleInfo = await getBundledConfig(options)
+  const bundleInfo = await getBundledConfig(props)
   if (!bundleInfo) {
     console.warn(
       `No bundled config generated, maybe an error in bundling. Set DEBUG=tamagui and re-run to get logs.`
@@ -50,16 +51,17 @@ export async function loadTamagui(
     return bundleInfo
   }
 
-  await generateTamaguiStudioConfig(options, bundleInfo)
+  await generateTamaguiStudioConfig(props, bundleInfo)
 
   // this depends on the config so run it after
   if (bundleInfo) {
-    // init core-node
+    const { createTamagui } = requireTamaguiCore(props.platform)
+    // init config
     const config = createTamagui(bundleInfo.tamaguiConfig) as any
 
-    if (options.outputCSS) {
-      colorLog(Color.FgYellow, `    ➡ [tamagui] outputCSS: ${options.outputCSS}\n`)
-      await writeFile(options.outputCSS, config.getCSS())
+    if (props.outputCSS) {
+      colorLog(Color.FgYellow, `    ➡ [tamagui] outputCSS: ${props.outputCSS}\n`)
+      await writeFile(props.outputCSS, config.getCSS())
     }
   }
 
@@ -93,16 +95,17 @@ const generateThemesAndLog = async (options: TamaguiOptions) => {
 }
 
 // loads in-process using esbuild-register
-export function loadTamaguiSync(propsIn: TamaguiOptions): TamaguiProjectInfo {
+export function loadTamaguiSync(propsIn: Partial<TamaguiOptions>): TamaguiProjectInfo {
   const props = getFilledOptions(propsIn)
 
-  const unregisterRequire = registerRequire()
-  try {
-    // lets shim require and avoid importing react-native + react-native-web
-    // we just need to read the config around them
-    process.env.IS_STATIC = 'is_static'
-    process.env.TAMAGUI_IS_SERVER = 'true'
+  // lets shim require and avoid importing react-native + react-native-web
+  // we just need to read the config around them
+  process.env.IS_STATIC = 'is_static'
+  process.env.TAMAGUI_IS_SERVER = 'true'
 
+  const { createTamagui } = requireTamaguiCore(props.platform)
+  const { unregister, tamaguiRequire } = registerRequire(props.platform)
+  try {
     const devValueOG = globalThis['__DEV__' as any]
     globalThis['__DEV__' as any] = process.env.NODE_ENV === 'development'
 
@@ -111,7 +114,7 @@ export function loadTamaguiSync(propsIn: TamaguiOptions): TamaguiProjectInfo {
       let tamaguiConfig: TamaguiInternalConfig | null = null
       if (props.config) {
         const configPath = getTamaguiConfigPathFromOptionsConfig(props.config)
-        const exp = require(configPath)
+        const exp = tamaguiRequire(configPath)
         tamaguiConfig = (exp['default'] || exp) as TamaguiInternalConfig
         if (!tamaguiConfig || !tamaguiConfig.parsed) {
           const confPath = require.resolve(configPath)
@@ -135,7 +138,7 @@ export function loadTamaguiSync(propsIn: TamaguiOptions): TamaguiProjectInfo {
       process.env.IS_STATIC = undefined
       globalThis['__DEV__' as any] = devValueOG
 
-      // set up core-node
+      // set up core
       if (props.config && tamaguiConfig) {
         createTamagui(tamaguiConfig as any)
       }
@@ -170,7 +173,7 @@ export function loadTamaguiSync(propsIn: TamaguiOptions): TamaguiProjectInfo {
       }
     }
   } finally {
-    unregisterRequire()
+    unregister()
   }
 }
 
@@ -198,6 +201,7 @@ export async function getOptions({
     debug,
     tsconfigPath,
     tamaguiOptions: {
+      platform: (process.env.TAMAGUI_TARGET as any) || 'web',
       components: ['tamagui'],
       ...tamaguiOptions,
       config: await getDefaultTamaguiConfigPath(root, tamaguiOptions?.config),

package/src/helpers/requireTamaguiCore.ts

@@ -0,0 +1,13 @@
+// this allows us to swap between core native and web in the same process:
+
+import { TamaguiPlatform } from '../types'
+
+export function requireTamaguiCore(
+  platform: TamaguiPlatform,
+  ogRequire: Function = require
+): typeof import('@tamagui/core') {
+  if (!platform) {
+    throw new Error(`No platform given to requireTamaguiCore`)
+  }
+  return ogRequire(platform === 'native' ? '@tamagui/core/native' : '@tamagui/core')
+}

package/src/index.ts

@@ -1,9 +1,2 @@
-export { TamaguiOptions } from './types'
-export { createExtractor } from './extractor/createExtractor'
-export { literalToAst } from './extractor/literalToAst'
-export * from './constants'
-export * from './extractor/extractToClassNames'
-export * from './extractor/extractHelpers'
-export * from './extractor/loadTamagui'
-export * from './require'
-export * from './getPragmaOptions'
+import './setup'
+export * from './static'