DEV Community: Karibash

Why I Reinvented a Result Type Library

Karibash — Thu, 23 Oct 2025 09:43:16 +0000

Introduction

When you want to handle errors in a type-safe way with TypeScript, what kind of approach would you take?
The standard JavaScript/TypeScript error-handling mechanism — try/catch — lacks type safety and makes it difficult to track which parts of the code may throw errors.
To solve this issue, a common approach is to use Result types for error handling.
A Result type explicitly represents both a success value and a failure error.

When it comes to Result type libraries in TypeScript, neverthrow is the most well-known and widely used option.
Recently, more comprehensive ecosystems such as Effect have emerged, but if you only need to handle Result types, these can feel like overkill.

In this article, I’ll discuss the limitations I encountered while using neverthrow, how those experiences led me to create a new Result-type library called byethrow, and introduce its core design concepts.

The Limitations I Found with neverthrow

neverthrow is an excellent library that has been adopted in many projects.
I’ve personally used it extensively in real-world projects over the years.
However, as I continued to use it, I started to encounter some design limitations.

Limitations of the Class-Based Design

The neverthrow Result type is implemented as several classes such as Ok, Err, and ResultAsync.
This makes intuitive method chaining possible, but adding your own custom behavior becomes quite difficult.

// Since neverthrow's Result is class-based, you need inheritance to add custom methods.
// However, because all existing methods return the default `Ok`/`Err`,
// you have to override all of them to keep type consistency.
type MyResult<T, E> = MyOk<T, E> | MyErr<T, E>;

class MyOk<T, E> extends Ok<T, E> {
  isOk(): this is MyOk<T, E> {
    return super.isOk();
  }

  map<A>(f: (t: T) => A): MyResult<A, E> {
    return new MyOk(f(this.value))
  }

  // All other methods must be overridden as well
}

class MyErr<T, E> extends Err<T, E> {
  // Same here: all methods need to be overridden
}

As you can see, the class-based design lacks extensibility and makes it difficult to add custom behaviors.
You could avoid this by defining standalone functions instead, but that comes at the cost of convenient method chaining.

Separation of Synchronous and Asynchronous APIs

In neverthrow, different APIs are provided for synchronous and asynchronous Results.

import { ok, okAsync, Result, ResultAsync } from 'neverthrow';

// Synchronous
const syncResult: Result<string, Error> = ok('value');

// Asynchronous
const asyncResult: ResultAsync<string, Error> = okAsync('value');

// When chaining Results
const combined: ResultAsync<string, Error> = ok('value')
  .andThen((value) => ok(value)) // chaining sync Results
  .asyncAndThen((value) => okAsync(`${value} async`)); // chaining async Results

You have to distinguish between ok and okAsync, Result and ResultAsync, and you can’t compose sync and async Results naturally.
In real-world applications, synchronous and asynchronous operations often coexist, so this separation hurts the developer experience.

Stagnant Maintenance

Looking at the neverthrow GitHub repository, you can see that many issues and pull requests have been left unattended for quite some time.
This seems to be mainly because the maintainer is too busy to dedicate enough time to OSS maintenance.

Although a call for maintainers was posted in the past and one maintainer was added, the project still doesn’t see much active maintenance or updates.

Reinventing the Ideal Result Library

To solve these problems, I decided to design and implement a new Result type library from scratch.
While respecting the philosophy of neverthrow, I restructured it with a more functional (FP) approach — this is byethrow.

Core Design of byethrow

byethrow inherits the good parts of neverthrow while aiming for a more flexible and practical design.

Extensible: Users can easily add custom operations
Composable: Works seamlessly across sync and async boundaries
Minimal: Focuses purely on Result, easy to integrate into any codebase

Simple Object Structure

In byethrow, a Result is represented as a simple object, not a class.

import { Result } from '@praha/byethrow';

const success = Result.succeed(42);
// { type: 'Success', value: 42 }

const failure = Result.fail(new Error('Something went wrong'));
// { type: 'Failure', error: Error }

Because it’s not class-based, users can freely add their own functions.
It also supports a flexible, functional programming–friendly design using pipe() to compose operations.

