open-index/open-npm huggingface dataset:
npm package: @hiogawa/tiny-cli
Description: simple type-safe command line parsing library
Latest version: 0.0.4-pre.1

# tiny-cli

simple type-safe command line parsing library

## features

- type-safety/inference of command handler function
- automatic help generation
- variadic arguments
- sub commands
- zero dependencies
- ability to reuse zod schema `z.ZodType<T>`

## not supported

- short form option e.g. `-h`
- command option alias
- transform option key from kebab-case to camelCase
- special arguments e.g. `--`

## examples

- https://github.com/hi-ogawa/js-utils/blob/cbc39056a8221463f1b90cf61c411f1037f17ab4/packages/tiny-jwt/src/cli-node.ts
- https://github.com/hi-ogawa/isort-ts/blob/dc95b781cde4b5c7998fc69219fb11eaf055a339/src/cli.ts
- https://github.com/hi-ogawa/ytsub-v3/blob/08e3aed9a8be3472c7b4d0f61a978e546c75eeb8/app/misc/cli.ts
- see also various tests `./src/*.test.ts`
npm package: @hiogawa/tiny-di
Description: Extremely simple dependency injection library. See `./src/index.test.ts` for the basic usage.
Latest version: 0.0.0

# tiny-di

Extremely simple dependency injection library.
See `./src/index.test.ts` for the basic usage.

