Options: Rendering #

template #

A string template for the component.

• Type

  interface ComponentOptions {
    template?: string
  }
  

• Details

  A template provided via the template option will be compiled on-the-fly at runtime. It is only supported when using a build of Kdu that includes the template compiler. The template compiler is NOT included in Kdu builds that have the word runtime in their names, e.g. kdu.runtime.esm-bundler.js.

  If the string starts with # it will be used as a querySelector and use the selected element's innerHTML as the template string. This allows the source template to be authored using native <template> elements.

  If the render option is also present in the same component, template will be ignored.

  If the root component of your application doesn't have a template or render option specified, Kdu will try to use the innerHTML of the mounted element as the template instead.

  Security Note

  Only use template sources that you can trust. Do not use user-provided content as your template. See Security Guide for more details.

render #

A function that programmatically returns the virtual DOM tree of the component.

• Type

  interface ComponentOptions {
    render?(this: ComponentPublicInstance) => KNodeChild
  }
  
  type KNodeChild = KNodeChildAtom | KNodeArrayChildren
  
  type KNodeChildAtom =
    | KNode
    | string
    | number
    | boolean
    | null
    | undefined
    | Koid
  
  type KNodeArrayChildren = (KNodeArrayChildren | KNodeChildAtom)[]
  

• Details:

  render is an alternative to string templates that allows you to leverage the full programmatic power of JavaScript to declare the render output of the component.

  Pre-compiled templates, for example those in Single-File Components, are compiled into the render option at build time. If both render and template are present in a component, render will take higher priority.

• See also:

  • Rendering Mechanism
  • Render Functions

compilerOptions #

Configure runtime compiler options for the component's template.

• Type

  interface ComponentOptions {
    compilerOptions?: {
      isCustomElement?: (tag: string) => boolean
      whitespace?: 'condense' | 'preserve' // default: 'condense'
      delimiters?: [string, string] // default: ['{{', '}}']
      comments?: boolean // default: false
    }
  }
  

• Details

  This config option is only respected when using the full build (i.e. the standalone kdu.js that can compile templates in the browser). It supports the same options as the app-level app.config.compilerOptions, and has higher priority for the current component.

• See also: app.config.compilerOptions