asciish provides build-time shortcode-based emoticon injection for webpages and runtime unicode helpers.
npm i asciish
(NOTE: this feature is Vite/Rollup-only at the moment)
asciish provides a small plugin that provides shortcode-based emoticon injection (similar to how :fire: resolves to 🔥 on some platforms.)
Add the plugin to your config:
// vite.config.js
import { defineConfig } from "vite";
import { asciishPlugin } from "asciish";
export default defineConfig({
plugins: [
// other plugins...
asciishPlugin(),
],
// ...
});Then, use the &<shortcode>; syntax in your source files:
<!-- src/index.html -->
<!-- ... -->
<body>
<p>Today is a good day ⌣</p>
</body>
<!-- ... -->This will compile to
<!-- dist/index.html -->
<!-- ... -->
<body>
<p>Today is a good day :)</p>
</body>
<!-- ... -->you can pass in options to the plugin to customize its behavior:
// vite.config.js
import { defineConfig } from "vite";
import { asciishPlugin } from "asciish";
export default defineConfig({
plugins: [
// other plugins...
asciishPlugin({
parser: {
emotes: false,
// ...
},
}),
],
// ...
});parser: supports enabling/disabling certain regexp parsers at build-time:
emotes: enables/disables emote parsing (default:true)punctuation: enables/disables pretty punctuation parsing (default:true)shortcodes: enables/disables emoji shortcode (see ikatyang's emoji cheat sheet) parsing (default:true)unicode: enables/disables unicode parsing (default:true)
asciish provides multiple runtime helper functions for working with the Unicode standard.
You can include the runtime object in your code to access runtime helpers:
// src/index.svelte
<script>
import {runtime} from 'asciish';
</script>
<p>{runtime.fanciful.toMono("Hello there!")}</p> // <p>𝕳𝖊𝖑𝖑𝖔 𝖙𝖍𝖊𝖗𝖊!</p>
<p>🧑🌾 = {runtime.emoji.split("🧑🌾").join(" + ")}</p> // <p>🧑🌾 = 🧑 + 🌾</p>- Plugin options (file extensions, preferred shortcode syntax, etc.)
- Support for Webpack via custom loader
- Support build-time randomized emote injection
- Ignoring shortcode given some context (e.g.
⌣in a code block)