This is an early build of the project, created for introductory purposes. If you want to participate in the development of the project, you can go to the project in the github
Before creating an application, you need to prepare an html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizon app</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./index.js"></script>
</body>
</html>File index.js:
import { defineApp, render } from "horizon-core";
import { comp } from "horizon-core/component";
const app = defineApp()
const mainComponent = comp((_, { text, div }) => {
div({}, () => {
text('Hello world!')
})
})
mainComponent.composable.dom = document.body.querySelector('#app')
?? document.body
render(app, mainComponent)import { defineApp, render, toDomString } from "horizon-core";
import { comp } from "horizon-core/component";
const app = defineApp()
const mainComponent = comp((_, { text, div }) => {
div({}, () => {
text('Test message')
})
})
await render(app, mainComponent)
console.log(toDomString(mainComponent.composable))
/* <div hash="$0div"><span hash="$0div0txt">Test message</span></div> */Simply example with counter
import { defineApp, render } from "horizon-core";
import { comp } from "horizon-core/component";
import { useSignal } from "horizon-core/state";
const app = defineApp()
const mainComponent = comp((_, { text, $ }) => {
const counter = useSignal(
0, { asRaw: value => `Counter: ${value}` }
)
$('button', {
'@click': () => counter.value++
}, () => {
text(counter)
})
})
mainComponent.composable.dom = document.body.querySelector('#app')
?? document.body
render(app, mainComponent)Creating vite app with vanilla-ts template
npm create vite@latest horizon-app -- --template vanilla-tsInstall horizon-core
# Installing vite dependencies
npm i
# Installing horizon-core
npm i horizon-coreAnd edit src/main.ts file
import { defineApp, render } from "horizon-core";
import { comp } from "horizon-core/component";
import { useSignal } from "horizon-core/state";
const app = defineApp()
const mainComponent = comp((_, { text, $ }) => {
const counter = useSignal(
0, { asRaw: value => `Counter: ${value}` }
)
$('button', {
'@click': () => counter.value++
}, () => {
text(counter)
})
})
mainComponent.composable.dom = document.body.querySelector('#app')
?? document.body
render(app, mainComponent)Launch npm run dev