emoji-styles-web 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 emoji-styles contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,43 @@
+# emoji-styles-web
+
+A framework-independent Web Component, SSR renderer, and reversible DOM text
+transformer powered by Emoji Styles.
+
+## Install
+
+```bash
+npm install emoji-styles-web
+```
+
+## Web Component
+
+```ts
+import { defineStyledEmoji } from "emoji-styles-web";
+import "emoji-styles-web/styles.css";
+
+defineStyledEmoji();
+```
+
+```html
+<styled-emoji
+  emoji="🚀"
+  provider="fluent-3d"
+  fallbacks="twemoji"
+  native-fallback="false"
+  label="Launch project"
+  size="32"
+></styled-emoji>
+```
+
+Registration is explicit and safe to import during SSR. The same package
+exports `renderEmojiToHTML`, `transformEmojiText`, semantic-theme
+configuration, and provider registration.
+
+See the [universal web guide](https://github.com/Blancochuy/emoji-styles/blob/master/docs/WEB.md)
+for Vue, Svelte, Angular, Astro, SSR, CSP, and hydration examples.
+
+## License
+
+Source code is MIT licensed. Provider artwork may use separate licenses; review
+the project's
+[third-party notices](https://github.com/Blancochuy/emoji-styles/blob/master/docs/THIRD_PARTY_NOTICES.md).

package/dist/index.d.ts

@@ -0,0 +1,92 @@
+import { EmojiStylesConfig, EmojiAssetProvider, EmojiTheme, EmojiProviderRef, EmojiSize, ResolvedEmojiAsset, EmojiResolution, ResolvedEmojiToken } from 'emoji-styles';
+
+interface EmojiStylesWebConfig extends EmojiStylesConfig {
+    providers?: Readonly<Record<string, EmojiAssetProvider>>;
+    themes?: Readonly<Record<string, EmojiTheme>>;
+    defaultTheme?: string | EmojiTheme;
+}
+declare function registerEmojiProvider(provider: EmojiAssetProvider): void;
+declare function registerEmojiTheme(theme: EmojiTheme): void;
+declare function configureEmojiStyles(config: EmojiStylesWebConfig): void;
+declare function getEmojiStylesConfig(): Readonly<EmojiStylesConfig>;
+declare function getRegisteredProvider(id: string): EmojiAssetProvider | undefined;
+declare function getRegisteredTheme(id?: string): EmojiTheme | undefined;
+declare function getRegisteredProviders(): Readonly<Record<string, EmojiAssetProvider>>;
+
+interface RenderEmojiOptions {
+    provider?: EmojiProviderRef | string;
+    fallbacks?: readonly (EmojiProviderRef | string)[];
+    label?: string;
+    decorative?: boolean;
+    size?: EmojiSize;
+    className?: string;
+    loading?: "lazy" | "eager";
+    nativeFallback?: boolean;
+    /** Render a hydratable Web Component host instead of a neutral span. */
+    element?: "span" | "styled-emoji";
+}
+interface RenderEmojiTokenOptions extends Omit<RenderEmojiOptions, "label" | "decorative"> {
+    locale?: string;
+}
+interface EmojiPreload {
+    href: string;
+    as: "image";
+    type: string;
+}
+interface RenderedEmojiHTML {
+    html: string;
+    emoji: string;
+    label: string;
+    decorative: boolean;
+    asset: ResolvedEmojiAsset | null;
+    resolution: EmojiResolution | null;
+    tokenResolution?: ResolvedEmojiToken;
+    preload?: EmojiPreload;
+    fallbackUrls: readonly string[];
+    nativeFallback: boolean;
+}
+declare function renderEmojiToHTMLResult(emoji: string, options?: RenderEmojiOptions): Promise<RenderedEmojiHTML>;
+declare function renderEmojiToHTML(emoji: string, options?: RenderEmojiOptions): Promise<string>;
+declare function renderEmojiTokenToHTMLResult(token: string, theme: EmojiTheme, options?: RenderEmojiTokenOptions): Promise<RenderedEmojiHTML>;
+declare function renderEmojiTokenToHTML(token: string, theme: EmojiTheme, options?: RenderEmojiTokenOptions): Promise<string>;
+declare function renderPreloadLink(preload: EmojiPreload): string;
+
+declare const HTMLElementBase: typeof HTMLElement;
+interface StyledEmojiResolvedDetail {
+    emoji: string;
+    providerId: string | null;
+    fallbackUsed: boolean;
+    token?: string;
+}
+declare class StyledEmojiElement extends HTMLElementBase {
+    #private;
+    static get observedAttributes(): string[];
+    providerObject?: EmojiAssetProvider;
+    themeObject?: EmojiTheme;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    render(): Promise<void>;
+    private commit;
+    private handleImageError;
+}
+declare function defineStyledEmoji(tagName?: string): void;
+
+interface TransformEmojiTextConfig {
+    provider?: EmojiProviderRef | string;
+    fallbacks?: readonly (EmojiProviderRef | string)[];
+    nativeFallback?: boolean;
+    size?: number | string;
+    decorative?: boolean;
+    include?: (textNode: Text) => boolean;
+    skipTags?: readonly string[];
+}
+interface EmojiTransformMetrics {
+    scannedTextNodes: number;
+    transformedTextNodes: number;
+    emojiCount: number;
+    durationMs: number;
+}
+declare function transformEmojiText(root: Node, config?: TransformEmojiTextConfig): EmojiTransformMetrics;
+declare function undoEmojiTextTransform(root: ParentNode): number;
+
+export { type EmojiPreload, type EmojiStylesWebConfig, type EmojiTransformMetrics, type RenderEmojiOptions, type RenderEmojiTokenOptions, type RenderedEmojiHTML, StyledEmojiElement, type StyledEmojiResolvedDetail, type TransformEmojiTextConfig, configureEmojiStyles, defineStyledEmoji, getEmojiStylesConfig, getRegisteredProvider, getRegisteredProviders, getRegisteredTheme, registerEmojiProvider, registerEmojiTheme, renderEmojiToHTML, renderEmojiToHTMLResult, renderEmojiTokenToHTML, renderEmojiTokenToHTMLResult, renderPreloadLink, transformEmojiText, undoEmojiTextTransform };

package/dist/index.js

@@ -0,0 +1,441 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateWrapper = (obj, member, setter, getter) => ({
+  set _(value) {
+    __privateSet(obj, member, value, setter);
+  },
+  get _() {
+    return __privateGet(obj, member, getter);
+  }
+});
+
+// src/registry.ts
+var providers = /* @__PURE__ */ new Map();
+var themes = /* @__PURE__ */ new Map();
+var defaultTheme;
+var runtimeConfig = {};
+function registerEmojiProvider(provider) {
+  providers.set(provider.id, provider);
+}
+function registerEmojiTheme(theme) {
+  themes.set(theme.id, theme);
+}
+function configureEmojiStyles(config) {
+  for (const provider of Object.values(config.providers ?? {})) registerEmojiProvider(provider);
+  for (const theme of Object.values(config.themes ?? {})) registerEmojiTheme(theme);
+  if (config.defaultTheme !== void 0) defaultTheme = config.defaultTheme;
+  runtimeConfig = {
+    provider: config.provider ?? runtimeConfig.provider,
+    fallbacks: config.fallbacks ?? runtimeConfig.fallbacks,
+    nativeFallback: config.nativeFallback ?? runtimeConfig.nativeFallback
+  };
+}
+function getEmojiStylesConfig() {
+  return runtimeConfig;
+}
+function getRegisteredProvider(id) {
+  return providers.get(id);
+}
+function getRegisteredTheme(id) {
+  const ref = id ?? defaultTheme;
+  if (!ref) return void 0;
+  return typeof ref === "string" ? themes.get(ref) : ref;
+}
+function getRegisteredProviders() {
+  return Object.fromEntries(providers);
+}
+
+// src/ssr.ts
+import {
+  SIZE_MAP,
+  getFallbackChain,
+  publicProviders,
+  resolveEmoji,
+  resolveEmojiToken
+} from "emoji-styles";
+function escapeAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeText(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function resolveRef(ref) {
+  return typeof ref === "string" ? getRegisteredProvider(ref) ?? ref : ref;
+}
+function providerId(ref) {
+  return typeof ref === "string" ? ref : ref.id;
+}
+function includesNative(refs) {
+  return refs.some((ref) => providerId(ref) === publicProviders.native.id);
+}
+function mimeType(format) {
+  return format === "svg" ? "image/svg+xml" : `image/${format}`;
+}
+function numericSize(size = "md") {
+  return typeof size === "number" ? size : SIZE_MAP[size] ?? SIZE_MAP.md;
+}
+function renderMarkup(emoji, label, decorative, asset, options, fallbackUrls = [], nativeFallback = true, tokenHost) {
+  const size = numericSize(options.size);
+  const classes = ["styled-emoji", options.className].filter(Boolean).join(" ");
+  const tagName = options.element ?? "span";
+  const requestedProviderId = typeof options.provider === "string" ? options.provider : options.provider?.id;
+  const componentAttributes = tagName === "styled-emoji" ? [
+    `emoji="${escapeAttribute(emoji)}"`,
+    tokenHost ? `token="${escapeAttribute(tokenHost.token)}"` : "",
+    tokenHost ? `theme="${escapeAttribute(tokenHost.themeId)}"` : "",
+    requestedProviderId ? `provider="${escapeAttribute(requestedProviderId)}"` : "",
+    options.label ? `label="${escapeAttribute(options.label)}"` : "",
+    `size="${size}"`,
+    options.decorative ? "decorative" : "",
+    `loading="${options.loading ?? "lazy"}"`,
+    options.fallbacks?.length ? `fallbacks="${escapeAttribute(options.fallbacks.map(providerId).join(","))}"` : "",
+    options.nativeFallback === false ? `native-fallback="false"` : ""
+  ].filter(Boolean) : [];
+  const common = [
+    `class="${escapeAttribute(classes)}"`,
+    `data-emoji="${escapeAttribute(emoji)}"`,
+    `data-size="${size}"`,
+    asset ? `data-provider="${escapeAttribute(asset.providerId)}"` : `data-provider="${nativeFallback ? "native" : "unresolved"}"`,
+    decorative || !asset && !nativeFallback ? `aria-hidden="true"` : `role="img" aria-label="${escapeAttribute(label)}"`,
+    ...componentAttributes
+  ].join(" ");
+  const nativeGlyph = nativeFallback ? `<svg class="styled-emoji__native-glyph" width="${size}" height="${size}" viewBox="0 0 100 100" aria-hidden="true" focusable="false"><text class="styled-emoji__native-text" x="50" y="50" text-anchor="middle" dominant-baseline="central" font-size="88">${escapeText(emoji)}</text></svg>` : "";
+  const native = `<span class="styled-emoji__native"${asset || !nativeFallback ? " hidden" : ""} aria-hidden="true">${nativeGlyph}</span>`;
+  if (!asset) return `<${tagName} ${common}>${native}</${tagName}>`;
+  const remainingFallbacks = fallbackUrls.filter((url) => url !== asset.url);
+  const fallbackAttribute = remainingFallbacks.length ? ` data-fallbacks="${escapeAttribute(JSON.stringify(remainingFallbacks))}"` : "";
+  const alt = decorative ? "" : label;
+  return `<${tagName} ${common}><img class="styled-emoji__image" src="${escapeAttribute(asset.url)}" alt="${escapeAttribute(alt)}" width="${size}" height="${size}" loading="${options.loading ?? "lazy"}" decoding="async" draggable="false"${fallbackAttribute}>${native}</${tagName}>`;
+}
+async function renderEmojiToHTMLResult(emoji, options = {}) {
+  const config = getEmojiStylesConfig();
+  const provider = resolveRef(options.provider ?? config.provider ?? publicProviders.twemoji);
+  const configuredFallbacks = options.fallbacks ?? config.fallbacks ?? [];
+  const nativeFallbackSetting = options.nativeFallback ?? config.nativeFallback ?? true;
+  const nativeFallback = providerId(provider) === publicProviders.native.id || includesNative(configuredFallbacks) || nativeFallbackSetting;
+  const requestedFallbacks = nativeFallback && !includesNative(configuredFallbacks) ? [...configuredFallbacks, publicProviders.native] : configuredFallbacks;
+  const fallbacks = requestedFallbacks.map(resolveRef);
+  const resolution = await resolveEmoji(emoji, { provider, fallbacks });
+  const label = options.label ?? resolution.metadata.label;
+  const fallbackUrls = getFallbackChain(emoji, provider, fallbacks);
+  const asset = resolution.selected;
+  return {
+    html: renderMarkup(emoji, label, options.decorative ?? false, asset, options, fallbackUrls, nativeFallback),
+    emoji,
+    label,
+    decorative: options.decorative ?? false,
+    asset,
+    resolution,
+    preload: asset ? { href: asset.url, as: "image", type: mimeType(asset.format) } : void 0,
+    fallbackUrls,
+    nativeFallback
+  };
+}
+async function renderEmojiToHTML(emoji, options = {}) {
+  return (await renderEmojiToHTMLResult(emoji, options)).html;
+}
+async function renderEmojiTokenToHTMLResult(token, theme, options = {}) {
+  const config = getEmojiStylesConfig();
+  const providerRef = options.provider ?? config.provider;
+  const provider = providerRef ? resolveRef(providerRef) : void 0;
+  const configuredFallbacks = options.fallbacks ?? config.fallbacks ?? theme.fallbacks ?? [];
+  const nativeFallback = includesNative(configuredFallbacks) || (options.nativeFallback ?? config.nativeFallback ?? theme.nativeFallback ?? true);
+  const fallbacks = configuredFallbacks.map(resolveRef);
+  const tokenResolution = await resolveEmojiToken(token, theme, {
+    provider,
+    fallbacks,
+    nativeFallback,
+    locale: options.locale,
+    providers: getRegisteredProviders()
+  });
+  const asset = tokenResolution.asset;
+  const definition = theme.tokens[token];
+  const tokenProviderRef = options.provider ?? definition?.provider ?? theme.defaultProvider ?? publicProviders.twemoji;
+  const tokenProvider = resolveRef(tokenProviderRef);
+  const tokenFallbacks = nativeFallback && !includesNative(configuredFallbacks) ? [...configuredFallbacks, publicProviders.native].map(resolveRef) : configuredFallbacks.map(resolveRef);
+  const fallbackUrls = tokenResolution.source === "emoji-provider" ? getFallbackChain(tokenResolution.emoji, tokenProvider, tokenFallbacks) : [];
+  return {
+    html: renderMarkup(
+      tokenResolution.emoji,
+      tokenResolution.label,
+      tokenResolution.decorative,
+      asset,
+      options,
+      fallbackUrls,
+      nativeFallback,
+      { token, themeId: theme.id }
+    ),
+    emoji: tokenResolution.emoji,
+    label: tokenResolution.label,
+    decorative: tokenResolution.decorative,
+    asset,
+    resolution: tokenResolution.emojiResolution,
+    tokenResolution,
+    preload: asset ? { href: asset.url, as: "image", type: mimeType(asset.format) } : void 0,
+    fallbackUrls,
+    nativeFallback
+  };
+}
+async function renderEmojiTokenToHTML(token, theme, options = {}) {
+  return (await renderEmojiTokenToHTMLResult(token, theme, options)).html;
+}
+function renderPreloadLink(preload) {
+  return `<link rel="preload" href="${escapeAttribute(preload.href)}" as="${preload.as}" type="${escapeAttribute(preload.type)}">`;
+}
+
+// src/component.ts
+import { SIZE_MAP as SIZE_MAP2 } from "emoji-styles";
+var HTMLElementBase = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+function parseSize(value) {
+  if (!value) return void 0;
+  if (/^\d+$/.test(value)) return Number(value);
+  return value in SIZE_MAP2 ? value : void 0;
+}
+function createNativeEmoji(emoji, size) {
+  const native = document.createElement("span");
+  native.className = "styled-emoji__native";
+  native.setAttribute("aria-hidden", "true");
+  if (!emoji) return native;
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.classList.add("styled-emoji__native-glyph");
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  svg.setAttribute("viewBox", "0 0 100 100");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
+  text.classList.add("styled-emoji__native-text");
+  text.setAttribute("x", "50");
+  text.setAttribute("y", "50");
+  text.setAttribute("text-anchor", "middle");
+  text.setAttribute("dominant-baseline", "central");
+  text.setAttribute("font-size", "88");
+  text.textContent = emoji;
+  svg.append(text);
+  native.append(svg);
+  return native;
+}
+var _renderVersion, _fallbackIndex, _fallbackUrls;
+var StyledEmojiElement = class extends HTMLElementBase {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _renderVersion, 0);
+    __privateAdd(this, _fallbackIndex, 0);
+    __privateAdd(this, _fallbackUrls, []);
+  }
+  static get observedAttributes() {
+    return ["emoji", "token", "theme", "provider", "fallbacks", "native-fallback", "label", "size", "decorative", "loading"];
+  }
+  connectedCallback() {
+    this.classList.add("styled-emoji");
+    void this.render();
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) void this.render();
+  }
+  async render() {
+    const version = ++__privateWrapper(this, _renderVersion)._;
+    const token = this.getAttribute("token") ?? void 0;
+    const emoji = this.getAttribute("emoji") ?? "";
+    const provider = this.providerObject ?? this.getAttribute("provider") ?? void 0;
+    const fallbacks = this.getAttribute("fallbacks")?.split(",").map((value) => value.trim()).filter(Boolean);
+    const nativeFallback = this.hasAttribute("native-fallback") ? this.getAttribute("native-fallback") !== "false" : void 0;
+    const size = parseSize(this.getAttribute("size"));
+    try {
+      let result;
+      if (token) {
+        const theme = this.themeObject ?? getRegisteredTheme(this.getAttribute("theme") ?? void 0);
+        if (!theme) throw new Error(`No registered theme for token ${token}`);
+        result = await renderEmojiTokenToHTMLResult(token, theme, { provider, fallbacks, nativeFallback, size });
+      } else {
+        if (!emoji) throw new Error("styled-emoji requires an emoji or token attribute");
+        result = await renderEmojiToHTMLResult(emoji, {
+          provider,
+          fallbacks,
+          nativeFallback,
+          label: this.getAttribute("label") ?? void 0,
+          decorative: this.hasAttribute("decorative"),
+          size,
+          loading: this.getAttribute("loading") === "eager" ? "eager" : "lazy"
+        });
+      }
+      if (version !== __privateGet(this, _renderVersion)) return;
+      this.commit(result, token);
+    } catch (error) {
+      if (version !== __privateGet(this, _renderVersion)) return;
+      this.replaceChildren(document.createTextNode(emoji));
+      this.dispatchEvent(new CustomEvent("emoji-error", {
+        detail: { emoji, token, error: error instanceof Error ? error.message : String(error) },
+        bubbles: true
+      }));
+    }
+  }
+  commit(result, token) {
+    const requestedSize = parseSize(this.getAttribute("size")) ?? "md";
+    const size = typeof requestedSize === "number" ? requestedSize : SIZE_MAP2[requestedSize];
+    this.setAttribute("data-provider", result.asset?.providerId ?? (result.nativeFallback ? "native" : "unresolved"));
+    this.setAttribute("data-resolved-emoji", result.emoji);
+    if (result.decorative || !result.asset && !result.nativeFallback) {
+      this.setAttribute("aria-hidden", "true");
+      this.removeAttribute("role");
+      this.removeAttribute("aria-label");
+    } else {
+      this.removeAttribute("aria-hidden");
+      this.setAttribute("role", "img");
+      this.setAttribute("aria-label", result.label);
+    }
+    const native = createNativeEmoji(result.nativeFallback ? result.emoji : "", size);
+    __privateSet(this, _fallbackIndex, 0);
+    __privateSet(this, _fallbackUrls, result.fallbackUrls.filter((url) => url !== result.asset?.url));
+    if (!result.asset && result.nativeFallback) {
+      this.replaceChildren(native);
+    } else if (!result.asset) {
+      this.replaceChildren();
+    } else {
+      const existing = this.querySelector("img.styled-emoji__image");
+      const image = existing?.getAttribute("src") === result.asset.url ? existing : document.createElement("img");
+      image.className = "styled-emoji__image";
+      image.src = result.asset.url;
+      image.alt = result.decorative ? "" : result.label;
+      image.width = size;
+      image.height = size;
+      image.loading = this.getAttribute("loading") === "eager" ? "eager" : "lazy";
+      image.decoding = "async";
+      image.draggable = false;
+      image.onerror = () => this.handleImageError(image, native, result, token);
+      native.hidden = true;
+      this.replaceChildren(image, native);
+    }
+    const detail = {
+      emoji: result.emoji,
+      providerId: result.asset?.providerId ?? null,
+      fallbackUsed: result.resolution?.fallbackUsed ?? false,
+      token
+    };
+    this.dispatchEvent(new CustomEvent("emoji-resolved", { detail, bubbles: true }));
+  }
+  handleImageError(image, native, result, token) {
+    const next = __privateGet(this, _fallbackUrls)[__privateWrapper(this, _fallbackIndex)._++];
+    if (next) {
+      image.src = next;
+      this.dispatchEvent(new CustomEvent("emoji-fallback", {
+        detail: { emoji: result.emoji, token, url: next, index: __privateGet(this, _fallbackIndex) },
+        bubbles: true
+      }));
+      return;
+    }
+    image.hidden = true;
+    if (result.nativeFallback) {
+      native.hidden = false;
+      this.setAttribute("data-provider", "native");
+    } else {
+      this.replaceChildren();
+      this.setAttribute("data-provider", "unresolved");
+    }
+    this.dispatchEvent(new CustomEvent("emoji-fallback", {
+      detail: { emoji: result.emoji, token, url: null, index: __privateGet(this, _fallbackIndex), native: result.nativeFallback },
+      bubbles: true
+    }));
+  }
+};
+_renderVersion = new WeakMap();
+_fallbackIndex = new WeakMap();
+_fallbackUrls = new WeakMap();
+function defineStyledEmoji(tagName = "styled-emoji") {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get(tagName)) customElements.define(tagName, StyledEmojiElement);
+}
+
+// src/transform.ts
+import { tokenizeEmojiText } from "emoji-styles";
+var DEFAULT_SKIP_TAGS = ["SCRIPT", "STYLE", "TEXTAREA", "INPUT", "CODE", "PRE", "NOSCRIPT"];
+function rootDocument(root) {
+  if (root.nodeType === 9) return root;
+  const document2 = root.ownerDocument;
+  if (!document2) throw new Error("transformEmojiText requires a DOM root with an ownerDocument");
+  return document2;
+}
+function shouldSkip(node, skipped) {
+  let current = node.parentElement;
+  while (current) {
+    if (skipped.has(current.tagName)) return true;
+    const contentEditable = current.getAttribute("contenteditable");
+    if (current.isContentEditable || contentEditable !== null && contentEditable.toLowerCase() !== "false") return true;
+    if (current.matches("styled-emoji, [data-emoji-styles-transformed='true']")) return true;
+    current = current.parentElement;
+  }
+  return false;
+}
+function transformEmojiText(root, config = {}) {
+  const startedAt = typeof performance === "undefined" ? Date.now() : performance.now();
+  const document2 = rootDocument(root);
+  const skipped = new Set(config.skipTags ?? DEFAULT_SKIP_TAGS);
+  const walker = document2.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  const nodes = [];
+  let current;
+  while (current = walker.nextNode()) nodes.push(current);
+  let transformedTextNodes = 0;
+  let emojiCount = 0;
+  for (const node of nodes) {
+    if (!node.parentNode || !node.data || shouldSkip(node, skipped) || config.include?.(node) === false) continue;
+    const tokens = tokenizeEmojiText(node.data);
+    if (!tokens.some((token) => token.type === "emoji")) continue;
+    const fragment = document2.createDocumentFragment();
+    for (const token of tokens) {
+      if (token.type === "text") {
+        fragment.append(document2.createTextNode(token.value));
+        continue;
+      }
+      const element = document2.createElement("styled-emoji");
+      element.setAttribute("emoji", token.value);
+      element.setAttribute("data-emoji-styles-transformed", "true");
+      if (config.provider) {
+        element.setAttribute("provider", typeof config.provider === "string" ? config.provider : config.provider.id);
+      }
+      if (config.fallbacks?.length) {
+        element.setAttribute("fallbacks", config.fallbacks.map((fallback) => typeof fallback === "string" ? fallback : fallback.id).join(","));
+      }
+      if (config.nativeFallback === false) element.setAttribute("native-fallback", "false");
+      if (config.size !== void 0) element.setAttribute("size", String(config.size));
+      if (config.decorative) element.setAttribute("decorative", "");
+      fragment.append(element);
+      emojiCount++;
+    }
+    node.parentNode.replaceChild(fragment, node);
+    transformedTextNodes++;
+  }
+  const endedAt = typeof performance === "undefined" ? Date.now() : performance.now();
+  return { scannedTextNodes: nodes.length, transformedTextNodes, emojiCount, durationMs: endedAt - startedAt };
+}
+function undoEmojiTextTransform(root) {
+  const elements = Array.from(root.querySelectorAll("styled-emoji[data-emoji-styles-transformed='true']"));
+  for (const element of elements) {
+    element.replaceWith(element.ownerDocument.createTextNode(element.getAttribute("emoji") ?? ""));
+  }
+  root.normalize();
+  return elements.length;
+}
+export {
+  StyledEmojiElement,
+  configureEmojiStyles,
+  defineStyledEmoji,
+  getEmojiStylesConfig,
+  getRegisteredProvider,
+  getRegisteredProviders,
+  getRegisteredTheme,
+  registerEmojiProvider,
+  registerEmojiTheme,
+  renderEmojiToHTML,
+  renderEmojiToHTMLResult,
+  renderEmojiTokenToHTML,
+  renderEmojiTokenToHTMLResult,
+  renderPreloadLink,
+  transformEmojiText,
+  undoEmojiTextTransform
+};

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "emoji-styles-web",
+  "version": "0.1.0",
+  "description": "Framework-independent Web Component, SSR renderer, and DOM transformer for Emoji Styles",
+  "sideEffects": [
+    "./styles.css"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "engines": {
+    "node": ">=18.17"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "emoji-styles": "0.1.0"
+  },
+  "devDependencies": {
+    "jsdom": "25.0.1",
+    "tsup": "^8.0.0",
+    "typescript": "^5.5.0",
+    "vitest": "^2.1.9"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Blancochuy/emoji-styles.git",
+    "directory": "packages/web"
+  },
+  "bugs": {
+    "url": "https://github.com/Blancochuy/emoji-styles/issues"
+  },
+  "homepage": "https://emoji-styles.space",
+  "keywords": [
+    "emoji",
+    "web-component",
+    "ssr",
+    "vue",
+    "svelte",
+    "angular",
+    "astro"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean --external emoji-styles",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/styles.css

@@ -0,0 +1,45 @@
+.styled-emoji {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--styled-emoji-size, fit-content);
+  height: var(--styled-emoji-size, fit-content);
+  vertical-align: -0.125em;
+  line-height: 1;
+}
+
+.styled-emoji__image {
+  display: block;
+  object-fit: contain;
+}
+
+.styled-emoji__image[src*="/SerenityOS/serenity@"][src*="/Base/res/emoji/"] {
+  image-rendering: pixelated;
+}
+
+.styled-emoji__native[hidden],
+.styled-emoji__image[hidden] {
+  display: none;
+}
+
+.styled-emoji__native {
+  display: block;
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+}
+
+.styled-emoji__native-glyph {
+  display: block;
+  overflow: visible;
+}
+
+.styled-emoji__native-text {
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .styled-emoji,
+  .styled-emoji__image {
+    animation: none !important;
+    transition: none !important;
+  }
+}