tkeron 4.0.0-beta.8 → 4.0.0

package/docs/cli-reference.md

@@ -33,6 +33,7 @@ tk
 ```
 
 **Output:**
+
 ```
 ╔════════════════════════╗
 ║       TKERON           ║
@@ -56,10 +57,10 @@ tk build [sourceDir] [targetDir]
 
 **Arguments:**
 
-| Argument | Type | Default | Description |
-|----------|------|---------|-------------|
+| Argument    | Type   | Default  | Description                                    |
+| ----------- | ------ | -------- | ---------------------------------------------- |
 | `sourceDir` | string | `websrc` | Source directory containing your project files |
-| `targetDir` | string | `web` | Output directory for built files |
+| `targetDir` | string | `web`    | Output directory for built files               |
 
 **Examples:**
 
@@ -89,11 +90,13 @@ tk build source output
 8. Cleans up temporary directory
 
 **Files Excluded from Output:**
+
 - `*.com.html` - HTML components (inlined)
 - `*.com.ts` - TypeScript components (inlined)
 - `*.pre.ts` - Pre-rendering scripts (executed)
 
 **Exit Codes:**
+
 - `0` - Success
 - `1` - Error (missing source directory, build failure, etc.)
 
@@ -122,12 +125,12 @@ tk develop [sourceDir] [outputDir] [port] [host]
 
 **Arguments:**
 
-| Argument | Type | Default | Description |
-|----------|------|---------|-------------|
-| `sourceDir` | string | `websrc` | Source directory to watch |
-| `outputDir` | string | `web` | Output directory for builds |
-| `port` | number | `3000` | Port for development server |
-| `host` | string | `localhost` | Host to bind server to |
+| Argument    | Type   | Default     | Description                 |
+| ----------- | ------ | ----------- | --------------------------- |
+| `sourceDir` | string | `websrc`    | Source directory to watch   |
+| `outputDir` | string | `web`       | Output directory for builds |
+| `port`      | number | `3000`      | Port for development server |
+| `host`      | string | `localhost` | Host to bind server to      |
 
 **Examples:**
 
@@ -162,8 +165,24 @@ tk develop source output 8080 0.0.0.0
 - **Hot Reload:** Page auto-refreshes on file changes
 - **Development Mode:** Serves from output directory
 - **Static File Serving:** Handles all file types
+- **Clean URLs:** Access pages without `.html` extension (e.g., `/about` serves `about.html`)
+- **Directory Index:** Trailing slash serves `index.html` (e.g., `/blog/` serves `blog/index.html`)
 - **Error Handling:** Displays build errors in terminal
 
+**Clean URLs:**
+
+Access HTML pages without the `.html` extension:
+
+| URL                    | Serves                              |
+| ---------------------- | ----------------------------------- |
+| `/about`               | `about.html`                        |
+| `/services`            | `services.html`                     |
+| `/docs/api/guide`      | `docs/api/guide.html`               |
+| `/blog/`               | `blog/index.html`                   |
+| `/products?sort=price` | `products.html` (with query string) |
+
+> Note: Paths containing a dot (e.g., `/file.json`) are treated as file requests and won't have `.html` appended.
+
 **Hot Reload Endpoint:**
 
 The server adds a `/dev-reload` endpoint that uses Server-Sent Events (SSE) to push reload notifications to the browser.
