CRT 67851cd8f5 create-waybetter: npm create waybetter scaffolds plugins (JS/TS), themes and whole apps

- plugin: *.plugin.js with the store header and start/stop on api.scope, storage, observe,
  onKey, the UI kit (toast with action, ui.h settings dialog) and api.theme/--wb-* vars;
  --ts makes a TypeScript project typed by the waybetter package (build keeps the header first)
- theme: JSON with "$schema" -> theme.schema.json, palette derived like themeFromColors,
  font roles (family, tweet), presets
- app: Tauri 2 + waybetter-host + runtime + shell models: SiteSpec, SiteAdapter, shell/tab-chrome/
  site-tab capabilities, tabs_sync, plugin store, a site-only command; presets for youtube.com,
  kick.com, twitch.tv with placeholder selectors; host crate via submodule, path or git
- tests generate into temp dirs: headers via parse_meta (new plugin_meta example), plugin code
  against createCorePluginApi's members, themes against the schema, app TS with tsc against the
  built package, app Rust with cargo metadata/check/test
- wired into bun run check (typecheck incl. checkJs, build:packages, test:create) and pack:check

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

2026-09-28 23:17:32 +07:00

3 KiB

Raw Blame History

create-waybetter

npm create waybetter

Scaffolds something for wayBetter, the framework behind wayBetter for X: a plugin, a theme, or a whole new wayBetter app for another site. It asks what it needs when run in a terminal; every answer is also a flag. No dependencies, Node 18.3+.

Plugin

npm create waybetter plugin -- --name "Hide Trends"
npm create waybetter plugin -- --name "Word Badges" --ts          # TypeScript project

One *.plugin.js file with the header the plugin store reads (@name, @description, @version, @author) and a class with start() / stop(). The example uses the real plugin API: api.scope() for cleanup, api.storage(), scope.observe(), scope.onKey(), the UI kit (scope.ui.toast with an action, a settings ui.dialog built with ui.h) and the theme API (api.theme.current(), --wb-* CSS variables). --ts makes a small TypeScript project typed by the waybetter package; npm run build writes the loadable dist/<name>.plugin.js with the header first. --app any targets another wayBetter app (core API only; wayBetter for X adds api.tweet, api.account, api.users).

Install: wayBetter → Plugins → Open folder, copy the file in, Rescan, turn it on.

Theme

npm create waybetter theme -- --name "Midnight Mint" --accent "#3ddc97" --font "Geist, system-ui"

A theme JSON with "$schema": "https://unpkg.com/waybetter/theme.schema.json" (editor completion and checks), a full palette derived from --bg, --text and --accent the way the runtime derives missing roles, and the font roles (font.family for the interface, font.tweet for post text). Presets: midnight, paper, dusk. Import it in wayBetter → Appearance → Import.

App

npm create waybetter app -- --site kick.com
npm create waybetter app -- --site youtube.com --name "wayBetter for YouTube"

A wayBetter app skeleton, the same system as wayBetter for X: a Tauri 2 window with a trusted local shell and one native child webview per site tab (waybetter-host), the page runtime and shell models from the waybetter package, and the site adapter in its three parts:

src-tauri/src/site.rs: the native SiteSpec (hosts, runtime global, account rules);
src/site.ts: the page SiteAdapter (plugin API settings, account reader, link rules);
src-tauri/capabilities/: shell, tab-chrome and site-tab, keyed by webview label.

Presets for youtube.com, kick.com and twitch.tv (any host works); every selector and handle rule is a marked PLACEHOLDER to check against the live site. The host crate comes from a git submodule at waybetter/ (default), a local path (--host-source path --host-path <dir>) or git (--host-source git).

Options

npm create waybetter -- --help lists every flag. --yes takes defaults for anything not given, --dry-run prints the files, --force writes into a non-empty directory.

License

GPL-3.0-or-later. See LICENSE.

3 KiB Raw Blame History