tkeron 4.1.0 → 4.2.0

package/changelog.md

@@ -1,3 +1,29 @@
+# v4.2.0
+
+## Developer Experience
+
+### New Features
+
+- **Added**: TypeScript configuration to `init_sample` example
+  - `tsconfig.json` - Minimal TypeScript configuration for IDE support
+  - `tkeron.d.ts` - Type definitions for `.com.ts` and `.pre.ts` files
+  - Enables IntelliSense for `com` variable in `.com.ts` files
+  - Enables IntelliSense for `document` variable in `.pre.ts` files
+  - Improves developer experience in VS Code and other IDEs
+
+### Bug Fixes
+
+- **Fixed**: Variable naming conflict in `init_sample/websrc/index.ts`
+  - Renamed `count` to `clickCount` to avoid TypeScript scope collision
+- **Fixed**: TypeScript type error in `init_sample/websrc/user-badge.com.ts`
+  - Added explicit `parseInt` radix parameter for type safety
+
+### Tests
+
+- **Updated**: Test expectations to match renamed variables in `init_sample`
+
+---
+
 # v4.1.0
 
 ## Documentation & Developer Experience

package/docs/components-typescript.md

@@ -86,6 +86,46 @@ Same as HTML components:
 1. **Same directory** as the file using it
 2. **Root directory** (`websrc/`)
 
+### IDE Support & IntelliSense
+
+For the best development experience, Tkeron projects include TypeScript configuration files:
+
+**`tkeron.d.ts`** - Provides type definitions:
+
+```typescript
+declare module "*.com.ts" {
+  global {
+    const com: HTMLElement;
+  }
+}
+```
+
+This tells your IDE that `com` is an `HTMLElement`, enabling:
+
+- **IntelliSense** for `com.getAttribute()`, `com.innerHTML`, etc.
+- **Type checking** for your component code
+- **Auto-completion** for DOM methods and properties
+
+**`tsconfig.json`** - TypeScript configuration:
+
+```json
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["websrc/**/*", "tkeron.d.ts"]
+}
+```
+
+Both files are automatically created when you run `tk init`. If you created your project manually, you can copy them from the [init_sample example](https://github.com/pablotk/tkeron/tree/master/examples/init_sample).
+
+**Note:** These files are only for IDE support and don't affect the build process. Tkeron uses Bun's built-in TypeScript support for compilation.
+
 ## Basic Examples
 
 ### Attribute-Based Content

package/docs/getting-started.md

@@ -38,7 +38,8 @@ my-website/
 │   ├── index.ts         # TypeScript for index
 │   ├── index.pre.ts     # Pre-rendering script
 │   └── *.com.html       # Sample components
-└── tkeron.d.ts          # TypeScript definitions
+├── tkeron.d.ts          # TypeScript definitions
+└── tsconfig.json        # TypeScript configuration
 ```
 
 ### Initialize in Current Directory

package/docs/pre-rendering.md

@@ -97,6 +97,26 @@ If the `.html` file doesn't exist, Tkeron creates a default one:
 
 Then your `.pre.ts` file runs on this template.
 
+### IDE Support & IntelliSense
+
+The `tkeron.d.ts` file in your project provides type definitions for the `document` variable:
+
+```typescript
+declare module "*.pre.ts" {
+  global {
+    const document: Document;
+  }
+}
+```
+
+This enables:
+
+- **IntelliSense** for `document.querySelector()`, `document.getElementById()`, etc.
+- **Type checking** for DOM manipulation
+- **Auto-completion** for all Document methods and properties
+
+The `tsconfig.json` ensures your IDE recognizes these types. Both files are automatically created by `tk init`.
+
 ## Basic Examples
 
 ### Set Page Title

package/examples/init_sample/tkeron.d.ts

@@ -0,0 +1,13 @@
+// Augment global scope for .pre.ts files
+declare module "*.pre.ts" {
+  global {
+    const document: Document;
+  }
+}
+
+// Augment global scope for .com.ts files
+declare module "*.com.ts" {
+  global {
+    const com: HTMLElement;
+  }
+}

package/examples/init_sample/websrc/index.ts

@@ -1,10 +1,10 @@
 // Client-side TypeScript - runs in the browser
-let count = 0;
+let clickCount = 0;
 
-const button = document.getElementById('increment') as HTMLButtonElement;
-const countDisplay = document.getElementById('count') as HTMLSpanElement;
+const button = document.getElementById("increment") as HTMLButtonElement;
+const countDisplay = document.getElementById("count") as HTMLSpanElement;
 
-button.addEventListener('click', () => {
-  count++;
-  countDisplay.textContent = count.toString();
+button.addEventListener("click", () => {
+  clickCount++;
+  countDisplay.textContent = clickCount.toString();
 });

package/examples/init_sample/websrc/user-badge.com.ts

@@ -1,16 +1,17 @@
 // TypeScript component - runs at build time with logic
-const count = com.getAttribute('count') || '3';
+const count = com.getAttribute("count") || "3";
+const numCount = parseInt(count, 10);
 
 // Generate list dynamically
 const items = [];
-for (let i = 1; i <= parseInt(count); i++) {
+for (let i = 1; i <= numCount; i++) {
   items.push(`<li>✓ Item ${i}</li>`);
 }
 
 com.innerHTML = `
   <div style="background: #f0fdf4; border-left: 3px solid #22c55e; padding: 0.75rem; border-radius: 4px;">
     <ul style="list-style: none; padding: 0; margin: 0; font-size: 0.9rem; color: #166534;">
-      ${items.join('')}
+      ${items.join("")}
     </ul>
   </div>
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tkeron",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "CLI tool for backend-driven frontend development with TypeScript.",
   "type": "module",
   "main": "./src/index.ts",