emh333 / esbuild-svelte Goto Github PK
View Code? Open in Web Editor NEWAn esbuild plugin to compile Svelte components
Home Page: https://www.npmjs.com/package/esbuild-svelte
License: MIT License
An esbuild plugin to compile Svelte components
Home Page: https://www.npmjs.com/package/esbuild-svelte
License: MIT License
I try to use coffeescript in svelte on my rails app and i don't understand how merge both :
#!/usr/bin/env node
const watch = process.argv.includes("--watch");
const esbuild = require('esbuild')
const coffeeScriptPlugin = require('esbuild-coffeescript');
const esbuildSvelte = require('esbuild-svelte');
const sveltePreprocess = require('svelte-preprocess');
esbuild
.build({
entryPoints: ["app/javascript/svelte_src.js"],
bundle: true,
outfile: "app/assets/builds/svelte.js",
plugins: [
esbuildSvelte({
preprocess: sveltePreprocess(/*{coffeescript: { bare: true }}*/),
}),
coffeeScriptPlugin({bare: true}),
],
logLevel: "debug",
watch: watch
})
.catch(() => process.exit(1));
I tried add plugin at the different place, but not working...
I find https://github.com/svelte-add/coffeescript but with rails we use esbuild and there is not sveltekit, so I cant use this... how can I do?
I am planning to release v1.0.0 of this plugin once Svelte 5 is released. esbuild development seems to have mostly stabilized so I'm feeling okay moving forward without esbuild reaching v1.
Some changes that will likely happen:
v0.17.0
to simplify version supportv4
(or v5
depending on how breaking the changes are) to simplify version supportStretch: Bump Svelte version to v4.2.1
belowoverzealous
cache optionv4.2.1
to require sveltejs/svelte#9120Hello,
I use esbuild with this plugin and I have found the following problem if I enable source map generation with css
set to false
in compileOptions
const esbuild_svelte = require("esbuild-svelte/configurable")({
compileOptions: { css: false, hydratable: true },
preprocessor: svelteConfig.preprocess,
}
I think the source of the problem is in your code at configurable/index.js
line 44:
//if svelte emits css seperately, then store it in a map and import it from the js
if (!compileOptions.css && css.code) {
let cssPath = args.path.replace(".svelte", ".esbuild-svelte-fake-css").replace(/\\/g, "/");
cssCode.set(cssPath, css.code + `/*# sourceMappingURL=${css.map.toUrl()}*/`);
contents = `import "${cssPath}";\n` + contents;
}
If I remove the \n
the source map line is ok:
...
contents = `import "${cssPath}";` + contents;
...
I don't know if this will fix the problem completely. Possibly there is another way in esbuild to inject the css without modifying the contents.
Svelte on m1 bug with precompiled svelte/internal sources.
When component unmount from slot i have this error:
When un/mount component in slot in localy imported module with this file structure:
Source code for example.
If you download it - remove rollup bundler.
Or zip example.
When I try to load in the generated files in the example using a basic HTML wrapper like the one below, I’m getting an empty HTML page (the script and styles load but nothing is rendered):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./entry.css">
</head>
<body>
<script type="module" src="./entry.js"></script>
</body>
</html>
If I replace binding: document.body
with target: document.body
in entry.js, the app shows up. So, the following entry.js works insofar as the app displaying in the browser:
import Test from './index.svelte';
new Test({
target: document.body,
});
However, if you click the button, you get the following error:
Uncaught TypeError: lol is undefined
change https://localhost/entry.js:448
listen https://localhost/entry.js:56
m https://localhost/entry.js:411
mount_component https://localhost/entry.js:194
init https://localhost/entry.js:268
Index https://localhost/entry.js:455
<anonymous> https://localhost/entry.js:462
Hi, Thanks for all your work on this project.
Describe the bug
I wanted to setup esbuild with svelt and typescript I tried to follow you guidelines as best as possible. I have some issue to import typescript files into a svelt component. I forked the project and added an example-ts. https://github.com/stoivo/esbuild-svelte
Esbuild seams to complain abount Joke and svelt-check seams unhappy too.
⋊> ~/D/e/example-ts on main ⨯ pnpm svelte-check
====================================
Loading svelte-check in workspace: /Users/simon/Downloads/esbuild-svelte/example-ts
Getting Svelte diagnostics...
/Users/simon/Downloads/esbuild-svelte/example-ts/index.svelte:5:3
Error: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'. (ts)
import {haha} from "$fun";
import {Joke} from "$fun";
import Second from "./second.svelte";
/Users/simon/Downloads/esbuild-svelte/example-ts/index.svelte:5:11
Error: 'Joke' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled. (ts)
import {haha} from "$fun";
import {Joke} from "$fun";
import Second from "./second.svelte";
/Users/simon/Downloads/esbuild-svelte/example-ts/index.svelte:7:7
Error: Variable 'inputBinding' implicitly has type 'any' in some locations where its type cannot be determined. (ts)
import Second from "./second.svelte";
let inputBinding;
/Users/simon/Downloads/esbuild-svelte/example-ts/index.svelte:18:5
Error: Variable 'inputBinding' implicitly has an 'any' type. (ts)
function change() {
inputBinding.value = "testing" + Math.round(Math.random() * 100);
}
====================================
svelte-check found 4 errors, 0 warnings, and 0 hints
⋊> ~/D/e/example-ts on main ⨯ pnpm build
> @ build /Users/simon/Downloads/esbuild-svelte/example-ts
> node buildscript.js
> index.svelte:25:9: error: No matching export in "fun.ts" for import "Joke"
25 │ import { Joke } from "$fun";
╵ ~~~~
1 error
Errors: Error: Build failed with 1 error:
index.svelte:25:9: error: No matching export in "fun.ts" for import "Joke"
at failureErrorWithLog (/Users/simon/Downloads/esbuild-svelte/example-ts/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1475:15)
at /Users/simon/Downloads/esbuild-svelte/example-ts/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1133:28
at runOnEndCallbacks (/Users/simon/Downloads/esbuild-svelte/example-ts/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:923:63)
at buildResponseToResult (/Users/simon/Downloads/esbuild-svelte/example-ts/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1131:7)
at /Users/simon/Downloads/esbuild-svelte/example-ts/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1240:14
at /Users/simon/Downloads/esbuild-svelte/example-ts/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:611:9
at handleIncomingPacket (/Users/simon/Downloads/esbuild-svelte/example-ts/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:708:9)
at Socket.readFromStdout (/Users/simon/Downloads/esbuild-svelte/example-ts/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:578:7)
at Socket.emit (node:events:390:28)
at addChunk (node:internal/streams/readable:315:12) {
errors: [
{
detail: undefined,
location: [Object],
notes: [],
pluginName: '',
text: 'No matching export in "fun.ts" for import "Joke"'
}
],
warnings: []
} undefined
To Reproduce
Just for yours attention... maybe it's will be useful
Describe the bug
compilerOptions.css as a boolean is deprecated. Use 'external' instead of false.
To Reproduce
Any compilations
Expected behavior
Use 'external' instead of false.
Describe the bug
A clear and concise description of what the bug is.
> src/MetaData.svelte:2:17: error: [plugin: esbuild-svelte] Unexpected token
2 │ 1: <script lang="ts">
╵ ^
2: export let title: string, description: string, image: string, url: string;
^
3: </script>
4:
src/index.ts:1:26: note: The plugin "esbuild-svelte" was triggered by this import
1 │ export * as MetaData from './MetaData.svelte'
╵ ~~~~~~~~~~~~~~~~~~~
To Reproduce
The file that causes the error:
<script lang="ts">
export let title: string, description: string, image: string, url: string;
</script>
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Environment (please complete the following information):
Additional context
Add any other context about the problem here.
Does the plugin support typescript based svelte files? I tried running it, but getting errors with typescript syntax, and I'm unsure if I can configure the plugin to support it.
I just realized that esbuild-svelte doesn't do type checks, because svelte preprocessor doesn't do type checks.
I'd love to (optionally) include type checks in my esbuild run because they can save me a lot of runtime headaches.
It would be nice if this were an option in esbuild-svelte so I don't have to roll my own.
I suppose as a workaround I can hack it into my package.json scripts to just run before kicking off esbuild.
One more time ))) I just want explain situation:
I have splitting bundles with css-chunks, but i can't load css on page...
I have some resolver for this, but its not working with splitting: true...
let fakecsspathResolvePlugin = {
name: 'fakecsspath',
setup(build) {
let path = require('path')
build.onResolve({ filter: /\.esbuild-svelte-fake-css$/ }, ({ path }) => {
return { path, namespace: 'fakecss' }
})
build.onLoad({ filter: /\.esbuild-svelte-fake-css$/, namespace: 'fakecss' }, ({ path }) => {
const css = cssCode.get(path);
return css ? { contents: css, loader: "css" } : null;
})
},
}
Describe the bug
If you use onMount (or most likely any Svelte import) with Svelte being external (by doing something like external: ['./node_modules/*']
in your build config) you get the following error:
[email protected]/node_modules/svelte/internal/index.mjs:1050 Uncaught (in promise) Error: Function called outside component initialization
at get_current_component ([email protected]/node_modules/svelte/internal/index.mjs:1050)
at onMount ([email protected]/node_modules/svelte/internal/index.mjs:1073)
...
To Reproduce
Steps to reproduce the behavior:
external: ['./node_modules/*']
to your esbuild config.svelte
fileExpected behavior
The error doesn't appear
Environment (please complete the following information):
Additional notes
I am compiling to ESM
Describe the bug
esbuild-svelte started throwing errors after upgrading svelte-preprocess and TypeScript (I upgraded both for peer deps conflict)
$ node build.js
✘ [ERROR] Unexpected token [plugin esbuild-svelte]
MyComponent.svelte:2:13:
2 │ 1: <script type="typescript">
╵ ^
2: import type { Foo } from './foo';
^
3:
4: const foo: Foo = 'bar';
The plugin "esbuild-svelte" was triggered by this import
index.ts:1:24:
1 │ import MyComponent from './MyComponent.svelte';
╵ ~~~~~~~~~~~~~~~~~~~~~~
To Reproduce
Run the build script where the followings are installed
package.json
{
"private": true,
"dependencies": {
"esbuild": "^0.17.16",
"esbuild-svelte": "^0.7.3",
"svelte": "^3.58.0",
"svelte-preprocess": "^5.0.3",
"typescript": "^5.0.4"
}
}
(I confirmed the lock file tells the save versions.)
build.js
const esbuild = require('esbuild');
const esbuildSvelte = require('esbuild-svelte');
const path = require('path');
const sveltePreprocess = require('svelte-preprocess');
esbuild
.build({
entryPoints: [path.resolve(__dirname, './index.ts')],
mainFields: ['svelte', 'browser', 'module', 'main'],
bundle: true,
outdir: path.resolve(__dirname, './dist'),
plugins: [
esbuildSvelte({
preprocess: sveltePreprocess(),
}),
],
})
.catch(() => process.exit(1));
MyComponent.svelte
<script type="typescript">
import type { Foo } from './foo';
…
Expected behavior
Compile them as well as recent versions
Screenshots
N/A
Environment (please complete the following information):
Additional context
type
seems problematicDescribe the bug
If preprocess fails execution of a dependency (eg: an external scss
file imported within a <style>
tag).
The onLoad
returning watchFiles
are lost and editing the external scss
does not trigger the rebuild.
To Reproduce
Steps to reproduce the behavior:
.svelte
file with a <style lang="scss">
with an external import @import "./external-file.scss";
with valid syntax.external-file.scss
with some invalid syntax.external-file.scss
with valid syntax.Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Environment (please complete the following information):
0.7.0
0.14.42
SCSS
Describe the bug
We have a fairly large production Svelte app and was trying to migrate off rollup to esbuild. Thanks for your plugin. We are running into an issue I was hoping you can give some hints too. We are running esbuild with watch
and I am creating fake errors to test the error output so we can hook up an overlay screen. The issue I am running into, is the line numbers for svelte errors are off or strange.
{"errors":[{"location":{"column":17,"file":"src/components/AppRoot.svelte","length":15,"line":79,"lineText":"import Left from \"./Left.svelte\";","namespace":"","suggestion":""},"notes":[],"pluginName":"esbuild-svelte","text":"Transform failed with 1 error:\nsrc/components/Left.svelte:321:7: error: Expected identifier but found \".\""}],"warnings":[]}
AppRoot.svelte
imports Left.svelte
and the error i introduced does exist at Left.svelte:321:7
but it is in the "text"
area, not the "location"
{"errors":[{"location":{"column":10,"file":"src/components/Left.svelte","length":0,"line":323,"lineText":"321: {room.name}\n322: </a>\n323: {##if roomID === room.id}\n ^\n324: <div\n325: class=\"nav-action\"","namespace":"file","suggestion":""},"notes":[{"location":{"column":17,"file":"src/components/AppRoot.svelte","length":15,"line":79,"lineText":"import Left from \"./Left.svelte\";","namespace":"","suggestion":""},"text":"The plugin \"esbuild-svelte\" was triggered by this import"}],"pluginName":"esbuild-svelte","text":"Expected if, each or await"}],"warnings":[]}
{"errors":[{"location":{"column":3,"file":"src/components/Left.svelte","length":0,"line":544,"lineText":"542: \n543: <style>\n544: ..account-alert {\n ^\n545: background-color: var(--rml-warning-bg);\n546: padding: var(--rml-padding-default);","namespace":"file","suggestion":""},"notes":[{"location":{"column":17,"file":"src/components/AppRoot.svelte","length":15,"line":79,"lineText":"import Left from \"./Left.svelte\";","namespace":"","suggestion":""},"text":"The plugin \"esbuild-svelte\" was triggered by this import"}],"pluginName":"esbuild-svelte","text":"Identifier is expected"}],"warnings":[]}
To Reproduce
Unfortunately I can't recreate this issue with a blank Svelte app.
Here is my build script though in case it helps.
const result = await esbuild
.build({
define: {
__env_vars__: cfg,
},
entryPoints: ['src/app.js', 'src/room.ts'],
bundle: true,
outdir: outDir,
assetNames: 'assets/[name]-[hash]',
logLevel: 'debug',
minify: false,
sourcemap: true,
// splitting: true,
watch: {
onRebuild(error) {
clients.forEach((res) =>
res.write(
'data: ' +
JSON.stringify({ update: true, error: error, path: appPath }) +
'\n\n',
),
);
clients.length = 0;
console.log(error ? JSON.stringify(error) : '...success...');
},
},
format: 'esm',
target: 'es2017',
loader: {
'.svg': 'text',
},
// metafile: true,
plugins: [
esbuildSvelte({
preprocess: [
typescript({
sourcemap: true,
}),
sveltePreprocess({
sourceMap: true,
typescript: false,
}),
],
}),
],
})
.catch(() => process.exit(1));
Expected behavior
Location data would always be present in esbuild output on failure and point to correct line in file.
Environment (please complete the following information):
"esbuild": "^0.13.12",
"esbuild-svelte": "^0.5.7",
Thanks in advance!
Describe the bug
When esbuild-svelte
encounters and error it seems to break the watch mode of esbuild.
After the error occurs, esbuild doesn't rebuild the file after it has been saved again.
This is my EsBuild config:
esbuild.build({
entryPoints: ['index.js'],
bundle: true,
outdir: 'dist',
plugins: [
sveltePlugin({
compilerOptions: {
css: false,
hydratable: true
}
})
],
minify: false,
incremental: true,
watch: {
onRebuild (error, result) {
if (error) console.error('SVELTE watch build failed:', error);
}
},
logLevel
}).catch((error) => {
console.log(error);
});
To Reproduce
Steps to reproduce the behavior:
<script>
import Something
</script>
<div>Hello</div>
✘ [ERROR] [plugin esbuild-svelte] Unexpected token
Expected behavior
After the plugin reports and error, and the error is corrected, EsBuild should rebuild again but it doesn't.
Environment (please complete the following information):
svelte: 3.53.0 ▲ [WARNING] [plugin esbuild-svelte] options.css as a boolean is deprecated. Use 'external' instead of false.
Describe the bug
This is related my comment in #230 about finding out that we likely need to upgrade the compiler + tests to svelte 5. It's good to know that the error + warning codes have changed the separator from -
to _
.
More details:
https://svelte-5-preview.vercel.app/docs/breaking-changes#other-breaking-changes-error-warning-codes-have-been-renamed
With splitting: true option don't load css chunks on the page...
Fakecss-path resolve when it's single bundle, but don't resolve with multiple chunks...
Is your feature request related to a problem? Please describe.
Updating esbuild to any of the 0.17 versions breaks "watch mode". This is described in the esbuild documentation that the option was simply removed for ... reasons
Describe the solution you'd like
I would like to be able to properly use "watch" mode again after updating esbuild to 0.17.x or later. It probably doesn't require any changes to esbuild-svelte (I guess ?) but rather to example buildscript.js
files
esbuild 0.9.6 brought the ability to see what options esbuild has been called with. The cache in this plugin would benefit many people if it was automatically enabled when required (with the option to force enable or disable as required).
Technically a breaking change.
I was going to submit a PR for this, but it seems that the decision to initialize esbuild-svelte
with null
is deliberate.
I want to use this tip from the link, but looks like there is no support for onwarn in 'esbuild-svelte'?
sveltejs/svelte#5300 (comment)
Describe the bug
We use tailwindcss/postcss as part of our svelte-preprocess config (sveltePreprocess({ postcss: true })
), and with esbuild-svelte, if we add new tailwind classes (ie. not appearing in our existing code), watch triggers an incremental build but tailwindcss doesn't seem to be re-running...or if it is, it's not noticing the new classes.
The issue is fixed by restarting the esbuild-svelte process (the first build always runs tailwind correctly), so it's not very severe as there is an easy workaround.
To Reproduce
Steps to reproduce the behavior:
invisible
)Expected behavior
New tailwind class works (eg. the element disappears due to the invisible
class)
Environment (please complete the following information):
postcss: true
Additional context
Maybe there's something simple I'm missing? I know this might not be an esbuild-svelte issue, but I'm sure others will eventually run into the same problem. I'm happy to post more of the config if that'll help, or even a small repro. I just wanted to hear your thoughts first before spending time on that (in case there's something obvious).
Thanks again for your work on this project!
Worth it, for less configuration. Explicitly call out target
for browser
condition
Context: evanw/esbuild#1394. Here's an example:
const fs = require('fs');
const esbuild = require('esbuild');
const sveltePlugin = require('esbuild-svelte');
const { sass } = require('svelte-preprocess-sass');
(async () => {
fs.writeFileSync(__dirname + '/app.js', 'import x from "./foo.svelte"\nconsole.log(x)');
fs.writeFileSync(__dirname + '/foo.svelte', '<style lang="sass">@import "./xyz.sass"</style><div class="xyz">foo</div>');
// Set color to red
fs.writeFileSync(__dirname + '/xyz.sass', '.xyz\n color: red');
const result = await esbuild.build({
entryPoints: ['app.js'],
bundle: true,
incremental: true,
write: false,
outfile: 'out.js',
plugins: [sveltePlugin({
preprocess: {
style: sass(),
},
})],
logLevel: 'info',
});
console.log(result.outputFiles[1].text);
// Set color to green
fs.writeFileSync(__dirname + '/xyz.sass', '.xyz\n color: green');
const result2 = await result.rebuild();
console.log(result2.outputFiles[1].text);
result.rebuild.dispose();
})();
This should print red
followed by green
. However, it prints red
twice. I assume this is a result of #43. Explicitly adding cache: false
is a workaround, and will generate red
followed by green
.
The problem here is that preprocessors can depend on additional files other than the input file such as when preprocessed CSS code uses @import
. When that happens, those additional files must be included in the cache invalidation check. This is described in detail here: https://esbuild.github.io/plugins/#caching-your-plugin.
I can see two ways of fixing this bug:
The easy way to fix this would be to just disable the cache if there is a preprocessor. Obviously that would result in it running more slowly, but it would at least still be correct.
The hard way to fix this would be to use the dependencies returned by the preprocessor during cache invalidation. Specifically, the call to preprocess()
here returns a dependencies
property in addition to a code
property. You would need to at least a) store those paths and the file contents along with the cached value and b) check the contents of those files when deciding later on whether or not the cache entry is valid. Make sure to handle the case where one of the files is missing (i.e. it was deleted), which should invalidate the cache entry.
I don't have a personal stake in fixing this bug. But I noticed that it was tripping people up, so I thought it would be good to report. Feel free to do whatever you want with this report.
rixo/svelte-hmr - https://github.com/rixo/svelte-hmr
intrnl/vite-plugin-svelte - https://github.com/intrnl/vite-plugin-svelte/blob/trunk/lib/index.js (like example)
Is your feature request related to a problem? Please describe.
I am having problem getting the internal styles to work. My build script (adapted from a different package) looks as follows:
const esbuild = require("esbuild");
const sveltePlugin = require("esbuild-svelte");
const args = process.argv.slice(2);
const watch = args.includes('--watch');
const deploy = args.includes('--deploy');
let opts = {
entryPoints: ['js/app.js'],
bundle: true,
target: 'es2016',
outdir: '../priv/static/assets',
logLevel: 'info',
plugins: [
sveltePlugin({compilerOptions: {css: true}})
]
};
if (watch) opts = { ...opts, watch, sourcemap: 'inline' };
if (deploy) opts = { ...opts, minify: true };
const promise = esbuild.build(opts);
if (watch)
{
promise.then(_result => {
process.stdin.on('close', () => {
process.exit(0)
});
process.stdin.resume();
})
}
And the "watcher" part of configuration:
watchers: [
# Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
#esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]},
node: ["buildscript.js", "--watch", cd: Path.expand("../assets", __DIR__)]
]
Describe the solution you'd like
I'd like to be able to combine the Svelte specific CSS with the remaining CSS coming from other sources into app.css
Describe alternatives you've considered
I read https://github.com/EMH333/esbuild-svelte#css-output and considered adding said options but that didn't work for me either
Additional context
I am trying to make things work again after migrating an Elixir/Phoenix project from Phoenix 1.5 with "webpack" to 1.6 with "esbuild". It's been a bumpy road but everything now seem to work except the said CSS not being available anywhere. My understanding is that this is caused by regular "tailwind" watcher overwriting esbuild-svelte
's app.css
inside priv/static/assets/
directory. I understand that it might not be an esbuild-svelte
issue per se but would still be very grateful for some pointers / ideas how to tackle the problem.
It would be nice to see a caching feature in this plugin. I use this plugin with esbuild + filewatcher and modified your plugin with a few lines for my needs.
...
const fileCache = {}
...
//main loader
build.onLoad({ filter: /\.svelte$/ }, async (args) => {
const cached = fileCache[args.path]
if (cached && fs.statSync(args.path).mtime < cached.time) {
return cached.data
}
...
fileCache[args.path] = {
time: new Date(),
data: { contents, warnings: warnings.map(convertMessage) }
}
console.log(args.path + " compiled")
return fileCache[args.path].data
} catch (e) {
return { errors: [convertMessage(e)] }
}
...
This modification was made to version 0.3.1. I hope to see such a caching feature in your plugin in a future version, so that I do not have to use my modified version.
Thank you
I am trying to use this plugin and write some other ones but I can't figure out how to compile esbuild with plugins support. Could you give me a hint? :)
Is your feature request related to a problem? Please describe.
This plugin code splits everything really well, but it is a bit weird at code splitting CSS. It generates a separate .css file for the code-splitted component, but inlines its styles right into the main index.css too. The other file is never loaded, and index.css does all the work.
I'm not sure whether this is a missing feature or a bug, but it seems like the generated code splitted .js file doesn't load its .css file, so maybe it's a missing feature.
Describe the solution you'd like
CSS should be code splitted well, and the splitted .css files be loaded when the respective splitted .js is loaded
Describe alternatives you've considered
Going with the flow here for now
And hey, love this plugin, it's saved so much time and amazing to integrate with ESBuild. Keep up the great work!
When i use url() in css like:
content: url('img/img.jpg');
/* or */
background-image: url('img/img.jpg');
i have a error:
> fakecss:/path/to/Component.esbuild-svelte-fake-css:1:458: error: Could not resolve "img/img.jpg" (the plugin "esbuild-svelte" didn't set a resolve directory)
To Reproduce
REPO
Expected behavior
bundling url() to css 🤷🏻♂️
Thanks for your work.
After update on [email protected] now get an error:
Previous version of esbuild works great.
I'm lazy, I still want to publish this package, and I will probably make mistakes. Please implement this workflow Ethan :)
Hello , I was using esbuild-svelte for my Svelte Application(svelte+typescript+tailwindcss) and so far all good. But,when I updated svelte-preprocess to latest version , it will not build .
Steps to reproduce:
npm i && npm run build
, it will build successfully.npm run build
. It throws error.@EMH333 , Please resolve this issue as soon as possible . Thank you for esbuild-svelte.
If I set compilerOptions.css to true
(or `inject with Svelte 4), it still generates a CSS file and doesn't include it in the Javascript file.
To Reproduce
Steps to reproduce the behavior:
Import a css file into a svelte file
Expected behavior
The CSS is included into the JS and get's injected
Environment:
This is different than #234 since npm does some funny things with version locks and the prerelease versions may have subtle changes compared to the actual release.
This is a good time to clarify my commitment to prerelease support:
esbuild-svelte
will have an installable version compatible with Svelte 5 the day it is released. It may not support all the new features, but it will at least let projects compile with Svelte 5. Worth noting that I am intending v0.8.1
to be that version, but won't hesitate to make changes as required.What do you think about generate HTML output functionality in plugin - something like this ?
Describe the bug
Setting the cssOutputfilename
in the compiler options has no effect.
To Reproduce
Add the css filename option in the example:
import { build } from "esbuild";
import sveltePlugin from "esbuild-svelte";
build({
entryPoints: ["./entry.js"],
mainFields: ["svelte", "browser", "module", "main"],
bundle: true,
outfile: "./dist/bundle.js",
plugins: [
sveltePlugin({
compilerOptions: { cssOutputFilename: "foo.css" },
}),
],
}).catch((err) => {
console.error(err);
process.exit(1);
});
Expected behavior
The dist
folder should contain bundle.js
and foo.css
, but it contains bundle.js
and bundle.css
Screenshots
If applicable, add screenshots to help explain your problem.
Environment (please complete the following information):
I do get errors with imports and multiple svelte files. You have that in your example, what am I missing, do I need to have some special config?
> src/App.svelte: error: Could not resolve "./Tailwindcss.svelte"
14 │ import Tailwindcss from "./Tailwindcss.svelte";
Describe the bug
Today I upgraded esbuild-svelte to version 0.74 with Svelte 4 as dependency. In the migration guide it states, that the Tag-Option for custom components is deprecated with Svelte 4 and was replaced with the customElement option (see https://svelte.dev/docs/v4-migration-guide#custom-elements-with-svelte). Using this new option, the esbuild-svelte plugin throws following error:
<svelte:options> unknown attribute
To Reproduce
Steps to reproduce the behavior:
Expected behavior
No error should be thrown. The error should only occur if the old option (tag) was used.
Environment:
Is your feature request related to a problem? Please describe.
I didn't realize the Svelte version is tied to esbuild-svelte
. I was looking through the release notes and noticed that Svelte upgrades were part of them. There's no reason that this package needs to push an update just for people to receive Svelte fixes. This means people are either locked into an outdated Svelte version or into a newer one that introduced a breaking bug.
Describe the solution you'd like
Make Svelte a peer dependency
Rollup has peer: https://github.com/sveltejs/rollup-plugin-svelte/blob/8bc5ee49fec60ce32ee2cf9f285461348bece75c/package.json#L32
Webpack has peer: https://github.com/sveltejs/svelte-loader/blob/5e7853f233d7be5592b0b5fc22da9b4d1a5b0c12/package.json#L32
Vite doesn't list it at all, only as dev: https://github.com/sveltejs/vite-plugin-svelte/blob/1f7834494621cdecffac27539a9246387f6eb710/package.json
Parcel doesn't list it at all but the install instructions contain the Svelte package: https://github.com/DeMoorJasper/parcel-plugin-svelte/blob/7733036ee1a5747da46a8155b35b24bf23914793/package.json
I'd put the minimum version to one that has the required API for esbuild-svelte to work.
Describe alternatives you've considered
I think if I have the latest Svelte in my dependencies then this also matches what esbuild-svelte needs, so it's technically not necessary to update esbuild-svelte to get the latest Svelte.
Describe the bug
I enabled dev
within compilerOptions
, but it does not seem like it does get enabled.
To Reproduce
Steps to reproduce the behavior:
dev
under compilerOpptuions: const result = await build({
plugins: [
pnpPlugin(),
sveltePlugin({
compilerOptions: {
dev: true,
},
preprocess: sveltePreprocess(),
}),
],
Expected behavior
Expected the browser-plugin to be able to connect.
Screenshots
I get this message:
To connect to Svelte perform a hard refresh (ctrl+F5) or click here.
Not working? Did you...
Use Svelte version 3.12.0 or above?
Build with dev mode enabled?
Environment (please complete the following information):
Additional context
I checked if the problem was related to sveltejs/svelte-devtools#69 but the problem also exists with version 96 and 97 of Chromium.
versions:
Chromium: 96.0.4664.110 Arch Linux
"svelte": "^3.46.4",
"svelte-inview": "^2.1.1",
"@tsconfig/svelte": "^3.0.0",
"esbuild-svelte": "^0.6.3",
"eslint-plugin-svelte3": "^3.4.1",
"prettier-plugin-svelte": "^2.6.0",
"svelte-preprocess": "^4.10.4",
"svelte-preprocess-sass": "^2.0.1",
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.