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

package/src/extractor/removeUnusedHooks.ts

@@ -0,0 +1,76 @@
+import { NodePath } from '@babel/traverse'
+import * as t from '@babel/types'
+
+const hooks = {
+  useMedia: true,
+  useTheme: true,
+}
+
+export function removeUnusedHooks(compFn: NodePath<any>, shouldPrintDebug: boolean | 'verbose') {
+  compFn.scope.crawl()
+  // check the top level statements
+  let bodyStatements = compFn?.get('body')
+  if (!bodyStatements) {
+    console.log('no body statemnts?', compFn)
+    return
+  }
+  if (!Array.isArray(bodyStatements)) {
+    if (bodyStatements.isFunctionExpression()) {
+      bodyStatements = bodyStatements.scope.path.get('body')
+    } else {
+      bodyStatements = bodyStatements.get('body')
+    }
+  }
+  if (!bodyStatements || !Array.isArray(bodyStatements)) {
+    return
+  }
+  const statements = bodyStatements as NodePath<any>[]
+  for (const statement of statements) {
+    if (!statement.isVariableDeclaration()) {
+      continue
+    }
+    const declarations = statement.get('declarations')
+    if (!Array.isArray(declarations)) {
+      continue
+    }
+    const isBindingReferenced = (name: string) => {
+      return !!statement.scope.getBinding(name)?.referenced
+    }
+    for (const declarator of declarations) {
+      const id = declarator.get('id')
+      const init = declarator.node.init
+      if (Array.isArray(id) || Array.isArray(init)) {
+        continue
+      }
+      const shouldRemove = (() => {
+        const isHook =
+          t.isCallExpression(init) && t.isIdentifier(init.callee) && hooks[init.callee.name]
+        if (!isHook) {
+          return false
+        }
+        if (t.isIdentifier(id.node)) {
+          // remove "const media = useMedia()"
+          const name = id.node.name
+          return !isBindingReferenced(name)
+        } else if (t.isObjectPattern(id.node)) {
+          // remove "const { sm } = useMedia()"
+          const propPaths = id.get('properties') as NodePath<any>[]
+          return propPaths.every((prop) => {
+            if (!prop.isObjectProperty()) return false
+            const value = prop.get('value')
+            if (Array.isArray(value) || !value.isIdentifier()) return false
+            const name = value.node.name
+            return !isBindingReferenced(name)
+          })
+        }
+        return false
+      })()
+      if (shouldRemove) {
+        declarator.remove()
+        if (shouldPrintDebug) {
+          console.log(`  [🪝] removed ${id.node['name'] ?? ''}`)
+        }
+      }
+    }
+  }
+}

package/src/extractor/timer.ts

@@ -0,0 +1,18 @@
+export const timer = () => {
+  const start = Date.now()
+  let last = start
+  return {
+    mark: (name: string, print = false) => {
+      if (print) {
+        const took = Date.now() - last
+        last = Date.now()
+        console.log(`Time ${name}: ${took}ms`)
+      }
+    },
+    done: (print = false) => {
+      if (print) {
+        console.log(`Total time: ${Date.now() - start}ms`)
+      }
+    },
+  }
+}

package/src/extractor/validHTMLAttributes.ts

@@ -0,0 +1,99 @@
+export const validHTMLAttributes = {
+  autocomplete: true,
+  border: true,
+  contenteditable: true,
+  crossorigin: true,
+  dir: true,
+  draggable: true,
+  enctype: true,
+  formenctype: true,
+  formmethod: true,
+  formtarget: true,
+  inputmode: true,
+  kind: true,
+  link: true,
+  method: true,
+  preload: true,
+  referrerpolicy: true,
+  rel: true,
+  rev: true,
+  role: true,
+  sandbox: true,
+  shape: true,
+  spellcheck: true,
+  target: true,
+  translate: true,
+  type: true,
+  wrap: true,
+  'aria-autocomplete': true,
+  'aria-busy': true,
+  'aria-checked': true,
+  'aria-current': true,
+  'aria-disabled': true,
+  'aria-expanded': true,
+  'aria-haspopup': true,
+  'aria-hidden': true,
+  'aria-invalid': true,
+  'aria-polite': true,
+  'aria-modal': true,
+  'aria-multiline': true,
+  'aria-multiselectable': true,
+  'aria-orientation': true,
+  'aria-pressed': true,
+  'aria-readonly': true,
+  'aria-relevant': true,
+  'aria-required': true,
+  'aria-selected': true,
+  'aria-sort': true,
+}
+
+// for moving off react-native-web eventually (unused atm)
+export const validAccessibilityAttributes = {
+  accessibilityRole: true,
+  accessibilityActiveDescendant: true,
+  accessibilityAtomic: true,
+  accessibilityAutoComplete: true,
+  accessibilityBusy: true,
+  accessibilityChecked: true,
+  accessibilityColumnCount: true,
+  accessibilityColumnIndex: true,
+  accessibilityColumnSpan: true,
+  accessibilityControls: true,
+  accessibilityCurrent: true,
+  accessibilityDescribedBy: true,
+  accessibilityDetails: true,
+  disabled: true,
+  accessibilityErrorMessage: true,
+  accessibilityExpanded: true,
+  accessibilityFlowTo: true,
+  accessibilityHasPopup: true,
+  accessibilityHidden: true,
+  accessibilityInvalid: true,
+  accessibilityKeyShortcuts: true,
+  accessibilityLabel: true,
+  accessibilityLabelledBy: true,
+  accessibilityLevel: true,
+  accessibilityLiveRegion: true,
+  accessibilityModal: true,
+  accessibilityMultiline: true,
+  accessibilityMultiSelectable: true,
+  accessibilityOrientation: true,
+  accessibilityOwns: true,
+  accessibilityPlaceholder: true,
+  accessibilityPosInSet: true,
+  accessibilityPressed: true,
+  accessibilityReadOnly: true,
+  accessibilityRequired: true,
+  accessibilityRoleDescription: true,
+  accessibilityRowCount: true,
+  accessibilityRowIndex: true,
+  accessibilityRowSpan: true,
+  accessibilitySelected: true,
+  accessibilitySetSize: true,
+  accessibilitySort: true,
+  accessibilityValueMax: true,
+  accessibilityValueMin: true,
+  accessibilityValueNow: true,
+  accessibilityValueText: true,
+  nativeID: true,
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+process.env.TAMAGUI_COMPILE_PROCESS = '1'
+
+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 './patchReactNativeWeb'

package/src/patchReactNativeWeb.ts

@@ -0,0 +1,165 @@
+import path from 'path'
+
+import * as fs from 'fs-extra'
+
+// were patching react-native-web so we can use some internal methods
+// we do it this way because we need to rely on webpack or bundler config to determine cjs vs esm
+// so we can't just require it all directly
+// would be nice in the future to be able to eject from react-native-web entirely optionally
+
+// keep it sync
+export function patchReactNativeWeb(dir: string = require.resolve('react-native-web')) {
+  const rootDir = dir.replace(/[\/\\]dist.*/, '')
+  const modulePath = path.join(rootDir, 'dist', 'tamagui-exports.js')
+  const cjsPath = path.join(rootDir, 'dist', 'cjs', 'tamagui-exports.js')
+  const shouldPatchExports =
+    fs.existsSync(modulePath) &&
+    fs.readFileSync(modulePath, 'utf-8') === moduleExports &&
+    fs.existsSync(cjsPath) &&
+    fs.readFileSync(cjsPath, 'utf-8') === cjsExports
+  if (!shouldPatchExports) {
+    console.log('      | patch ' + path.relative(rootDir, modulePath))
+    console.log('      | patch ' + path.relative(rootDir, cjsPath))
+    fs.writeFileSync(modulePath, moduleExports)
+    fs.writeFileSync(cjsPath, cjsExports)
+  }
+
+  // patch to allow className prop
+  const patches = [
+    {
+      id: 'dom-props',
+      filePath: ['modules', 'createDOMProps', 'index.js'],
+      replacee: `  if (dataSet != null) {`,
+      replacer: `
+  if (props.dataSet && props.dataSet.className) {
+    const { className, ...dataSetRest } = props.dataSet
+    classList = className
+    dataSet = dataSetRest
+  }
+  if (props.dataSet && props.dataSet.id) {
+    domProps['id'] = props.dataSet.id
+  }
+  if (dataSet != null) {`,
+    },
+    {
+      id: 'forward-props',
+      filePath: ['modules', 'forwardedProps', 'index.js'],
+      replacee: `dataSet: true,`,
+      replacer: `id: true, dataSet: true,`,
+    },
+  ]
+
+  for (const { filePath, replacee, replacer } of patches) {
+    const files = [
+      path.join(rootDir, 'dist', ...filePath),
+      path.join(rootDir, 'dist', 'cjs', ...filePath),
+    ]
+    for (const file of files) {
+      const contents = fs.readFileSync(file, 'utf-8')
+      if (contents.includes(replacer)) {
+        continue
+      }
+      if (!contents.includes(replacee)) {
+        console.warn(
+          `⚠️ Error: couldn't apply className patch! Maybe using incompatible react-native-web version.`,
+          {
+            replacee,
+            contents,
+          }
+        )
+        continue
+      }
+      console.log('      | patch ' + path.relative(rootDir, file))
+      fs.writeFileSync(file, contents.replace(replacee, replacer))
+    }
+  }
+
+  // if entry files not patched, patch them:
+  const moduleEntry = path.join(rootDir, 'dist', 'index.js')
+  const moduleEntrySrc = fs.readFileSync(moduleEntry, 'utf-8')
+  if (!moduleEntrySrc.includes('// tamagui-patch-v4')) {
+    fs.writeFileSync(
+      moduleEntry,
+      `${removePatch(moduleEntrySrc)}
+
+// tamagui-patch-v4
+import * as TExports from './tamagui-exports'
+export const TamaguiExports = TExports
+// tamagui-patch-end
+`
+    )
+  }
+  const cjsEntry = path.join(rootDir, 'dist', 'cjs', 'index.js')
+  const cjsEntrySrc = fs.readFileSync(cjsEntry, 'utf-8')
+  if (!cjsEntrySrc.includes('// tamagui-patch-v4')) {
+    fs.writeFileSync(
+      cjsEntry,
+      `${removePatch(cjsEntrySrc)}
+
+// tamagui-patch-v4
+exports.TamaguiExports = _interopRequireDefault(require("./tamagui-exports"));
+// tamagui-patch-end
+`
+    )
+  }
+}
+
+function removePatch(source: string) {
+  return source.replace(/\/\/ tamagui-patch([.\s\S]*)/g, '')
+}
+
+// view exports/View.ts
+const forwardedPropsObj = `{
+  ...fwdProps.defaultProps,
+  ...fwdProps.accessibilityProps,
+  ...fwdProps.clickProps,
+  ...fwdProps.focusProps,
+  ...fwdProps.keyboardProps,
+  ...fwdProps.mouseProps,
+  ...fwdProps.touchProps,
+  ...fwdProps.styleProps,
+  href: true,
+  lang: true,
+  onScroll: true,
+  onWheel: true,
+  pointerEvents: true
+}
+`
+
+const moduleExports = `
+export { atomic } from './exports/StyleSheet/compile'
+export { default as createCompileableStyle } from './exports/StyleSheet/createCompileableStyle'
+export { default as createReactDOMStyle } from './exports/StyleSheet/createReactDOMStyle'
+export { default as i18Style } from './exports/StyleSheet/i18nStyle'
+export { default as createDOMProps } from './modules/createDOMProps'
+export { default as AccessibilityUtil } from './modules/AccessibilityUtil'
+export { default as createElement } from './exports/createElement'
+export { default as css } from './exports/StyleSheet/css'
+export { default as TextAncestorContext } from './exports/Text/TextAncestorContext'
+export { default as pick } from './modules/pick'
+export { default as useElementLayout } from './modules/useElementLayout'
+export { default as useMergeRefs } from './modules/useMergeRefs'
+export { default as usePlatformMethods } from './modules/usePlatformMethods'
+export { default as useResponderEvents } from './modules/useResponderEvents'
+import * as fwdProps from './modules/forwardedProps'
+export const forwardedProps = ${forwardedPropsObj}
+`
+
+const cjsExports = `
+exports.atomic = require('./exports/StyleSheet/compile').atomic
+exports.createCompileableStyle = require('./exports/StyleSheet/createCompileableStyle')
+exports.createReactDOMStyle = require('./exports/StyleSheet/createReactDOMStyle')
+exports.i18Style = require('./exports/StyleSheet/i18nStyle')
+exports.createDOMProps = require('./modules/createDOMProps')
+exports.AccessibilityUtil = require('./modules/AccessibilityUtil')
+exports.createElement = require('./exports/createElement')
+exports.css = require('./exports/StyleSheet/css')
+exports.TextAncestorContext = require('./exports/Text/TextAncestorContext')
+exports.pick = require('./modules/pick')
+exports.useElementLayout = require('./modules/useElementLayout')
+exports.useMergeRefs = require('./modules/useMergeRefs')
+exports.usePlatformMethods = require('./modules/usePlatformMethods')
+exports.useResponderEvents = require('./modules/useResponderEvents')
+const fwdProps = require('./modules/forwardedProps')
+exports.forwardedProps = ${forwardedPropsObj}
+`

package/src/types.ts

@@ -0,0 +1,97 @@
+import { NodePath } from '@babel/traverse'
+import * as t from '@babel/types'
+import { PseudoStyles } from '@tamagui/core-node'
+import { ViewStyle } from 'react-native'
+
+export type ClassNameObject = t.StringLiteral | t.Expression
+
+export interface CacheObject {
+  [key: string]: any
+}
+
+export interface TamaguiOptions {
+  // module paths you want to compile with tamagui (for example ['tamagui'])
+  components: string[]
+  // your tamagui.config.ts
+  config?: string
+  evaluateVars?: boolean
+  importsWhitelist?: string[]
+  disable?: boolean
+  disableExtraction?: boolean
+  disableDebugAttr?: boolean
+  disableExtractInlineMedia?: boolean
+  disableExtractVariables?: boolean
+  excludeReactNativeWebExports?: string[]
+  exclude?: RegExp
+  logTimings?: boolean
+  prefixLogs?: string
+
+  // probably non user options
+  cssPath?: string
+  cssData?: any
+  deoptProps?: Set<string>
+  excludeProps?: Set<string>
+  inlineProps?: Set<string>
+}
+
+export type ExtractedAttrAttr = {
+  type: 'attr'
+  value: t.JSXAttribute | t.JSXSpreadAttribute
+}
+
+export type ExtractedAttrStyle = {
+  type: 'style'
+  value: ViewStyle & PseudoStyles
+  attr?: t.JSXAttribute | t.JSXSpreadAttribute
+  name?: string
+}
+
+export type ExtractedAttr =
+  | ExtractedAttrAttr
+  | { type: 'ternary'; value: Ternary }
+  | ExtractedAttrStyle
+
+export type ExtractTagProps = {
+  attrs: ExtractedAttr[]
+  node: t.JSXOpeningElement
+  attemptEval: (exprNode: t.Node, evalFn?: ((node: t.Node) => any) | undefined) => any
+  jsxPath: NodePath<t.JSXElement>
+  programPath: NodePath<t.Program>
+  originalNodeName: string
+  lineNumbers: string
+  filePath: string
+  isFlattened: boolean
+}
+
+export type ExtractorParseProps = TamaguiOptions & {
+  target: 'native' | 'html'
+  sourcePath?: string
+  shouldPrintDebug?: boolean | 'verbose'
+  onExtractTag: (props: ExtractTagProps) => void
+  getFlattenedNode: (props: { isTextView: boolean; tag: string }) => string
+}
+
+export interface Ternary {
+  test: t.Expression
+  // shorthand props that don't use hooks
+  inlineMediaQuery?: string
+  remove: Function
+  consequent: Object | null
+  alternate: Object | null
+}
+
+export type StyleObject = {
+  property: string
+  value: string
+  className: string
+  identifier: string
+  rules: string[]
+}
+
+export type ClassNameToStyleObj = {
+  [key: string]: StyleObject
+}
+
+export interface PluginContext {
+  write: (path: string, rules: { [key: string]: string }) => any
+}

package/types/extractor/createExtractor.d.ts

@@ -1,9 +1,22 @@
 import { NodePath } from '@babel/traverse';
 import * as t from '@babel/types';
+import { TamaguiInternalConfig } from '@tamagui/core-node';
 import { ExtractorParseProps } from '../types';
 export declare type Extractor = ReturnType<typeof createExtractor>;
 export declare function createExtractor(): {
-    getTamagui(): TamaguiInternalConfig;
+    getTamagui(): TamaguiInternalConfig<import("@tamagui/core-node").CreateTokens<import("@tamagui/core-node").VariableVal>, {
+        [key: string]: Partial<import("@tamagui/core-node").TamaguiBaseTheme> & {
+            [key: string]: import("@tamagui/core-node").VariableVal;
+        };
+    }, {}, {
+        [x: string]: {
+            [key: string]: string | number;
+        };
+    }, {
+        [key: string]: string | {
+            [key: string]: any;
+        };
+    }, import("@tamagui/core-node").GenericFonts>;
     parse: (fileOrPath: NodePath<t.Program> | t.File, { config, importsWhitelist, evaluateVars, shouldPrintDebug, sourcePath, onExtractTag, getFlattenedNode, disable, disableExtraction, disableExtractInlineMedia, disableExtractVariables, disableDebugAttr, prefixLogs, excludeProps, target, ...props }: ExtractorParseProps) => {
         flattened: number;
         optimized: number;

package/types/extractor/createExtractor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createExtractor.d.ts","sourceRoot":"","sources":["../../src/extractor/createExtractor.ts"],"names":[],"mappings":"AAEA,OAAiB,EAAE,QAAQ,EAAW,MAAM,iBAAiB,CAAA;AAC7D,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AAiBjC,OAAO,EAIL,mBAAmB,EAEpB,MAAM,UAAU,CAAA;AAqCjB,oBAAY,SAAS,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA;AAI1D,wBAAgB,eAAe;;wBAqBb,SAAS,EAAE,OAAO,CAAC,GAAG,MAAM,0PAkBrC,mBAAmB;;;;;;EAiiD3B"}
+{"version":3,"file":"createExtractor.d.ts","sourceRoot":"","sources":["../../src/extractor/createExtractor.ts"],"names":[],"mappings":"AAEA,OAAiB,EAAE,QAAQ,EAAW,MAAM,iBAAiB,CAAA;AAC7D,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AACjC,OAAO,EAGL,qBAAqB,EAQtB,MAAM,oBAAoB,CAAA;AAK3B,OAAO,EAIL,mBAAmB,EAEpB,MAAM,UAAU,CAAA;AAqCjB,oBAAY,SAAS,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA;AAI1D,wBAAgB,eAAe;;;;;;;;;;;;;;wBAqBb,SAAS,EAAE,OAAO,CAAC,GAAG,MAAM,0PAkBrC,mBAAmB;;;;;;EAqjD3B"}