const validateId = (id: string) => {
  if (!id.startsWith('u')) {
    return Result.fail(new Error('Invalid ID format'));
  }
  return Result.succeed(id);
};

const findUser = Result.try({
  try: (id: string) => ({ id, name: 'John Doe' }),
  catch: (error) => new Error('Failed to find user', { cause: error }),
});

const result = Result.pipe(
  Result.succeed('u123'),
  Result.andThrough(validateId),
  Result.andThen(findUser),
);

if (Result.isSuccess(result)) {
  console.log(result.value); // { id: 'u123', name: 'John Doe' }
}

Unified Sync/Async API

With byethrow, you don’t need to care whether a Result is sync or async.

import { Result } from '@praha/byethrow';

// Works with both sync and async values using the same API
const syncResult: Result.Result<string, Error> = Result.succeed('value');
const asyncResult: Result.ResultAsync<string, Error> = Result.succeed(Promise.resolve('value'));

// Promises are automatically promoted to async Results
const combined: Result.ResultAsync<string, Error> = Result.pipe(
  Result.succeed('value'),
  Result.andThen((value) => Result.succeed(value)),
  Result.andThen((value) => Result.succeed(Promise.resolve(`${value} async`))),
);

succeed() and andThen() automatically detect Promises and promote them to asynchronous Results, so developers can build pipelines without worrying about sync/async boundaries.

Useful Functions and Types Absent in neverthrow

byethrow includes many powerful utilities that neverthrow doesn’t provide.

bind: Add Properties to an Object

bind() lets you safely add new properties to an object within a successful Result.

import { Result } from '@praha/byethrow';

const result = Result.pipe(
  Result.succeed({ name: 'Alice' }),
  Result.bind('age', () => Result.succeed(20)),
  Result.bind('email', () => Result.succeed('alice@example.com')),
);

// result: Success<{ name: string, age: number, email: string }>

This is extremely handy when building objects step by step in validation or data-fetching pipelines.

collect / sequence: Aggregate Multiple Results

You can run multiple Results in parallel — if all succeed, their values are merged; if any fail, the errors are aggregated.

import { Result } from '@praha/byethrow';

// For objects
const result = Result.collect({
  user: fetchUser(),
  posts: fetchPosts(),
  comments: fetchComments(),
});
// Success<{ user: User, posts: Post[], comments: Comment[] }> or Failure<Error[]>

// For arrays
const results = Result.collect([
  fetchUser(),
  fetchPosts(),
  fetchComments(),
]);
// Success<[User, Post[], Comment[]]> or Failure<Error[]>

InferSuccess / InferFailure: Automatic Type Extraction

You can automatically extract success and failure types from a Result or a function returning one — both for sync and async Results.

import { Result } from '@praha/byethrow';

type R = Result.Result<number, string>;
type RSuccess = Result.InferSuccess<R>; // number
type RFailure = Result.InferFailure<R>; // string

type AR = Result.ResultAsync<boolean, Error>;
type ARSuccess = Result.InferSuccess<AR>; // boolean
type ARFailure = Result.InferFailure<AR>; // Error

const fn = (value: number) =>
  value < 0 ? Result.fail('Negative value') : Result.succeed(value);
type FnSuccess = Result.InferSuccess<typeof fn>; // number
type FnFailure = Result.InferFailure<typeof fn>; // 'Negative value'

Conclusion

Rather than aiming to be a comprehensive ecosystem like Effect, byethrow focuses solely on the Result type, pursuing a lightweight and practical design.

byethrow is under active development, with ongoing improvements such as:

Enforcing best practices via ESLint rules
Further improving type inference
Enhancing documentation

Since it’s open source, feel free to check out the repository, give it a 🌟, or contribute via PR!
https://github.com/praha-inc/byethrow

If you’re struggling with error handling in TypeScript or feel limited by neverthrow, I encourage you to try out byethrow.
I’d love to hear your feedback.

We also publish several other TypeScript-related libraries that may help in your development — check them out here:

Serving TSDoc to LLMs with an MCP Server

Karibash — Fri, 20 Jun 2025 15:58:49 +0000

Introduction

