jac-client 0.2.8__py3-none-any.whl → 0.2.11__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- jac_client/examples/all-in-one/button.jac +4 -3
- jac_client/examples/all-in-one/components/CategoryFilter.jac +36 -24
- jac_client/examples/all-in-one/components/Header.jac +12 -8
- jac_client/examples/all-in-one/components/ProfitOverview.jac +49 -35
- jac_client/examples/all-in-one/components/Summary.jac +59 -36
- jac_client/examples/all-in-one/components/TransactionForm.jac +142 -112
- jac_client/examples/all-in-one/components/TransactionItem.jac +37 -30
- jac_client/examples/all-in-one/components/TransactionList.jac +33 -26
- jac_client/examples/all-in-one/components/button.jac +4 -3
- jac_client/examples/all-in-one/components/navigation.jac +111 -117
- jac_client/examples/all-in-one/constants/categories.jac +23 -24
- jac_client/examples/all-in-one/constants/clients.jac +7 -8
- jac_client/examples/all-in-one/context/BudgetContext.jac +9 -6
- jac_client/examples/all-in-one/hooks/useBudget.jac +18 -12
- jac_client/examples/all-in-one/hooks/useLocalStorage.jac +14 -13
- jac_client/examples/all-in-one/main.jac +542 -0
- jac_client/examples/all-in-one/pages/BudgetPlanner.jac +26 -12
- jac_client/examples/all-in-one/pages/FeaturesTest.jac +43 -12
- jac_client/examples/all-in-one/pages/LandingPage.jac +113 -90
- jac_client/examples/all-in-one/pages/budget_planner_ui.cl.jac +65 -0
- jac_client/examples/all-in-one/pages/features_test_ui.cl.jac +675 -0
- jac_client/examples/all-in-one/pages/loginPage.jac +114 -119
- jac_client/examples/all-in-one/pages/nestedDemo.jac +44 -51
- jac_client/examples/all-in-one/pages/notFound.jac +15 -21
- jac_client/examples/all-in-one/pages/signupPage.jac +113 -119
- jac_client/examples/all-in-one/utils/formatters.jac +5 -8
- jac_client/examples/asset-serving/css-with-image/main.jac +92 -0
- jac_client/examples/asset-serving/image-asset/main.jac +56 -0
- jac_client/examples/asset-serving/import-alias/main.jac +109 -0
- jac_client/examples/basic/main.jac +23 -0
- jac_client/examples/basic-auth/main.jac +363 -0
- jac_client/examples/basic-auth-with-router/main.jac +451 -0
- jac_client/examples/basic-full-stack/main.jac +362 -0
- jac_client/examples/css-styling/js-styling/main.jac +63 -0
- jac_client/examples/css-styling/material-ui/main.jac +122 -0
- jac_client/examples/css-styling/pure-css/main.jac +55 -0
- jac_client/examples/css-styling/sass-example/main.jac +55 -0
- jac_client/examples/css-styling/styled-components/main.jac +62 -0
- jac_client/examples/css-styling/tailwind-example/main.jac +74 -0
- jac_client/examples/full-stack-with-auth/main.jac +696 -0
- jac_client/examples/little-x/main.jac +681 -0
- jac_client/examples/little-x/src/submit-button.jac +15 -14
- jac_client/examples/nested-folders/nested-advance/main.jac +26 -0
- jac_client/examples/nested-folders/nested-advance/src/ButtonRoot.jac +4 -6
- jac_client/examples/nested-folders/nested-advance/src/level1/ButtonSecondL.jac +9 -13
- jac_client/examples/nested-folders/nested-advance/src/level1/Card.jac +29 -32
- jac_client/examples/nested-folders/nested-advance/src/level1/level2/ButtonThirdL.jac +12 -18
- jac_client/examples/nested-folders/nested-basic/{src/app.jac → main.jac} +7 -5
- jac_client/examples/nested-folders/nested-basic/src/button.jac +4 -3
- jac_client/examples/nested-folders/nested-basic/src/components/button.jac +4 -3
- jac_client/examples/ts-support/main.jac +35 -0
- jac_client/examples/with-router/main.jac +286 -0
- jac_client/plugin/cli.jac +491 -411
- jac_client/plugin/client.jac +25 -0
- jac_client/plugin/client_runtime.cl.jac +10 -4
- jac_client/plugin/impl/client.impl.jac +96 -55
- jac_client/plugin/impl/client_runtime.impl.jac +155 -1
- jac_client/plugin/plugin_config.jac +211 -29
- jac_client/plugin/src/__init__.jac +0 -2
- jac_client/plugin/src/compiler.jac +0 -1
- jac_client/plugin/src/config_loader.jac +1 -0
- jac_client/plugin/src/desktop_config.jac +31 -0
- jac_client/plugin/src/impl/compiler.impl.jac +49 -17
- jac_client/plugin/src/impl/config_loader.impl.jac +8 -0
- jac_client/plugin/src/impl/desktop_config.impl.jac +191 -0
- jac_client/plugin/src/impl/jac_to_js.impl.jac +5 -1
- jac_client/plugin/src/impl/package_installer.impl.jac +20 -20
- jac_client/plugin/src/impl/vite_bundler.impl.jac +191 -64
- jac_client/plugin/src/targets/desktop/sidecar/main.py +144 -0
- jac_client/plugin/src/targets/desktop_target.jac +37 -0
- jac_client/plugin/src/targets/impl/desktop_target.impl.jac +2347 -0
- jac_client/plugin/src/targets/impl/registry.impl.jac +64 -0
- jac_client/plugin/src/targets/impl/web_target.impl.jac +157 -0
- jac_client/plugin/src/targets/register.jac +21 -0
- jac_client/plugin/src/targets/registry.jac +87 -0
- jac_client/plugin/src/targets/web_target.jac +35 -0
- jac_client/plugin/src/vite_bundler.jac +6 -0
- jac_client/plugin/utils/__init__.jac +3 -0
- jac_client/plugin/utils/bun_installer.jac +16 -0
- jac_client/plugin/utils/impl/bun_installer.impl.jac +99 -0
- jac_client/templates/client.jacpack +72 -0
- jac_client/templates/fullstack.jacpack +61 -0
- jac_client/tests/conftest.py +103 -47
- jac_client/tests/fixtures/spawn_test/app.jac +49 -52
- jac_client/tests/fixtures/with-ts/app.jac +27 -27
- jac_client/tests/test_cli.py +182 -71
- jac_client/tests/test_e2e.py +232 -0
- jac_client/tests/test_helpers.py +58 -0
- jac_client/tests/test_it.py +91 -135
- jac_client/tests/test_it_desktop.py +891 -0
- {jac_client-0.2.8.dist-info → jac_client-0.2.11.dist-info}/METADATA +6 -6
- jac_client-0.2.11.dist-info/RECORD +113 -0
- {jac_client-0.2.8.dist-info → jac_client-0.2.11.dist-info}/WHEEL +1 -1
- jac_client/examples/all-in-one/app.jac +0 -573
- jac_client/examples/all-in-one/pages/BudgetPlanner.cl.jac +0 -70
- jac_client/examples/all-in-one/pages/FeaturesTest.cl.jac +0 -552
- jac_client/examples/asset-serving/css-with-image/src/app.jac +0 -88
- jac_client/examples/asset-serving/image-asset/src/app.jac +0 -55
- jac_client/examples/asset-serving/import-alias/src/app.jac +0 -111
- jac_client/examples/basic/src/app.jac +0 -21
- jac_client/examples/basic-auth/src/app.jac +0 -371
- jac_client/examples/basic-auth-with-router/src/app.jac +0 -464
- jac_client/examples/basic-full-stack/src/app.jac +0 -359
- jac_client/examples/css-styling/js-styling/src/app.jac +0 -84
- jac_client/examples/css-styling/material-ui/src/app.jac +0 -122
- jac_client/examples/css-styling/pure-css/src/app.jac +0 -64
- jac_client/examples/css-styling/sass-example/src/app.jac +0 -64
- jac_client/examples/css-styling/styled-components/src/app.jac +0 -71
- jac_client/examples/css-styling/tailwind-example/src/app.jac +0 -63
- jac_client/examples/full-stack-with-auth/src/app.jac +0 -722
- jac_client/examples/little-x/src/app.jac +0 -719
- jac_client/examples/nested-folders/nested-advance/src/app.jac +0 -35
- jac_client/examples/ts-support/src/app.jac +0 -35
- jac_client/examples/with-router/src/app.jac +0 -323
- jac_client/plugin/src/babel_processor.jac +0 -18
- jac_client/plugin/src/impl/babel_processor.impl.jac +0 -89
- jac_client-0.2.8.dist-info/RECORD +0 -97
- {jac_client-0.2.8.dist-info → jac_client-0.2.11.dist-info}/entry_points.txt +0 -0
- {jac_client-0.2.8.dist-info → jac_client-0.2.11.dist-info}/top_level.txt +0 -0
|
@@ -1,552 +0,0 @@
|
|
|
1
|
-
# # Features Test Page - Client-side UI
|
|
2
|
-
# # Demonstrates: props, exports, cl files, TypeScript imports, string methods,
|
|
3
|
-
# # imports from JAC/JS/TS, spawning walkers from cl file
|
|
4
|
-
|
|
5
|
-
import from "@jac-client/utils" { Link, useNavigate }
|
|
6
|
-
import from react { useState, useEffect }
|
|
7
|
-
|
|
8
|
-
# # Import TypeScript component
|
|
9
|
-
# import from ..components.PieChart { PieChart }
|
|
10
|
-
|
|
11
|
-
# # Import JavaScript helpers
|
|
12
|
-
import from ..utils.helpers { generateId, calculatePercentage, sumBy }
|
|
13
|
-
|
|
14
|
-
# # Import from other JAC files
|
|
15
|
-
import from ..utils.formatters { formatCurrency }
|
|
16
|
-
|
|
17
|
-
# ============================================================================
|
|
18
|
-
# REUSABLE COMPONENTS WITH PROPS
|
|
19
|
-
# ============================================================================
|
|
20
|
-
|
|
21
|
-
# Button component demonstrating props - NEW PATTERN: Direct parameters
|
|
22
|
-
def:pub TestButton(text: str, onClick: any, variant: str) -> any {
|
|
23
|
-
bg_color = "#3b82f6" if variant == "primary" else "#6b7280";
|
|
24
|
-
hover_color = "#2563eb" if variant == "primary" else "#4b5563";
|
|
25
|
-
|
|
26
|
-
return <button
|
|
27
|
-
onClick={onClick}
|
|
28
|
-
style={{
|
|
29
|
-
"padding": "10px 20px",
|
|
30
|
-
"backgroundColor": bg_color,
|
|
31
|
-
"color": "white",
|
|
32
|
-
"border": "none",
|
|
33
|
-
"borderRadius": "6px",
|
|
34
|
-
"cursor": "pointer",
|
|
35
|
-
"fontSize": "14px",
|
|
36
|
-
"fontWeight": "600",
|
|
37
|
-
"transition": "all 0.2s"
|
|
38
|
-
}}
|
|
39
|
-
onMouseOver={lambda e: any -> None {
|
|
40
|
-
e.target.style.backgroundColor = hover_color;
|
|
41
|
-
}}
|
|
42
|
-
onMouseOut={lambda e: any -> None {
|
|
43
|
-
e.target.style.backgroundColor = bg_color;
|
|
44
|
-
}}
|
|
45
|
-
>
|
|
46
|
-
{text}
|
|
47
|
-
</button>;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
# # Card component with props - NEW PATTERN: Direct parameters
|
|
51
|
-
def:pub TestCard(title: str, children: any, color: str) -> any {
|
|
52
|
-
return <div style={{
|
|
53
|
-
"backgroundColor": "white",
|
|
54
|
-
"border": "1px solid #e5e7eb",
|
|
55
|
-
"borderRadius": "8px",
|
|
56
|
-
"padding": "20px",
|
|
57
|
-
"marginBottom": "20px",
|
|
58
|
-
"boxShadow": "0 1px 3px rgba(0,0,0,0.1)"
|
|
59
|
-
}}>
|
|
60
|
-
<div style={{
|
|
61
|
-
"backgroundColor": color,
|
|
62
|
-
"padding": "10px",
|
|
63
|
-
"borderRadius": "6px",
|
|
64
|
-
"marginBottom": "15px"
|
|
65
|
-
}}>
|
|
66
|
-
<h3 style={{
|
|
67
|
-
"margin": "0",
|
|
68
|
-
"fontSize": "18px",
|
|
69
|
-
"fontWeight": "600",
|
|
70
|
-
"color": "#1f2937"
|
|
71
|
-
}}>{title}</h3>
|
|
72
|
-
</div>
|
|
73
|
-
<div>{children}</div>
|
|
74
|
-
</div>;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
# Result display component - NEW PATTERN: Direct parameters
|
|
78
|
-
def:pub ResultDisplay(data: any, label: str) -> any {
|
|
79
|
-
if not data {
|
|
80
|
-
return <div style={{"color": "#9ca3af", "fontStyle": "italic"}}>
|
|
81
|
-
No data to display
|
|
82
|
-
</div>;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
return <div style={{
|
|
86
|
-
"backgroundColor": "#f9fafb",
|
|
87
|
-
"padding": "15px",
|
|
88
|
-
"borderRadius": "6px",
|
|
89
|
-
"border": "1px solid #e5e7eb"
|
|
90
|
-
}}>
|
|
91
|
-
<strong style={{"color": "#374151"}}>{label}:</strong>
|
|
92
|
-
<pre style={{
|
|
93
|
-
"marginTop": "10px",
|
|
94
|
-
"padding": "10px",
|
|
95
|
-
"backgroundColor": "#1f2937",
|
|
96
|
-
"color": "#10b981",
|
|
97
|
-
"borderRadius": "4px",
|
|
98
|
-
"overflow": "auto",
|
|
99
|
-
"fontSize": "12px",
|
|
100
|
-
"fontFamily": "monospace"
|
|
101
|
-
}}>
|
|
102
|
-
{JSON.stringify(data, None, 2)}
|
|
103
|
-
</pre>
|
|
104
|
-
</div>;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
# ============================================================================
|
|
108
|
-
# MAIN PAGE COMPONENT
|
|
109
|
-
# ============================================================================
|
|
110
|
-
|
|
111
|
-
def:pub FeaturesTest() -> any {
|
|
112
|
-
navigate = useNavigate();
|
|
113
|
-
|
|
114
|
-
# State management
|
|
115
|
-
has testMessage: str = "";
|
|
116
|
-
has testData: list = [];
|
|
117
|
-
has stringInput: str = "Hello JAC World!";
|
|
118
|
-
has stringResult: any = None;
|
|
119
|
-
has numberList: str = "1,2,3,4,5";
|
|
120
|
-
has listResult: any = None;
|
|
121
|
-
has complexResult: any = None;
|
|
122
|
-
has loading: bool = false;
|
|
123
|
-
|
|
124
|
-
# Load test data on mount
|
|
125
|
-
useEffect(lambda -> None {
|
|
126
|
-
async def loadData() -> None {
|
|
127
|
-
try {
|
|
128
|
-
result = root spawn read_test_data();
|
|
129
|
-
testData = result.reports if result.reports[0] else [];
|
|
130
|
-
} except Exception as e {
|
|
131
|
-
console.log("Error loading data:", e);
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
loadData();
|
|
135
|
-
}, []);
|
|
136
|
-
|
|
137
|
-
# ========================================================================
|
|
138
|
-
# EVENT HANDLERS - Demonstrating Walker Spawning from CL
|
|
139
|
-
# ========================================================================
|
|
140
|
-
|
|
141
|
-
# Create test data
|
|
142
|
-
async def handleCreate() -> None {
|
|
143
|
-
if not testMessage.trim() {
|
|
144
|
-
alert("Please enter a message");
|
|
145
|
-
return;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
loading = true;
|
|
149
|
-
try {
|
|
150
|
-
response = root spawn create_test_data(message=testMessage.trim());
|
|
151
|
-
new_item = response.reports[0][0];
|
|
152
|
-
testData = testData.concat([new_item]);
|
|
153
|
-
testMessage = "";
|
|
154
|
-
alert("Data created successfully!");
|
|
155
|
-
} except Exception as e {
|
|
156
|
-
console.error("Error creating data:", e);
|
|
157
|
-
alert("Error creating data: " + e.toString());
|
|
158
|
-
}
|
|
159
|
-
loading = false;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
# Update test data
|
|
163
|
-
async def handleUpdate(item_id: any) -> None {
|
|
164
|
-
new_msg = prompt("Enter new message:");
|
|
165
|
-
if not new_msg {
|
|
166
|
-
return;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
loading = true;
|
|
170
|
-
try {
|
|
171
|
-
item_id spawn update_test_data(new_message=new_msg);
|
|
172
|
-
# Reload data
|
|
173
|
-
result = root spawn read_test_data();
|
|
174
|
-
testData = result.reports if result.reports[0] else [];
|
|
175
|
-
alert("Data updated successfully!");
|
|
176
|
-
} except Exception as e {
|
|
177
|
-
console.error("Error updating data:", e);
|
|
178
|
-
alert("Error updating data: " + e.toString());
|
|
179
|
-
}
|
|
180
|
-
loading = false;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
# Delete test data
|
|
184
|
-
async def handleDelete(item_id: any) -> None {
|
|
185
|
-
if not confirm("Are you sure you want to delete this item?") {
|
|
186
|
-
return;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
loading = true;
|
|
190
|
-
try {
|
|
191
|
-
item_id spawn delete_test_data();
|
|
192
|
-
# Remove from local state
|
|
193
|
-
testData = testData.filter(lambda item: any -> bool {
|
|
194
|
-
return item._jac_id != item_id;
|
|
195
|
-
});
|
|
196
|
-
alert("Data deleted successfully!");
|
|
197
|
-
} except Exception as e {
|
|
198
|
-
console.error("Error deleting data:", e);
|
|
199
|
-
alert("Error deleting data: " + e.toString());
|
|
200
|
-
}
|
|
201
|
-
loading = false;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
# Test string methods via walker
|
|
205
|
-
async def handleStringTest() -> None {
|
|
206
|
-
loading = true;
|
|
207
|
-
try {
|
|
208
|
-
response = root spawn test_string_methods(input_text=stringInput);
|
|
209
|
-
result = response.reports[0];
|
|
210
|
-
stringResult = result;
|
|
211
|
-
} except Exception as e {
|
|
212
|
-
console.error("Error testing strings:", e);
|
|
213
|
-
alert("Error testing strings: " + e.toString());
|
|
214
|
-
}
|
|
215
|
-
loading = false;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
# Test list operations via walker
|
|
219
|
-
async def handleListTest() -> None {
|
|
220
|
-
loading = true;
|
|
221
|
-
try {
|
|
222
|
-
# Parse number list
|
|
223
|
-
numbers = numberList.split(",").map(lambda x: str -> int {
|
|
224
|
-
return parseInt(x.trim());
|
|
225
|
-
}).filter(lambda x: any -> bool {
|
|
226
|
-
return not isNaN(x);
|
|
227
|
-
});
|
|
228
|
-
|
|
229
|
-
response = root spawn test_list_operations(numbers=numbers);
|
|
230
|
-
result = response.reports[0];
|
|
231
|
-
listResult = result;
|
|
232
|
-
} except Exception as e {
|
|
233
|
-
console.error("Error testing lists:", e);
|
|
234
|
-
alert("Error testing lists: " + e.toString());
|
|
235
|
-
}
|
|
236
|
-
loading = false;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
# Test complex data processing
|
|
240
|
-
async def handleComplexTest() -> None {
|
|
241
|
-
loading = true;
|
|
242
|
-
try {
|
|
243
|
-
# Generate sample data using JS helper
|
|
244
|
-
sample_items = [
|
|
245
|
-
{"id": generateId(), "name": "apple", "value": 10},
|
|
246
|
-
{"id": generateId(), "name": "banana", "value": 20},
|
|
247
|
-
{"id": generateId(), "name": "cherry", "value": 30}
|
|
248
|
-
];
|
|
249
|
-
|
|
250
|
-
response = root spawn process_complex_data(items=sample_items);
|
|
251
|
-
result = response.reports[0];
|
|
252
|
-
complexResult = result;
|
|
253
|
-
} except Exception as e {
|
|
254
|
-
console.error("Error processing complex data:", e);
|
|
255
|
-
alert("Error processing complex data: " + e.toString());
|
|
256
|
-
}
|
|
257
|
-
loading = false;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
# ========================================================================
|
|
261
|
-
# DEMONSTRATION OF STRING METHODS (CLIENT-SIDE)
|
|
262
|
-
# ========================================================================
|
|
263
|
-
demo_text = "JAC Language Features";
|
|
264
|
-
string_demos = {
|
|
265
|
-
"Original": demo_text,
|
|
266
|
-
"Uppercase": demo_text.toUpperCase(),
|
|
267
|
-
"Lowercase": demo_text.toLowerCase(),
|
|
268
|
-
"Length": demo_text.length.toString(),
|
|
269
|
-
"Split by space": demo_text.split(" ").join(", ")
|
|
270
|
-
};
|
|
271
|
-
|
|
272
|
-
# Demo chart data for TypeScript component
|
|
273
|
-
chart_data = [
|
|
274
|
-
{"name": "Walker Tests", "value": 5},
|
|
275
|
-
{"name": "String Methods", "value": 8},
|
|
276
|
-
{"name": "List Operations", "value": 7},
|
|
277
|
-
{"name": "Components", "value": 4}
|
|
278
|
-
];
|
|
279
|
-
|
|
280
|
-
# Calculate total using JS helper
|
|
281
|
-
total_tests = sumBy(chart_data, "value");
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
# ========================================================================
|
|
285
|
-
# RENDER
|
|
286
|
-
# ========================================================================
|
|
287
|
-
return <div style={{
|
|
288
|
-
"maxWidth": "1200px",
|
|
289
|
-
"margin": "0 auto",
|
|
290
|
-
"padding": "20px",
|
|
291
|
-
"fontFamily": "system-ui, -apple-system, sans-serif"
|
|
292
|
-
}}>
|
|
293
|
-
# Header
|
|
294
|
-
<div style={{
|
|
295
|
-
"display": "flex",
|
|
296
|
-
"justifyContent": "space-between",
|
|
297
|
-
"alignItems": "center",
|
|
298
|
-
"marginBottom": "30px"
|
|
299
|
-
}}>
|
|
300
|
-
<h1 style={{"color": "#1f2937", "margin": "0"}}>
|
|
301
|
-
JAC Features Test Suite
|
|
302
|
-
</h1>
|
|
303
|
-
<Link to="/">
|
|
304
|
-
<TestButton text="← Back Home" onClick={lambda -> None {}} variant="secondary" />
|
|
305
|
-
</Link>
|
|
306
|
-
</div>
|
|
307
|
-
|
|
308
|
-
# Loading indicator
|
|
309
|
-
{loading and <div style={{
|
|
310
|
-
"position": "fixed",
|
|
311
|
-
"top": "20px",
|
|
312
|
-
"right": "20px",
|
|
313
|
-
"backgroundColor": "#3b82f6",
|
|
314
|
-
"color": "white",
|
|
315
|
-
"padding": "10px 20px",
|
|
316
|
-
"borderRadius": "6px",
|
|
317
|
-
"boxShadow": "0 4px 6px rgba(0,0,0,0.2)",
|
|
318
|
-
"zIndex": "1000"
|
|
319
|
-
}}>
|
|
320
|
-
Processing...
|
|
321
|
-
</div>}
|
|
322
|
-
|
|
323
|
-
# Section 1: Walker CRUD Operations
|
|
324
|
-
<TestCard title="1. Walker CRUD Operations (Spawn from CL)" color="#dbeafe">
|
|
325
|
-
<div style={{"marginBottom": "15px"}}>
|
|
326
|
-
<p style={{"color": "#4b5563", "marginBottom": "10px"}}>
|
|
327
|
-
Test creating, reading, updating, and deleting data using walkers spawned from client code.
|
|
328
|
-
</p>
|
|
329
|
-
|
|
330
|
-
<div style={{"display": "flex", "gap": "10px", "marginBottom": "15px"}}>
|
|
331
|
-
<input
|
|
332
|
-
type="text"
|
|
333
|
-
value={testMessage}
|
|
334
|
-
onChange={lambda e: any -> None { testMessage = e.target.value; }}
|
|
335
|
-
placeholder="Enter test message..."
|
|
336
|
-
style={{
|
|
337
|
-
"flex": "1",
|
|
338
|
-
"padding": "10px",
|
|
339
|
-
"border": "1px solid #d1d5db",
|
|
340
|
-
"borderRadius": "6px",
|
|
341
|
-
"fontSize": "14px"
|
|
342
|
-
}}
|
|
343
|
-
/>
|
|
344
|
-
<TestButton
|
|
345
|
-
text="Create"
|
|
346
|
-
onClick={lambda -> None { handleCreate(); }}
|
|
347
|
-
variant="primary"
|
|
348
|
-
/>
|
|
349
|
-
</div>
|
|
350
|
-
|
|
351
|
-
<div style={{"marginTop": "20px"}}>
|
|
352
|
-
<strong style={{"color": "#374151"}}>Stored Data ({testData.length} items):</strong>
|
|
353
|
-
{testData.length == 0 and <p style={{"color": "#9ca3af", "fontStyle": "italic"}}>
|
|
354
|
-
No data yet. Create some!
|
|
355
|
-
</p>}
|
|
356
|
-
{testData.map(lambda item: any -> any {
|
|
357
|
-
return <div
|
|
358
|
-
key={item._jac_id}
|
|
359
|
-
style={{
|
|
360
|
-
"backgroundColor": "#f9fafb",
|
|
361
|
-
"padding": "12px",
|
|
362
|
-
"borderRadius": "6px",
|
|
363
|
-
"marginTop": "8px",
|
|
364
|
-
"display": "flex",
|
|
365
|
-
"justifyContent": "space-between",
|
|
366
|
-
"alignItems": "center"
|
|
367
|
-
}}
|
|
368
|
-
>
|
|
369
|
-
<div>
|
|
370
|
-
<div style={{"fontWeight": "600", "color": "#1f2937"}}>
|
|
371
|
-
{item.message}
|
|
372
|
-
</div>
|
|
373
|
-
<div style={{"fontSize": "12px", "color": "#6b7280"}}>
|
|
374
|
-
Count: {item.count} | Created: {item.created_at}
|
|
375
|
-
</div>
|
|
376
|
-
</div>
|
|
377
|
-
<div style={{"display": "flex", "gap": "8px"}}>
|
|
378
|
-
<TestButton
|
|
379
|
-
text="Edit"
|
|
380
|
-
onClick={lambda -> None { handleUpdate(item._jac_id); }}
|
|
381
|
-
variant="secondary"
|
|
382
|
-
/>
|
|
383
|
-
<TestButton
|
|
384
|
-
text="Delete"
|
|
385
|
-
onClick={lambda -> None { handleDelete(item._jac_id); }}
|
|
386
|
-
variant="secondary"
|
|
387
|
-
/>
|
|
388
|
-
</div>
|
|
389
|
-
</div>;
|
|
390
|
-
})}
|
|
391
|
-
</div>
|
|
392
|
-
</div>
|
|
393
|
-
</TestCard>
|
|
394
|
-
|
|
395
|
-
# # Section 2: String Methods
|
|
396
|
-
<TestCard title="2. String Methods (Client & Walker)" color="#fce7f3">
|
|
397
|
-
<div>
|
|
398
|
-
<p style={{"color": "#4b5563", "marginBottom": "10px"}}>
|
|
399
|
-
Client-side string manipulation and walker-based string processing.
|
|
400
|
-
</p>
|
|
401
|
-
|
|
402
|
-
# Client-side demo
|
|
403
|
-
<div style={{"marginBottom": "20px"}}>
|
|
404
|
-
<strong style={{"color": "#374151"}}>Client-side String Demo:</strong>
|
|
405
|
-
<div style={{
|
|
406
|
-
"backgroundColor": "#fef3c7",
|
|
407
|
-
"padding": "10px",
|
|
408
|
-
"borderRadius": "6px",
|
|
409
|
-
"marginTop": "8px"
|
|
410
|
-
}}>
|
|
411
|
-
{Object.keys(string_demos).map(lambda key: str -> any {
|
|
412
|
-
return <div key={key} style={{"marginBottom": "5px"}}>
|
|
413
|
-
<span style={{"fontWeight": "600"}}>{key}:</span> {string_demos[key]}
|
|
414
|
-
</div>;
|
|
415
|
-
})}
|
|
416
|
-
</div>
|
|
417
|
-
</div>
|
|
418
|
-
|
|
419
|
-
# Walker-based test
|
|
420
|
-
<div>
|
|
421
|
-
<strong style={{"color": "#374151"}}>Walker String Processing:</strong>
|
|
422
|
-
<div style={{"display": "flex", "gap": "10px", "marginTop": "10px"}}>
|
|
423
|
-
<input
|
|
424
|
-
type="text"
|
|
425
|
-
value={stringInput}
|
|
426
|
-
onChange={lambda e: any -> None { stringInput = e.target.value; }}
|
|
427
|
-
style={{
|
|
428
|
-
"flex": "1",
|
|
429
|
-
"padding": "10px",
|
|
430
|
-
"border": "1px solid #d1d5db",
|
|
431
|
-
"borderRadius": "6px",
|
|
432
|
-
"fontSize": "14px"
|
|
433
|
-
}}
|
|
434
|
-
/>
|
|
435
|
-
<TestButton
|
|
436
|
-
text="Process with Walker"
|
|
437
|
-
onClick={lambda -> None { handleStringTest(); }}
|
|
438
|
-
variant="primary"
|
|
439
|
-
/>
|
|
440
|
-
</div>
|
|
441
|
-
{stringResult and <ResultDisplay data={stringResult} label="Walker Result" />}
|
|
442
|
-
</div>
|
|
443
|
-
</div>
|
|
444
|
-
</TestCard>
|
|
445
|
-
|
|
446
|
-
# # Section 3: List Operations
|
|
447
|
-
<TestCard title="3. List/Array Operations" color="#ddd6fe">
|
|
448
|
-
<div>
|
|
449
|
-
<p style={{"color": "#4b5563", "marginBottom": "10px"}}>
|
|
450
|
-
Process arrays/lists using walker operations.
|
|
451
|
-
</p>
|
|
452
|
-
|
|
453
|
-
<div style={{"display": "flex", "gap": "10px", "marginTop": "10px"}}>
|
|
454
|
-
<input
|
|
455
|
-
type="text"
|
|
456
|
-
value={numberList}
|
|
457
|
-
onChange={lambda e: any -> None { numberList = e.target.value; }}
|
|
458
|
-
placeholder="Enter numbers (comma-separated)"
|
|
459
|
-
style={{
|
|
460
|
-
"flex": "1",
|
|
461
|
-
"padding": "10px",
|
|
462
|
-
"border": "1px solid #d1d5db",
|
|
463
|
-
"borderRadius": "6px",
|
|
464
|
-
"fontSize": "14px"
|
|
465
|
-
}}
|
|
466
|
-
/>
|
|
467
|
-
<TestButton
|
|
468
|
-
text="Process List"
|
|
469
|
-
onClick={lambda -> None { handleListTest(); }}
|
|
470
|
-
variant="primary"
|
|
471
|
-
/>
|
|
472
|
-
</div>
|
|
473
|
-
{listResult and <ResultDisplay data={listResult} label="List Operations Result" />}
|
|
474
|
-
</div>
|
|
475
|
-
</TestCard>
|
|
476
|
-
|
|
477
|
-
# # Section 4: TypeScript Component Integration
|
|
478
|
-
# <TestCard title="4. TypeScript Component (PieChart.tsx)" color="#ccfbf1">
|
|
479
|
-
# <div>
|
|
480
|
-
# <p style={{"color": "#4b5563", "marginBottom": "10px"}}>
|
|
481
|
-
# Imported TypeScript React component with data from JAC.
|
|
482
|
-
# </p>
|
|
483
|
-
# # <PieChart data={chart_data} title="Feature Test Distribution" />
|
|
484
|
-
# <p style={{"marginTop": "10px", "color": "#6b7280", "fontSize": "14px"}}>
|
|
485
|
-
# Total tests: {total_tests} (calculated using JS helper: sumBy)
|
|
486
|
-
# </p>
|
|
487
|
-
# </div>
|
|
488
|
-
# </TestCard>
|
|
489
|
-
|
|
490
|
-
# # Section 5: Import Demonstrations
|
|
491
|
-
<TestCard title="5. Import Demonstrations" color="#fed7aa">
|
|
492
|
-
<div>
|
|
493
|
-
<p style={{"color": "#4b5563", "marginBottom": "15px"}}>
|
|
494
|
-
This page demonstrates various import types:
|
|
495
|
-
</p>
|
|
496
|
-
|
|
497
|
-
<ul style={{"color": "#374151", "lineHeight": "1.8"}}>
|
|
498
|
-
<li><strong>JAC-Client Utils:</strong> Router components (Link, useNavigate)</li>
|
|
499
|
-
<li><strong>React:</strong> Hooks (useState, useEffect)</li>
|
|
500
|
-
# <li><strong>TypeScript:</strong> PieChart component from .tsx file</li>
|
|
501
|
-
<li><strong>JavaScript:</strong> Helper functions from .js file (generateId, sumBy)</li>
|
|
502
|
-
<li><strong>JAC Files:</strong> formatCurrency from utils/formatters.jac</li>
|
|
503
|
-
</ul>
|
|
504
|
-
|
|
505
|
-
<div style={{
|
|
506
|
-
"backgroundColor": "#f0fdf4",
|
|
507
|
-
"padding": "15px",
|
|
508
|
-
"borderRadius": "6px",
|
|
509
|
-
"marginTop": "15px"
|
|
510
|
-
}}>
|
|
511
|
-
<strong style={{"color": "#065f46"}}>Examples:</strong>
|
|
512
|
-
<div style={{"marginTop": "8px", "fontSize": "14px", "color": "#047857"}}>
|
|
513
|
-
<div>Generated ID: {generateId()}</div>
|
|
514
|
-
<div>Formatted Currency: {formatCurrency(1234.56)}</div>
|
|
515
|
-
<div>Percentage Calc: {calculatePercentage(75, 100)}%</div>
|
|
516
|
-
</div>
|
|
517
|
-
</div>
|
|
518
|
-
</div>
|
|
519
|
-
</TestCard>
|
|
520
|
-
|
|
521
|
-
# # Section 6: Complex Data Processing
|
|
522
|
-
<TestCard title="6. Complex Data Processing" color="#e0e7ff">
|
|
523
|
-
<div>
|
|
524
|
-
<p style={{"color": "#4b5563", "marginBottom": "10px"}}>
|
|
525
|
-
Process complex nested data structures with walkers.
|
|
526
|
-
</p>
|
|
527
|
-
|
|
528
|
-
<TestButton
|
|
529
|
-
text="Process Sample Data"
|
|
530
|
-
onClick={lambda -> None { handleComplexTest(); }}
|
|
531
|
-
variant="primary"
|
|
532
|
-
/>
|
|
533
|
-
|
|
534
|
-
{complexResult and <ResultDisplay data={complexResult} label="Complex Processing Result" />}
|
|
535
|
-
</div>
|
|
536
|
-
</TestCard>
|
|
537
|
-
|
|
538
|
-
# Footer
|
|
539
|
-
<div style={{
|
|
540
|
-
"marginTop": "30px",
|
|
541
|
-
"padding": "20px",
|
|
542
|
-
"backgroundColor": "#f9fafb",
|
|
543
|
-
"borderRadius": "8px",
|
|
544
|
-
"textAlign": "center",
|
|
545
|
-
"color": "#6b7280"
|
|
546
|
-
}}>
|
|
547
|
-
<p style={{"margin": "0"}}>
|
|
548
|
-
✅ All features tested: Props, Exports, CL Files, TypeScript, JavaScript, JAC Imports, String Methods, Walker Spawning
|
|
549
|
-
</p>
|
|
550
|
-
</div>
|
|
551
|
-
</div>;
|
|
552
|
-
}
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
# Pages
|
|
2
|
-
cl import from react { useEffect }
|
|
3
|
-
cl import ".styles.css";
|
|
4
|
-
|
|
5
|
-
cl {
|
|
6
|
-
def:pub app -> any {
|
|
7
|
-
has count: int = 0;
|
|
8
|
-
useEffect(lambda -> None{ console.log("Count: ", count);} , [count]);
|
|
9
|
-
return <div
|
|
10
|
-
style={{
|
|
11
|
-
padding: "20px",
|
|
12
|
-
textAlign: "center",
|
|
13
|
-
fontFamily: "Arial, sans-serif"
|
|
14
|
-
}}
|
|
15
|
-
>
|
|
16
|
-
<h1>
|
|
17
|
-
🍔 Burger Counter App
|
|
18
|
-
</h1>
|
|
19
|
-
<img
|
|
20
|
-
src="/static/assets/burger.png"
|
|
21
|
-
alt="Delicious Burger"
|
|
22
|
-
style={{
|
|
23
|
-
width: "200px",
|
|
24
|
-
height: "auto",
|
|
25
|
-
margin: "20px 0",
|
|
26
|
-
borderRadius: "10px",
|
|
27
|
-
boxShadow: "0 4px 8px rgba(0,0,0,0.2)"
|
|
28
|
-
}}
|
|
29
|
-
/>
|
|
30
|
-
<p
|
|
31
|
-
style={{fontSize: "18px", margin: "20px 0"}}
|
|
32
|
-
>
|
|
33
|
-
You've clicked the burger
|
|
34
|
-
<strong>
|
|
35
|
-
{count}
|
|
36
|
-
</strong>
|
|
37
|
-
times!
|
|
38
|
-
</p>
|
|
39
|
-
<button
|
|
40
|
-
onClick={lambda e: any -> None{ count = count + 1;} }
|
|
41
|
-
style={{
|
|
42
|
-
padding: "10px 20px",
|
|
43
|
-
fontSize: "16px",
|
|
44
|
-
backgroundColor: "#ff6b35",
|
|
45
|
-
color: "white",
|
|
46
|
-
border: "none",
|
|
47
|
-
borderRadius: "5px",
|
|
48
|
-
cursor: "pointer",
|
|
49
|
-
boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
|
|
50
|
-
}}
|
|
51
|
-
>
|
|
52
|
-
Click the Burger! 🍔
|
|
53
|
-
</button>
|
|
54
|
-
<h2
|
|
55
|
-
style={{marginTop: "40px", marginBottom: "20px"}}
|
|
56
|
-
>
|
|
57
|
-
CSS Asset Examples
|
|
58
|
-
</h2>
|
|
59
|
-
<div className="container">
|
|
60
|
-
<h3
|
|
61
|
-
style={{color: "white", textShadow: "2px 2px 4px rgba(0,0,0,0.5)"}}
|
|
62
|
-
>
|
|
63
|
-
Background Image Example
|
|
64
|
-
</h3>
|
|
65
|
-
<p
|
|
66
|
-
style={{color: "white", textShadow: "2px 2px 4px rgba(0,0,0,0.5)"}}
|
|
67
|
-
>
|
|
68
|
-
This container uses the burger image as a background via CSS
|
|
69
|
-
</p>
|
|
70
|
-
</div>
|
|
71
|
-
<div className="card">
|
|
72
|
-
<h3>
|
|
73
|
-
Image in Card
|
|
74
|
-
</h3>
|
|
75
|
-
<img
|
|
76
|
-
src="/static/assets/burger.png"
|
|
77
|
-
alt="Burger in Card"
|
|
78
|
-
className="burgerImage"
|
|
79
|
-
/>
|
|
80
|
-
<p
|
|
81
|
-
style={{marginTop: "15px", color: "#666"}}
|
|
82
|
-
>
|
|
83
|
-
This image is displayed within a styled card using CSS classes
|
|
84
|
-
</p>
|
|
85
|
-
</div>
|
|
86
|
-
</div>;
|
|
87
|
-
}
|
|
88
|
-
}
|