💡 Looking for the Legacy Package Guide?
Installation
💡 WarpDrive simplifies distribution using npm channel tags
@lts|@latest|@beta|@canary
To use WarpDrive, you will install @warp-drive/core, a cache[1], and a reactivity system such as emberjs, TC39 Signals or even react.
pnpm add -E @warp-drive/core@latest @warp-drive/json-api@latestnpm add -E @warp-drive/core@latest @warp-drive/json-api@latestyarn add -E @warp-drive/core@latest @warp-drive/json-api@latestbun add --exact @warp-drive/core@latest @warp-drive/json-api@latestComplete your installation by installing and configuring the reactive framework of your choosing.
Available Frameworks
- ember
- react
- svelte (🚧 Coming Soon)
- vue (🚧 Coming Soon)
- TC39 Signals
Don't see your framework listed yet? Reactive frameworks can typically be implemented in 15-30 lines of JS (before you add docs and types of course 😉). We're happy to add support for any framework that supports fine-grained signals based reactivity.
Lockstep Versioning
⚠️ Caution
We find this means its best to use exact versions instead of ranges as all WarpDrive packages should be upgraded together at once.
WarpDrive packages follow a lockstep versioning approach: all dependencies and peer-dependencies between the project's own packages are version-locked at the time of publish.
For instance, @warp-drive/[email protected] has a peer-dependency on @warp-drive/[email protected]. If any other version were present (even a differing patch version such as 5.6.1) it would create a conflict. All of the installation commands listed in this guide pin the version for this reason.
Other Packages
WarpDrive offers additional packages for features that don't quite meet the bar for being included in core, or have been deprecated and removed from the core experience.
@warp-drive/utilitiesprovides commonly needed request builder, handler and string utils.@warp-drive/experimentsprovides bleeding edge unstable features we're prototyping like SharedWorker and PersistedCache@warp-drive/legacyprovides extended life-support for features that have been removed from core.
pnpm add -E @warp-drive/utilities@latest
pnpm add -E @warp-drive/legacy@latest
pnpm add -E @warp-drive/experiments@latestnpm add -E @warp-drive/utilities@latest
npm add -E @warp-drive/legacy@latest
npm add -E @warp-drive/experiments@latestyarn add -E @warp-drive/utilities@latest
yarn add -E @warp-drive/legacy@latest
yarn add -E @warp-drive/experiments@latestbun add --exact @warp-drive/utilities@latest
bun add --exact @warp-drive/legacy@latest
bun add --exact @warp-drive/experiments@latest🐹 Ember.js
Install @warp-drive/ember and (optionally) install support for the EmberInspector data pane by installing @ember-data/debug.
pnpm add -E @warp-drive/ember@latest
pnpm add -E @ember-data/debug@latestnpm add -E @warp-drive/ember@latest
npm add -E @ember-data/debug@latestyarn add -E @warp-drive/ember@latest
yarn add -E @ember-data/debug@latestbun add --exact @warp-drive/ember@latest
bun add --exact @ember-data/debug@latestConfigure your app to use Ember's signals implementation by adding the following import to the top of your application and test setup.
import '@warp-drive/ember/install';import '@warp-drive/ember/install';Addons that make use of WarpDrive should only do the above installation in their tests (including test apps) but not in any published library code.
React
pnpm add -E @warp-drive/react@latestnpm add -E @warp-drive/react@latestyarn add -E @warp-drive/react@latestbun add --exact @warp-drive/react@latestEven though React does not natively understand signals, WarpDrive provides a solution that enables React to understand when reactive data used by a component has changed enabling it to properly rerender. We'll cover this more in the @warp-drive/react documentation
Configure your app to use our React compatible signals implementation by adding the following import to the top of your application. If you have tests which do not invoke your app, your test setup should also have this import.
import '@warp-drive/react/install';import '@warp-drive/react/install';Only apps need to do the installation above, libraries providing React components that make use of WarpDrive should only do the above installation in their tests but not in any published library code.
Svelte (🚧 Coming Soon)
pnpm add -E @warp-drive/svelte@latestnpm add -E @warp-drive/svelte@latestyarn add -E @warp-drive/svelte@latestbun add --exact @warp-drive/svelte@latestConfigure your app to use Svelte's signals (Runes) for reactivity by adding the following import to the top of your application. If you have tests which do not invoke your app, your test setup should also have this import.
import '@warp-drive/svelte/install';import '@warp-drive/svelte/install';Only apps need to do the installation above, libraries providing Svelte components that make use of WarpDrive should only do the above installation in their tests but not in any published library code.
Vue (🚧 Coming Soon)
pnpm add -E @warp-drive/vue@latestnpm add -E @warp-drive/vue@latestyarn add -E @warp-drive/vue@latestbun add --exact @warp-drive/vue@latestConfigure your app to use Vue's signals for reactivity by adding the following import to the top of your application. If you have tests which do not invoke your app, your test setup should also have this import.
import '@warp-drive/vue/install';import '@warp-drive/vue/install';Only apps need to do the installation above, libraries providing Vue components that make use of WarpDrive should only do the above installation in their tests but not in any published library code.
TC39-signals
pnpm add -E @warp-drive/tc39-proposal-signals@latestnpm add -E @warp-drive/tc39-proposal-signals@latestyarn add -E @warp-drive/tc39-proposal-signals@latestbun add --exact @warp-drive/tc39-proposal-signals@latestConfigure your app to use TC39 Signals for reactivity by adding the following import to the top of your application. If you have tests which do not invoke your app, your test setup should also have this import.
import '@warp-drive/tc39-proposal-signals/install';import '@warp-drive/tc39-proposal-signals/install';Only apps need to do the installation above, libraries providing code that makes use of WarpDrive should only do the above installation in their tests but not in any published library code.
We recommend using
@warp-drive/json-apias your cache even if your API is not {JSON:API}. ↩︎