Closed Malix-Labs closed 1 year ago
Comment Reply in https://github.com/Tampermonkey/tampermonkey/issues/1717 from @7nik:
⋯ I had a really good experience using vite-plugin-monkey to develop and build a userscript (TS + Svelte in my case)
Hello again @7nik! Do you think you could support me?
What are you trying to achieve by using SvelteKit in the userscript? It is a full-stack framework. SvelteKit is supposed to run on a server. For making a userscipt with an advanced UI you need just Svelte (maybe with some router) but not SvelteKit.
@lisonge
you should make the order of vite plugin monkey is last one
It throws me another build error
@7nik
Using SvelteKit in the userscript?
Nope, I don't use SvelteKit in my userscript, I host the userscript on a svelte website (so only basically making it be downloadable from my website). Nothing svelte related does takes part in how I dev my userscript.
If you are trying to build the website and all the userscripts in one command, I'm not sure it's possible - they conflict. Maybe you need two configs - one for the website, and another for userscripts. And sequentially run to builds.
@Malix-Off
vite-plugin-monkey can not work with vite ssr plugin such as SvelteKit
@Malix-Off
if you want to build your SvelteKit Application and userscript at the same time
add new file named vite.user.config.ts
to your working directory
import { defineConfig } from 'vite';
import monkey from 'vite-plugin-monkey';
export default defineConfig({
plugins: [
monkey({
entry: 'external/script/user.ts',
// .... your config
}),
],
});
change the build script in package.json to vite build && vite --config vite.user.config.ts
then run pnpm run build
or npm run build
Oh okay, then I guess I will have to define multiple config build and make them run subsequently after running npm run build
. it makes sense. I will try that and keep y'all in touch
@lisonge's answer partially worked
But unfortunately, the fact that it is two different builds remove the Tampermonkey's metadata comments
So it is not really working properly.
Comment Reply from @lisonge:
vite-plugin-monkey can not work with vite ssr plugin such as SvelteKit
Could you explain why? It doesn't really makes sense to me why it couldn't work as it's a regular build with not much happening at the pluggin level (at least compared to how SvelteKit interacts with the build)
default:
return userscriptBuildConfig && sveltekitBuildConfig;
Note this code returns only the second config. It does not run two builds.
For me, it looks like SvelteKit treated the userscript as a regular script.
Try to output the userscript into the static
folder.
default: return userscriptBuildConfig && sveltekitBuildConfig;
Note this code returns only the second config. It does not run two builds.
You're right. Do you know how to make it run both?
For command npm run build
with the script build
being "vite build"
?
For me, it looks like SvelteKit treated the userscript as a regular script.
As it should be, but at the same time not very much since as @lisonge said:
vite-plugin-monkey can not work with vite ssr plugin such as SvelteKit
Try to output the userscript into the
static
folder.
May I ask you where should that be inputed in the code I provided?
For command
npm run build
with the scriptbuild
being"vite build"
?
Here is my scripts
values in package.json
:
"scripts": {
"dev": "vite dev",
"build": "tsc && vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
"lint": "prettier --plugin-search-dir . --check .",
"format": "prettier --plugin-search-dir . --write ."
},
Basically I used npx vite build -m INPUT_MODE
A && B
is the same as A ? B : A
and as objects always are truthy, it will return B
.
Put the static
folder into the root of your project folder. It's the default folder for assets in SvelteKit. The files will be available as site.name/filename.extension
on the site. You can add subfolders there as well.
A && B
is the same asA ? B : A
and as objects always are truthy, it will returnB
.
You're right, i'm very dumb, thx about that.
the
static
folder into the root of your project folder.
What should I put inside it? The raw ts userscript, or the built output one?
Remember I need the ts userscript to be built with vite; idk how vite works, but as it's a "static
" directory, I'm afraid it doesn't build the file. (or do you mean that it is exactly what we want so we have to make the first build be the userscript output in static
, then we build the website directly so it doesn't remove comments?)
Out the compiled userscripts into the static
so during the website building, it will just copy them without any modifications.
Out the compiled userscripts into the
static
so during the website building, it will just copy them without any modifications.
Okay, so if I understand correctly, I have to do two builds:
static
static
Or would the second build be unnecessary in case of a usersctipt change, because the references path remains the same, and only a deploy would be needed to push the static files changes to production?
- With reference to the path to the built userscript in
static
Not sure I got it right.
For a file like static/some-name.script.user.js
, you reference it as site.name/some-name.script.user.js
.
The rest is correct.
Technically you can skip the second build if there are no changes on the site and just update userscripts.
Not sure I got it right.
For a file like
static/some-name.script.user.js
, you reference it assite.name/some-name.script.user.js
.
I was talking about the reference as file path, not the URL ahah, but ye, I got it :)
Technically you can skip the second build if there are no changes on the site and just update userscripts.
Nice, that's what I thought in my second thought. Imma try to develop that then. Thanks a lot for your help, I really do appreciate your time!
@Malix-Off
Could you explain why? It doesn't really makes sense to me why it couldn't work as it's a regular build with not much happening at the pluggin level (at least compared to how SvelteKit interacts with the build)
The construction mode and configuration of sveltekit
and vite-plugin-monkey
conflict
just like make vite both build browser web app
and ssr app
in the same config
I now have yet another problem with this double config method: #54
Issue
I am developing a SvelteKit website which in I do host my Tampermonkey's userscripts. I can't manage to make the plugin be built after I added my svelte website to the repo.
adding
in the
build
vite config option doesn't work as SvelteKit: