Adrift

Template react app with batteries included 🔋

• Vite
• Vitest (testing for Vite)
• Playwright (testing end-to-end)
• Typescript
• TanStack Store
• TanStack Router
• StyleX
• Custom (hackable) build script
• Custom utils and helper functions
  • Global log functions with more functionality than console.log
  • Global feature flag function

Checkout Adrift Native to run Adrift apps natively on Windows, Mac, and Linux.

Getting started

Quick start, get up an running in one command:

git clone https://github.com/hmerritt/adrift && cd adrift && yarn && yarn dev

Clone this repo and run one of the following scripts:

Available scripts (run using yarn <script> or npm run <script>):

• dev - starts Vite dev server for local development
• test - runs all test files
• preview - similar to dev, but uses production mode to simulate the final build
• build - builds the project to dist directory

Features

• Custom functions
  • Logs
  • Feature flag
• Styles

Custom functions

log, and debug functions

Anywhere in the code you can call log(), or debug() (no imports needed).

debug, and debugn will only log in development.

// Behaves like `console.log`
log("hello, world!");

// This will log with `console.error`
log("error", "websocket error");

You can also call logn(), and debugn(). This namespaces each log so you can keep track of multiple things at once.

//    Namespace  Log message
logn("socket", "Initiated websocket connection");

[timestamp] +[time since last log in ms] [namespace] [log message]

feature flag function

feature(flag) will return true if the flag is set.

Flags need to be added manually in src/global/featureFlags to the featureFlags object.

if (feature("myAwesomeFlag")) {
	// Do something
}

Styling (StyleX)

Adrift uses StyleX, a Zero runtime CSS in JS library.

StyleX builds optimized styles using collision-free atomic CSS which is superior to what could be authored and maintained by hand.

Other popular libraries such as styled-components can negatively impact app performance due to their use of a runtime.

Styling runtimes are usually okay for small apps, but don't scale very well when there are lots of styles for the runtime to handle.