Skip to content

Instantly share code, notes, and snippets.

@zetashift
Last active April 27, 2023 19:54
Show Gist options
  • Save zetashift/3f6e72c2294d5fb77426caaf5f70f655 to your computer and use it in GitHub Desktop.
Save zetashift/3f6e72c2294d5fb77426caaf5f70f655 to your computer and use it in GitHub Desktop.
A SvelteKit projen based off of NextJS (WIP)
/* eslint-disable import/no-extraneous-dependencies */
import {
NodeProjectOptions,
TypeScriptModuleResolution,
} from "projen/lib/javascript";
import {
TypeScriptAppProject,
TypeScriptProjectOptions,
} from "projen/lib/typescript";
import { deepMerge } from "projen/lib/util";
import { PostCss } from "projen/lib/web";
export interface SvelteKitTypeScriptProjectOptions extends NodeProjectOptions {
/** The directory in which source files reside */
readonly srcdir: string;
/**
* Setup Tailwind as a PostCSS plugin
*/
readonly tailwind: boolean;
}
export class SvelteKitTypeScriptProject extends TypeScriptAppProject {
/** The directory in which source files reside */
public readonly srcdir: string;
/**
* Setup Tailwind as a PostCSS plugin
*/
public readonly tailwind: boolean;
constructor(options: SvelteKitTypeScriptProjectOptions) {
const defaultOptions = {
srcdir: "src",
eslint: false,
minNodeVersion: "16.20.0",
jest: false,
devDeps: [
"@sveltejs/adapter-auto",
"@sveltejs/kit",
"svelte",
"tslib",
"vite",
"svelte-check",
],
tsconfig: {
// TODO: this needs to extend the svelte-kit tsconfig
include: ["**/*.ts"],
compilerOptions: {
allowJs: true,
noEmit: true,
allowSyntheticDefaultImports: true,
esModuleInterop: true,
moduleResolution: TypeScriptModuleResolution.NODE,
resolveJsonModule: true,
module: "es2022",
skipLibCheck: true,
inlineSourceMap: false,
sourceMap: true,
paths: {
"~/*": ["./src/*"],
},
lib: ["dom", "dom.iterable", "es6", "ES2020", "ESNext"],
strict: true,
target: "ES2020",
},
},
};
super(
deepMerge([
defaultOptions,
options,
{ sampleCode: false },
]) as TypeScriptProjectOptions
);
this.srcdir = options.srcdir ?? "src";
this.tailwind = options.tailwind ?? true;
this.package.addField("type", "module");
const devTask = this.tasks.addTask("dev");
this.tasks.removeTask("build");
const buildTask = this.tasks.addTask("build");
devTask.exec("vite dev");
buildTask.exec("vite build");
const checkTask = this.tasks.addTask("check");
checkTask.exec(
"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
);
if (this.tailwind) {
new PostCss(this, { tailwind: true });
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment