eleventy-plugin-smol-jsx-utilities
v1.2.1
Published
Small set of utilities for [Eleventy](https://www.11ty.dev) that work with JSX projects (eg, react/preact and mdx).
Maintainers
kobajReadme
Eleventy Plugin Smol Jsx Utilities
Small set of utilities for Eleventy that work with JSX projects (eg, react/preact and mdx).
Installation
npm install --save eleventy-plugin-smol-jsx-utilities
Utilities
ReadFile
This allows you to read a file that is relative to the current file. So for example, if this is your directory structure...
Project Root
├───src
│ └───folder
│ │ index.js
│ │ some-relative-file.txt
│ │ └───nested
│ │ some-other-file.txt
│ └───another
│ some-local-file.txt
└───data
some-data-file.txtYou could read any of these files with the following from the index.js file.
import { ReadFile } from 'eleventy-plugin-smol-jsx-utilities';
const relativeFile = ReadFile.asText('./some-relative-file.txt');
const otherFile = ReadFile.asText('nested/some-other-file.txt');
const localFile = ReadFile.asText('../another/some-local-file.txt');
const dataFile = ReadFile.asText('data/some-data-file.txt');Plugins
PassthroughCopyToUrlTransformPlugin
This will look through the generated html and replace any href and src fields that are pointing at passthrough copy files. Similar to the Eleventy inputpath to url plugin.
Just install the plugin like any other in your eleventy config.
import { PassthroughCopyToUrl } from 'eleventy-plugin-smol-jsx-utilities';
export default async (eleventyConfig) => {
eleventyConfig.addPassthroughCopy({ 'pblc/robots.txt': '.' });
eleventyConfig.addPassthroughCopy({ 'pblc/folder/mapping.xml': 'sitemap.xml' });
eleventyConfig.addPassthroughCopy('pblc/favicon/data/**');
eleventyConfig.addPlugin(PassthroughCopyToUrl.plugin);
}And the following...
export default function (data) {
return (
<head>
<link href="robots.txt" />
<link href="folder/mapping.xml" />
<link href="favicon/data/favicon.ico" />
</head>
);
};Will get converted.
<link href="/robots.txt" />
<link href="/sitemap.xml" />
<link href="/favicon/data/favicon.ico" />WaitForAll
This will let you run async operations inside of jsx files (so long as you dont need the async operations output).
Just install the plugin like any other in your eleventy config.
import { WaitForAll } from 'eleventy-plugin-smol-jsx-utilities';
export default async (eleventyConfig) => {
eleventyConfig.addPlugin(WaitForAll.plugin);
}And then instantiate a long running operation
import path from 'node:path';
import fs from 'node:fs';
import { WaitForAll } from 'eleventy-plugin-smol-jsx-utilities';
export const render = () => {
// File is guaranteed to be written before Eleventy finishes rendering.
WaitForAll.add(fs.writeFile('/some/output/file.txt', 'some data'));
return <div></div>;
}DirectoryResolver
This will expose the dir attribute from Eleventy in your jsx files for easier consumption.
Just install the plugin like any other in your eleventy config.
import { DirectoryResolver } from 'eleventy-plugin-smol-jsx-utilities';
export default async (eleventyConfig) => {
eleventyConfig.addPlugin(DirectoryResolver.plugin);
}And then use the directories as needed
import path from 'node:path';
import fs from 'node:fs';
import { DirectoryResolver } from 'eleventy-plugin-smol-jsx-utilities';
export const render = () => {
const outputFile = path.join(DirectoryResolver.getOutputDir(), 'my-cool-file.png');
fs.writeFileSync(outputFile, imgData);
return <img src={DirectoryResolver.getOutputUrl(outputFile)}>;
}DeadTagRemover
This removes tags that are effectively useless in the html. For example <script></script> will be deleted.
Currently deletes the following tags if they are empty:
<script><style><title><head>
Just install the plugin like any other in your eleventy config.
import { DeadTagRemover } from 'eleventy-plugin-smol-jsx-utilities';
export default async (eleventyConfig) => {
eleventyConfig.addPlugin(DeadTagRemover.plugin);
}