In recent years, the evolution of large language models (LLMs), such as Claude, has been remarkable. These models are now being widely used across various areas of software engineering, from development support to design discussions.

However, one inherent limitation of LLMs is that their knowledge is confined to the point in time when their training data was last updated. This means they often fail to properly understand or utilize relatively new open-source libraries.

For example, consider our recently published TypeScript package @praha/byethrow, a lightweight and simple Result type library inspired by neverthrow.

When asking Claude or ChatGPT to generate code using this library, they often return inaccurate or misleading responses due to lack of awareness about the library. In some cases, they even hallucinate functions that don't exist or suggest incorrect usage patterns.

To address this issue, we built an MCP (Model Context Provider) server that allows LLMs to reference TSDoc and understand new libraries more accurately.
https://www.npmjs.com/package/@praha/byethrow-mcp

This article outlines the concept and construction of that MCP server.

What is an MCP Server?

MCP (Model Context Provider) is a protocol designed to supply LLMs with additional context or access to external tools.

The typical workflow looks like this:

The LLM sends a request to an external MCP server
The MCP executes logic based on the request and returns a response
The LLM uses that response to take further actions

How Our MCP Works

🧱 Overall Structure

LLM (e.g., Claude)
    ↓ stdin
MCP Server (Node.js)
    ↓
TSDoc Markdown (pre-generated with typedoc)

🛠 Technologies Used

TypeDoc: Generates Markdown docs from TSDoc in @praha/byethrow
@modelcontextprotocol/sdk: MCP server framework
Rslib: Bundles TypeScript code into ESM format

🔍 Request Flow

The LLM queries available tools from the MCP server
It selects a tool and makes a request to the MCP
The MCP returns pre-generated Markdown documentation
The LLM uses this to generate more accurate completions and explanations

📨 Sample Response

If you ask Claude:

Explain byethrow in 3 lines

Normally, Claude might respond inaccurately. But with MCP enabled, you could get a response like:

@praha/byethrow is a library that improves error handling in TypeScript using functional programming. It uses a Result type to explicitly handle errors instead of throwing exceptions, ensuring type-safe error flows. It provides combinators like pipe, andThen, and map to write readable, composable, and debuggable code.

This allows LLMs to answer based on accurate API knowledge.

Building the MCP

🛠 Preparing Documentation

The core information source is TSDoc output in Markdown format. This makes it easier for LLMs to consume and understand the documentation.

Install Required Packages

npm install --save-dev typedoc typedoc-plugin-markdown

`typedoc.json` Configuration

{
  "$schema": "https://typedoc.org/schema.json",
  "entryPoints": ["./src/index.ts"],
  "plugin": ["typedoc-plugin-markdown"],
  "router": "kind",
  "readme": "none",
  "indexFormat": "table",
  "hidePageHeader": true,
  "hideBreadcrumbs": true,
  "useCodeBlocks": true,
  "preserveLinkText": false
}

🔗 Removing In-Page Links

In-page links like [FunctionName](./Functionname) are often noisy for LLMs.
To remove them, create a custom plugin:

// @ts-check
import { MarkdownPageEvent } from 'typedoc-plugin-markdown';
export const load = (app) => {
  app.renderer.on(MarkdownPageEvent.END, (page) => {
    page.contents = page.contents
      .replaceAll(/Defined in: \[[^\]]+\]\([^\)]+\)\s*/g, '')
      .replaceAll(/\[(`?)(.+?)\1\]\([^\)]+\)/g, (_match, _quote, label) => `\`${label}\``);
  });
};

⚙️ Rslib Build Configuration

Include Markdown as a build asset:

// rsbuild.config.ts
import { defineConfig } from '@rslib/core';

export default defineConfig({
  source: {
    tsconfigPath: './tsconfig.build.json',
  },
  lib: [{ format: 'esm' }],
  tools: {
    rspack: {
      module: {
        rules: [
          {
            test: /\.md$/,
            type: 'asset/source',
          },
        ],
      },
    },
  },
});

Add this to avoid type errors with Rspack:

// global.d.ts
/// <reference types="@rspack/core/module" />

🧩 MCP Server Implementation

Server Initialization

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import packageJson from '../package.json';

