### Install Solid Start dependencies
Source: https://visulima.com/docs/packages/storage-client/solid
Install the required packages for Solid Start projects.
```bash
npm install @visulima/storage-client @tanstack/solid-query solid-start
```
--------------------------------
### Package Configuration
Source: https://visulima.com/docs/packages/packem/examples/advanced/webassembly
Example package.json setup for a project using Packem.
```json
{
"name": "@myorg/wasm-example",
"version": "1.0.0",
"type": "module",
"files": ["dist"],
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.mjs"
}
},
"scripts": {
"build": "packem build"
},
"devDependencies": {
"@visulima/packem": "^2"
}
}
```
--------------------------------
### Examples of vis install usage
Source: https://visulima.com/docs/packages/vis/commands/install
Common usage patterns for installing dependencies with various security and performance flags.
```bash
# Install all dependencies (frozen-lockfile + scripts blocked by default)
vis install
# Allow lockfile updates for this run
vis install --no-frozen-lockfile
# Run lifecycle scripts (allowlisted packages run regardless via security.policies.installScripts.allow)
vis install --run-scripts
# Install with frozen lockfile (explicit; same as the default when a lockfile exists)
vis install --frozen-lockfile
# Cache-first install — use cached tarballs when available, fall back to network
vis install --prefer-offline
# Strict offline — fail if any package is not already cached
vis install --offline
# Without optional dependencies
vis install --no-optional
# Force re-install
vis install --force
# Force aube as the installer (errors if not on PATH)
vis install --installer aube
# Bypass aube for one run, use the lockfile-detected PM
vis install --no-aube
```
--------------------------------
### Example Dockerfile for Visulima
Source: https://visulima.com/docs/packages/vis/commands/docker
A multi-stage Dockerfile demonstrating dependency installation, project building, and production image creation.
```dockerfile
FROM node:22-slim AS deps
WORKDIR /app
# 1. Scaffold — only manifests
RUN corepack enable
COPY .vis/docker/workspace/ ./
RUN pnpm install --frozen-lockfile
# 2. Sources — only the focus project
FROM deps AS build
COPY .vis/docker/sources/ ./
COPY .vis/docker/vis-docker-manifest.json .vis/docker/
RUN pnpm --filter my-app build
RUN vis docker prune --context=.vis/docker
# 3. Production image
FROM node:22-slim
WORKDIR /app
COPY --from=build /app/packages/my-app/dist ./dist
CMD ["node", "dist/index.js"]
```
--------------------------------
### Docker and CI Integration
Source: https://visulima.com/docs/packages/vis/commands/toolchain
Examples for running the installation scripts within Docker build steps.
```dockerfile
# Linux / macOS images
RUN curl -fsSL https://visulima.com/install.sh \
| bash -s -- --yes --manager=proto --no-toolchain-install
```
```dockerfile
# Windows images (PowerShell)
RUN powershell -Command "& ([scriptblock]::Create((irm 'https://visulima.com/install.ps1'))) -Yes -Manager proto -NoToolchainInstall"
```
--------------------------------
### Quick start with Vitest
Source: https://visulima.com/docs/packages/tui/testing
Basic setup for rendering a component and asserting on the output frame.
```typescript
import { afterEach, describe, expect, it } from "vitest";
import { cleanup, render } from "@visulima/tui/test";
import { Text } from "@visulima/tui/components/text";
afterEach(() => {
cleanup();
});
describe("my component", () => {
it("renders greeting", () => {
const { lastFrame } = render(Hello World);
expect(lastFrame()).toBe("Hello World");
});
});
```
--------------------------------
### Install @visulima/tui
Source: https://visulima.com/docs/packages/tui/quickstart-react
Install the necessary packages to start building TUI applications with React.
```bash
npm install @visulima/tui react
```
--------------------------------
### Install and run CLI
Source: https://visulima.com/docs/packages/cerebro/guides/building-cli
Global installation and execution of the published CLI package.
```bash
npm install -g my-cli
my-cli build --production
```
--------------------------------
### Install the package
Source: https://visulima.com/docs/packages/ansi
Install the package via npm.
```bash
npm install @visulima/ansi
```
--------------------------------
### Define Command Examples
Source: https://visulima.com/docs/packages/cerebro/api/command
Specify usage examples for the command help output.
```javascript
{
examples: ["build --production", "build --production --output dist"];
}
```
--------------------------------
### Common vis ci examples
Source: https://visulima.com/docs/packages/vis/commands/ci
Various configurations for running CI pipelines, including base ref overrides, skipping installations, and parallel execution.
```bash
vis ci lint,test,build # Full CI pipeline
vis ci test --base=origin/main # Override base ref
vis ci build --no-install # Skip install (deps already present)
vis ci build --parallel=6 # Increase concurrency
vis ci test --query "language=typescript" # Filter by project metadata
```
--------------------------------
### Install @visulima/packem-share
Source: https://visulima.com/docs/packages/packem/api/packem-share
Install the package using npm.
```bash
npm install @visulima/packem-share
```
--------------------------------
### Add command examples
Source: https://visulima.com/docs/packages/cerebro/guides/commands
The examples property provides an array of strings showing how to use the command.
```javascript
cli.addCommand({
name: "deploy",
examples: ["deploy --env production", "deploy --env staging --dry-run"],
execute: () => {},
});
```
--------------------------------
### Complete email sending workflow
Source: https://visulima.com/docs/packages/email/getting-started/introduction
A full example demonstrating provider setup, default configuration, message construction, and result handling.
```typescript
import { createMail } from "@visulima/email";
import { resendProvider } from "@visulima/email/providers/resend";
// 1. Create a provider
const resend = resendProvider({
apiKey: process.env.RESEND_API_KEY!,
});
// 2. Create a Mail instance
const mail = createMail(resend);
// Optional: Set default configuration for all emails
mail.setFrom({ email: "noreply@example.com", name: "My App" });
// 3. Build and send a message
import { MailMessage } from "@visulima/email";
const message = new MailMessage()
.to("user@example.com")
// .from() is optional if set via mail.setFrom()
.subject("Welcome!")
.html("Welcome to our service!
")
.text("Welcome to our service!");
const result = await mail.send(message);
// 4. Handle the result
if (result.success) {
console.log("Email sent successfully:", result.data?.messageId);
} else {
console.error("Failed to send email:", result.error);
}
```
--------------------------------
### Install Solid dependencies
Source: https://visulima.com/docs/packages/storage-client/installation
Commands to install the storage client and required Solid Query dependencies.
```bash
npm install @visulima/storage-client @tanstack/solid-query solid-js
```
```bash
yarn add @visulima/storage-client @tanstack/solid-query solid-js
```
```bash
pnpm add @visulima/storage-client @tanstack/solid-query solid-js
```
--------------------------------
### Install @visulima/string
Source: https://visulima.com/docs/packages/string/installation
Commands to install the package using various package managers.
```bash
pnpm add @visulima/string
```
```bash
npm install @visulima/string
```
```bash
yarn add @visulima/string
```
--------------------------------
### Install @visulima/iso-locale
Source: https://visulima.com/docs/packages/iso-locale/installation
Use npm to install the package in your project.
```bash
npm install @visulima/iso-locale
```
--------------------------------
### Install @visulima/html
Source: https://visulima.com/docs/packages/html/installation
Use npm to install the package in your project.
```bash
npm install @visulima/html
```
--------------------------------
### Install @visulima/boxen
Source: https://visulima.com/docs/packages/boxen/installation
Use npm to install the package in your project.
```bash
npm install @visulima/boxen
```
--------------------------------
### Usage syntax for vis install
Source: https://visulima.com/docs/packages/vis/commands/install
Basic command structure for executing the install command.
```bash
vis install [options]
```
--------------------------------
### Verify Installation
Source: https://visulima.com/docs/packages/ansi/installation
Test the installation by performing a simple cursor movement.
```javascript
import { cursorUp, cursorLeft } from "@visulima/ansi";
// Move cursor up 2 rows and to the left
process.stdout.write(cursorUp(2) + cursorLeft);
console.log("Cursor moved!");
```
--------------------------------
### Run Example Commands
Source: https://visulima.com/docs/packages/tui/raw-buffer
Execute provided example scripts using the Oxc node loader.
```bash
node --import @oxc-node/core/register examples-raw/ascii-3d.ts
node --import @oxc-node/core/register examples-raw/conway.ts
node --import @oxc-node/core/register examples-raw/fire.ts
node --import @oxc-node/core/register examples-raw/matrix.ts
node --import @oxc-node/core/register examples-raw/jitter.ts
node --import @oxc-node/core/register examples-raw/scope.ts
node --import @oxc-node/core/register examples-raw/plasma.ts
node --import @oxc-node/core/register examples-raw/inline-picker.ts
```
--------------------------------
### Install @visulima/css-style-inject
Source: https://visulima.com/docs/packages/packem/api/css-style-inject
Install the package via npm.
```bash
npm install @visulima/css-style-inject
```
--------------------------------
### Install and Initialize Packem
Source: https://visulima.com/docs/packages/packem
Commands to install the Packem package and initialize or build a project.
```bash
npm install --save-dev @visulima/packem
npx packem init
npx packem build
```
--------------------------------
### Install CLI dependencies
Source: https://visulima.com/docs/packages/cerebro/guides/building-cli
Install the required filesystem and path utility packages.
```bash
npm install @visulima/fs @visulima/path
```
--------------------------------
### Verify Installation
Source: https://visulima.com/docs/packages/path/installation
Test the installation by importing core path functions and verifying their output.
```javascript
import { resolve, join, basename } from "@visulima/path";
console.log(join("src", "config", "app.json"));
// Output: 'src/config/app.json'
console.log(resolve("docs", "guide.md"));
// Output: '/current/directory/docs/guide.md'
console.log(basename("/home/user/document.pdf"));
// Output: 'document.pdf'
```
--------------------------------
### Install task-runner-client
Source: https://visulima.com/docs/packages/task-runner/guides/cooperative-cache-hints
Install the zero-dependency client package to enable cooperative cache hints in your tasks.
```bash
npm install @visulima/task-runner-client
```
--------------------------------
### Complete Plugin Implementation
Source: https://visulima.com/docs/packages/cerebro/api/plugin
A full example demonstrating metadata, initialization, toolbox extension, and lifecycle hooks.
```javascript
cli.addPlugin({
name: "http-client",
version: "1.0.0",
description: "HTTP client utilities",
dependencies: ["logger"],
init: async ({ logger }) => {
logger.info("HTTP client plugin initialized");
},
execute: (toolbox) => {
toolbox.http = {
get: async (url: string) => {
const response = await fetch(url);
return response.json();
},
post: async (url: string, data: unknown) => {
const response = await fetch(url, {
method: "POST",
body: JSON.stringify(data),
});
return response.json();
},
};
},
beforeCommand: async (toolbox) => {
toolbox.logger.debug(`Preparing HTTP client`);
},
afterCommand: async (toolbox, result) => {
toolbox.logger.debug(`Command completed`);
},
onError: async (error, toolbox) => {
toolbox.logger.error(`HTTP error:`, error);
},
});
```
--------------------------------
### Verify installation
Source: https://visulima.com/docs/packages/email/installation
Initialize the mail instance with a provider to verify the installation.
```typescript
import { createMail } from "@visulima/email";
import { resendProvider } from "@visulima/email/providers/resend";
const mail = createMail(resendProvider({ apiKey: "test" }));
console.log("@visulima/email is installed and ready!");
```
--------------------------------
### Quick start with Files facade
Source: https://visulima.com/docs/packages/storage
Demonstrates initializing the Files facade with an S3 adapter, performing operations, and handling bulk actions.
```typescript
import { Files } from "@visulima/storage";
import { S3Storage } from "@visulima/storage/provider/aws";
const files = new Files({
adapter: new S3Storage({ bucket: "uploads", region: "us-east-1" }),
defaults: { timeout: 30_000, retries: { maxRetries: 5 } },
hooks: {
onAction: ({ type, key, durationMs }) => log.info(type, key, durationMs),
onRetry: ({ type, key, attempt }) => log.warn(type, key, "retry", attempt),
},
});
await files.upload("avatars/abc.png", buffer, { contentType: "image/png" });
const url = await files.url("avatars/abc.png", { expiresIn: 900 });
const { body } = await files.download("avatars/abc.png", { range: { start: 0, end: 1023 } });
// Bulk: upload / download / delete / move accept an array and return a structured result.
const { uploaded, errors } = await files.upload([
{ key: "a.txt", body: "A" },
{ key: "b.txt", body: "B" },
]);
// Walk every object as an async iterable — pages internally.
for await (const file of files.listAll({ prefix: "avatars/" })) {
log.info(file.key, file.size);
}
```
--------------------------------
### Install React dependencies
Source: https://visulima.com/docs/packages/storage-client/installation
Commands to install the storage client and required React Query dependencies.
```bash
npm install @visulima/storage-client @tanstack/react-query react
```
```bash
yarn add @visulima/storage-client @tanstack/react-query react
```
```bash
pnpm add @visulima/storage-client @tanstack/react-query react
```
--------------------------------
### Install Visulima TUI
Source: https://visulima.com/docs/packages/tui/quickstart-raw-buffer
Install the core package to begin using raw-buffer mode.
```bash
npm install @visulima/tui
```
--------------------------------
### Install @visulima/spinner
Source: https://visulima.com/docs/packages/spinner/getting-started
Commands to install the package using various package managers.
```bash
pnpm add @visulima/spinner
```
```bash
npm install @visulima/spinner
```
```bash
yarn add @visulima/spinner
```
```bash
bun add @visulima/spinner
```
--------------------------------
### Example package.json Configuration
Source: https://visulima.com/docs/packages/packem/examples/advanced/bundle-analysis
A sample package.json demonstrating build scripts for analysis and metafile generation.
```json
{
"name": "@myorg/analyze-example",
"version": "1.0.0",
"type": "module",
"files": ["dist"],
"exports": {
".": {
"import": "./dist/index.mjs"
}
},
"scripts": {
"build": "packem build",
"analyze": "packem build --analyze",
"meta": "packem build --metafile"
},
"devDependencies": {
"@visulima/packem": "^2"
}
}
```
--------------------------------
### Vis release stage examples
Source: https://visulima.com/docs/packages/vis/commands/release
Examples for listing, approving, and rejecting npm staged-publish records.
```bash
vis release stage list # All staged versions (npm + local registry)
vis release stage list @scope/pkg # Staged versions for one package
vis release stage list --json # Machine-readable
vis release stage approve # Promote + drain from staged.json, commit + push
vis release stage approve --all # Approve every pending stage in staged.json
vis release stage reject # Permanent — re-stage to retry
vis release stage approve --no-push # Approve, commit locally, skip the push
vis release stage approve --no-commit # Approve and update registry only
```
--------------------------------
### Complete Configuration Example
Source: https://visulima.com/docs/packages/pail/configuration
Demonstrates a comprehensive configuration including log levels, scopes, throttling, custom types, reporters, and processors.
```javascript
import { createPail } from "@visulima/pail";
import { PrettyReporter } from "@visulima/pail/reporter/pretty";
import { CallerProcessor } from "@visulima/pail/processor/caller";
const logger = createPail({
// Log level
logLevel: process.env.NODE_ENV === "production" ? "info" : "debug",
// Scope
scope: ["app", "api"],
// Throttling
throttle: 2000,
throttleMin: 10,
// Custom types
types: {
http: {
badge: "🌐",
color: "blue",
label: "HTTP",
logLevel: "info",
},
db: {
badge: "💾",
color: "cyan",
label: "DB",
logLevel: "debug",
},
},
// Reporters
reporters: [
new PrettyReporter({
uppercase: { label: true },
}),
],
// Processors
processors: [new CallerProcessor()],
// Timer messages
messages: {
timerStart: "⏱️ Started:",
timerEnd: "✅ Completed in:",
},
// Server-specific
interactive: true,
});
```
--------------------------------
### Install and use color support
Source: https://visulima.com/docs/packages/boxen/installation
Install @visulima/colorize to add colors to your box borders and content.
```bash
npm install @visulima/colorize
```
```javascript
import { boxen } from "@visulima/boxen";
import { green, blue } from "@visulima/colorize";
console.log(
boxen(green("Success!"), {
borderColor: () => green("─"),
}),
);
```
--------------------------------
### Install @visulima/fmt
Source: https://visulima.com/docs/packages/fmt/installation
Commands to install the package using different package managers.
```bash
npm install @visulima/fmt
```
```bash
pnpm add @visulima/fmt
```
```bash
yarn add @visulima/fmt
```
```bash
bun add @visulima/fmt
```
--------------------------------
### Install PostCSS
Source: https://visulima.com/docs/packages/packem/guide/css
Install PostCSS and the configuration loader as development dependencies.
```bash
npm install --save-dev postcss postcss-load-config
```
--------------------------------
### Get elapsed time
Source: https://visulima.com/docs/packages/spinner/usage
Retrieve the milliseconds elapsed since the spinner started.
```javascript
console.log(spinner.elapsedTime); // 1234
```
--------------------------------
### Configure Default and Custom Output Directories
Source: https://visulima.com/docs/packages/packem/options/output-directory
Examples showing the default output behavior and how to specify a custom directory path.
```javascript
export default defineConfig({
// Uses 'dist' by default
})
```
```javascript
export default defineConfig({
rollup: {
output: {
dir: 'build' // Custom output directory
}
}
})
```
--------------------------------
### Install dependencies
Source: https://visulima.com/docs/packages/notification/i18n
Install the notification package and the required intl-messageformat peer dependency.
```bash
npm install @visulima/notification intl-messageformat
```
--------------------------------
### Install Visulima Storage Package
Source: https://visulima.com/docs/packages/storage/openapi
Install the package to access OpenAPI specifications.
```bash
npm install @visulima/storage
```
--------------------------------
### Initialize Packem configuration
Source: https://visulima.com/docs/packages/packem/examples/basic-javascript
Run the interactive setup command to generate the configuration file.
```bash
npx packem init
```
--------------------------------
### Initialize and use a basic spinner
Source: https://visulima.com/docs/packages/spinner/getting-started
Setup the InteractiveManager and start a simple spinner.
```typescript
import { InteractiveManager, InteractiveStreamHook } from "@visulima/interactive-manager";
import { Spinner } from "@visulima/spinner";
const stdoutHook = new InteractiveStreamHook(process.stdout);
const stderrHook = new InteractiveStreamHook(process.stderr);
const manager = new InteractiveManager(stdoutHook, stderrHook);
const spinner = new Spinner({ name: "dots" }, manager);
spinner.start("Processing...");
await processData();
spinner.succeed("Completed!");
```
--------------------------------
### Install jsdoc-open-api package
Source: https://visulima.com/docs/packages/jsdoc-open-api/installation
Install the core package using npm.
```bash
npm install @visulima/jsdoc-open-api
```
--------------------------------
### Complete Command Definition
Source: https://visulima.com/docs/packages/cerebro/api/command
A full example demonstrating command registration with arguments, options, and environment variable definitions.
```javascript
cli.addCommand({
name: "deploy",
alias: "d",
description: "Deploy the application",
group: "Deployment",
examples: ["deploy --env production", "deploy --env staging --dry-run"],
argument: {
name: "target",
type: String,
description: "Deployment target",
defaultValue: "production",
},
options: [
{
name: "env",
alias: "e",
type: String,
required: true,
description: "Environment name",
},
{
name: "dry-run",
type: Boolean,
description: "Perform a dry run",
},
],
env: [
{
name: "API_KEY",
type: String,
description: "API key for deployment",
},
{
name: "TIMEOUT",
type: Number,
defaultValue: 30000,
description: "Deployment timeout in milliseconds",
},
{
name: "FORCE_DEPLOY",
type: Boolean,
defaultValue: false,
description: "Force deployment without confirmation",
},
],
execute: async ({ argument, options, env, logger }) => {
const target = argument[0];
const apiKey = env.apiKey;
const timeout = env.timeout; // 30000 if not set
const forceDeploy = env.forceDeploy; // false if not set
logger.info(`Deploying to ${target} (${options.env})`);
if (forceDeploy) {
logger.info("Force deployment enabled");
}
},
});
```
--------------------------------
### formatBytes usage examples
Source: https://visulima.com/docs/packages/humanizer/api/bytes
Various examples demonstrating how to use formatBytes with different configuration options.
```javascript
formatBytes(1234567, { decimals: 2 });
// => "1.18 MB"
```
```javascript
formatBytes(1234567, { decimals: 2, locale: "de-DE" });
// => "1,18 MB"
```
```javascript
formatBytes(1024, { long: true });
// => "1 Kilobytes"
```
```javascript
formatBytes(1024, { units: "iec" });
// => "1 KiB"
```
```javascript
formatBytes(1000, { base: 10 });
// => "1 KB"
```
```javascript
formatBytes(1234567, { unit: "KB", decimals: 2 });
// => "1,205.63 KB"
```
```javascript
formatBytes(1024, { space: false });
// => "1KB"
```
```javascript
formatBytes(1234567890, {
unit: "KB",
notation: "scientific",
});
// => "1.234567890E6 KB"
```
```javascript
import { formatBytes } from "@visulima/humanizer";
// Basic usage
formatBytes(1024);
// => "1 KB"
// With decimals
formatBytes(1234567, { decimals: 2 });
// => "1.18 MB"
// German locale
formatBytes(1234567, { decimals: 2, locale: "de-DE" });
// => "1,18 MB"
// Long format
formatBytes(1024, { long: true });
// => "1 Kilobytes"
// IEC units
formatBytes(1024, { units: "iec" });
// => "1 KiB"
// Force specific unit
formatBytes(1234567, { unit: "KB", decimals: 2 });
// => "1,205.63 KB"
// Base 10
formatBytes(1000, { base: 10 });
// => "1 KB"
```
--------------------------------
### Install @visulima/progress-bar
Source: https://visulima.com/docs/packages/progress-bar/getting-started
Commands to install the package using various package managers.
```bash
pnpm add @visulima/progress-bar
```
```bash
npm install @visulima/progress-bar
```
```bash
yarn add @visulima/progress-bar
```
```bash
bun add @visulima/progress-bar
```
--------------------------------
### Initialize CLI Project
Source: https://visulima.com/docs/packages/cerebro/guides/building-cli
Commands to create the project directory and install necessary dependencies.
```bash
mkdir my-cli && cd my-cli
npm init -y
npm install @visulima/cerebro @visulima/command-line-args @visulima/error
```
--------------------------------
### Quick Start with @visulima/inspector
Source: https://visulima.com/docs/packages/inspector
Basic usage example demonstrating how to import and use the inspect function to log an object.
```typescript
import { inspect } from "@visulima/inspector";
const obj = { name: "John", age: 30 };
console.log(inspect(obj));
```
--------------------------------
### Define a run:before hook
Source: https://visulima.com/docs/packages/vis/guides/plugins
Executes setup logic before any tasks in the graph start. Throwing an error here will abort the entire run.
```typescript
definePlugin({
name: "docker-up",
hooks: {
"run:before": async () => {
await execa("docker", ["compose", "up", "-d"]);
},
},
});
```
--------------------------------
### Examples of vis init commands
Source: https://visulima.com/docs/packages/vis/commands/init
Various ways to invoke the initialization command with different flags.
```bash
# Interactive setup wizard
vis init
# Create minimal config without prompts
vis init --no-interactive
# Overwrite existing config
vis init --force
# Also sync to native PM config files
vis init --sync-native
# Print the workspace-relative $schema refs to paste into project.json / vis.config.ts
vis init --schema
```
--------------------------------
### Install @visulima/workflow
Source: https://visulima.com/docs/packages/workflow/installation
Commands to install the package using common JavaScript package managers.
```bash
npm install @visulima/workflow
```
```bash
yarn add @visulima/workflow
```
```bash
pnpm add @visulima/workflow
```
--------------------------------
### Initialize configuration
Source: https://visulima.com/docs/packages/jsdoc-open-api/installation
Initialize the project configuration using the CLI.
```bash
npx jsdoc-open-api init
```
--------------------------------
### Setup release CI environment
Source: https://visulima.com/docs/packages/vis/commands/release
Displays required secrets, OIDC trust, and permission checklists for the detected provider.
```bash
vis release ci setup
```
```bash
vis release ci setup
```
--------------------------------
### Install @visulima/path
Source: https://visulima.com/docs/packages/path
Install the package via npm.
```bash
npm install @visulima/path
```
--------------------------------
### Verify Vis installation
Source: https://visulima.com/docs/packages/vis/installation
Run the help command to confirm the CLI is correctly installed and accessible.
```bash
vis --help
```
--------------------------------
### Install Visulima Storage and Next.js
Source: https://visulima.com/docs/packages/storage/framework/nextjs
Install the required dependencies using your preferred package manager.
```bash
npm install @visulima/storage next
```
```bash
yarn add @visulima/storage next
```
```bash
pnpm add @visulima/storage next
```
--------------------------------
### Install @visulima/packem-rollup
Source: https://visulima.com/docs/packages/packem/api/packem-rollup
Install the package via npm.
```bash
npm install @visulima/packem-rollup
```
--------------------------------
### Vis Install Workflow Diagram
Source: https://visulima.com/docs/packages/vis/commands/install
Visual representation of the installation process, from package manager detection to execution.
```mermaid
flowchart TD
A["vis install [options]"] --> B["Detect package manager
(pnpm, npm, yarn, bun, deno)"]
B --> C["Build install command
from options"]
C --> D{Frozen
lockfile?}
D -- yes --> E["Map to CI mode
(npm ci / pnpm --frozen-lockfile)"]
D -- no --> F["Standard install"]
E --> G["Run native
install command"]
F --> G
G --> H{Exit code
= 0?}
H -- yes --> I["Done"]
H -- no --> J["Report failure"]
```
--------------------------------
### Paging Parameter Examples
Source: https://visulima.com/docs/packages/jsdoc-open-api/short/describing-parameters
Example URLs demonstrating the use of query parameters for pagination.
```text
GET /users
GET /users?offset=30&limit=10
```
--------------------------------
### Install @visulima/deep-clone
Source: https://visulima.com/docs/packages/deep-clone/installation
Commands to install the package using different package managers.
```bash
npm install @visulima/deep-clone
```
```bash
pnpm add @visulima/deep-clone
```
```bash
yarn add @visulima/deep-clone
```
```bash
bun add @visulima/deep-clone
```
--------------------------------
### Install @visulima/bytes
Source: https://visulima.com/docs/packages/bytes/installation
Commands to install the package using different package managers.
```bash
npm install @visulima/bytes
```
```bash
pnpm add @visulima/bytes
```
```bash
yarn add @visulima/bytes
```
```bash
bun add @visulima/bytes
```
--------------------------------
### Install @visulima/object
Source: https://visulima.com/docs/packages/object
Install the package via npm.
```bash
npm install @visulima/object
```
--------------------------------
### Install Humanizer
Source: https://visulima.com/docs/packages/humanizer/installation
Install the package using npm.
```bash
npm install @visulima/humanizer
```
--------------------------------
### Vis release pre examples
Source: https://visulima.com/docs/packages/vis/commands/release
Examples for managing prerelease sprint modes, including local triage options.
```bash
vis release pre enter alpha # snapshot every package's version; future bumps are prerelease
vis release pre status # check whether pre-mode is on / exit-pending / off
vis release pre exit # mark for exit; the NEXT `version` consolidates + deletes pre.json
# Local triage without auto-committing the tracked pre.json:
vis release pre enter alpha --no-commit
vis release pre exit --no-push
```
--------------------------------
### Run repository examples
Source: https://visulima.com/docs/packages/tui/getting-started
Commands to execute various TUI example modes using the OXC node loader.
```bash
# React mode
node --import @oxc-node/core/register examples/kitchen-sink.tsx
node --import @oxc-node/core/register examples/counter.tsx
# Raw-buffer mode
node --import @oxc-node/core/register examples-raw/matrix.ts
node --import @oxc-node/core/register examples-raw/conway.ts
# Inline mode (React)
node --import @oxc-node/core/register examples/inline-minimal.tsx
```
--------------------------------
### Install @visulima/bytes
Source: https://visulima.com/docs/packages/bytes
Install the package via npm.
```bash
npm install @visulima/bytes
```
--------------------------------
### Run TUI Examples
Source: https://visulima.com/docs/packages/tui/examples
Commands to execute the provided React or raw-buffer example applications from the repository root.
```bash
node --import @oxc-node/core/register examples/.tsx
node --import @oxc-node/core/register examples-raw/.ts
```
--------------------------------
### Install i18next dependencies
Source: https://visulima.com/docs/packages/tui/i18n
Install the core library and optional file-system backend for loading locales.
```bash
pnpm add i18next react-i18next
# Optional: load JSON locales from disk at startup
pnpm add i18next-fs-backend
```
--------------------------------
### Install Dev Toolbar and Vite Overlay
Source: https://visulima.com/docs/packages/dev-toolbar/integrations/vite-overlay
Install both required packages as development dependencies.
```bash
pnpm add -D @visulima/dev-toolbar @visulima/vite-overlay
```
--------------------------------
### Setup Solid QueryClient
Source: https://visulima.com/docs/packages/storage-client/installation
Wrap the application with the QueryClientProvider for Solid.
```typescript
import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
const queryClient = new QueryClient();
function App() {
return {/* Your app */};
}
```
--------------------------------
### Install spinner package
Source: https://visulima.com/docs/packages/pail/usage/interactive
Install the required spinner package.
```bash
pnpm add @visulima/spinner
```
--------------------------------
### Verify Installation
Source: https://visulima.com/docs/packages/bytes/installation
A simple test to ensure the package is installed and functioning correctly.
```javascript
import { concat } from "@visulima/bytes";
const result = concat([new Uint8Array([1, 2]), new Uint8Array([3, 4])]);
console.log(result); // Uint8Array([1, 2, 3, 4])
```
--------------------------------
### Install @visulima/packem
Source: https://visulima.com/docs/packages/packem/api/packem
Use npm to install the package as a dependency.
```bash
npm install @visulima/packem
```
--------------------------------
### Install dependencies for authentication and storage
Source: https://visulima.com/docs/packages/storage/authenticated-file-uploads
Install the core packages for Better Auth, Visulima Storage, and your preferred web framework.
```bash
npm install better-auth @visulima/storage express
# or
npm install better-auth @visulima/storage hono
# or
npm install better-auth @visulima/storage fastify
```
--------------------------------
### Install @visulima/object
Source: https://visulima.com/docs/packages/object/installation
Commands to install the package using common JavaScript package managers.
```bash
npm install @visulima/object
```
```bash
pnpm add @visulima/object
```
```bash
yarn add @visulima/object
```
```bash
bun add @visulima/object
```
--------------------------------
### Install Email Verifier
Source: https://visulima.com/docs/packages/email-verifier/installation
Install the package using npm.
```bash
npm install @visulima/email-verifier
```
--------------------------------
### Install and Create Hook Scripts
Source: https://visulima.com/docs/packages/vis/commands/hook
Initialize the hook directory and create an executable pre-commit script.
```bash
vis hook install
echo '#!/bin/sh
pnpm run lint-staged' > .vis/hooks/pre-commit
chmod +x .vis/hooks/pre-commit
```
--------------------------------
### Install Svelte dependencies
Source: https://visulima.com/docs/packages/storage-client/installation
Commands to install the storage client and required Svelte Query dependencies.
```bash
npm install @visulima/storage-client @tanstack/svelte-query svelte
```
```bash
yarn add @visulima/storage-client @tanstack/svelte-query svelte
```
```bash
pnpm add @visulima/storage-client @tanstack/svelte-query svelte
```
--------------------------------
### Install @visulima/content-safety
Source: https://visulima.com/docs/packages/content-safety
Installation commands for various package managers.
```bash
npm install @visulima/content-safety
```
```bash
yarn add @visulima/content-safety
```
```bash
pnpm add @visulima/content-safety
```
--------------------------------
### Install Cerebro
Source: https://visulima.com/docs/packages/cerebro/introduction
Installation commands for various package managers.
```bash
pnpm add @visulima/cerebro
```
```bash
npm install @visulima/cerebro
```
```bash
yarn add @visulima/cerebro
```
--------------------------------
### Usage of vis init
Source: https://visulima.com/docs/packages/vis/commands/init
Basic command syntax for initializing the configuration.
```bash
vis init [options]
```
--------------------------------
### Quick Start with @visulima/package
Source: https://visulima.com/docs/packages/package
Demonstrates basic usage for identifying monorepo roots and parsing package.json files.
```typescript
import { findMonorepoRoot, findPackageJson } from "@visulima/package";
// Find monorepo root
const monorepo = await findMonorepoRoot();
console.log(monorepo.strategy); // "pnpm" | "npm" | "yarn" | "lerna"
// Find and parse package.json
const pkg = await findPackageJson();
console.log(pkg.packageJson.name);
```
--------------------------------
### Installation
Source: https://visulima.com/docs/packages/storage/services/onedrive
Install the required Microsoft Graph client package using your preferred package manager.
```bash
npm install @microsoft/microsoft-graph-client
```
```bash
yarn add @microsoft/microsoft-graph-client
```
```bash
pnpm add @microsoft/microsoft-graph-client
```
--------------------------------
### vis add command examples
Source: https://visulima.com/docs/packages/vis/commands/add
Common usage patterns for adding dependencies, managing workspaces, and configuring security overrides.
```bash
vis add react react-dom # Add packages (scripts blocked by default)
vis add -D typescript @types/react # Add as dev dependencies
vis add react --filter app # Add to specific workspace package
vis add react --to web # Add to one package, conform to existing catalogs
vis add react --auto-install-peers # Recursively install non-optional peer deps
vis add -g typescript # Add globally (uses npm)
vis add lodash -w # Add to workspace root
vis add esbuild --run-scripts # Opt out of the universal script block for this run
vis add lodash --no-socket-check # Skip the supply-chain provider scan (Socket.dev / deps.dev) for this run
vis add lodash --no-typosquat-check # Skip typosquat name check
vis add lodash --no-marshall-check # Skip the offline marshall pipeline
```
--------------------------------
### BannedWordsResult Usage Example
Source: https://visulima.com/docs/packages/content-safety/api
Example object structure for a BannedWordsResult.
```typescript
const result: BannedWordsResult = {
hasBannedWords: true,
matches: [
{
word: "badword",
startIndex: 0,
endIndex: 7,
language: "en",
},
],
};
```
--------------------------------
### Install SolidJS dependencies
Source: https://visulima.com/docs/packages/storage-client/solid
Install the required packages for SolidJS projects.
```bash
npm install @visulima/storage-client @tanstack/solid-query solid-js
```
--------------------------------
### Verify Pail Installation
Source: https://visulima.com/docs/packages/pail/installation
Test the installation by logging a message to the console.
```typescript
import { pail } from "@visulima/pail";
pail.info("Pail is installed and working!");
```
--------------------------------
### Install Vue/Nuxt dependencies
Source: https://visulima.com/docs/packages/storage-client/installation
Commands to install the storage client and required Vue Query dependencies.
```bash
npm install @visulima/storage-client @tanstack/vue-query vue
```
```bash
yarn add @visulima/storage-client @tanstack/vue-query vue
```
```bash
pnpm add @visulima/storage-client @tanstack/vue-query vue
```
--------------------------------
### Install Monorepo Dependencies
Source: https://visulima.com/docs/packages/packem/examples/monorepo
Installs all project dependencies using pnpm.
```bash
pnpm install
```
--------------------------------
### Example package.json exports
Source: https://visulima.com/docs/packages/packem/options/allowed-export-extensions
Example of package.json exports that utilize custom extensions allowed by the configuration.
```json
{
"exports": {
".": "./dist/index.mjs",
"./images": "./dist/images/icon.svg",
"./assets": "./dist/assets/logo.svg",
"./styles": "./dist/styles.css"
}
}
```
--------------------------------
### Install Webpack dependency
Source: https://visulima.com/docs/packages/jsdoc-open-api/troubleshooting
Ensure webpack is installed as a dependency for the plugin.
```bash
npm install webpack
```
--------------------------------
### Install Storage Client Dependencies
Source: https://visulima.com/docs/packages/storage-client/vue
Install the required packages for Vue 3 or Nuxt 3 projects.
```bash
npm install @visulima/storage-client @tanstack/vue-query vue
```
```bash
npm install @visulima/storage-client @tanstack/vue-query
```
--------------------------------
### Verify dependency installation
Source: https://visulima.com/docs/packages/jsdoc-open-api/troubleshooting
Check if optional dependencies are correctly installed.
```bash
npm list commander cli-progress
```
--------------------------------
### Example package.json with wildcard exports
Source: https://visulima.com/docs/packages/packem/options/ignore-export-keys
Example of package.json exports using wildcard patterns that can be ignored.
```json
{
"exports": {
".": "./dist/index.mjs",
"./icons/*": "./dist/icons/*",
"./assets/*": "./dist/assets/*"
}
}
```
--------------------------------
### CLI usage examples for environment variables and options
Source: https://visulima.com/docs/packages/cerebro/guides/options
Demonstrates how to invoke commands using default values, environment variable overrides, and command-line options.
```bash
# Using defaults
cli build
# Override with environment variables
NODE_ENV=production BUILD_TIMEOUT=60000 cli build
# Combine with options
ENABLE_SOURCEMAPS=false cli build --output build
# Boolean values
ENABLE_SOURCEMAPS=1 cli build # true
ENABLE_SOURCEMAPS=0 cli build # false
```
--------------------------------
### Install @visulima/inspector
Source: https://visulima.com/docs/packages/inspector/installation
Use this command to install the package via npm.
```bash
npm install @visulima/inspector
```
--------------------------------
### Configure multi-file documentation output
Source: https://visulima.com/docs/packages/cerebro/guides/advanced
Example command for generating organized multi-file documentation in a specific directory.
```bash
cli readme --multi --output-dir=docs
```
--------------------------------
### Verify installation
Source: https://visulima.com/docs/packages/html/installation
Test the installation by running escaping and sanitization functions.
```typescript
import { escapeHtml, sanitizeHtml } from "@visulima/html";
// Test escaping
console.log(escapeHtml(""));
// => '<script>test</script>'
// Test sanitization
console.log(sanitizeHtml("Hello World
"));
// => 'Hello World
'
```
--------------------------------
### Install @visulima/fs
Source: https://visulima.com/docs/packages/fs/installation
Install the package using the npm package manager.
```bash
npm install @visulima/fs
```
--------------------------------
### Install Cerebro
Source: https://visulima.com/docs/packages/cerebro/installation
Install the core Cerebro package using npm.
```bash
npm install @visulima/cerebro
```
--------------------------------
### Project File Structure
Source: https://visulima.com/docs/packages/packem/api/native-modules-plugin
Example directory layout for a project using native modules.
```text
project/
├── src/
│ ├── index.ts
│ └── my-addon.node
├── dist/
│ ├── index.js
│ └── natives/
│ └── my-addon.node # Copied here
└── package.json
```
--------------------------------
### Common vis update examples
Source: https://visulima.com/docs/packages/vis/commands/update
Various command-line examples demonstrating package updates, filtering, and catalog management.
```bash
vis update react # Update react within semver range
vis up react -L # Update react to latest
vis update -i # Interactive mode
vis update --filter app # Update in specific workspace
vis update -r # Update in all workspaces
vis update --target minor # Only apply minor/patch updates (catalog)
vis update --dry-run # Preview changes without applying
vis update --exclude '@types/*' # Exclude packages by pattern
vis update --changelog # Show changelog links after updating
vis update --rollback # Restore catalog from last backup
```
--------------------------------
### Examples of vis task-why
Source: https://visulima.com/docs/packages/vis/commands/task-why
Common examples of tracing task dependencies.
```bash
vis task-why @myorg/app:build
vis task-why lib-a:test
```
--------------------------------
### kebabCase usage examples
Source: https://visulima.com/docs/packages/string/api/case
Examples demonstrating string conversion to kebab-case.
```typescript
kebabCase("fooBar"); // 'foo-bar'
kebabCase("foo bar"); // 'foo-bar'
kebabCase("foo_bar"); // 'foo-bar'
kebabCase("XMLHttpRequest"); // 'xml-http-request'
```
--------------------------------
### Build command examples
Source: https://visulima.com/docs/packages/packem/guide/cli
Common usage scenarios for the build command including production builds, watch mode, environment variables, and bundler selection.
```bash
# Build for production (minifies automatically)
packem build --production
# Watch with development environment
packem build --watch --development
# Inject a compile-time variable
packem build --env.API_URL=https://api.example.com
# Use the experimental rolldown bundler
packem build --bundler rolldown
```
--------------------------------
### snakeCase usage examples
Source: https://visulima.com/docs/packages/string/api/case
Examples demonstrating string conversion to snake_case.
```typescript
snakeCase("fooBar"); // 'foo_bar'
snakeCase("foo bar"); // 'foo_bar'
snakeCase("foo-bar"); // 'foo_bar'
snakeCase("XMLHttpRequest"); // 'xml_http_request'
```
--------------------------------
### Configure via environment variables
Source: https://visulima.com/docs/packages/storage/services/tencent-cos
Use environment variables to initialize the client configuration automatically.
```javascript
process.env.TENCENT_SECRET_ID = "your-secret-id";
process.env.TENCENT_SECRET_KEY = "your-secret-key";
process.env.TENCENT_REGION = "ap-guangzhou";
const clientConfig = tencent(); // Uses environment variables
const storage = new S3Storage({
bucket: "uploads-1250000000",
...clientConfig,
});
```
--------------------------------
### Install a snapshot release
Source: https://visulima.com/docs/packages/vis/guides/release
Command to install a snapshot version generated by a PR.
```bash
pnpm add @scope/cerebro@pr-1234
```
--------------------------------
### Implement Complete Boxen Example
Source: https://visulima.com/docs/packages/boxen/api
A full example demonstrating how to apply various options, including custom border coloring and header/footer configuration.
```typescript
import { boxen } from "@visulima/boxen";
import type { Options } from "@visulima/boxen";
import { green, blue } from "@visulima/colorize";
const options: Options = {
// Border
borderStyle: "double",
borderColor: (border, position) => {
if (position.includes("top")) {
return blue(border);
}
return green(border);
},
// Layout
padding: 1,
margin: { top: 1, bottom: 1 },
width: 40,
// Text
textAlignment: "center",
// Header/Footer
headerText: "Status",
headerAlignment: "center",
footerText: "v1.0.0",
footerAlignment: "right",
};
console.log(boxen("All options used!", options));
```
--------------------------------
### Install MCP dependencies
Source: https://visulima.com/docs/packages/vis/guides/ai-integration
Install the required peer dependencies for the MCP server.
```bash
pnpm add @modelcontextprotocol/sdk zod
# or
npm install @modelcontextprotocol/sdk zod
```
--------------------------------
### Define Project Structure
Source: https://visulima.com/docs/packages/packem/examples/advanced/multi-runtime
Example directory layout showing runtime-specific source files.
```text
multi-runtime-example/
├── src/
│ ├── index.ts # default / import condition
│ ├── index.react-server.ts # react-server condition
│ └── index.edge-light.ts # edge-light condition
├── package.json
├── packem.config.ts
└── tsconfig.json
```
--------------------------------
### Vis Install Command Alias
Source: https://visulima.com/docs/packages/vis/commands/install
Shortened command alias for the install operation.
```bash
vis i # Short for vis install
```
--------------------------------
### Install @visulima/tui dependencies
Source: https://visulima.com/docs/packages/tui/getting-started
Installation commands for React-based and raw-buffer TUI applications.
```bash
npm install @visulima/tui react react-reconciler
```
```bash
npm install @visulima/tui
```
--------------------------------
### Initialize release configuration
Source: https://visulima.com/docs/packages/vis/commands/release
Basic usage of the initialization command.
```bash
vis release init [flags]
```
--------------------------------
### Quick Start with @visulima/tsconfig
Source: https://visulima.com/docs/packages/tsconfig
Demonstrates finding a tsconfig.json file asynchronously and reading a specific configuration file synchronously.
```typescript
import { findTsConfig, readTsConfig } from "@visulima/tsconfig";
// Find tsconfig.json
const result = await findTsConfig();
console.log(result.config.compilerOptions);
// Read specific tsconfig (synchronous — no await)
const config = readTsConfig("/path/to/tsconfig.json");
```
--------------------------------
### Install Svelte Dependencies
Source: https://visulima.com/docs/packages/storage-client/svelte
Install the required packages for Svelte or SvelteKit projects.
```bash
npm install @visulima/storage-client @tanstack/svelte-query svelte
```
```bash
npm install @visulima/storage-client @tanstack/svelte-query sveltekit
```
--------------------------------
### Configure with pre-built client
Source: https://visulima.com/docs/packages/storage/services/uploadthing
Initialize the storage provider using a custom UTApi client instance.
```typescript
import { UTApi } from "uploadthing/server";
const storage = new UploadThingStorage({
client: new UTApi({ defaultKeyType: "customId", token: process.env.UPLOADTHING_TOKEN! }),
token: process.env.UPLOADTHING_TOKEN!, // still required — used to derive appId
});
```
--------------------------------
### Install Dropbox SDK
Source: https://visulima.com/docs/packages/storage/services/dropbox
Commands to install the required Dropbox SDK dependency.
```bash
npm install dropbox
```
```bash
yarn add dropbox
```
```bash
pnpm add dropbox
```
--------------------------------
### Command Usage Examples
Source: https://visulima.com/docs/packages/cerebro/guides/options
Various ways to invoke the deploy command via the CLI.
```bash
# Basic usage
cli deploy staging --env production
# With multiple services
cli deploy --env production --services api --services worker
# Force deployment
cli deploy --env production --force
# Dry run
cli deploy --env production --dry-run
```
--------------------------------
### Install Box SDK
Source: https://visulima.com/docs/packages/storage/services/box
Installation commands for the required Box TypeScript SDK.
```bash
npm install box-typescript-sdk-gen
```
```bash
yarn add box-typescript-sdk-gen
```
```bash
pnpm add box-typescript-sdk-gen
```
--------------------------------
### Install @visulima/command-line-args
Source: https://visulima.com/docs/packages/command-line-args/installation
Use this command to add the package to your project dependencies.
```bash
npm install @visulima/command-line-args
```
--------------------------------
### Install progress bar package
Source: https://visulima.com/docs/packages/pail/usage/interactive
Install the required progress bar package.
```bash
pnpm add @visulima/progress-bar
```
--------------------------------
### Install Stylus dependency
Source: https://visulima.com/docs/packages/packem/examples/css/stylus
Install the required stylus package as a development dependency.
```bash
npm install --save-dev stylus
```
--------------------------------
### Install Lightning CSS
Source: https://visulima.com/docs/packages/packem/examples/css/lightningcss
Install the required lightningcss package as a development dependency.
```bash
npm install --save-dev lightningcss
```
--------------------------------
### Initialize with Pre-built Client
Source: https://visulima.com/docs/packages/storage/services/bunny
Advanced initialization using a pre-configured BunnyStorageSDK client instance.
```typescript
import * as BunnyStorageSDK from "@bunny.net/storage-sdk";
import { BunnyStorage } from "@visulima/storage/provider/bunny";
const client = BunnyStorageSDK.zone.connect_with_accesskey(
BunnyStorageSDK.regions.StorageRegion.Falkenstein,
process.env.BUNNY_STORAGE_ZONE!,
process.env.BUNNY_STORAGE_ACCESS_KEY!,
);
const storage = new BunnyStorage({
client,
publicBaseUrl: "https://cdn.example.com",
});
```