Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add public API #20

Merged
merged 5 commits into from
Feb 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -249,3 +249,17 @@ The plugin has an API consisting of one required parameter and multiple optional
- woff - [ttf2woff](https://github.com/fontello/ttf2woff).
- eot - [ttf2eot](https://github.com/fontello/ttf2eot).
- See [webfonts-generator#formatoptions](https://github.com/vusion/webfonts-generator#formatoptions)

## Public API

The plugin exposes a public API that can be used inside another plugins using [Rollup inter-plugin communication mechanism](https://rollupjs.org/plugin-development/#inter-plugin-communication).

Currently available methods:

### getGeneratedWebfonts

- **returns**: `Array<{ type: 'svg' | 'ttf' | 'woff2' | 'woff' | 'eot', href: string }>`
- **description**
- `type` - a font format generated by a plugin
- `href` - a path to a generated font
- [This repo](https://github.com/stryaponoff/vite-plugin-preload-webfont) contains the usage example.
Copy link
Contributor Author

@stryaponoff stryaponoff Feb 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was trying to find a best way to provide an example of how it works without adding a big code examples to the README.md and without duplicating your ./example dir so I just made another repo with plugin example.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That works IMHO 🙂

15 changes: 14 additions & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { parseOptions, parseFiles } from './optionParser';
import type { Plugin, ModuleGraph, ModuleNode } from 'vite';
import type { GeneratedFontTypes, WebfontsGeneratorResult } from '@vusion/webfonts-generator';
import type { IconPluginOptions } from './optionParser';
import type { GeneratedWebfont } from './types/generatedWebfont';
import type { PublicApi } from './types/publicApi';

const ac = new AbortController();
const webfontGenerator = promisify(_webfontGenerator);
Expand All @@ -17,13 +19,14 @@ const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`;
* The plugin uses {@link https://github.com/vusion/webfonts-generator/ webfonts-generator} package to create fonts in any format.
* It also generates CSS files that allow using the icons directly in your HTML output, using CSS classes per-icon.
*/
export function viteSvgToWebfont<T extends GeneratedFontTypes = GeneratedFontTypes>(options: IconPluginOptions<T>): Plugin {
export function viteSvgToWebfont<T extends GeneratedFontTypes = GeneratedFontTypes>(options: IconPluginOptions<T>): Plugin<PublicApi> {
const processedOptions = parseOptions(options);
let isBuild: boolean;
let fileRefs: { [Ref in T]: string } | undefined;
let _moduleGraph: ModuleGraph;
let _reloadModule: undefined | ((module: ModuleNode) => void);
let generatedFonts: undefined | Pick<WebfontsGeneratorResult<T>, 'generateCss' | 'generateHtml' | T>;
const generatedWebfonts: GeneratedWebfont[] = [];

const generate = async (updateFiles?: boolean) => {
if (updateFiles) {
Expand Down Expand Up @@ -54,6 +57,11 @@ export function viteSvgToWebfont<T extends GeneratedFontTypes = GeneratedFontTyp
return {
name: 'vite-svg-2-webfont',
enforce: 'pre',
api: {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, I was unable to find any docs about this, could you share some docs about how this works and where it can be used?
Also, care to document this in the README?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello! Here's the docs: https://rollupjs.org/plugin-development/#direct-plugin-communication

I'll update the readme a little bit later.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the reference!
I'd be happy to merge once there is some readme about this

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! I'll plan to update the readme tomorrow. Sorry for the delay :(

getGeneratedWebfonts(): GeneratedWebfont[] {
return generatedWebfonts;
},
},
configResolved(_config) {
isBuild = _config.command === 'build';
},
Expand Down Expand Up @@ -85,6 +93,10 @@ export function viteSvgToWebfont<T extends GeneratedFontTypes = GeneratedFontTyp
type,
`/${this.getFileName(this.emitFile({ type: 'asset', fileName: `assets/${processedOptions.fontName}-${guid()}.${type}`, source: generatedFonts?.[type] }))}`,
]);

emitted.forEach(([type, href]) => {
generatedWebfonts.push({ type, href });
});
fileRefs = Object.fromEntries(emitted) as { [Ref in T]: string };
}
},
Expand Down Expand Up @@ -112,6 +124,7 @@ export function viteSvgToWebfont<T extends GeneratedFontTypes = GeneratedFontTyp
};
}
export default viteSvgToWebfont;
export { type GeneratedWebfont, type PublicApi };

/**
* Paths of default templates available for use.
Expand Down
6 changes: 6 additions & 0 deletions src/types/generatedWebfont.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import type { GeneratedFontTypes } from '@vusion/webfonts-generator';

export type GeneratedWebfont = {
type: GeneratedFontTypes;
href: string;
};
5 changes: 5 additions & 0 deletions src/types/publicApi.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import type { GeneratedWebfont } from './generatedWebfont';

export interface PublicApi {
getGeneratedWebfonts(): GeneratedWebfont[];
}
Loading