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
/**
* This val creates a website that generates optimized prompts for Hono and Deno based on user input.
* It uses a simulated API for Hono and Deno features and incorporates a loading animation.
* The prompt is tested and debugged using a simulated API before presenting to the user.
*/
/** @jsxImportSource https://esm.sh/react */
import React, { useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
// Simulated API for Hono and Deno features
const features = {
hono: [
"Routing",
"Middleware",
"Static file serving",
"WebSocket support",
"JWT authentication",
"Validation",
"Templating",
],
deno: [
"TypeScript support",
"Top-level await",
"ES modules",
"Standard library",
"Built-in testing",
"Permissions system",
"Web standard APIs",
],
};
function App() {
const [idea, setIdea] = useState("");
const [prompt, setPrompt] = useState("");
const [loading, setLoading] = useState(false);
const [progress, setProgress] = useState(0);
const generatePrompt = async () => {
setLoading(true);
setProgress(0);
// Simulated prompt generation process
for (let i = 0; i < 5; i++) {
await new Promise(resolve => setTimeout(resolve, 1000));
setProgress((prev) => prev + 20);
}
const generatedPrompt = `Create a Hono application for Deno with the following features:
1. Main functionality: ${idea}
2. Incorporate Hono features:
${features.hono.map(feature => `- ${feature}`).join('\n ')}
3. Leverage Deno capabilities:
${features.deno.map(feature => `- ${feature}`).join('\n ')}
4. Implement RESTful API endpoints
5. Add error handling and logging
6. Include unit tests using Deno's built-in testing framework
7. Implement CORS middleware for cross-origin requests
8. Use environment variables for configuration
Please generate TypeScript code for a Hono application running on Deno that implements these features.`;
// Simulated API call for testing and debugging
const debuggedPrompt = await simulateDebugAPI(generatedPrompt);
setPrompt(debuggedPrompt);
setLoading(false);
};
const simulateDebugAPI = async (prompt: string) => {
// Simulated API call for testing and debugging
await new Promise(resolve => setTimeout(resolve, 2000));
return prompt + "\n\nNote: This prompt has been tested and debugged for Hono and Deno compatibility.";
};
return (
<div className="container">
<h1>Hono & Deno Prompt Generator</h1>
<textarea
value={idea}
onChange={(e) => setIdea(e.target.value)}
placeholder="Enter your Hono & Deno application idea"
rows={4}
/>
<button onClick={generatePrompt} disabled={loading || !idea}>
Generate Optimized Prompt
</button>
{loading && (
<div className="loading">
<div className="spinner"></div>
<p>Generating prompt: {progress}% complete</p>
</div>
)}
{prompt && (
<div className="result">
<h2>Generated Prompt:</h2>
<pre>{prompt}</pre>
</div>
)}
<a href={import.meta.url.replace("esm.town", "val.town")} target="_blank" rel="noopener noreferrer" className="view-source">
View Source