npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

html-validate-vue

v6.1.0

Published

vue transform for html-validate

Downloads

10,514

Readme

html-validate-vue

Vue.js plugin for HTML-Validate.

  • Transforms single file components and template strings.
  • Augments element metadata for usage with components.
  • Definitions for <slot> and <transition> elements.
  • Additional rules.

Usage

npm install --save-dev html-validate-vue

In .htmlvalidate.json:

{
  "plugins": ["html-validate-vue"],
  "extends": ["html-validate:recommended", "html-validate-vue:recommended"],
  "elements": ["html5"],
  "transform": {
    "^.*\\.vue$": "html-validate-vue"
  }
}

The default is to internally autodetect what transforms to apply based on filename. For normal usage this is usually ok but it can be explicitly set by using one of these named transforms:

  • html-validate-vue:auto: best match based on filename (default). *.vue uses sfc, *.{jsx?,tsx?} uses js and other files uses html to apply hooks only.
  • html-validate-vue:js: transform a javascript file by looking for objects with a template property.
  • html-validate-vue:html: transform a html file (only applying hooks).
  • html-validate-vue:sfc: transform a single-file component.

Vue CLI

If you're using Vue CLI you can add the CLI plugin:

vue add html-validate
vue-cli-service html-validate

Supported elements

  • <component>
  • <keep-alive>
  • <router-link>
  • <router-view>
  • <slot>
  • <transition>

Rules

| Rule | Recommended | Description | | --------------------------- | ----------- | ------------------------------------------------------ | | vue/available-slots | Error | Validate usage of slots. Only known slots may be used. | | vue/prefer-slot-shorthand | Error | Prefers the usage of #foo over v-slot:foo. | | vue/required-slots | Error | Validate required slots. Required slots must be used. |

Element metadata

| Property | Datatype | Description | | ------------- | ---------- | ---------------------------------------------------- | | component | string | Component uses <component is=".."> to wrap content | | slots | string[] | List of available slots. | | requiredSlots | string[] | List of required slots. |

Slots

Components with slots can add element metadata for the slot using ${component}:${slot} syntax, e.g my-component:my-slot.

Given a component like this:

<template>
  <div>
    <div class="my-component-heading">
      <slot name="heading"></slot>
    </div>
    <div class="my-component-body">
      <slot name="body"></slot>
    </div>
    <div class="my-component-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

Metadata for the component itself is written as normally:

{
  "my-component": {
    "flow": true,
    "slots": ["heading", "body", "footer"],
    "requiredSlots": ["body"]
  }
}

Metadata for the slots is written as normally with the exception of the keys. Each key is prefixed with its parent/component and delimited by # and ending with its slot name:

{
  "my-component#heading": {
    "permittedDescendants": ["@heading"]
  },
  "my-component#body": {
    "permittedContent": ["@flow"]
  },
  "my-component#footer": {
    "permittedContent": ["@phrasing"]
  }
}

# is used as a delimiter due to it being the official shorthand for slots in Vue.

Note: unless the default slot is wrapped in v-slot:default it will not be validated by my-component#default but by the component element itself. This can be miltigated by adding default as a required slot.

Dynamic components

If your component uses <component is=".."> to dynamically select element the component property marks which attribute selects the tagname.

<template>
  <div>
    <component :is="tagname">
      <slot></slot>
    </component>
  </div>
</template>

<script>
Vue.component("my-component", {
  props: ["tagname"],
});
</script>

The corresponding metadata would look like this:

{
  "my-component": {
    "component": "tagname"
  }
}

Using this the following markup would yield an error:

<my-component tagname="label">
  <div>A div cannot be inside a label</div>
</my-component>

When using named slots the component property goes directly onto the slot metadata:

{
  "my-component#default": {
    "component": "tagname"
  }
}

The attribute is always read from the component itself, not the slot <template> element:

<my-component tagname="label">
  <template v-slot:default>...</template>
</my-component>