Skip to content

Commit

Permalink
feat: Redefine options.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaywcjlove
jaywcjlove committed Oct 2, 2021
1 parent 8d50fc0 commit f3a5033
Show file tree
Hide file tree
Showing 4 changed files with 228 additions and 54 deletions.
129 changes: 105 additions & 24 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,16 @@ npm install rehype-rewrite

## Usage

> ⚠️ Migrate from rehype-rewrite ~~v2.x~~ to `v3.x`.
>
> ```diff
> rehype()
> - .use(rehypeRewrite, (node, index, parent) => {})
> + .use(rehypeRewrite, {
> + rewrite: (node, index, parent) => {}
> + })
> ```
```js
import { rehype } from 'rehype';
import rehypeRewrite from 'rehype-rewrite';
Expand All @@ -27,9 +37,11 @@ import stringify from 'rehype-stringify';
const html = `<h1>header</h1>`;
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeRewrite, (node, index, parent) => {
if(node.type == 'text' && node.value == 'header') {
node.value = ''
.use(rehypeRewrite, {
rewrite: (node, index, parent) => {
if(node.type == 'text' && node.value == 'header') {
node.value = ''
}
}
})
.use(stringify)
Expand All @@ -40,24 +52,85 @@ const htmlStr = rehype()
> ```html
> <h1>header</h1>
> ```
> Output:
> **`Output:`**
>
> ```html
> <h1></h1>
> ```
>

## Options

```ts
import { Root, Element, ElementContent } from 'hast';
export declare type RehypeRewriteOptions = {
selector?: string;
rewrite(node: ElementContent, index: number | null, parent: Root | Element | null): void;
};
```

### `selector?: string;`

Select an element to be wrapped. Expects a string selector that can be passed to hast-util-select ([supported selectors](https://github.com/syntax-tree/hast-util-select/blob/master/readme.md#support)). If `selector` is not set then wrap will check for a body all elements.

### `rewrite(node, index, parent): void;`

Rewrite element.

## Example

### Example 1

```js
import { rehype } from 'rehype';
import rehypeRewrite from 'rehype-rewrite';
import stringify from 'rehype-stringify';

const html = `<h1>header</h1><h1>header</h1><h1 class="title3">header</h1>`;
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeRewrite, {
selector: 'h1',
rewrite: (node) => {
if (node.type === 'element') {
node.properties.className = 'test';
}
}
})
.use(stringify)
.processSync(html)
.toString()
```

> ```html
> <h1>header</h1>
> <h1>header</h1>
> <h1 class="title3">header</h1>
> ```
> **`Output:`**
>
> ```html
> <h1 class="test">header</h1>
> <h1 class="test">header</h1>
> <h1 class="test">header</h1>
> ```
>
### Example 2

```js
import { rehype } from 'rehype';
import rehypeRewrite from 'rehype-rewrite';
import stringify from 'rehype-stringify';