const server = new McpServer(
  {
    name: '@praha/byethrow',
    version: packageJson.version,
  },
  {
    instructions: 'Use this server to retrieve up-to-date documentation and code examples for @praha/byethrow.',
  },
);

Document Loader

const loadDocument = (key: string) => {
  return import.meta.webpackContext('../docs')(key) as string;
};

Tool Registration

ModuleReference

server.tool(
  'ModuleReference',
  'Returns an overview of @praha/byethrow and its exported modules.',
  () => ({
    content: [{
      type: 'text',
      text: loadDocument('./modules/Result.md'),
    }],
  }),
);

FunctionReference

import { z } from 'zod';
server.tool(
  'FunctionReference',
  'Returns reference and examples for specific functions.',
  { name: z.string().describe('Function name.') },
  ({ name }) => ({
    content: [{
      type: 'text',
      text: loadDocument(`./functions/Result.${name}.md`),
    }],
  }),
);

TypeReference

server.tool(
  'TypeReference',
  'Returns reference and examples for specific types.',
  { name: z.string().describe('Type name.') },
  ({ name }) => ({
    content: [{
      type: 'text',
      text: loadDocument(`./types/Result.${name}.md`),
    }],
  }),
);

Connecting via stdio

import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';

const transport = new StdioServerTransport();
await server.connect(transport);

✅ Verifying MCP Server

To verify the setup, add the following to VSCode settings.json:

{
  "mcp": {
    "servers": {
      "my-mcp-server": {
        "type": "stdio",
        "command": "node",
        "args": ["{path-to-mcp}/dist/index.js"]
      }
    }
  }
}

If the log shows the following, it’s working:

[info] Starting server my-mcp-server
[info] Connection state: starting
[info] Starting server from LocalProcess extension host
[info] Connection state: running
[info] Discovered 3 tools

🎁 Public Repository

The full source code and configuration for the MCP server described in this article is available at:

https://github.com/praha-inc/byethrow/tree/main/packages/mcp

Feel free to clone and try it locally.

Summary

LLMs are powerful but not omniscient. They are bound by a "knowledge cutoff." However, by introducing context-providing layers like MCP, we can bridge this gap.

If you're developing new libraries or using internal tools in your organization, consider adopting this approach to enhance your LLM workflows.

A Tree-Shakable Result Library

Karibash — Tue, 17 Jun 2025 16:29:47 +0000

Introduction

In JavaScript, it's common to interrupt processing using throw for error handling. While this enables a form of non-local exit, TypeScript lacks the ability to statically type these thrown errors, compromising type safety.

To address this, the Result type offers a way to explicitly model success and failure in a function's return value. Libraries such as neverthrow, effect-ts, and fp-ts are commonly used to introduce this pattern into TypeScript.

However, each of these libraries has trade-offs. While neverthrow is relatively simple and user-friendly, it is no longer actively maintained—many pull requests have been left unreviewed for months. On the other hand, effect-ts and fp-ts offer powerful features but come with high complexity and large bundle sizes, which can be overkill when all you need is a clean Result abstraction.

To solve these challenges, we created @praha/byethrow, a simple, tree-shakable library focused solely on the Result type.

https://praha-inc.github.io/byethrow/

Features of `@praha/byethrow`

Class-Free, Object-Based Implementation

@praha/byethrow represents Result values as plain serializable objects instead of classes:
https://github.com/praha-inc/byethrow/blob/9dce606355a85c9983c24803972ce2280b3bafab/packages/byethrow/src/result.ts#L5-L47

This allows you to safely serialize Result instances to JSON, making it ideal for server-client boundaries such as returning from React Server Components' ServerActions. You can return a Result from the server and continue processing it on the client using @praha/byethrow's utility functions.

Tree-Shaking Friendly

@praha/byethrow exposes various utility functions under both individual exports and a unified R namespace:

import { R } from '@praha/byethrow';

const input = R.succeed(2);
const result = R.pipe(
  input,
  R.map((value) => value * 3),
);

The R namespace is implemented via re-exports, enabling tree-shaking by modern bundlers like Vite and Webpack. Unused functions will be automatically excluded from your final bundle.

