• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. With JSX
  2. With vanilla HTML
Guides Type checking and intellisense
(external link)

Type checking and intellisense #

Liquid comes with Typescript type definitions and hense allows for type checking and intellisense. Both is currently supported in JSX and plain HTML only and an additional setup step is required.

With JSX #

Typescript checks expressions in JSX. Since it does not “know about” Liquid Web Components, it will “complain” as soon as it “sees” one with an error message like the following:

Property 'ld-button' does not exist on type 'JSX.IntrinsicElements'

In order to let Typescript “know about” Liquid Web Components, you'll have to decalare a JSX namespace including all Liquid components:

import { JSX as LocalJSX } from '@emdgroup-liquid/liquid/dist/loader'
import { HTMLAttributes } from 'react' // or from 'vue'

type LiquidElements<T> = {
[P in keyof T]?: T[P] &
Omit<HTMLAttributes, 'className'> & {
class?: string
}
}

declare global {
namespace JSX {
interface IntrinsicElements extends LiquidElements<LocalJSX.IntrinsicElements> {}
}

// Required only when using __LD_ASSET_PATH__
interface Window {
__LD_ASSET_PATH__?: string
}
}

Learn more about JSX in Typescript in the Typescript docs.

With vanilla HTML #

Type checking is not yet supported in vanilla HTML, but intellisense can be enabled in Visual Studio Code by adding the custom data setting to .vscode/settings.json in the root directory of your project:

{
"html.customData": [
"./node_modules/@emdgroup-liquid/liquid/dist/web-components.html-data.json"
]
}

The format of the referenced JSON file, which includes type information about each Web Component, doesn't follow a common standard, but is Visual Studio Code specific. Discussions on a standard, which eventually will lead to support in more editors, is (at the time of writing) still ongoing. Probably due to the fact that there is no standard yet, VS Code extensions are not yet making use of the custom data feature. Hense intellisense is not yet working in Vue templates, Svelte markup etc.

Some efforts are also being made to enable intellisense for Web Components in Intellij editors, but we are not there yet.