Kdu Language Features

⚡ Fast Kdu Language Support Extension

Plugin's page on Visual Studio Marketplace

Kdu Language Features is a language support extension built for Kdu, Witepress and petite-kdu. this is based on @kdujs/reactivity to calculate everything on-demand, to implement native TypeScript language service level performance.

Usage

Setup for Kdu 2

Add @kdujs/runtime-dom

This extension requires Kdu 3 types from the @kdujs/runtime-dom.

Kdu 3 and Kdu 2.7 has built-in JSX types. For Kdu version <= 2.6.14 you need to add JSX types by install @kdujs/runtime-dom:

// package.json
{
  "devDependencies": {
    "@kdujs/runtime-dom": "latest"
  }
}

Remove Kdu.extend

Template type-checking is not supported with Kdu.extend. You can use composition-api, kdu-class-component, or export default { ... } instead of export default Kdu.extend.

Here is a compatibility table for different ways of writing the script blocks:

	Component options type-checking in `<script>`	Interpolation type-checking in `<template>`	Cross-component props type-checking
`export default { ... }` with JS	Not supported	Not supported	Not supported
`export default { ... }` with TS	Not supported	Supported but deprecated	Supported but deprecated
`export default Kdu.extend({ ... })` with JS	Not supported	Not supported	Not supported
`export default Kdu.extend({ ... })` with TS	Limited (supports `data` types but not `props` types)	Limited	Not supported
`export default defineComponent({ ... })`	Supported	Supported	Supported
Class component	Supported	Supported with additional code	Supported with additional code

Note that you can use defineComponent even for components that are using the Options API.

Support for Kdu 2 template

Kocan preferentially supports Kdu 3. Kdu 3 and Kdu 2 templates have some differences. You need to set the target option to support the Kdu 2 templates.

// tsconfig.json
{
  "compilerOptions": {
    // ...
  },
  "kduCompilerOptions": {
    "target": 2.7,
    // "target": 2, // For Kdu version <= 2.6.14
  }
}

remove .d.ts files if they exist.

For projects generated by the Kdu CLI, .d.ts files are included. Remove these files.

rm src/shims-tsx.d.ts src/shims-kdu.d.ts

Define Global Components

Local components, Built-in components, native HTML elements Type-Checking is available with no configuration.

For Global components, you need to define GlobalComponents interface, for example:

// components.d.ts
declare module '@kdujs/runtime-core' {  // Kdu 3
// declare module 'kdu' {   // Kdu 2.7
// declare module '@kdujs/runtime-dom' {  // Kdu <= 2.6.14
  export interface GlobalComponents {
    RouterLink: typeof import('kdu-router')['RouterLink']
    RouterView: typeof import('kdu-router')['RouterView']
  }
}

export {}

Notes

Ketur

You need to disable Ketur to avoid conflicts.

Recommended use css / less / scss as <style> language, because these base on vscode-css-languageservice to provide reliable language support.

Recursive components

Kocan can't typecheck recursive components out of the box due to TS limitation. But there's a workaround, you can explicitly specify component's props like so:

Bar.kdu

<template>
  <Bar :a="'wrong'" />
</template>

<script setup lang="ts">
import { defineAsyncComponent, type DefineComponent } from 'kdu'

interface Props {
  a: number
}

const Bar = defineAsyncComponent<DefineComponent<Props>>(
  () => import('./Bar.kdu') as any
)
defineProps<Props>()
</script>

Custom File Extensions

Syntax highlighting and intellisense can be applied to additional file extensions beyond just kdu. This will need to be configured in three different places for full support.

In VS Code settings for the Kocan extension add any additional extensions you need to Additional Extensions. Such as ext.

In your tsconfig.json file you will need to make sure your custom extension is included by TypeScript. If you have an include value for ./src/*.kdu then you would want to add an include for ./src/*.ext as well.

"include": [
  "./src/*.ts",
  "./src/*.kdu",
  "./src/*.ext",
]

Finally you need to make VS Code recognize your new extension and automatically associate it with the Kdu language format. To do this you need to configure your File Associations setting to map *.ext to the language value kdu. This can be done under Text Editor > Files, or with the key files.associations.

Kdu Language Features (Kocan)

Kdu-Code