@@ -173,17 +192,17 @@ The server adds a `/dev-reload` endpoint that uses Server-Sent Events (SSE) to p
 All HTML files automatically get this script before `</body>`:
 
 ```javascript
-(function() {
+(function () {
   let es;
   function connect() {
-    es = new EventSource('/dev-reload');
-    es.onmessage = function(e) {
-      if (e.data === 'reload') {
-        console.log('🔄 Reloading page...');
+    es = new EventSource("/dev-reload");
+    es.onmessage = function (e) {
+      if (e.data === "reload") {
+        console.log("🔄 Reloading page...");
         location.reload();
       }
     };
-    es.onerror = function() {
+    es.onerror = function () {
       es.close();
       setTimeout(connect, 1000);
     };
@@ -227,14 +246,14 @@ tk init <projectName> [--force]
 
 **Arguments:**
 
-| Argument | Type | Required | Description |
-|----------|------|----------|-------------|
-| `projectName` | string | Yes | Name of project directory, or `.` for current directory |
+| Argument      | Type   | Required | Description                                             |
+| ------------- | ------ | -------- | ------------------------------------------------------- |
+| `projectName` | string | Yes      | Name of project directory, or `.` for current directory |
 
 **Options:**
 
-| Option | Description |
-|--------|-------------|
+| Option    | Description                                |
+| --------- | ------------------------------------------ |
 | `--force` | Overwrite existing files without prompting |
 
 **Examples:**
@@ -326,11 +345,11 @@ Error: Template directory not found
 
 Quick reference for command shortcuts:
 
-| Full Command | Aliases | Description |
-|--------------|---------|-------------|
-| `tk build` | `tk b` | Build project |
-| `tk develop` | `tk dev`, `tk d` | Start dev server |
-| `tk init` | `tk i` | Initialize project |
+| Full Command | Aliases          | Description        |
+| ------------ | ---------------- | ------------------ |
+| `tk build`   | `tk b`           | Build project      |
+| `tk develop` | `tk dev`, `tk d` | Start dev server   |
+| `tk init`    | `tk i`           | Initialize project |
 
 **Examples:**
 
@@ -347,17 +366,17 @@ tk i my-site            # Same as: tk init my-site
 
 ### Built-in Variables
 
-| Variable | Description | Set By |
-|----------|-------------|--------|
+| Variable         | Description            | Set By |
+| ---------------- | ---------------------- | ------ |
 | `TKERON_VERSION` | Current Tkeron version | Tkeron |
-| `NODE_ENV` | Environment mode | User |
+| `NODE_ENV`       | Environment mode       | User   |
 
 **Usage in Pre-rendering:**
 
 ```typescript
 // index.pre.ts
-console.log('Tkeron:', process.env.TKERON_VERSION);
-console.log('Environment:', process.env.NODE_ENV);
+console.log("Tkeron:", process.env.TKERON_VERSION);
+console.log("Environment:", process.env.NODE_ENV);
 ```
 
 **Setting Custom Variables:**
@@ -383,10 +402,10 @@ NODE_ENV=production API_URL=https://api.prod.com tk build
 
 ## Exit Codes
 
-| Code | Meaning |
-|------|---------|
-| `0` | Success |
-| `1` | Error (missing directory, build failure, invalid arguments, etc.) |
+| Code | Meaning                                                           |
+| ---- | ----------------------------------------------------------------- |
+| `0`  | Success                                                           |
+| `1`  | Error (missing directory, build failure, invalid arguments, etc.) |
 
 **Usage in Scripts:**
 
@@ -510,19 +529,19 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      
+
       - uses: oven-sh/setup-bun@v1
         with:
           bun-version: latest
-      
+
       - name: Install Tkeron
         run: bun install -g tkeron
-      
+
       - name: Build
         run: tk build
         env:
           NODE_ENV: production
-      
+
       - name: Deploy
         run: |
           # Your deployment commands
@@ -625,6 +644,7 @@ tk
 ### Command Documentation
 
 This document! Also available at:
+
 - [GitHub Repository](https://github.com/tkeron/tkeron)
 - [Documentation Site](https://tkeron.dev/docs)
 

package/docs/components-html.md

@@ -25,18 +25,19 @@ Build, and the custom element is replaced with the component's content.
 ### 1. Component Naming
 
 Component filenames must:
+
 - End with `.com.html`
 - Match the custom element name (without `.com.html`)
 - Use lowercase with hyphens
 
 **Examples:**
 
-| Filename | Custom Element | Valid? |
-|----------|---------------|--------|
-| `user-card.com.html` | `<user-card>` | ✅ Yes |
-| `nav-menu.com.html` | `<nav-menu>` | ✅ Yes |
-| `header.com.html` | `<header>` | ❌ No (no hyphen) |
-| `UserCard.com.html` | `<user-card>` | ✅ Yes (case-insensitive) |
+| Filename             | Custom Element | Valid?                    |
+| -------------------- | -------------- | ------------------------- |
+| `user-card.com.html` | `<user-card>`  | ✅ Yes                    |
+| `nav-menu.com.html`  | `<nav-menu>`   | ✅ Yes                    |
+| `header.com.html`    | `<header>`     | ❌ No (no hyphen)         |
+| `UserCard.com.html`  | `<user-card>`  | ✅ Yes (case-insensitive) |
 
 ### 2. Component Resolution
 
@@ -57,6 +58,7 @@ websrc/
 ```
 
 In `blog/post.html`:
+
 - `<comment>` → Finds `blog/comment.com.html` first
 - `<header>` → Falls back to `websrc/header.com.html`
 
