svelte integration for vite
License: MIT License
Join svite discord
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
I'm having some bizarre issues with the latest 0.6.1, I'd previously (like 2 days ago) created a project with 0.6.0 and updated it to 0.6.1 and started getting some crazy errors, I spent a few minutes looking at it this evening and found I can repro with the templates as well:
npx svite create -ts -pm yarn my-first-svite-project
yarn dev
results in (I'm on windows):
[vite] Optimizable dependencies detected:
svelte/animate, svelte/easing, svelte/internal, svelte/motion, svelte/store, svelte/transition, svelte, svelte-hmr/runtime/proxy-adapter-dom, svelte-hmr/runtime/hot-api-esm
[vite] Dep optimization failed with error:
Could not load \node_modules\svelte\internal (imported by node_modules\svelte-hmr\runtime\svelte-hooks.js): ENOENT: no such file or directory, open 'C:\node_modules\svelte\internal'
[Error: Could not load \node_modules\svelte\internal (imported by node_modules\svelte-hmr\runtime\svelte-hooks.js): ENOENT: no such file or directory, open 'C:\node_modules\svelte\internal'] {
Seemingly it's resolving imports as though they are from root which on windows would be c:.
On a somewhat unrelated note, I see you removed esbuild, in 0.6.0 the esbuild module would pull down an esbuild.exe that lived in its node_modules dir. Every so often (I think when I'd kill the dev process) the executable would get magically deleted, I'd have to remove the esbuild node_modules dir and reinstall with yarn install --check-files
vite has an --ssr option that is already enabled in svite, but the output is untested/not useful right now.
Check out how this can be used to enable ssr.
svite hmr-test never completes on github action runner with windows
start github action run or if you have windows: npm run test -- --testNamePattern="svite hmr-test"
Properbly caused by the fact that svite.test.js wasn't written with cross-plattform compatibility in mind.
Todo: check path handling, especially around npm dependency path and any file manipulation
I would have expected process.env.NODE_ENV to be set to "production" when running svite build, but it seems like this is not happening, (at least inside tailwind.config.js), which breaks unused CSS removal for Tailwind
Default expected is "production":
-m, --mode [string] specify env mode >>>(default: "production")<<<
Doing svite build -m production still provides the same results
A temporary workaround is to do NODE_ENV=production svite build
$ ./node_modules/.bin/svite build --debug
vite:config env mode: undefined +0ms
vite:config env: {} +2ms
svite: adding svite plugin to vite +0ms
svite: disabling vue support in vite +56ms
Building for production...
svite: svelte config used for build {
format: 'esm',
generate: 'dom',
css: false,
emitCss: true,
extensions: [ '.svelte' ],
preprocess: [ { style: [AsyncFunction: style] } ],
onwarn: [Function: onwarn],
dev: true
} +81ms
svite: +1ms
vite:build:resolve /src/index.js --> /REPO/src/index.js +0ms
process.env.NODE_ENV: development
The issue is reproducible in the postcss-tailwind example straight out of the box
vite --debug flagIts not possible to do this svite --mode staging --debug
gives error: unknown option '--mode'
but you can do this svite build --mode staging --debug and it will load variables from .env.staging
It would be nice to have the dev mode working too
For Vite docs see: https://github.com/vitejs/vite#modes-and-environment-variables
see https://github.com/dominikg/site/blob/staging-svite/vite.config.js
basically vite fails to resolve the absolute import paths mdsvex is generating for layouts. i recommend you put all your layouts in a single directory eg /src/layouts, and generate an alias for each layout like in the code i linked.
i both create blank project by npx svite create and upgrade exist project package.json to svite 0.4.0 and vite 1.0.0-rc.4, test on windows 10 & macos, it seems since vite 1.0.0-rc.2 hot reload not works on macos.
npx svite create my-first-svite-project
cd my-first-svite-project
npm run devwhen i change App.svelte content, the page refreshed, but nothing update
browser log
[vite]: js module hot updated: /src/App.svelte
svite log(svite -d)
username@MacBook-Pro-3 ~/w/s/my-first-svite-project> npm run dev 130 master!
> [email protected] dev /Users/username/wsk/side_projects/my-first-svite-project
> svite -d
vite:config env mode: development +0ms
vite:config env: {} +3ms
svite: adding svite plugin to vite +0ms
svite: disabling vue support in vite +58ms
svite: vite config {
env: {},
debug: true,
config: undefined,
port: 3000,
open: undefined,
logLevel: 'debug',
mode: 'development',
name: 'svite',
rollupInputOptions: { plugins: [ [Object], [Object], [Object], [Object] ] },
transforms: [ { test: [Function: test], transform: [AsyncFunction: transform] } ],
configureServer: [ [AsyncFunction (anonymous)] ],
alias: {},
define: {},
resolvers: [],
vueCompilerOptions: {},
vueTransformAssetUrls: {},
vueCustomBlockTransforms: {},
rollupOutputOptions: undefined,
enableRollupPluginVue: false,
optimizeDeps: {
include: [
'svelte/animate',
'svelte/easing',
'svelte/internal',
'svelte/motion',
'svelte/store',
'svelte/transition',
'svelte',
'svelte-hmr/runtime/esm',
'svelte-hmr/runtime/proxy-adapter-dom',
'svelte-hmr/runtime/hot-api-esm'
],
exclude: [ 'svelte-hmr' ]
}
} +3ms
[svite] applied changes to svelte config used for dev.
{ css: true, emitCss: false }
svite: svelte config used for dev {
format: 'esm',
generate: 'dom',
css: true,
emitCss: false,
extensions: [ '.svelte' ],
onwarn: [Function: onwarn],
hot: {
optimistic: true,
noPreserveState: true,
compatVite: true,
absoluteImports: false
},
dev: true
} +7ms
svite: +1ms
vite:optimize Hash is consistent. Skipping. Use --force to override. +0ms
svite: command success +31ms
[svite] Port 3000 is in use, trying another one...
vite:optimize Hash is consistent. Skipping. Use --force to override. +105ms
[svite] Dev server running at:
[svite] > Local: http://localhost:3001/
[svite] > Network: http://192.168.0.106:3001/
svite: server ready in 146ms. +104ms
vite:hmr / imports /src/index.js +0ms
vite:rewrite (skipped) / +0ms
vite:rewrite /src/index.js: rewriting +55ms
vite:rewrite "./App.svelte" --> "/src/App.svelte?import" +1ms
vite:hmr /src/index.js imports /src/App.svelte +58ms
vite:rewrite (skipped) /vite/client +33ms
vite:hmr ws client connected +44ms
svite: transform cache set /Users/username/wsk/side_projects/my-first-svite-project/src/App.svelte +4s
vite:rewrite /src/App.svelte: rewriting +64ms
vite:rewrite "svelte/internal" --> "/@modules/svelte/internal.js" +0ms
vite:hmr /src/App.svelte imports /@modules/svelte/internal.js +52ms
vite:rewrite "svelte-hmr/runtime/hot-api-esm.js" --> "/@modules/svelte-hmr/runtime/hot-api-esm.js" +0ms
vite:hmr /src/App.svelte imports /@modules/svelte-hmr/runtime/hot-api-esm.js +0ms
vite:rewrite "svelte-hmr/runtime/proxy-adapter-dom.js" --> "/@modules/svelte-hmr/runtime/proxy-adapter-dom.js" +0ms
vite:hmr /src/App.svelte imports /@modules/svelte-hmr/runtime/proxy-adapter-dom.js +1ms
vite:hmr rewriting /src/App.svelte for HMR. +0ms
vite:hmr /src/App.svelte self accepts +18ms
vite:resolve (optimized) svelte/internal.js -> node_modules/.vite_opt_cache/svelte/internal.js +0ms
vite:resolve (optimized) svelte-hmr/runtime/hot-api-esm.js -> node_modules/.vite_opt_cache/svelte-hmr/runtime/hot-api-esm.js +1ms
vite:resolve (optimized) svelte-hmr/runtime/proxy-adapter-dom.js -> node_modules/.vite_opt_cache/svelte-hmr/runtime/proxy-adapter-dom.js +0ms
vite:rewrite /@modules/svelte-hmr/runtime/hot-api-esm.js: rewriting +30ms
vite:rewrite "../../svelte/internal.js" --> "/@modules/svelte/internal.js" +1ms
vite:hmr /@modules/svelte-hmr/runtime/hot-api-esm.js imports /@modules/svelte/internal.js +12ms
vite:rewrite /@modules/svelte/internal.js: no imports found. +5ms
vite:rewrite /@modules/svelte-hmr/runtime/proxy-adapter-dom.js: no imports found. +1ms
[vite:hmr] /src/App.svelte hot updated due to change in /src/App.svelte.
vite:hmr update: {
vite:hmr "type": "multi",
vite:hmr "updates": [
vite:hmr {
vite:hmr "type": "js-update",
vite:hmr "path": "/src/App.svelte",
vite:hmr "changeSrcPath": "/src/App.svelte",
vite:hmr "timestamp": 1596328608158
vite:hmr }
vite:hmr ]
vite:hmr } +5s
vite:rewrite /src/App.svelte: cache busted +5s
svite: transform cache get /Users/username/wsk/side_projects/my-first-svite-project/src/App.svelte +5s
vite:rewrite /src/App.svelte: rewriting +8ms
vite:rewrite "svelte/internal" --> "/@modules/svelte/internal.js" +1ms
vite:hmr /src/App.svelte imports /@modules/svelte/internal.js +11ms
vite:rewrite "svelte-hmr/runtime/hot-api-esm.js" --> "/@modules/svelte-hmr/runtime/hot-api-esm.js" +0ms
vite:hmr /src/App.svelte imports /@modules/svelte-hmr/runtime/hot-api-esm.js +0ms
vite:rewrite "svelte-hmr/runtime/proxy-adapter-dom.js" --> "/@modules/svelte-hmr/runtime/proxy-adapter-dom.js" +0ms
vite:hmr /src/App.svelte imports /@modules/svelte-hmr/runtime/proxy-adapter-dom.js +0ms
vite:hmr rewriting /src/App.svelte for HMR. +4ms
vite:hmr /src/App.svelte self accepts +12ms
username@MacBook-Pro-3 ~> node --version
v14.5.0
username@MacBook-Pro-3 ~> npm --version
6.14.5
After installing svelte-spa-router i got an error when running npm run dev:
at Object.parse ($project/node_modules/es-module-lexer/dist/lexer.cjs:1:406)
at $project/node_modules/vite/dist/node/optimizer/index.js:234:54
at Array.filter (<anonymous>)
at resolveQualifiedDeps ($project/node_modules/vite/dist/node/optimizer/index.js:199:32)
at Object.optimizeDeps ($project/node_modules/vite/dist/node/optimizer/index.js:64:37)
at async Server.server.listen ($project/node_modules/vite/dist/node/server/index.js:89:13)
at async runServe ($project/node_modules/svite/bin/svite.js:148:3)
at async Command.<anonymous> ($project/node_modules/svite/bin/svite.js:378:7)
at async Promise.all (index 0)
at async main ($project/node_modules/svite/bin/svite.js:476:3)
Looks like the vite optimizer is unable to handle dependancies containing *.svelte files.
Creating a vite.config.js with:
module.exports = {
optimizeDeps: {
exclude: ['svelte-spa-router'],
},
};Solved the issue.
It would be nice if svite could detect this error and provide a "use optimizeDeps for x in vite.config.js" hint, or disable the optimization automatically.
In vite, you can pass a rootDir on cli.
For svite, it should be there aswell.
Bonus: Allow specifying a path to a .svelte file and svite automatically creates a minimal shell embedding that.
svite App.svelte would then be possible.
I am trying to use the @tensorflow/tfjs npm package, but when running svite it will fail with an Dep optimization error.
Adding module.exports = { optimizeDeps: { allowNodeBuiltins: ["seedrandom"] } } in vite.config.js does not help.
When installing @tensorflow/tfjs in vite (original) it will work without the use of vite.config.js out of the box.
npm i --save @tensorflow/tfjs && npm run dev
Dependency svelte-svite is attempting to import Node built-in module crypto.
This will not work in a browser environment.
Imported by: crypto?commonjs-external
Tip:
Make sure your "dependencies" only include packages that you
intend to use in the browser. If it's a Node.js package, it
should be in "devDependencies".
If you do intend to use this dependency in the browser and the
dependency does not actually use these Node built-ins in the
browser, you can add the dependency (not the built-in) to the
"optimizeDeps.allowNodeBuiltins" option in vite.config.js.
If that results in a runtime error, then unfortunately the
package is not distributed in a web-friendly format. You should
open an issue in its repo, or look for a modern alternative.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `svite`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.```
pnpm package manager can not complete progress install packages from command pnpm i use any templates shipped inside svite cli.
when run pnpm i progress run almost done but report error at last:
> pnpm i
WARN svite: [email protected] requires a peer of rollup@>=1.20.0 but none was installed.
WARN svite > @rollup/plugin-node-resolve: @rollup/[email protected] requires a peer of rollup@^1.20.0||^2.0.0 but none was installed.
WARN svite: @rollup/[email protected] requires a peer of rollup@^1.20.0||^2.0.0 but none was installed.
WARN svite: @rollup/[email protected] requires a peer of rollup@^1.20.0||^2.0.0 but none was installed.
WARN svite > rollup-plugin-svelte-hot > nollup: @rollup/[email protected] requires a peer of rollup@^1.20.0||^2.0.0 but none was installed.
WARN svite > rollup-plugin-svelte-hot > rollup-plugin-hot-nollup: @rollup/[email protected] requires a peer of rollup@^1.20.0||^2.0.0 but none was installed.
WARN svite: [email protected] requires a peer of rollup@>=0.60.0 but none was installed.
WARN svite > vite: [email protected] requires a peer of @vue/compiler-sfc@* but version 3.0.0-rc.6 was installed.
Packages: +454
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are cloned from the content-addressable store to the virtual store.
Content-addressable store is at: /Volumes/Storage/.pnpm-store/2/v3
Virtual store is at: node_modules/.pnpm
Resolving: total 454, reused 424, downloaded 30, done
node_modules/.pnpm/[email protected]/node_modules/esbuild: Running postinstall script, done in 418ms
node_modules/.pnpm/[email protected]_7b3ac235c38708506431dfb0207c45b5/node_modules/svelte-preprocess: Running postinstall script, done in 15ms
node_modules/.pnpm/[email protected]_79bfda105d439486034fbbb575fb8476/node_modules/svelte-preprocess: Running postinstall script, done in 13ms
node_modules/.pnpm/[email protected]_7b3ac235c38708506431dfb0207c45b5/node_modules/svelte-preprocess: Running postinstall script, done in 14ms
ERROR ENOENT: no such file or directory, chmod '<profile folder>/node_modules/.pnpm/[email protected]/node_modules/nanoid/bin/nanoid.cjs'
at pnpm/nanoidthis issue not happend if remove node_modules and reinstall packages use npm npm install or yarn.
step to reproduction:
npm i -g svitesvite create -t svelte-preprocess-auto -ts -si -sg -sc test-projecttest-project run pnpm install pnpm i.Describe the feature
An example to be used as a template for create that creates a svelte component library project
A Usecase
The default svelte component library template is very basic.
Library developers would benefit from svite dx.
Alternatives
Leave it to the users to figure it out
Additional context
Think about commands.
Is HMR the only difference between vite-plugin-svelte and svite? I haven't used much of either, but I haven't spotted any other significant differences.
cc @intrnl
yarn, yarn2, pnpm
requires work for svelte-hmr. needs an alias to properly resolve at dev. see vite-plugin-svelte
add -pm --packagemanager to create command
import { TabsTransition } from "@sveltech/routify/runtime/decorators";
fails with:
[vite] Failed to resolve module import "@sveltech/routify/runtime/decorators". (imported by /src/pages/example/transitions/tabs/_reset.svelte)
npx svite create -t routify-mdsvex testing-svitenpm run devlocalhost:3000/example/transitions/tabs/[vite] Failed to resolve module import "@sveltech/routify/runtime/decorators". (imported by /src/pages/example/transitions/tabs/_reset.svelte)TypeError: Cannot read property 'last' of null at Object.$$self.$$.update (http://localhost:3000/@modules/@sveltech/routify/runtime/decorators/BaseTransition.svelte?import:248:41)Describe the feature
Error details are currently suppressed. Logged errors should print compiler error details.
Unsure if this issue should be fixed here, in rollup-plugin-svelte-hot or in vite itself.
A Usecase
Errors are almost useless right now. For example, if a closing angle bracket is left out, the error logged is
ParseError: Expected >
at error$1 (/Users/mgutz/try/routify-mdsvex/node_modules/svelte/compiler.js:15583:20)
at Parser$1.error (/Users/mgutz/try/routify-mdsvex/node_modules/svelte/compiler.js:15659:10)
at Parser$1.eat (/Users/mgutz/try/routify-mdsvex/node_modules/svelte/compiler.js:15673:19)
at tag (/Users/mgutz/try/routify-mdsvex/node_modules/svelte/compiler.js:14732:13)
at new Parser$1 (/Users/mgutz/try/routify-mdsvex/node_modules/svelte/compiler.js:15618:22)
at parse$3 (/Users/mgutz/try/routify-mdsvex/node_modules/svelte/compiler.js:15749:21)
at compile (/Users/mgutz/try/routify-mdsvex/node_modules/svelte/compiler.js:26871:18)
at /Users/mgutz/try/routify-mdsvex/node_modules/rollup-plugin-svelte-hot/index.js:352:22
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async Object.transform (/Users/mgutz/try/routify-mdsvex/node_modules/svite/index.js:223:24)There is no detail about the source causing the issue. If I patch rollup-plugin-svelte-hot in node_modules to display the actual error, the error is useful
CompileError [ParseError]: Expected >
at error$1 (/Users/mgutz/try/routify-mdsvex/node_modules/svelte/compiler.js:15583:20)
at Parser$1.error (/Users/mgutz/try/routify-mdsvex/node_modules/svelte/compiler.js:15659:10)
at Parser$1.eat (/Users/mgutz/try/routify-mdsvex/node_modules/svelte/compiler.js:15673:19)
at tag (/Users/mgutz/try/routify-mdsvex/node_modules/svelte/compiler.js:14732:13)
at new Parser$1 (/Users/mgutz/try/routify-mdsvex/node_modules/svelte/compiler.js:15618:22)
at parse$3 (/Users/mgutz/try/routify-mdsvex/node_modules/svelte/compiler.js:15749:21)
at compile (/Users/mgutz/try/routify-mdsvex/node_modules/svelte/compiler.js:26871:18)
at /Users/mgutz/try/routify-mdsvex/node_modules/rollup-plugin-svelte-hot/index.js:352:22
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async Object.transform (/Users/mgutz/try/routify-mdsvex/node_modules/svite/index.js:223:24) {
code: 'unexpected-eof',
start: { line: 9, column: 18, character: 198 },
end: { line: 9, column: 18, character: 198 },
pos: 198,
filename: '/Users/mgutz/try/routify-mdsvex/src/App.svelte',
frame: ' 7: <button class="border-2 border-black p-4" >CLICK ME</button>\n' +
' 8: \n' +
' 9: <Router {routes} /\n' +
' ^'
}The source location and frame details the cause.
See #14
docs: https://github.com/sveltejs/rollup-plugin-svelte#pkgsvelte
Idea:
add resolver to vite that either uses resolveId of rollup-plugin-svelte-hot directly, or reimplement the relevant part of resolving via pkg.svelte
https://svelte.dev/blog/svelte-and-typescript
svite create commandnpm run build
> vite build
vite v0.20.10
Generated an empty chunk: "index"
[write] dist/_assets/index.553e494c.js 0.00kb, brotli: 0.00kb
[write] dist/_assets/style.bba68bf6.css 0.00kb, brotli: 0.00kb
[write] dist/index.html 0.80kb, brotli: 0.34kb
Build completed in 0.54s.It's properbly rollup being very aggressive, shaking away everything. but why.
index.js is referenced by index.html and it exports app, so it should work (and does work in a bigger project of mine)
After updating to latest, the minimal example and others do not hot update properly when updating an imported component.
The example (and my project) were working with vite betas.
Start with examples/minimal
Create a Hello.svelte with content
<sript>
export let name;
</script>
<h1>Hello {name}!</h1>Use the component in App.svelte
<script>
import Hello from './Hello.svelte'
</script>
<Hello name="Paddington" />Run the server. On initial page load, everything works. Now edit Hello.svelte to use a different message say <h1>Hello again {name}!</h1>. The browser console
Loading module from “http://localhost:3000/src/App.svelteimport=?t=1595460394958” was blocked because of a disallowed MIME type (“text/plain”). localhost:3000
Loading failed for the module with source “http://localhost:3000/src/App.svelteimport=?t=1595460394958”. localhost:3000:4:1
TypeError: error loading dynamically imported module client:67:17
warnFailedFetch http://localhost:3000/vite/client:67
updateModule http://localhost:3000/vite/client:285
[hmr] Failed to reload /src/App.svelteimport=. This could be due to syntax errors or importing non-existent modules. (see errors above) client:69:13
warnFailedFetch http://localhost:3000/vite/client:69
updateModule http://localhost:3000/vite/client:285
[vite]: js module hot updated: /src/App.svelteimport= client:297:17
The browser is receiving the udpate but doesn't know what to do with it.
macOS 10.15.4
svite 0.3.1
node: 12.18.2
Currently svite uses 'emitCss: false' during dev to ensure css updates are properly applied. This causes changes in css to trigger a hmr reload of the whole component. while it would be enough to just replace the css.
commanderjs does not parse value of --foo [boolean] options into a boolean. As such svite dev --hot false does not lead to options.hot === false
pass false as value for any boolean option on cli
WORKAROUND: passing an empty string as option value is evaluated as false svite dev --foo ''
Discover this project today! Congratulations! It's amazing!
Can I ask you why svelte and svelte-hmr are in the package.json's dependencies and not in the dev-dependencies?
Thank you.
Possible conflict with page router. Upon saving, error.
Too complex to easily create a code snippet.
On initial load, page renders correctly with no errors. Upon edit and save, I get this error:
[vite] got js update notification for "/src/pages/Welcome.svelte" but no client callback was registered. Something is wrong.
I opened this here: vitejs/vite#813.
I'm trying to use flatpickr in a project where I'm already using Svite.
When I try to import a l10n file like this:
import { French } from 'flatpickr/dist/l10n/fr.js'as suggested in docs for ES modules then Vite is going crazy with this error:
Uncaught (in promise) SyntaxError: The requested module '/@modules/flatpickr/dist/l10n/fr.js' does not provide an export named 'French'I thinks we should write some docs about this because I know many people who have abandoned the use of this project (vite and svite) due to these problems which are not immediately addressable.
Can we write something about it?
vite version: "vite": "1.0.0-rc.4" / "svite": "0.6.0"Ive clone svite cd to examples/typescript/routify-mdsvex
yarn && yarn dev
it runs ok but when you visit the site , and click on link mdsvex
it wont show the page and a console error log this
Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:3000/src/pages/mdsvex.svx?import
The one file setup for plugin / cli worked to get started. As they grow it becomes a pain to manage.
Setup a proper directory structure and break files apart.
While you're add it, think about moving to ts, and provide dist / d.ts in npm package
Describe the feature
As far as I can tell, it's currently not possible to import an uncompiled svelte component from node_modules. This is supported by rollup-plugin-svelte, as described here - https://github.com/sveltejs/rollup-plugin-svelte#pkgsvelte.
A Usecase
This would allow users to avoid duplication of code and split projects into separate modules.
Alternatives
Importing the compiled components should work but this has disadvantages in a svelte project.
Additional context
For svelte packages, svite should import the uncompiled rather than the compiled source code if both are linked in the package.json.
Default values defined by svite CLI options parsing (via Commander.js) overwrite equivalent values defined in vite.config.js.
// vite.config.js
module.exports = {
assetsDir: '',
};svite buildSets assetsDir option to _assets.
Removing the default values (and falling back to vite's defaults) with Commander.js has the consequence of setting any omitted option to undefined, so these will need to first be removed from the object merged into the config object resolved by vite's.
hello, thank you for the the amazing work, I need some help integrating Routify. i have no idea where to start from since i dont understand how the different tools work together.
I forgot to mention, I'm using the postcss-tailwind example.
Lets see who's got the fastest hot module updates in github town in 3 easy steps
npx degit dominikg/svite/examples/hmr-benchmark svite-bench && cd svite-bench && npm i npx degit dominikg/svite/examples/hmr-benchmark svite-bench ; cd svite-bench ; npm i node benchmark --headless --gif # --gif only works with ImageMagick 'convert' in path.Bragging rights.
Go read the code
benchmark supports the following arguments:
--headless - render headless
--gif - create a gif in ./dist (requires ImageMagick 'convert' in path)
--resultfile - write stats to a timestamped file
--throttle X - wait X milliseconds between writes to the same file
--help,-h - print this message
Sorry, ImageMagick convert binary has to be available in path
The benchmark writes to the same file in very short intervals. sometimes so short, that the update watcher misses a write and then the process gets stuck as benchmark waits for an update to complete before writing the next step. It automatically adds a throttle to prevent this which increases 10ms every time it gets stuck. You can prevent this dance by providing a throttle argument at start
Describe the feature
Use something like inquirerjs to provide interactive prompts for options in cli thet were not provided but should be chosen by the user
git / npm init for example. Also template, other options like package-manager once available etc.
Describe the feature
Make it possible to configure multiple inputs for rollup.
A Usecase
Rollup allows it to build multiple bundles from several different unrelated inputs at once. It would be great to have this option for code reuse.
Describe the feature
When I npm run dev Svite says to me:
[vite] Optimizable dependencies detected:
svelte/animate, svelte/easing, svelte/internal, svelte/motion, svelte/store, svelte/transition, svelte, svelte-hmr/runtime/proxy-adapter-dom, svelte-hmr/runtime/hot-api-esmCan you write something about it in docs?
Reactive state not maintained during hot replacement.
Using Svite template app (yarn svite create svite-app) as a basis, and mimicking Vite's own template app:
<script>
let count = 0;
</script>
<p>edit me</p>
<button on:click={() => count++}>count is: {count}</button>count is not maintained between hot update.
vite-plugin-svelte manages this – albeit only up to Vite 1.0.0-rc.1, after which a change with Vite is breaking.
In Readme we have this option: https://github.com/dominikg/svite#svelte which is missing in above table.
Importing a type or interface from a ts file under src/ and using it throws a error in browser console:
Uncaught (in promise) SyntaxError: import not found: Layout
Vite is obviously not including the export
npm i examples/typescript/routify-mdsvex exampleexport type LayoutMode = 'grid' | 'list'<script lang="ts">
import { LayoutMode } from '../appstate';
let test: LayoutMode = 'grid';
</script>
<p>layout: {test}</p>npm run devDescribe the feature
remove svite config "svelte" option in favor or svelte.config.js
A Usecase
Promote use of svelte.config.js
Reduce amount of options to keep documentation and api surface in check.
Currently vite is a peer dependency with a liberal version range.
npx svite App.svelteFirst off awesome work with posting these template!
One issue I see is that only the code within the onMount function works. For example: I was using a d3 charting function outside the script plot(data) and call it inside onMount. Any changes made to the plot function is not reflected after save (hmr). However when I move the plot function inside the onMount function then changes made to the plot function is reflected. I understand that when the component is built the functions outside are run only once but this is not easy to for development testing. Coming from Vue the functions outside the mounted() function also gets updated so was expecting the same situation.
Add support for cors on svite dev
Show how you can deploy to popular hosting options
Maybe add a command ala svite deploy netlify if that reduces effort for users
I basically copied over the relevant parts from the tailwind example, when running npm run dev I get
gives
[vite] Dep optimization failed with error:
[vite]: Rollup failed to resolve import "postcss-nesting" from "node_modules/postcss-preset-env/index.mjs".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`rollupInputOptions.external`
Error: [vite]: Rollup failed to resolve import "postcss-nesting" from "node_modules/postcss-preset-env/index.mjs".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`rollupInputOptions.external`
https://github.com/quantuminformation/mentorcv
vite --debug flag mentorcv git:(master) ✗ npm run dev
> [email protected] dev /Users/nikos/WebstormProjects/mentorcv
> vite --debug
vite v1.0.0-beta.11
vite:config env mode: development +0ms
[dotenv][DEBUG] did not match key and value when parsing line 9:
[dotenv][DEBUG] did not match key and value when parsing line 10:
[dotenv][DEBUG] did not match key and value when parsing line 11:
vite:config env: {} +2ms
vite:config config resolved in 53ms +1ms
[svite] applied changes to svelte config used for dev.
{ css: true, emitCss: false }
vite:resolve (node_module entry) firebase -> dist/index.esm.js +0ms
vite:optimize optimizing firebase (imports sub dependencies) +0ms
vite:resolve (node_module entry) query-string -> undefined +1ms
vite:optimize skipping query-string (cannot resolve entry) +0ms
/Users/nikos/WebstormProjects/mentorcv query-string
[vite] cannot resolve entry for dependency query-string.
vite:resolve (node_module entry) svelte-loading-spinners -> dist/index.mjs +1ms
vite:optimize skipping svelte-loading-spinners (single esm file, doesn't need optimization) +4ms
vite:resolve (node_module entry) svelte-routing -> src/index.js +4ms
vite:optimize optimizing svelte-routing (contains relative imports) +2ms
vite:resolve (node_module entry) svelte-spinner -> dist/index.mjs +2ms
vite:optimize optimizing svelte-spinner (imports sub dependencies) +1ms
vite:resolve (node_module entry) postcss-import -> undefined +1ms
vite:optimize skipping postcss-import (cannot resolve entry) +1ms
/Users/nikos/WebstormProjects/mentorcv postcss-import
[vite] cannot resolve entry for dependency postcss-import.
vite:resolve (node_module entry) postcss-load-config -> src/index.js +0ms
vite:optimize optimizing postcss-load-config (no exports, likely commonjs) +0ms
vite:resolve (node_module entry) postcss-preset-env -> index.mjs +3ms
vite:optimize optimizing postcss-preset-env (imports sub dependencies) +3ms
vite:resolve (node_module entry) svelte-preprocess -> dist/index.js +1ms
vite:optimize optimizing svelte-preprocess (no exports, likely commonjs) +1ms
vite:resolve (node_module entry) svite -> index.js +1ms
vite:optimize optimizing svite (no exports, likely commonjs) +1ms
vite:optimize skipping tailwindcss (internal excluded) +0ms
vite:optimize skipping vite (internal excluded) +0ms
vite:resolve (node_module entry) svelte/animate -> ./index.mjs +0ms
vite:resolve (node_module entry) svelte/easing -> ./index.mjs +1ms
vite:resolve (node_module entry) svelte/internal -> ./index.mjs +0ms
vite:resolve (node_module entry) svelte/motion -> ./index.mjs +0ms
vite:resolve (node_module entry) svelte/store -> ./index.mjs +1ms
vite:resolve (node_module entry) svelte/transition -> ./index.mjs +0ms
vite:resolve (node_module entry) svelte -> index.mjs +0ms
vite:resolve failed to resolve package.json for svelte-hmr/runtime/esm +1ms
vite:resolve failed to resolve package.json for svelte-hmr/runtime/proxy-adapter-dom +8ms
vite:resolve failed to resolve package.json for svelte-hmr/runtime/hot-api-esm +0ms
[vite] Optimizable dependencies detected:
firebase, svelte-routing, svelte-spinner, postcss-load-config, postcss-preset-env, svelte-preprocess, svite, svelte/animate, svelte/easing, svelte/internal, svelte/motion, svelte/store, svelte/transition, svelte, svelte-hmr/runtime/proxy-adapter-dom, svelte-hmr/runtime/hot-api-esm
Pre-bundling them to speed up dev server page load...
(this will be run only when your dependencies have changed)
[vite] Dep optimization failed with error:
[vite]: Rollup failed to resolve import "postcss-nesting" from "node_modules/postcss-preset-env/index.mjs".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`rollupInputOptions.external`
Error: [vite]: Rollup failed to resolve import "postcss-nesting" from "node_modules/postcss-preset-env/index.mjs".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`rollupInputOptions.external`
at Object.onwarn (/Users/nikos/WebstormProjects/mentorcv/node_modules/vite/dist/node/build/index.js:68:19)
at Object.onwarn (/Users/nikos/WebstormProjects/mentorcv/node_modules/rollup/dist/shared/rollup.js:18957:20)
at ModuleLoader.handleResolveId (/Users/nikos/WebstormProjects/mentorcv/node_modules/rollup/dist/shared/rollup.js:17847:26)
at /Users/nikos/WebstormProjects/mentorcv/node_modules/rollup/dist/shared/rollup.js:17837:22
at async Promise.all (index 27)
at ModuleLoader.fetchStaticDependencies (/Users/nikos/WebstormProjects/mentorcv/node_modules/rollup/dist/shared/rollup.js:17835:34)
at async Promise.all (index 0)
at ModuleLoader.fetchModule (/Users/nikos/WebstormProjects/mentorcv/node_modules/rollup/dist/shared/rollup.js:17812:9)
at async Promise.all (index 4) {
watchFiles: [
'/Users/nikos/WebstormProjects/mentorcv/node_modules/postcss-preset-env/index.mjs',
'/Users/nikos/WebstormProjects/mentorcv/node_modules/svite/index.js',
'/Users/nikos/WebstormProjects/mentorcv/node_modules/svelte/index.mjs',
'/Users/nikos/WebstormProjects/mentorcv/node_modules/svelte/animate/index.mjs',
'/Users/nikos/WebstormProjects/mentorcv/node_modules/svelte/internal/index.mjs',
'/Users/nikos/WebstormProjects/mentorcv/node_modules/svelte/easing/index.mjs',
'/Users/nikos/WebstormProjects/mentorcv/node_modules/svelte/motion/index.mjs',```
explain what they do and what's special.
How could we have a scriptable build so as to change the 'src' directory to something else with different config eg: noPreserveState: True based on variables.
one huge README is becoming less managable. setup proper docs directory with one-topic files
future move:
use the .md files there and generate a docs site into gh-pages using svite itself.
Add a lunr based search to that site.
Currently, svite build creates an SPA.
Add svite export to enable static site generation
I can't build my component and receive this error:
[vite] Build errored out.
TypeError: Cannot read property 'includes' of undefined
at /Users/jacobbowdoin/apps/elevation-pace-chart/node_modules/vite/dist/node/build/index.js:189:60
at Array.findIndex (<anonymous>)
at Object.build (/Users/jacobbowdoin/apps/elevation-pace-chart/node_modules/vite/dist/node/build/index.js:189:36)
at async runBuild (/Users/jacobbowdoin/apps/elevation-pace-chart/node_modules/vite/dist/node/cli.js:174:9)```
## Reproduction
1. Download the minimal example
2. npm install
3. npm run build and see the error.
## Additional Information
- MacOS latest
- node 12.16.3
- npm 6.14.6
- svite 0.2.3
- vite v1.0.0-beta.12
- svelte 3.24.0
This is a screenshot from index.svelte from a (relatively) unmodified version of the routify-mdsvex example. I'm getting this error from every file I access.
I'm getting it from the official Svelte plugin, and the unofficial one.
It will periodically fix itself, but I can't reliably reproduce the conditions in which it works.
I tried passing the svelte config through the vite config, but it didn't seem to help. Sorry if I'm missing something obvious!
PS: Thank you so much for Svite, it's amazing and is the future. I think I prefer it to snowpack / nollup.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.