@tamagui/language-service 0.0.0-bootstrap.0 → 3.0.0-beta.643.1

package/src/extract-estree.ts

@@ -0,0 +1,251 @@
+// Style site extraction over an ESTree program.
+//
+// One walker serves every ESTree producer: eslint (espree/typescript-eslint),
+// oxc-parser's raw-transfer AST, and anything else emitting the standard
+// shape. Node spans read `range` when present (eslint) and `start`/`end`
+// otherwise (oxc), so the same call works in both worlds.
+//
+// The recognized site shapes match the sucrase extractor exactly:
+// string-valued JSX attributes on tamagui components, and string property
+// values anywhere inside a styled() definition object.
+
+import type { StyleSite } from './document'
+
+interface EstreeNode {
+  type: string
+  range?: readonly [number, number]
+  start?: number
+  end?: number
+  [key: string]: unknown
+}
+
+export interface EstreeStyleSite extends StyleSite {
+  /** the Literal or TemplateLiteral node holding the value, for reporters */
+  node: unknown
+}
+
+export interface EstreeExtractorOptions {
+  /** which prop names produce sites; default: every prop */
+  isStyleProp?: (name: string) => boolean
+  /**
+   * which import sources mark components and `styled` as tamagui's.
+   * default: `tamagui`, `tamagui/*`, `@tamagui/*`
+   */
+  isTamaguiModule?: (source: string) => boolean
+  /** treat every capitalized JSX element as a tamagui component */
+  allComponents?: boolean
+}
+
+function defaultIsTamaguiModule(source: string): boolean {
+  return (
+    source === 'tamagui' ||
+    source.startsWith('tamagui/') ||
+    source.startsWith('@tamagui/')
+  )
+}
+
+function span(node: EstreeNode): readonly [number, number] | null {
+  if (node.range) return node.range
+  if (typeof node.start === 'number' && typeof node.end === 'number') {
+    return [node.start, node.end]
+  }
+  return null
+}
+
+/** cooked string value plus its content span, or null when not static/exact */
+function staticString(
+  node: EstreeNode | null | undefined
+): { value: string; start: number; end: number } | null {
+  if (!node) return null
+  const at = span(node)
+  if (!at) return null
+  if (node.type === 'Literal') {
+    const value = node.value
+    if (typeof value !== 'string') return null
+    // escapes cook differently than they read; an approximate replacement
+    // span could delete a runtime clause, so exact-raw literals only
+    const raw = node.raw
+    if (typeof raw === 'string' && raw.slice(1, -1) !== value) return null
+    return { value, start: at[0] + 1, end: at[1] - 1 }
+  }
+  if (node.type === 'TemplateLiteral') {
+    const expressions = node.expressions as EstreeNode[] | undefined
+    const quasis = node.quasis as
+      | Array<{ value?: { cooked?: string | null; raw?: string } }>
+      | undefined
+    if (expressions?.length !== 0 || quasis?.length !== 1) return null
+    const cooked = quasis[0]?.value?.cooked
+    if (typeof cooked !== 'string') return null
+    if (quasis[0]?.value?.raw !== cooked) return null
+    return { value: cooked, start: at[0] + 1, end: at[1] - 1 }
+  }
+  return null
+}
+
+function identifierName(node: EstreeNode | null | undefined): string | null {
+  if (!node) return null
+  if (node.type === 'Identifier' || node.type === 'JSXIdentifier') {
+    return typeof node.name === 'string' ? node.name : null
+  }
+  return null
+}
+
+/** the root identifier of a JSX element name (`T` in `<T.Stack.Deep>`) */
+function jsxRootName(name: EstreeNode | null | undefined): string | null {
+  let current = name
+  while (current?.type === 'JSXMemberExpression') {
+    current = current.object as EstreeNode
+  }
+  return identifierName(current)
+}
+
+const skipKeys = new Set([
+  'parent',
+  'loc',
+  'range',
+  'leadingComments',
+  'trailingComments',
+])
+
+function walk(node: EstreeNode, visit: (node: EstreeNode) => void): void {
+  visit(node)
+  for (const key in node) {
+    if (skipKeys.has(key)) continue
+    const value = node[key]
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        if (item && typeof item === 'object' && typeof item.type === 'string') {
+          walk(item as EstreeNode, visit)
+        }
+      }
+    } else if (
+      value &&
+      typeof value === 'object' &&
+      typeof (value as EstreeNode).type === 'string'
+    ) {
+      walk(value as EstreeNode, visit)
+    }
+  }
+}
+
+export function extractStyleSitesFromEstree(
+  program: unknown,
+  options: EstreeExtractorOptions = {}
+): readonly EstreeStyleSite[] {
+  const isStyleProp = options.isStyleProp ?? (() => true)
+  const isTamaguiModule = options.isTamaguiModule ?? defaultIsTamaguiModule
+  const root = program as EstreeNode
+
+  // ── pass 1: imported vocabulary ──────────────────────────────────────────
+  const styledBindings = new Set<string>()
+  const componentNames = new Set<string>()
+
+  walk(root, (node) => {
+    if (node.type === 'ImportDeclaration') {
+      const source = (node.source as EstreeNode | undefined)?.value
+      if (typeof source !== 'string' || !isTamaguiModule(source)) return
+      for (const specifier of (node.specifiers as EstreeNode[]) || []) {
+        const local = identifierName(specifier.local as EstreeNode)
+        if (!local) continue
+        if (specifier.type === 'ImportNamespaceSpecifier') {
+          componentNames.add(local)
+          continue
+        }
+        if (specifier.type !== 'ImportSpecifier') continue
+        const importedNode = specifier.imported as EstreeNode
+        const imported =
+          identifierName(importedNode) ??
+          (typeof importedNode?.value === 'string' ? importedNode.value : null)
+        if (imported === 'styled') styledBindings.add(local)
+        else if (imported && /^[A-Z]/.test(imported)) componentNames.add(local)
+      }
+      return
+    }
+    if (node.type === 'VariableDeclarator') {
+      const name = identifierName(node.id as EstreeNode)
+      const init = node.init as EstreeNode | undefined
+      if (
+        name &&
+        init?.type === 'CallExpression' &&
+        identifierName(init.callee as EstreeNode) !== null &&
+        styledBindings.has(identifierName(init.callee as EstreeNode)!)
+      ) {
+        componentNames.add(name)
+      }
+    }
+  })
+
+  // ── pass 2: sites ────────────────────────────────────────────────────────
+  const sites: EstreeStyleSite[] = []
+
+  const pushSite = (
+    property: string,
+    valueNode: EstreeNode,
+    kind: StyleSite['kind']
+  ): void => {
+    if (!isStyleProp(property)) return
+    const content = staticString(valueNode)
+    if (!content) return
+    sites.push({
+      property,
+      value: content.value,
+      start: content.start,
+      end: content.end,
+      kind,
+      node: valueNode,
+    })
+  }
+
+  const visitStyleObject = (object: EstreeNode): void => {
+    for (const member of (object.properties as EstreeNode[]) || []) {
+      if (member.type !== 'Property') continue
+      if (member.computed) continue
+      const key = member.key as EstreeNode
+      const property =
+        identifierName(key) ?? (typeof key?.value === 'string' ? key.value : null)
+      const value = member.value as EstreeNode
+      if (property && isStyleProp(property)) {
+        pushSite(property, value, 'styled-property')
+        continue
+      }
+      if (value?.type === 'ObjectExpression') {
+        visitStyleObject(value)
+      } else if (value?.type === 'ArrayExpression') {
+        for (const element of (value.elements as Array<EstreeNode | null>) || []) {
+          if (element?.type === 'ObjectExpression') visitStyleObject(element)
+        }
+      }
+    }
+  }
+
+  walk(root, (node) => {
+    if (node.type === 'CallExpression') {
+      const callee = identifierName(node.callee as EstreeNode)
+      if (!callee || !styledBindings.has(callee)) return
+      const definition = (node.arguments as EstreeNode[])?.[1]
+      if (definition?.type === 'ObjectExpression') visitStyleObject(definition)
+      return
+    }
+    if (node.type === 'JSXOpeningElement') {
+      const componentRoot = jsxRootName(node.name as EstreeNode)
+      const accepted = options.allComponents
+        ? componentRoot !== null && /^[A-Z]/.test(componentRoot)
+        : componentRoot !== null && componentNames.has(componentRoot)
+      if (!accepted) return
+      for (const attribute of (node.attributes as EstreeNode[]) || []) {
+        if (attribute.type !== 'JSXAttribute') continue
+        const property = identifierName(attribute.name as EstreeNode)
+        if (!property) continue
+        const rawValue = attribute.value as EstreeNode | undefined
+        const valueNode =
+          rawValue?.type === 'JSXExpressionContainer'
+            ? (rawValue.expression as EstreeNode)
+            : rawValue
+        if (valueNode) pushSite(property, valueNode, 'jsx-attribute')
+      }
+    }
+  })
+
+  sites.sort((a, b) => a.start - b.start)
+  return sites
+}

