tessl/npm-ladle--react

A fast and lightweight React component development environment for building and sharing components.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Programmatic API

Name: tessl/npm-ladle--react
Author: tessl

Node.js API for integrating Ladle functionality into custom build processes, development workflows, and automation scripts. Each function corresponds to a CLI command but provides programmatic control.

Capabilities

Serve API

Starts the development server programmatically with the same functionality as the CLI serve command.

import serve from "@ladle/react/serve";

/**
 * Start development server programmatically
 * @param params - Optional CLI parameters
 * @returns Promise that resolves when server starts
 */
function serve(params?: CLIParams): Promise<void>;

interface CLIParams {
  host?: string;
  port?: number;
  stories?: string;
  theme?: "light" | "dark" | "auto";
  config?: string;
  viteConfig?: string;
  base?: string;
  mode?: string;
  noWatch?: boolean;
}

Usage Examples:

import serve from "@ladle/react/serve";

// Start with default settings
await serve();

// Start with custom configuration
await serve({
  port: 3000,
  host: "0.0.0.0",
  stories: "components/**/*.story.tsx",
  theme: "dark"
});

// Integration in custom dev script
async function startDevelopment() {
  console.log("Starting component development server...");
  try {
    await serve({ port: 4000, noWatch: false });
    console.log("Server started successfully");
  } catch (error) {
    console.error("Failed to start server:", error);
  }
}

Build API

Builds the static production version programmatically, returning a boolean indicating success or failure.

import build from "@ladle/react/build";

/**
 * Build static production app programmatically
 * @param params - Optional CLI parameters
 * @returns Promise resolving to true on success, false on failure
 */
function build(params?: CLIParams): Promise<boolean>;

interface CLIParams {
  outDir?: string;
  stories?: string;
  theme?: "light" | "dark" | "auto";
  config?: string;
  viteConfig?: string;
  base?: string;
  mode?: string;
}

Usage Examples:

import build from "@ladle/react/build";

// Build with default settings
const success = await build();
if (success) {
  console.log("Build completed successfully");
} else {
  console.error("Build failed");
  process.exit(1);
}

// Build with custom configuration
const buildResult = await build({
  outDir: "dist/components",
  base: "/my-app/components/",
  theme: "light"
});

// Integration in CI/CD pipeline
async function buildForProduction() {
  const result = await build({
    outDir: process.env.BUILD_DIR || "build",
    base: process.env.BASE_PATH || "/",
    mode: "production"
  });
  
  if (!result) {
    throw new Error("Component build failed");
  }
  
  return result;
}

Preview API

Starts the preview server programmatically to serve built static files.

import preview from "@ladle/react/preview";

/**
 * Start preview server programmatically
 * @param params - Optional CLI parameters
 * @returns Promise that resolves when server starts
 */
function preview(params?: CLIParams): Promise<void>;

interface CLIParams {
  outDir?: string;
  host?: string;
  port?: number;
  config?: string;
  viteConfig?: string;
  base?: string;
  mode?: string;
}

Usage Examples:

import preview from "@ladle/react/preview";

// Preview with default settings
await preview();

// Preview with custom configuration
await preview({
  port: 8080,
  host: "0.0.0.0",
  outDir: "dist/components"
});

// Integration with testing workflow
async function previewForTesting() {
  await preview({
    port: 9000,
    host: "localhost"
  });
  
  // Run E2E tests against preview server
  // Server will be running at http://localhost:9000
}

Meta API

Retrieves metadata about stories and configuration for integration with other tools.

import meta from "@ladle/react/meta";

/**
 * Get metadata about stories and configuration
 * @returns Story metadata and configuration information
 */
function meta(): any;

Usage Examples:

import meta from "@ladle/react/meta";

// Get story metadata
const storyMetadata = meta();
console.log("Available stories:", storyMetadata);

// Use metadata for custom tooling
function analyzeStories() {
  const metadata = meta();
  
  // Process metadata for documentation generation,
  // test automation, or other custom workflows
  return metadata;
}

MSW Node Integration

Server setup for Node.js environments when using Mock Service Worker in stories.

import { setupServer } from "@ladle/react/msw-node";

/**
 * MSW server setup function from msw/node
 * Used for server-side mocking in Node.js environments
 */
const setupServer: typeof import("msw/node").setupServer;

Usage Examples:

import { setupServer } from "@ladle/react/msw-node";
import { handlers } from "./mocks/handlers";

// Setup MSW server for Node.js testing
const server = setupServer(...handlers);

// Start server before tests
beforeAll(() => server.listen());

// Reset handlers between tests
afterEach(() => server.resetHandlers());

// Clean up after tests
afterAll(() => server.close());

Integration Patterns

Custom Development Workflow

import serve from "@ladle/react/serve";
import build from "@ladle/react/build";

async function customWorkflow() {
  // Start development server
  console.log("Starting development mode...");
  await serve({
    port: 3000,
    stories: "src/**/*.stories.tsx"
  });
  
  // In separate process or on command, build production
  console.log("Building for production...");
  const buildSuccess = await build({
    outDir: "build",
    base: "/components/"
  });
  
  if (buildSuccess) {
    console.log("Workflow completed successfully");
  }
}

CI/CD Integration

import build from "@ladle/react/build";

async function cicdBuild() {
  try {
    const success = await build({
      outDir: process.env.OUTPUT_DIR,
      base: process.env.BASE_URL,
      mode: "production"
    });
    
    if (!success) {
      process.exit(1);
    }
    
    console.log("Build completed for deployment");
  } catch (error) {
    console.error("Build failed:", error);
    process.exit(1);
  }
}