@tybalt/eleventy-plugin

Tybalt uses eleventy for static site generation.

Installation

Install the eleventy plugin with your favorite npm client

npm install --save-dev @tybalt/eleventy-plugin

Getting Started

First, go through the 11ty Getting Started guide.

Next, you'll need to configure the plugin in .eleventy.js with the location of your component definitions

const tybaltPlugin = require('@tybalt/eleventy-plugin');

module.exports = function (eleventyConfig) {
    eleventyConfig.addPlugin(tybaltPlugin, {
        pattern: './components',
        outfile: 'tybalt-out.js',
    });
};

Usage

The plugin makes your component library available for use on all of your pages. If you have a component defined like this

defineComponent({
    name: 'FooBarBaz',
    props: {
        value: {},
    },
    render({ value }) {
        return html`got value: ${value}`;
    })
});

You can use it on your index.html or page.md like any other html element

<foo-bar-baz value="value"></foo-bar-baz>

Options

The plugin takes a pair of options to configure its usage

outfile

This is the name of the file the plugin will generate that contains your component library. It defaults to tybalt-out.js, but you can configure it to be any valid filename. For instance, if you set this option as follows

const tybaltPlugin = require('@tybalt/eleventy-plugin');

module.exports = function (eleventyConfig) {
    eleventyConfig.addPlugin(tybaltPlugin, {
        outfile: 'index.js',
    });
};

The generated view will include a script tag as follows

<script src="/index.js"></script></body></html>

And the file loaded by the browser and generated by the build will be called index.js, rather than tybalt-out.js.

pattern

This is the pattern for the component definitions that will be included in your component library. Defaults to ./components, which corresponds to a file tree as follows

└── components
    ├── component-one.js
    ├── component-two.js
    └── component-three.js

where each component is a single file. If you'd prefer to have multiple files in a single directory, you could set this to ./components/**/*.component.ts, to treat all files ending in .component.ts as entry points, which corresponds to a file tree as follows

├── components
│   ├── ComponentOne
│   │   ├── one.component.ts
│   │   ├── one.test.ts
│   │   └── one.css
│   ├── ComponentTwo
│   │   └── two.ts
│   └── ComponentThree
│       ├── header.ts
│       └── header.css