The idea is similar to [tsyringe](https://github.com/microsoft/tsyringe)'s constructor injection
but this library has following benefits:

- extreme simplicity (~ 100 LOC)
- it doesn't rely on typescript decorator metadata and thus doesn't require special setup for vite/esbuild based proejcts.
- it provides a dependency graph to implement, for example, own per-module setup/teardown hooks very easily.

# ideas

- https://github.com/microsoft/tsyringe
- https://docs.nestjs.com/fundamentals/lifecycle-events
npm package: @hiogawa/tiny-jwt
Description: Minimal JWT library base on [`WebCrypto`](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) API.
Latest version: 0.2.8-pre.2

# tiny-jwt

Minimal JWT library base on [`WebCrypto`](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) API.

See tests `./src/*.test.ts` for the usage.

```sh
# generate key in JWK format
tiny-jwt keygen HS256
{
  "key_ops": [
    "sign",
    "verify"
  ],
  "ext": true,
  "kty": "oct",
  "k": "eIlE_krFljjdMaGOEUHqTkvBgknkEQK_Q3VjMHDagJlde-36x1YXfjowvKs8mTSH6gJyml6HvW1qLhG75HOW_g",
  "alg": "HS256"
}
```

## todo

- [x] JWS (json web signature)
  - [x] HMAC (alg = HS256)
  - [x] ECDSA (alg = ES256)
- [x] JWE (json web encryption)
  - [x] AES-GCM (alg = dir, enc = A256GCM)
- [x] support `exp`
- [ ] more tests
- [x] demo cli (key generation, etc...)
- [ ] demo frontend

## references

- JWT https://datatracker.ietf.org/doc/html/rfc7519
- JWS https://datatracker.ietf.org/doc/html/rfc7515
- JWE https://datatracker.ietf.org/doc/html/rfc7516
- JWA https://datatracker.ietf.org/doc/html/rfc7518
- JWK https://datatracker.ietf.org/doc/html/rfc7517
- https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API
- https://nodejs.org/docs/latest-v18.x/api/webcrypto.html
- https://developers.cloudflare.com/workers/runtime-apis/web-crypto/
- https://github.com/hattipjs/hattip/blob/0001d4023eebb27cd6e127952a3ff00a2fdf425b/packages/middleware/session/src/crypto.ts
- https://github.com/remix-run/remix/blob/100ecd3ea686eeec14f17fa908116b74aebdb91c/packages/remix-cloudflare/crypto.ts
- https://github.com/auth0/node-jws/blob/b9fb8d30e9c009ade6379f308590f1b0703eefc3/lib/sign-stream.js
- https://github.com/panva/jose/blob/e2836e6aaaddecde053018884abb040908f186fd/src/runtime/browser/sign.ts
npm package: @hiogawa/tiny-react
Description: Experiment to study react-like virtual-dom rendering implementation.
Latest version: 0.1.1

# tiny-react

Experiment to study react-like virtual-dom rendering implementation.

Internal architecture is inspired by [yew](https://github.com/yewstack/yew)

## features

- client side rendering
- functional component
- hooks
- jsx-runtime (similar typescript DX as react)
- hmr (via [`tiny-refresh`](https://github.com/hi-ogawa/js-utils/blob/a93f919c083c3ab0f505f1179124397c8f8f1b0d/packages/tiny-refresh/README.md))
- ssr
- server component and client reference

## unsupported

- context https://github.com/hi-ogawa/js-utils/pull/151
- suspense
- error boundary
- forwardRef
- portal
- dangerouslySetInnerHTML
- mutable ref
- defaultValue
- onChange
- svg
- ...

## example

See example app in `./examples/basic`

- https://tiny-react-hiro18181.vercel.app

## links

- https://github.com/preactjs/preact
- https://github.com/snabbdom/snabbdom
- https://github.com/yewstack/yew
- https://github.com/DioxusLabs/dioxus
npm package: @hiogawa/tiny-refresh
Description: Simple Vite plugin for React-like component HMR
Latest version: 0.1.1

# tiny-refresh

Simple Vite plugin for React-like component HMR

## usages

```tsx
// vite.config.ts
import { defineConfig } from "vite";
import { vitePluginTinyRefresh } from "@hiogawa/tiny-refresh/vite";

export default defineConfig({
  plugins: [
    vitePluginTinyRefresh({
      runtime: "react", // "preact/compat", "@hiogawa/tiny-react"
    }),
  ],
});
```
npm package: @hiogawa/tiny-rpc
Description: Simpler but generalized alternative of `tRPC` and `comlink`.
Latest version: 0.2.3-pre.18

# tiny-rpc

Simpler but generalized alternative of `tRPC` and `comlink`.

As `tRPC` alternative:

- no distinction of `query` and `mutation`
- no builtin `context` in favor of letting users impelemnt own logic by [`AsyncLocalStorage`](https://nodejs.org/api/async_context.html)
- no builtin "react-query" integration in favor of making use of general `@hiogawa/query-proxy`

As `comlink` alternative:

- no callback

## inspired by

- https://github.com/trpc/trpc
- https://github.com/antfu/birpc
- https://github.com/GoogleChromeLabs/comlink/
- https://github.com/brillout/telefunc

## examples

- https://github.com/hi-ogawa/toy-metronome/tree/ff0a853eb693b583167c86670be06e4cc3b6449c/src/audioworklet
- https://github.com/hi-ogawa/argon2-wasm-bindgen/tree/650cc380689074be3574e3166178d76763f169cd/packages/app/src/argon2
- https://github.com/hi-ogawa/ytsub-v3/tree/c4cf2b220ca317dbbd63cf7d8fa5725c32d5d4f9/app/trpc
- https://github.com/hi-ogawa/youtube-dl-web-v2/tree/f187548ddebbf4aa67a9552b57ccc511b113e6cf/packages/app/src/trpc
npm package: @hiogawa/tiny-store
Description: Simple platform-agnostic global state utility with trivial react integration via [`useSyncExternalStore`](https://react.dev/reference/react/useSyncExternalStore).
Latest version: 0.0.1-pre.4

# tiny-store

Simple platform-agnostic global state utility with trivial react integration via [`useSyncExternalStore`](https://react.dev/reference/react/useSyncExternalStore).
npm package: @hiogawa/tiny-toast
Description: Simple framework-agnostic toast UI
Latest version: 0.1.1-pre.10

# tiny-toast

Simple framework-agnostic toast UI

## examples

- https://unocss-preset-antd-hiro18181.vercel.app/Toast
- https://unocss-preset-antd-solidjs-hiro18181.vercel.app/Toast
- https://tiny-toast-hiro18181-hiogawa.vercel.app/?tiny-react
npm package: @hiogawa/tiny-transition
Description: Simple framework-agnostic transition-based animation utility. API is similar to [headlessui's `Transition`](https://headlessui.com/react/transition).
Latest version: 0.0.1-pre.5

# tiny-transition

Simple framework-agnostic transition-based animation utility.
API is similar to [headlessui's `Transition`](https://headlessui.com/react/transition).

## examples

- https://unocss-preset-antd-hiro18181.vercel.app/Slide
- https://unocss-preset-antd-hiro18181.vercel.app/Collapse
- https://unocss-preset-antd-hiro18181.vercel.app/Toast
- https://unocss-preset-antd-hiro18181.vercel.app/Modal
- https://unocss-preset-antd-hiro18181.vercel.app/Popover
- https://unocss-preset-antd-solidjs-hiro18181.vercel.app/Transition
- https://unocss-preset-antd-solidjs-hiro18181.vercel.app/Drawer
- https://unocss-preset-antd-solidjs-hiro18181.vercel.app/Popover

## limitation compared to `@headlessui/react`

- always `remount`
- no `Transition.Child`
  - this can be mostly workaround by setting same animation duration for all components
npm package: @hiogawa/transforms
Description: ## todo
Latest version: 0.1.6

# transforms

## todo

- [x] transformHoistInlineDirective (for inline server action)
  - [ ] closure encryption
- [x] transformWrapExport (for "use server" file)
- [x] transformProxyExport (for "use server" and "use client" files)
- [ ] [bling](https://github.com/TanStack/bling)-style function extraction
- [ ] dead code elimination
npm package: @hiogawa/vite-import-dev-server
Description: for some reason [`@vavite/expose-vite-dev-server`](https://github.com/cyco130/vavite/blob/3cf52a5bd25deadde0949a52be31af1ad04c36d8/packages/expose-vite-dev-server/readme.md) is not working, so this is a simplified version of it to make the same thing work
Latest version: 0.0.1

# vite-import-dev-server

for some reason [`@vavite/expose-vite-dev-server`](https://github.com/cyco130/vavite/blob/3cf52a5bd25deadde0949a52be31af1ad04c36d8/packages/expose-vite-dev-server/readme.md) is not working, so this is a simplified version of it to make the same thing work.

```sh
pnpm build
pnpm release
```
npm package: @hiogawa/vite-node-miniflare
Description: > [!note] > now it uses [`ViteRuntime`](https://github.com/vitejs/vite/discussions/15774) instead of `vite-node`
Latest version: 0.1.1

# vite-node-miniflare

> [!note]
> now it uses [`ViteRuntime`](https://github.com/vitejs/vite/discussions/15774) instead of `vite-node`

Running [`vite-node`](https://github.com/vitest-dev/vitest/tree/main/packages/vite-node) on [`miniflare`](https://github.com/cloudflare/workers-sdk/tree/main/packages/miniflare).

See https://github.com/dario-piotrowicz/vite-workerd-ssr-request-handler-experimentation/pull/1 for the motivation.

See https://github.com/hi-ogawa/vite-plugins/issues/127 for known limitations.

## examples

- [`vite-runtime-workerd-examples`](https://github.com/hi-ogawa/vite-runtime-workerd-examples) : example repository with Cloudflare Pages deployment
- [`./examples/basic`](./examples/basic) : Simple demo of SSR, Hydration and HMR with [`@hiogawa/tiny-react`](https://github.com/hi-ogawa/js-utils/tree/main/packages/tiny-react)
- [`./examples/react`](./examples/react) : Simple demo with React
- [`./examples/react-router`](./examples/react-router) : React Router SSR application with [`@hiogawa/vite-glob-routes`](https://github.com/hi-ogawa/vite-plugins)
- [`./examples/remix`](./examples/remix) : [Remix Vite Plugin](https://remix.run/docs/en/main/future/vite) integration

## usage

```ts
//
// vite.config.ts
//
import { defineConfig } from "vite";
import { vitePluginViteNodeMiniflare } from "@hiogawa/vite-node-miniflare";

export default defineConfig({
  plugins: [vitePluginViteNodeMiniflare({ entry: "/worker-entry.ts" })],
});

//
// worker-entry.ts
//
export default {
  async fetch() {
    return new Response("hello workerd");
  },
};
```

## credits/references

- https://github.com/dario-piotrowicz/vite-workerd-ssr-request-handler-experimentation
- https://github.com/vitest-dev/vitest/tree/main/packages/vite-node
- https://github.com/cloudflare/workers-sdk/tree/main/packages/miniflare
- https://github.com/nuxt/nuxt/blob/1de44a5a5ca5757d53a8b52c9809cbc027d2d246/packages/vite/src/vite-node.ts
- https://github.com/sapphi-red/vite-envs/tree/use-vite-runtime
- https://github.com/vitejs/vite/discussions/14288
npm package: @hiogawa/vite-null-export
Description: Vite port of remix's server/client-only file convention plugin https://github.com/remix-run/remix/blob/80c6842f547b7e83b58f1963894b07ad18c2dfe2/packages/remix-dev/compiler/plugins/emptyModules.ts#L10
Latest version: 0.0.0

# vite-null-export

Vite port of remix's server/client-only file convention plugin https://github.com/remix-run/remix/blob/80c6842f547b7e83b58f1963894b07ad18c2dfe2/packages/remix-dev/compiler/plugins/emptyModules.ts#L10

```sh
pnpm build
pnpm release
```
npm package: @hiogawa/vite-plugin-error-overlay
Description: Vite plugin to show client runtime error via builtin error overlay.
Latest version: 0.0.1

# vite-plugin-error-overlay

Vite plugin to show client runtime error via builtin error overlay.

cf. https://github.com/vitejs/vite/pull/6274

## usage

```ts
import { defineConfig } from "vite";
import { vitePluginErrorOverlay } from "@hiogawa/vite-plugin-error-overlay";

export default defineConfig({
  plugins: [vitePluginErrorOverlay()],
});
```
npm package: @hiogawa/vite-plugin-import-attributes
Description: A Vite plugin that transforms [import attributes](https://github.com/tc39/proposal-import-attributes) into query parameters, enabling custom module handling based on import metadata.
Latest version: 0.0.0

# @hiogawa/vite-plugin-import-attributes

A Vite plugin that transforms [import attributes](https://github.com/tc39/proposal-import-attributes) into query parameters, enabling custom module handling based on import metadata.

This is a userland implementation of the feature discussed in https://github.com/vitejs/vite/discussions/18534#discussioncomment-12078191.

## Installation

```bash
npm install @hiogawa/vite-plugin-import-attributes
```

## Usage

The plugin transforms import statements with attributes into imports with query parameters, allowing other plugins to access and process these attributes, for example:

```js
// [entry.js]
import Counter from "./counter" with { island: "client-only" };

// [counter.js]
export function Counter() { ... }
```

```js
// [vite.config.ts]
import { defineConfig } from "vite";
import importAttributes, {
  getImportAttributesFromId,
} from "@hiogawa/vite-plugin-import-attributes";

export default defineConfig({
  plugins: [
    importAttributes(),
    {
      name: "island-plugin",
      load(id) {
        const { rawId, attributes } = getImportAttributesFromId(id);
        if (attributes["island"] === "client-only") {
          // Custom transformation based on attributes
          return ...
        }
      },
    },
  ],
});
```

## API

### `importAttributes(options?)`

The main plugin function.

#### Options

- `include`: String, RegExp, or array of patterns to include (default: all files)
- `exclude`: String, RegExp, or array of patterns to exclude (default: `/node_modules/`)

### `getImportAttributesFromId(id)`

Utility function to extract attributes from a transformed module ID.

#### Returns

```ts
{
  rawId: string; // Original module ID without attribute parameters
  attributes: Record<string, unknown>; // Parsed attributes object
}
```

## How It Works

1. The plugin transforms import statements with attributes:

   ```js
   // Before transformation
   import { Counter } from "./counter" with { island: "client-only" };

   // After transformation
   import { Counter } from "./counter?__attributes=%7B%22island%22%3A%22client-only%22%7D";
   ```

2. Other Vite plugins can then use `getImportAttributesFromId` to extract and process these attributes during module resolution or transformation.
npm package: @hiogawa/vite-plugin-nitro
Description: Vite plugin for cross platform build using [Nitro](https://nitro.build/). This is an intermediate solution based on Nitro v2. In the future, it's planned to be superseded by official Vite plugin provided by [Nitro v3](https://github.com/nitrojs/nitro/issu
Latest version: 0.0.4

# @hiogawa/vite-plugin-nitro

Vite plugin for cross platform build using [Nitro](https://nitro.build/).
This is an intermediate solution based on Nitro v2. In the future, it's planned to be superseded by official Vite plugin provided by [Nitro v3](https://github.com/nitrojs/nitro/issues/3461).

## Example with [`@vitejs/plugin-rsc`](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc)

See also [vite-plugin-rsc-deploy-example](https://github.com/hi-ogawa/vite-plugin-rsc-deploy-example)

```js
// vite.config.ts
import { defineConfig } from "vite";
import nitro from "@vitejs/vite-plugin-rsc"
import rsc from "@hiogawa/vite-plugin-nitro"

export default defineConfig({
  plugins: [
    rsc(),
    nitro({
      server: {
        environmentName: "rsc",
      },
      config: {
        // Nitro automatically chooses a preset based on deployed environment,
        // but it can be explicitly specified if needed. e.g.
        // preset: 'vercel',
      },
    }),
  ],
});
```
npm package: @hiogawa/vite-plugin-pre-bundle-new-url
Description: Vite plugin to handle `new URL(..., import.meta.url)` and `new Worker(new URL(..., import.meta.url))` for pre-bundled dependencies.
Latest version: 0.0.0-pre.7

# vite-plugin-pre-bundle-new-url

Vite plugin to handle `new URL(..., import.meta.url)` and `new Worker(new URL(..., import.meta.url))`
for pre-bundled dependencies.

It uses esbuild's [`onLoad`](https://esbuild.github.io/plugins/#on-load) hook to transform in a following way:

```ts
// some-package/
//   index.js
//   image.svg
//   worker.js

// some-package/index.js
new URL("./image.svg", import.meta.url)
new Worker(new URL("./worker.js", import.meta.url))

// ⇓ transform (worker.js is recursively bundled using esbuild)

new URL("./__assets-image-(hash).svg", import.meta.url)
new Worker(new URL("./__workers-worker-(hash).js", import.meta.url))
```

Note that this is only to support `new URL` in _external packages_ during _development_
since Vite's normal transform pipeline works for non pre-bundled code.

## related

- https://github.com/vitejs/vite/pull/13501
- https://github.com/vitejs/vite/pull/16418
- https://github.com/chialab/rna/tree/main/packages/esbuild-plugin-meta-url
- https://github.com/users/hi-ogawa/projects/4/views/1?pane=issue&itemId=73410910
npm package: @hiogawa/vite-plugin-server-asset
Description: ## `vitePluginFetchUrlImportMetaUrl`
Latest version: 0.0.1

# vite-plugin-server-asset

## `vitePluginFetchUrlImportMetaUrl`

This plugin allows server side asset loading using `fetch(new URL("...", import.meta.url))`.
This pattern is available on [Next.js edge runtime](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#using-edge-runtime-with-local-assets)
and also it might become possible on [NodeJs](https://github.com/nodejs/undici/issues/2751#issuecomment-1944132179).

```ts
const fallbackFont = fetch(
  new URL("./noto-sans-v27-latin-regular.ttf", import.meta.url),
).then((res) => res.arrayBuffer());

// ⇓⇓⇓ transform

// buildMode: "fs"
const fallbackFont = (async () => {
  const fs = await import("node:fs");
  const { fileURLToPath } = await import("node:url");
  return new Response(
    fs.readFileSync(
      fileURLToPath(
        new URL("noto-sans-v27-latin-regular-CirskmZh.ttf", import.meta.url).href,
      ),
    ),
  );
})().then((res) => res.arrayBuffer());

// buildMode: "import"
const fallbackFont = import("./noto-sans-v27-latin-regular.ttf-CirskmZh.bin")
  .then((mod) => new Response(mod.default))
  .then((res) => res.arrayBuffer());
```

## `vitePluginWasmModule`

This plugin enables `.wasm?module` import as a uniform syntax to initialize `WebAssembly.Module`
since [Cloudflare](https://developers.cloudflare.com/pages/functions/module-support) requires `.wasm` to be initialized through `import`.

```ts
import resvg_wasm from "./resvg.wasm?module";

// ⇓⇓⇓ transform

// buildMode: "fs"
const resvg_wasm = new WebAssembly.Module(
  fs.readFileSync(
    fileURLToPath(new URL("resvg-Cjh1zH0p.wasm", import.meta.url).href),
  ),
);

// buildMode: "import"
import __wasm_B7t_kJnM from "./resvg-Cjh1zH0p.wasm"
```

## hooks

Custom hooks are provided to run `.bin` and `.wasm` on Node.

```ts
// to import "xxx.bin"
//   node --import '@hiogawa/vite-plugin-server-asset/hooks/register-data'
// or programatically
import { register } from "node:module"
register("@hiogawa/vite-plugin-server-asset/hooks/data", import.meta.url);

// to import "xxx.wasm"
//   node --import '@hiogawa/vite-plugin-server-asset/hooks/register-wasm'
// or programatically
import { register } from "node:module"
register("@hiogawa/vite-plugin-server-asset/hooks/wasm", import.meta.url);
```

### references

- https://developers.cloudflare.com/pages/functions/module-support
- https://vercel.com/docs/functions/wasm
- https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#using-edge-runtime-with-local-assets
- https://github.com/nodejs/undici/issues/2751#issuecomment-1944132179
npm package: @hiogawa/vite-plugin-simple-hmr
Description: Simple HMR to reassign all exports, which can be useful for [SSR HMR](https://github.com/vitejs/vite/pull/12165) to accompany with React plugin's client HMR.
Latest version: 0.0.1-pre.0

# vite-plugin-simple-hmr

Simple HMR to reassign all exports, which can be useful for [SSR HMR](https://github.com/vitejs/vite/pull/12165) to accompany with React plugin's client HMR.

## example

See [./examples/react](./examples/react).

```tsx
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { vitePluginSimpleHmr } from "@hiogawa/vite-plugin-simple-hmr";

export default defineConfig({
  plugins: [
    react(),
    vitePluginSimpleHmr({
      include: ["**/*.tsx"],
    }),
  ],
});
```
npm package: @hiogawa/vite-plugin-ssr-css
Description: This plugin provides `virtual:ssr-css.css` to collect styles reachable from `entries`.
Latest version: 0.0.1

# vite-plugin-ssr-css

This plugin provides `virtual:ssr-css.css` to collect styles reachable from `entries`.

When using `ViteDevServer.transformIndexHtml`, it will inject `<link rel="stylesheet" href="/@id/__x00__virtual:ssr-css.css" />` to `<head>`.

This works only during development.

## usage

```ts
import { defineConfig } from "vite";
import { vitePluginSsrCss } from "@hiogawa/vite-plugin-ssr-css";

export default defineConfig({
  plugins: [vitePluginSsrCss({ entries: ["/src/entry-client"] })],
});
```
npm package: @hiogawa/vite-plugin-ssr-middleware
Description: Minimal version of [`@vavite/connet`](https://github.com/cyco130/vavite/tree/main/packages/connect) and [`@vavite/expose-vite-dev-server`](https://github.com/cyco130/vavite/tree/main/packages/expose-vite-dev-server)
Latest version: 0.0.3

# vite-plugin-ssr-middleware

Minimal version of [`@vavite/connet`](https://github.com/cyco130/vavite/tree/main/packages/connect)
and [`@vavite/expose-vite-dev-server`](https://github.com/cyco130/vavite/tree/main/packages/expose-vite-dev-server)

## example

```ts
//
// vite.config.ts
//
import { defineConfig } from "vite";
import { vitePluginSsrMiddleware } from "@hiogawa/vite-plugin-ssr-middleware";
import path from "node:path";

export default defineConfig({
  plugins: [
    vitePluginSsrMiddleware({
      entry: "./server.ts",
      preview: path.resolve("./dist/server/index.js"),
    }),
  ],
  build: {
    outDir: "dist/server",
  },
});

//
// server.ts
//
import type { IncomingMessage, ServerResponse } from "node:http";
import type { ViteDevServer } from "vite";

export default function handler(
  req: IncomingMessage & { viteDevServer: ViteDevServer },
  res: ServerResponse,
  next: () => void
) {
  res.end("hello!");
}
```
npm package: @hiogawa/vite-rsc-react-router
Description: This is a package to integrate [Experimental React Router RSC support](https://remix.run/blog/rsc-preview) on Vite using [`@hiogawa/vite-rsc`](https://github.com/hi-ogawa/vite-plugins/tree/main/packages/rsc). It provides a basic [`routes.ts`](https://reac
Latest version: 0.0.0

# @hiogawa/vite-rsc-react-router

This is a package to integrate [Experimental React Router RSC support](https://remix.run/blog/rsc-preview) on Vite using [`@hiogawa/vite-rsc`](https://github.com/hi-ogawa/vite-plugins/tree/main/packages/rsc). It provides a basic [`routes.ts`](https://reactrouter.com/explanation/special-files#routests) support. See [rsc-movies](https://github.com/hi-ogawa/rsc-movies/) for an example.

## Usage

- `vite.config.ts`

```js
import rsc from "@hiogawa/vite-rsc/plugin";
import { reactRouter } from "@hiogawa/vite-rsc-react-router/plugin";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    reactRouter(),
    rsc(),
  ],
});
```
npm package: @hiogawa/vite-runtime-error-overlay
Description: Vite plugin to show client runtime error via builtin error overlay. Based on the idea from https://github.com/vitejs/vite/pull/6274#issuecomment-1087749460
Latest version: 0.0.1
Deprecated: Superseded by @hiogawa/vite-plugin-error-overlay

# vite-runtime-error-overlay

Vite plugin to show client runtime error via builtin error overlay.
Based on the idea from https://github.com/vitejs/vite/pull/6274#issuecomment-1087749460

## usage

```ts
import { defineConfig } from "vite";
import { viteRuntimeErrorOverlayPlugin } from "@hiogawa/vite-runtime-error-overlay";

export default defineConfig({
  plugins: [viteRuntimeErrorOverlayPlugin()],
});
```

## development

```sh
pnpm build
pnpm release
```
npm package: @hiogawa/vscode-e2e
Description: Using [Playwright Electron](https://playwright.dev/docs/api/class-electron) for [VS Code Extension](https://code.visualstudio.com/api) E2E testing
Latest version: 0.0.2-pre.0

# vscode-e2e

Using [Playwright Electron](https://playwright.dev/docs/api/class-electron)
for [VS Code Extension](https://code.visualstudio.com/api) E2E testing

## Usage

This package offers a custom [`Vitest fixture`](https://vitest.dev/guide/test-context.html#extend-test-context)
for simplified test setup in Vitest.

It also includes `execute` utility to enable direct access to
[`vscode` API](https://code.visualstudio.com/api/references/vscode-api)
from your test code.

```ts
import { expect } from "vitest";
import { vscodeTest } from "@hiogawa/vscode-e2e/vitest";

vscodeTest("example", async ({ launch }) => {
  const { page, execute } = await launch({
    extensionPath: "./",
    workspacePage: "./examples/basic",
    trace: "on",
  });

  // Open command pallete
  await page.keyboard.press("Control+Shift+P");

  // Run "New Untitled ..." command
  await page.getByPlaceholder("Type the name of a command to").fill(">untitle");
  await page
    .locator("div")
    .filter({ hasText: /^File: New Untitled Text File$/ })
    .nth(1)
    .click();

  // Check editor panel
  await page.getByText("Untitled-").click();
  await page.getByText("Select a language, or fill").click();

  // Write something
  await page.keyboard.type("hello\nworld");

  // Can access `vscode` API to write assertions which are difficult with `page` API
  expect(
    await execute((vscode) =>
      vscode.window.activeTextEditor?.document.getText(),
    ),
  ).toMatchInlineSnapshot(`
    "hello
    world"
  `);
});
```

You can also configure default settings via `VSCODE_E2E_...` environment variables:

```ts
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    env: {
      VSCODE_E2E_EXTENSION_PATH: "./",
      VSCODE_E2E_WORKSPACE_PATH: "./examples/basic",
      VSCODE_E2E_TRACE: "on",
    },
  },
});
```

Like on Playwright, you can use [`page.pause()`](https://playwright.dev/docs/api/class-page#page-pause)
to open [Playwright Inspector](https://playwright.dev/docs/debug#playwright-inspector)
and record interactions and assertions.

![image](https://github.com/hi-ogawa/vscode-extension-shell-shortcut/assets/4232207/a508ddf1-4365-4743-8a59-73c62ca07c3d)

Outside of Vitest, you can use `launch` utility directly:

```ts
import { launch } from "@hiogawa/vscode-e2e";

const { app, execute } = await launch({
  extensionPath: "./",
  workspacePath: "./example/basic",
});
const page = await app.firstWindow();
await page.pause();
```

## Credits

Inspired by following projects

- https://github.com/microsoft/playwright-vscode/pull/353
- https://github.com/webdriverio-community/wdio-vscode-service/
- https://github.com/redhat-developer/vscode-extension-tester/
npm package: @hiogawa/zip.wasm
Description: ```sh # build pnpm i npm run dev
Latest version: 1.0.2

# zip.wasm

```sh
# build
pnpm i
npm run dev

# example
node bin/zip-info.js ../tests/data/files_and_dirs.zip
node bin/zip-extract.js ../tests/data/files_and_dirs.zip 0

# release
npm run build
npm publish --access public
```
npm package: @hiogopariz/react-object-forms
Description: [![NPM](https://img.shields.io/npm/v/@hiogopariz/react-object-forms.svg)](https://www.npmjs.com/package/@hiogopariz/react-object-forms) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
Author: HiogoPariz
Latest version: 1.0.0

# react-object-forms

[![NPM](https://img.shields.io/npm/v/@hiogopariz/react-object-forms.svg)](https://www.npmjs.com/package/@hiogopariz/react-object-forms) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @hiogopariz/react-object-forms

or

yarn add @hiogopariz/react-object-forms
```

## Usage

Create your form inputs once, use it everywhere

```jsx
import React from 'react';

import { createFormTemplate } from 'react-object-forms';

function CustomInput({value, onChange, ...props}) {
 return <input value={value} onChange={(e) => onChange(e.target.value)} {...props} />;
}

function CustomFormContainer({ onSubmit, fields }) {
 return (
  <form onSubmit={onSubmit}>
   {fields}
   <input type='submit' />
  </form>
 );
}

const myFormTemplate = createFormTemplate({
 components: [['input', CustomInput]],
 wrapper: CustomFormContainer,
});

const MyCustomForm = myFormTemplate.generate({
 name: 'input',
 email: {
  component: 'input',
  props: {
   type: 'email',
  },
 },
});

function App() {
 const onSubmit = (data) => console.log(data);
 const defaultValues = {
  name: '',
  email: '',
 };

 return <MyCustomForm onSubmit={onSubmit} defaultValues={defaultValues} />;
}
```

## License

MIT © [HiogoPariz](https://github.com/HiogoPariz)
npm package: @hiorii/randomid-generator
Description: ## Installation
Author: Bartosz Janiak
Latest version: 1.0.1

# @hiorii/randomid-generator

## Installation

<p>npm i @hiorii/randomid-generator</p>
<p>or</p>
<p>yarn add @hiorii/randomid-generator</p>

## Usage

```
const randomID = require('@hiorii/randomid-generator');

console.log(randomID(10)); //it will returns ten random characters
```
npm package: @hipaymn/miniapp-sdk
Description: Hipay MiniApp SDK – A global bridge for building MiniApps in the Hipay SuperApp ecosystem.
Author: Hipay LLC
Latest version: 1.0.4

# @hipaymn/miniapp-sdk

**Hipay MiniApp SDK** – A global JavaScript bridge for building MiniApps in the **Hipay SuperApp** ecosystem. Provides a clean, Promise-based API for MiniApps to communicate with the native container, such as payments, navigation, and device features.

---

## Installation

```bash
npm install @hipaymn/miniapp-sdk
```

or

```bash
yarn add @hipaymn/miniapp-sdk
```

---

## Usage

### Named Imports

```ts
import { pay, navigate, back } from "@hipaymn/miniapp-sdk";

await pay("checkout_123");
navigate("Home", { from: "checkout" });
back();
```

### Default Import

```ts
import wallet from "@hipaymn/miniapp-sdk";

await wallet.pay("checkout_123");
wallet.navigate("Home");
wallet.back();
```

---

## API Reference

### `pay(checkoutId: string)`

Initiates a payment in the Hipay container.

```ts
await wallet.pay("checkout_123");
```

### `navigate(screen: string, params?: object)`

Navigate to a specific screen in the Hipay container.

```ts
await wallet.navigate("Home", { from: "checkout" });
```

### `back()`

Navigates back to the previous screen in the container.

```ts
await wallet.back();
```

---

## MiniApp Requirements

* Must run inside the **Hipay SuperApp WebView** container.
* `HPSNative` bridge is injected automatically before MiniApp scripts run.
* Using this SDK outside the container will throw errors.

---

## Contributing

1. Fork the repository
2. Run `npm install`
3. Make your changes in `src/`
4. Run `npm run build`
5. Submit a pull request

---

## License

MIT © Hipay LLC