A full-stack JS framework that works with the new order TC39 Signals.
npm install @dathomir/core @dathomir/pluginnpm create vite@latest my-dathomir-app -- --template vanilla-ts
cd my-dathomir-appnpm install @dathomir/core @dathomir/pluginCreate vite.config.ts in the project root with the following content:
import { defineConfig } from 'vite';
import { dathomir } from "@dathomir/plugin"
export default defineConfig({
plugins: [dathomir.vite()],
});Add the following to compilerOptions in tsconfig.json:
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "@dathomir/core"
}
}Create src/main.tsx with the following content:
import { mount } from "@dathomir/core";
const Counter = () => {
const [count, setCount] = signal(0);
return computed(() => (
<div>
<p>Count: {count()}</p>
<button onClick={() => setCount(count() + 1)}>Increment</button>
</div>
));
};
const App = (
<div>
<h1>Hello, Dathomir!</h1>
<Counter />
</div>
);
mount(App, document.getElementById("app")!);Update index.html to include a div with id "app" and src to main.tsx:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dathomir App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>npm run dev