@tamagui/static 1.0.1-beta.20 → 1.0.1-beta.201

package/dist/tamagui-node/tamaguitestdesignsystem-components.config.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// ../test-design-system/dist/cjs/index.js
+var __defProp2 = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = /* @__PURE__ */ __name((target, all) => {
+  for (var name in all)
+    __defProp2(target, name, { get: all[name], enumerable: true });
+}, "__export");
+var __copyProps = /* @__PURE__ */ __name((to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+}, "__copyProps");
+var __toCommonJS = /* @__PURE__ */ __name((mod) => __copyProps(__defProp2({}, "__esModule", { value: true }), mod), "__toCommonJS");
+var src_exports = {};
+__export(src_exports, {
+  MyStack: () => MyStack
+});
+module.exports = __toCommonJS(src_exports);
+var import_core = require("@tamagui/core-node");
+var MyStack = (0, import_core.styled)(import_core.Stack, {
+  backgroundColor: "green"
+});

package/dist/{cjs/types.js → types.js}

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/types.ts"],
+  "sourcesContent": ["import type { NodePath } from '@babel/traverse'\nimport * as t from '@babel/types'\nimport type { PseudoStyles, StaticConfig } from '@tamagui/core-node'\nimport type { StyleObject } from '@tamagui/helpers'\nimport type { TamaguiOptions } from '@tamagui/helpers-node'\nimport type { ViewStyle } from 'react-native'\n\nimport { LoadedComponents } from './index'\n\nexport type { TamaguiOptions } from '@tamagui/helpers-node'\n\nexport type { StyleObject } from '@tamagui/helpers'\n\nexport type ClassNameObject = t.StringLiteral | t.Expression\n\nexport interface CacheObject {\n  [key: string]: any\n}\n\nexport interface LogOptions {\n  clear?: boolean\n  timestamp?: boolean\n  error?: Error | null\n}\n\nexport interface Logger {\n  info(msg: string, options?: LogOptions): void\n  warn(msg: string, options?: LogOptions): void\n  error(msg: string, options?: LogOptions): void\n}\n\nexport type ExtractorOptions = {\n  logger?: Logger\n}\n\nexport type ExtractedAttrAttr = {\n  type: 'attr'\n  value: t.JSXAttribute | t.JSXSpreadAttribute\n}\n\nexport type ExtractedAttrStyle = {\n  type: 'style'\n  value: ViewStyle & PseudoStyles\n  attr?: t.JSXAttribute | t.JSXSpreadAttribute\n  name?: string\n}\n\nexport type ExtractedAttr =\n  | ExtractedAttrAttr\n  | { type: 'ternary'; value: Ternary }\n  | ExtractedAttrStyle\n\nexport type ExtractTagProps = {\n  parserProps: TamaguiOptionsWithFileInfo\n  attrs: ExtractedAttr[]\n  node: t.JSXOpeningElement\n  attemptEval: (exprNode: t.Node, evalFn?: ((node: t.Node) => any) | undefined) => any\n  jsxPath: NodePath<t.JSXElement>\n  programPath: NodePath<t.Program>\n  originalNodeName: string\n  lineNumbers: string\n  filePath: string\n  isFlattened: boolean\n  completeProps: Record<string, any>\n  staticConfig: StaticConfig\n}\n\nexport type TamaguiOptionsWithFileInfo = TamaguiOptions & {\n  sourcePath: string\n  allLoadedComponents: LoadedComponents[]\n}\n\nexport type ExtractorParseProps = Omit<TamaguiOptionsWithFileInfo, 'allLoadedComponents'> & {\n  target: 'native' | 'html'\n  shouldPrintDebug?: boolean | 'verbose'\n  onExtractTag: (props: ExtractTagProps) => void\n  getFlattenedNode?: (props: { isTextView: boolean; tag: string }) => string\n  extractStyledDefinitions?: boolean\n  // identifer, rule\n  onStyleRule?: (identifier: string, rules: string[]) => void\n}\n\nexport interface Ternary {\n  test: t.Expression\n  // shorthand props that don't use hooks\n  inlineMediaQuery?: string\n  remove: Function\n  consequent: Object | null\n  alternate: Object | null\n}\n\nexport type ClassNameToStyleObj = {\n  [key: string]: StyleObject\n}\n\nexport interface PluginContext {\n  write: (path: string, rules: { [key: string]: string }) => any\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/dist/webpackPlugin.js

@@ -0,0 +1,35 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var webpackPlugin_exports = {};
+__export(webpackPlugin_exports, {
+  TamaguiWebpackPlugin: () => TamaguiWebpackPlugin
+});
+module.exports = __toCommonJS(webpackPlugin_exports);
+const pluginName = "TamaguiWebpackPlugin";
+class TamaguiWebpackPlugin {
+  apply(compiler) {
+    compiler.hooks.run.tap(pluginName, (compilation) => {
+    });
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TamaguiWebpackPlugin
+});
+//# sourceMappingURL=webpackPlugin.js.map

package/dist/webpackPlugin.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/webpackPlugin.ts"],
+  "sourcesContent": ["const pluginName = 'TamaguiWebpackPlugin'\n\nexport class TamaguiWebpackPlugin {\n  apply(compiler) {\n    compiler.hooks.run.tap(pluginName, (compilation) => {\n      // console.log('The webpack build process is starting!');\n    })\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAM,aAAa;AAEZ,MAAM,qBAAqB;AAAA,EAChC,MAAM,UAAU;AACd,aAAS,MAAM,IAAI,IAAI,YAAY,CAAC,gBAAgB;AAAA,IAEpD,CAAC;AAAA,EACH;AACF;",
+  "names": []
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@tamagui/static",
-  "version": "1.0.1-beta.20",
+  "version": "1.0.1-beta.201",
   "source": "src/index.ts",
-  "typings": "types",
-  "main": "dist/cjs",
-  "module": "dist/esm",
-  "module:jsx": "dist/jsx",
+  "types": "./types/index.d.ts",
+  "main": "dist",
   "files": [
+    "tamagui.tsconfig.json",
+    "src",
     "types",
     "dist"
   ],
@@ -15,10 +15,10 @@
     "watch": "tamagui-build --watch",
     "clean": "tamagui-build clean",
     "clean:build": "tamagui-build clean:build",
-    "test": "NODE_ENV=test TAMAGUI_COMPILE_PROCESS=1 jest --forceExit",
-    "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"
+    "lint": "eslint",
+    "lint:fix": "yarn lint --fix",
+    "pretest": "node -r esbuild-register ./tests/lib/preTest.js",
+    "test": "yarn pretest && vitest --config ../vite-plugin-internal/src/vite.config.ts --run --dom"
   },
   "tests": {
     "parallel": true
@@ -28,47 +28,59 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/generator": "^7.15.4",
-    "@babel/helper-plugin-utils": "^7.14.5",
-    "@babel/parser": "^7.15.7",
-    "@babel/traverse": "^7.15.4",
+    "@babel/core": "^7.19.6",
+    "@babel/generator": "^7.19.6",
+    "@babel/helper-plugin-utils": "^7.19.0",
+    "@babel/parser": "^7.19.6",
+    "@babel/plugin-transform-react-jsx": "^7.19.0",
+    "@babel/runtime": "^7.19.4",
+    "@babel/traverse": "^7.19.6",
     "@expo/match-media": "^0.3.0",
-    "@tamagui/build": "^1.0.1-beta.20",
-    "@tamagui/core-node": "^1.0.1-beta.20",
-    "@tamagui/fake-react-native": "^1.0.1-beta.20",
-    "@tamagui/helpers": "^1.0.1-beta.20",
-    "@tamagui/proxy-worm": "^1.0.1-beta.20",
+    "@tamagui/build": "^1.0.1-beta.201",
+    "@tamagui/cli-color": "^1.0.1-beta.201",
+    "@tamagui/config-default-node": "^1.0.1-beta.201",
+    "@tamagui/core-node": "^1.0.1-beta.201",
+    "@tamagui/fake-react-native": "^1.0.1-beta.201",
+    "@tamagui/helpers": "^1.0.1-beta.201",
+    "@tamagui/helpers-node": "^1.0.1-beta.201",
+    "@tamagui/proxy-worm": "^1.0.1-beta.201",
+    "@tamagui/shorthands": "^1.0.1-beta.201",
     "babel-literal-to-ast": "^2.1.0",
-    "esbuild": "^0.14.36",
-    "esbuild-register": "^3.3.2",
+    "esbuild": "^0.15.11",
+    "esbuild-register": "^3.3.3",
     "find-cache-dir": "^3.3.2",
-    "fs-extra": "^9.1.0",
+    "find-root": "^1.1.0",
+    "fs-extra": "^10.1.0",
     "invariant": "^2.2.4",
     "lodash": "^4.17.21",
-    "tamagui": "^1.0.1-beta.20"
+    "react-native-web-internals": "^1.0.1-beta.201",
+    "react-native-web-lite": "^1.0.1-beta.201"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-typescript": "^7.14.5",
-    "@babel/types": "^7.15.6",
+    "@babel/plugin-syntax-typescript": "^7.18.6",
+    "@babel/types": "^7.19.4",
     "@dish/babel-preset": "^0.0.6",
-    "@testing-library/react": "13.0.0-alpha.4",
-    "@types/jest": "*",
+    "@tamagui/test-design-system": "^1.0.1-beta.201",
+    "@testing-library/react": "^13.3.0",
+    "@types/babel__generator": "^7.6.4",
+    "@types/babel__traverse": "^7.18.2",
+    "@types/find-root": "^1.1.2",
     "@types/node": "^16.11.9",
-    "@types/react-native": "^0.67.3",
+    "@types/react-native": "^0.69.2",
     "@types/webpack": "^4.41.26",
     "babel-loader": "^8.2.5",
     "css-loader": "^5.2.4",
-    "esbuild-loader": "^2.18.0",
-    "jest": "^27.3.1",
+    "dedent": "^0.7.0",
+    "esbuild-loader": "^2.19.0",
     "null-loader": "^4.0.1",
     "react": "*",
     "react-dom": "*",
-    "react-native-web": "^0.17.5",
-    "react-test-renderer": "^18.1.0",
-    "style-loader": "^3.3.0",
-    "typescript": "^4.5.2",
-    "webpack": "^5.72.0"
+    "react-native-web": "^0.18.3",
+    "react-test-renderer": "^18.2.0",
+    "style-loader": "^3.3.1",
+    "typescript": "^4.7.4",
+    "vitest": "^0.24.3",
+    "webpack": "^5.74.0"
   },
   "peerDependencies": {
     "react-native-web": "*"

package/src/constants.ts

@@ -0,0 +1,14 @@
+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 SHOULD_DEBUG = process.env.DEBUG === '*' || process.env.DEBUG?.startsWith('tamagui')

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,28 @@
+import * as babelParser from '@babel/parser'
+import * as t from '@babel/types'
+
+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): t.File {
+  return parser(code.toString(), parserOptions) as any
+}

package/src/extractor/buildClassName.ts

@@ -0,0 +1,77 @@
+import * as t from '@babel/types'
+import { concatClassName } from '@tamagui/helpers'
+
+import type { ClassNameObject } from '../types.js'
+
+type Builder = (
+  objects: ClassNameObject[],
+  extras?: string
+) => t.Expression | t.StringLiteral | null
+
+export const buildClassName: Builder = (objectsIn, extras = '') => {
+  let objects = buildClassNameLogic(objectsIn)
+  if (!objects) return null
+  if (t.isStringLiteral(objects)) {
+    objects.value = concatClassName(objects.value)
+    objects.value = `${extras} ${objects.value}`
+  } else {
+    objects = t.binaryExpression('+', t.stringLiteral(extras), objects)
+  }
+  return objects
+}
+
+export const buildClassNameLogic: Builder = (objects) => {
+  return objects.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/bundle.ts

@@ -0,0 +1,110 @@
+import { basename, dirname, join } from 'path'
+
+import esbuild from 'esbuild'
+import { pathExists, stat, writeFile } from 'fs-extra'
+
+import { resolveWebOrNativeSpecificEntry } from './loadTamagui'
+
+/**
+ * For internal loading of new files
+ */
+
+type Props = Omit<Partial<esbuild.BuildOptions>, 'entryPoints'> & {
+  outfile: string
+  entryPoints: string[]
+  resolvePlatformSpecificEntries?: boolean
+}
+
+function getESBuildConfig(
+  { entryPoints, resolvePlatformSpecificEntries, ...options }: Props,
+  aliases?: Record<string, string>
+) {
+  const alias = require('@tamagui/core-node').aliasPlugin
+  if (process.env.DEBUG?.startsWith('tamagui')) {
+    // eslint-disable-next-line no-console
+    console.log(`Building`, entryPoints)
+  }
+  const tsconfig = join(__dirname, '..', '..', 'tamagui.tsconfig.json')
+
+  const resolvedEntryPoints = !resolvePlatformSpecificEntries
+    ? entryPoints
+    : entryPoints.map(resolveWebOrNativeSpecificEntry)
+
+  const res: esbuild.BuildOptions = {
+    bundle: true,
+    entryPoints: resolvedEntryPoints,
+    format: 'cjs',
+    target: 'node18',
+    jsx: 'transform',
+    jsxFactory: 'react',
+    allowOverwrite: true,
+    keepNames: true,
+    platform: 'node',
+    tsconfig,
+    loader: {
+      '.js': 'jsx',
+    },
+    logLevel: 'warning',
+    plugins: [
+      {
+        name: 'external',
+        setup(build) {
+          build.onResolve({ filter: /@tamagui\/core/ }, (args) => {
+            return {
+              path: '@tamagui/core-node',
+              external: true,
+            }
+          })
+
+          build.onResolve({ filter: /^(react-native|react-native\/.*)$/ }, (args) => {
+            return {
+              path: 'react-native-web-lite',
+              external: true,
+            }
+          })
+        },
+      },
+      alias({
+        ...aliases,
+      }),
+    ],
+    ...options,
+  }
+
+  return res
+}
+
+export async function bundle(props: Props, aliases?: Record<string, string>) {
+  await asyncLock(props)
+  return esbuild.build(getESBuildConfig(props, aliases))
+}
+
+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'))
+  const lockStat = await stat(lockFile).catch(() => {
+    /* ok */
+  })
+  const lockedMsAgo = !lockStat
+    ? Infinity
+    : new Date().getTime() - new Date(lockStat.mtime).getTime()
+  if (lockedMsAgo < 500) {
+    if (process.env.DEBUG?.startsWith('tamagui')) {
+      // eslint-disable-next-line no-console
+      console.log(`Waiting for existing build`, props.entryPoints)
+    }
+    let tries = 5
+    while (tries--) {
+      if (await pathExists(props.outfile)) {
+        return
+      } else {
+        await new Promise((res) => setTimeout(res, 50))
+      }
+    }
+  }
+  void writeFile(lockFile, '')
+}

package/src/extractor/createEvaluator.ts

@@ -0,0 +1,73 @@
+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.js'
+import { TamaguiOptionsWithFileInfo } from '../types.js'
+import { evaluateAstNode } from './evaluateAstNode.js'
+import { isValidThemeHook } from './extractHelpers.js'
+
+export function createEvaluator({
+  props,
+  staticNamespace,
+  sourcePath,
+  traversePath,
+  shouldPrintDebug,
+}: {
+  props: TamaguiOptionsWithFileInfo
+  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) &&
+      traversePath &&
+      isValidThemeHook(props, traversePath, n, sourcePath)
+    ) {
+      const key = n.property.name
+      if (shouldPrintDebug) {
+        // eslint-disable-next-line no-console
+        console.log('    > found theme prop', key)
+      }
+      return createCSSVariable(key)
+    }
+    // variable
+    if (t.isIdentifier(n) && typeof staticNamespace[n.name] !== 'undefined') {
+      return staticNamespace[n.name]
+    }
+    const evalContext = vm.createContext(staticNamespace)
+    const codeWithTypescriptAnnotations = `(${generate(n as any).code})`
+    const code = esbuild
+      .transformSync(codeWithTypescriptAnnotations, { loader: 'tsx' })
+      .code.replace(/;\n$/, '')
+
+    if (shouldPrintDebug) {
+      // eslint-disable-next-line no-console
+      console.log('evaluating', code)
+    }
+    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
+    }
+  }
+}