@@ -89,8 +91,7 @@ The `.com.html` file is NOT copied to output - only its content is inlined.
 **Usage:**
 
 ```html
-<card></card>
-<card></card>
+<card></card> <card></card>
 ```
 
 **Output:**
@@ -131,12 +132,12 @@ The `.com.html` file is NOT copied to output - only its content is inlined.
 ```html
 <!DOCTYPE html>
 <html>
-<body>
-  <site-header></site-header>
-  <main>
-    <!-- Page content -->
-  </main>
-</body>
+  <body>
+    <site-header></site-header>
+    <main>
+      <!-- Page content -->
+    </main>
+  </body>
 </html>
 ```
 
@@ -160,7 +161,7 @@ Components can use other components:
 ```html
 <!-- user-avatar.com.html -->
 <div class="avatar">
-  <img src="/avatars/default.jpg" alt="User">
+  <img src="/avatars/default.jpg" alt="User" />
 </div>
 ```
 
@@ -185,7 +186,7 @@ Components can use other components:
 ```html
 <div class="user-card">
   <div class="avatar">
-    <img src="/avatars/default.jpg" alt="User">
+    <img src="/avatars/default.jpg" alt="User" />
   </div>
   <div class="user-info">
     <h3>John Doe</h3>
@@ -239,7 +240,9 @@ Components can contain multiple root elements:
 
 ```html
 <!-- alert-box.com.html -->
-<div style="padding: 1rem; background: #fef2f2; border: 1px solid #ef4444; border-radius: 4px;">
+<div
+  style="padding: 1rem; background: #fef2f2; border: 1px solid #ef4444; border-radius: 4px;"
+>
   <strong>Error:</strong> Something went wrong!
 </div>
 ```
@@ -251,7 +254,7 @@ Components work with your existing CSS:
 ```html
 <!-- product-card.com.html -->
 <div class="product-card">
-  <img class="product-image" src="/products/placeholder.jpg" alt="Product">
+  <img class="product-image" src="/products/placeholder.jpg" alt="Product" />
   <h3 class="product-title">Product Name</h3>
   <p class="product-price">$99.99</p>
   <button class="btn btn-primary">Add to Cart</button>
@@ -312,7 +315,8 @@ HTML components don't support:
 ```html
 <!-- wrapper.com.html -->
 <div class="wrapper">
-  <slot></slot> <!-- Not supported -->
+  <slot></slot>
+  <!-- Not supported -->
 </div>
 ```
 
@@ -324,7 +328,8 @@ Components can't include themselves:
 <!-- menu.com.html -->
 <ul>
   <li>Item 1</li>
-  <menu></menu> <!-- ERROR: Circular dependency! -->
+  <menu></menu>
+  <!-- ERROR: Circular dependency! -->
 </ul>
 ```
 
@@ -339,6 +344,7 @@ Components can be nested up to **50 levels** deep. Deeper nesting will be ignore
 ### ✅ Use for Static UI Patterns
 
 Perfect for:
+
 - Headers and footers
 - Navigation menus
 - Card layouts
@@ -352,7 +358,7 @@ Perfect for:
 <!-- Good: Small, focused component -->
 <!-- icon-warning.com.html -->
 <svg width="24" height="24" viewBox="0 0 24 24">
-  <path d="M12 2L1 21h22L12 2z"/>
+  <path d="M12 2L1 21h22L12 2z" />
   <text x="12" y="17" text-anchor="middle">!</text>
 </svg>
 ```
@@ -391,8 +397,8 @@ If your component needs attributes or logic, use [TypeScript Components](./compo
 
 ```typescript
 // user-badge.com.ts
-const name = com.getAttribute('name') || 'Guest';
-const role = com.getAttribute('role') || 'User';
+const name = com.getAttribute("name") || "Guest";
+const role = com.getAttribute("role") || "User";
 com.innerHTML = `<span class="badge">${name} - ${role}</span>`;
 ```
 
@@ -435,7 +441,7 @@ Build and check if "TEST COMPONENT LOADED" appears in output.
 ```html
 <!-- blog-card.com.html -->
 <article class="blog-card">
-  <img src="/blog/placeholder.jpg" alt="Blog post" class="blog-card-image">
+  <img src="/blog/placeholder.jpg" alt="Blog post" class="blog-card-image" />
   <div class="blog-card-content">
     <time class="blog-card-date">2025-01-15</time>
     <h2 class="blog-card-title">Blog Post Title</h2>