Unified API for Sync and Async

Whether you're dealing with synchronous Result or asynchronous ResultAsync, you can use the same functions. Unlike neverthrow, which requires separate functions like asyncMap or asyncAndThen, @praha/byethrow allows you to use map, andThen, and others uniformly:

import { R } from '@praha/byethrow';

const result1: R.Result<number, string> = R.pipe(
  R.succeed(2),
  R.andThen((value) => {
    if (value <= 0) {
      return R.fail('Value must be greater than 0');
    }
    return R.succeed(value * 3);
  }),
);

const result2: R.ResultAsync<Response, string> = R.pipe(
  R.succeed('https://example.com'),
  R.andThen((url) => {
    if (!url.startsWith('https')) {
      return R.fail('The URL must begin with https');
    }
    return R.succeed(fetch(url));
  }),
);

This unified interface helps you write intuitive and consistent code without worrying about whether the context is sync or async.

Well-Documented API

All functions come with TSdoc-based examples and explanations, and a comprehensive API reference is available online to help newcomers get started quickly:

We're also planning to add more real-world examples, including mock API servers, in the near future.

Do You Really Need Result?

Some argue that "since you never know where JavaScript will throw, it's pointless to wrap everything in Result".

But I don’t fully agree. The purpose of Result is not to catch every possible error—it’s to handle expected errors predictably.

For example, in a delete-post API:

The post is already deleted
The user doesn't have permission

These are application-level failures that should be handled via Result. On the other hand, database connection issues or unknown exceptions are better off being thrown and logged via services like Sentry.

Conclusion

@praha/byethrow is designed for developers who want to handle errors in a type-safe and lightweight manner.
If neverthrow feels lacking and effect-ts or fp-ts feel too heavy, this library may be just the right fit for you.

If you find it useful, please consider giving the repository a star!
https://github.com/praha-inc/byethrow

Simplifying Test Data Generation with Drizzle ORM

Karibash — Sun, 16 Mar 2025 14:11:42 +0000

Introduction

At our company, we run tests using an actual database with Testcontainers instead of mocking the database during test execution.
To conduct such tests, we need to prepare test data in advance.
However, creating test data can become cumbersome, leading to reduced readability and increased maintenance efforts.

To simplify test data generation, we developed the @praha/drizzle-factory package, which leverages Drizzle ORM.
This article introduces the basic usage of @praha/drizzle-factory.

If you find this article helpful, we would appreciate it if you could star our repository!
https://github.com/praha-inc/drizzle-factory

Difference from drizzle-seed

drizzle-seed is an official Drizzle ORM tool for creating seed data for databases.
It simplifies the data generation process by using a seedable pseudorandom number generator.

On the other hand, @praha/drizzle-factory is designed to quickly build the necessary data when writing test cases.
The key difference from drizzle-seed is that it focuses on explicitly generating data instead of relying on random values.
In our team, we use it not to seed a complete dataset but to generate only the data required for each test case.

How to Use `@praha/drizzle-factory`

This section explains the basic usage of @praha/drizzle-factory, which is essentially the same as what is described in the README.

Installation

First, install the package.

npm install -D @praha/drizzle-factory

By adding the -D option, the library is added to devDependencies, meaning it will be used only in test and development environments rather than production.

Although we do not recommend using it in production, if you need to, install it without the -D option:

npm install @praha/drizzle-factory

Defining a Factory

To generate data, use the defineFactory function to define a factory.

import { defineFactory } from '@praha/drizzle-factory';
import { pgTable, text, integer } from 'drizzle-orm/pg-core';

// We use PostgreSQL as an example, but other databases (MySQL, SQLite, etc.) are also supported.
const schema = {
  users: pgTable('users', {
    id: integer().notNull(),
    name: text().notNull(),
  }),
};

const usersFactory = defineFactory({
  schema,
  table: 'users',
  // `sequence` is an incrementing value each time a new record is generated.
  resolver: ({ sequence }) => ({
    id: sequence,
    name: `name-${sequence}`,
  }),
});

Creating Data

You can generate data using the defined factory.

Creating a Single Record

Calling create without arguments creates a single record.

