Parcel: Issue with self-closing tags

[scriptPilot]

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

Vue component is fixed with ESLint / Vue Plugin to the following code with self-closing tags:

<template>
  <f7-app :params="f7params">
    <f7-statusbar />
    <f7-view main />
  </f7-app>
</template>

🤔 Expected Behavior

Component is bundled well with Parcel.

😯 Current Behavior

Result is an empty page, because the view is now part of the statusbar, because the closing tag is not created by Parcel.

💁 Possible Solution

Works well without self-closing tags.

"rules": {
    "vue/html-self-closing": [
      "error",
      {
        "html": {
          "component": "never"
        }
      }
    ]
  }

<template>
  <f7-app :params="f7params">
    <f7-statusbar></f7-statusbar>
    <f7-view main></f7-view>
  </f7-app>
</template>

🌍 Your Environment

• ESLint version: 5.16.0
• eslint-plugin-vue version: 5.2.2
• Node version: 11.6.0

[scriptPilot]

Is there any progress on this common issue?

[houd1ni]

Hi, @scriptPilot !
It's the same as https://github.com/parcel-bundler/parcel/issues/1294
Unfortunately, we had to move away from parcel due to the fact, that obviously Vue isn't in the Parcel's scope.

[scriptPilot]

@houd1ni - What a pity, I thought it is ...

[mischnic]

Could someone create a minimal reproduction for this (complete JS/Vue/HTML files)?

[scriptPilot]

@mischnic - I created a repo here: https://github.com/scriptPilot/bug-f7-vue-parcel

[mischnic]

as @houd1ni said, this is a part of #1294 and this comment is correct: https://github.com/parcel-bundler/parcel/issues/1294#issuecomment-389851269

Parcel first parses/processes the vue template with HTML (not sure why to be honest) and this screws up the self-closing tags:

const posthtml = require("posthtml");

const html = `
<app>
    <statusbar />
    <view main />
</app>
`;

const result = posthtml()
    .process(html, { sync: true }).html;

console.log(result);

Output:

<app>
    <statusbar>
    <view main="">
</view></statusbar></app>

Now you can see why view is inside of the statusbar.

[houd1ni]

@mischnic Hi, is there some progress on that? Or maybe it's planned or smth? Would be sad if it's just left closed.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

[mischnic]

Does this still happen with Parcel 2?