Krom Mini-App Studio

Full IDE support for KromScript (.ks) — the scripting language behind the Krom mini-app platform. Syntax highlighting, IntelliSense, manifest validation, linting, and integrated build/deploy/dev commands, in the spirit of TCMPP-class tooling.

Features

Language intelligence (.ks)

• Syntax highlighting for KromScript: let, fn(a){…}, reactivity (Obs, List), the declarative UI helpers, and @use imports.
• Hover docs for every widget, helper, native function, and API namespace member — generated from the widget registry and the lib catalogs, so each widget shows its full signature, a prop table (type, default, description, enum values) and a usage example.
• Completions
  • The 52 core widget constructors (Column, Row, Stack, Box, Padding, Card, Text, Image, Button, TextField, Switch, Checkbox, Slider, ListTile, Select, Chip, TabNav, TabHostNav, PageView, Gauge, Timeline, Stepper, Alert, PinInput, BarChart, …) with ready-to-fill signature snippets — the exact set the kmini_program runtime registers, audited props included.
  • Library pack components (see Library packs below): forms, media, and charts components complete like core widgets, with their French catalog docs.
  • Widget props with type-aware snippets, enum/color value pickers, defaults, and required-first ordering — for core, lib and custom widgets.
  • API namespaces after ns. (all available in the runtime):
    • ui.* — toast, showModal, showBottomSheet, showProgress, hideProgress, pop.
    • storage.* — getItem(key) → string | null, setItem(key, value), removeItem(key), clear().
    • nav.* — navigateTo(pageKey, params?), redirect(pageKey, params?) (alias redirectTo), back().
    • device.* — platform() → 'ios' | 'android' | 'web' | 'macos' | …, systemInfo() → { platform, osVersion, model, screenWidth, screenHeight, pixelRatio }.
    • request(options, onSuccess?, onError?) — asynchronous HTTP requests via callbacks (top-level function).
    • Lib modules — forms.* (validation + reactive form groups), media.* (pickers/camera), charts.* (palette/format/scales).
  • theme. variables — the 28 host-injected Material roles (theme.primary, theme.surfaceContainerHighest, …) with color swatches; the palette idiom (let T = { bg: theme.surface }) completes end-to-end.
  • The 477 Material icon names the runtime supports, inside Icon("…") / IconButton("…") and every icon-taking prop (generated from the runtime's own table — see scripts/sync-icons.js).
  • Auto-import: pick a symbol defined in another .ks file and an @use '…' directive is inserted automatically (after the existing import block).
  • Callback/builder function names inside onTap: "…", builder: "…", validate: "…", etc.
• Go to definition, document symbols / outline, signature help, inlay hints (closing-widget names on multi-line blocks), folding, color decorators, and formatting.
• Linting: undefined functions, missing/unused @use imports, bracket balance, basic syntax checks — and pack gating: using a lib component or module without declaring its pack in manifest.json → requires warns, with a one-click quick fix.

Library packs (forms, media, charts)

Mini-apps opt into domain libraries in the manifest:

{ "requires": ["forms", "charts"] }

The extension ships the catalog of each pack (vendored from the lib repos' krom_lib.json; refresh with node scripts/sync-libs.js) and treats their components exactly like core widgets — completion, prop completion, hover, lint:

Color props of lib components accept theme roles ("primary", "onSurface", "scrim", …) — the completion offers the exact roles each pack resolves. Using a pack that isn't declared in requires produces a warning with a quick fix that adds it.

Manifest validation (manifest.json)

The app manifest is validated two ways:

1. JSON Schema (schemas/manifest.schema.json, wired through contributes.jsonValidation) — field presence, types, enums, and completions while editing.
2. Custom consistency diagnostics that a schema cannot express:
   • entry must reference an existing key in pages.
   • Every tabBar.list[].pagePath must reference an existing key in pages.
   • Each page source, every utils[] entry, icon paths, tabBar icon paths, and subpackages pages must resolve to a file that exists on disk.

Only KromScript app manifests (objects with entry + pages) are checked, so unrelated manifest.json files in a workspace are left alone.

Recognized manifest fields:

{
  "id": "com.example.app",          // required
  "name": "My App",                  // required
  "version": "1.0.0",                // required
  "entry": "home",                   // required — a key in `pages`
  "icon": "assets/icon.png",
  "description": "…",
  "pages": {                          // required
    "home": { "name": "Home", "icon": "home", "source": "pages/home.ks" }
  },
  "utils": ["utils/theme.ks"],
  "requires": ["forms", "media", "charts"],   // library packs (see above)
  "minSdk": "1.1.0",
  "license": "MIT",
  "customWidgets": { "RatingStars": { "childType": "none" } },
  "permissions": ["storage", "network"],
  "networkTimeout": { "request": 10000 },
  "window": {
    "navigationBarTitleText": "My App",
    "navigationBarBackgroundColor": "#2196F3",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "list": [{ "pagePath": "home", "text": "Home", "iconPath": "assets/home.png" }]
  },
  "subpackages": [{ "root": "packageA", "pages": ["detail.ks"] }]
}

Integrated commands

Run from the Command Palette (all under the Krom category), or click the ⚡ <app> v<version> status bar item to open the Krom menu. The extension knows the current project from its manifest.json (the id slug plus the CLI-managed appId) — no ID is ever typed or copied. Commands invoke the krom CLI (from the krom_bundler package) in the project folder, streaming output to a dedicated Krom output channel.

Requirements

• The krom CLI (from krom_bundler) must be installed and on your PATH to use the Build / Publish / Dev commands. If it lives elsewhere, set kromscript.cliPath.

Extension settings

The KromScript language at a glance

@use './utils/theme.ks'

let count = Obs(0)

fn increment() {
  count.set(count.value + 1)
}

fn onInit() {
  println("page ready")
}

fn build() {
  return Scaffold({
    appBar: AppBar({ title: "Counter" }),
    body: Center({}, [
      Column({ spacing: 12, crossAxisAlignment: "center" }, [
        Text("Count: " + toString(count.value), { fontSize: 20 }),
        Button("Increment", { variant: "filled", onTap: "increment" })
      ])
    ])
  })
}

• Reactivity — Obs(value) (.value, .set, .update, .toggle) and List([…]) (.add, .clear, .map, …). Wrap reactive UI in Obx({ builder: "…" }).
• Lifecycle hooks — onInit, onShow, onHide, onDispose.
• Imperative UI — ui.toast, ui.showModal, ui.showBottomSheet, ui.pop, …

Native APIs

These are implemented in the kmini_program runtime and surfaced through completions and hover.

storage.* — persistent key/value storage

Values are strings; serialize objects with jsonStringify / jsonParse.

storage.setItem('authToken', token)
let saved = storage.getItem('authToken')   // string | null
storage.removeItem('authToken')
storage.clear()

nav.* — page navigation

Pages are referenced by their key in manifest.json → pages.

nav.navigateTo('detail', { id: 42 })       // push, with optional params
nav.redirect('home')                       // replace current page (alias: nav.redirectTo)
nav.back()                                 // pop to the previous page

device.* — platform & device info

let p = device.platform()                  // 'ios' | 'android' | 'web' | 'macos' | …
let info = device.systemInfo()             // { platform, osVersion, model, screenWidth, screenHeight, pixelRatio }

request(...) — HTTP requests

The interpreter is synchronous, so request returns nothing — results arrive through the onSuccess / onError callbacks. onSuccess(res) receives { statusCode, data, headers, ok } and onError(err) receives { error, statusCode }.

request(
  { url: 'https://api.example.com/users', method: 'GET' },
  fn (res) {
    if (res.ok) {
      ui.toast('Got ' + toString(res.statusCode))
      println(res.data)
    }
  },
  fn (err) {
    ui.toast('Failed: ' + err.error)
  }
)

Release notes

See CHANGELOG.md.