stx/examples/hover-test.stx at main · stacksjs/stx · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>STX Hover Test</title>
</head>
<body>

@ts
  // Test 1: Interface with object
  interface User {
    name: string
    age: number
    email: string
  }

  const user: User = { name: "John", age: 30, email: "john@example.com" }

  // Test 2: Simple variables
  const greeting: string = "Hello World"
  const count: number = 42
  const isActive: boolean = true

  // Test 3: Array types
  interface Product {
    id: number
    title: string
    price: number
  }

  const products: Product[] = [
    { id: 1, title: "Laptop", price: 999 },
    { id: 2, title: "Mouse", price: 29 }
  ]

  // Test 4: Function with return type
  function getUserEmail(): string {
    return user.email
  }

  // Test 5: Nested objects
  interface Address {
    street: string
    city: string
    country: string
  }

  interface Customer {
    name: string
    address: Address
  }

  const customer: Customer = {
    name: "Jane Doe",
    address: {
      street: "123 Main St",
      city: "New York",
      country: "USA"
    }
  }
@endts

<h1>STX Hover Test Cases</h1>

<!-- Test Case 1: Hover over property access -->
<div>
  <h2>User Information</h2>
  <p>Name: {{ user.name }}</p>          <!-- Hover 'name' should show: (property) user.name: string -->
  <p>Age: {{ user.age }}</p>            <!-- Hover 'age' should show: (property) user.age: number -->
  <p>Email: {{ user.email }}</p>        <!-- Hover 'email' should show: (property) user.email: string -->
</div>

<!-- Test Case 2: Hover over simple variables -->
<div>
  <h2>Simple Variables</h2>
  <p>{{ greeting }}</p>                 <!-- Hover should show: const greeting: string -->
  <p>Count: {{ count }}</p>             <!-- Hover should show: const count: number -->
  <p>Active: {{ isActive }}</p>         <!-- Hover should show: const isActive: boolean -->
</div>

<!-- Test Case 3: Hover in loops -->
<div>
  <h2>Products</h2>
  @foreach(products as product)
    <div>
      <h3>{{ product.title }}</h3>      <!-- Hover 'title' should show property type -->
      <p>Price: ${{ product.price }}</p> <!-- Hover 'price' should show property type -->
      <p>ID: {{ product.id }}</p>       <!-- Hover 'id' should show property type -->
    </div>
  @endforeach
</div>

<!-- Test Case 4: Function return types -->
<div>
  <h2>Function Result</h2>
  <p>Email from function: {{ getUserEmail() }}</p>  <!-- Hover should show function signature -->
</div>

<!-- Test Case 5: Nested object properties -->
<div>
  <h2>Customer Address</h2>
  <p>Name: {{ customer.name }}</p>
  <p>Street: {{ customer.address.street }}</p>     <!-- Hover should work for nested properties -->
  <p>City: {{ customer.address.city }}</p>
  <p>Country: {{ customer.address.country }}</p>
</div>

<!-- Test Case 6: Hover over parent object -->
<div>
  <h2>Object Hover</h2>
  <p>{{ user }}</p>                     <!-- Hover 'user' should show: const user: User -->
  <p>{{ customer }}</p>                 <!-- Hover 'customer' should show: const customer: Customer -->
</div>

</body>
</html>