Asok VS Code Extension

Asok VS Code is the official rapid development toolkit for the Asok Framework. It brings the power and speed of Asok directly into your editor with specialized snippets, intelligent autocompletion, and integrated CLI commands.

🌍 Website: asok-framework.com
🐙 GitHub (Framework): asok-framework/asok
📺 YouTube Channel: youtube.com

🚀 Getting Started

Install the Extension: Install this extension from the VS Code Marketplace.
Open an Asok Project: Open any folder containing an Asok project.
Language Detection: The extension automatically recognizes .html and .asok files as Asok HTML.
Enable Emmet: On first launch, a notification will ask if you want to enable Emmet. Click "Enable" to get full Emmet support in your templates.

✨ Key Features

🔍 Exhaustive Code Intelligence

Full IntelliSense, syntax highlighting, and hover documentation for all Asok features.

**Reactive Directives (`asok-*`)**

Directive	Example	Description
`asok-state`	`asok-state="{ count: 0 }"`	Define reactive local state.
`asok-text`	`asok-text="name"`	Update element text content reactively.
`asok-show`	`asok-show="isOpen"`	Toggle visibility (display: none).
`asok-hide`	`asok-hide="isOpen"`	Hide element if expression is truthy.
`asok-class`	`asok-class="{ 'active': isOk }"`	Dynamic class binding (string or object).
`asok-model`	`asok-model="email"`	Two-way data binding for form inputs.
`asok-on`	`asok-on:click="doSomething"`	Listen to DOM events with modifiers (.prevent, .stop).
`asok-for`	`<template asok-for="item in items">`	Iterate over arrays in the browser.
`asok-if`	`<template asok-if="isAdmin">`	Conditional rendering (removes element from DOM).
`asok-elif`	`<template asok-elif="isUser">`	Else-if condition for `asok-if`.
`asok-else`	`<template asok-else>`	Else condition for `asok-if`.
`asok-fetch`	`asok-fetch="/api/users"`	Declarative HTTP GET request.
`asok-ref`	`asok-ref="myInput"`	Reference element via `$refs`.
`asok-init`	`asok-init="initTask()"`	Run code when element initializes.
`asok-transition`	`asok-transition="fade 300"`	Apply animations during updates (fade, slide, scale).
`asok-cloak`	`asok-cloak`	Hide element until the Asok runtime is ready.
`asok-teleport`	`<template asok-teleport="#modals">`	Render content in a different DOM location.

**Live Updates (`data-*`)**

Attribute	Example	Description
`data-block`	`data-block="results"`	Target a specific template block to refresh.
`data-trigger`	`data-trigger="every 5s"`	Trigger update on event or polling interval.
`data-swap`	`data-swap="outerHTML"`	Swap strategy (innerHTML, beforebegin, etc.).
`data-subscribe`	`data-subscribe="model:Post:1"`	Real-time update when model changes in DB.
`data-indicator`	`data-indicator="#spinner"`	Show loading state during update.

**Reactive Triggers (`ws-*`)**

Attribute	Example	Description
`ws-click`	`ws-click="increment"`	Trigger server method on click via WebSocket.
`ws-input`	`ws-input="search"`	Trigger server method on input value change.
`ws-submit`	`ws-submit="saveForm"`	Trigger server method on form submission.

Template Reference

Filters: upper, lower, capitalize, title, truncate, replace, join, default, striptags, length, date, pluralize, abs, tojson, first, last, safe, escape, e, time_ago, filesize, intcomma, duration, decode_base64.
Tests: defined, undefined, none, true, false, even, odd, string, number, boolean, integer, float, sequence, mapping, iterable, lower, upper.

🛠️ Integrated CLI Commands

Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux) and search for "Asok":

Command	Description
`Asok: Start Dev Server`	Launch the local development server.
`Asok: Run Migrations`	Apply all pending database migrations.
`Asok: Migration Status`	Check the current state of database migrations.
`Asok: Rollback Last Migration`	Revert the most recent database change.
`Asok: Seed Database`	Populate the database with initial seed data.
`Asok: List Routes`	Display all registered application URLs.
`Asok: Create Superuser`	Create an administrative user account.
`Asok: Make Model`	Scaffold a new database model class.
`Asok: Make Page`	Create a new page template and route handler.
`Asok: Make Component`	Scaffold a new reactive (Live) component.
`Asok: Make Middleware`	Create a new request/response middleware.
`Asok: Make Migration`	Generate a new migration file based on model changes.

⚡ Power User Snippets

Template Snippets (HTML)

Prefix	Description	Output
`as-var`	Variable interpolation	`{{ $1 }}`
`as-if`	Conditional block	`{% if ... %}`
`as-for`	Loop block	`{% for ... %}`
`as-with`	Scoped variables	`{% with ... %}`
`as-set`	Assignment	`{% set ... %}`
`asok-if`	Browser condition	`<template asok-if="...">`
`asok-for`	Browser loop	`<template asok-for="...">`
`asok-state`	Component state	`asok-state="{ ... }"`

Python Snippets

Prefix	Description	Output
`as-route`	Route handler	Complete boilerplate with `render(request)`
`as-model`	Database model	`class MyModel(Model): ...`
`as-field-*`	Model fields	`name = Field.String(...)`, `Field.Integer(...)`, etc.
`as-rel-*`	Model relations	`Relation.BelongsTo(...)`, `HasMany(...)`, etc.
`as-form`	Form definition	`form = Form({ ... })`
`as-action`	Form action	`def action_name(request): ...`
`as-api`	API endpoint	`@api()` decorator + handler
`as-component`	Live component	`class MyComp(Component): ...`
`as-schema`	Data schema	`class MySchema(Schema): ...`

📖 Requirements

Asok Framework: Make sure you have asok installed in your environment to use the CLI commands.
VS Code: Version 1.80.0 or higher.

🤝 Contributing

Found a bug or have a feature request? Please open an issue on our GitHub Repository.

Happy Coding with Asok! 🚀

Asok VS Code

Asok Framework