Comments (9)
Is this popular enough to build into the main Svelte template? CSA is meant to be fairly all-included, so this seems to fit as a good default for the svelte plugin. Especially since it seems to default-off for all of these integrations, only enabling them when the user opts in.
Would love any help adding this to @snowpack/plugin-svelte!
from create-snowpack-app.
The official Svelte VS code plugin looks for a svelte.config.js
file at the root of the project - https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode#generic-setup. This exports an object with options for the compiler. If snowpack could look for the same file and merge the options object into plugin-svelte
then that would make setup super easy and probably make a lot of users very happy.
from create-snowpack-app.
I do think it would be more useful in the main plugin, yes. I'm not super familiar with how this all works, but will give it a crack.
I think the Svelvet way of providing it as a specific file pre-process.js
is easier to support with the current plugin than integrating it with Rollup as the official preprocess docs suggest. So having it conditionally check for that file, run preprocess
if present, and then pass the output to the compiler. I'll play around.
from create-snowpack-app.
That makes sense, happy to follow the standard practice here.
Okay, so I have a basic version of this written, but I'm not a power Svelte user. Could someone in this thread test this in their own project, making any changes needed to get it working if it isn't? @jamesopstad would love your help if you're able!
snowpack.config.json
"scripts": {
"plugin:svelte": "./svelte-plugin.js"
}
svelte-plugin.js
const svelte = require("svelte/compiler");
const fs = require("fs");
let userSvelteConfig = {};
try {
userSvelteConfig = require(path.join(cwd, "svelte.config.js"));
} catch (err) {
// no user-provided config found, safe to ignore
}
exports.build = function build(fileLoc) {
const { preprocess: preprocessOptions, ...svelteOptions } = userSvelteConfig;
const fileSource = fs.readFileSync(fileLoc, { encoding: "utf-8" });
let codeToCompile = fileSource;
// PRE-PROCESS
if (preprocessOptions) {
codeToCompile = svelte.preprocess(fileSource, preprocessOptions).code;
}
// COMPILE
const result = svelte.compile(codeToCompile, {
dev: process.env.NODE_ENV !== "production",
...svelteOptions,
});
return { result: result.js.code };
};
from create-snowpack-app.
That was fast! Yes, will try it out and get back to you.
from create-snowpack-app.
Here is the revised svelte-plugin.js
.
const svelte = require("svelte/compiler");
const fs = require("fs");
const path = require("path");
let userSvelteConfig = {};
try {
userSvelteConfig = require(path.join(process.cwd(), "svelte.config.js"));
} catch (err) {
// no user-provided config found, safe to ignore
}
exports.build = async function build(fileLoc) {
const { preprocess: preprocessOptions, ...svelteOptions } = userSvelteConfig;
const fileSource = fs.readFileSync(fileLoc, { encoding: "utf-8" });
let codeToCompile = fileSource;
// PRE-PROCESS
if (preprocessOptions) {
({ code: codeToCompile } = await svelte.preprocess(fileSource, preprocessOptions));
}
// COMPILE
const result = svelte.compile(codeToCompile, {
dev: process.env.NODE_ENV !== "production",
...svelteOptions,
});
return { result: result.js.code };
};
svelte.preprocess
is async so I've made the build function async and awaited the result. The other changes are that I've imported path
and replaced cwd
with process.cwd()
.
It's working as expected except that trying to process typescript with https://github.com/kaisermann/svelte-preprocess is throwing an error. I don't think that's anything to do with this though so I will raise an issue there.
from create-snowpack-app.
Sounds good! I'll create a PR to add this to the plugin
from create-snowpack-app.
this was indeed quick. I will give this a test run, cheers to you both 😄
from create-snowpack-app.
Thanks for the quick turn around
from create-snowpack-app.
Related Issues (20)
- Babel Plugin import not working with snowpack HOT 1
- [webpack] Support non-SPA use-case HOT 1
- [plugin-webpack] Not compatible with [app-template-vue] HOT 1
- [plugin-webpack] Production builds: No bundle splitting based on `import(...)` directives HOT 9
- [plugin-svelte] Can not find App.css.js HOT 3
- Provide a blank template for Typescript HOT 4
- Feature request: Add pnpm as install option HOT 5
- Building is broken for Svelte HOT 5
- Add support for creating .gitignore from template HOT 5
- Can we have cli wizard prompts? HOT 6
- @snowpack/app-template-blank-typescript does not exist on NPM HOT 5
- onboard validations to ensure that the respective package manager is installed HOT 4
- plugin-dotenv doesn't work HOT 2
- [plugin-webpack] granular chunking for multi-page apps?
- [@snowpack/app-template-11ty] - HMR issue eleventy templates HOT 1
- Migrating Reactboilerplate app into CSA failing HOT 2
- [@snowpack/plugin-webpack] Use public path instead of baseUrl HOT 1
- [pnpm] missing dependencies in app-template-react-typescript (--use-pnpm) HOT 2
- svelte-typescript-template HOT 1
- Vue cannot use PostCSS in style tag. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 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.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
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.
from create-snowpack-app.