open-index/open-npm huggingface dataset:
npm package: @meituan-nocode/nocode-design-mode-sandbox-script
Description: NoCode Design Mode Sandbox Script
Latest version: 0.1.0

# NoCode Design Mode Sandbox Script

这个包提供了一个沙箱脚本，用于在 iframe 中注入设计模式功能。

## 功能

- 通过 Penpal 与父窗口通信
- DOM 元素操作和查询
- 样式管理
- 拖拽功能
- 文本编辑
- 主题切换

## 构建

```bash
# 开发环境构建
pnpm run build:dev

# 测试环境构建
pnpm run build:test

# 预发布环境构建
pnpm run build:pre

# 生产环境构建
pnpm run build:prod
```

## 上传到 CDN

```bash
# 上传到开发环境
pnpm run upload:dev

# 上传到测试环境
pnpm run upload:test

# 上传到预发布环境
pnpm run upload:pre

# 上传到生产环境
pnpm run upload:prod
```

## 使用方式

### 在测试应用中使用

在 HTML 的 `<head>` 标签中引入脚本：

```html
<head>
    <script src="../nocode-design-mode-sandbox-script/dist/sandbox-script.js"></script>
</head>
```

### 在生产环境中使用

从 CDN 引入：

```html
<head>
    <!-- 开发环境 -->
    <script src="https://s3plus.meituan.net/nocode-external/artwork/dev/sandbox-script.js"></script>

    <!-- 测试环境 -->
    <script src="https://s3plus.meituan.net/nocode-external/artwork/test/sandbox-script.js"></script>

    <!-- 生产环境 -->
    <script src="https://s3plus.meituan.net/nocode-external/artwork/sandbox-script.js"></script>
</head>
```

## 架构说明

### 目录结构

```
nocode-design-mode-sandbox-script/
├── api/              # API 方法
│   ├── dom.ts       # DOM 处理
│   ├── elements/    # 元素操作
│   ├── events/      # 事件处理
│   ├── style/       # 样式管理
│   └── theme/       # 主题管理
├── constants/       # 常量定义
├── helpers/         # 辅助函数
├── types/          # TypeScript 类型定义
├── index.ts        # 入口文件
└── webpack.config.js
```

### 通信机制

脚本使用 Penpal 库与父窗口（Design Mode Designer）进行通信：

1. **子窗口暴露的方法**：在 `api/index.ts` 中的 `preloadMethods` 定义
2. **父窗口方法调用**：通过 `penpalParent` 对象调用父窗口方法

### 主要功能模块

- **DOM 处理**：构建 Layer Tree，处理 DOM 变化
- **元素操作**：查询、插入、删除、移动元素
- **样式管理**：CSS 样式的读取和更新
- **拖拽功能**：元素拖拽和位置调整
- **文本编辑**：内联文本编辑
- **主题管理**：明暗主题切换

## 开发说明

### 依赖说明

- `penpal`: 用于 iframe 跨窗口通信
- `lodash`: 工具函数库
- `nanoid`: 生成唯一 ID
- `css-tree`: CSS 解析和操作

### 类型定义

所有类型定义在 `types/index.ts` 中，包括：

- `DomElement`: DOM 元素信息
- `LayerNode`: Layer Tree 节点
- `ActionElement`: 操作元素
- `StyleChange`: 样式变更
- 等等

### 常量定义

在 `constants/index.ts` 中定义了：

- `EditorAttributes`: 编辑器使用的 data 属性
- `DOM_IGNORE_TAGS`: 需要忽略的 DOM 标签
- `INLINE_ONLY_CONTAINERS`: 只能包含内联元素的容器

## 注意事项

1. 脚本必须在页面加载前引入（在 `<head>` 中）
2. 脚本会自动初始化并与父窗口建立连接
3. 确保父窗口也使用了 Penpal 进行通信
4. 上传到 CDN 后需要刷新 CDN 缓存
npm package: @meituan-nocode/nocode-linter
Description: `@meituan-nocode/nocode-linter` 是一个基于 ESLint 的命令行代码检查工具，支持 TypeScript 和 JavaScript 项目。它可自动扫描指定目录下的代码，输出 Markdown 格式的规范性报告，帮助开发者快速定位和修复常见的代码问题。
Latest version: 1.0.14

# @meituan-nocode/nocode-linter

## 项目简介

`@meituan-nocode/nocode-linter` 是一个基于 ESLint 的命令行代码检查工具，支持 TypeScript 和 JavaScript 项目。它可自动扫描指定目录下的代码，输出 Markdown 格式的规范性报告，帮助开发者快速定位和修复常见的代码问题。

## 安装方法

在项目根目录下执行：

```bash
npm install @meituan-nocode/nocode-linter --save-dev
```

或全局安装：

```bash
npm install -g @meituan-nocode/nocode-linter
```

## 使用说明

### 命令行用法

在项目根目录下运行：

```bash
npx nocode-lint [options]
```

或全局安装后直接运行：

```bash
nocode-lint [options]
```

### 可用参数

- `-s, --source <source>` 要检查的目录，默认为当前工作目录
- `-o, --output <output>` 报告输出路径，默认为 `eslint-report.md`

### 示例

检查当前目录并生成报告：

```bash
npx nocode-lint
```

指定检查目录和报告输出路径：

```bash
npx nocode-lint -s ./src -o ./my-report.md
```

## 报告格式示例

生成的 Markdown 报告示例：

```
# ESLint 规则报告

| 规则 | 文件 | 行号:列号 |
|---|---|---|
| `no-unused-vars` | src/index.ts | 10:5 |
| `@typescript-eslint/no-explicit-any` | src/app.ts | 20:15 |
```

## 配置说明

本工具内置推荐的 ESLint 规则，支持 TypeScript 和 JavaScript 文件。你可以根据需要修改 `eslint.config.js` 以自定义规则。

## 开发与构建

1. 安装依赖：

    ```bash
    npm install
    ```

2. 构建项目：

    ```bash
    npm run build
    ```

3. 开发模式（监听文件变更）：

    ```bash
    npm run dev
    ```

## 依赖环境

- Node.js >= 14.0.0
- TypeScript >= 5.8.3
- ESLint >= 9.4.0

## 许可证

MIT
npm package: @meituan-nocode/vite-plugin-dev-logger
Description: Vite 开发环境的日志记录插件
Latest version: 0.2.0

# @meituan-nocode/vite-plugin-dev-logger

一个用于 Vite 开发服务器的日志插件，使用 `winston` 和 `winston-daily-rotate-file` 记录日志。可以记录 Vite DevServer 的请求日志、错误日志等信息。

## 安装

```bash
npm install @meituan-nocode/vite-plugin-dev-logger --save-dev
# 或者
yarn add @meituan-nocode/vite-plugin-dev-logger -D
# 或者
pnpm add @meituan-nocode/vite-plugin-dev-logger -D
```

### 使用方法

在 vite.config.ts 中配置：

```js
import { defineConfig } from 'vite';
import { devLogger } from '@meituan-nocode/vite-plugin-dev-logger';

export default defineConfig({
    plugins: [
        devLogger({
            filename: 'application-%DATE%.log', // 日志文件名
            dirname: 'logs', // 日志文件目录
            datePattern: 'YYYY-MM-DD', // 日期格式
            maxFiles: '7d', // 保留7天的日志文件
            maxSize: '10m', // 单个日志文件最大10MB
        }),
    ],
});
```

### 配置选项

devLogger 插件接受一个配置对象，支持以下选项：

- filename (string): 日志文件名，默认为 application-%DATE%.log。
- dirname (string): 日志文件目录，默认为当前工作目录下的 logs 文件夹。
- datePattern (string): 日期格式，默认为 YYYY-MM-DD。
- maxFiles (string): 保留的日志文件数量或天数，默认为 7d。
- maxSize (string): 单个日志文件的最大大小，默认为 10m。