Getting Started

This is an exemple for use KLL.

Recommended organization

pages
	index.js
	index.html
	other-page.html
ctrl
	index.js
	hello.js
templates
	index.js
	hello.html
main.js
index.html // inject main.js here

Add kll

npm i @kll_/core

Create Your First Route

<!-- pages/index.html -->
<div>
	<h1>KLL</h1>
</div>

Export your routes

// pages/index.js

//... other export
export * as index from './index.html?raw'

Initialize Kll on your main

//main.js

import { KLL } from "@kll_/core"
import * as ctrlPath from "./ctrl"
import * as templatePath from "./templates"

// Define your routes and templates
const config = {
  id: "app",
	routes: {
    '/': import('./pages/index.html?raw').then((m) => m.default),
  },
  ctrlPath, // Array of Controllers
  templatePath, // Array of templates
  plugins: [
    /* ...your plugins... */
  ],
}

// Initialize KLL
const app = new KLL(config)

Add script on your main index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/icon" href="/public/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>KLL</title>
</head>

<body>
	<!-- KLL inject page here -->
  <div id="app"></div>
	<!-- main script -->
  <script type="module" src="/main.js"></script>
</body>

</html>

Exemple of import templates