Skip to content

Commit

Permalink
[md]Create rollup-plugin-md-ts
Browse files Browse the repository at this point in the history
  • Loading branch information
dufu1991 committed Dec 11, 2024
1 parent b532e37 commit 74353a3
Show file tree
Hide file tree
Showing 8 changed files with 335 additions and 0 deletions.
10 changes: 10 additions & 0 deletions packages/rollup-plugin-md-ts/.prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 140,
"plugins": [],
"overrides": [

]
}
77 changes: 77 additions & 0 deletions packages/rollup-plugin-md-ts/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
[简体中文](https://github.com/any-tdf/stdf/blob/main/packages/rollup-plugin-md-ts/README_CN.md)

## Introduction

This is a Rollup/Vite plugin that converts Markdown files to HTML strings, based on [marked](https://github.com/markedjs/marked).

The implementation idea is based on [rollup-plugin-md](https://github.com/xiaofuzi/rollup-plugin-md), adding TypeScript and compatible with Vite's plugin type.

The STDF new site <https://next.stdf.design> uses this plugin.

## Parameters

| Parameter | Type | Default | Description |
| --------- | ---- | -------- | ------------------------------------------------------------------------------ |
| marked | `MarkedOptions` | `{}` | [marked](https://github.com/markedjs/marked) 的配置。 |
| include | `string[]` | `['**/*.md']` | The path of the Markdown file to include. |
| exclude | `string[]` | `[]` | The path of the Markdown file to exclude. |

The `include` and `exclude` parameters are relative to the project root directory (usually the directory where vite.config.js or vite.config.ts is located).

## Installation

<!-- :::code-groups -->
<!-- pnpm -->
```sh
pnpm i rollup-plugin-md-ts -D
```
<!-- :: -->
<!-- npm -->
```sh
npm i rollup-plugin-md-ts -D
```
<!-- :: -->
<!-- bun -->
```sh
bun add rollup-plugin-md-ts -D
```
<!-- :: -->
<!-- yarn -->
```sh
yarn add rollup-plugin-md-ts -D
```
<!-- ::: -->

## Usage

Configure in vite.config.js or vite.config.ts:

```javascript
import md from 'rollup-plugin-md-ts';

export default defineConfig({
// ...
plugins: [
// ...
md({
marked: {},
include: [ './src/**/*.md']
})
// ...
],
// ...
});
```

## Why Create

There are already many plugins that can implement similar functions, such as [vite-plugin-markdown](https://www.npmjs.com/package/vite-plugin-markdown), which do not convert the following characters when converting to-do lists, which is exactly the function needed in [STDF](https://stdf.design).

```md
- [ ] TODO
- [x] DONE
```

## License

This project is licensed under the [MIT License](https://github.com/any-tdf/stdf/blob/main/LICENSE). Feel free to enjoy and contribute to this open source project.
77 changes: 77 additions & 0 deletions packages/rollup-plugin-md-ts/README_CN.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
[English](https://github.com/any-tdf/stdf/blob/main/packages/rollup-plugin-md-ts/README.md)

## 介绍

一款 Rollup/Vite 插件,功能是将 Markdown 文件转换为 HTML 字符串,基于 [marked](https://github.com/markedjs/marked)

实现思路参考 [rollup-plugin-md](https://github.com/xiaofuzi/rollup-plugin-md) ,增加了 TypeScript 并兼容 Vite 的插件类型。

STDF 新站点 <https://next.stdf.design> 使用了此插件。

## 参数

| 参数 | 类型 | 默认 | 描述 |
| -------- | ---- | ---------------- | ------------------------------------------------------------------------------ |
| marked | `MarkedOptions` | `{}` | [marked](https://github.com/markedjs/marked) 的配置。 |
| include | `string[]` | `['**/*.md']` | 要包含的 Markdown 文件路径。 |
| exclude | `string[]` | `[]` | 要排除的 Markdown 文件路径。 |

其中 include 和 exclude 是相对与项目根目录(一般就是 vite.config.js 或 vite.config.ts 所在目录)的相对路径。

## 安装

<!-- :::code-groups -->
<!-- pnpm -->
```sh
pnpm i rollup-plugin-md-ts -D
```
<!-- :: -->
<!-- npm -->
```sh
npm i rollup-plugin-md-ts -D
```
<!-- :: -->
<!-- bun -->
```sh
bun add rollup-plugin-md-ts -D
```
<!-- :: -->
<!-- yarn -->
```sh
yarn add rollup-plugin-md-ts -D
```
<!-- ::: -->

## 使用

在 vite.config.js 或 vite.config.ts 中配置:

```javascript
import md from 'rollup-plugin-md-ts';

export default defineConfig({
// ...
plugins: [
// ...
md({
marked: {},
include: [ './src/**/*.md']
})
// ...
],
// ...
});
```

## 为何创建

其实市面上已经有很多能实现类似功能的插件,比如 [vite-plugin-markdown](https://www.npmjs.com/package/vite-plugin-markdown) ,这些基于 [markdown-it](https://www.npmjs.com/package/markdown-it) 的插件在转换待办事项列表时,并不会转换以下字符,而这个正好是 [STDF](https://stdf.design) 中需要用到的功能。

```md
- [ ] 待办事项
- [x] 已完成事项
```

## 许可证

本项目基于 [MIT 许可证](https://github.com/any-tdf/stdf/blob/main/LICENSE)。请随意享受并贡献给这个开源项目。
29 changes: 29 additions & 0 deletions packages/rollup-plugin-md-ts/eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import prettier from 'eslint-config-prettier';
import js from '@eslint/js';
import globals from 'globals';
import ts from 'typescript-eslint';

export default ts.config(
js.configs.recommended,
...ts.configs.recommended,
prettier,
{
languageOptions: {
globals: {
...globals.browser,
...globals.node
}
}
},
{
files: ['**/*.ts'],
languageOptions: {
parserOptions: {
parser: ts.parser
}
}
},
{
ignores: ['build/', 'dist/']
}
);
56 changes: 56 additions & 0 deletions packages/rollup-plugin-md-ts/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
{
"name": "rollup-plugin-md-ts",
"version": "0.0.0",
"description": "a rollup plugin for markdown files",
"type": "module",
"exports": {
".": {
"default": "./dist/index.js",
"types": "./dist/index.d.ts"
}
},
"scripts": {
"pretest": "npm run build",
"build": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
"prebuild": "rm -rf dist/*"
},
"keywords": [
"rollup",
"plugin",
"md",
"markdown",
"typescript"
],
"author": "any-tdf",
"funding": "https://stdf.design?fund",
"license": "MIT",
"homepage": "https://github.com/any-tdf/stdf/blob/main/packages/rollup-plugin-md-ts/README.md",
"repository": {
"type": "git",
"url": "https://github.com/any-tdf/stdf"
},
"bugs": {
"url": "https://github.com/any-tdf/stdf/issues?q=is:issue+is:open+md"
},
"dependencies": {
"marked": "^15.0.3",
"rollup": "^4.28.1",
"rollup-pluginutils": "^2.8.2"
},
"devDependencies": {
"@eslint/js": "^9.16.0",
"@rollup/plugin-node-resolve": "^15.3.0",
"@rollup/plugin-typescript": "^12.1.1",
"assert": "^2.1.0",
"eslint": "^9.16.0",
"eslint-config-prettier": "^9.1.0",
"fs": "^0.0.1-security",
"globals": "^15.13.0",
"mocha": "^11.0.1",
"rollup-plugin-uglify": "^6.0.4",
"source-map-support": "^0.5.21",
"tslib": "^2.8.1",
"typescript": "^5.7.2",
"typescript-eslint": "^8.18.0"
}
}
30 changes: 30 additions & 0 deletions packages/rollup-plugin-md-ts/rollup.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import json from '@rollup/plugin-json';
import typescript from '@rollup/plugin-typescript';
import { uglify } from 'rollup-plugin-uglify';
import { readFileSync } from 'fs';
const pkg = JSON.parse(readFileSync('./package.json', 'utf8'));
const external = Object.keys(pkg.dependencies);

export default {
input: 'src/index.ts',
output: [
{
dir: 'dist',
format: 'es',
file: pkg['main'],
sourcemap: true,
compact: true
}
],
external: external,
plugins: [
typescript({
declaration: true,
declarationDir: 'dist',
rootDir: 'src',
tsconfig: './tsconfig.json'
}),
json(),
uglify()
]
};
42 changes: 42 additions & 0 deletions packages/rollup-plugin-md-ts/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { marked, MarkedOptions } from 'marked';
import { createFilter } from 'rollup-pluginutils';

const ext = /\.md$/;

export type MDOptions = {
include?: string[];
exclude?: string[];
marked?: MarkedOptions;
};

export default function md(options: MDOptions = {}) {
const filter = createFilter(options.include || ['**/*.md'], options.exclude);
if (options.marked) {
marked.setOptions(options.marked);
}
return {
name: 'md',
// transform 是 rollup 插件必需的方法
// 用于转换源文件内容
transform(md: string, id: string) {
// 检查文件是否是 .md 文件
if (!ext.test(id)) return null;
// 检查文件是否匹配 include/exclude 配置
if (!filter(id)) return null;

// 使用 marked 解析 markdown,如果没有配置 marked 则返回原始内容
const data = options.marked ? marked.parse(md, options.marked) : md;
return {
// 导出解析后的内容为默认导出
code: `export default ${JSON.stringify(data.toString())};`,
// sourcemap 相关
map: {
version: 3,
sources: [id],
names: [],
mappings: ''
}
};
}
};
}
14 changes: 14 additions & 0 deletions packages/rollup-plugin-md-ts/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"compilerOptions": {
"target": "ES2018",
"module": "ESNext",
"moduleResolution": "node",
"declaration": true,
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}

0 comments on commit 74353a3

Please sign in to comment.