parse.spec.ts 83 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998
  1. import { ParserOptions } from '../src/options'
  2. import { baseParse, TextModes } from '../src/parse'
  3. import { ErrorCodes } from '../src/errors'
  4. import {
  5. CommentNode,
  6. ElementNode,
  7. ElementTypes,
  8. Namespaces,
  9. NodeTypes,
  10. Position,
  11. TextNode,
  12. InterpolationNode,
  13. ConstantTypes
  14. } from '../src/ast'
  15. describe('compiler: parse', () => {
  16. describe('Text', () => {
  17. test('simple text', () => {
  18. const ast = baseParse('some text')
  19. const text = ast.children[0] as TextNode
  20. expect(text).toStrictEqual({
  21. type: NodeTypes.TEXT,
  22. content: 'some text',
  23. loc: {
  24. start: { offset: 0, line: 1, column: 1 },
  25. end: { offset: 9, line: 1, column: 10 },
  26. source: 'some text'
  27. }
  28. })
  29. })
  30. test('simple text with invalid end tag', () => {
  31. const onError = jest.fn()
  32. const ast = baseParse('some text</div>', {
  33. onError
  34. })
  35. const text = ast.children[0] as TextNode
  36. expect(onError).toBeCalled()
  37. expect(text).toStrictEqual({
  38. type: NodeTypes.TEXT,
  39. content: 'some text',
  40. loc: {
  41. start: { offset: 0, line: 1, column: 1 },
  42. end: { offset: 9, line: 1, column: 10 },
  43. source: 'some text'
  44. }
  45. })
  46. })
  47. test('text with interpolation', () => {
  48. const ast = baseParse('some {{ foo + bar }} text')
  49. const text1 = ast.children[0] as TextNode
  50. const text2 = ast.children[2] as TextNode
  51. expect(text1).toStrictEqual({
  52. type: NodeTypes.TEXT,
  53. content: 'some ',
  54. loc: {
  55. start: { offset: 0, line: 1, column: 1 },
  56. end: { offset: 5, line: 1, column: 6 },
  57. source: 'some '
  58. }
  59. })
  60. expect(text2).toStrictEqual({
  61. type: NodeTypes.TEXT,
  62. content: ' text',
  63. loc: {
  64. start: { offset: 20, line: 1, column: 21 },
  65. end: { offset: 25, line: 1, column: 26 },
  66. source: ' text'
  67. }
  68. })
  69. })
  70. test('text with interpolation which has `<`', () => {
  71. const ast = baseParse('some {{ a<b && c>d }} text')
  72. const text1 = ast.children[0] as TextNode
  73. const text2 = ast.children[2] as TextNode
  74. expect(text1).toStrictEqual({
  75. type: NodeTypes.TEXT,
  76. content: 'some ',
  77. loc: {
  78. start: { offset: 0, line: 1, column: 1 },
  79. end: { offset: 5, line: 1, column: 6 },
  80. source: 'some '
  81. }
  82. })
  83. expect(text2).toStrictEqual({
  84. type: NodeTypes.TEXT,
  85. content: ' text',
  86. loc: {
  87. start: { offset: 21, line: 1, column: 22 },
  88. end: { offset: 26, line: 1, column: 27 },
  89. source: ' text'
  90. }
  91. })
  92. })
  93. test('text with mix of tags and interpolations', () => {
  94. const ast = baseParse('some <span>{{ foo < bar + foo }} text</span>')
  95. const text1 = ast.children[0] as TextNode
  96. const text2 = (ast.children[1] as ElementNode).children![1] as TextNode
  97. expect(text1).toStrictEqual({
  98. type: NodeTypes.TEXT,
  99. content: 'some ',
  100. loc: {
  101. start: { offset: 0, line: 1, column: 1 },
  102. end: { offset: 5, line: 1, column: 6 },
  103. source: 'some '
  104. }
  105. })
  106. expect(text2).toStrictEqual({
  107. type: NodeTypes.TEXT,
  108. content: ' text',
  109. loc: {
  110. start: { offset: 32, line: 1, column: 33 },
  111. end: { offset: 37, line: 1, column: 38 },
  112. source: ' text'
  113. }
  114. })
  115. })
  116. test('lonely "<" doesn\'t separate nodes', () => {
  117. const ast = baseParse('a < b', {
  118. onError: err => {
  119. if (err.code !== ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME) {
  120. throw err
  121. }
  122. }
  123. })
  124. const text = ast.children[0] as TextNode
  125. expect(text).toStrictEqual({
  126. type: NodeTypes.TEXT,
  127. content: 'a < b',
  128. loc: {
  129. start: { offset: 0, line: 1, column: 1 },
  130. end: { offset: 5, line: 1, column: 6 },
  131. source: 'a < b'
  132. }
  133. })
  134. })
  135. test('lonely "{{" doesn\'t separate nodes', () => {
  136. const ast = baseParse('a {{ b', {
  137. onError: error => {
  138. if (error.code !== ErrorCodes.X_MISSING_INTERPOLATION_END) {
  139. throw error
  140. }
  141. }
  142. })
  143. const text = ast.children[0] as TextNode
  144. expect(text).toStrictEqual({
  145. type: NodeTypes.TEXT,
  146. content: 'a {{ b',
  147. loc: {
  148. start: { offset: 0, line: 1, column: 1 },
  149. end: { offset: 6, line: 1, column: 7 },
  150. source: 'a {{ b'
  151. }
  152. })
  153. })
  154. })
  155. describe('Interpolation', () => {
  156. test('simple interpolation', () => {
  157. const ast = baseParse('{{message}}')
  158. const interpolation = ast.children[0] as InterpolationNode
  159. expect(interpolation).toStrictEqual({
  160. type: NodeTypes.INTERPOLATION,
  161. content: {
  162. type: NodeTypes.SIMPLE_EXPRESSION,
  163. content: `message`,
  164. isStatic: false,
  165. constType: ConstantTypes.NOT_CONSTANT,
  166. loc: {
  167. start: { offset: 2, line: 1, column: 3 },
  168. end: { offset: 9, line: 1, column: 10 },
  169. source: `message`
  170. }
  171. },
  172. loc: {
  173. start: { offset: 0, line: 1, column: 1 },
  174. end: { offset: 11, line: 1, column: 12 },
  175. source: '{{message}}'
  176. }
  177. })
  178. })
  179. test('it can have tag-like notation', () => {
  180. const ast = baseParse('{{ a<b }}')
  181. const interpolation = ast.children[0] as InterpolationNode
  182. expect(interpolation).toStrictEqual({
  183. type: NodeTypes.INTERPOLATION,
  184. content: {
  185. type: NodeTypes.SIMPLE_EXPRESSION,
  186. content: `a<b`,
  187. isStatic: false,
  188. constType: ConstantTypes.NOT_CONSTANT,
  189. loc: {
  190. start: { offset: 3, line: 1, column: 4 },
  191. end: { offset: 6, line: 1, column: 7 },
  192. source: 'a<b'
  193. }
  194. },
  195. loc: {
  196. start: { offset: 0, line: 1, column: 1 },
  197. end: { offset: 9, line: 1, column: 10 },
  198. source: '{{ a<b }}'
  199. }
  200. })
  201. })
  202. test('it can have tag-like notation (2)', () => {
  203. const ast = baseParse('{{ a<b }}{{ c>d }}')
  204. const interpolation1 = ast.children[0] as InterpolationNode
  205. const interpolation2 = ast.children[1] as InterpolationNode
  206. expect(interpolation1).toStrictEqual({
  207. type: NodeTypes.INTERPOLATION,
  208. content: {
  209. type: NodeTypes.SIMPLE_EXPRESSION,
  210. content: `a<b`,
  211. isStatic: false,
  212. constType: ConstantTypes.NOT_CONSTANT,
  213. loc: {
  214. start: { offset: 3, line: 1, column: 4 },
  215. end: { offset: 6, line: 1, column: 7 },
  216. source: 'a<b'
  217. }
  218. },
  219. loc: {
  220. start: { offset: 0, line: 1, column: 1 },
  221. end: { offset: 9, line: 1, column: 10 },
  222. source: '{{ a<b }}'
  223. }
  224. })
  225. expect(interpolation2).toStrictEqual({
  226. type: NodeTypes.INTERPOLATION,
  227. content: {
  228. type: NodeTypes.SIMPLE_EXPRESSION,
  229. isStatic: false,
  230. constType: ConstantTypes.NOT_CONSTANT,
  231. content: 'c>d',
  232. loc: {
  233. start: { offset: 12, line: 1, column: 13 },
  234. end: { offset: 15, line: 1, column: 16 },
  235. source: 'c>d'
  236. }
  237. },
  238. loc: {
  239. start: { offset: 9, line: 1, column: 10 },
  240. end: { offset: 18, line: 1, column: 19 },
  241. source: '{{ c>d }}'
  242. }
  243. })
  244. })
  245. test('it can have tag-like notation (3)', () => {
  246. const ast = baseParse('<div>{{ "</div>" }}</div>')
  247. const element = ast.children[0] as ElementNode
  248. const interpolation = element.children[0] as InterpolationNode
  249. expect(interpolation).toStrictEqual({
  250. type: NodeTypes.INTERPOLATION,
  251. content: {
  252. type: NodeTypes.SIMPLE_EXPRESSION,
  253. isStatic: false,
  254. // The `constType` is the default value and will be determined in `transformExpression`.
  255. constType: ConstantTypes.NOT_CONSTANT,
  256. content: '"</div>"',
  257. loc: {
  258. start: { offset: 8, line: 1, column: 9 },
  259. end: { offset: 16, line: 1, column: 17 },
  260. source: '"</div>"'
  261. }
  262. },
  263. loc: {
  264. start: { offset: 5, line: 1, column: 6 },
  265. end: { offset: 19, line: 1, column: 20 },
  266. source: '{{ "</div>" }}'
  267. }
  268. })
  269. })
  270. test('custom delimiters', () => {
  271. const ast = baseParse('<p>{msg}</p>', {
  272. delimiters: ['{', '}']
  273. })
  274. const element = ast.children[0] as ElementNode
  275. const interpolation = element.children[0] as InterpolationNode
  276. expect(interpolation).toStrictEqual({
  277. type: NodeTypes.INTERPOLATION,
  278. content: {
  279. type: NodeTypes.SIMPLE_EXPRESSION,
  280. content: `msg`,
  281. isStatic: false,
  282. constType: ConstantTypes.NOT_CONSTANT,
  283. loc: {
  284. start: { offset: 4, line: 1, column: 5 },
  285. end: { offset: 7, line: 1, column: 8 },
  286. source: 'msg'
  287. }
  288. },
  289. loc: {
  290. start: { offset: 3, line: 1, column: 4 },
  291. end: { offset: 8, line: 1, column: 9 },
  292. source: '{msg}'
  293. }
  294. })
  295. })
  296. })
  297. describe('Comment', () => {
  298. test('empty comment', () => {
  299. const ast = baseParse('<!---->')
  300. const comment = ast.children[0] as CommentNode
  301. expect(comment).toStrictEqual({
  302. type: NodeTypes.COMMENT,
  303. content: '',
  304. loc: {
  305. start: { offset: 0, line: 1, column: 1 },
  306. end: { offset: 7, line: 1, column: 8 },
  307. source: '<!---->'
  308. }
  309. })
  310. })
  311. test('simple comment', () => {
  312. const ast = baseParse('<!--abc-->')
  313. const comment = ast.children[0] as CommentNode
  314. expect(comment).toStrictEqual({
  315. type: NodeTypes.COMMENT,
  316. content: 'abc',
  317. loc: {
  318. start: { offset: 0, line: 1, column: 1 },
  319. end: { offset: 10, line: 1, column: 11 },
  320. source: '<!--abc-->'
  321. }
  322. })
  323. })
  324. test('two comments', () => {
  325. const ast = baseParse('<!--abc--><!--def-->')
  326. const comment1 = ast.children[0] as CommentNode
  327. const comment2 = ast.children[1] as CommentNode
  328. expect(comment1).toStrictEqual({
  329. type: NodeTypes.COMMENT,
  330. content: 'abc',
  331. loc: {
  332. start: { offset: 0, line: 1, column: 1 },
  333. end: { offset: 10, line: 1, column: 11 },
  334. source: '<!--abc-->'
  335. }
  336. })
  337. expect(comment2).toStrictEqual({
  338. type: NodeTypes.COMMENT,
  339. content: 'def',
  340. loc: {
  341. start: { offset: 10, line: 1, column: 11 },
  342. end: { offset: 20, line: 1, column: 21 },
  343. source: '<!--def-->'
  344. }
  345. })
  346. })
  347. test('comments option', () => {
  348. const astOptionNoComment = baseParse('<!--abc-->', { comments: false })
  349. const astOptionWithComments = baseParse('<!--abc-->', { comments: true })
  350. expect(astOptionNoComment.children).toHaveLength(0)
  351. expect(astOptionWithComments.children).toHaveLength(1)
  352. })
  353. // #2217
  354. test('comments in the <pre> tag should be removed when comments option requires it', () => {
  355. const rawText = `<p/><!-- foo --><p/>`
  356. const astWithComments = baseParse(`<pre>${rawText}</pre>`, {
  357. comments: true
  358. })
  359. expect(
  360. (astWithComments.children[0] as ElementNode).children
  361. ).toMatchObject([
  362. {
  363. type: NodeTypes.ELEMENT,
  364. tag: 'p'
  365. },
  366. {
  367. type: NodeTypes.COMMENT
  368. },
  369. {
  370. type: NodeTypes.ELEMENT,
  371. tag: 'p'
  372. }
  373. ])
  374. const astWithoutComments = baseParse(`<pre>${rawText}</pre>`, {
  375. comments: false
  376. })
  377. expect(
  378. (astWithoutComments.children[0] as ElementNode).children
  379. ).toMatchObject([
  380. {
  381. type: NodeTypes.ELEMENT,
  382. tag: 'p'
  383. },
  384. {
  385. type: NodeTypes.ELEMENT,
  386. tag: 'p'
  387. }
  388. ])
  389. })
  390. })
  391. describe('Element', () => {
  392. test('simple div', () => {
  393. const ast = baseParse('<div>hello</div>')
  394. const element = ast.children[0] as ElementNode
  395. expect(element).toStrictEqual({
  396. type: NodeTypes.ELEMENT,
  397. ns: Namespaces.HTML,
  398. tag: 'div',
  399. tagType: ElementTypes.ELEMENT,
  400. codegenNode: undefined,
  401. props: [],
  402. isSelfClosing: false,
  403. children: [
  404. {
  405. type: NodeTypes.TEXT,
  406. content: 'hello',
  407. loc: {
  408. start: { offset: 5, line: 1, column: 6 },
  409. end: { offset: 10, line: 1, column: 11 },
  410. source: 'hello'
  411. }
  412. }
  413. ],
  414. loc: {
  415. start: { offset: 0, line: 1, column: 1 },
  416. end: { offset: 16, line: 1, column: 17 },
  417. source: '<div>hello</div>'
  418. }
  419. })
  420. })
  421. test('empty', () => {
  422. const ast = baseParse('<div></div>')
  423. const element = ast.children[0] as ElementNode
  424. expect(element).toStrictEqual({
  425. type: NodeTypes.ELEMENT,
  426. ns: Namespaces.HTML,
  427. tag: 'div',
  428. tagType: ElementTypes.ELEMENT,
  429. codegenNode: undefined,
  430. props: [],
  431. isSelfClosing: false,
  432. children: [],
  433. loc: {
  434. start: { offset: 0, line: 1, column: 1 },
  435. end: { offset: 11, line: 1, column: 12 },
  436. source: '<div></div>'
  437. }
  438. })
  439. })
  440. test('self closing', () => {
  441. const ast = baseParse('<div/>after')
  442. const element = ast.children[0] as ElementNode
  443. expect(element).toStrictEqual({
  444. type: NodeTypes.ELEMENT,
  445. ns: Namespaces.HTML,
  446. tag: 'div',
  447. tagType: ElementTypes.ELEMENT,
  448. codegenNode: undefined,
  449. props: [],
  450. isSelfClosing: true,
  451. children: [],
  452. loc: {
  453. start: { offset: 0, line: 1, column: 1 },
  454. end: { offset: 6, line: 1, column: 7 },
  455. source: '<div/>'
  456. }
  457. })
  458. })
  459. test('void element', () => {
  460. const ast = baseParse('<img>after', {
  461. isVoidTag: tag => tag === 'img'
  462. })
  463. const element = ast.children[0] as ElementNode
  464. expect(element).toStrictEqual({
  465. type: NodeTypes.ELEMENT,
  466. ns: Namespaces.HTML,
  467. tag: 'img',
  468. tagType: ElementTypes.ELEMENT,
  469. codegenNode: undefined,
  470. props: [],
  471. isSelfClosing: false,
  472. children: [],
  473. loc: {
  474. start: { offset: 0, line: 1, column: 1 },
  475. end: { offset: 5, line: 1, column: 6 },
  476. source: '<img>'
  477. }
  478. })
  479. })
  480. test('template element with directives', () => {
  481. const ast = baseParse('<template v-if="ok"></template>')
  482. const element = ast.children[0]
  483. expect(element).toMatchObject({
  484. type: NodeTypes.ELEMENT,
  485. tagType: ElementTypes.TEMPLATE
  486. })
  487. })
  488. test('template element without directives', () => {
  489. const ast = baseParse('<template></template>')
  490. const element = ast.children[0]
  491. expect(element).toMatchObject({
  492. type: NodeTypes.ELEMENT,
  493. tagType: ElementTypes.ELEMENT
  494. })
  495. })
  496. test('native element with `isNativeTag`', () => {
  497. const ast = baseParse('<div></div><comp></comp><Comp></Comp>', {
  498. isNativeTag: tag => tag === 'div'
  499. })
  500. expect(ast.children[0]).toMatchObject({
  501. type: NodeTypes.ELEMENT,
  502. tag: 'div',
  503. tagType: ElementTypes.ELEMENT
  504. })
  505. expect(ast.children[1]).toMatchObject({
  506. type: NodeTypes.ELEMENT,
  507. tag: 'comp',
  508. tagType: ElementTypes.COMPONENT
  509. })
  510. expect(ast.children[2]).toMatchObject({
  511. type: NodeTypes.ELEMENT,
  512. tag: 'Comp',
  513. tagType: ElementTypes.COMPONENT
  514. })
  515. })
  516. test('native element without `isNativeTag`', () => {
  517. const ast = baseParse('<div></div><comp></comp><Comp></Comp>')
  518. expect(ast.children[0]).toMatchObject({
  519. type: NodeTypes.ELEMENT,
  520. tag: 'div',
  521. tagType: ElementTypes.ELEMENT
  522. })
  523. expect(ast.children[1]).toMatchObject({
  524. type: NodeTypes.ELEMENT,
  525. tag: 'comp',
  526. tagType: ElementTypes.ELEMENT
  527. })
  528. expect(ast.children[2]).toMatchObject({
  529. type: NodeTypes.ELEMENT,
  530. tag: 'Comp',
  531. tagType: ElementTypes.COMPONENT
  532. })
  533. })
  534. test('v-is with `isNativeTag`', () => {
  535. const ast = baseParse(
  536. `<div></div><div v-is="'foo'"></div><Comp></Comp>`,
  537. {
  538. isNativeTag: tag => tag === 'div'
  539. }
  540. )
  541. expect(ast.children[0]).toMatchObject({
  542. type: NodeTypes.ELEMENT,
  543. tag: 'div',
  544. tagType: ElementTypes.ELEMENT
  545. })
  546. expect(ast.children[1]).toMatchObject({
  547. type: NodeTypes.ELEMENT,
  548. tag: 'div',
  549. tagType: ElementTypes.COMPONENT
  550. })
  551. expect(ast.children[2]).toMatchObject({
  552. type: NodeTypes.ELEMENT,
  553. tag: 'Comp',
  554. tagType: ElementTypes.COMPONENT
  555. })
  556. })
  557. test('v-is without `isNativeTag`', () => {
  558. const ast = baseParse(`<div></div><div v-is="'foo'"></div><Comp></Comp>`)
  559. expect(ast.children[0]).toMatchObject({
  560. type: NodeTypes.ELEMENT,
  561. tag: 'div',
  562. tagType: ElementTypes.ELEMENT
  563. })
  564. expect(ast.children[1]).toMatchObject({
  565. type: NodeTypes.ELEMENT,
  566. tag: 'div',
  567. tagType: ElementTypes.COMPONENT
  568. })
  569. expect(ast.children[2]).toMatchObject({
  570. type: NodeTypes.ELEMENT,
  571. tag: 'Comp',
  572. tagType: ElementTypes.COMPONENT
  573. })
  574. })
  575. test('custom element', () => {
  576. const ast = baseParse('<div></div><comp></comp>', {
  577. isNativeTag: tag => tag === 'div',
  578. isCustomElement: tag => tag === 'comp'
  579. })
  580. expect(ast.children[0]).toMatchObject({
  581. type: NodeTypes.ELEMENT,
  582. tag: 'div',
  583. tagType: ElementTypes.ELEMENT
  584. })
  585. expect(ast.children[1]).toMatchObject({
  586. type: NodeTypes.ELEMENT,
  587. tag: 'comp',
  588. tagType: ElementTypes.ELEMENT
  589. })
  590. })
  591. test('built-in component', () => {
  592. const ast = baseParse('<div></div><comp></comp>', {
  593. isBuiltInComponent: tag => (tag === 'comp' ? Symbol() : void 0)
  594. })
  595. expect(ast.children[0]).toMatchObject({
  596. type: NodeTypes.ELEMENT,
  597. tag: 'div',
  598. tagType: ElementTypes.ELEMENT
  599. })
  600. expect(ast.children[1]).toMatchObject({
  601. type: NodeTypes.ELEMENT,
  602. tag: 'comp',
  603. tagType: ElementTypes.COMPONENT
  604. })
  605. })
  606. test('slot element', () => {
  607. const ast = baseParse('<slot></slot><Comp></Comp>')
  608. expect(ast.children[0]).toMatchObject({
  609. type: NodeTypes.ELEMENT,
  610. tag: 'slot',
  611. tagType: ElementTypes.SLOT
  612. })
  613. expect(ast.children[1]).toMatchObject({
  614. type: NodeTypes.ELEMENT,
  615. tag: 'Comp',
  616. tagType: ElementTypes.COMPONENT
  617. })
  618. })
  619. test('attribute with no value', () => {
  620. const ast = baseParse('<div id></div>')
  621. const element = ast.children[0] as ElementNode
  622. expect(element).toStrictEqual({
  623. type: NodeTypes.ELEMENT,
  624. ns: Namespaces.HTML,
  625. tag: 'div',
  626. tagType: ElementTypes.ELEMENT,
  627. codegenNode: undefined,
  628. props: [
  629. {
  630. type: NodeTypes.ATTRIBUTE,
  631. name: 'id',
  632. value: undefined,
  633. loc: {
  634. start: { offset: 5, line: 1, column: 6 },
  635. end: { offset: 7, line: 1, column: 8 },
  636. source: 'id'
  637. }
  638. }
  639. ],
  640. isSelfClosing: false,
  641. children: [],
  642. loc: {
  643. start: { offset: 0, line: 1, column: 1 },
  644. end: { offset: 14, line: 1, column: 15 },
  645. source: '<div id></div>'
  646. }
  647. })
  648. })
  649. test('attribute with empty value, double quote', () => {
  650. const ast = baseParse('<div id=""></div>')
  651. const element = ast.children[0] as ElementNode
  652. expect(element).toStrictEqual({
  653. type: NodeTypes.ELEMENT,
  654. ns: Namespaces.HTML,
  655. tag: 'div',
  656. tagType: ElementTypes.ELEMENT,
  657. codegenNode: undefined,
  658. props: [
  659. {
  660. type: NodeTypes.ATTRIBUTE,
  661. name: 'id',
  662. value: {
  663. type: NodeTypes.TEXT,
  664. content: '',
  665. loc: {
  666. start: { offset: 8, line: 1, column: 9 },
  667. end: { offset: 10, line: 1, column: 11 },
  668. source: '""'
  669. }
  670. },
  671. loc: {
  672. start: { offset: 5, line: 1, column: 6 },
  673. end: { offset: 10, line: 1, column: 11 },
  674. source: 'id=""'
  675. }
  676. }
  677. ],
  678. isSelfClosing: false,
  679. children: [],
  680. loc: {
  681. start: { offset: 0, line: 1, column: 1 },
  682. end: { offset: 17, line: 1, column: 18 },
  683. source: '<div id=""></div>'
  684. }
  685. })
  686. })
  687. test('attribute with empty value, single quote', () => {
  688. const ast = baseParse("<div id=''></div>")
  689. const element = ast.children[0] as ElementNode
  690. expect(element).toStrictEqual({
  691. type: NodeTypes.ELEMENT,
  692. ns: Namespaces.HTML,
  693. tag: 'div',
  694. tagType: ElementTypes.ELEMENT,
  695. codegenNode: undefined,
  696. props: [
  697. {
  698. type: NodeTypes.ATTRIBUTE,
  699. name: 'id',
  700. value: {
  701. type: NodeTypes.TEXT,
  702. content: '',
  703. loc: {
  704. start: { offset: 8, line: 1, column: 9 },
  705. end: { offset: 10, line: 1, column: 11 },
  706. source: "''"
  707. }
  708. },
  709. loc: {
  710. start: { offset: 5, line: 1, column: 6 },
  711. end: { offset: 10, line: 1, column: 11 },
  712. source: "id=''"
  713. }
  714. }
  715. ],
  716. isSelfClosing: false,
  717. children: [],
  718. loc: {
  719. start: { offset: 0, line: 1, column: 1 },
  720. end: { offset: 17, line: 1, column: 18 },
  721. source: "<div id=''></div>"
  722. }
  723. })
  724. })
  725. test('attribute with value, double quote', () => {
  726. const ast = baseParse('<div id=">\'"></div>')
  727. const element = ast.children[0] as ElementNode
  728. expect(element).toStrictEqual({
  729. type: NodeTypes.ELEMENT,
  730. ns: Namespaces.HTML,
  731. tag: 'div',
  732. tagType: ElementTypes.ELEMENT,
  733. codegenNode: undefined,
  734. props: [
  735. {
  736. type: NodeTypes.ATTRIBUTE,
  737. name: 'id',
  738. value: {
  739. type: NodeTypes.TEXT,
  740. content: ">'",
  741. loc: {
  742. start: { offset: 8, line: 1, column: 9 },
  743. end: { offset: 12, line: 1, column: 13 },
  744. source: '">\'"'
  745. }
  746. },
  747. loc: {
  748. start: { offset: 5, line: 1, column: 6 },
  749. end: { offset: 12, line: 1, column: 13 },
  750. source: 'id=">\'"'
  751. }
  752. }
  753. ],
  754. isSelfClosing: false,
  755. children: [],
  756. loc: {
  757. start: { offset: 0, line: 1, column: 1 },
  758. end: { offset: 19, line: 1, column: 20 },
  759. source: '<div id=">\'"></div>'
  760. }
  761. })
  762. })
  763. test('attribute with value, single quote', () => {
  764. const ast = baseParse("<div id='>\"'></div>")
  765. const element = ast.children[0] as ElementNode
  766. expect(element).toStrictEqual({
  767. type: NodeTypes.ELEMENT,
  768. ns: Namespaces.HTML,
  769. tag: 'div',
  770. tagType: ElementTypes.ELEMENT,
  771. codegenNode: undefined,
  772. props: [
  773. {
  774. type: NodeTypes.ATTRIBUTE,
  775. name: 'id',
  776. value: {
  777. type: NodeTypes.TEXT,
  778. content: '>"',
  779. loc: {
  780. start: { offset: 8, line: 1, column: 9 },
  781. end: { offset: 12, line: 1, column: 13 },
  782. source: "'>\"'"
  783. }
  784. },
  785. loc: {
  786. start: { offset: 5, line: 1, column: 6 },
  787. end: { offset: 12, line: 1, column: 13 },
  788. source: "id='>\"'"
  789. }
  790. }
  791. ],
  792. isSelfClosing: false,
  793. children: [],
  794. loc: {
  795. start: { offset: 0, line: 1, column: 1 },
  796. end: { offset: 19, line: 1, column: 20 },
  797. source: "<div id='>\"'></div>"
  798. }
  799. })
  800. })
  801. test('attribute with value, unquoted', () => {
  802. const ast = baseParse('<div id=a/></div>')
  803. const element = ast.children[0] as ElementNode
  804. expect(element).toStrictEqual({
  805. type: NodeTypes.ELEMENT,
  806. ns: Namespaces.HTML,
  807. tag: 'div',
  808. tagType: ElementTypes.ELEMENT,
  809. codegenNode: undefined,
  810. props: [
  811. {
  812. type: NodeTypes.ATTRIBUTE,
  813. name: 'id',
  814. value: {
  815. type: NodeTypes.TEXT,
  816. content: 'a/',
  817. loc: {
  818. start: { offset: 8, line: 1, column: 9 },
  819. end: { offset: 10, line: 1, column: 11 },
  820. source: 'a/'
  821. }
  822. },
  823. loc: {
  824. start: { offset: 5, line: 1, column: 6 },
  825. end: { offset: 10, line: 1, column: 11 },
  826. source: 'id=a/'
  827. }
  828. }
  829. ],
  830. isSelfClosing: false,
  831. children: [],
  832. loc: {
  833. start: { offset: 0, line: 1, column: 1 },
  834. end: { offset: 17, line: 1, column: 18 },
  835. source: '<div id=a/></div>'
  836. }
  837. })
  838. })
  839. test('multiple attributes', () => {
  840. const ast = baseParse('<div id=a class="c" inert style=\'\'></div>')
  841. const element = ast.children[0] as ElementNode
  842. expect(element).toStrictEqual({
  843. type: NodeTypes.ELEMENT,
  844. ns: Namespaces.HTML,
  845. tag: 'div',
  846. tagType: ElementTypes.ELEMENT,
  847. codegenNode: undefined,
  848. props: [
  849. {
  850. type: NodeTypes.ATTRIBUTE,
  851. name: 'id',
  852. value: {
  853. type: NodeTypes.TEXT,
  854. content: 'a',
  855. loc: {
  856. start: { offset: 8, line: 1, column: 9 },
  857. end: { offset: 9, line: 1, column: 10 },
  858. source: 'a'
  859. }
  860. },
  861. loc: {
  862. start: { offset: 5, line: 1, column: 6 },
  863. end: { offset: 9, line: 1, column: 10 },
  864. source: 'id=a'
  865. }
  866. },
  867. {
  868. type: NodeTypes.ATTRIBUTE,
  869. name: 'class',
  870. value: {
  871. type: NodeTypes.TEXT,
  872. content: 'c',
  873. loc: {
  874. start: { offset: 16, line: 1, column: 17 },
  875. end: { offset: 19, line: 1, column: 20 },
  876. source: '"c"'
  877. }
  878. },
  879. loc: {
  880. start: { offset: 10, line: 1, column: 11 },
  881. end: { offset: 19, line: 1, column: 20 },
  882. source: 'class="c"'
  883. }
  884. },
  885. {
  886. type: NodeTypes.ATTRIBUTE,
  887. name: 'inert',
  888. value: undefined,
  889. loc: {
  890. start: { offset: 20, line: 1, column: 21 },
  891. end: { offset: 25, line: 1, column: 26 },
  892. source: 'inert'
  893. }
  894. },
  895. {
  896. type: NodeTypes.ATTRIBUTE,
  897. name: 'style',
  898. value: {
  899. type: NodeTypes.TEXT,
  900. content: '',
  901. loc: {
  902. start: { offset: 32, line: 1, column: 33 },
  903. end: { offset: 34, line: 1, column: 35 },
  904. source: "''"
  905. }
  906. },
  907. loc: {
  908. start: { offset: 26, line: 1, column: 27 },
  909. end: { offset: 34, line: 1, column: 35 },
  910. source: "style=''"
  911. }
  912. }
  913. ],
  914. isSelfClosing: false,
  915. children: [],
  916. loc: {
  917. start: { offset: 0, line: 1, column: 1 },
  918. end: { offset: 41, line: 1, column: 42 },
  919. source: '<div id=a class="c" inert style=\'\'></div>'
  920. }
  921. })
  922. })
  923. test('directive with no value', () => {
  924. const ast = baseParse('<div v-if/>')
  925. const directive = (ast.children[0] as ElementNode).props[0]
  926. expect(directive).toStrictEqual({
  927. type: NodeTypes.DIRECTIVE,
  928. name: 'if',
  929. arg: undefined,
  930. modifiers: [],
  931. exp: undefined,
  932. loc: {
  933. start: { offset: 5, line: 1, column: 6 },
  934. end: { offset: 9, line: 1, column: 10 },
  935. source: 'v-if'
  936. }
  937. })
  938. })
  939. test('directive with value', () => {
  940. const ast = baseParse('<div v-if="a"/>')
  941. const directive = (ast.children[0] as ElementNode).props[0]
  942. expect(directive).toStrictEqual({
  943. type: NodeTypes.DIRECTIVE,
  944. name: 'if',
  945. arg: undefined,
  946. modifiers: [],
  947. exp: {
  948. type: NodeTypes.SIMPLE_EXPRESSION,
  949. content: 'a',
  950. isStatic: false,
  951. constType: ConstantTypes.NOT_CONSTANT,
  952. loc: {
  953. start: { offset: 11, line: 1, column: 12 },
  954. end: { offset: 12, line: 1, column: 13 },
  955. source: 'a'
  956. }
  957. },
  958. loc: {
  959. start: { offset: 5, line: 1, column: 6 },
  960. end: { offset: 13, line: 1, column: 14 },
  961. source: 'v-if="a"'
  962. }
  963. })
  964. })
  965. test('directive with argument', () => {
  966. const ast = baseParse('<div v-on:click/>')
  967. const directive = (ast.children[0] as ElementNode).props[0]
  968. expect(directive).toStrictEqual({
  969. type: NodeTypes.DIRECTIVE,
  970. name: 'on',
  971. arg: {
  972. type: NodeTypes.SIMPLE_EXPRESSION,
  973. content: 'click',
  974. isStatic: true,
  975. constType: ConstantTypes.CAN_STRINGIFY,
  976. loc: {
  977. source: 'click',
  978. start: {
  979. column: 11,
  980. line: 1,
  981. offset: 10
  982. },
  983. end: {
  984. column: 16,
  985. line: 1,
  986. offset: 15
  987. }
  988. }
  989. },
  990. modifiers: [],
  991. exp: undefined,
  992. loc: {
  993. start: { offset: 5, line: 1, column: 6 },
  994. end: { offset: 15, line: 1, column: 16 },
  995. source: 'v-on:click'
  996. }
  997. })
  998. })
  999. test('directive with dynamic argument', () => {
  1000. const ast = baseParse('<div v-on:[event]/>')
  1001. const directive = (ast.children[0] as ElementNode).props[0]
  1002. expect(directive).toStrictEqual({
  1003. type: NodeTypes.DIRECTIVE,
  1004. name: 'on',
  1005. arg: {
  1006. type: NodeTypes.SIMPLE_EXPRESSION,
  1007. content: 'event',
  1008. isStatic: false,
  1009. constType: ConstantTypes.NOT_CONSTANT,
  1010. loc: {
  1011. source: '[event]',
  1012. start: {
  1013. column: 11,
  1014. line: 1,
  1015. offset: 10
  1016. },
  1017. end: {
  1018. column: 18,
  1019. line: 1,
  1020. offset: 17
  1021. }
  1022. }
  1023. },
  1024. modifiers: [],
  1025. exp: undefined,
  1026. loc: {
  1027. start: { offset: 5, line: 1, column: 6 },
  1028. end: { offset: 17, line: 1, column: 18 },
  1029. source: 'v-on:[event]'
  1030. }
  1031. })
  1032. })
  1033. test('directive with a modifier', () => {
  1034. const ast = baseParse('<div v-on.enter/>')
  1035. const directive = (ast.children[0] as ElementNode).props[0]
  1036. expect(directive).toStrictEqual({
  1037. type: NodeTypes.DIRECTIVE,
  1038. name: 'on',
  1039. arg: undefined,
  1040. modifiers: ['enter'],
  1041. exp: undefined,
  1042. loc: {
  1043. start: { offset: 5, line: 1, column: 6 },
  1044. end: { offset: 15, line: 1, column: 16 },
  1045. source: 'v-on.enter'
  1046. }
  1047. })
  1048. })
  1049. test('directive with two modifiers', () => {
  1050. const ast = baseParse('<div v-on.enter.exact/>')
  1051. const directive = (ast.children[0] as ElementNode).props[0]
  1052. expect(directive).toStrictEqual({
  1053. type: NodeTypes.DIRECTIVE,
  1054. name: 'on',
  1055. arg: undefined,
  1056. modifiers: ['enter', 'exact'],
  1057. exp: undefined,
  1058. loc: {
  1059. start: { offset: 5, line: 1, column: 6 },
  1060. end: { offset: 21, line: 1, column: 22 },
  1061. source: 'v-on.enter.exact'
  1062. }
  1063. })
  1064. })
  1065. test('directive with argument and modifiers', () => {
  1066. const ast = baseParse('<div v-on:click.enter.exact/>')
  1067. const directive = (ast.children[0] as ElementNode).props[0]
  1068. expect(directive).toStrictEqual({
  1069. type: NodeTypes.DIRECTIVE,
  1070. name: 'on',
  1071. arg: {
  1072. type: NodeTypes.SIMPLE_EXPRESSION,
  1073. content: 'click',
  1074. isStatic: true,
  1075. constType: ConstantTypes.CAN_STRINGIFY,
  1076. loc: {
  1077. source: 'click',
  1078. start: {
  1079. column: 11,
  1080. line: 1,
  1081. offset: 10
  1082. },
  1083. end: {
  1084. column: 16,
  1085. line: 1,
  1086. offset: 15
  1087. }
  1088. }
  1089. },
  1090. modifiers: ['enter', 'exact'],
  1091. exp: undefined,
  1092. loc: {
  1093. start: { offset: 5, line: 1, column: 6 },
  1094. end: { offset: 27, line: 1, column: 28 },
  1095. source: 'v-on:click.enter.exact'
  1096. }
  1097. })
  1098. })
  1099. test('directive with dynamic argument and modifiers', () => {
  1100. const ast = baseParse('<div v-on:[a.b].camel/>')
  1101. const directive = (ast.children[0] as ElementNode).props[0]
  1102. expect(directive).toStrictEqual({
  1103. type: NodeTypes.DIRECTIVE,
  1104. name: 'on',
  1105. arg: {
  1106. type: NodeTypes.SIMPLE_EXPRESSION,
  1107. content: 'a.b',
  1108. isStatic: false,
  1109. constType: ConstantTypes.NOT_CONSTANT,
  1110. loc: {
  1111. source: '[a.b]',
  1112. start: {
  1113. column: 11,
  1114. line: 1,
  1115. offset: 10
  1116. },
  1117. end: {
  1118. column: 16,
  1119. line: 1,
  1120. offset: 15
  1121. }
  1122. }
  1123. },
  1124. modifiers: ['camel'],
  1125. exp: undefined,
  1126. loc: {
  1127. start: { offset: 5, line: 1, column: 6 },
  1128. end: { offset: 21, line: 1, column: 22 },
  1129. source: 'v-on:[a.b].camel'
  1130. }
  1131. })
  1132. })
  1133. test('directive with no name', () => {
  1134. let errorCode = -1
  1135. const ast = baseParse('<div v-/>', {
  1136. onError: err => {
  1137. errorCode = err.code as number
  1138. }
  1139. })
  1140. const directive = (ast.children[0] as ElementNode).props[0]
  1141. expect(errorCode).toBe(ErrorCodes.X_MISSING_DIRECTIVE_NAME)
  1142. expect(directive).toStrictEqual({
  1143. type: NodeTypes.ATTRIBUTE,
  1144. name: 'v-',
  1145. value: undefined,
  1146. loc: {
  1147. start: { offset: 5, line: 1, column: 6 },
  1148. end: { offset: 7, line: 1, column: 8 },
  1149. source: 'v-'
  1150. }
  1151. })
  1152. })
  1153. test('v-bind shorthand', () => {
  1154. const ast = baseParse('<div :a=b />')
  1155. const directive = (ast.children[0] as ElementNode).props[0]
  1156. expect(directive).toStrictEqual({
  1157. type: NodeTypes.DIRECTIVE,
  1158. name: 'bind',
  1159. arg: {
  1160. type: NodeTypes.SIMPLE_EXPRESSION,
  1161. content: 'a',
  1162. isStatic: true,
  1163. constType: ConstantTypes.CAN_STRINGIFY,
  1164. loc: {
  1165. source: 'a',
  1166. start: {
  1167. column: 7,
  1168. line: 1,
  1169. offset: 6
  1170. },
  1171. end: {
  1172. column: 8,
  1173. line: 1,
  1174. offset: 7
  1175. }
  1176. }
  1177. },
  1178. modifiers: [],
  1179. exp: {
  1180. type: NodeTypes.SIMPLE_EXPRESSION,
  1181. content: 'b',
  1182. isStatic: false,
  1183. constType: ConstantTypes.NOT_CONSTANT,
  1184. loc: {
  1185. start: { offset: 8, line: 1, column: 9 },
  1186. end: { offset: 9, line: 1, column: 10 },
  1187. source: 'b'
  1188. }
  1189. },
  1190. loc: {
  1191. start: { offset: 5, line: 1, column: 6 },
  1192. end: { offset: 9, line: 1, column: 10 },
  1193. source: ':a=b'
  1194. }
  1195. })
  1196. })
  1197. test('v-bind .prop shorthand', () => {
  1198. const ast = baseParse('<div .a=b />')
  1199. const directive = (ast.children[0] as ElementNode).props[0]
  1200. expect(directive).toStrictEqual({
  1201. type: NodeTypes.DIRECTIVE,
  1202. name: 'bind',
  1203. arg: {
  1204. type: NodeTypes.SIMPLE_EXPRESSION,
  1205. content: 'a',
  1206. isStatic: true,
  1207. constType: ConstantTypes.CAN_STRINGIFY,
  1208. loc: {
  1209. source: 'a',
  1210. start: {
  1211. column: 7,
  1212. line: 1,
  1213. offset: 6
  1214. },
  1215. end: {
  1216. column: 8,
  1217. line: 1,
  1218. offset: 7
  1219. }
  1220. }
  1221. },
  1222. modifiers: ['prop'],
  1223. exp: {
  1224. type: NodeTypes.SIMPLE_EXPRESSION,
  1225. content: 'b',
  1226. isStatic: false,
  1227. constType: ConstantTypes.NOT_CONSTANT,
  1228. loc: {
  1229. start: { offset: 8, line: 1, column: 9 },
  1230. end: { offset: 9, line: 1, column: 10 },
  1231. source: 'b'
  1232. }
  1233. },
  1234. loc: {
  1235. start: { offset: 5, line: 1, column: 6 },
  1236. end: { offset: 9, line: 1, column: 10 },
  1237. source: '.a=b'
  1238. }
  1239. })
  1240. })
  1241. test('v-bind shorthand with modifier', () => {
  1242. const ast = baseParse('<div :a.sync=b />')
  1243. const directive = (ast.children[0] as ElementNode).props[0]
  1244. expect(directive).toStrictEqual({
  1245. type: NodeTypes.DIRECTIVE,
  1246. name: 'bind',
  1247. arg: {
  1248. type: NodeTypes.SIMPLE_EXPRESSION,
  1249. content: 'a',
  1250. isStatic: true,
  1251. constType: ConstantTypes.CAN_STRINGIFY,
  1252. loc: {
  1253. source: 'a',
  1254. start: {
  1255. column: 7,
  1256. line: 1,
  1257. offset: 6
  1258. },
  1259. end: {
  1260. column: 8,
  1261. line: 1,
  1262. offset: 7
  1263. }
  1264. }
  1265. },
  1266. modifiers: ['sync'],
  1267. exp: {
  1268. type: NodeTypes.SIMPLE_EXPRESSION,
  1269. content: 'b',
  1270. isStatic: false,
  1271. constType: ConstantTypes.NOT_CONSTANT,
  1272. loc: {
  1273. start: { offset: 13, line: 1, column: 14 },
  1274. end: { offset: 14, line: 1, column: 15 },
  1275. source: 'b'
  1276. }
  1277. },
  1278. loc: {
  1279. start: { offset: 5, line: 1, column: 6 },
  1280. end: { offset: 14, line: 1, column: 15 },
  1281. source: ':a.sync=b'
  1282. }
  1283. })
  1284. })
  1285. test('v-on shorthand', () => {
  1286. const ast = baseParse('<div @a=b />')
  1287. const directive = (ast.children[0] as ElementNode).props[0]
  1288. expect(directive).toStrictEqual({
  1289. type: NodeTypes.DIRECTIVE,
  1290. name: 'on',
  1291. arg: {
  1292. type: NodeTypes.SIMPLE_EXPRESSION,
  1293. content: 'a',
  1294. isStatic: true,
  1295. constType: ConstantTypes.CAN_STRINGIFY,
  1296. loc: {
  1297. source: 'a',
  1298. start: {
  1299. column: 7,
  1300. line: 1,
  1301. offset: 6
  1302. },
  1303. end: {
  1304. column: 8,
  1305. line: 1,
  1306. offset: 7
  1307. }
  1308. }
  1309. },
  1310. modifiers: [],
  1311. exp: {
  1312. type: NodeTypes.SIMPLE_EXPRESSION,
  1313. content: 'b',
  1314. isStatic: false,
  1315. constType: ConstantTypes.NOT_CONSTANT,
  1316. loc: {
  1317. start: { offset: 8, line: 1, column: 9 },
  1318. end: { offset: 9, line: 1, column: 10 },
  1319. source: 'b'
  1320. }
  1321. },
  1322. loc: {
  1323. start: { offset: 5, line: 1, column: 6 },
  1324. end: { offset: 9, line: 1, column: 10 },
  1325. source: '@a=b'
  1326. }
  1327. })
  1328. })
  1329. test('v-on shorthand with modifier', () => {
  1330. const ast = baseParse('<div @a.enter=b />')
  1331. const directive = (ast.children[0] as ElementNode).props[0]
  1332. expect(directive).toStrictEqual({
  1333. type: NodeTypes.DIRECTIVE,
  1334. name: 'on',
  1335. arg: {
  1336. type: NodeTypes.SIMPLE_EXPRESSION,
  1337. content: 'a',
  1338. isStatic: true,
  1339. constType: ConstantTypes.CAN_STRINGIFY,
  1340. loc: {
  1341. source: 'a',
  1342. start: {
  1343. column: 7,
  1344. line: 1,
  1345. offset: 6
  1346. },
  1347. end: {
  1348. column: 8,
  1349. line: 1,
  1350. offset: 7
  1351. }
  1352. }
  1353. },
  1354. modifiers: ['enter'],
  1355. exp: {
  1356. type: NodeTypes.SIMPLE_EXPRESSION,
  1357. content: 'b',
  1358. isStatic: false,
  1359. constType: ConstantTypes.NOT_CONSTANT,
  1360. loc: {
  1361. start: { offset: 14, line: 1, column: 15 },
  1362. end: { offset: 15, line: 1, column: 16 },
  1363. source: 'b'
  1364. }
  1365. },
  1366. loc: {
  1367. start: { offset: 5, line: 1, column: 6 },
  1368. end: { offset: 15, line: 1, column: 16 },
  1369. source: '@a.enter=b'
  1370. }
  1371. })
  1372. })
  1373. test('v-slot shorthand', () => {
  1374. const ast = baseParse('<Comp #a="{ b }" />')
  1375. const directive = (ast.children[0] as ElementNode).props[0]
  1376. expect(directive).toStrictEqual({
  1377. type: NodeTypes.DIRECTIVE,
  1378. name: 'slot',
  1379. arg: {
  1380. type: NodeTypes.SIMPLE_EXPRESSION,
  1381. content: 'a',
  1382. isStatic: true,
  1383. constType: ConstantTypes.CAN_STRINGIFY,
  1384. loc: {
  1385. source: 'a',
  1386. start: {
  1387. column: 8,
  1388. line: 1,
  1389. offset: 7
  1390. },
  1391. end: {
  1392. column: 9,
  1393. line: 1,
  1394. offset: 8
  1395. }
  1396. }
  1397. },
  1398. modifiers: [],
  1399. exp: {
  1400. type: NodeTypes.SIMPLE_EXPRESSION,
  1401. content: '{ b }',
  1402. isStatic: false,
  1403. // The `constType` is the default value and will be determined in transformExpression
  1404. constType: ConstantTypes.NOT_CONSTANT,
  1405. loc: {
  1406. start: { offset: 10, line: 1, column: 11 },
  1407. end: { offset: 15, line: 1, column: 16 },
  1408. source: '{ b }'
  1409. }
  1410. },
  1411. loc: {
  1412. start: { offset: 6, line: 1, column: 7 },
  1413. end: { offset: 16, line: 1, column: 17 },
  1414. source: '#a="{ b }"'
  1415. }
  1416. })
  1417. })
  1418. // #1241 special case for 2.x compat
  1419. test('v-slot arg containing dots', () => {
  1420. const ast = baseParse('<Comp v-slot:foo.bar="{ a }" />')
  1421. const directive = (ast.children[0] as ElementNode).props[0]
  1422. expect(directive).toMatchObject({
  1423. type: NodeTypes.DIRECTIVE,
  1424. name: 'slot',
  1425. arg: {
  1426. type: NodeTypes.SIMPLE_EXPRESSION,
  1427. content: 'foo.bar',
  1428. isStatic: true,
  1429. constType: ConstantTypes.CAN_STRINGIFY,
  1430. loc: {
  1431. source: 'foo.bar',
  1432. start: {
  1433. column: 14,
  1434. line: 1,
  1435. offset: 13
  1436. },
  1437. end: {
  1438. column: 21,
  1439. line: 1,
  1440. offset: 20
  1441. }
  1442. }
  1443. }
  1444. })
  1445. })
  1446. test('v-pre', () => {
  1447. const ast = baseParse(
  1448. `<div v-pre :id="foo"><Comp/>{{ bar }}</div>\n` +
  1449. `<div :id="foo"><Comp/>{{ bar }}</div>`
  1450. )
  1451. const divWithPre = ast.children[0] as ElementNode
  1452. expect(divWithPre.props).toMatchObject([
  1453. {
  1454. type: NodeTypes.ATTRIBUTE,
  1455. name: `:id`,
  1456. value: {
  1457. type: NodeTypes.TEXT,
  1458. content: `foo`
  1459. },
  1460. loc: {
  1461. source: `:id="foo"`,
  1462. start: {
  1463. line: 1,
  1464. column: 12
  1465. },
  1466. end: {
  1467. line: 1,
  1468. column: 21
  1469. }
  1470. }
  1471. }
  1472. ])
  1473. expect(divWithPre.children[0]).toMatchObject({
  1474. type: NodeTypes.ELEMENT,
  1475. tagType: ElementTypes.ELEMENT,
  1476. tag: `Comp`
  1477. })
  1478. expect(divWithPre.children[1]).toMatchObject({
  1479. type: NodeTypes.TEXT,
  1480. content: `{{ bar }}`
  1481. })
  1482. // should not affect siblings after it
  1483. const divWithoutPre = ast.children[1] as ElementNode
  1484. expect(divWithoutPre.props).toMatchObject([
  1485. {
  1486. type: NodeTypes.DIRECTIVE,
  1487. name: `bind`,
  1488. arg: {
  1489. type: NodeTypes.SIMPLE_EXPRESSION,
  1490. isStatic: true,
  1491. content: `id`
  1492. },
  1493. exp: {
  1494. type: NodeTypes.SIMPLE_EXPRESSION,
  1495. isStatic: false,
  1496. content: `foo`
  1497. },
  1498. loc: {
  1499. source: `:id="foo"`,
  1500. start: {
  1501. line: 2,
  1502. column: 6
  1503. },
  1504. end: {
  1505. line: 2,
  1506. column: 15
  1507. }
  1508. }
  1509. }
  1510. ])
  1511. expect(divWithoutPre.children[0]).toMatchObject({
  1512. type: NodeTypes.ELEMENT,
  1513. tagType: ElementTypes.COMPONENT,
  1514. tag: `Comp`
  1515. })
  1516. expect(divWithoutPre.children[1]).toMatchObject({
  1517. type: NodeTypes.INTERPOLATION,
  1518. content: {
  1519. type: NodeTypes.SIMPLE_EXPRESSION,
  1520. content: `bar`,
  1521. isStatic: false
  1522. }
  1523. })
  1524. })
  1525. test('self-closing v-pre', () => {
  1526. const ast = baseParse(
  1527. `<div v-pre/>\n<div :id="foo"><Comp/>{{ bar }}</div>`
  1528. )
  1529. // should not affect siblings after it
  1530. const divWithoutPre = ast.children[1] as ElementNode
  1531. expect(divWithoutPre.props).toMatchObject([
  1532. {
  1533. type: NodeTypes.DIRECTIVE,
  1534. name: `bind`,
  1535. arg: {
  1536. type: NodeTypes.SIMPLE_EXPRESSION,
  1537. isStatic: true,
  1538. content: `id`
  1539. },
  1540. exp: {
  1541. type: NodeTypes.SIMPLE_EXPRESSION,
  1542. isStatic: false,
  1543. content: `foo`
  1544. },
  1545. loc: {
  1546. source: `:id="foo"`,
  1547. start: {
  1548. line: 2,
  1549. column: 6
  1550. },
  1551. end: {
  1552. line: 2,
  1553. column: 15
  1554. }
  1555. }
  1556. }
  1557. ])
  1558. expect(divWithoutPre.children[0]).toMatchObject({
  1559. type: NodeTypes.ELEMENT,
  1560. tagType: ElementTypes.COMPONENT,
  1561. tag: `Comp`
  1562. })
  1563. expect(divWithoutPre.children[1]).toMatchObject({
  1564. type: NodeTypes.INTERPOLATION,
  1565. content: {
  1566. type: NodeTypes.SIMPLE_EXPRESSION,
  1567. content: `bar`,
  1568. isStatic: false
  1569. }
  1570. })
  1571. })
  1572. test('end tags are case-insensitive.', () => {
  1573. const ast = baseParse('<div>hello</DIV>after')
  1574. const element = ast.children[0] as ElementNode
  1575. const text = element.children[0] as TextNode
  1576. expect(text).toStrictEqual({
  1577. type: NodeTypes.TEXT,
  1578. content: 'hello',
  1579. loc: {
  1580. start: { offset: 5, line: 1, column: 6 },
  1581. end: { offset: 10, line: 1, column: 11 },
  1582. source: 'hello'
  1583. }
  1584. })
  1585. })
  1586. })
  1587. test('self closing single tag', () => {
  1588. const ast = baseParse('<div :class="{ some: condition }" />')
  1589. expect(ast.children).toHaveLength(1)
  1590. expect(ast.children[0]).toMatchObject({ tag: 'div' })
  1591. })
  1592. test('self closing multiple tag', () => {
  1593. const ast = baseParse(
  1594. `<div :class="{ some: condition }" />\n` +
  1595. `<p v-bind:style="{ color: 'red' }"/>`
  1596. )
  1597. expect(ast).toMatchSnapshot()
  1598. expect(ast.children).toHaveLength(2)
  1599. expect(ast.children[0]).toMatchObject({ tag: 'div' })
  1600. expect(ast.children[1]).toMatchObject({ tag: 'p' })
  1601. })
  1602. test('valid html', () => {
  1603. const ast = baseParse(
  1604. `<div :class="{ some: condition }">\n` +
  1605. ` <p v-bind:style="{ color: 'red' }"/>\n` +
  1606. ` <!-- a comment with <html> inside it -->\n` +
  1607. `</div>`
  1608. )
  1609. expect(ast).toMatchSnapshot()
  1610. expect(ast.children).toHaveLength(1)
  1611. const el = ast.children[0] as any
  1612. expect(el).toMatchObject({
  1613. tag: 'div'
  1614. })
  1615. expect(el.children).toHaveLength(2)
  1616. expect(el.children[0]).toMatchObject({
  1617. tag: 'p'
  1618. })
  1619. expect(el.children[1]).toMatchObject({
  1620. type: NodeTypes.COMMENT
  1621. })
  1622. })
  1623. test('invalid html', () => {
  1624. expect(() => {
  1625. baseParse(`<div>\n<span>\n</div>\n</span>`)
  1626. }).toThrow('Element is missing end tag.')
  1627. const spy = jest.fn()
  1628. const ast = baseParse(`<div>\n<span>\n</div>\n</span>`, {
  1629. onError: spy
  1630. })
  1631. expect(spy.mock.calls).toMatchObject([
  1632. [
  1633. {
  1634. code: ErrorCodes.X_MISSING_END_TAG,
  1635. loc: {
  1636. start: {
  1637. offset: 6,
  1638. line: 2,
  1639. column: 1
  1640. }
  1641. }
  1642. }
  1643. ],
  1644. [
  1645. {
  1646. code: ErrorCodes.X_INVALID_END_TAG,
  1647. loc: {
  1648. start: {
  1649. offset: 20,
  1650. line: 4,
  1651. column: 1
  1652. }
  1653. }
  1654. }
  1655. ]
  1656. ])
  1657. expect(ast).toMatchSnapshot()
  1658. })
  1659. test('parse with correct location info', () => {
  1660. const [foo, bar, but, baz] = baseParse(
  1661. `
  1662. foo
  1663. is {{ bar }} but {{ baz }}`.trim()
  1664. ).children
  1665. let offset = 0
  1666. expect(foo.loc.start).toEqual({ line: 1, column: 1, offset })
  1667. offset += foo.loc.source.length
  1668. expect(foo.loc.end).toEqual({ line: 2, column: 5, offset })
  1669. expect(bar.loc.start).toEqual({ line: 2, column: 5, offset })
  1670. const barInner = (bar as InterpolationNode).content
  1671. offset += 3
  1672. expect(barInner.loc.start).toEqual({ line: 2, column: 8, offset })
  1673. offset += barInner.loc.source.length
  1674. expect(barInner.loc.end).toEqual({ line: 2, column: 11, offset })
  1675. offset += 3
  1676. expect(bar.loc.end).toEqual({ line: 2, column: 14, offset })
  1677. expect(but.loc.start).toEqual({ line: 2, column: 14, offset })
  1678. offset += but.loc.source.length
  1679. expect(but.loc.end).toEqual({ line: 2, column: 19, offset })
  1680. expect(baz.loc.start).toEqual({ line: 2, column: 19, offset })
  1681. const bazInner = (baz as InterpolationNode).content
  1682. offset += 3
  1683. expect(bazInner.loc.start).toEqual({ line: 2, column: 22, offset })
  1684. offset += bazInner.loc.source.length
  1685. expect(bazInner.loc.end).toEqual({ line: 2, column: 25, offset })
  1686. offset += 3
  1687. expect(baz.loc.end).toEqual({ line: 2, column: 28, offset })
  1688. })
  1689. describe('decodeEntities option', () => {
  1690. test('use default map', () => {
  1691. const ast: any = baseParse('&gt;&lt;&amp;&apos;&quot;&foo;')
  1692. expect(ast.children.length).toBe(1)
  1693. expect(ast.children[0].type).toBe(NodeTypes.TEXT)
  1694. expect(ast.children[0].content).toBe('><&\'"&foo;')
  1695. })
  1696. test('use the given map', () => {
  1697. const ast: any = baseParse('&amp;&cups;', {
  1698. decodeEntities: text => text.replace('&cups;', '\u222A\uFE00'),
  1699. onError: () => {} // Ignore errors
  1700. })
  1701. expect(ast.children.length).toBe(1)
  1702. expect(ast.children[0].type).toBe(NodeTypes.TEXT)
  1703. expect(ast.children[0].content).toBe('&amp;\u222A\uFE00')
  1704. })
  1705. })
  1706. describe('whitespace management when adopting strategy condense', () => {
  1707. const parse = (content: string, options?: ParserOptions) =>
  1708. baseParse(content, {
  1709. whitespace: 'condense',
  1710. ...options
  1711. })
  1712. it('should remove whitespaces at start/end inside an element', () => {
  1713. const ast = parse(`<div> <span/> </div>`)
  1714. expect((ast.children[0] as ElementNode).children.length).toBe(1)
  1715. })
  1716. it('should remove whitespaces w/ newline between elements', () => {
  1717. const ast = parse(`<div/> \n <div/> \n <div/>`)
  1718. expect(ast.children.length).toBe(3)
  1719. expect(ast.children.every(c => c.type === NodeTypes.ELEMENT)).toBe(true)
  1720. })
  1721. it('should remove whitespaces adjacent to comments', () => {
  1722. const ast = parse(`<div/> \n <!--foo--> <div/>`)
  1723. expect(ast.children.length).toBe(3)
  1724. expect(ast.children[0].type).toBe(NodeTypes.ELEMENT)
  1725. expect(ast.children[1].type).toBe(NodeTypes.COMMENT)
  1726. expect(ast.children[2].type).toBe(NodeTypes.ELEMENT)
  1727. })
  1728. it('should remove whitespaces w/ newline between comments and elements', () => {
  1729. const ast = parse(`<div/> \n <!--foo--> \n <div/>`)
  1730. expect(ast.children.length).toBe(3)
  1731. expect(ast.children[0].type).toBe(NodeTypes.ELEMENT)
  1732. expect(ast.children[1].type).toBe(NodeTypes.COMMENT)
  1733. expect(ast.children[2].type).toBe(NodeTypes.ELEMENT)
  1734. })
  1735. it('should NOT remove whitespaces w/ newline between interpolations', () => {
  1736. const ast = parse(`{{ foo }} \n {{ bar }}`)
  1737. expect(ast.children.length).toBe(3)
  1738. expect(ast.children[0].type).toBe(NodeTypes.INTERPOLATION)
  1739. expect(ast.children[1]).toMatchObject({
  1740. type: NodeTypes.TEXT,
  1741. content: ' '
  1742. })
  1743. expect(ast.children[2].type).toBe(NodeTypes.INTERPOLATION)
  1744. })
  1745. it('should NOT remove whitespaces w/o newline between elements', () => {
  1746. const ast = parse(`<div/> <div/> <div/>`)
  1747. expect(ast.children.length).toBe(5)
  1748. expect(ast.children.map(c => c.type)).toMatchObject([
  1749. NodeTypes.ELEMENT,
  1750. NodeTypes.TEXT,
  1751. NodeTypes.ELEMENT,
  1752. NodeTypes.TEXT,
  1753. NodeTypes.ELEMENT
  1754. ])
  1755. })
  1756. it('should condense consecutive whitespaces in text', () => {
  1757. const ast = parse(` foo \n bar baz `)
  1758. expect((ast.children[0] as TextNode).content).toBe(` foo bar baz `)
  1759. })
  1760. it('should remove leading newline character immediately following the pre element start tag', () => {
  1761. const ast = baseParse(`<pre>\n foo bar </pre>`, {
  1762. isPreTag: tag => tag === 'pre'
  1763. })
  1764. expect(ast.children).toHaveLength(1)
  1765. const preElement = ast.children[0] as ElementNode
  1766. expect(preElement.children).toHaveLength(1)
  1767. expect((preElement.children[0] as TextNode).content).toBe(` foo bar `)
  1768. })
  1769. it('should NOT remove leading newline character immediately following child-tag of pre element', () => {
  1770. const ast = baseParse(`<pre><span></span>\n foo bar </pre>`, {
  1771. isPreTag: tag => tag === 'pre'
  1772. })
  1773. const preElement = ast.children[0] as ElementNode
  1774. expect(preElement.children).toHaveLength(2)
  1775. expect((preElement.children[1] as TextNode).content).toBe(
  1776. `\n foo bar `
  1777. )
  1778. })
  1779. it('self-closing pre tag', () => {
  1780. const ast = baseParse(`<pre/><span>\n foo bar</span>`, {
  1781. isPreTag: tag => tag === 'pre'
  1782. })
  1783. const elementAfterPre = ast.children[1] as ElementNode
  1784. // should not affect the <span> and condense its whitepsace inside
  1785. expect((elementAfterPre.children[0] as TextNode).content).toBe(` foo bar`)
  1786. })
  1787. it('should NOT condense whitespaces in RCDATA text mode', () => {
  1788. const ast = baseParse(`<textarea>Text:\n foo</textarea>`, {
  1789. getTextMode: ({ tag }) =>
  1790. tag === 'textarea' ? TextModes.RCDATA : TextModes.DATA
  1791. })
  1792. const preElement = ast.children[0] as ElementNode
  1793. expect(preElement.children).toHaveLength(1)
  1794. expect((preElement.children[0] as TextNode).content).toBe(`Text:\n foo`)
  1795. })
  1796. })
  1797. describe('whitespace management when adopting strategy preserve', () => {
  1798. const parse = (content: string, options?: ParserOptions) =>
  1799. baseParse(content, {
  1800. whitespace: 'preserve',
  1801. ...options
  1802. })
  1803. it('should still remove whitespaces at start/end inside an element', () => {
  1804. const ast = parse(`<div> <span/> </div>`)
  1805. expect((ast.children[0] as ElementNode).children.length).toBe(1)
  1806. })
  1807. it('should preserve whitespaces w/ newline between elements', () => {
  1808. const ast = parse(`<div/> \n <div/> \n <div/>`)
  1809. expect(ast.children.length).toBe(5)
  1810. expect(ast.children.map(c => c.type)).toMatchObject([
  1811. NodeTypes.ELEMENT,
  1812. NodeTypes.TEXT,
  1813. NodeTypes.ELEMENT,
  1814. NodeTypes.TEXT,
  1815. NodeTypes.ELEMENT
  1816. ])
  1817. })
  1818. it('should preserve whitespaces adjacent to comments', () => {
  1819. const ast = parse(`<div/> \n <!--foo--> <div/>`)
  1820. expect(ast.children.length).toBe(5)
  1821. expect(ast.children.map(c => c.type)).toMatchObject([
  1822. NodeTypes.ELEMENT,
  1823. NodeTypes.TEXT,
  1824. NodeTypes.COMMENT,
  1825. NodeTypes.TEXT,
  1826. NodeTypes.ELEMENT
  1827. ])
  1828. })
  1829. it('should preserve whitespaces w/ newline between comments and elements', () => {
  1830. const ast = parse(`<div/> \n <!--foo--> \n <div/>`)
  1831. expect(ast.children.length).toBe(5)
  1832. expect(ast.children.map(c => c.type)).toMatchObject([
  1833. NodeTypes.ELEMENT,
  1834. NodeTypes.TEXT,
  1835. NodeTypes.COMMENT,
  1836. NodeTypes.TEXT,
  1837. NodeTypes.ELEMENT
  1838. ])
  1839. })
  1840. it('should preserve whitespaces w/ newline between interpolations', () => {
  1841. const ast = parse(`{{ foo }} \n {{ bar }}`)
  1842. expect(ast.children.length).toBe(3)
  1843. expect(ast.children[0].type).toBe(NodeTypes.INTERPOLATION)
  1844. expect(ast.children[1]).toMatchObject({
  1845. type: NodeTypes.TEXT,
  1846. content: ' '
  1847. })
  1848. expect(ast.children[2].type).toBe(NodeTypes.INTERPOLATION)
  1849. })
  1850. it('should preserve whitespaces w/o newline between elements', () => {
  1851. const ast = parse(`<div/> <div/> <div/>`)
  1852. expect(ast.children.length).toBe(5)
  1853. expect(ast.children.map(c => c.type)).toMatchObject([
  1854. NodeTypes.ELEMENT,
  1855. NodeTypes.TEXT,
  1856. NodeTypes.ELEMENT,
  1857. NodeTypes.TEXT,
  1858. NodeTypes.ELEMENT
  1859. ])
  1860. })
  1861. it('should preserve consecutive whitespaces in text', () => {
  1862. const content = ` foo \n bar baz `
  1863. const ast = parse(content)
  1864. expect((ast.children[0] as TextNode).content).toBe(content)
  1865. })
  1866. })
  1867. describe('Errors', () => {
  1868. const patterns: {
  1869. [key: string]: Array<{
  1870. code: string
  1871. errors: Array<{ type: ErrorCodes; loc: Position }>
  1872. options?: Partial<ParserOptions>
  1873. }>
  1874. } = {
  1875. ABRUPT_CLOSING_OF_EMPTY_COMMENT: [
  1876. {
  1877. code: '<template><!--></template>',
  1878. errors: [
  1879. {
  1880. type: ErrorCodes.ABRUPT_CLOSING_OF_EMPTY_COMMENT,
  1881. loc: { offset: 10, line: 1, column: 11 }
  1882. }
  1883. ]
  1884. },
  1885. {
  1886. code: '<template><!---></template>',
  1887. errors: [
  1888. {
  1889. type: ErrorCodes.ABRUPT_CLOSING_OF_EMPTY_COMMENT,
  1890. loc: { offset: 10, line: 1, column: 11 }
  1891. }
  1892. ]
  1893. },
  1894. {
  1895. code: '<template><!----></template>',
  1896. errors: []
  1897. }
  1898. ],
  1899. CDATA_IN_HTML_CONTENT: [
  1900. {
  1901. code: '<template><![CDATA[cdata]]></template>',
  1902. errors: [
  1903. {
  1904. type: ErrorCodes.CDATA_IN_HTML_CONTENT,
  1905. loc: { offset: 10, line: 1, column: 11 }
  1906. }
  1907. ]
  1908. },
  1909. {
  1910. code: '<template><svg><![CDATA[cdata]]></svg></template>',
  1911. errors: []
  1912. }
  1913. ],
  1914. DUPLICATE_ATTRIBUTE: [
  1915. {
  1916. code: '<template><div id="" id=""></div></template>',
  1917. errors: [
  1918. {
  1919. type: ErrorCodes.DUPLICATE_ATTRIBUTE,
  1920. loc: { offset: 21, line: 1, column: 22 }
  1921. }
  1922. ]
  1923. }
  1924. ],
  1925. END_TAG_WITH_ATTRIBUTES: [
  1926. {
  1927. code: '<template><div></div id=""></template>',
  1928. errors: [
  1929. {
  1930. type: ErrorCodes.END_TAG_WITH_ATTRIBUTES,
  1931. loc: { offset: 21, line: 1, column: 22 }
  1932. }
  1933. ]
  1934. }
  1935. ],
  1936. END_TAG_WITH_TRAILING_SOLIDUS: [
  1937. {
  1938. code: '<template><div></div/></template>',
  1939. errors: [
  1940. {
  1941. type: ErrorCodes.END_TAG_WITH_TRAILING_SOLIDUS,
  1942. loc: { offset: 20, line: 1, column: 21 }
  1943. }
  1944. ]
  1945. }
  1946. ],
  1947. EOF_BEFORE_TAG_NAME: [
  1948. {
  1949. code: '<template><',
  1950. errors: [
  1951. {
  1952. type: ErrorCodes.EOF_BEFORE_TAG_NAME,
  1953. loc: { offset: 11, line: 1, column: 12 }
  1954. },
  1955. {
  1956. type: ErrorCodes.X_MISSING_END_TAG,
  1957. loc: { offset: 0, line: 1, column: 1 }
  1958. }
  1959. ]
  1960. },
  1961. {
  1962. code: '<template></',
  1963. errors: [
  1964. {
  1965. type: ErrorCodes.EOF_BEFORE_TAG_NAME,
  1966. loc: { offset: 12, line: 1, column: 13 }
  1967. },
  1968. {
  1969. type: ErrorCodes.X_MISSING_END_TAG,
  1970. loc: { offset: 0, line: 1, column: 1 }
  1971. }
  1972. ]
  1973. }
  1974. ],
  1975. EOF_IN_CDATA: [
  1976. {
  1977. code: '<template><svg><![CDATA[cdata',
  1978. errors: [
  1979. {
  1980. type: ErrorCodes.EOF_IN_CDATA,
  1981. loc: { offset: 29, line: 1, column: 30 }
  1982. },
  1983. {
  1984. type: ErrorCodes.X_MISSING_END_TAG,
  1985. loc: { offset: 10, line: 1, column: 11 }
  1986. },
  1987. {
  1988. type: ErrorCodes.X_MISSING_END_TAG,
  1989. loc: { offset: 0, line: 1, column: 1 }
  1990. }
  1991. ]
  1992. },
  1993. {
  1994. code: '<template><svg><![CDATA[',
  1995. errors: [
  1996. {
  1997. type: ErrorCodes.EOF_IN_CDATA,
  1998. loc: { offset: 24, line: 1, column: 25 }
  1999. },
  2000. {
  2001. type: ErrorCodes.X_MISSING_END_TAG,
  2002. loc: { offset: 10, line: 1, column: 11 }
  2003. },
  2004. {
  2005. type: ErrorCodes.X_MISSING_END_TAG,
  2006. loc: { offset: 0, line: 1, column: 1 }
  2007. }
  2008. ]
  2009. }
  2010. ],
  2011. EOF_IN_COMMENT: [
  2012. {
  2013. code: '<template><!--comment',
  2014. errors: [
  2015. {
  2016. type: ErrorCodes.EOF_IN_COMMENT,
  2017. loc: { offset: 21, line: 1, column: 22 }
  2018. },
  2019. {
  2020. type: ErrorCodes.X_MISSING_END_TAG,
  2021. loc: { offset: 0, line: 1, column: 1 }
  2022. }
  2023. ]
  2024. },
  2025. {
  2026. code: '<template><!--',
  2027. errors: [
  2028. {
  2029. type: ErrorCodes.EOF_IN_COMMENT,
  2030. loc: { offset: 14, line: 1, column: 15 }
  2031. },
  2032. {
  2033. type: ErrorCodes.X_MISSING_END_TAG,
  2034. loc: { offset: 0, line: 1, column: 1 }
  2035. }
  2036. ]
  2037. },
  2038. // Bogus comments don't throw eof-in-comment error.
  2039. // https://html.spec.whatwg.org/multipage/parsing.html#bogus-comment-state
  2040. {
  2041. code: '<template><!',
  2042. errors: [
  2043. {
  2044. type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
  2045. loc: { offset: 10, line: 1, column: 11 }
  2046. },
  2047. {
  2048. type: ErrorCodes.X_MISSING_END_TAG,
  2049. loc: { offset: 0, line: 1, column: 1 }
  2050. }
  2051. ]
  2052. },
  2053. {
  2054. code: '<template><!-',
  2055. errors: [
  2056. {
  2057. type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
  2058. loc: { offset: 10, line: 1, column: 11 }
  2059. },
  2060. {
  2061. type: ErrorCodes.X_MISSING_END_TAG,
  2062. loc: { offset: 0, line: 1, column: 1 }
  2063. }
  2064. ]
  2065. },
  2066. {
  2067. code: '<template><!abc',
  2068. errors: [
  2069. {
  2070. type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
  2071. loc: { offset: 10, line: 1, column: 11 }
  2072. },
  2073. {
  2074. type: ErrorCodes.X_MISSING_END_TAG,
  2075. loc: { offset: 0, line: 1, column: 1 }
  2076. }
  2077. ]
  2078. }
  2079. ],
  2080. EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT: [
  2081. {
  2082. code: "<script><!--console.log('hello')",
  2083. errors: [
  2084. {
  2085. type: ErrorCodes.X_MISSING_END_TAG,
  2086. loc: { offset: 0, line: 1, column: 1 }
  2087. },
  2088. {
  2089. type: ErrorCodes.EOF_IN_SCRIPT_HTML_COMMENT_LIKE_TEXT,
  2090. loc: { offset: 32, line: 1, column: 33 }
  2091. }
  2092. ]
  2093. },
  2094. {
  2095. code: "<script>console.log('hello')",
  2096. errors: [
  2097. {
  2098. type: ErrorCodes.X_MISSING_END_TAG,
  2099. loc: { offset: 0, line: 1, column: 1 }
  2100. }
  2101. ]
  2102. }
  2103. ],
  2104. EOF_IN_TAG: [
  2105. {
  2106. code: '<template><div',
  2107. errors: [
  2108. {
  2109. type: ErrorCodes.EOF_IN_TAG,
  2110. loc: { offset: 14, line: 1, column: 15 }
  2111. },
  2112. {
  2113. type: ErrorCodes.X_MISSING_END_TAG,
  2114. loc: { offset: 10, line: 1, column: 11 }
  2115. },
  2116. {
  2117. type: ErrorCodes.X_MISSING_END_TAG,
  2118. loc: { offset: 0, line: 1, column: 1 }
  2119. }
  2120. ]
  2121. },
  2122. {
  2123. code: '<template><div ',
  2124. errors: [
  2125. {
  2126. type: ErrorCodes.EOF_IN_TAG,
  2127. loc: { offset: 15, line: 1, column: 16 }
  2128. },
  2129. {
  2130. type: ErrorCodes.X_MISSING_END_TAG,
  2131. loc: { offset: 10, line: 1, column: 11 }
  2132. },
  2133. {
  2134. type: ErrorCodes.X_MISSING_END_TAG,
  2135. loc: { offset: 0, line: 1, column: 1 }
  2136. }
  2137. ]
  2138. },
  2139. {
  2140. code: '<template><div id',
  2141. errors: [
  2142. {
  2143. type: ErrorCodes.EOF_IN_TAG,
  2144. loc: { offset: 17, line: 1, column: 18 }
  2145. },
  2146. {
  2147. type: ErrorCodes.X_MISSING_END_TAG,
  2148. loc: { offset: 10, line: 1, column: 11 }
  2149. },
  2150. {
  2151. type: ErrorCodes.X_MISSING_END_TAG,
  2152. loc: { offset: 0, line: 1, column: 1 }
  2153. }
  2154. ]
  2155. },
  2156. {
  2157. code: '<template><div id ',
  2158. errors: [
  2159. {
  2160. type: ErrorCodes.EOF_IN_TAG,
  2161. loc: { offset: 18, line: 1, column: 19 }
  2162. },
  2163. {
  2164. type: ErrorCodes.X_MISSING_END_TAG,
  2165. loc: { offset: 10, line: 1, column: 11 }
  2166. },
  2167. {
  2168. type: ErrorCodes.X_MISSING_END_TAG,
  2169. loc: { offset: 0, line: 1, column: 1 }
  2170. }
  2171. ]
  2172. },
  2173. {
  2174. code: '<template><div id =',
  2175. errors: [
  2176. {
  2177. type: ErrorCodes.MISSING_ATTRIBUTE_VALUE,
  2178. loc: { offset: 19, line: 1, column: 20 }
  2179. },
  2180. {
  2181. type: ErrorCodes.EOF_IN_TAG,
  2182. loc: { offset: 19, line: 1, column: 20 }
  2183. },
  2184. {
  2185. type: ErrorCodes.X_MISSING_END_TAG,
  2186. loc: { offset: 10, line: 1, column: 11 }
  2187. },
  2188. {
  2189. type: ErrorCodes.X_MISSING_END_TAG,
  2190. loc: { offset: 0, line: 1, column: 1 }
  2191. }
  2192. ]
  2193. },
  2194. {
  2195. code: "<template><div id='abc",
  2196. errors: [
  2197. {
  2198. type: ErrorCodes.EOF_IN_TAG,
  2199. loc: { offset: 22, line: 1, column: 23 }
  2200. },
  2201. {
  2202. type: ErrorCodes.X_MISSING_END_TAG,
  2203. loc: { offset: 10, line: 1, column: 11 }
  2204. },
  2205. {
  2206. type: ErrorCodes.X_MISSING_END_TAG,
  2207. loc: { offset: 0, line: 1, column: 1 }
  2208. }
  2209. ]
  2210. },
  2211. {
  2212. code: '<template><div id="abc',
  2213. errors: [
  2214. {
  2215. type: ErrorCodes.EOF_IN_TAG,
  2216. loc: { offset: 22, line: 1, column: 23 }
  2217. },
  2218. {
  2219. type: ErrorCodes.X_MISSING_END_TAG,
  2220. loc: { offset: 10, line: 1, column: 11 }
  2221. },
  2222. {
  2223. type: ErrorCodes.X_MISSING_END_TAG,
  2224. loc: { offset: 0, line: 1, column: 1 }
  2225. }
  2226. ]
  2227. },
  2228. {
  2229. code: "<template><div id='abc'",
  2230. errors: [
  2231. {
  2232. type: ErrorCodes.EOF_IN_TAG,
  2233. loc: { offset: 23, line: 1, column: 24 }
  2234. },
  2235. {
  2236. type: ErrorCodes.X_MISSING_END_TAG,
  2237. loc: { offset: 10, line: 1, column: 11 }
  2238. },
  2239. {
  2240. type: ErrorCodes.X_MISSING_END_TAG,
  2241. loc: { offset: 0, line: 1, column: 1 }
  2242. }
  2243. ]
  2244. },
  2245. {
  2246. code: '<template><div id="abc"',
  2247. errors: [
  2248. {
  2249. type: ErrorCodes.EOF_IN_TAG,
  2250. loc: { offset: 23, line: 1, column: 24 }
  2251. },
  2252. {
  2253. type: ErrorCodes.X_MISSING_END_TAG,
  2254. loc: { offset: 10, line: 1, column: 11 }
  2255. },
  2256. {
  2257. type: ErrorCodes.X_MISSING_END_TAG,
  2258. loc: { offset: 0, line: 1, column: 1 }
  2259. }
  2260. ]
  2261. },
  2262. {
  2263. code: '<template><div id=abc',
  2264. errors: [
  2265. {
  2266. type: ErrorCodes.EOF_IN_TAG,
  2267. loc: { offset: 21, line: 1, column: 22 }
  2268. },
  2269. {
  2270. type: ErrorCodes.X_MISSING_END_TAG,
  2271. loc: { offset: 10, line: 1, column: 11 }
  2272. },
  2273. {
  2274. type: ErrorCodes.X_MISSING_END_TAG,
  2275. loc: { offset: 0, line: 1, column: 1 }
  2276. }
  2277. ]
  2278. },
  2279. {
  2280. code: "<template><div id='abc'/",
  2281. errors: [
  2282. {
  2283. type: ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG,
  2284. loc: { offset: 23, line: 1, column: 24 }
  2285. },
  2286. {
  2287. type: ErrorCodes.EOF_IN_TAG,
  2288. loc: { offset: 24, line: 1, column: 25 }
  2289. },
  2290. {
  2291. type: ErrorCodes.X_MISSING_END_TAG,
  2292. loc: { offset: 10, line: 1, column: 11 }
  2293. },
  2294. {
  2295. type: ErrorCodes.X_MISSING_END_TAG,
  2296. loc: { offset: 0, line: 1, column: 1 }
  2297. }
  2298. ]
  2299. },
  2300. {
  2301. code: '<template><div id="abc"/',
  2302. errors: [
  2303. {
  2304. type: ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG,
  2305. loc: { offset: 23, line: 1, column: 24 }
  2306. },
  2307. {
  2308. type: ErrorCodes.EOF_IN_TAG,
  2309. loc: { offset: 24, line: 1, column: 25 }
  2310. },
  2311. {
  2312. type: ErrorCodes.X_MISSING_END_TAG,
  2313. loc: { offset: 10, line: 1, column: 11 }
  2314. },
  2315. {
  2316. type: ErrorCodes.X_MISSING_END_TAG,
  2317. loc: { offset: 0, line: 1, column: 1 }
  2318. }
  2319. ]
  2320. },
  2321. {
  2322. code: '<template><div id=abc /',
  2323. errors: [
  2324. {
  2325. type: ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG,
  2326. loc: { offset: 22, line: 1, column: 23 }
  2327. },
  2328. {
  2329. type: ErrorCodes.EOF_IN_TAG,
  2330. loc: { offset: 23, line: 1, column: 24 }
  2331. },
  2332. {
  2333. type: ErrorCodes.X_MISSING_END_TAG,
  2334. loc: { offset: 10, line: 1, column: 11 }
  2335. },
  2336. {
  2337. type: ErrorCodes.X_MISSING_END_TAG,
  2338. loc: { offset: 0, line: 1, column: 1 }
  2339. }
  2340. ]
  2341. },
  2342. {
  2343. code: '<div></div',
  2344. errors: [
  2345. {
  2346. type: ErrorCodes.EOF_IN_TAG,
  2347. loc: { offset: 10, line: 1, column: 11 }
  2348. }
  2349. ]
  2350. }
  2351. ],
  2352. INCORRECTLY_CLOSED_COMMENT: [
  2353. {
  2354. code: '<template><!--comment--!></template>',
  2355. errors: [
  2356. {
  2357. type: ErrorCodes.INCORRECTLY_CLOSED_COMMENT,
  2358. loc: { offset: 10, line: 1, column: 11 }
  2359. }
  2360. ]
  2361. }
  2362. ],
  2363. INCORRECTLY_OPENED_COMMENT: [
  2364. {
  2365. code: '<template><!></template>',
  2366. errors: [
  2367. {
  2368. type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
  2369. loc: { offset: 10, line: 1, column: 11 }
  2370. }
  2371. ]
  2372. },
  2373. {
  2374. code: '<template><!-></template>',
  2375. errors: [
  2376. {
  2377. type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
  2378. loc: { offset: 10, line: 1, column: 11 }
  2379. }
  2380. ]
  2381. },
  2382. {
  2383. code: '<template><!ELEMENT br EMPTY></template>',
  2384. errors: [
  2385. {
  2386. type: ErrorCodes.INCORRECTLY_OPENED_COMMENT,
  2387. loc: { offset: 10, line: 1, column: 11 }
  2388. }
  2389. ]
  2390. },
  2391. // Just ignore doctype.
  2392. {
  2393. code: '<!DOCTYPE html>',
  2394. errors: []
  2395. }
  2396. ],
  2397. INVALID_FIRST_CHARACTER_OF_TAG_NAME: [
  2398. {
  2399. code: '<template>a < b</template>',
  2400. errors: [
  2401. {
  2402. type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
  2403. loc: { offset: 13, line: 1, column: 14 }
  2404. }
  2405. ]
  2406. },
  2407. {
  2408. code: '<template><�></template>',
  2409. errors: [
  2410. {
  2411. type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
  2412. loc: { offset: 11, line: 1, column: 12 }
  2413. }
  2414. ]
  2415. },
  2416. {
  2417. code: '<template>a </ b</template>',
  2418. errors: [
  2419. {
  2420. type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
  2421. loc: { offset: 14, line: 1, column: 15 }
  2422. },
  2423. {
  2424. type: ErrorCodes.X_MISSING_END_TAG,
  2425. loc: { offset: 0, line: 1, column: 1 }
  2426. }
  2427. ]
  2428. },
  2429. {
  2430. code: '<template></�></template>',
  2431. errors: [
  2432. {
  2433. type: ErrorCodes.INVALID_FIRST_CHARACTER_OF_TAG_NAME,
  2434. loc: { offset: 12, line: 1, column: 13 }
  2435. }
  2436. ]
  2437. },
  2438. // Don't throw invalid-first-character-of-tag-name in interpolation
  2439. {
  2440. code: '<template>{{a < b}}</template>',
  2441. errors: []
  2442. }
  2443. ],
  2444. MISSING_ATTRIBUTE_VALUE: [
  2445. {
  2446. code: '<template><div id=></div></template>',
  2447. errors: [
  2448. {
  2449. type: ErrorCodes.MISSING_ATTRIBUTE_VALUE,
  2450. loc: { offset: 18, line: 1, column: 19 }
  2451. }
  2452. ]
  2453. },
  2454. {
  2455. code: '<template><div id= ></div></template>',
  2456. errors: [
  2457. {
  2458. type: ErrorCodes.MISSING_ATTRIBUTE_VALUE,
  2459. loc: { offset: 19, line: 1, column: 20 }
  2460. }
  2461. ]
  2462. },
  2463. {
  2464. code: '<template><div id= /></div></template>',
  2465. errors: []
  2466. }
  2467. ],
  2468. MISSING_END_TAG_NAME: [
  2469. {
  2470. code: '<template></></template>',
  2471. errors: [
  2472. {
  2473. type: ErrorCodes.MISSING_END_TAG_NAME,
  2474. loc: { offset: 12, line: 1, column: 13 }
  2475. }
  2476. ]
  2477. }
  2478. ],
  2479. MISSING_WHITESPACE_BETWEEN_ATTRIBUTES: [
  2480. {
  2481. code: '<template><div id="foo"class="bar"></div></template>',
  2482. errors: [
  2483. {
  2484. type: ErrorCodes.MISSING_WHITESPACE_BETWEEN_ATTRIBUTES,
  2485. loc: { offset: 23, line: 1, column: 24 }
  2486. }
  2487. ]
  2488. },
  2489. // CR doesn't appear in tokenization phase, but all CR are removed in preprocessing.
  2490. // https://html.spec.whatwg.org/multipage/parsing.html#preprocessing-the-input-stream
  2491. {
  2492. code: '<template><div id="foo"\r\nclass="bar"></div></template>',
  2493. errors: []
  2494. }
  2495. ],
  2496. NESTED_COMMENT: [
  2497. {
  2498. code: '<template><!--a<!--b--></template>',
  2499. errors: [
  2500. {
  2501. type: ErrorCodes.NESTED_COMMENT,
  2502. loc: { offset: 15, line: 1, column: 16 }
  2503. }
  2504. ]
  2505. },
  2506. {
  2507. code: '<template><!--a<!--b<!--c--></template>',
  2508. errors: [
  2509. {
  2510. type: ErrorCodes.NESTED_COMMENT,
  2511. loc: { offset: 15, line: 1, column: 16 }
  2512. },
  2513. {
  2514. type: ErrorCodes.NESTED_COMMENT,
  2515. loc: { offset: 20, line: 1, column: 21 }
  2516. }
  2517. ]
  2518. },
  2519. {
  2520. code: '<template><!--a<!--b<!----></template>',
  2521. errors: [
  2522. {
  2523. type: ErrorCodes.NESTED_COMMENT,
  2524. loc: { offset: 15, line: 1, column: 16 }
  2525. }
  2526. ]
  2527. },
  2528. {
  2529. code: '<template><!--a<!--></template>',
  2530. errors: []
  2531. },
  2532. {
  2533. code: '<template><!--a<!--',
  2534. errors: [
  2535. {
  2536. type: ErrorCodes.EOF_IN_COMMENT,
  2537. loc: { offset: 19, line: 1, column: 20 }
  2538. },
  2539. {
  2540. type: ErrorCodes.X_MISSING_END_TAG,
  2541. loc: { offset: 0, line: 1, column: 1 }
  2542. }
  2543. ]
  2544. }
  2545. ],
  2546. UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME: [
  2547. {
  2548. code: "<template><div a\"bc=''></div></template>",
  2549. errors: [
  2550. {
  2551. type: ErrorCodes.UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME,
  2552. loc: { offset: 16, line: 1, column: 17 }
  2553. }
  2554. ]
  2555. },
  2556. {
  2557. code: "<template><div a'bc=''></div></template>",
  2558. errors: [
  2559. {
  2560. type: ErrorCodes.UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME,
  2561. loc: { offset: 16, line: 1, column: 17 }
  2562. }
  2563. ]
  2564. },
  2565. {
  2566. code: "<template><div a<bc=''></div></template>",
  2567. errors: [
  2568. {
  2569. type: ErrorCodes.UNEXPECTED_CHARACTER_IN_ATTRIBUTE_NAME,
  2570. loc: { offset: 16, line: 1, column: 17 }
  2571. }
  2572. ]
  2573. }
  2574. ],
  2575. UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE: [
  2576. {
  2577. code: '<template><div foo=bar"></div></template>',
  2578. errors: [
  2579. {
  2580. type: ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
  2581. loc: { offset: 22, line: 1, column: 23 }
  2582. }
  2583. ]
  2584. },
  2585. {
  2586. code: "<template><div foo=bar'></div></template>",
  2587. errors: [
  2588. {
  2589. type: ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
  2590. loc: { offset: 22, line: 1, column: 23 }
  2591. }
  2592. ]
  2593. },
  2594. {
  2595. code: '<template><div foo=bar<div></div></template>',
  2596. errors: [
  2597. {
  2598. type: ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
  2599. loc: { offset: 22, line: 1, column: 23 }
  2600. }
  2601. ]
  2602. },
  2603. {
  2604. code: '<template><div foo=bar=baz></div></template>',
  2605. errors: [
  2606. {
  2607. type: ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
  2608. loc: { offset: 22, line: 1, column: 23 }
  2609. }
  2610. ]
  2611. },
  2612. {
  2613. code: '<template><div foo=bar`></div></template>',
  2614. errors: [
  2615. {
  2616. type: ErrorCodes.UNEXPECTED_CHARACTER_IN_UNQUOTED_ATTRIBUTE_VALUE,
  2617. loc: { offset: 22, line: 1, column: 23 }
  2618. }
  2619. ]
  2620. }
  2621. ],
  2622. UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME: [
  2623. {
  2624. code: '<template><div =foo=bar></div></template>',
  2625. errors: [
  2626. {
  2627. type: ErrorCodes.UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME,
  2628. loc: { offset: 15, line: 1, column: 16 }
  2629. }
  2630. ]
  2631. },
  2632. {
  2633. code: '<template><div =></div></template>',
  2634. errors: [
  2635. {
  2636. type: ErrorCodes.UNEXPECTED_EQUALS_SIGN_BEFORE_ATTRIBUTE_NAME,
  2637. loc: { offset: 15, line: 1, column: 16 }
  2638. }
  2639. ]
  2640. }
  2641. ],
  2642. UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME: [
  2643. {
  2644. code: '<template><?xml?></template>',
  2645. errors: [
  2646. {
  2647. type: ErrorCodes.UNEXPECTED_QUESTION_MARK_INSTEAD_OF_TAG_NAME,
  2648. loc: { offset: 11, line: 1, column: 12 }
  2649. }
  2650. ]
  2651. }
  2652. ],
  2653. UNEXPECTED_SOLIDUS_IN_TAG: [
  2654. {
  2655. code: '<template><div a/b></div></template>',
  2656. errors: [
  2657. {
  2658. type: ErrorCodes.UNEXPECTED_SOLIDUS_IN_TAG,
  2659. loc: { offset: 16, line: 1, column: 17 }
  2660. }
  2661. ]
  2662. }
  2663. ],
  2664. X_INVALID_END_TAG: [
  2665. {
  2666. code: '<template></div></template>',
  2667. errors: [
  2668. {
  2669. type: ErrorCodes.X_INVALID_END_TAG,
  2670. loc: { offset: 10, line: 1, column: 11 }
  2671. }
  2672. ]
  2673. },
  2674. {
  2675. code: '<template></div></div></template>',
  2676. errors: [
  2677. {
  2678. type: ErrorCodes.X_INVALID_END_TAG,
  2679. loc: { offset: 10, line: 1, column: 11 }
  2680. },
  2681. {
  2682. type: ErrorCodes.X_INVALID_END_TAG,
  2683. loc: { offset: 16, line: 1, column: 17 }
  2684. }
  2685. ]
  2686. },
  2687. {
  2688. code: "<template>{{'</div>'}}</template>",
  2689. errors: []
  2690. },
  2691. {
  2692. code: '<textarea></div></textarea>',
  2693. errors: []
  2694. },
  2695. {
  2696. code: '<svg><![CDATA[</div>]]></svg>',
  2697. errors: []
  2698. },
  2699. {
  2700. code: '<svg><!--</div>--></svg>',
  2701. errors: []
  2702. }
  2703. ],
  2704. X_MISSING_END_TAG: [
  2705. {
  2706. code: '<template><div></template>',
  2707. errors: [
  2708. {
  2709. type: ErrorCodes.X_MISSING_END_TAG,
  2710. loc: { offset: 10, line: 1, column: 11 }
  2711. }
  2712. ]
  2713. },
  2714. {
  2715. code: '<template><div>',
  2716. errors: [
  2717. {
  2718. type: ErrorCodes.X_MISSING_END_TAG,
  2719. loc: { offset: 10, line: 1, column: 11 }
  2720. },
  2721. {
  2722. type: ErrorCodes.X_MISSING_END_TAG,
  2723. loc: { offset: 0, line: 1, column: 1 }
  2724. }
  2725. ]
  2726. }
  2727. ],
  2728. X_MISSING_INTERPOLATION_END: [
  2729. {
  2730. code: '{{ foo',
  2731. errors: [
  2732. {
  2733. type: ErrorCodes.X_MISSING_INTERPOLATION_END,
  2734. loc: { offset: 0, line: 1, column: 1 }
  2735. }
  2736. ]
  2737. },
  2738. {
  2739. code: '{{',
  2740. errors: [
  2741. {
  2742. type: ErrorCodes.X_MISSING_INTERPOLATION_END,
  2743. loc: { offset: 0, line: 1, column: 1 }
  2744. }
  2745. ]
  2746. },
  2747. {
  2748. code: '{{}}',
  2749. errors: []
  2750. }
  2751. ],
  2752. X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END: [
  2753. {
  2754. code: `<div v-foo:[sef fsef] />`,
  2755. errors: [
  2756. {
  2757. type: ErrorCodes.X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END,
  2758. loc: { offset: 15, line: 1, column: 16 }
  2759. }
  2760. ]
  2761. }
  2762. ]
  2763. }
  2764. for (const key of Object.keys(patterns) as (keyof typeof patterns)[]) {
  2765. describe(key, () => {
  2766. for (const { code, errors, options } of patterns[key]) {
  2767. test(
  2768. code.replace(
  2769. /[\r\n]/g,
  2770. c => `\\x0${c.codePointAt(0)!.toString(16)};`
  2771. ),
  2772. () => {
  2773. const spy = jest.fn()
  2774. const ast = baseParse(code, {
  2775. getNamespace: (tag, parent) => {
  2776. const ns = parent ? parent.ns : Namespaces.HTML
  2777. if (ns === Namespaces.HTML) {
  2778. if (tag === 'svg') {
  2779. return (Namespaces.HTML + 1) as any
  2780. }
  2781. }
  2782. return ns
  2783. },
  2784. getTextMode: ({ tag }) => {
  2785. if (tag === 'textarea') {
  2786. return TextModes.RCDATA
  2787. }
  2788. if (tag === 'script') {
  2789. return TextModes.RAWTEXT
  2790. }
  2791. return TextModes.DATA
  2792. },
  2793. ...options,
  2794. onError: spy
  2795. })
  2796. expect(
  2797. spy.mock.calls.map(([err]) => ({
  2798. type: err.code,
  2799. loc: err.loc.start
  2800. }))
  2801. ).toMatchObject(errors)
  2802. expect(ast).toMatchSnapshot()
  2803. }
  2804. )
  2805. }
  2806. })
  2807. }
  2808. })
  2809. })