CRT
4bc8c6a933
- 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
67 lines
3 KiB
Markdown
67 lines
3 KiB
Markdown
# create-waybetter
|
|
|
|
```sh
|
|
npm create waybetter
|
|
```
|
|
|
|
Scaffolds something for [wayBetter](https://waybetter.fyi), 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
|
|
|
|
```sh
|
|
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
|
|
|
|
```sh
|
|
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
|
|
|
|
```sh
|
|
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](./LICENSE).
|