still issue with no build version #4838
Description
Struggling here with the no build version
Here is my index,html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo App</title>
</head>
<body>
<div id="app"></div>
<script type="importmap">
{
"imports": {
"preact": "https://esm.sh/preact@10.23.1",
"preact/": "https://esm.sh/preact@10.23.1/",
"@preact/signals": "https://esm.sh/@preact/signals@1.3.0?external=preact",
"htm/preact": "https://esm.sh/htm@3.1.1/preact?external=preact",
"preact-iso/router": "https://esm.sh/preact-iso/router"
}
}
</script>
<script type="module" src="./main.js"></script>
</body>
</html>
here is my main.js
import { h, render } from "preact";
import { useState } from "preact/hooks";
import {html} from "htm/preact";
import { Router, Route, LocationProvider, } from "preact-iso/router";
const Home = () => {
const [tasks, setTasks] = useState([]);
const [task, setTask] = useState("");
const addTask = () => {
if (task) {
setTasks([...tasks, { text: task, completed: false }]);
setTask("");
}
};
const toggleTask = (index) => {
const newTasks = tasks.slice();
newTasks[index].completed = !newTasks[index].completed;
setTasks(newTasks);
};
const deleteTask = (index) => {
setTasks(tasks.filter((_, i) => i !== index));
};
return html`
<div>
<h1>Todo App</h1>
<input type="text" value=${task} onInput=${e => setTask(e.target.value)} placeholder="Add a new task" />
<button onClick=${addTask}>Add</button>
<ul>
${tasks.map((task, index) => html`
<li key=${index} style=${task.completed ? "text-decoration: line-through;" : ""}>
${task.text}
<button onClick=${() => toggleTask(index)}>Toggle</button>
<button onClick=${() => deleteTask(index)}>Delete</button>
</li>
`)}
</ul>
<Link href="/about">About</Link>
</div>
`;
};
const About = () => html`
<div>
<h1>About this App</h1>
<p>This is a simple Todo application built with Preact.</p>
<Link href="/">Home</Link>
</div>
`;
const App = () => html`
<${LocationProvider}>
<${Router}>
<${Route} path="/" component=${Home} />
<${Route} path="/about" component=${About} />
</${Router}>
</${LocationProvider}>
`;
render(html`<${App} />`, document.getElementById('app'));
What am i doing woring