Stencil: Add Source-Maps

[tricki]

Repost of automatically closed issue #1255

Identical issues:

• #219
• #884
• #1486

Stencil version:

 @stencil/[email protected]

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 :wink:
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

[LukePammant]

I'll go ahead and weigh in on this too. I'm trying to pitch web-components to my company using StencilJS but the lack of source maps is going to be a non-starter to get the other developers on board. I love developing with StencilJS but I hate having to use the archaic debug; or console.log lines to try to troubleshoot issues.

[carl-ellis]

👍 With source maps we can integrate with Sentry. Any news on if this is scheduled for work in an upcoming release?

[mikkelrom]

+1
Any update on this yet?

[Tiberriver256]

For what it's worth I was able to get debugging somewhat working using VSCode debugger by debugging straight out of the www folder.

launch.config

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3343",
            "webRoot": "${workspaceFolder}/www"
        }
    ]
}

[iano123]

that is not the same thing.

without sourcemaps this is dead in the water

[basisbit]

I agree. Stencil would be great for bunch of our use cases, but as long as there is no source-map support, this is not usable.

[salvatoreromeo]

I investigated the TranspileOptions interface and found that sourceMaps seems to be supported https://github.com/ionic-team/stencil/blob/f058564324df173caa0da8ca578d54cf955429ba/src/declarations/stencil-public-compiler.ts#L2238

However when running a new project they seems to be disabled. Does anyone know more?

/**
   * Create a source map. Using `inline` will inline the source map into the
   * code, otherwise the source map will be in the returned `map` property.
   * Default is `true`.
   */
  sourceMap?: boolean | 'inline';

[iano123]

Thats really weird that they do not talk about/announce such an important feature.

---

