Skip to content

What do you think about Visual Studio Marketplace? We are looking for feedback from developers like you! Take the survey

| Marketplace
Sign in
Visual Studio Code>Other>Kdu Language Features (Kocan)New to Visual Studio Code? Get it now.

Kdu Language Features (Kocan)

Kdu-Code

|
24 installs
| (1) | Free
Language support for Kdu 3
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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
  1. 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"
  }
}
  1. 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.

  1. 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
  }
}
  1. 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>
  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft