open-index/open-npm huggingface dataset:
npm package: @rainetian/codebox
Description: codebox
Latest version: 0.0.12

# codebox

[![NPM version](https://img.shields.io/npm/v/@rainetian/codebox.svg?style=flat)](https://npmjs.org/package/@rainetian/codebox)

## 介绍

// ...

## 安装

```shell
npm install @rainetian/codebox
```

## LICENSE

MIT
npm package: @rainetian/esbuild-wasm-compiler
Description: File Resolution for Esbuild running in the Browser
Latest version: 0.0.19

# esbuild-wasm-compiler

![NPM version](https://img.shields.io/npm/v/@rainetian/esbuild-wasm-compiler.svg?style=flat)

一个运行在浏览器中打包编译器，基于`esbuild-wasm`

## 介绍

`esbuild-wasm-compiler`是`esbuild-wasm`的文件解析器。由于Web浏览器不能直接访问文件系统，`esbuild-wasm-compiler`在编译过程中，允许应用程序从外部解析文件。

使`esbuild-wasm`可以解析来自IndexedDB、LocalStorage、Http或任何其他浏览器可访问的可读设备的文件。

`esbuild-wasm-compiler`主要提供给编辑器使用，或者示例演示，或者在浏览器中编译执行项目代码。

## 安装

```bash
npm install @rainetian/esbuild-wasm-compiler
```
or
```html
<script src="https://cdn.jsdelivr.net/npm/@rainetian/esbuild-wasm-compiler/dist/esbuild-wasm-compiler.min.js"></script>
```

## 示例

[//]: # (在浏览器中执行react项目)

#### 从js对象中读取文件

[example](https://github.com/fewismuch/esbuild-wasm-compiler/blob/main/example/demo1/index.html)

```javascript
import {Compiler} from '@rainetian/esbuild-wasm-compiler'
import {files} from './files'

const compiler = new Compiler({
  getFileContent: path => {
    const filePath = Object.keys(files).find(item=>item.startsWith(path))
    const content = filePath ? files[filePath] : null
    if (!content) {
      throw new Error("File not found");
    }
    return content;
  }
},{
  packageJson: JSON.parse(files["package.json"]),
})

const code = await compiler.compile('/App.tsx')
console.log(code);


```

#### 从文件系统中读取文件

[example2](https://github.com/fewismuch/esbuild-wasm-compiler/blob/main/example/demo2/index.html)


```javascript
import {Compiler} from '@rainetian/esbuild-wasm-compiler'

Compiler.createApp('./main.tsx').mount('#root')
```

🔥现已支持vue

[example3](https://github.com/fewismuch/esbuild-wasm-compiler/blob/main/example/demo3/index.html)


## 配置项

```typescript
export interface FilesResolver {
  getFileContent(path: string): Promise<string> | string;
}

export interface CompilerOptions extends esbuild.InitializeOptions {
  // package.json文件内容
  packageJson?: Record<string, any>;
  // esm服务地址
  esmServiceUrl?: string
}
export declare class Compiler {
  constructor(resolver: FilesResolver, options?: CompilerOptions | undefined);
  compile(entryPoint: string, options?: esbuild.BuildOptions): Promise<string | {
    error: boolean;
    message: string;
  }>;
  static createApp(path: string, packageJsonPath?: string): Compiler;
}
```

## 参考

[sinclairzx81/esbuild-wasm-resolve](https://github.com/sinclairzx81/esbuild-wasm-resolve)
npm package: @rainetian/file-explorer
Description: a file explorer component
Latest version: 0.2.3

# file-explorer

[![NPM version](https://img.shields.io/npm/v/@rainetian/file-explorer.svg?style=flat)](https://npmjs.org/package/file-explorer)

## Overview

一个功能丰富的文件浏览器React组件，支持拖拽、编辑、排序等功能。

### 特性

- 📁 文件树展示
- ✏️ 可编辑文件名
- 🔄 拖拽排序和移动
- ➕ 创建文件/文件夹
- ❌ 删除文件/文件夹
- 🎨 主题支持（暗色/亮色）
- 📱 响应式设计
- 🧩 丰富的API和自定义选项

[点击查看示例](https://fewismuch.github.io/file-explorer/)

## Installation

```bash
npm install @rainetian/file-explorer
```

## Usage

### 基础使用

```tsx
import FileExplorer, { INode, fileExplorerUtils } from '@rainetian/file-explorer'
import React, { useState } from 'react'

const filesData = {
  '/public/index.html': '',
  '/src/App.tsx': '',
  '/src/main.tsx': '',
  '/src/style.css': '',
  '/package.json': '',
  '/tsconfig.json': '',
}

const App = () => {
  const [data, setData] = useState<INode[]>(fileExplorerUtils.files2tree(filesData))

  const handleChange = (newData: INode[]) => {
    setData(newData)
  }

  return (
    <div style={{ width: 250 }}>
      <FileExplorer data={data} rootId={0} onChange={handleChange} initialOpen />
    </div>
  )
}

export default App
```

### 数据格式转换

组件提供了便捷的工具函数来处理文件数据格式转换：

```tsx
// 将扁平的文件映射转换为树形结构
const treeData = fileExplorerUtils.files2tree(filesData)

// 将树形结构转换回扁平的文件映射
const filesData = fileExplorerUtils.tree2files(treeData)

/// 提供了一个获取icon8 图标url的方法，可根据文件后缀自定义图标
const iconSrc = fileExplorerUtils.getFileIcon8Url('tsx')
```

## API

### FileExplorer Props

| 属性名 | 类型 | 描述 |
| --- | --- | --- |
| data | `INode[]` | 树形结构的数据 |
| rootId | `string \| number` | 根节点ID |
| onChange | `(newTree: INode[], changeParams: IFileExplorerChangeParams) => void` | 数据变更回调 |
| onSelect | `(node: INode) => void` | 节点选中回调 |
| fileExplorerRef | `React.ForwardedRef<IFileExplorerMethods>` | 组件实例引用 |
| theme | `'dark' \| 'light'` | 主题模式 |
| enableSelect | `boolean` | 是否允许选中节点 |
| showActions | `boolean` | 是否显示操作按钮 |
| enableSort | `boolean` | 是否允许排序 |
| allowRepeatText | `boolean` | 是否允许重复名称 |
| dragOverAutoExpand | `boolean` | 拖拽到文件夹上是否自动展开 |
| clickRowAutoExpand | `boolean` | 点击行时是否自动展开 |

### INode 接口

```ts
interface INode {
  id: number | string
  parent: number | string
  text: string
  droppable?: boolean
  [propName: string]: any
}
```

### fileExplorerUtils 工具函数

- `files2tree(files: FileMap, rootId?: number | string): INode[]` - 将文件映射转换为树形结构
- `tree2files(tree: INode[], rootId?: number | string): FileMap` - 将树形结构转换为文件映射
- `getFileIcon8Url(ext: string, options?): string` - 获取文件图标URL

### fileExplorerRef 实例方法

通过ref可以调用组件的实例方法：

- `addFile(parent?: string | number)` - 添加文件
- `addFolder(parent?: string | number)` - 添加文件夹
- `remove(id: string | number, draft?: boolean)` - 删除节点
- `edit(id: string | number)` - 编辑节点
- `getFiles(rootId?: number | string)` - 获取文件映射
- `getData()` - 获取当前树形数据
- `open(id: string | number)` - 展开节点
- `close(id: string | number)` - 折叠节点
- `openAll()` - 展开所有节点
- `closeAll()` - 折叠所有节点

## Development

```bash
# 安装依赖
npm install

# 启动开发服务器
npm start

# 构建项目
npm run build

# 构建文档
npm run docs:build
```

## LICENSE

MIT
npm package: @rainetian/lint
Description: Stylelint config, ESLint config, Prettier config for fewismuch
Author: fewismuch
Latest version: 0.1.6

# @rainetian/lint

[![NPM version](https://img.shields.io/npm/v/@rainetian/lint.svg?style=flat)](https://npmjs.org/package/file-explorer)

Stylelint config, ESlint config, Prettier config for fewismuch

# Installation

```shell
npm i @rainetian/lint --save-dev

pnpm i @rainetian/lint --save-dev

yarn add @rainetian/lint -D
```

# Usage

Create a new `.npmrc` file (if it doesn't exist) and add the following:
```shell
lockfile=false
resolution-mode=highest
public-hoist-pattern[]=*changelog*
public-hoist-pattern[]=*commitlint*
public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*postcss*
public-hoist-pattern[]=*prettier*
public-hoist-pattern[]=*stylelint*
```

## stylelint
in `.stylelintrc.js`
```typescript
module.exports = require("@rainetian/lint").stylelint
```

## eslint
in `.eslintrc.js`
```typescript
module.exports = require('@rainetian/lint').eslint
```

## prettier
in `.prettierrc.js`
```typescript
module.exports = require('@rainetian/lint').prettier
```
npm package: @rainetian/sandpack-file-explorer
Description: Advanced File Explorer for Sandpack
Latest version: 0.2.1

# sandpack-file-explorer

[![NPM version](https://img.shields.io/npm/v/@rainetian/sandpack-file-explorer.svg?style=flat)](https://npmjs.org/package/@rainetian/sandpack-file-explorer)

## 介绍
一个替代Sandpack的FileExplorer的组件，提供更多的功能。
* 支持新增删除文件夹和文件
* 支持拖拽
* 支持文件夹和文件的重命名
* 支持自定义文件图标
* 更小的体积和更简洁的UI

[点击查看示例](https://fewismuch.github.io/sandpack-file-explorer)

![image](https://raw.githubusercontent.com/fewismuch/sandpack-file-explorer/main/docs-src/screenshot.png)

![image](https://raw.githubusercontent.com/fewismuch/sandpack-file-explorer/main/docs-src/screenshot2.png)


## 安装

```shell
npm install sandpack-file-explorer
```

## 使用

作为Sandpack的FileExplorer的替代品，您可以以相同的方式使用它

```tsx
import {
  SandpackCodeEditor,
  SandpackLayout,
  SandpackPreview,
  SandpackProvider,
} from '@codesandbox/sandpack-react'
import SandpackFileExplorer from '@rainetian/sandpack-file-explorer'

const App = () => {
  return (
    <SandpackProvider template='react'>
      <SandpackLayout>
        <SandpackFileExplorer/>
        <SandpackCodeEditor showTabs closableTabs/>
        <SandpackPreview/>
      </SandpackLayout>
    </SandpackProvider>
  )
}
export default App

```


## Options

| Name | Type | Default   | Description |
| --- | --- |-----------| --- |
| `readOnly` | `boolean` | `false`   | 是否只读 |
| `title` | `string` | `'Files'` | 标题 |

## LICENSE

MIT