search

guocaoyi / create-chrome-ext

🍺 Scaffolding your Chrome extension! Boilerplates: react \ vue \ svelte \ solid \ preact \ alpine \ lit \ stencil \ inferno \ vanilla
MIT License
1.42k stars 106 forks source link

Svelte Css Hotreload does not work #60

Open Autumnlight02 opened 8 months ago

Autumnlight02 commented 8 months ago

Basically When you create a new svelte Ts project, add a App.svelte inside of the contentScript folder and append it via the content script to the body hte HTML Will work fine with hot reloads but the CSS inside of the .svelte file will lag behind one "css Reload". Basically it will lag behind one css update. Did test it extensivly and had someone else test it as well. The issue seems not vite related since a new vite svelte project works fine.

To see the latest css state you need to restart the dev server

Bug got introduced at Version v0.8.7

Update 2, probably narrowed it down to "@crxjs/vite-plugin": "^2.0.0-beta.19", update, version 2 seems to be really unstable and cause the issue for svelte and other frameworks. What's the solution here?

guocaoyi commented 8 months ago

@Autumnlight02 Did you fix it? I can't reproduce the issue? @0.9.1 

{
"devDependencies": {
    "@crxjs/vite-plugin": "^2.0.0-beta.19",
    "@types/chrome": "^0.0.246",
    "@sveltejs/vite-plugin-svelte": "2.4.6",
    "prettier": "^3.0.3",
    "prettier-plugin-svelte": "^3.0.3",
    "svelte": "^4.2.1",
    "svelte-preprocess": "^5.0.4",
    "tslib": "^2.6.2",
    "typescript": "^5.2.2",
    "vite": "^4.4.11"
  }
}
Autumnlight02 commented 8 months ago

I could not fix it, Want me to record a Video on how to cause the bug? Including project setup and execution? @guocaoyi

Autumnlight02 commented 7 months ago

@guocaoyi any updates on this?

guocaoyi commented 7 months ago

@Autumnlight02 Update your svelte version to 4.x；unable to hot reload, it seems to be a problem with the svelte official. https://github.com/sveltejs/template-webpack/pull/36 https://github.com/withastro/astro/issues/4388 so , update your svelte version.

create-chrome-ext just a boilerplate. this's a lightweight scaffolding that doesn't have any unauthorized plug-ins or modifications

Autumnlight02 commented 6 months ago

@guocaoyi I've done all of that but the issue still presists with the latest version :c