-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
133 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,133 @@ | ||
# jsxlike | ||
# jsxlike | ||
|
||
## About | ||
|
||
HTML 文字列を React の JSX で使える構文におおよそ変換します。 | ||
|
||
- 依存ライブラリゼロ | ||
- 正規表現の文字列マッチングと replace 関数のみなので軽量で高速 | ||
- 厳密な構文処理ではないので未実装のパターンは処理されない | ||
|
||
## How To Use | ||
|
||
```sh | ||
$ npm i jsxlike | ||
``` | ||
|
||
```js | ||
import jsxlike from "jsxlike" | ||
|
||
const htmlStr = `<p class="aaa">bbb</p>` | ||
|
||
console.log(jsxlike(htmlStr, {} /* options */)) | ||
// => <p className="aaa">bbb</p> | ||
``` | ||
|
||
## Options | ||
|
||
```ts | ||
const defaultOptions = { | ||
extractTags: [], | ||
mapAttrs: { | ||
class: "className", | ||
charset: "charSet", | ||
for: "htmlFor", | ||
tabindex: "tabIndex", | ||
readonly: "readOnly", | ||
maxlength: "maxLength", | ||
colspan: "colSpan", | ||
rowspan: "rowSpan", | ||
cellspacing: "cellSpacing", | ||
cellpadding: "cellPadding", | ||
usemap: "useMap", | ||
frameborder: "frameBorder", | ||
"xlink:href": "href", | ||
}, | ||
styleAttrs: true, | ||
styleTags: true, | ||
scriptTags: true, | ||
commentTags: true, | ||
voidTags: ["meta", "link", "img", "input", "br", "wbr", "hr"], | ||
shortTags: ["*"], | ||
absolutePath: "", | ||
absoluteAttrs: { | ||
link: ["href"], | ||
script: ["src"], | ||
img: ["src"], | ||
use: ["xlink:href", "href"], | ||
}, | ||
} | ||
``` | ||
|
||
### extractTags | ||
|
||
type: `string[]` | ||
|
||
特定の HTML タグを抽出できます。例えば `["link", "script"]` とすることで `<link />` `<script />` タグのみを出力できます。 | ||
|
||
### mapAttrs | ||
|
||
type: `{ [attr: string]: string }` | ||
|
||
属性名 `attr` を `value` に置換する設定。オプションを設定するとデフォルトオプションとマージされます。 | ||
|
||
### styleAttrs | ||
|
||
type: `boolean` | ||
|
||
スタイル属性を置換するか否か。 | ||
|
||
### styleTags | ||
|
||
type: `boolean | "erase"` | ||
|
||
スタイルタグを置換するか否か。または `erase` にすることで除去します。 | ||
|
||
### scriptTags | ||
|
||
type: `boolean | "erase"` | ||
|
||
スクリプトタグを置換するか否か。または `erase` にすることで除去します。 | ||
|
||
### commentTags | ||
|
||
type: `boolean | "erase"` | ||
|
||
コメントタグを置換するか否か。または `erase` にすることで除去します。 | ||
|
||
### voidTags | ||
|
||
type: `string[]` | ||
|
||
設定した空要素に閉じスラッシュを追加します。 | ||
|
||
### shortTags | ||
|
||
type: `string[]` | ||
|
||
設定した要素に子要素がない場合は閉じタグを省略します。配列に `*` を含むとすべての要素が対象となります。 | ||
|
||
### absolutePath | ||
|
||
type: `string` | ||
|
||
URL を設定するとルートパスが絶対パスに置換されます。 | ||
|
||
### absoluteAttrs | ||
|
||
type: `{ [tagName: string]: string[] }` | ||
|
||
絶対パスに置換するタグと属性を指定します。 | ||
|
||
## Security | ||
|
||
jsxlike にエスケープ処理は含まれていません。ユーザーの入力を含んだ実行結果をそのままブラウザでレンダリングすると XSS の脆弱性に繋がる可能性があります。そういった場合はレンダリング前にサニタイジングを追加してください。 | ||
|
||
## License | ||
|
||
- MIT | ||
|
||
## Credit | ||
|
||
- Author: [Qrac](https://qrac.jp) | ||
- Organization: [QRANOKO](https://qranoko.jp) |