https://github.com/differui/sfc-parser
a toy vue sfc parser implementation
https://github.com/differui/sfc-parser
sfc vue
Last synced: 7 months ago
JSON representation
a toy vue sfc parser implementation
- Host: GitHub
- URL: https://github.com/differui/sfc-parser
- Owner: differui
- License: mit
- Created: 2018-04-14T16:03:39.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-14T16:15:39.000Z (almost 8 years ago)
- Last Synced: 2025-03-16T02:28:35.098Z (about 1 year ago)
- Topics: sfc, vue
- Language: TypeScript
- Homepage:
- Size: 13.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sfc-parser
> a tony vue sfc parser implementation
## Install
```bash
npm i sfc-parser
```
## Usage
```javascript
import { tokenize, parse, compile } from 'sfc-parser';
const source = `
{{ msg }}
export default {
data () {
return {
msg: 'hello'
}
}
}
.app h1 {
color: red
}
`;
const tokens = tokenize(source);
const ast = parse(source);
compile(source, {
scan: false, // true => same as tokenize(source)
parse: false, // true => same as parse(source)
});
```
## Grammar
This is non-official ebnf grammar of Vue single file component. Only keeps minimal descriptions for the tony sfc parser.For more information please visit vue sfc spec: https://vue-loader.vuejs.org/en/start/spec.html
```ebnf
# metacharacters
*: 0 or more
+: 1 or more
?: 0 or 1
|: separates alternatives
[]: grouping
# regular expression
TAG_NAME: /(script|template|style)/
LT: /
GT: />/
SLASH: /\//
S: /\s+/
ALPHABETS: /\w/
DIGITS: /\d/
QUOTE: /"/
EQ: /=/
TEXT: /[^<>\/\s\w\d"=]*/
# rules
sfc
: S* [ block? S* ]*
;
block
: open S* content S* close
;
open
: LT TAG_NAME S* [ attr? S* ]* GT
;
close
: LT SLASH TAG_NAME S* GT
;
content
: [ TEXT | LT | GT | SLASH | S | ALPHABETS | DIGITS | QUOTE | EQ | TAG_NAME ]*
;
attr
: [ ALPHABETS | DIGITS ]+ S* [ EQ S* QUOTE ALPHABETS QUOTE ]?
;
```
## License
MIT © [BinRui Guan](mailto:differui@gmail.com)