const user = await usersFactory(database).create();
console.log(user);
/*
{
  id: 1,
  name: 'name-1',
}
*/

Creating Multiple Records

Passing a number as an argument to create generates multiple records.

const users = await usersFactory(database).create(3);
console.log(users);
/*
[
  { id: 1, name: 'name-1' },
  { id: 2, name: 'name-2' },
  { id: 3, name: 'name-3' },
]
*/

Creating Records with Specific Values

By passing an object or an array of objects to create, you can specify values for generated records.

const user = await usersFactory(database).create({ name: 'John Doe' });
console.log(user);
/*
{
  id: 1,
  name: 'John Doe',
}
*/

const users = await usersFactory(database).create([{ name: 'John Doe' }, { name: 'Jane Doe' }]);
console.log(users);
/*
[
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Doe' },
]
*/

Generating Related Data

You can also use other factories to automatically generate related records.

const postsFactory = defineFactory({
  schema,
  table: 'posts',
  resolver: ({ sequence, use }) => ({
    id: sequence,
    // When using `use`, wrap it in a function to ensure it is only executed when needed.
    // This prevents unnecessary data creation when `userId` is explicitly specified.
    userId: () => use(usersFactory).create().then((user) => user.id),
    title: `title-${sequence}`,
  }),
});

Executing create will automatically create records in the users table.

const post = await postsFactory(database).create();
console.log(post);
/*
{
  id: 1,
  userId: 1,
  title: 'title-1',
}
*/

Creating Variations with Traits

Using traits, you can create data that matches specific conditions.

const usersFactory = defineFactory({
  schema,
  table: 'users',
  resolver: ({ sequence }) => ({
    id: sequence,
    name: `name-${sequence}`,
  }),
  traits: {
    admin: ({ sequence }) => ({
      id: sequence,
      name: `admin-${sequence}`,
    }),
  },
});

To generate data using a trait, call it from the traits property.

const adminUser = await usersFactory(database).traits.admin.create();
console.log(adminUser);
/*
{
  id: 1,
  name: 'admin-1',
}
*/

Composing Factories

Instead of importing each factory individually, you can use composeFactory to combine multiple factories into one, making it easier to manage different tables.

import { composeFactory } from '@praha/drizzle-factory';

const factory = composeFactory({
  users: usersFactory,
  posts: postsFactory,
});

Using factory, you can manage data for different tables collectively.

const user = await factory(database).users.create();
console.log(user);
/*
{
  id: 1,
  name: 'name-1',
}
*/

const post = await factory(database).posts.create({ userId: user.id });
console.log(post);
/*
{
  id: 1,
  userId: 1,
  title: 'title-1',
}
*/

Conclusion

Using @praha/drizzle-factory, you can easily generate test data!
We hope this package helps improve test data management and readability in Drizzle ORM projects. Give it a try!

Alternative ni written in fish

Karibash — Wed, 29 Mar 2023 09:37:12 +0000

What is "ni"?

ni is a tool that selects and executes the appropriate package manager, such as npm or yarn, for each project.
It also provides commands such as nun (npm uninstall) and nr (npm run), and common commands other than install have been standardized.

Internally, it uses logic that selects the appropriate package manager from lock files and the packageManager field in package.json.
https://github.com/antfu/ni/blob/main/src/detect.ts

In addition, the options are also converted appropriately according to each package manager, so it absorbs the differences between package managers.
https://github.com/antfu/ni/blob/main/src/agents.ts

zsh version

Someone is working on an implementation of a zsh version of ni.
Unlike the original, this zsh implementation consolidates all the commands into the ni command, so commands such as run and uninstall are executed through ni.

fish version

https://github.com/Karibash/ni.fish

There was a psychological hurdle to the fact that the original ni would define multiple commands with very short names.
I thought the zsh version's approach of handling subcommands was very good, so I created a similar plugin for fish.

Since it is a fish plugin, installation is easy.

fisher install Karibash/ni.fish

The package manager detection logic in the zsh version is slightly different from the original ni, but the fish version tries to use the same logic as much as possible.
It searches recursively for lock files in the parent directories, so it can correctly determine the package manager even when in a subdirectory of a monorepo such as npm workspace.