Van: Salvatore [e-mail]
Verzonden: zaterdag 5 september 2020 08:10
Aan: ionic-team/stencil [e-mail]
CC: jan vercauteren [e-mail]; Comment [e-mail]
Onderwerp: Re: [ionic-team/stencil] Add Source-Maps (#1744)

I investigated the TranspileOptions interface and found that sourceMaps seems to be supported https://github.com/ionic-team/stencil/blob/f058564324df173caa0da8ca578d54cf955429ba/src/declarations/stencil-public-compiler.ts#L2238

However when running a new project they seems to be disabled. Does anyone know more?

/**

• Create a source map. Using inline will inline the source map into the
• code, otherwise the source map will be in the returned map property.
• Default is true.
  */
  sourceMap?: boolean | 'inline';

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/ionic-team/stencil/issues/1744#issuecomment-687570073, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABLVCBA26RZUGOGEGI73J6DSEHXA3ANCNFSM4IE7Q4JA.

[iano123]

it looks like in the stencil 2.0 they introduced it. Look at this search https://github.com/ionic-team/stencil/search?q=sourcemap&unscoped_q=sourcemap

[salvatoreromeo]

unfortunately I started a new project using stencil v2 and sourcemaps do not seem to work by default

[salvatoreromeo]

Thats really weird that they do not talk about/announce such an important feature.

I absolutely agree. I was waiting for it since 2019:

"... we recognize that source maps improve debugging and testing, so we’ll ensure they line up correctly in upcoming versions." (https://stenciljs.com/blog/stencil-roadmap-fall-2019)

[iano123]

I don’t have a test project. But maybe we could try if it works or not. It could be it’s under development. Why it would end up in the release branch I don’t know but still. Worth to try.

Get Outlook for iOShttps://aka.ms/o0ukef

---

From: Salvatore [e-mail]
Sent: Saturday, September 5, 2020 10:39:32 AM
To: ionic-team/stencil [e-mail]
Cc: jan vercauteren [e-mail]; Comment [e-mail]
Subject: Re: [ionic-team/stencil] Add Source-Maps (#1744)

Thats really weird that they do not talk about/announce such an important feature.

I absolutely agree. I was waiting for it since 2019:

"... we recognize that source maps improve debugging and testing, so we’ll ensure they line up correctly in upcoming versions." (https://stenciljs.com/blog/stencil-roadmap-fall-2019)

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/ionic-team/stencil/issues/1744#issuecomment-687572881, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABLVCBB3KNOP2I3YQB4JPF3SEH2MJANCNFSM4IE7Q4JA.

[salvatoreromeo]

I set both 'inline' and true for the sourceMap option. It didnt work (stencil v2.0.3)

[lhk]

Any news here?

[salvatoreromeo]

unfortunately no news
I tried to write in the slack channel too, but I had no answer at all

[lhk]

I really don't understand this.
It's such an essential feature.

On the ionic/stencil twitter, there's people posting about how they fall in love with stenciljs. But to be honest, this feels super fake for me.
How could any experienced web dev even consider to write a big app with a compiler that has no sourcemaps.

Come on guys, you've just released stencil version 2.0. At least communicate a bit on when we can expect this feature.

[salvatoreromeo]

I agree and I think the biggest problem is exactly the lack of communication

[tricki]

Last Thursday @adamdbradley wrote this in the Stencil Slack:

No news, have been unable to get to it, but would love to have the community help out

[basisbit]

just a heads up, on my work place we finally decided to migrate away from Stencil. Imho this software is kind of unusable also regarding support and design decisions.

[iano123]

where to?

[netzpixel]

Has anyone tried to use rollup.js to create the sourcemaps?

[lhk]

@BenAndDevelopment that's not going to work.
Rollup is a bundler, similar to webpack and parcel.
It can process a JS codebase and output bundled code (modules are pulled in, etc).
It produces sourcemaps that map between the original source and the bundled output.

While Stencil will also do some of the things that a bundler does for you, the reason that you would use stencil is to process your web components. These components contain code and markup that's specific to stencil. The compilation converts this special syntax to "normal" Javascript.
The output is heavily processed and can be hard to read.
This step is lacking sourcemaps.

I guess you could apply rollup after stencil. After all, then it's only Javascript. But by that point, the important information is already lost.

[netzpixel]

@lhk Thanks for your helpful input.

[eriklharper]

Does the stencil build --dev option not generate source maps for ya'll? It does for me. Here is one such example in chrome dev tools

[salvatoreromeo]

In this screenshot the "formatted" code is not the original source. The code refers to a compiled version but is not the TypeScript source. Sometimes, for complex web components, it's quite difficult to read the compiled js version, even if you format It on chrome.

we are still waiting for a real sourcemap support

[eriklharper]

Even the non-formatted one looks pretty good to me. Having the typescript source would be kinda neat, gotta admit, but I think this regular js suffices plenty.

[frederic-thibault]

Does anybody heard something from the development teams in the last year about this topic? It sounds like nobody ever answer or gives a clue about this important feature.

[tricki]

@manucorporat wrote on May 6:

it's complicated but we are closer than ever, we are relaying more on TS and rollup than manual code modification

[claviska]

This was discussed during yesterday's contributor call. In short, source maps are a huge undertaking and incredibly difficult to keep in step as the compiler's code evolves and gets refactored.

I know this won't be a popular response, but the take away was that source maps are unlikely to be landing in Stencil any time soon. I'd like to see them too, but I understand why this has lingered for so long. It's not an easy feat and it can slow development down considerably moving forward.

[santicalvo]

@claviska That makes stencil almost unusable...

@eriklharper How do you see them like that? This is what I get after using dev tools to pretty print. Is there a way to set output to ES6 during development?

[eriklharper]

@eriklharper How do you see them like that?

You can inspect our setup here: https://github.com/Esri/calcite-components

[santicalvo]

@eriklharper

Ok... I see it's stencil 2. I cannot use stencil 2... someone decided that node could not be updated so I am stuck at 1.7...

[markcellus]

Yep and unfortunately this issue will be closed with no reason why just like the other issues. And they'll just tell us to open another one and hope that we don't follow through. At this point, my team is migrating to another web component library. I suggest you all do the same. The level of support for Stencil is lacking and it's clear they have no desire to prioritize such basic features.

[claviska]

Yep and unfortunately this issue will be closed with no reason why just like the other issues

As stated above, during the December 2nd contributor call, the consensus was that "source maps are a huge undertaking and incredibly difficult to keep in step as the compiler's code evolves and gets refactored."

So the reason is the amount of effort required to build and maintain this feature isn't currently worth the benefit that we as a small team receive from it. However, we welcome contributions and will gladly consider a PR for them if anyone has the time to work on it.