Kocan Language Features
⚡ Fast Kocan 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
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>
