Skip to content

Commit

Permalink
fix: bracket mismatch issue (#108)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DylanPiercey
DylanPiercey authored May 23, 2022
1 parent 2bab580 commit 8a988f4
Show file tree
Hide file tree
Showing 13 changed files with 158 additions and 76 deletions.
5 changes: 5 additions & 0 deletions .changeset/tidy-moles-train.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"htmljs-parser": patch
---

Fix issue where parser would sometimes not consume enough characters and cause a bracket mismatch
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

160 changes: 112 additions & 48 deletions ...__tests__/fixtures/attr-method-shorthand/__snapshots__/attr-method-shorthand.expected.txt
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,119 @@
1╭─ <foo onclick(event) {
│ │ │ ││ │╰─ attrMethod.body.value " \n console.log(\"hello\"); \n event.preventDefault();\n"
│ │ │ ││ ╰─ attrMethod.body "{ \n console.log(\"hello\"); \n event.preventDefault();\n}"
1╭─ <foo onclick(event){}/>
│ │ │ ││ ││╰─ openTagEnd:selfClosed "/>"
│ │ │ ││ │╰─ attrMethod.body.value
│ │ │ ││ ╰─ attrMethod.body "{}"
│ │ │ │╰─ attrMethod.params.value "event"
│ │ │ ├─ attrMethod.params "(event)"
│ │ │ ╰─ attrMethod "(event) { \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ │ ╰─ attrMethod "(event){}"
│ │ ╰─ attrName "onclick"
╰─ ╰─ tagName "foo"
2├─ console.log("hello");
3├─ event.preventDefault();
4╭─ }/>
╰─ ╰─ openTagEnd:selfClosed "/>"
5├─
6╭─ <foo onclick (event) {
│ │ │ ││ │╰─ attrMethod.body.value " \n console.log(\"hello\"); \n event.preventDefault();\n"
│ │ │ ││ ╰─ attrMethod.body "{ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ │ │╰─ attrMethod.params.value "event"
│ │ │ ├─ attrMethod.params "(event)"
│ │ │ ╰─ attrMethod "(event) { \n console.log(\"hello\"); \n event.preventDefault();\n}"
2├─
3╭─ <foo onclick(event){
│ │ │ ││ │╰─ attrMethod.body.value " \n console.log(\"hello\"); \n event.preventDefault();\n"
│ │ │ ││ ╰─ attrMethod.body "{ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ │ │╰─ attrMethod.params.value "event"
│ │ │ ├─ attrMethod.params "(event)"
│ │ │ ╰─ attrMethod "(event){ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ ╰─ attrName "onclick"
╰─ ╰─ tagName "foo"
7├─ console.log("hello");
8├─ event.preventDefault();
9╭─ }/>
4├─ console.log("hello");
5├─ event.preventDefault();
6╭─ }/>
╰─ ╰─ openTagEnd:selfClosed "/>"
10├─
11╭─ <foo(event) {
7├─
8╭─ <foo onclick(event) {
│ │ │ ││ │╰─ attrMethod.body.value " \n console.log(\"hello\"); \n event.preventDefault();\n"
│ │ │ ││ ╰─ attrMethod.body "{ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ │ │╰─ attrMethod.params.value "event"
│ │ │ ├─ attrMethod.params "(event)"
│ │ │ ╰─ attrMethod "(event) { \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ ╰─ attrName "onclick"
╰─ ╰─ tagName "foo"
9├─ console.log("hello");
10├─ event.preventDefault();
11╭─ }/>
╰─ ╰─ openTagEnd:selfClosed "/>"
12├─
13╭─ <foo onclick (event) {
│ │ │ ││ │╰─ attrMethod.body.value " \n console.log(\"hello\"); \n event.preventDefault();\n"
│ │ │ ││ ╰─ attrMethod.body "{ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ │ │╰─ attrMethod.params.value "event"
│ │ │ ├─ attrMethod.params "(event)"
│ │ │ ╰─ attrMethod "(event) { \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ ╰─ attrName "onclick"
╰─ ╰─ tagName "foo"
14├─ console.log("hello");
15├─ event.preventDefault();
16╭─ }/>
╰─ ╰─ openTagEnd:selfClosed "/>"
17├─
18╭─ <foo(event){
│ │ ││ │╰─ attrMethod.body.value " \n console.log(\"hello\"); \n event.preventDefault();\n"
│ │ ││ ╰─ attrMethod.body "{ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ │╰─ attrMethod.params.value "event"
│ │ ├─ attrMethod.params "(event)"
│ │ ├─ attrMethod "(event){ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ ╰─ attrName
╰─ ╰─ tagName "foo"
19├─ console.log("hello");
20├─ event.preventDefault();
21╭─ }/>
╰─ ╰─ openTagEnd:selfClosed "/>"
22├─
23╭─ <foo(event) {
│ │ ││ │╰─ attrMethod.body.value " \n console.log(\"hello\"); \n event.preventDefault();\n"
│ │ ││ ╰─ attrMethod.body "{ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ │╰─ attrMethod.params.value "event"
│ │ ├─ attrMethod.params "(event)"
│ │ ├─ attrMethod "(event) { \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ ╰─ attrName
╰─ ╰─ tagName "foo"
12├─ console.log("hello");
13├─ event.preventDefault();
14╭─ }/>
24├─ console.log("hello");
25├─ event.preventDefault();
26╭─ }/>
╰─ ╰─ openTagEnd:selfClosed "/>"
15├─
16╭─ <foo (event) {
27├─
28╭─ <foo (event) {
│ │ ││ │╰─ attrMethod.body.value " \n console.log(\"hello\"); \n event.preventDefault();\n"
│ │ ││ ╰─ attrMethod.body "{ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ │╰─ attrMethod.params.value "event"
│ │ ├─ attrMethod.params "(event)"
│ │ ├─ attrMethod "(event) { \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ ╰─ attrName
╰─ ╰─ tagName "foo"
17├─ console.log("hello");
18├─ event.preventDefault();
19╭─ }/>
29├─ console.log("hello");
30├─ event.preventDefault();
31╭─ }/>
╰─ ╰─ openTagEnd:selfClosed "/>"
20├─
21╭─ foo onclick(event) {
32├─
33╭─ foo onclick(event){
│ │ │ ││ │╰─ attrMethod.body.value " \n console.log(\"hello\"); \n event.preventDefault();\n"
│ │ │ ││ ╰─ attrMethod.body "{ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ │ │╰─ attrMethod.params.value "event"
│ │ │ ├─ attrMethod.params "(event)"
│ │ │ ╰─ attrMethod "(event){ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ ╰─ attrName "onclick"
╰─ ╰─ tagName "foo"
34├─ console.log("hello");
35├─ event.preventDefault();
36├─ }
37╭─
╰─ ╰─ openTagEnd
38╭─ foo onclick(event) {
│ │ │ ││ │╰─ attrMethod.body.value " \n console.log(\"hello\"); \n event.preventDefault();\n"
│ │ │ ││ ╰─ attrMethod.body "{ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ │ │╰─ attrMethod.params.value "event"
│ │ │ ├─ attrMethod.params "(event)"
│ │ │ ╰─ attrMethod "(event) { \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ ╰─ attrName "onclick"
│ ├─ closeTag(foo)
╰─ ╰─ tagName "foo"
22├─ console.log("hello");
23├─ event.preventDefault();
24├─ }
25╭─
39├─ console.log("hello");
40├─ event.preventDefault();
41├─ }
42╭─
╰─ ╰─ openTagEnd
26╭─ foo onclick (event) {
43╭─ foo onclick (event) {
│ │ │ ││ │╰─ attrMethod.body.value " \n console.log(\"hello\"); \n event.preventDefault();\n"
│ │ │ ││ ╰─ attrMethod.body "{ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ │ │╰─ attrMethod.params.value "event"
Expand All @@ -72,12 +122,26 @@
│ │ ╰─ attrName "onclick"
│ ├─ closeTag(foo)
╰─ ╰─ tagName "foo"
27├─ console.log("hello");
28├─ event.preventDefault();
29├─ }
30╭─
44├─ console.log("hello");
45├─ event.preventDefault();
46├─ }
47╭─
╰─ ╰─ openTagEnd
48╭─ foo(event){
│ │ ││ │╰─ attrMethod.body.value " \n console.log(\"hello\"); \n event.preventDefault();\n"
│ │ ││ ╰─ attrMethod.body "{ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ │╰─ attrMethod.params.value "event"
│ │ ├─ attrMethod.params "(event)"
│ │ ├─ attrMethod "(event){ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ ╰─ attrName
│ ├─ closeTag(foo)
╰─ ╰─ tagName "foo"
49├─ console.log("hello");
50├─ event.preventDefault();
51├─ }
52╭─
╰─ ╰─ openTagEnd
31╭─ foo(event) {
53╭─ foo(event) {
│ │ ││ │╰─ attrMethod.body.value " \n console.log(\"hello\"); \n event.preventDefault();\n"
│ │ ││ ╰─ attrMethod.body "{ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ │╰─ attrMethod.params.value "event"
Expand All @@ -86,12 +150,12 @@
│ │ ╰─ attrName
│ ├─ closeTag(foo)
╰─ ╰─ tagName "foo"
32├─ console.log("hello");
33├─ event.preventDefault();
34├─ }
35╭─
54├─ console.log("hello");
55├─ event.preventDefault();
56├─ }
57╭─
╰─ ╰─ openTagEnd
36╭─ foo (event) {
58╭─ foo (event) {
│ │ ││ │╰─ attrMethod.body.value " \n console.log(\"hello\"); \n event.preventDefault();\n"
│ │ ││ ╰─ attrMethod.body "{ \n console.log(\"hello\"); \n event.preventDefault();\n}"
│ │ │╰─ attrMethod.params.value "event"
Expand All @@ -100,8 +164,8 @@
│ │ ╰─ attrName
│ ├─ closeTag(foo)
╰─ ╰─ tagName "foo"
37├─ console.log("hello");
38├─ event.preventDefault();
39╭─ }
59├─ console.log("hello");
60├─ event.preventDefault();
61╭─ }
│ ├─ closeTag(foo)
╰─ ╰─ openTagEnd
22 changes: 22 additions & 0 deletions src/__tests__/fixtures/attr-method-shorthand/input.marko
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
<foo onclick(event){}/>

<foo onclick(event){
console.log("hello");
event.preventDefault();
}/>

<foo onclick(event) {
console.log("hello");
event.preventDefault();
Expand All @@ -8,6 +15,11 @@
event.preventDefault();
}/>

<foo(event){
console.log("hello");
event.preventDefault();
}/>

<foo(event) {
console.log("hello");
event.preventDefault();
Expand All @@ -18,6 +30,11 @@
event.preventDefault();
}/>

foo onclick(event){
console.log("hello");
event.preventDefault();
}

foo onclick(event) {
console.log("hello");
event.preventDefault();
Expand All @@ -28,6 +45,11 @@ foo onclick (event) {
event.preventDefault();
}

foo(event){
console.log("hello");
event.preventDefault();
}

foo(event) {
console.log("hello");
event.preventDefault();
Expand Down
7 changes: 0 additions & 7 deletions src/__tests__/fixtures/testing/__snapshots__/testing.expected.txt
View file

This file was deleted.

1 change: 0 additions & 1 deletion src/__tests__/fixtures/testing/input.marko
View file

This file was deleted.

9 changes: 4 additions & 5 deletions src/states/ATTRIBUTE.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ export const ATTRIBUTE: StateDefinition<AttrMeta> = {
(code === CODE.PERIOD && this.lookAheadFor(".."))
) {
attr.valueStart = this.pos;
this.forward = 0;

if (code === CODE.COLON) {
ensureAttrName(this, attr);
Expand All @@ -111,31 +112,29 @@ export const ATTRIBUTE: StateDefinition<AttrMeta> = {
expr.terminator = this.isConcise
? CONCISE_VALUE_TERMINATORS
: HTML_VALUE_TERMINATORS;

this.pos--;
} else if (code === CODE.OPEN_PAREN) {
ensureAttrName(this, attr);
attr.stage = ATTR_STAGE.ARGUMENT;
this.pos++; // skip (
this.forward = 0;
this.enterState(STATE.EXPRESSION).terminator = CODE.CLOSE_PAREN;
this.pos--;
} else if (code === CODE.OPEN_CURLY_BRACE && attr.args) {
ensureAttrName(this, attr);
attr.stage = ATTR_STAGE.BLOCK;
this.pos++; // skip {
this.forward = 0;
const expr = this.enterState(STATE.EXPRESSION);
expr.terminatedByWhitespace = false;
expr.terminator = CODE.CLOSE_CURLY_BRACE;
this.pos--;
} else if (attr.stage === ATTR_STAGE.UNKNOWN) {
attr.stage = ATTR_STAGE.NAME;
this.forward = 0;
const expr = this.enterState(STATE.EXPRESSION);
expr.terminatedByWhitespace = true;
expr.skipOperators = true;
expr.terminator = this.isConcise
? CONCISE_NAME_TERMINATORS
: HTML_NAME_TERMINATORS;
this.pos--;
} else {
this.exitState();
}
Expand Down
2 changes: 1 addition & 1 deletion src/states/BEGIN_DELIMITED_HTML_BLOCK.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ export const BEGIN_DELIMITED_HTML_BLOCK: StateDefinition<DelimitedHTMLBlockMeta>
const startPos = this.pos;
if (!this.consumeWhitespaceOnLine()) {
this.pos = startPos + 1;
this.forward = 0;
this.beginHtmlBlock(undefined, true);
this.pos--;
}
}
},
Expand Down
2 changes: 1 addition & 1 deletion src/states/CONCISE_HTML_CONTENT.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export const CONCISE_HTML_CONTENT: StateDefinition = {
}

this.enterState(STATE.OPEN_TAG);
this.pos--; // START_TAG_NAME expects to start at the first character
this.forward = 0; // START_TAG_NAME expects to start at the first character
}
},

Expand Down
4 changes: 2 additions & 2 deletions src/states/INLINE_SCRIPT.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,17 @@ export const INLINE_SCRIPT: StateDefinition<ScriptletMeta> = {
eof() {},

char(code, inlineScript) {
this.forward = 0;

if (code === CODE.OPEN_CURLY_BRACE) {
inlineScript.block = true;
this.pos++; // skip {
const expr = this.enterState(STATE.EXPRESSION);
expr.terminator = CODE.CLOSE_CURLY_BRACE;
expr.skipOperators = true;
this.pos--;
} else {
const expr = this.enterState(STATE.EXPRESSION);
expr.terminatedByEOL = true;
this.pos--;
}
},

Expand Down
Loading

0 comments on commit 8a988f4

Please sign in to comment.