Parcel: Using src attribute to retrieve scripts in vue single file components

[MattAndDev]

🐛 bug report

When splitting concerns in .vue files by passing a src attribute to the <script> tag, the VueAsset.js does not resolve the linked file

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

I created a repo to demonstrate the issue:
https://github.com/MattAndDev/parcel-vue-soc

git clone https://github.com/MattAndDev/parcel-vue-soc.git
cd parcel-vue-soc && npm i
npm run dev

🤔 Expected Behavior

I would expect the linked file to be parsed and loaded. Resulting in won't print appearing in the console.

😯 Current Behavior

Nothin happens, the <script> is interpreted as empty and nothing is logged to console.

💁 Possible Solution

I actually have a workaround on my local machine:
in VueAsset.js

  if (descriptor.script && !descriptor.script.src) {
      parts.push({
        type: descriptor.script.lang || 'js',
        value: descriptor.script.content,
        sourceMap: descriptor.script.map
      });
    }
    // if descriptor.script has src attribute get file content (ugly, but works)
    if (descriptor.script.src) {
      parts.push({
        type: descriptor.script.lang || 'js',
        value: fs.readFileSync(path.resolve(path.dirname(this.relativeName), descriptor.script.src)).toString(),
        sourceMap: descriptor.script.map
      });
    }

This works well for me, but the file is not watched. Happy to support further in case!!

🔦 Context

When working with a lot of logic I tend to split my .vue files in .sass and .js.
Stumbled upon this while trying to port a webpack project to parcel 📦

💻 Code Sample

See repo as above -> https://github.com/MattAndDev/parcel-vue-soc

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.8.1
| Node | 8.11.1
| npm/Yarn | 5.6.0
| Operating System | OSX

[MattAndDev]

@DeMoorJasper I'm more then willing to look into this and help as much as I can.
I think the goal should be to allow for s.o.c. in single component .vue files as described in the vue docs itself.
Tomorrow I will take a bit of time to dig deeper and find a more elegant way to achieve this, by taking also styles embeds via src (css|sass|scss|less) into consideration.
In case I'll raise a PR, in the meanwhile any feedback on the workaround of above would be precious!

[DeMoorJasper]

Ow totally overlooked the possible solution, looks good.

What about using this?

if (descriptor.script && descriptor.script.src) {
  this.addUrlDependency(descriptor.script.src);
} else if (descriptor.script) {
  parts.push({
    type: descriptor.script.lang || 'js',
    value: descriptor.script.content,
    sourceMap: descriptor.script.map
  });
}

Same should work for css.

This way you would also benefit from resolver syntax if/when #1324 gets merged

[MattAndDev]

Cool! @DeMoorJasper thanks for this, addUrlToDependency is what I was looking for!
Much appreciated!!
Will adapt as proposed, also for styles and submit a PR.
Cheers!

[SteffenL]

This issue is a duplicate of #1333.

[MattAndDev]

It is @SteffenL, sorry I missed it.
Should we close this?
I'll reference the PR to the other feature request!

[MattAndDev]

@DeMoorJasper as quick feedback:
your solution unluckily it's not working out of the box.
This partially relates to Asset. addURLDependency not behaving as expected and some internal logic in the VueAsset class, banging my head on this.
Will continue investigate and hopefully come back with a solution in #1333!

[DeMoorJasper]

@MattAndDev Feel free to hit me up on slack or open a PR and ask me to review it