CRT
9ac8ab8767
The app skeleton's src/shell/main.tsx calls createShell with the site (pages, account rules, search, address chips, a Home link, a Plugins section) and src/shell/Panel.tsx (the app's own tab: the plugins, switched on or off live); app.css themes it with the --wb-c-* tokens. build.mjs bundles the shell with waybetter/build (JSX, CSS into dist/shell.css) and writes bootScript() as boot.js. desktop.rs keeps the frame's titlebar (custom_titlebar: true) and forwards shortcuts and link drags (BridgeOptions::ALL); the shell capability grants the frame's window calls. Native features the skeleton does not wire up (workspaces, sync, developer mode, plugin commands) are off in the site. Dependencies: react, react-dom, dockview, waybetter ^0.4.0. Tests: sources import only published subpaths (patterns included), main.tsx uses createShell, the shell capability has the resize permission, and the skeleton typechecks with the React types. |
||
|---|---|---|
| .. | ||
| bin | ||
| src | ||
| tests | ||
| LICENSE | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
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 nativeSiteSpec(hosts, runtime global, account rules);src/site.ts: the pageSiteAdapter(plugin API settings, account reader, link rules);src-tauri/capabilities/:shell,tab-chromeandsite-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.