vite-plugin-bookmarklet

A Vite plugin to import scripts as bookmarklets.

Installation 💿

# npm
npm install vite-plugin-bookmarklet

# jsr
deno add jsr:@idleberg/vite-plugin-bookmarklet

Usage 🚀

With this plugin, you can append the ?bookmarklet to any JavaScript/TypeScript import.

[!TIP] Treat your bookmarklet like any other JavaScript file, the plugin will do the rest:

• URI-encode the code
• wrap it inside an IIFE
• create a JavaScript URL

Example

Create a vite.config.ts(or any other supported format):

import { defineConfig } from "vite"
import bookmarklet from "vite-plugin-bookmarklet"

export default defineConfig({
	plugins: [bookmarklet()],
})

Take a look at the following implementations:

import bookmarklet from './my-code?bookmarklet'

document.querySelector('#app').innerHTML = `
	<a href="${bookmarklet}">
		Run
	</a>
`

---
import bookmarklet from './my-code?bookmarklet'
---

<a href={bookmarklet}>
	Run
</a>

import { LitElement,  html } from 'lit'
import bookmarklet from './my-code?bookmarklet'

@customElement('bookmarklet')
export class Bookmarklet extends LitElement {
	render() {
		return html`
			<a href=${bookmarklet}>
				Run
			</a>
		`
	}
}

import bookmarklet from './my-code?bookmarklet'

export function Bookmarklet() {
	return (
		<a href={bookmarklet}>
			Run
		</a>
	)
}

<script>
	import bookmarklet from './my-code?bookmarklet'
</script>

<a href={bookmarklet}>
	Run
</a>

<script setup>
	import bookmarklet from './my-code?bookmarklet'
</script>

<template>
	<a :href={bookmarklet}>
		Run
	</a>
</template>

TypeScript

To avoid type errors, add the following line to your vite-env.d.ts:

/// <reference types="vite-plugin-bookmarklet/client" />

Alternatively, you can define the types in your tsconfig.ts:

{
	"compilerOptions": {
		"types": ["vite-plugin-bookmarklet/client"]
	}
}

License ©️

This work is licensed under The MIT License.