package/src/extract-sucrase.ts

@@ -0,0 +1,308 @@
+// Style site extraction over sucrase's token stream.
+//
+// The ultra-light path for in-browser IDEs: sucrase's tokenizer already
+// resolves the hard ambiguities (JSX vs TS generics, template boundaries), and
+// a token walk over its output is a few kilobytes on top. The parser is
+// injected rather than imported so a host that already bundles sucrase reuses
+// its copy:
+//
+//   import { parse } from 'sucrase/dist/parser/index.js'
+//   import { TokenType } from 'sucrase/dist/parser/tokenizer/types.js'
+//   const extract = createSucraseStyleSiteExtractor({ parse, TokenType })
+//
+// Two site shapes are recognized, matching the eslint rule and the tsserver
+// plugin: string-valued JSX attributes on tamagui components, and string
+// property values anywhere inside a styled() call's definition object
+// (variants nest arbitrarily). Sites whose raw text differs from its cooked
+// value (escapes, entities, template substitutions) are skipped: replacing an
+// approximate span risks deleting a runtime clause.
+
+import type { ExtractStyleSites, StyleSite } from './document'
+
+export interface SucraseToken {
+  type: number
+  start: number
+  end: number
+}
+
+export interface SucraseParser {
+  parse(
+    code: string,
+    isJSXEnabled: boolean,
+    isTypeScriptEnabled: boolean,
+    isFlowEnabled: boolean
+  ): { tokens: SucraseToken[] }
+  TokenType: Readonly<Record<string, number>>
+}
+
+export interface SucraseExtractorOptions {
+  /** which prop names produce sites; default: every prop */
+  isStyleProp?: (name: string) => boolean
+  /**
+   * which import sources mark components and `styled` as tamagui's.
+   * default: `tamagui`, `tamagui/*`, `@tamagui/*`
+   */
+  isTamaguiModule?: (source: string) => boolean
+  /** treat every capitalized JSX element as a tamagui component */
+  allComponents?: boolean
+}
+
+function defaultIsTamaguiModule(source: string): boolean {
+  return (
+    source === 'tamagui' ||
+    source.startsWith('tamagui/') ||
+    source.startsWith('@tamagui/')
+  )
+}
+
+export function createSucraseStyleSiteExtractor(
+  parser: SucraseParser,
+  options: SucraseExtractorOptions = {}
+): ExtractStyleSites {
+  const { TokenType } = parser
+  const T = {
+    import: TokenType._import,
+    string: TokenType.string,
+    name: TokenType.name,
+    comma: TokenType.comma,
+    colon: TokenType.colon,
+    eq: TokenType.eq,
+    dot: TokenType.dot,
+    star: TokenType.star,
+    slash: TokenType.slash,
+    braceL: TokenType.braceL,
+    braceR: TokenType.braceR,
+    dollarBraceL: TokenType.dollarBraceL,
+    parenL: TokenType.parenL,
+    parenR: TokenType.parenR,
+    backQuote: TokenType.backQuote,
+    template: TokenType.template,
+    jsxTagStart: TokenType.jsxTagStart,
+    jsxTagEnd: TokenType.jsxTagEnd,
+    jsxName: TokenType.jsxName,
+  }
+  const isStyleProp = options.isStyleProp ?? (() => true)
+  const isTamaguiModule = options.isTamaguiModule ?? defaultIsTamaguiModule
+
+  return (source) => {
+    const tokens = parser.parse(source, true, true, false).tokens
+    const sites: StyleSite[] = []
+
+    const text = (token: SucraseToken): string => source.slice(token.start, token.end)
+
+    /** cooked content span of a string/template value token run, else null */
+    const stringContent = (
+      index: number
+    ): { start: number; end: number; next: number } | null => {
+      const token = tokens[index]
+      if (token.type === T.string) {
+        const content = source.slice(token.start + 1, token.end - 1)
+        // escapes and JSX entities cook differently than they read; skip
+        if (content.includes('\\') || content.includes('&')) return null
+        return { start: token.start + 1, end: token.end - 1, next: index + 1 }
+      }
+      if (token.type === T.backQuote) {
+        const inner = tokens[index + 1]
+        if (inner?.type === T.backQuote) {
+          return { start: token.end, end: inner.start, next: index + 2 }
+        }
+        if (inner?.type === T.template && tokens[index + 2]?.type === T.backQuote) {
+          if (text(inner).includes('\\')) return null
+          return { start: inner.start, end: inner.end, next: index + 3 }
+        }
+      }
+      return null
+    }
+
+    // ── pass 1: imported vocabulary ────────────────────────────────────────
+    const styledBindings = new Set<string>()
+    const componentNames = new Set<string>()
+
+    for (let index = 0; index < tokens.length; index++) {
+      if (tokens[index].type !== T.import) continue
+      // find the module string: the first string token before the next
+      // statement-ish token; import statements are short, scan ahead
+      let cursor = index + 1
+      const specifiers: Array<{ imported: string; local: string }> = []
+      let namespace: string | null = null
+      let sawBrace = false
+      while (cursor < tokens.length) {
+        const token = tokens[cursor]
+        if (token.type === T.string) break
+        if (token.type === T.braceL) sawBrace = true
+        if (token.type === T.star && tokens[cursor + 2]?.type === T.name) {
+          namespace = text(tokens[cursor + 2])
+          cursor += 2
+        }
+        if (token.type === T.name && sawBrace) {
+          const imported = text(token)
+          if (imported !== 'as' && imported !== 'type' && imported !== 'from') {
+            let local = imported
+            if (
+              tokens[cursor + 1]?.type === T.name &&
+              text(tokens[cursor + 1]) === 'as' &&
+              tokens[cursor + 2]?.type === T.name
+            ) {
+              local = text(tokens[cursor + 2])
+              cursor += 2
+            }
+            specifiers.push({ imported, local })
+          }
+        }
+        cursor++
+      }
+      const moduleToken = tokens[cursor]
+      if (!moduleToken || moduleToken.type !== T.string) continue
+      const moduleSource = source.slice(moduleToken.start + 1, moduleToken.end - 1)
+      if (!isTamaguiModule(moduleSource)) continue
+      if (namespace) componentNames.add(namespace)
+      for (const specifier of specifiers) {
+        if (specifier.imported === 'styled') {
+          styledBindings.add(specifier.local)
+        } else if (/^[A-Z]/.test(specifier.imported)) {
+          componentNames.add(specifier.local)
+        }
+      }
+      index = cursor
+    }
+
+    // `const X = styled(...)` marks X as a tamagui component
+    for (let index = 0; index + 3 < tokens.length; index++) {
+      if (
+        tokens[index].type === T.name &&
+        tokens[index + 1].type === T.eq &&
+        tokens[index + 2].type === T.name &&
+        styledBindings.has(text(tokens[index + 2])) &&
+        tokens[index + 3].type === T.parenL
+      ) {
+        componentNames.add(text(tokens[index]))
+      }
+    }
+
+    // ── pass 2: sites ──────────────────────────────────────────────────────
+    // open JSX tags nest through attribute expressions, so both trackers are
+    // stacks maintained by one linear walk over brace/paren depth
+    const tagStack: Array<string | null> = []
+    const styledStack: Array<{ parenDepth: number; braceDepth: number; arg: number }> = []
+    let parenDepth = 0
+    let braceDepth = 0
+
+    const jsxRootAccepted = (name: string | null): boolean => {
+      if (!name) return false
+      if (options.allComponents) return /^[A-Z]/.test(name)
+      return componentNames.has(name)
+    }
+
+    for (let index = 0; index < tokens.length; index++) {
+      const token = tokens[index]
+
+      if (token.type === T.parenL) parenDepth++
+      else if (token.type === T.parenR) {
+        parenDepth--
+        const styledContext = styledStack[styledStack.length - 1]
+        if (styledContext && parenDepth < styledContext.parenDepth) styledStack.pop()
+      } else if (token.type === T.braceL || token.type === T.dollarBraceL) {
+        braceDepth++
+      } else if (token.type === T.braceR) braceDepth--
+      else if (token.type === T.jsxTagStart) {
+        // every tag head — opening `<X`, self-closing, closing `</X` — ends at
+        // exactly one jsxTagEnd, so heads push and pop unconditionally.
+        // attributes only ever occur inside the innermost head; nesting comes
+        // from attribute expressions like render={<Y a="1" />}
+        const isClosing = tokens[index + 1]?.type === T.slash
+        const root =
+          !isClosing && tokens[index + 1]?.type === T.jsxName
+            ? text(tokens[index + 1])
+            : null
+        tagStack.push(root)
+        continue
+      } else if (token.type === T.jsxTagEnd) {
+        tagStack.pop()
+        continue
+      }
+
+      // styled(...) call opens a context
+      if (
+        token.type === T.name &&
+        styledBindings.has(text(token)) &&
+        tokens[index + 1]?.type === T.parenL
+      ) {
+        styledStack.push({ parenDepth: parenDepth + 1, braceDepth, arg: 0 })
+        continue
+      }
+
+      // commas at call depth separate styled()'s arguments; only the second
+      // argument is the definition object
+      const styledContext = styledStack[styledStack.length - 1]
+      if (
+        styledContext &&
+        token.type === T.comma &&
+        parenDepth === styledContext.parenDepth &&
+        braceDepth === styledContext.braceDepth
+      ) {
+        styledContext.arg++
+        continue
+      }
+
+      // styled definition property: `{ key: 'value' }` at any nesting
+      if (
+        styledContext?.arg === 1 &&
+        (token.type === T.name || token.type === T.string) &&
+        (tokens[index - 1]?.type === T.braceL || tokens[index - 1]?.type === T.comma) &&
+        tokens[index + 1]?.type === T.colon &&
+        braceDepth > styledContext.braceDepth
+      ) {
+        const property =
+          token.type === T.string
+            ? source.slice(token.start + 1, token.end - 1)
+            : text(token)
+        const content = stringContent(index + 2)
+        if (content && isStyleProp(property)) {
+          const after = tokens[content.next]
+          if (after?.type === T.comma || after?.type === T.braceR) {
+            sites.push({
+              property,
+              value: source.slice(content.start, content.end),
+              start: content.start,
+              end: content.end,
+              kind: 'styled-property',
+            })
+          }
+        }
+        continue
+      }
+
+      // JSX attribute: jsxName not part of the tag name itself
+      if (
+        token.type === T.jsxName &&
+        tokens[index - 1]?.type !== T.jsxTagStart &&
+        tokens[index - 1]?.type !== T.dot &&
+        tokens[index - 1]?.type !== T.slash &&
+        jsxRootAccepted(tagStack[tagStack.length - 1] ?? null)
+      ) {
+        const property = text(token)
+        if (!isStyleProp(property)) continue
+        if (tokens[index + 1]?.type !== T.eq) continue
+        const valueIndex = index + 2
+        let content: { start: number; end: number; next: number } | null = null
+        if (tokens[valueIndex]?.type === T.braceL) {
+          const inner = stringContent(valueIndex + 1)
+          if (inner && tokens[inner.next]?.type === T.braceR) content = inner
+        } else {
+          content = stringContent(valueIndex)
+        }
+        if (content) {
+          sites.push({
+            property,
+            value: source.slice(content.start, content.end),
+            start: content.start,
+            end: content.end,
+            kind: 'jsx-attribute',
+          })
+        }
+      }
+    }
+
+    return sites
+  }
+}

package/src/host.ts

@@ -0,0 +1,32 @@
+import type { HostView } from '@tamagui/style-grammar/tooling'
+import type ts from 'typescript'
+
+/**
+ * resolves the style-prop surface TypeScript assigns to a Tamagui component.
+ * the staticConfig marker distinguishes Tamagui hosts from unrelated React
+ * components, while the call signatures retain styled component prop types.
+ */
+export function resolveTamaguiHost(
+  checker: ts.TypeChecker,
+  component: ts.Node
+): HostView | undefined {
+  const componentType = checker.getTypeAtLocation(component)
+  if (!checker.getPropertyOfType(componentType, 'staticConfig')) return undefined
+
+  const propsTypes: ts.Type[] = []
+  for (const signature of componentType.getCallSignatures()) {
+    const props = signature.getParameters()[0]
+    if (props) propsTypes.push(checker.getTypeOfSymbolAtLocation(props, component))
+  }
+  if (propsTypes.length === 0) return undefined
+
+  return {
+    displayName: component.getText(),
+    accepts: (property) =>
+      propsTypes.some(
+        (propsType) =>
+          checker.getPropertyOfType(checker.getApparentType(propsType), property) !==
+          undefined
+      ),
+  }
+}