search

BuilderIO / mitosis

Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.
https://mitosis.builder.io
MIT License
11.86k stars 516 forks source link

HTML Characters break prettier stage of Vue generation #59

Open ca136 opened 3 years ago

ca136 commented 3 years ago

Minimal reproducible example: https://mitosis.builder.io/?outputTab=G4VwpkA%3D&code=JYWwDg9gTgLgBAbzgVwM4FMDKMCGN1wC%2BcAZlBCHAEQACAVqgB4C0ANsPgPQDG06VAbgBQQ9I0iw4AE3QkcyVvBLIAdtxjAIKuABV0qGAGEKkFehUwAFAEpEQuHF4qDcA3gIBeFBmzvLCQlsHOBEHKHQYZChtS3tghwAeKWAANwA%2BOPiHADIAYgBGAAZigFZM4ITOZPS462FCISA

Could not prettify 
Object { string: "<template>\n  <div >\n    &#10005\n  </div>\n</template>\n<script>\n  \n\n\n\n\n  export default {\n    \n    \n\n    \n    \n\n    \n    \n  }\n</script>" }
 SyntaxError: Unexpected character "
" (3:12)
  1 | <template>
  2 |   <div >
> 3 |     &#10005
    |            ^
  4 |   </div>
  5 | </template>
  6 | <script>
    kt https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:117490
    ds https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:117602
    e https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:117602
    parse https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:117602
    parse https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:100507
    Xi https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:100507
    Yi https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:100507
    formatWithCursor https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:100507
    Px https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:100507
    format https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:100507
    componentToVue https://jsx-lite.builder.io/static/js/main.836493ea.chunk.js:2856
    updateOutput https://jsx-lite.builder.io/static/js/main.836493ea.chunk.js:6552
    executeAction https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:57106
    res https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:57090
    Fiddle https://jsx-lite.builder.io/static/js/main.836493ea.chunk.js:6554
    executeAction https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:57106
    res https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:57090
    reactionRunner https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58637
    r https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58618
    runReaction_ https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58303
    runReactionsHelper https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58445
    reactionScheduler https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58420
    reactionScheduler https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58458
    Wj https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266729
    reactionScheduler https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58457
    runReactions https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58426
    schedule_ https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58282
    reaction https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:58641
    useReaction https://jsx-lite.builder.io/static/js/main.836493ea.chunk.js:6449
    fk https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266747
    unstable_runWithPriority https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266819
    gg https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266607
    Oj https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266746
    Lj https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266728
    jg https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266608
    unstable_runWithPriority https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266819
    gg https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266607
    jg https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266608
    ig https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266607
    Xj https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266729
    tk https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266774
    render https://jsx-lite.builder.io/static/js/4.bc68c593.chunk.js:266781
    1876 https://jsx-lite.builder.io/static/js/main.836493ea.chunk.js:6562
    c https://jsx-lite.builder.io/?outputTab=vue&code=import+{+useState+}+from+"%40jsx-lite%2Fcore"%3B export+default+function+TestComponent()+{ ++const+state+%3D+useState({})++++ ++return+( ++++++<div> ++++++++%26%2310005 ++++++<%2Fdiv> ++)%3B } :1
    r https://jsx-lite.builder.io/?outputTab=vue&code=import+{+useState+}+from+"%40jsx-lite%2Fcore"%3B export+default+function+TestComponent()+{ ++const+state+%3D+useState({})++++ ++return+( ++++++<div> ++++++++%26%2310005 ++++++<%2Fdiv> ++)%3B } :1
    t https://jsx-lite.builder.io/?outputTab=vue&code=import+{+useState+}+from+"%40jsx-lite%2Fcore"%3B export+default+function+TestComponent()+{ ++const+state+%3D+useState({})++++ ++return+( ++++++<div> ++++++++%26%2310005 ++++++<%2Fdiv> ++)%3B } :1
    <anonymous> https://jsx-lite.builder.io/static/js/main.836493ea.chunk.js:1
steve8708 commented 3 years ago

ugly - but you may be able to work around this by doing {'&#10005'} in the JSX Lite code