Svelte + svelte-preprocess template

[fredkschott]

Svelte + svelte-preprocess template

[FredKSchott]

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!

[jamesopstad]

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.

[jthegedus]

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.

[FredKSchott]

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 };
};

[jamesopstad]

That was fast! Yes, will try it out and get back to you.

[jamesopstad]

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.

[FredKSchott]

Sounds good! I'll create a PR to add this to the plugin

[jthegedus]

this was indeed quick. I will give this a test run, cheers to you both 😄

[jthegedus]

Thanks for the quick turn around