open-index/open-npm huggingface dataset:
npm package: @roadhog/confirm
Description: Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
Latest version: 0.0.2

# create-svelte

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm init svelte

# create a new project in my-app
npm init svelte my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
npm package: @roadhog/fetch
Description: fetch
Latest version: 1.0.2

## Fetch 请求的简单封装

```ts
import { createFetch } from '@roadhog/fetch';

const $fetch = createFetch({
	// 支持字符串或者对象
	// baseURL: 'https://a.com',可省略 base
	baseURL: {
		a: 'https://a.com',
		b: 'https://b.com'
	},
	// baseURL 为字符串；base 可忽略
	// baseURL 为对象；base 可以设置为 baseURL 的 key，不行默认使用第一个key，即：a
	base: 'b',
	// 每个请求会触发
	onRequest: (ctx: FetchContext) => {
		// 设置请求头等
		ctx.options.headers = { token: 'token' };
	},
	onError: (ctx: FetchContext) => {
		// 请求错误
		// message 为每个请求配置的 errorStatusCodes 对应的状态码
		// errorStatusCodes 没有配置则显示默认的http 状态码对应的statusText
		ctx.error?.message;
		ctx.response;
	}
});
```

### `get` 请求

```ts
$fetch.get('/users', { params: { page: 1, max: 10 } });
```

### `post` `put` `patch` `delete` 请求

- `也支持 params 参数`

```ts
// 请求头为 Content-Type: application/x-www-form-urlencoded
// 使用 data
const data = { name: 'fetch' };
$fetch.post('/users', { data });

// 请求头为 Content-Type: application/json
// 使用 data
const body = { name: 'fetch' };
$fetch.post('/users', { body });

// 可以配置http状态码对应的提示
$fetch.post('/users', { errorStatusCodes: { 404: '找不到' } });
```
npm package: @roadhog/loading
Description: Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
Latest version: 0.0.1

# create-svelte

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm init svelte

# create a new project in my-app
npm init svelte my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
npm package: @roadhog/login
Description: 企业微信登录
Latest version: 1.0.1

# 使用

```svelte
<script>
	import Wecom, { currentUser } from '$lib/wecom.svelte';
</script>

<Wecom alias="_login">
	<h1>当前登录用户id: {$currentUser?.id}</h1>
</Wecom>

```
npm package: @roadhog/svelte-router
Description: Config-based routing for Svelte
Latest version: 1.0.1

# Svelte Router

基于配置的 `Svelte` 路由

## 使用

``` ts
<script lang="ts">
  import {currentRoute} from '@roadhog/svelte-router'
  import { router } from '../router';
  router.replace('/users');
  router.push('/users');
  router.push('/users/1');
  router.push({ path: '/users/:id', params: { id: 123 } });
  router.push({ path: '/users/:id', params: { id: 123 }, query: { action: 'push' } });
  router.back();
  router.forward();
  router.go(-1);
  $:console.log('currentRoute', $currentRoute)
</script>
```
`router.ts`

```ts
import { createHashHistory } from '@roadhog/svelte-router';
import Home from './pages/home.svelte';
import Users from './pages/users.svelte';
import User from './pages/user.svelte';

export const router = createHashHistory({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/users',
      name: 'Users',
      component: Users,
    },
    {
      path: '/users/:id',
      name: 'User',
      component: User,
    },
  ],
});

```
`App.svelte` 

```ts
<script lang="ts">
  import { RouterProvider, hashChange } from '@roadhog/svelte-router';
  import { router } from './router';

  hashChange(({ currentRoute, action }) => {
    console.log(action, '当前路由->', currentRoute);
  });
</script>

<RouterProvider {router}>
  <div>这是404页面</div>
</RouterProvider>
```
npm package: @roadhog/toast
Description: 指令式 API
Latest version: 0.0.1

# Toast

指令式 API

## 基础用法

```js
showToast('提示');
```

```js
showToast({
	content: 'Hello World',
	afterClose: () => {
		console.log('after');
	}
});
```

## 图标

成功

```js
showToast({
	icon: 'success',
	content: '保存成功'
});
```

失败

```js
showToast({
	icon: 'fail',
	content: '名称已存在'
});
```