miki-template 1.2.0 → 1.3.3

package/docs/tags.md

@@ -137,6 +137,30 @@ You can also unpack tuple-like values:
 
 ---
 
+### `{% set %} / {% endset %}`
+
+Assigns a value to a variable for later use in the template. Supports both inline and block forms.
+
+**Inline form** — assign a single expression:
+
+```html
+{% set total = price|add:tax %}
+<p>Total: {{ total }}</p>
+```
+
+**Block form** — capture rendered content:
+
+```html
+{% set sidebar %}
+  {% include "sidebar.html" with user=user %}
+{% endset %}
+{{ sidebar }}
+```
+
+Variables set with `{% set %}` persist in the current scope and can be used after the tag.
+
+---
+
 ### `{% cycle %}`
 
 Outputs one of its arguments for each iteration of a loop.
@@ -184,6 +208,33 @@ With `{% else %}` for a fallback:
 
 ---
 
+### `{% ifchanged %}...{% endifchanged %}`
+
+Renders the body only when the value changes. Useful for detecting changes in loops.
+
+```html
+{% for item in items %}
+  {% ifchanged item.category %}
+    <h2>{{ item.category }}</h2>
+  {% endifchanged %}
+  <p>{{ item.name }}</p>
+{% endfor %}
+```
+
+Supports `{% else %}` for when the value does not change:
+
+```html
+{% for item in items %}
+  {% ifchanged item.category %}
+    {{ item.category }}
+  {% else %}
+    (same)
+  {% endifchanged %}
+{% endfor %}
+```
+
+---
+
 ## Template Inheritance Tags
 
 ### `{% extends %}`
@@ -349,6 +400,18 @@ Loads additional filter libraries (for future extensibility).
 
 ---
 
+### `{% now "format" %}`
+
+Outputs the current date/time formatted with the given pattern. Uses the same format codes as the `date` filter.
+
+```html
+{% now "Y-m-d" %}           → "2026-09-03"
+{% now "H:i:s" %}           → "14:30:45"
+{% now "F j, Y" %}          → "September 3, 2026"
+```
+
+---
+
 ### `{% spaceless %} / {% endspaceless %}`
 
 Removes whitespace between HTML tags.

package/docs/usage.md

@@ -407,14 +407,59 @@ const html = await asyncRender(template, { db });
 
 ## Express Integration
 
-### Basic Setup
+### One-Line Setup (recommended)
+
+`miki.setupExpress(app, opts)` wires the view engine, the `views` directory, and a `res.render` shim that makes `res.render('view#partial', ...)` return just the named `{% partialdef %}` body — perfect for HTMX.
 
 ```javascript
 const express = require('express');
-const { __express } = require('miki-template');
+const miki = require('miki-template');
 
 const app = express();
 
+// That single line: registers the engine, sets views dir, enables #partial selectors.
+miki.setupExpress(app, { extension: 'html', views: './views' });
+
+// Full-page render
+app.get('/', (req, res) => res.render('home', { user: req.user }));
+
+// HTMX partial response — just append `#partialName` to the view name.
+// Internally this calls the {% partialdef card %} body inside views/home.html.
+app.get('/partials/:name', (req, res) =>
+  res.render(`home#${req.params.name}`, { user: req.user })
+);
+
+app.listen(3000);
+```
+
+Options:
+
+| Option | Default | Description |
+|---|---|---|
+| `extension` | `'html'` | File extension for views. Use `'miki'` if you prefer `.miki` files. |
+| `views` | `app.get('views')` | Views directory (passed to `app.set('views', ...)`). |
+| `async` | `false` | Use the async engine (`__expressAsync`). For Express 5 with async helpers. |
+
+> The `res.render` shim intercepts **only** view names containing a `#`. Everything else (full pages, `res.render(view, cb)`, callback forms) goes through Express's normal view lookup, so the integration is fully compatible with existing Express middleware.
+
+### Just-the-Middleware Variant
+
+If you already have your own `app.engine()` setup and just want partial responses, add the middleware:
+
+```javascript
+const miki = require('miki-template');
+app.use(miki.expressPartialRenderer());
+
+app.get('/card', (req, res) => res.renderPartial('home#card', { user: req.user }));
+```
+
+### Manual Setup (still supported)
+
+```javascript
+const express = require('express');
+const { __express } = require('miki-template');
+
+const app = express();
 app.engine('html', __express);
 app.set('view engine', 'html');
 app.set('views', './views');
@@ -432,9 +477,11 @@ app.listen(3000);
 
 ### Async Express Views
 
-Express 5+ supports async route handlers natively:
+Express 5+ supports async route handlers natively. Pass `async: true` to `setupExpress`, or use `__expressAsync` directly:
 
 ```javascript
