search

devpunks / snuggsi

snuggsi ツ - Easy Custom Elements in ~1kB
https://snuggsi.com
MIT License
395 stars 17 forks source link

Basic example: Getting "TypeError: Illegal constructor" #218

Open joallard opened 3 years ago

joallard commented 3 years ago

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

brandondees commented 3 years ago

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.

joallard commented 3 years ago

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?

snuggs commented 3 years ago

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

joallard commented 3 years ago

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!

snuggs commented 3 years ago

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

brandondees commented 3 years ago

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.

AndrewPerson commented 2 years ago

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.