katabatic 1.0.0

package/README.md

@@ -0,0 +1,46 @@
+
+
+# Katabatic
+
+A simple and efficient way to develop Web Components !
+
+Katabatic is a compiler that transforms HTML modules into JavaScript.
+Its goal is to provide a modern, framework-free web development experience by relying solely on standard APIs.
+
+- :sparkles: No API ! Write plain HTML, CSS and JS without having to learn yet an other framework.
+- :heart: Web Components without the complexity
+- :zap: Reactive with signals
+
+```html
+<script type="module">
+    export class Counter extends HTMLElement {
+        count = 0
+    }
+
+    customElements.define('my-counter', Counter);
+</script>
+
+<template>
+    <div>
+        <button onclick="{count++}">counter is {count}</button>
+    </div>
+    <style>
+        button {
+            padding: 0.5rem;
+            text-transform: uppercase;
+        }
+    </style>
+</template>
+```
+
+## Getting started
+
+```
+npm i katabatic -D
+npm i @katabatic/runtime
+
+npx katabatic
+
+```
+
+See the [examples](examples)

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "katabatic",
+  "license": "MIT",
+  "version": "1.0.0",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/katabatic-js/katabatic.git",
+    "directory": "packages/katabatic"
+  },
+  "keywords": [
+    "katabatic",
+    "web-components",
+    "signals"
+  ],
+  "bin": {
+    "katabatic": "src/index.js"
+  },
+  "dependencies": {
+    "@katabatic/compiler": "^1.0.0",
+    "@web/dev-server": "^0.4.6"
+  }
+}

package/src/build.js

@@ -0,0 +1,37 @@
+import path from 'path'
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs'
+import { compile } from '@katabatic/compiler'
+import { createRouter, compileHtmlIndex } from '@katabatic/compiler/router'
+
+export function buildModule({ src, out, ...context }) {
+    const source = readFileSync(src.filePath, { encoding: 'utf8' })
+    const { code, ...module } = compile(source, context)
+
+    if (!existsSync(out.parentPath)) {
+        mkdirSync(out.parentPath, { recursive: true })
+    }
+    writeFileSync(out.filePath, code)
+
+    return module
+}
+
+export function buildIndex({ src, out, ...context }) {
+    const source = readFileSync(src.filePath, { encoding: 'utf8' })
+    const { code, ...index } = compileHtmlIndex(source, context)
+
+    if (!existsSync(out.parentPath)) {
+        mkdirSync(out.parentPath, { recursive: true })
+    }
+    writeFileSync(out.filePath, code)
+
+    return index
+}
+
+export function buildRouter(outDirPath, registry) {
+    const result = createRouter(registry)
+
+    if (!existsSync(outDirPath)) {
+        mkdirSync(outDirPath, { recursive: true })
+    }
+    writeFileSync(path.join(outDirPath, 'router.js'), result.code)
+}

package/src/index.js