+miki.setupExpress(app, { extension: 'html', views: './views', async: true });
+
 app.get('/user/:id', async (req, res) => {
   const user = await User.findById(req.params.id);
   if (!user) return res.status(404).send('Not found');

package/eslint.config.mjs

@@ -19,7 +19,15 @@ export default [
         clearInterval: 'readonly',
         setImmediate: 'readonly',
         clearImmediate: 'readonly',
-        global: 'readonly'
+        global: 'readonly',
+        // Node 18+ standard globals
+        URL: 'readonly',
+        URLSearchParams: 'readonly',
+        TextEncoder: 'readonly',
+        TextDecoder: 'readonly',
+        fetch: 'readonly',
+        crypto: 'readonly',
+        performance: 'readonly'
       }
     },
     rules: {

package/ex.mjs

@@ -0,0 +1,33 @@
+import express from 'express'
+import miki, {__express,registerContextProcessor} from "miki-template"
+import path from 'node:path';
+
+const app =express()
+const dir=path.join(process.cwd(),"dir")
+
+  // app.engine('html', __express);
+  // app.set('view engine', 'html');
+  // app.set('views', dir);
+  miki.setupExpress(app, { extension: 'html', views: dir });
+
+  registerContextProcessor((cx)=>({
+    siteName:"code with miki",
+    login:{'name':"miki", 'email':"miki@example.com"}
+  }))
+  app.get("/",(req,res)=>{
+    const users=[
+      {'name':"miki", 'email':"miki@example.com"},
+      {'name':"miki2", 'email':"miki2@example.com"},
+      {'name':"miki3", 'email':"miki3@example.com"}
+    ]
+    let data=[
+      {name:"miki", email:"jack@miki.com",address:"kumba"},
+      {name:"luis",email:"luis@miki.com",address:"kumba"}
+    ]
+    res.render("home",{name:"miki-template context", users:users, data:data})
+    // res.send(content)
+  })
+
+app.listen(3000, () => {
+    console.log('Server is running on port 3000 click: http://localhost:3000')
+}  )

package/miki-template-extension/.github/workflows/ci.yml

@@ -0,0 +1,116 @@
+name: CI
+
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+  workflow_dispatch:
+
+jobs:
+  lint:
+    name: Lint Extension
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Validate package.json
+        run: npm run validate
+
+      - name: Check for required files
+        run: |
+          echo "Checking required files..."
+          for file in package.json extension.js README.md CHANGELOG.md LICENSE; do
+            if [ ! -f "$file" ]; then
+              echo "Missing required file: $file"
+              exit 1
+            fi
+          done
+
+  test-grammar:
+    name: Test Grammar
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install test dependencies
+        run: npm install --save-dev textmate-grammar-test
+
+      - name: Run grammar tests
+        run: npm run test:grammar
+
+  package:
+    name: Package Extension
+    runs-on: ubuntu-latest
+    needs: [lint, test-grammar]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Package VSIX
+        id: package
+        run: |
+          npx vsce package --no-dependencies
+          echo "version=$(node -p \"require('./package.json').version\")" >> $GITHUB_OUTPUT
+          echo "vsix=$(ls *.vsix 2>/dev/null | head -1)" >> $GITHUB_OUTPUT
+
+      - name: Upload VSIX artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: miki-template-${{ steps.package.outputs.version }}.vsix
+          path: ${{ steps.package.outputs.vsix }}
+
+      - name: List output files
+        run: ls -la *.vsix 2>/dev/null || echo "No VSIX files found"
+
+  publish:
+    name: Publish to Marketplace
+    runs-on: ubuntu-latest
+    needs: [package]
+    if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master')
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Download VSIX
+        uses: actions/download-artifact@v4
+        with:
+          name: miki-template-${{ needs.package.outputs.version }}.vsix
+
+      - name: Publish to VS Code Marketplace
+        run: npx vsce publish --no-dependencies
+        env:
+          VSCE_PAT: ${{ secrets.VSCE_PAT }}
+        continue-on-error: true
+
+      - name: Create Release
+        if: success()
+        uses: softprops/action-gh-release@v1
+        with:
+          files: *.vsix
+          generate_release_notes: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/miki-template-extension/.vscodeignore

@@ -0,0 +1,7 @@
+.github/
+tests/
+*.vsix
+icon.svg
+*.log
+node_modules/
+.DS_Store

package/miki-template-extension/CHANGELOG.md

@@ -0,0 +1,99 @@
+# Changelog
+
+All notable changes to this extension will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.7.1] - 2026-09-03
+
+### Added
+
+- **Rename Blocks (F2)**: Rename `{% block name %}` across workspace with F2
+- **Path Completions**: Auto-suggest template files for `{% include %}` and `{% extends %}`
+- **Semantic Token Provider**: Enhanced semantic highlighting with proper token classification
+- **HTML/CSS/JS Embedded Support**: Full syntax highlighting for embedded languages
+- **Emmet Support**: HTML and JavaScript Emmet abbreviations work in templates
+- **CSS in `<style>` tags**: Proper CSS syntax highlighting
+- **JS in `<script>` tags**: Proper JavaScript syntax highlighting
+
+### Fixed
+
+- Grammar patterns for proper HTML scope activation
+- Embedded language mappings for CSS and JavaScript
+- Multiple bug fixes and improvements
+
+## [1.7.0] - 2026-09-03
+
+### Added
+
+- **Inlay Hints**: Show inline parameter hints for filter arguments
+- **Project-wide Find References**: Find blocks, includes, extends across entire workspace
+- **Smart Tag Selection**: Double-click to select entire `{% block %}` content
+- **Custom Tag/Filters Detection**: Auto-detect from project config files
+- **Template Preview Command**: Preview template syntax in a webview panel
+- **Smart Paste**: Auto-detect HTML paste for potential escaping
+- **Bracket Matching Highlights**: Visual highlight for matching `{% if %}`/`{% endif %}` pairs
+- **Template Variables IntelliSense**: Common variable names (user, request, form, items, etc.)
+- **Performance Debouncing**: Optimized validation and decorations with debounce
+- **Quick Outline Navigation**: `Ctrl+Shift+.` and `Ctrl+Shift+,` to jump between blocks
+
+### New Commands
+- `goToNextBlock` / `goToPrevBlock` - Navigate between blocks
+- `previewTemplate` - Preview template in new tab
+- `showOutline` - Quick outline navigation
+- `findBlockReferences` - Find all block references
+
+### New Settings
+- `enableInlayHints` - Toggle inlay hints
+- `enableBracketHighlight` - Toggle bracket highlighting
+- `enableSmartPaste` - Toggle smart paste
+
+## [1.6.0] - 2026-09-03
+
+### Added
+
+- **Color Decorations**: Automatically highlights color values (`#ff0000`, `rgb()`, `rgba()`, `hsl()`, `hsla()`) in templates
+- **Code Actions**: Quick fixes for common issues
+- **Find References**: Find all references to blocks and includes
+- **New Commands**: wrapInBlock, wrapInFor, wrapInIf, addPrettierIgnore
+- **New Settings**: enableColorDecorations, enableCodeActions
+
+### Changed
+
+- Improved completion items with argument hints
+- Better validation diagnostics
+- Enhanced outline view with icons
+
+## [1.5.0] - 2026-09-03
+
+### Added
+
+- **Go-to-Definition**: Jump to included/extended templates and block definitions
+- **Outline View**: See template structure
+- **forloop.* Completions**: Auto-complete loop variables
+- **Keyboard Shortcut**: `Ctrl+Shift+F` to wrap selection with filter
+
+## [1.4.0] - 2026-09-02
+
+### Added
+
+- Dual language support: `miki-template` and `django-html`
+- File associations: `.miki`, `.miki-template`, `.django`, `.dj`
+- Comprehensive filter support (70+ filters)
+- Prettier integration with `prettier-ignore`
+
+## [1.3.0] - 2026-08-15
+
+### Added
+
+- Buy Me a Coffee integration
+- Format on save configuration
+
+## [1.2.0] - 2026-06-01
+
+### Added
+
+- Initial release
+- Basic syntax highlighting
+- Code snippets