# flkit

> A front-language(HTML,CSS,JS) toolkit that support tempate syntax(Smarty,PHP,ejs,jade)

Latest version **3.1.2** (published 2020-12-15) · 0 weekly downloads

## Install

```sh
npm install flkit
pnpm add flkit
yarn add flkit
bun add flkit
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.2 |
| Published | 2020-12-15 |
| First published | 2016-06-15 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=0.12.0 |
| Dependencies | 0 |
| Unpacked size | 359.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | welefen |
| Maintainers | welefen |

## Links

- npm: https://www.npmjs.com/package/flkit
- Repository: https://github.com/welefen/flkit
- Homepage: https://github.com/welefen/flkit#readme
- Issues: https://github.com/welefen/flkit/issues
- npm.io page: https://npm.io/package/flkit

## Recent versions

- 3.1.2 (latest) — 2020-12-15
- 3.1.1 — 2020-08-07
- 3.1.0 — 2020-08-05
- 3.0.19 — 2020-07-21
- 3.0.18 — 2020-06-10
- 3.0.17 — 2020-04-27
- 3.0.16 — 2020-04-27
- 3.0.15 — 2020-04-01
- 3.0.14 — 2020-03-19
- 3.0.13 — 2020-03-18
- 3.0.12 — 2018-12-25
- 3.0.11 — 2017-11-09
- 3.0.10 — 2016-08-17
- 3.0.9 — 2016-08-04
- 3.0.8 — 2016-08-03
- … 8 more at https://npm.io/package/flkit/versions

## README

# flkit

A JS/HTML/CSS Toolkit(Tokenizer、Parser) Support Template Syntax.

## Install

```js
npm install flkit;
```

## Methods

### getHtmlAttrValue(attrs, name)

* `attrs` {Array} 属性列表
* `name` {String} 属性名

获取属性值，如：

```js
import {getHtmlAttrValue} from 'flkit';
let attrs = token.ext.attrs;
let value = getHtmlAttrValue(attrs, 'src'); //获取属性 src 的值
```

### setHtmlAttrValue(attrs, name, value)

* `attrs` {Array} 属性列表
* `name` {String} 属性名
* `value` {String} 属性值

设置属性值，如果没有这个属性，则添加这个属性。如：

```js
import {setHtmlAttrValue} from 'flkit';
let attrs = token.ext.attrs;
attrs = setHtmlAttrValue(attrs, 'src', 'http://flkit.org');
```

### createToken(type, value, referToken)

* `type` {TokenType} Token 类型
* `value` {String} Token 值
* `referToken` {Token} 相关的 Token，主要是提取 Token 的位置

创建一个 Token，如：

```js
import {createToken} from 'flkit';
let token = createToke(TokenType.HTML_TAG_START, '<div name="flkit">');
```

### createRawToken(type, value, referToken)

* `type` {style | script} Token 类型 
* `value` {String | Array} Token 值
* `referToken` {Token} 相关的 Token，主要是提取 Token 的位置

创建一个 Script 或者 Style Token，如：

```js
import {createRawToken} from 'flkit';

createRawToken('script', 'var a = 1;');
createRawToken('style', 'a{color: red}');

createRawToken('style', [
  ...tokenList
])

```


### TokenType

```js
import {TokenType} from 'flkit';
```

包含的 TokenType 如下：

```
{
  EOS: 'eos',
  TPL: 'tpl',
  RESERVED_COMMENT: 'reserverd_comment',
  IE_HACK: 'ie_hack',
  
  XML_START: 'xml_start',
 
  HTML_TAG_START: 'html_tag_start',
  HTML_TAG_END: 'html_tag_end',
  HTML_TAG_TEXTAREA: 'html_tag_textarea',
  HTML_TAG_SCRIPT: 'html_tag_script',
  HTML_TAG_STYLE: 'html_tag_style',
  HTML_TAG_PRE: 'html_tag_pre',
  HTML_RAW_TEXT: 'html_raw_text',
  HTML_DOCTYPE: 'html_doctype',
  HTML_TEXT: 'html_text',
  HTML_CDATA: 'html_cdata',
  
  CSS_SELECTOR: 'css_selector',
  CSS_PROPERTY: 'css_property',
  CSS_VALUE: 'css_value',
  CSS_KEYFRAMES: 'css_keyframes',
  CSS_LEFT_BRACE: 'css_left_brace',
  CSS_RIGHT_BRACE: 'css_right_brace',
  CSS_SEMICOLON: 'css_semicolon',
  CSS_COLON: 'css_colon',
  CSS_MEDIA: 'css_media',
  CSS_NAMESPACE: 'css_namespace',
  CSS_IMPORT: 'css_import',
  CSS_CHARSET: 'css_charset',
  CSS_FONT_FACE: 'css_font_face',
  CSS_PAGE: 'css_page',
  CSS_AT: 'css_at',
  CSS_BRACK_HACK: 'css_brace_hack', // [;color: red;]
  CSS_VIEWPORT: 'css_viewport',
  CSS_MOZILLA: 'css_mozilla',

  CSS_SELECTOR_NAMESPACE: 'css_selector_namespace',
  CSS_SELECTOR_UNIVERSAL: 'css_selector_universal',
  CSS_SELECTOR_ATTRIBUTE: 'css_selector_attribute',
  CSS_SELECTOR_CLASS: 'css_selector_class',
  CSS_SELECTOR_ID: 'css_selector_id',
  CSS_SELECTOR_PSEUDO_CLASS: 'css_selector_pseudo_class',
  CSS_SELECTOR_PSEUDO_ELEMENT: 'css_selector_pseudo_element',
  CSS_SELECTOR_COMBINATOR: 'css_selector_combinator',
  CSS_SELECTOR_TYPE: 'css_selector_type',
  CSS_SELECTOR_COMMA: 'css_selector_comma'
}
```

---
_Source: https://npm.io/package/flkit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._