# vite-plugin-squirrelly

> A Vite plugin to render files with SquirrellyJS

Latest version **1.0.2** (published 2023-07-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-squirrelly
pnpm add vite-plugin-squirrelly
yarn add vite-plugin-squirrelly
bun add vite-plugin-squirrelly
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-07-05 |
| First published | 2023-07-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 8.1 KB |
| Known vulnerabilities | 0 (+13 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Reed Hewitt |
| Maintainers | reedhewitt |
| Keywords | vite-plugin, vite, squirrelljs, static, site, generator |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-squirrelly
- Repository: https://github.com/reedhewitt/vite-plugin-squirrelly
- Homepage: https://github.com/reedhewitt/vite-plugin-squirrelly#readme
- Issues: https://github.com/reedhewitt/vite-plugin-squirrelly/issues
- npm.io page: https://npm.io/package/vite-plugin-squirrelly

## Dependencies (5)

- [fs](https://npm.io/package/fs.md) ^0.0.1-security
- [glob](https://npm.io/package/glob.md) ^10.3.1
- [path](https://npm.io/package/path.md) ^0.12.7
- [vite](https://npm.io/package/vite.md) ^4.3.9
- [squirrelly](https://npm.io/package/squirrelly.md) ^9.0.0

## Recent versions

- 1.0.2 (latest) — 2023-07-05
- 1.0.1 — 2023-07-04

## README

# vite-plugin-squirrelly
**A Vite plugin to render files with SquirrellyJS**

This plugin applies the [Squirrelly](https://squirrelly.js.org/) renderer to the input files, which is awesome for generating a static site.

Inspired by [vite-plugin-handlebars](https://github.com/alexlafroscia/vite-plugin-handlebars).

## Installation

```
npm install --save-dev vite-plugin-squirrelly
```

## Usage

Supposing you have some HTML files in `./src`, some partials in `./partials`, and a JSON file with template values in `./data.json`, your `vite.config.js` could look like:

```js
import Squirelly from 'vite-plugin-squirrelly';
import { globSync } from 'glob';
import { readFileSync } from 'fs';

export default {
  root: 'src',
  publicDir: '../public', // relative to Vite root
  build: {
    outDir: '../dist', // relative to Vite root
    rollupOptions: {
      // Get all HTML files in an object. The relative file paths are used as both keys and values.
      // Note that these files should have a lowercase file extension that Vite understands,
      // such as *.html. By default you can't use *.sqrl for the input files.
      input: Object.fromEntries(globSync('src/**/*.html').map(file => [file, file]))
    }
  },
  plugins: [
    Squirelly({
      // Parse the JSON and use it as the data arg for Squirrelly.render().
      data: JSON.parse(readFileSync('data.json', 'utf8')),
      
      // The partials directory relative to the Vite root.
      partialsDir: '../partials'
    })
  ],
};
```

When you run `vite build`, the HTML files will be parsed with Squirrelly and output to `./dist`.

## Plugin Options

The object passed to the `Squirrelly()` plugin can include more:

```js
{
  // Data for your templates as an object or a function that returns an object
  // (see below for details on using a function).
  data: {
    siteName: 'My Website',
    copyrightYear: (new Date()).getFullYear()
  },
  
  // Config options to apply to Squirrelly.
  options: {
    varName: 'x'
  },
  
  // The directories where partials and layouts are stored relative to the Vite root.
  // Unlike the build.rollupOptions.input files in the example above, your partials
  // and layouts can use either *.html or *.sqrl extensions.
  partialsDir: '../partials',
  layoutsDir: '../layouts',
  
  // Filters to define in Squirrelly.
  filters: {
    myfilter: function(str){
      // Do something...
    }
  },
  
  // Helpers to define in Squirrelly.
  helpers: {
    myhelper: function(content, blocks, config){
      // Do something...
    }
  },
  
  // Optional render callback to be used when the Squirrelly async option is set to true.
  renderCallback(err, templateReturn){
    // Do something...
  }
}
```

And finally, the `data` item can be a function that receives the current page as an argument and returns a customized data object.

```js
// Defined above the "export default" Vite config object:
const dataObject = JSON.parse(readFileSync('data.json', 'utf8'));

// Object passed to Squirrelly():
{
  data(relPath){
    // Tell every page what its path is.
    dataObject.relPath = relPath;
    
    // Also format a clean path with index.html and trailing slash removed (except root slash).
    dataObject.relPathClean = relPath.replace(/((?<!^)\/)?index\.(html|sqrl)$/, '');
    
    // Do any other page-specific stuff with the data...
    
    return dataObject;
  }
}
```

Consult the [Squirrelly docs](https://squirrelly.js.org/docs) for details about template syntax and API options. As of this writing, layouts are not well documented in Squirrelly, but [you can see some examples here](https://github.com/squirrellyjs/squirrelly/tree/master/test/templates).

---
_Source: https://npm.io/package/vite-plugin-squirrelly · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._