open-index/open-npm huggingface dataset:
npm package: @swayui/sway-ui
Description: The React UI library for SaaS built on top of Chakra UI
Author: Clément de Louvencourt
Latest version: 0.0.35

<img src="https://i.imgur.com/E9QzoQj.png" style="background: #fff; padding: 20px; height: 100px; border-radius: 20px"/>

🎨 The React UI library for SaaS built with Chakra UI

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Npm package version](https://badgen.net/npm/v/@swayui/sway-ui)](https://npmjs.com/package/@swayui/sway-ui)

___

## :cloud: Installation

### Install first [Chakra UI](https://chakra-ui.com/getting-started) :
```shell
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion @heroicons/react
```
or
```shell
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion @heroicons/react
```

### And then install SwayUI :

```shell  
npm install @swayui/sway-ui 
```  
or
```shell  
yarn add @swayui/sway-ui 
```  

## :rocket: Usage

```jsx
import { SwayProvider, theme, DotBadge } from "@swayui/sway-ui";

function App() {
  return (
    <SwayProvider theme={theme}>
      <DotBadge colorScheme={'green.300'} size={'sm'} text={'Active'}/>
    </SwayProvider>
  );
}
```

## :raised_hands: Documentation

![Documentation](https://img.shields.io/badge/Documentation-📚-blue.svg)

Documentation and examples are available here : [Example of use](https://swayui.github.io/sway-ui)

## :mag_right: Credits

sway-ui is a library of  [Clément de Louvencourt](https://github.com/c-delouvencourt)

**Special thanks to:**

- *Your name here ?*
npm package: @swazipen/core
Description: SwaziPen: Browser-based IDE for SwaziLang – edit, navigate, and run your SwaziLang projects in a project-scoped web editor powered by Node.js and Ace.
Author: godieGH
Latest version: 1.3.0

# @swazipen/core
---

visit [swazipen](https://github.com/godieGH/SwaziPen#readme) for documentation
npm package: @swazm/rpc-client-js
Description: RPC Client only supports browsers/react-native. Node support planned for the future.
Author: @swazm
Latest version: 0.2.9

# RPC Client

```javascript
let Client = require('rpc-client-js');

let client = await Client("http://rpc.address.personal");

client.setToken("someJWToken");

try {
    let response = await client.User.GetCurrentUser();
    console.log(response);
} catch(e) {
    console.log(e);
}
```
npm package: @swc-contrib/mut-cjs-exports
Description: [SWC plugin] mutable CJS exports
Author: magic-akari
Latest version: 14.8.0

# [SWC plugin] mutable CJS exports

Migrated from https://github.com/magic-akari/swc_mut_cjs_exports

This is a SWC plugin to emit mutable CJS exports.

This SWC plugin has only been tested for compatibility with jest. It should be used with `@swc/jest`.

This project was previously called jest_workaround

## plugin version

https://swc.rs/docs/plugin/selecting-swc-core

## usage

install

```bash
npm i -D jest @swc/core @swc/jest @swc-contrib/mut-cjs-exports
```

```js
// jest.config.js
const fs = require("node:fs");

const swcrc = JSON.parse(fs.readFileSync(".swcrc", "utf8"));

// If you have other plugins, change this line.
((swcrc.jsc ??= {}).experimental ??= {}).plugins = [
  ["@swc-contrib/mut-cjs-exports", {}],
];

module.exports = {
  transform: {
    "^.+\\.(t|j)sx?$": ["@swc/jest", swcrc],
  },
};
```

Alternative implementation without .swcrc file

```JavaScript
// jest.config.js

module.exports = {
  transform: {
    "^.+\\.(t|j)sx?$": [
      "@swc/jest",
      {
        jsc: {
          experimental: {
            plugins: [["@swc-contrib/mut-cjs-exports", {}]],
          },
        },
      },
    ],
  },
};
```

Make sure that `module.type` is `commonjs` in your `.swcrc` since this plugin
does not touch non-workaround parts, such as import statements.

## FAQ

#### 1. When do I need this?

If you're using the swc compiler to transform your code to comply with the ESM
specification, but you're also using Jest to test it in a CJS environment, you
may encounter issues due to the immutable issue of `exports`.

This plugin can help by transforming the `export` statements into mutable
`exports`.

#### 2. Do I have a better choice?

You may have other options depending on your specific needs:

- If you're able to run Jest in an ESM environment, you can use swc to transpile
  TypeScript/JSX syntax or downgrade JavaScript syntax without module
  conversion. Simply set the value of `module.type` to `es6` to achieve this.

- It's possible that some issues related to running Jest in an ESM environment
  will be resolved over time. Keep an eye on
  [facebook/jest#9430](https://github.com/facebook/jest/issues/9430) for
  updates.

- If you don't need the behavior of ESM specifically, you can stick with the CJS
  syntax to get the CJS behavior of `exports`.

These options may be worth considering before using this plugin.

CJS syntax

```JavaScript
exports.foo = function foo() {
  return 42;
};
```

CTS(CJS in TypeScript) syntax

```TypeScript
export = {
  foo: function foo() {
    return 42;
  },
};
```

Notes:

- ESM style export means immutable exports when transformed into CJS
- ESM style import means hoisted require when transformed into CJS

#### 3. After upgrading the plugin version, the changes have not taken effect.

This is a known issue. You could remove the Jest cache by running
[`jest --clearCache`](https://jestjs.io/docs/cli#--clearcache) as a workaround.
npm package: @swc-contrib/plugin-graphql-codegen-client-preset
Description: A SWC plugin for https://the-guild.dev/graphql/codegen/plugins/presets/preset-client
Latest version: 0.20.0

# `@swc-contrib/plugin-graphql-codegen-client-preset`

When using the [`@graphql-codegen/client-preset`](https://the-guild.dev/graphql/codegen/plugins/presets/preset-client) on large scale projects might want to enable code splitting or tree shaking on the `client-preset` generated files. This is because instead of using the map which contains all GraphQL operations in the project, we can use the specific generated document types.

This plugin works for [SWC](https://swc.rs) only.

### Installation

```bash
yarn add -D @swc-contrib/plugin-graphql-codegen-client-preset
```

### Usage

You will need to provide the `artifactDirectory` path that should be the same as the one configured in your `codegen.ts`

The plugin also supports a `namingConvention` option to match the naming convention configured in your `codegen.ts`. The default is `"change-case-all#pascalCase"` which matches the default for `@graphql-codegen/client-preset`. If you have set `namingConvention: "change-case-all#upperCaseFirst"` in your `codegen.ts`, you must also set it in the plugin options.

#### Vite

```ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      plugins: [
        [
          "@swc-contrib/plugin-graphql-codegen-client-preset",
          { artifactDirectory: "./src/gql", gqlTagName: "graphql" },
        ],
      ],
    }),
  ],
});
```

#### Next.js

```ts
const nextConfig = {
  // ...
  experimental: {
    swcPlugins: [
      [
        "@swc-contrib/plugin-graphql-codegen-client-preset",
        { artifactDirectory: "./src/gql", gqlTagName: "graphql" },
      ],
    ],
  },
};
```

#### `.swcrc`

```json5
{
  // ...
  jsc: {
    // ...
    experimental: {
      plugins: [
        [
          "@swc-contrib/plugin-graphql-codegen-client-preset",
          { artifactDirectory: "./src/gql", gqlTagName: "graphql" },
        ],
      ],
    },
  },
}
```
npm package: @swc-node/core
Description: Faster swc nodejs binding
Author: LongYinan
Latest version: 1.14.1

# `@swc-node/core`

<a href="https://npmcharts.com/compare/@swc-node/core?minimal=true"><img src="https://img.shields.io/npm/dm/@swc-node/core.svg?sanitize=true" alt="Downloads" /></a>

> 🚀 Help me to become a full-time open-source developer by [sponsoring me on Github](https://github.com/sponsors/Brooooooklyn)

## Benchmark

> transform AjaxObservable.ts to ES2015 & CommonJS `JavaScript`.

```
@swc-node/core x 151 ops/sec ±3.74% (77 runs sampled)
@swc/core x 107 ops/sec ±0.51% (78 runs sampled)
esbuild x 52.89 ops/sec ±1.58% (67 runs sampled)
typescript x 21.08 ops/sec ±9.68% (40 runs sampled)
Transform rxjs/AjaxObservable.ts benchmark bench suite: Fastest is @swc-node/core
```

## Usage

```ts
export interface Options {
  target?: 'es3' | 'es5' | 'es2015' | 'es2016' | 'es2017' | 'es2018' | 'es2019' | 'es2020'
  module?: 'commonjs' | 'umd' | 'amd' | 'es6'
  sourcemap?: boolean | 'inline'
  experimentalDecorators?: boolean
  emitDecoratorMetadata?: boolean
  dynamicImport?: boolean
  esModuleInterop?: boolean
  keepClassNames?: boolean
  react?: Partial<ReactConfig>
  paths?: {
    [from: string]: [string]
  }
}

export interface ReactConfig {
  /**
   * Replace the function used when compiling JSX expressions.
   *
   * Defaults to `React.createElement`.
   */
  pragma: string
  /**
   * Replace the component used when compiling JSX fragments.
   *
   * Defaults to `React.Fragment`
   */
  pragmaFrag: string
  /**
   * Toggles whether or not to throw an error if a XML namespaced tag name is used. For example:
   * `<f:image />`
   *
   * Though the JSX spec allows this, it is disabled by default since React's
   * JSX does not currently have support for it.
   *
   */
  throwIfNamespace: boolean
  /**
   * Toggles plugins that aid in development, such as @swc/plugin-transform-react-jsx-self
   * and @swc/plugin-transform-react-jsx-source.
   *
   * Defaults to `false`,
   *
   */
  development: boolean
  /**
   * Use `Object.assign()` instead of `_extends`. Defaults to false.
   */
  useBuiltins: boolean
}

export function transformSync(
  source: string | Buffer,
  path: string,
  options?: Options,
): {
  code: string
  map: string
}

export function transform(
  source: string | Buffer,
  path: string,
  options?: Options,
): Promise<{
  code: string
  map: string
}>
```
npm package: @swc-node/core-darwin
Description: The macOS 64-bit binary for @swc-node/core.
Latest version: 0.7.6

# @swc-node/core-darwin

This is the macOS 64-bit binary for [`@swc-node/core`](https://github.com/Brooooooklyn/swc-node/tree/master/packages/core).
npm package: @swc-node/core-linux-musl
Description: The Linux 64-bit binary for @swc-node/core.
Latest version: 0.7.6

# @swc-node/core-linux-musl

This is the Linux 64-bit musl binary for [`@swc-node/core`](https://github.com/Brooooooklyn/swc-node/tree/master/packages/core).
npm package: @swc-node/core-win32
Description: The Windows 64-bit binary for @swc-node/core.
Latest version: 0.7.6

# @swc-node/core-win32

This is the windows 64-bit binary for [`@swc-node/core`](https://github.com/Brooooooklyn/swc-node/tree/master/packages/core).
npm package: @swc-node/jest
Description: swc preprocessor for jest with source map support
Author: LongYinan
Latest version: 1.9.1

# `@swc-node/jest`

<a href="https://npmcharts.com/compare/@swc-node/jest?minimal=true"><img src="https://img.shields.io/npm/dm/@swc-node/jest.svg?sanitize=true" alt="Downloads" /></a>

> 🚀 Help me to become a full-time open-source developer by [sponsoring me on Github](https://github.com/sponsors/Brooooooklyn)

## Usage

```ts
// jest.config.js

module.exports = {
  transform: {
    '^.+\\.(t|j)sx?$': ['@swc-node/jest'],
  },
}
```

## Configuration

Configuration can be passed as a second argument to `transform`:

```ts
// jest.config.js

module.exports = {
  transform: {
    '^.+\\.(t|j)sx?$': [
      '@swc-node/jest',

      // configuration
      {
        dynamicImport: true,
        react: {
          pragma: 'h',
        },
      },
    ],
  },
}
```

[List of all of the available configuration options](https://github.com/swc-project/swc-node/blob/master/packages/core/index.ts#L6).
npm package: @swc-node/loader
Description: Webpack loader powered by swc
Author: LongYinan
Latest version: 1.6.1

# `@swc-node/loader`

> 🚀 Help me to become a full-time open-source developer by [sponsoring me on Github](https://github.com/sponsors/Brooooooklyn)

<a href="https://npmcharts.com/compare/@swc-node/loader?minimal=true"><img src="https://img.shields.io/npm/dm/@swc-node/loader.svg?sanitize=true" alt="Downloads" /></a>

## Usage

```js
{
  test: /\.tsx?$/,
  use: [
    {
      loader: '@swc-node/loader',
      // If options not passed
      // `@swc-node/loader` will read the project `tsconfig.json` as compile options
      // If the default `tsconfig.json` parse failed or not existed
      // The default options will be used
      // `compilerOptions` is the same with `compilerOptions in tsconfig`
      options: {
        // if `compilerOptions` provided, `configFile` will be ignored
        compilerOptions: {
          target: 'ES5',
          module: 'esnext',
          sourceMap: true,
          jsx: true,
        },
        // absolute path for tsconfig.json
        configFile: path.join(process.cwd(), 'tsconfig.build.json'),
        // enable react fast refresh
        fastRefresh: true
      }
    }
  ],
  exclude: /node_modules/,
}
```

## Differences between [swc-loader](https://github.com/swc-project/swc-loader)

This `loader` is compatible with `tsconfig.json` and `compilerOptions` in `tsconfig.json`.
npm package: @swc-node/sourcemap-support
Description: Runtime sourcemap support in NodeJS
Author: LongYinan
Latest version: 0.6.1

# `@swc-node/sourcemap-support`

```ts
import { SourcemapMap, installSourceMapSupport } from '@swc-node/sourcemap-support'

installSourceMapSupport()

function transform(sourcecode, filename, options) {
  const { code, map } = transformSync(sourcecode, filename, options)
  SourcemapMap.set(filename, map)
  return code
}
```
npm package: @swc-tiptap/core
Description: Stencil Component Starter
Latest version: 0.0.1

# AI Stencil Tiptap 富文本编辑器

## 项目概述

本项目是一个基于 Tiptap、Stencil、Tailwind CSS 和 TypeScript 技术栈的现代化 AI 富文本编辑器解决方案。采用模块化架构设计，具备以下核心优势：

1. **技术先进性**：结合最新 Web 组件技术与 AI 能力，提供未来友好的编辑器体验
2. **架构优势**：模块化设计确保系统的高扩展性和可维护性
3. **开发效率**：完善的工具链支持，提升开发体验和代码质量
4. **性能优化**：采用现代前端技术栈，确保编辑器的高性能运行
5. **跨平台支持**：基于 Web 标准构建，支持多框架集成和跨平台使用

## 技术栈

- **Tiptap**: 富文本编辑器核心
- **Stencil**: 构建与框架无关的 Web 组件
- **Tailwind CSS**: 样式管理
- **TypeScript**: 类型系统
npm package: @swc-ui/icons
Description: Stencil Component Starter
Latest version: 0.1.6

# Web Component 图标库

为 [@swc-ui/components](https://github.com/WebJeffery/stencil-component-ui) Web Component 组件库封装的图标库


## 安装

选择一个你喜欢的包管理器安装

```bash
# NPM
$ npm install @swc-ui/icons

# Yarn
$ yarn add @swc-ui/icons

# pnpm
$ pnpm install @swc-ui/icons
```

## 注册使用

1、批量一次性引入所有图标注册

```js
// 全量引入
import { defineCustomElements} from '@swc-ui/icons/loader'
defineCustomElements()

```

2、按需引入图标注册【推荐】

```js
// 按需引入，自动注册
import '@swc-ui/icons/dist/components/swc-icon-add-location.js'
```

像普通 html 标签一样使用
```html
<swc-icon-add-location></swc-icon-add-location>
```

3、所有 icon 名称

```js
import { icons } from '@swc-ui/icons'
```

## 基础用法

通过设置 `name` 来使用其他图标

```html
<!-- 使用 swc-icon 为 SVG 图标提供属性 -->
<swc-icon name="edit" color="red"></swc-icon>

<!-- 或者独立使用它，不从父级获取属性 -->
<swc-icon-edit></swc-icon-edit>
```

## 倾斜 rotate

通过`rotate`倾斜 icon 角度

```html
<swc-icon name="edit" rotate="30"></swc-icon>
<swc-icon name="reading" rotate="60"></swc-icon>
```

## 旋转

添加`spin`属性来使 icon 旋转

```html
<swc-icon name="loading" spin></swc-icon>
<swc-icon name="refresh-right" spin></swc-icon>
<swc-icon name="refresh" spin></swc-icon>
```

## 大小

添加`size`属性来设置大小

```html
<swc-icon name="loading" size="16"></swc-icon>
<swc-icon name="loading"></swc-icon>
<swc-icon name="loading" size="24"></swc-icon>
<swc-icon name="loading" size="30"></swc-icon>
<swc-icon name="loading" size="36"></swc-icon>
```

## 颜色

添加`color`属性来设置颜色

```html
<swc-icon name="loading"></swc-icon>
<swc-icon name="loading" color="red"></swc-icon>
<swc-icon name="loading" color="blue"></swc-icon>
<swc-icon name="loading" color="pink"></swc-icon>
<swc-icon name="loading" color="green"></swc-icon>
```

## Attrs

| 属性名   | 说明   |类型| 可选值       | 默认值    |
|-------|------|-|-----------|--------|
| name  | 图标名称 |`string`| @swc-ui/icons 图标 | - |
| rotate  | 图标旋转角度 |`number`| 0 | - |
| spin  | 360度旋转 |`boolean`| `true`、`false` | `false` |
| size  | 图标大小 |`string`| 合法的 css 单位 | `1em` |
| color | 图标颜色 |`string`| 合法的颜色值    | -      |