@@ -0,0 +1,155 @@
+#! /usr/bin/env node
+
+import path from 'path'
+import { watch as watchDir, existsSync } from 'fs'
+import { startDevServer } from '@web/dev-server'
+import { walkDir } from './utils/files.js'
+import * as argv from './utils/argv.js'
+import { serve } from './serve.js'
+import { buildIndex, buildModule, buildRouter } from './build.js'
+import { hash } from './utils/misc.js'
+
+const command = argv.command()
+
+const rootPath = path.resolve(argv.option('root')) ?? process.cwd()
+const srcDirPath = path.join(rootPath, argv.option('srcDir') ?? '.')
+const outDirPath = path.join(rootPath, argv.option('outDir') ?? '.')
+const routesDirPath = path.join(srcDirPath, argv.option('routesDir') ?? './routes')
+const hasRoutes = existsSync(routesDirPath)
+
+const rewriteRelativeImportExtensions = argv.option('rewriteRelativeImportExtensions') ?? false
+
+switch (command) {
+    case 'build':
+        build()
+        break
+    default:
+        watch(build())
+        start()
+        break
+}
+
+function build() {
+    const registry = {}
+
+    walkDir(srcDirPath, {}, (entry) => {
+        if (entry.name === 'index.html') {
+            if (!hasRoutes) return
+
+            const srcFilePath = path.join(entry.parentPath, entry.name)
+            const index = buildIndex(resolve(srcFilePath))
+            registry[index.ref] = index
+            return
+        }
+
+        if (entry.name.endsWith('.html') || entry.name.endsWith('.ktb')) {
+            const srcFilePath = path.join(entry.parentPath, entry.name)
+            const module = buildModule(resolve(srcFilePath, true))
+            registry[module.ref] = module
+            return
+        }
+    })
+
+    if (hasRoutes) {
+        buildRouter(outDirPath, registry)
+    }
+    return registry
+}
+
+function watch(registry) {
+    watchDir(srcDirPath, { recursive: true }, (event, fileName) => {
+        if (fileName.endsWith('index.html')) {
+            if (!hasRoutes) return
+
+            const srcFilePath = path.join(srcDirPath, fileName)
+            const index = buildIndex(resolve(srcFilePath))
+            registry[index.ref] = index
+            return
+        }
+
+        if (fileName.endsWith('.html') || fileName.endsWith('.ktb')) {
+            const srcFilePath = path.join(srcDirPath, fileName)
+            const module = buildModule(resolve(srcFilePath, true))
+            registry[module.ref] = module
+            return
+        }
+    })
+}
+
+function start() {
+    const plugins = []
+
+    if (hasRoutes) {
+        plugins.push(serve(outDirPath))
+    }
+
+    startDevServer({
+        config: {
+            rootDir: rootPath,
+            port: 3000,
+            watch: true,
+            open: true,
+            nodeResolve: true,
+            plugins
+        },
+        readCliArgs: false,
+        readFileConfig: false
+    })
+}
+
+function resolve(srcFilePath, isModule) {
+    const srcFileName = path.basename(srcFilePath)
+    const srcParentPath = path.dirname(srcFilePath)
+
+    const parentPath = path.join(outDirPath, path.relative(srcDirPath, srcParentPath))
+    const fileName = srcFileName.replace(/\.html|\.ktb$/, '.js')
+    const filePath = path.join(parentPath, fileName)
+
+    const ref = path.relative(srcDirPath, srcFilePath)
+    let routerImport = `./${path.relative(outDirPath, filePath)}`
+
+    if (isModule) {
+        const name = path.basename(fileName, '.js')
+        const moduleHash = hash(srcFilePath)
+
+        let route = path.relative(routesDirPath, srcParentPath)
+        route = route.startsWith('..') ? undefined : `/${route}`
+        routerImport = !!route ? routerImport : undefined
+        const isPage = !!route && !!srcFileName.match(/^page(\.html|\.ktb)$/)
+        const isLayout = !!route && !!srcFileName.match(/^layout(\.html|\.ktb)$/)
+
+        return {
+            ref,
+            name,
+            customElementName: `${name}-${moduleHash}`,
+            route,
+            isPage,
+            isLayout,
+            routerImport,
+            hash: moduleHash,
+            rewriteRelativeImportExtensions,
+            src: {
+                filePath: srcFilePath
+            },
+            out: {
+                parentPath,
+                fileName,
+                filePath
+            }
+        }
+    }
+
+    return {
+        ref,
+        isIndex: true,
+        routerImport,
+        src: {
+            filePath: srcFilePath
+        },
+        out: {
+            parentPath,
+            fileName,
+            filePath
+        }
+    }
+}

package/src/serve.js

@@ -0,0 +1,14 @@
+import path from 'path'
+
+export function serve(outDirPath) {
+    let router
+
+    return {
+        name: 'serve',
+        async serve({ request }) {
+            router ??= await import(path.join(outDirPath, 'router.js'))
+            console.log(request.url)
+            return router.route(request.url)
+        }
+    }
+}

package/src/utils/argv.js

@@ -0,0 +1,12 @@
+export function command() {
+    return process.argv[2]
+}
+
+export function option(name) {
+    const index = process.argv.indexOf(`-${name}`)
+
+    if (index >= 0) {
+        const value = process.argv[index + 1]
+        return value && value[0] !== '-' ? value : undefined
+    }
+}

package/src/utils/files.js

@@ -0,0 +1,14 @@
+import { readdirSync } from 'fs'
+import path from 'path'
+
+export function walkDir(dirPath, state, handle) {
+    const entries = readdirSync(dirPath, { withFileTypes: true })
+
+    for (const entry of entries) {
+        if (entry.isDirectory() && entry.name !== 'node_modules') {
+            walkDir(path.join(entry.parentPath, entry.name), state, handle)
+        } else if (entry.isFile()) {
+            handle(entry, state)
+        }
+    }
+}

package/src/utils/misc.js

@@ -0,0 +1,7 @@
+export function hash(str) {
+    let hash = 5381
+    let i = str.length
+
+    while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i)
+    return (hash >>> 0).toString(36)
+}