snuggsi Basic example: Getting "TypeError: Illegal constructor"

Hello, first time user trying this out here! The project seems very opinionated on convention-over-configuration and providing simple APIs, which I like and believe JS sorely needs. I'm hoping to find a project I like here.

Here's what I got on this first/second try:

Expected Behavior

No error, custom element is instantiated correctly

Current Behavior

Error is thrown "TypeError: Illegal constructor"

Possible Solution

I'm not really sure how Element works.

I have also tried using Snuggsi on ObservableHQ, the Element override seems to be wreaking havoc on the page. Is there a slightly more explicit invocation, such as new CustomElement(name) ?

Steps to Reprod(uce)

https://codesandbox.io/s/snuggsi-t89jo?file=/src/index.js

I'm hoping I didn't do anything stupid

Context

Trying out Snuggsi

Your Environment

Firefox 87 on Mac

Feb 26 '21 01:02 joallard

Hey, looks like you didn't import snuggsi anywhere, so that interface you're using isn't defined. Poking at this example a little, I realize that snuggsi apparently isn't built to export modules like you're probably used to, as it comes from a bit more old-school origin.

I'm hoping @snuggs can comment on what kind of approach works in that sort of module-scoped context or whether we can expect an update to the shim to make it work.

Mar 22 '21 05:03 brandondees

Thanks for the reply. I'm actually pretty much old school and am only slowly warming up to the npm ecosystem. (I'll just say i'm not a huge fan of the mainstream JS world)

Here's what I have in the body tag:

<body>
	<script nomodule src=//unpkg.com/snuggsi></script>

	<!-- <div id="app"></div> -->
	<app-ticket>
		Foo
		{foo} X
	</app-ticket>


	<script src="src/index.js">
	</script>

</body>

Do I need anything else for the import?

Mar 22 '21 06:03 joallard

Do I need anything else for the import? @joallard

No that should be it. I'll start working though your repro and we can get it up to modern standard. Just like you I feel TECHNICALLY when peolle are having this problem it is not snuggsi's "fault" as all we should need is a browser to run our code. But you don't know what you don't know. There is a few steps we transpile down to _(see bin/README.md. Perhaps we can add a module step thst people can hook into. Your thoughts...

P.S. welcome aboard (check your email) 😎

P.P.S. thanks @brandondees . Surprised I didn't get a notification for this one. 😳🤔

Mar 22 '21 08:03 snuggs

Thanks for the invitation! I have a bit of limited energy right now, but I'm happy to bring and help what I can.

Indeed, I wasn't expecting a package either, but I'm happy to provide my perspective as a newcomer if that can help with documentation. I have yet to learn more about this library, but I'm looking forward to know if there's a good way to solve this!

Mar 22 '21 23:03 joallard

@joallard more just a badge. Anybody that improves the project shouldn't have me standing in the way. Including issues :-) Welcome!

I'll do most of the legwork. Will ping you.

Mar 23 '21 22:03 snuggs

If your idea was to use this in the regular old fashioned way, I suspect your sandbox's babel compiler settings are just getting in the way then by trying to module-encapsulate your code which you meant to run in the top level context. And/or also the linting / precompile stuff.

Mar 24 '21 02:03 brandondees

Sorry this is such a long time after the last post, but I've found that removing the "nomodule" attribute on the script seems to fix it.

Jan 05 '22 03:01 AndrewPerson