@tamagui/static 1.0.1-beta.56 → 1.0.1-beta.60

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@tamagui/static",
-  "version": "1.0.1-beta.56",
+  "version": "1.0.1-beta.60",
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
@@ -16,6 +17,7 @@
     "clean": "tamagui-build clean",
     "clean:build": "tamagui-build clean:build",
     "test": "NODE_ENV=test TAMAGUI_COMPILE_PROCESS=1 jest --forceExit",
+    "test:babel": "yarn test tests/babel-test.tsx",
     "test:debug": "NODE_ENV=test TAMAGUI_COMPILE_PROCESS=1 DEBUG_FILE=extract-specs.tsx DEBUG=1 yarn test",
     "test:watch": "NODE_ENV=test TAMAGUI_COMPILE_PROCESS=1 yarn test --watch",
     "test:update-snapshots": "NODE_ENV=test jest --updateSnapshot"
@@ -34,11 +36,11 @@
     "@babel/parser": "^7.15.7",
     "@babel/traverse": "^7.15.4",
     "@expo/match-media": "^0.3.0",
-    "@tamagui/build": "^1.0.1-beta.56",
-    "@tamagui/core-node": "^1.0.1-beta.56",
-    "@tamagui/fake-react-native": "^1.0.1-beta.56",
-    "@tamagui/helpers": "^1.0.1-beta.56",
-    "@tamagui/proxy-worm": "^1.0.1-beta.56",
+    "@tamagui/build": "^1.0.1-beta.60",
+    "@tamagui/core-node": "^1.0.1-beta.60",
+    "@tamagui/fake-react-native": "^1.0.1-beta.60",
+    "@tamagui/helpers": "^1.0.1-beta.60",
+    "@tamagui/proxy-worm": "^1.0.1-beta.60",
     "babel-literal-to-ast": "^2.1.0",
     "esbuild": "^0.14.36",
     "esbuild-register": "^3.3.2",
@@ -46,7 +48,7 @@
     "fs-extra": "^9.1.0",
     "invariant": "^2.2.4",
     "lodash": "^4.17.21",
