open-index/open-npm huggingface dataset:
npm package: @swizzyweb/swizzy-frontend-template-web-service
Description: Template for swizzyweb frontend web services
Author: Jason Gallagher
Latest version: 0.2.4

# swizzy-frontend-template-web-service

Sample react and tailwind based swizzy frontend web service. The sample app has a react based frontend
and a swizzy web service backend. A sample implementation of an api can be found in the
routers/Api directory.

## Web service

The Swizzy web service logic can be found in the src directory.

## React

The react code is in the react directory.

## Running

## Install

```npm
npm install
```

## Build and run immediately

```npm
npm run dev
```

## Only build

```npm
npm run build
```

## Running server after build

```npm
npm run server
```

## With swerve

After build you can just run `swerve` in the root directory.

## express update

V0.2.3 upgrades express to v5.x which requires swerve v0.6.0 or later
npm package: @swj_ld/ld-component-library
Description: A set of custom components for uni-app
Author: Joy
Latest version: 1.1.2

# @swj_ld/ld-component-library

> 一套专为 **uni-app** 打造的轻量级 Vue 3 组件库，支持 **H5、微信小程序、支付宝小程序等全平台**，开箱即用。

[![npm version](https://img.shields.io/npm/v/@swj_ld/ld-component-library?color=green)](https://www.npmjs.com/package/@swj_ld/ld-component-library)
[![license](https://img.shields.io/npm/l/@swj_ld/ld-component-library)](LICENSE)
[![minzipped size](https://img.shields.io/bundlephobia/minzip/@swj_ld/ld-component-library?label=minzipped)](https://bundlephobia.com/result?p=@swj_ld/ld-component-library)

## ✨ 特性

- ✅ **uni-app 原生兼容**：所有组件使用 `<view>`、`<text>` 等标准标签，无 DOM/BOM 操作  
- ✅ **多端一致**：H5 / 微信小程序 / 支付宝小程序 渲染效果一致  
- ✅ **源码发布**：以 `.vue` 源文件形式发布，由用户项目编译，避免打包兼容问题  
- ✅ **TypeScript 友好**：自带类型提示，开发体验流畅  
- ✅ **按需使用**：每个组件独立引入，天然支持 Tree-shaking  

> ⚠️ **注意**：本组件库 **不提供预编译的 JS 包**，请勿尝试 `app.use()` 或解构式按需引入（如 `import { SwjEmpty } from '...'`），这些方式在 uni-app 小程序中 **无法渲染组件**。

---

## 📦 安装

```bash
npm install @swj_ld/ld-component-library
# 或
yarn add @swj_ld/ld-component-library

🚀 使用方式（推荐）
✅ 方式一：直接引入 .vue 文件（最稳定，全平台支持）

<template>
  <SwjEmpty description="暂无数据" />
</template>

<script setup lang="ts">
// 注意：直接指定到 .vue 文件路径
import SwjEmpty from '@swj_ld/ld-component-library/SwjEmpty'
</script>

✅ 方式二：配置 easycom（自动按需，无需 import）
在项目根目录的 pages.json 中添加以下配置：
{
  "easycom": {
    "autoscan": true,
    "custom": {
      '^Swj(.*)$': '@swj_ld/ld-component-library/Swj$1'
    }
  },
  "pages": [
    // ...你的页面配置
  ]
}

<template>
  <view>
    <SwjEmpty />
    <SwjButton type="primary">确定</SwjButton>
  </view>
</template>

<script setup>
// ✅ 无需任何 import！
</script>
npm package: @swjs/metalsmith-rename
Description: 重命名文件的 metalsmith 插件
Author: Sea
Latest version: 0.0.2

# metalsmith-rename

重命名文件的 metalsmith 插件

![npm (scoped)](https://img.shields.io/npm/v/@swjs/metalsmith-rename)
![npm](https://img.shields.io/npm/dw/@swjs/metalsmith-rename)
[![TESTS CI](https://github.com/MrSeaWave/metalsmith-rename/actions/workflows/tests.yml/badge.svg?branch=main&event=push)](https://github.com/MrSeaWave/metalsmith-rename/actions/workflows/tests.yml)
[![codecov](https://codecov.io/gh/MrSeaWave/metalsmith-rename/branch/main/graph/badge.svg?token=u4OCGK2Cuw)](https://codecov.io/gh/MrSeaWave/metalsmith-rename)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue)](https://opensource.org/licenses/MIT)

## 安装

```bash
$ npm i @swjs/metalsmith-rename
```

## 基本用法

```js
const { Minimatch } = require('minimatch');
const metalsmithRename = require('@swjs/metalsmith-rename');

Metalsmith(__dirname)
  .use(
    metalsmithRename([
      {
        pattern: 'docs/*.md',
        rename: (name) => {
          const newName = name.replace('doc', 'projectName');
          return newName;
        },
      },
      {
        pattern: 'docs/api.js',
        rename: 'test.js',
      },
    ])
  )
  .build();
```

## 参数

| 参数    | 说明                                                                                                 | 类型                                   | 默认值 |
| :------ | :--------------------------------------------------------------------------------------------------- | :------------------------------------- | :----- |
| pattern | 匹配模式（遵循 [minimatch] 规则）                                                                    | `string`                               | -      |
| rename  | pattern 被匹配后，rename 如果是`string`:那么直接替换文件名，如果是`function`，则执行函数返回新的名字 | `string` \| `function(string)=>string` | -      |

```js
const options = [
  {
    pattern: 'docs/**/*.md',
    rename: function (name) {
      return 'renamed' + name;
    },
  }, // ====> docs/**/renamed+*.md
  {
    pattern: 'public/about.html',
    rename: 'index.html',
  }, // ====> public/index.html
];
```

## CHANGELOG

[CHANGELOG.md](https://github.com/MrSeaWave/metalsmith-rename/blob/main/CHANGELOG.md)

## TODOLIST

--

## Contributing

如何贡献代码查看 [CONTRIBUTING](https://github.com/MrSeaWave/metalsmith-rename/blob/main/CONTRIBUTING.md)
npm package: @swkng/httpmock
Description: 此版為 [Angular CLI](https://github.com/angular/angular-cli) version 15.0.0 的 Http Mock
Author: lawrence8358@hotmail.com
Latest version: 15.0.1125

# HttpMock

此版為 [Angular CLI](https://github.com/angular/angular-cli) version 15.0.0 的 Http Mock

## 如何使用
+ 宣告 Mock Controller `mock.controller.ts`
  ``` typescript
  import { SwkHttpMockRequest } from '@swk';

  class MockApiController {
    static GetInfo() {
      return {
        name: 'lawrence',
        tel: '0900000000',
        exp: new Date().getTime()
      };
    }
  }

  export const MockApiRouter = {
    'GET /api/Info': (req: SwkHttpMockRequest) => MockApiController.GetInfo()
  };
  ```
  
+ 在 `app.module.ts` 中 import
  ``` typescript
  // Http Mock
  import { SwkHttpMockModule } from '@swk';
  import * as MOCKDATA from './mock.controller';
  import { HttpClientModule } from '@angular/common/http';
  const MOCKMODULES = [];
  MOCKMODULES.push(SwkHttpMockModule.forRoot({
    data: MOCKDATA,
    log: true,
    delay: 300
  }));

  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
	  HttpClientModule, //<-- 加入此項目
      ...MOCKMODULES //<-- 加入此項目
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  ```

+ Http 呼叫，使用原本方法即可，無須改變任何程式
  ``` typescript
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.less']
  })
  export class AppComponent { 
    constructor(private http: HttpClient) { }

    onHttpMock() {
      this.http.get('/api/Info').subscribe(result => this.mockResult = result);
    }
  }
  ```
npm package: @swl/clone-node-deep
Description: 深度 clone Dom 节点，支持对 Web Compoent 的兼容处理（不会造成样式的全局污染）
Author: swlws
Latest version: 1.0.0

# cloneNodeDeep

深度 clone Dom 节点，支持对 Web Compoent 的兼容处理（不会造成样式的全局污染）

## Goal

目前主流的，将一个HTML页面转化为图片的方式，多利用 svg 的 foreignobject 特性。然后将生成的 svg 序列化后（XMLSerializer），丢到`new Image` 进行处理。

但存在一个问题，XMLSerializer 会造成 Web Component 的 `shadowRoot` 丢失

## How It Work

遇到 WebComponent 节点时，将其转化为普通的 div 节点，同时为 `shadowRoot` 下的 `style` 的样式选择器添加`名空间`，防止造成全局的样式污染

## API

```ts
export declare function cloneNodeDeep(node: HTMLElement): Node | null | undefined;
```
npm package: @swl/http-interceptor
Description: ## 设计
Author: swlws
Latest version: 1.0.0

# 请求拦截

## 设计

```mermaid
graph LR
    A(请求) ---> B{Filter}
    B --符合条件--> C(Adaptor)
    C --使用新的URL、BDOY--> D(发送请求)
    B --不符合条件--> D
```

`Filter` 与 `Adaptor` 成对出现，满足过滤过滤器的条件后，使用对用的适配器修改 `URL`、`BDOY`

## Iterceptor 拦截器

定义拦截器的类型，支持的类型：

- XMLHttpRequest
- fetch
- window.navigator.sendBeacon
- new Image

## Filter 过滤器

当任一一个过滤器返回为 true 时，才会触发拦截器

## Adapter 适配器

用于修改报文，对 URL、Body 执行具体处理的地方

## 示例

```js
const { createBeaconInteceptor, createImageInterceptor, createXhrInterceptor, createFetchInterceptor } = HttpInterceptor

const filter = (url, data) => {
    console.log(`call filter, url: ${url} data: ${JSON.stringify(data)}`)
    return true
}
const adapter = (url, data) => {
    console.log(`call adapter, url: ${url} data: ${JSON.stringify(data)}`)
    return [url + '_adapter', data]
}

const interceptorList = [createBeaconInteceptor(), createImageInterceptor(), createXhrInterceptor(), createFetchInterceptor()]
for (const ins of interceptorList) {
    ins.addFilterAndAdapter(filter, adapter)
    ins.apply()
}

const formData = new FormData()
formData.append('name', 'xxx')

const img = new Image()
img.src = '/server/img'

var xhr = new XMLHttpRequest();
xhr.open("POST", '/server/xhr', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onload = function () {
    console.log('xhr onload')
};
xhr.send('ddd');

fetch('/server/fetch', {
    method: 'post',
    body: formData
})

window.navigator.sendBeacon('/server/beacon', formData)
```
npm package: @swl/json-ify
Description: a json serialization lib, supported data type:
Author: swlws
Latest version: 0.0.2

# JSONify

a json serialization lib, supported data type:

- number
- string
- boolean
- date
- regexp
- function, arrow function
- map
- set

# usage

```ts
import { stringify, parse } from "@swl/json-ify";

const obj = {
  a: null,
  b: undefined,
  c: 100,
  d: "dd",
  e: true,
  f: {},
  g: [],
  h: new Date(),
  i: new Set([11, 22, 33, new Set([55, 66, 77])]),
  j: new Map<any, any>([
    ["age", { age: 100 }],
    [{ age: 100 }, "age"],
  ]),
  k: function () {
    return this.a;
  },
  l: () => {
    return "arrow function";
  },
  m: /abc/g,
  n: new RegExp("abc", "img"),
};

const rt = stringify(obj, 2);
console.log(rt);
const rt2 = parse(rt);
console.log(rt2);
```