Add Source-Maps

[tricki]

Repost of automatically closed issue #1255

Identical issues:

• Lack of source maps #219
• Source map support #884
• Feature request: Configure builds to include source maps #1486

Stencil version:

 @stencil/core@1.1.7

I'm submitting a:

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
I'm using the stencil starter project found here (https://github.com/ionic-team/stencil-component-starter) and I would like to debug the code in visual studio code. The following configuration lets me launch chrome from within visual studio code:

"configurations": [
 {
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome against localhost",
  "url": "http://localhost:3333",
  "sourceMaps": true,
  "webRoot": "${workspaceFolder}/www"
 }
]

Expected behavior:
When I place a breakpoint in visual studio code, I expect execution to stop there. This doesn't happen. Instead I get a warning saying 'unverified breakpoint' for all the breakpoints I place in the code.

Steps to reproduce:
See Current behavior and Expected behavior

Main advantages of having source maps

• Editor integration
• IE11 debugging

[tricki]

BTW I find it strange that issues are being closed simply because there has been no activity for a month. Or was the issue template not "fully filled out"?

Perhaps you should reprogram your ionitron-bot 😉
What about an early warning to all subscribers?

And I do understand if it's not a priority for you but I still think the issue should have stayed open.

[iano123]

+1

[arjunyel]

"no promises on any dates, but it is on our roadmap to complete" https://stencil-worldwide.slack.com/archives/C7987GCA2/p1565804460213900?thread_ts=1565804460.213900&cid=C7987GCA2

[petermikitsh]

Source maps are now listed on the fall roadmap! https://stenciljs.com/blog/stencil-roadmap-fall-2019

[gino8080]

and the roadmap is..Stopped?

[arjunyel]

Right now the compiler is being rewritten to support environments like Stackblitz

[hypery2k]

any news on this?

[lhk]

From https://stenciljs.com/blog/stencil-roadmap-fall-2019

One major benefit of using native JavaScript modules and imports is that the original source code is largely left untouched. Granted, TypeScript removes the types and Stencil removes the decorators, but the developer’s original source code is largely as-is.

I don't think that this is true. The bundler will mix lots of Javascript code together. I just worked my way through a long Stenciljs tutorial and saw huge bundles with functionality from components, services and helpers all mixed together. The original typescript code was basically unrecognizable.

To be honest, without support for sourcemaps, I can't consider stenciljs for professional development.

[lhk]

Also, for what it's worth, sourcemaps >>> stackblitz

[lhk]

any update on this?

[lhk]

I would like to bump this again.

When using Stencil to build small, self-contained web-components, the lack of sourcemaps is probably not a big issue.

But design systems tend to grow and develop complex interlocking dependencies. At this point reading the code generated by the bundler becomes very hard.

And you advertise StencilJS as a tool for building entire applications. This takes it even one step further.
I've tried porting parts of my React App to Stencil. The output is a mess! It contains code from all over the place: Services, tools, backend logic, etc.
It's not that my code is badly organized, it's just the bundler doing its job.
At some level of application complexity, Javascript as a compilation target should no longer be considered human-readable.
I mean, sure, you can read this. But it's not productive.

Personal opinion: Developing a medium to large app without sourcemaps is a really bad idea. Stencil is currently only suitable for very small codebases of self-contained web-components.

[basisbit]

+1