-    "tamagui": "^1.0.1-beta.56"
+    "tamagui": "^1.0.1-beta.60"
   },
   "devDependencies": {
     "@babel/plugin-syntax-typescript": "^7.14.5",

package/src/constants.ts

@@ -0,0 +1,13 @@
+import findCacheDir from 'find-cache-dir'
+
+export const CSS_FILE_NAME = '__snack.css'
+
+// ENSURE THIS ISNT THE SAME AS THE SEPARATOR USED FOR STYLE KEYS
+// SEE matching one in concatClassName
+export const MEDIA_SEP = '_'
+
+// ensure cache dir
+export const cacheDir = findCacheDir({ name: 'tamagui', create: true })
+
+export const FAILED_EVAL = Symbol('failed_style_eval')
+export const CONCAT_CLASSNAME_IMPORT = 'concatClassName'

package/src/extractor/accessSafe.ts

@@ -0,0 +1,18 @@
+import * as t from '@babel/types'
+
+// accessSafe wraps memberExpressions in object/null checks
+// TODO: inject this as a function? this gets pretty repetitive
+export function accessSafe(obj: t.Expression, member: string): t.LogicalExpression {
+  return t.logicalExpression(
+    '&&',
+    t.logicalExpression(
+      '&&',
+      // typeof obj === 'object
+      t.binaryExpression('===', t.unaryExpression('typeof', obj), t.stringLiteral('object')),
+      // obj !== null
+      t.binaryExpression('!==', obj, t.nullLiteral())
+    ),
+    // obj.member
+    t.memberExpression(obj, t.identifier(member), false)
+  )
+}

package/src/extractor/babelParse.ts

@@ -0,0 +1,27 @@
+import * as babelParser from '@babel/parser'
+
+const plugins: babelParser.ParserPlugin[] = [
+  'asyncGenerators',
+  'classProperties',
+  'dynamicImport',
+  'functionBind',
+  'jsx',
+  'numericSeparator',
+  'objectRestSpread',
+  'optionalCatchBinding',
+  'decorators-legacy',
+  'typescript',
+  'optionalChaining',
+  'nullishCoalescingOperator',
+]
+
+export const parserOptions: babelParser.ParserOptions = Object.freeze({
+  plugins,
+  sourceType: 'module',
+})
+
+const parser = babelParser.parse.bind(babelParser)
+
+export function babelParse(code: string | Buffer): any {
+  return parser(code.toString(), parserOptions)
+}

package/src/extractor/buildClassName.ts

@@ -0,0 +1,61 @@
+import * as t from '@babel/types'
+
+import { ClassNameObject } from '../types'
+
+export function buildClassName(
+  classNameObjects: ClassNameObject[]
+): t.Expression | t.StringLiteral | null {
+  return classNameObjects.reduce<t.Expression | null>((acc, val) => {
+    if (acc == null) {
+      if (
+        // pass conditional expressions through
+        t.isConditionalExpression(val) ||
+        // pass non-null literals through
+        t.isStringLiteral(val) ||
+        t.isNumericLiteral(val)
+      ) {
+        return val
+      }
+      return t.logicalExpression('||', val, t.stringLiteral(''))
+    }
+
+    let inner: t.Expression
+    if (t.isStringLiteral(val)) {
+      if (t.isStringLiteral(acc)) {
+        // join adjacent string literals
+        return t.stringLiteral(`${acc.value} ${val.value}`)
+      }
+      inner = t.stringLiteral(` ${val.value}`)
+    } else if (t.isLiteral(val)) {
+      inner = t.binaryExpression('+', t.stringLiteral(' '), val)
+    } else if (t.isConditionalExpression(val) || t.isBinaryExpression(val)) {
+      if (t.isStringLiteral(acc)) {
+        return t.binaryExpression('+', t.stringLiteral(`${acc.value} `), val)
+      }
+      inner = t.binaryExpression('+', t.stringLiteral(' '), val)
+    } else if (t.isIdentifier(val) || t.isMemberExpression(val)) {
+      // identifiers and member expressions make for reasonable ternaries
+      inner = t.conditionalExpression(
+        val,
+        t.binaryExpression('+', t.stringLiteral(' '), val),
+        t.stringLiteral('')
+      )
+    } else {
+      if (t.isStringLiteral(acc)) {
+        return t.binaryExpression(
+          '+',
+          t.stringLiteral(`${acc.value} `),
+          t.logicalExpression('||', val, t.stringLiteral(''))
+        )
+      }
+      // use a logical expression for more complex prop values
+      inner = t.binaryExpression(
+        '+',
+        t.stringLiteral(' '),
+        t.logicalExpression('||', val, t.stringLiteral(''))
+      )
+    }
+
+    return t.binaryExpression('+', acc, inner)
+  }, null)
+}

package/src/extractor/createEvaluator.ts

@@ -0,0 +1,69 @@
+import vm from 'vm'
+
+import generate from '@babel/generator'
+import { NodePath } from '@babel/traverse'
+import * as t from '@babel/types'
+import type { TamaguiConfig } from '@tamagui/core'
+import { createCSSVariable } from '@tamagui/core-node'
+
+import { FAILED_EVAL } from '../constants'
+import { evaluateAstNode } from './evaluateAstNode'
+import { isValidThemeHook } from './extractHelpers'
+
+export function createEvaluator({
+  tamaguiConfig,
+  staticNamespace,
+  sourcePath,
+  traversePath,
+  shouldPrintDebug,
+}: {
+  tamaguiConfig: TamaguiConfig
+  staticNamespace: Record<string, any>
+  sourcePath: string
+  traversePath: NodePath<t.JSXElement>
+  shouldPrintDebug: boolean | 'verbose'
+}) {
+  // called when evaluateAstNode encounters a dynamic-looking prop
+  const evalFn = (n: t.Node) => {
+    // themes
+    if (
+      t.isMemberExpression(n) &&
+      t.isIdentifier(n.property) &&
+      isValidThemeHook(traversePath, n, sourcePath)
+    ) {
+      const key = n.property.name
+      if (shouldPrintDebug) {
+        console.log('    > found theme prop', key)
+      }
+      console.log('SHOULD FIND THEME (NESTED NOW)', key) // tamaguiConfig.themes)
+      // if (!themeKeys.has(key)) {
+      //   throw new Error(`    > accessing non-existent theme key: ${key}`)
+      // }
+      return createCSSVariable(key)
+    }
+    // variable
+    if (t.isIdentifier(n) && staticNamespace.hasOwnProperty(n.name)) {
+      return staticNamespace[n.name]
+    }
+    const evalContext = vm.createContext(staticNamespace)
+    const code = `(${generate(n as any).code})`
+    // if (shouldPrintDebug) {
+    //   console.log('evaluating', { n, code, evalContext })
+    // }
+    return vm.runInContext(code, evalContext)
+  }
+
+  return (n: t.Node) => {
+    return evaluateAstNode(n, evalFn)
+  }
+}
+
+export function createSafeEvaluator(attemptEval: (n: t.Node) => any) {
+  return (n: t.Node) => {
+    try {
+      return attemptEval(n)
+    } catch (err) {
+      return FAILED_EVAL
+    }
+  }
+}