@react-gnome/vite-plugin

Generic Vite build settings for react-gnome apps running under GJS. Everything here is Tamagui-agnostic — any consumer that bundles React + the @react-gnome packages for GJS needs these. Tamagui consumers layer @multiplatform.one/vite-plugin-gnome (the fragile Tamagui bundle-patch set + @tamagui/* aliases) on top.

Exports

| export | what it is | | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | gnomeAliases(packagesDir) | resolve.alias entries for consumers inside the react-gnome workspace (bare-name replacements, renderer aliased to its src entry when present, dist otherwise) | | gnomeLinkedAliases(modulesDir)| resolve.alias entries for external consumers — pnpm link: or registry installs (exact-match regexes, absolute paths through the consumer's node_modules/@react-gnome; renderer src when present, dist otherwise — registry tarballs ship no src) | | gnomeDedupe | resolve.dedupe list (react, react-dom) — one React instance across link: boundaries | | gnomeConditions | resolve.conditions with react-native first so .native.js entries win over web .mjs | | gnomeExtensions | Metro-style resolve.extensions preferring .native.* sources | | gnomeDefine(nodeEnv) | define substitutions for globals GJS doesn't expose (process.env, performance.*, global) |

Usage

// vite.config.ts (consumer inside the react-gnome workspace)
import { gnomeAliases, gnomeConditions, gnomeDefine } from "@react-gnome/vite-plugin";
import { resolve } from "node:path";

export default defineConfig({
  resolve: {
    conditions: [...gnomeConditions],
    alias: [...gnomeAliases(resolve(import.meta.dirname, ".."))],
  },
  define: gnomeDefine("production"),
});

// vite.config.ts (external app — @react-gnome via pnpm link: OR a registry install)
import {
  gnomeConditions,
  gnomeDedupe,
  gnomeDefine,
  gnomeExtensions,
  gnomeLinkedAliases,
} from "@react-gnome/vite-plugin";
import { resolve } from "node:path";

export default defineConfig({
  resolve: {
    conditions: [...gnomeConditions],
    alias: [...gnomeLinkedAliases(resolve(import.meta.dirname, "node_modules/@react-gnome"))],
    dedupe: [...gnomeDedupe],
    extensions: [...gnomeExtensions],
  },
  define: gnomeDefine("production"),
});

Polyfills-first contract

GJS has no DOM. Every GJS entry point MUST install the browser-API polyfills before any library module initializes:

// entry.tsx — FIRST import, before everything else
import "@react-gnome/react-native/polyfills";

JS imports are hoisted, so first-import order is what guarantees the globals exist when downstream module initializers run. The packaged module installs (conditionally — your own pre-installed globals win):

• addEventListener / removeEventListener / dispatchEvent
• window (aliased to globalThis), location (a file:// shape)
• screen + innerWidth/innerHeight/devicePixelRatio — seeded from Dimensions (which falls back to a sane desktop viewport pre-realize)
• a document stub whose documentElement.clientWidth/Height are LIVE getters over Dimensions (react-native-web sizes its window from them), plus querySelectorAll for router SSR-CSS probes
• a REAL matchMedia (evaluates min/max-width/height against the GTK window size, re-fires on resize), HTMLElement instanceof bridge, IntersectionObserver, navigator, performance
• URL + full URLSearchParams (router path/query parsing), Blob/FileList, requestAnimationFrame, __DEV__

Code-splitting note: when using Rollup manualChunks, keep the polyfills module in a chunk the entry imports FIRST — inlined at the end of an entry chunk it runs AFTER the vendor chunks, and Tamagui's vendored react-native-web locks in a 0×0 viewport at chunk init.

gnomeDefine complements (does not replace) those runtime polyfills with compile-time substitutions.