Giters

devpunks / snuggsi

snuggsi ツ - Easy Custom Elements in ~1kB

Home Page:https://snuggsi.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Basic example: Getting "TypeError: Illegal constructor"

joallard opened this issue · comments

commented

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

commented

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.

commented

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?

commented

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. 😳🤔

commented

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!

commented

@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.

commented

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.

commented

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.