Skip to main content

Using to besides HTML

You can also apply it to syntaxes besides HTML such as template engines or frameworks if using plugins together.

Installing plugins​

Install the parser plugin through npm or Yarn:

npm install -D @markuplint/pug-parser

If a syntax has its own specification you should install the spec plugin with the parser plugin:

npm install -D @markuplint/jsx-parser @markuplint/react-spec
npm install -D @markuplint/vue-parser @markuplint/vue-spec

Supported syntaxes​

Template or syntaxParserSpec
JSX@markuplint/jsx-parser@markuplint/react-spec
Vue@markuplint/vue-parser@markuplint/vue-spec
Svelte@markuplint/svelte-parser@markuplint/svelte-spec
SvelteKit@markuplint/svelte-parser/kit-
Astro@markuplint/astro-parser-
Alpine.js@markuplint/alpine-parser@markuplint/alpine-parser/spec
HTMX@markuplint/htmx-parser@markuplint/htmx-parser/spec
Pug@markuplint/pug-parser-
PHP@markuplint/php-parser-
Smarty@markuplint/smarty-parser-
eRuby@markuplint/erb-parser-
EJS@markuplint/ejs-parser-
Mustache or Handlebars@markuplint/mustache-parser-
Nunjucks@markuplint/nunjucks-parser-
Liquid@markuplint/liquid-parser-
note

There is @markuplint/html-parser package but the core package includes it. You don't need to install and to specify it to the configuration.

Unsupported syntaxes

It's not able to support syntaxes if one's attribute is complex.

✅ Available code​

<div attr="{{ value }}"></div>
<div attr='{{ value }}'></div>
<div attr="{{ value }}-{{ value2 }}-{{ value3 }}"></div>

❌ Unavailable code​

If it doesn't nest by quotations.

<div attr={{ value }}></div>

PULL REQUEST WANTED: This problem is recognized by developers and created as an issue #240.

Applying plugins​

Specify a plugin to apply to the parser property on the configuration file. And If it has spec add to the specs property. Set a regular expression that can identify the target file name to the parser property key.

Use React
{
  "parser": {
    "\\.jsx$": "@markuplint/jsx-parser"
  },
  "specs": {
    "\\.jsx$": "@markuplint/react-spec"
  }
}
Use Vue
{
  "parser": {
    "\\.vue$": "@markuplint/vue-parser"
  },
  "specs": {
    "\\.vue$": "@markuplint/vue-spec"
  }
}

See explained configuring parser and specs if you want details.

Why need the spec plugins?​

For example, the key attribute doesn't exist in native HTML elements. But you often need to specify it when you use React or Vue. So you should specify @markuplint/react-spec or @markuplint/vue-spec.

const Component = ({ list }) => {
  return (
    <ul>
      {list.map(item => (
        <li key={item.key}>{item.text}</li>
      ))}
    </ul>
  );
};
<template>
  <ul>
    <li v-for="item in list" :key="item.key">{{ item.text }}</li>
  </ul>
</template>

Besides, spec plugins include specific attributes and directives each owned.

Pretenders​

In React, Vue, and more, It cannot evaluate custom components as HTML elements.

<List>{/* No evaluate as native HTML Element */}
  <Item />{/* No evaluate as native HTML Element */}
  <Item />{/* No evaluate as native HTML Element */}
  <Item />{/* No evaluate as native HTML Element */}
</List>

The Pretenders feature resolves that.

It evaluates components as rendered HTML elements on each rule if you specify a selector for a component and properties of an element that it exposes.

{
  "pretenders": [
    {
      "selector": "List",
      "as": "ul"
    },
    {
      "selector": "Item",
      "as": "li"
    }
  ]
}
<List>{/* Evaluate as <ul> */}
  <Item />{/* Evaluate as <li> */}
  <Item />{/* Evaluate as <li> */}
  <Item />{/* Evaluate as <li> */}
</List>

See the details of pretenders property on the configuration if you want.

The as attribute​

If a component has the as attribute, it is evaluated as the element specified by this attribute.

<x-ul as="ul"><!-- Evaluate as <ul> -->
  <x-li as="li"></x-li><!-- Evaluate as <li> -->
  <x-li as="li"></x-li><!-- Evaluate as <li> -->
  <x-li as="li"></x-li><!-- Evaluate as <li> -->
</x-ul>

This evaluation also applies to its attributes that are inherited from the component.

<!-- Evaluate as <img src="image.png" alt="image"> -->
<x-img src="image.png" alt="image">