CODEWITHSUNDEEP
javascripttypescriptdebuggingastrojs
rickb
rickb

Reputation: 671

Astro component template script debugging and lang issue

(I posted this in the discord group but got crickets...)

I'm having to use scripts in the html template (of a component) for access to the DOM/Window

If I use a bare <script> tag, astro squirrels it away somewhere and I can't get to it in the debugger, nor do console.log() statements produce anything (that I can see, anyway...).

If I use <script is:inline> then it becomes part of the DOM and I can debug it in the browser. Well and good. Except that every instance of the component instantiates an instance of the script on the page, so I get multiple <script> tags. And that's a problem because they interfere with each other.

Going back to the bare <script> tag solves that problem because astro makes it a module. Good, I like it.

But, beyond debugging, the next problem is that the bare <script> tag expects typescript, and using the <script is:inline> form only expects javascript. So, to develop and debug, I have to write the script in javascript and then to convert to the bare <script> tag, I have to put in TS types to remove the syntax errors. (It does work without typing, but it's ugly).

(I did try <script lang: typescript> but, that's not supported.)

So, what are you all doing for template <script> tags to get around this?

Upvotes: 0

Views: 582

Answers (1)

rickb
rickb

Reputation: 671

Apparently, I can now put a debugger; statement in the bare tag and it will stop in the browser with typescript.

Seemed like I tried that before, but it didn't work.

Oh, well. It's working, now.

Upvotes: 0

Related Questions