https://www.plasmo.com/ logo
Join Discord
Powered by
Using Svelte with Svelte Materialify in popup
# support-framework
a
Using Svelte with Svelte Materialify in popup
How do I import Svelte & Svelte Materialify? If I try to import the 
.ts
using a 
popup.html
, I need to import a stylesheet that doesn't exist yet
l
I read their documentation, you just need to use their svelte preprocessors no?
a
What do I put in the HTML?
l
I don't think you need to put in anything?
from the way I see it, svelte preprocess will handle the style injection for u
btw, that library seems to be deprecated
just side note, seems like author move to a new one
a
It is deprecated, but on the other hand, the creator doesn't seem to have made any progress with his replacement library, therefore I'm still using the deprecated one
How do I specify 
popup.ts
? My goal is to have the state ready before the popup loads up
l
I don't think it makes sense to pass state to the root. You can just render and async fetch state after
a
To me it does make sense, to not have the popup's UI change too much on initial loading
l
At the cost of having user wait until your UI mount
So they will see blank
a
For example, dark mode - the user using dark mode wouldn't want to see the popup loading with white mode and after a brief moment see it changing to dark mode, but rather he'd want the popup to simply load as dark mode
l
You can have that behavior by not showing anything on load, fetch state, then render
It will be the exact same
The idea of plasmo is you can now solve this problem with the UI library, not relying on the upstream js stuff
a
Not really, since the default behavior of a web page is to load with a white background
l
Solve it with a svelte
a
I discovered a strange issue When I have:
Copy code
ts
import { Button, Icon } from "svelte-materialify";
Copy code
html
<Button>
  <icon />
</Button>
an error could be thrown: However, having the following:
Copy code
html
<Icon />
<Button></Button>
wouldn't cause the error to be thrown
l
Is the 2nd one at root? I'm pretty sure every jsx template will require 1 single root
a
It's not JSX though, it's Svelte
l
The templating inside is still a form of jsx tho. What happens if you wrap those twos in a div?
Yup, you have one single root component
a
It isn't a form of JSX, Svelte is not JSX
l
Btw the icon is lowercase, are you sure that's not the issue?
a
I typed it by hand here In my code it is indeed pascal-cased
l
I wonder... What does your svelte config look like?
a
Everything is in that repo The config is contained in 
rollup.config.js
The thing is, the issue has only been existing since I tried Plasmo
That's so goddamn weird I literally compared the output HTML and the HTML from the Rollup-equivalent extension and they're the same As regards the JS, I looked up the same snippet where I received the error and both Plasmo's JS and the Rollup-equivalent JS contain it I have no idea what went wrong
l
Hehhhh
a
For a reference, I pushed to another branch https://github.com/avi12/youtube-like-dislike-shortcut/tree/plasmo If you can help me debug this, both to solve issues for me and for future Svelte developers, it'd be cool
What needs debugging in particular: In the bottom switch, switch it on & off and you'll trigger the error
l
Will take a look likely next week, I'm travelling atm xD
But yeah the fact that code is similar but issue diff is weird xd
I read thru the config while I was at the airport
Could it the case that your roll-up is using cjs, vs plasmo using mjs/esm
Maybe the API are incompatible for some reason?
PreviousNext
Powered by