const html = `<h1>header</h1>`;
const htmlStr = rehype()
.use(rehypeRewrite, (node) => {
if (node.type == 'element' && node.tagName == 'body') {
node.properties = { ...node.properties, style: 'color:red;'}
.use(rehypeRewrite, {
rewrite: (node) => {
if (node.type == 'element' && node.tagName == 'body') {
node.properties = { ...node.properties, style: 'color:red;'}
}
}
})
.use(stringify)
Expand All @@ -68,12 +141,14 @@ const htmlStr = rehype()
> ```html
> <h1>header</h1>
> ```
> Output:
> **`Output:`**
>
> ```html
> <html><head></head><body style="color:red;"><h1>header</h1></body></html>
> ```
>
>
### Example 3

```js
import { rehype } from 'rehype';
Expand All @@ -83,16 +158,18 @@ import stringify from 'rehype-stringify';
const html = `<h1>hello</h1>`;
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeRewrite, (node) => {
if (node.type == 'element' && node.tagName == 'h1') {
node.children = [ ...node.children, {
type: 'element',
tagName: 'span',
properties: {},
children: [
{type: 'text', value: ' world'}
]
}]
.use(rehypeRewrite, {
rewrite: (node) => {
if (node.type == 'element' && node.tagName == 'h1') {
node.children = [ ...node.children, {
type: 'element',
tagName: 'span',
properties: {},
children: [
{type: 'text', value: ' world'}
]
}]
}
}
})
.use(stringify)
Expand All @@ -103,13 +180,15 @@ const htmlStr = rehype()
> ```html
> <h1>hello</h1>
> ```
> Output:
> **`Output:`**
>
> ```html
> <h1>hello<span> world</span></h1>
> ```
>
### Example 4

```js
import { unified } from 'unified';
import remarkParse from 'remark-parse';
Expand All @@ -123,9 +202,11 @@ const htmlStr = unified()
.use(remarkParse)
.use(remark2rehype, { allowDangerousHtml: true })
.use(rehypeRaw)
.use(rehypeRewrite, (node) => {
if (node.type == 'element' && node.tagName == 'p') {
node.properties = { ...node.properties, style: 'color:red;' }
.use(rehypeRewrite, {
rewrite: (node) => {
if (node.type == 'element' && node.tagName == 'p') {
node.properties = { ...node.properties, style: 'color:red;' }
}
}
})
.use(stringify)
Expand All @@ -137,7 +218,7 @@ const htmlStr = unified()
> <h1>hello</h1>
> ```
>
> Output:
> **`Output:`**
>
> ```html
> <p style="color:red;">Hello World!</p>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
"dependencies": {
"unified": "10.1.0",
"unist-util-visit": "4.1.0",
"unist-util-visit-parents": "5.1.0"
"hast-util-select": "5.0.1"
},
"devDependencies": {
"rehype": "12.0.0",
Expand Down
124 changes: 101 additions & 23 deletions src/__tests__/index.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
/// <reference types="jest" />
import { unified } from 'unified'
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remark2rehype from 'remark-rehype';
import { rehype } from 'rehype';
Expand All @@ -8,15 +7,89 @@ import stringify from 'rehype-stringify';
import rehypeRewrite from '..';

describe('rehype-rewrite test case', () => {
it('selector options', async () => {
const html = `<h1>header</h1>`;
const expected = `<h1 class="test">header</h1>`
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeRewrite, {
selector: 'h1',
rewrite: (node) => {
if (node.type === 'element') {
node.properties = { ...node.properties, class: 'test' }
}
}
})
.use(stringify)
.processSync(html)
.toString()

expect(htmlStr).toEqual(expected);
});

it('selector options', async () => {
const html = `<h1>header</h1><h1>header</h1><h1 class="title3">header</h1>`;
const expected = `<h1 class="test">header</h1><h1 class="test">header</h1><h1 class="test">header</h1>`
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeRewrite, {
selector: 'h1',
rewrite: (node) => {
if (node.type === 'element') {
node.properties!.className = 'test';
}
}
})
.use(stringify)
.processSync(html)
.toString()

expect(htmlStr).toEqual(expected);
});

it('selector = undefined', async () => {
const html = `<h1>header</h1>`;
const expected = `<h1>header</h1>`
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeRewrite, {
selector: 'h1.good',
rewrite: (node) => {
if (node.type === 'element') {
node.properties = { ...node.properties, class: 'test' }
}
}
})
.use(stringify)
.processSync(html)
.toString()

expect(htmlStr).toEqual(expected);
});

it('selector = undefined', async () => {
const html = `<h1>header</h1>`;
const expected = `<h1>header</h1>`
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeRewrite)
.use(stringify)
.processSync(html)
.toString()

expect(htmlStr).toEqual(expected);
});

it('remove text', async () => {
const html = `<h1>header</h1>`;
const expected = `<h1></h1>`
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeRewrite, (node) => {
if(node.type == 'text' && node.value == 'header') {
console.log('node.value:', node.value)
node.value = ''
.use(rehypeRewrite, {
rewrite: (node) => {
if(node.type == 'text' && node.value == 'header') {
node.value = ''
}
}
})
.use(stringify)
Expand All @@ -30,9 +103,11 @@ describe('rehype-rewrite test case', () => {
const html = `<h1>header</h1>`;
const expected = `<html><head></head><body style="color:red;"><h1>header</h1></body></html>`
const htmlStr = rehype()
.use(rehypeRewrite, (node) => {
if (node.type == 'element' && node.tagName == 'body') {
node.properties = { ...node.properties, style: 'color:red;'}
.use(rehypeRewrite, {
rewrite: (node) => {
if (node.type == 'element' && node.tagName == 'body') {
node.properties = { ...node.properties, style: 'color:red;'}
}
}
})
.use(stringify)
Expand All @@ -47,16 +122,18 @@ describe('rehype-rewrite test case', () => {
const expected = `<h1>hello<span> world</span></h1>`
const htmlStr = rehype()
.data('settings', { fragment: true })
.use(rehypeRewrite, (node) => {
if (node.type == 'element' && node.tagName == 'h1') {
node.children = [ ...node.children, {
type: 'element',
tagName: 'span',
properties: {},
children: [
{type: 'text', value: ' world'}
]
}]
.use(rehypeRewrite, {
rewrite: (node) => {
if (node.type == 'element' && node.tagName == 'h1') {
node.children = [ ...node.children, {
type: 'element',
tagName: 'span',
properties: {},
children: [
{type: 'text', value: ' world'}
]
}]
}
}
})
.use(stringify)
Expand All @@ -73,9 +150,11 @@ describe('rehype-rewrite test case', () => {
.use(remarkParse)
.use(remark2rehype, { allowDangerousHtml: true })
.use(rehypeRaw)
.use(rehypeRewrite, (node) => {
if (node.type == 'element' && node.tagName == 'p') {
node.properties = { ...node.properties, style: 'color:red;' }
.use(rehypeRewrite, {
rewrite: (node) => {
if (node.type == 'element' && node.tagName == 'p') {
node.properties = { ...node.properties, style: 'color:red;' }
}
}
})
.use(stringify)
Expand All @@ -97,6 +176,5 @@ describe('rehype-rewrite test case', () => {

expect(htmlStr).toEqual(expected);
});

});

0 comments on commit f3a5033

Please sign in to comment.