The simple usage is summarized in README.md, so if you are interested in the details, please check it.
Also, issues, PR, etc. are welcome!
If you like it, I would appreciate a star to the repository.

Handle media queries in a type-safe way using TypeScript

Karibash — Sat, 25 Sep 2021 18:38:47 +0000

I’ve created a library that can execute media queries in a type-safe way with TypeScript.
If you find it useful, I’d appreciate it if you’d give it a star in the repository.

Install

with emotion

npm install @medi-q/core @medi-q/react @medi-q/emotion

with styled-components

npm install @medi-q/core @medi-q/react @medi-q/styled

Usage

Use the MediQProvider component to pass mediQ objects to lower-level components.
Also, only valid units can be specified for BreakPoints, and a type definition error will occur if an invalid unit is entered.

import React from 'react';
import { BreakPoints, createMediQ } from '@medi-q/core';
import { MediQProvider } from '@medi-q/react';

const breakPoints: BreakPoints = {
  tiny: '400px',
  small: '600px',
  medium: '800px',
  large: '1000px',
};

const App: React.FC = () => {
  return (
    <MediQProvider mediQ={createMediQ(breakPoints)}>
      ...
    </MediQProvider>
  );
};

export default App;

By using the useMediQ hook in the lower-level component, you can execute a media query.
Since the arguments of useMediQ hooks are typed to accept only valid values, a typedef error will occur if an invalid value is entered.
You can also execute media queries with multiple conditions by connecting the queries with and or.

import React from 'react';
import { useMediQ } from '@medi-q/react';

const Page: React.FC = () => {
  const isLessThanSmall = useMediQ('max-small');
  const isGreaterThanMedium = useMediQ('min-medium');
  const isBetweenSmallAndMedium = useMediQ('min-small-and-max-medium');
  return (
    <div>
      {isLessThanSmall && <div>isLessThanSmall</div>}
      {isGreaterThanMedium && <div>isGreaterThanMedium</div>}
      {isBetweenSmallAndMedium && <div>isBetweenSmallAndMedium</div>}
    </div>
  );
};

export default Page;

CSS in JS

For use with styled-components and emotion, use medi-q ThemeProvider.

import React from 'react';
import { BreakPoints, createMediQ } from '@medi-q/core';
import { ThemeProvider } from '@medi-q/emotion';
// import { ThemeProvider } from '@medi-q/styled';
import theme from './theme';

const breakPoints: BreakPoints = {
  tiny: '400px',
  small: '600px',
  medium: '800px',
  large: '1000px',
};

const App: React.FC = () => {
  return (
    <ThemeProvider theme={theme} mediQ={createMediQ(breakPoints)}>
      ...
    </ThemeProvider>
  );
};

export default App;

You can use medi-q via theme in styled components as follows.

import React from 'react';
import styled from '@emotion/styled';
// import styled from 'styled-components';
import { useMediQ } from '@medi-q/react';

const Wrapper = styled.div`
  background: ${props => props.theme.background};

  ${props => props.theme.mediQ('max-medium')} {
    background: blue;
  }
`;

const Page: React.FC = () => {
  const isLessThanSmall = useMediQ('max-small');
  const isGreaterThanMedium = useMediQ('min-medium');
  const isBetweenSmallAndMedium = useMediQ('min-small-and-max-medium');
  return (
    <Wrapper>
      {isLessThanSmall && <div>isLessThanSmall</div>}
      {isGreaterThanMedium && <div>isGreaterThanMedium</div>}
      {isBetweenSmallAndMedium && <div>isBetweenSmallAndMedium</div>}
    </Wrapper>
  );
};

export default Page;

When medi-q is used in styled components, it will be converted as follows.

const Wrapper = styled.div`
  background: ${props => props.theme.background};

  ${props => props.theme.mediQ('max-medium')} {
    background: blue;
  }
`;

↓

const Wrapper = styled.div`
  background: ${props => props.theme.background};

  @media (max-width: 50rem) {
    background: blue;
  }
`;

Handle CSS units system in a type-safe way using TypeScript

Karibash — Sat, 07 Aug 2021 19:00:29 +0000

I've created a library that can handle the CSS unit system in a type-safe way with TypeScript, and convert units from one to another.
If you find it useful, I'd appreciate it if you'd give it a star in the repository.

Install

npm install @karibash/pixel-units

Usage

Handle the CSS unit system in a type-safe

import { Unit } from '@karibash/pixel-units';

const pixel: Unit<'px'> = '16px';
const rem: Unit<'rem'> = '1rem';
console.log({ pixel, rem });
// -> {pixel: "16px", rem: "1rem"}

Convert CSS unit systems to each other

import { Unit, convertUnits } from '@karibash/pixel-units';

const pixel: Unit<'px'> = '32px';
const rem = convertUnits(pixel, 'rem');
console.log(rem);
// -> "2rem"

Extract numeric values and units from the unit system

import { Unit, splitUnitValue } from '@karibash/pixel-units';

const pixel: Unit<'px'> = '32px';
const { value, unitSuffix } = splitUnitValue(pixel);
console.log({ value, unitSuffix });
// -> {value: 32, unitSuffix: "px"}

Example of use in React

As an example, we will define a Wrapper component that can dynamically switch between the following paddings.

import React from 'react';
import { Unit } from '@karibash/pixel-units';

type Props = {
  padding: Unit<'rem'>
}
const Wrapper: React: FC<Props> = ({
  children,
  padding,
}) => {
  return (
    <div css={{ padding: `${padding}` }}>
      {children}
    </div>
  );
};

export default Wrapper;

The padding property can be restricted so that it can only accept rem units.
If a value other than rem unit is specified, a compile error will occur.

import React from 'react';
import { Unit } from '@karibash/pixel-units';
import Wrapper from 'components/wrapper';

const Page: React:FC = () => {
  return (
    <>
      <Wrapper padding={'2rem'}>
        rem padding only
      </Wrapper>
      <Wrapper padding={'16px'}>
        compile error
      </Wrapper>
    </>
  );
};

export default Page;

DEV Community: Karibash

Why I Reinvented a Result Type Library

Introduction

The Limitations I Found with neverthrow

Limitations of the Class-Based Design

Separation of Synchronous and Asynchronous APIs

Stagnant Maintenance

Reinventing the Ideal Result Library

Core Design of byethrow

Simple Object Structure

Unified Sync/Async API

Useful Functions and Types Absent in neverthrow

bind: Add Properties to an Object

collect / sequence: Aggregate Multiple Results

InferSuccess / InferFailure: Automatic Type Extraction

Conclusion

Serving TSDoc to LLMs with an MCP Server

Introduction

What is an MCP Server?

How Our MCP Works

🧱 Overall Structure

🛠 Technologies Used

🔍 Request Flow

📨 Sample Response

Building the MCP

🛠 Preparing Documentation

Install Required Packages

typedoc.json Configuration

🔗 Removing In-Page Links

⚙️ Rslib Build Configuration

🧩 MCP Server Implementation

Server Initialization

Document Loader

Tool Registration

Connecting via stdio

✅ Verifying MCP Server

🎁 Public Repository

Summary

A Tree-Shakable Result Library

Introduction

Features of @praha/byethrow

Class-Free, Object-Based Implementation

Tree-Shaking Friendly

Unified API for Sync and Async

Well-Documented API

Do You Really Need Result?

Conclusion

Simplifying Test Data Generation with Drizzle ORM

Introduction

Difference from drizzle-seed

How to Use @praha/drizzle-factory

Installation

Defining a Factory

Creating Data

Creating a Single Record

Creating Multiple Records

Creating Records with Specific Values

Generating Related Data

Creating Variations with Traits

Composing Factories

Conclusion

Alternative ni written in fish

What is "ni"?

zsh version

fish version

Handle media queries in a type-safe way using TypeScript

Install

with emotion

with styled-components

Usage

CSS in JS

Handle CSS units system in a type-safe way using TypeScript

Install

Usage

Handle the CSS unit system in a type-safe

Convert CSS unit systems to each other

Extract numeric values and units from the unit system

Example of use in React

`typedoc.json` Configuration

Features of `@praha/byethrow`

How to Use `@praha/drizzle-factory`