From 5fd27229b075361e303addf5c00520a13d2e4856 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Sat, 13 Mar 2021 10:37:11 +0100 Subject: [PATCH] Use jsconfig in JS projects Fixes #506 Also reorganized ts template specific files a little. There's no a dedicated folder for TS files from which they are copied into the template. This separates the file contents from the copy-logic. --- .changeset/lemon-taxis-juggle.md | 5 + .../cli/modifications/add_typescript.js | 93 ++----------------- .../template/{tsconfig.json => jsconfig.json} | 1 - .../ts-template/src/globals.d.ts | 54 +++++++++++ .../create-svelte/ts-template/tsconfig.json | 27 ++++++ 5 files changed, 93 insertions(+), 87 deletions(-) create mode 100644 .changeset/lemon-taxis-juggle.md rename packages/create-svelte/template/{tsconfig.json => jsconfig.json} (92%) create mode 100644 packages/create-svelte/ts-template/src/globals.d.ts create mode 100644 packages/create-svelte/ts-template/tsconfig.json diff --git a/.changeset/lemon-taxis-juggle.md b/.changeset/lemon-taxis-juggle.md new file mode 100644 index 000000000000..e3ab8faaebce --- /dev/null +++ b/.changeset/lemon-taxis-juggle.md @@ -0,0 +1,5 @@ +--- +'create-svelte': patch +--- + +jsconfig for js projects diff --git a/packages/create-svelte/cli/modifications/add_typescript.js b/packages/create-svelte/cli/modifications/add_typescript.js index c4b1f8ae333f..285d78a7429a 100644 --- a/packages/create-svelte/cli/modifications/add_typescript.js +++ b/packages/create-svelte/cli/modifications/add_typescript.js @@ -1,6 +1,6 @@ import fs from 'fs'; import { bold, green } from 'kleur/colors'; -import path from 'path'; +import { join } from 'path'; import { add_svelte_preprocess_to_config, update_component, update_package_json } from './utils'; export default async function add_typescript(cwd, yes) { @@ -14,6 +14,7 @@ export default async function add_typescript(cwd, yes) { [' - - \`\`\` - */ -declare module "*.gif" { - const value: string; - export = value; -} - -declare module "*.jpg" { - const value: string; - export = value; -} - -declare module "*.jpeg" { - const value: string; - export = value; -} - -declare module "*.png" { - const value: string; - export = value; + copy_from_ts_template(cwd, 'src', 'globals.d.ts'); } -declare module "*.svg" { - const value: string; - export = value; -} - -declare module "*.webp" { - const value: string; - export = value; -} -//#endregion -` - ); +function copy_from_ts_template(cwd, ...path) { + fs.copyFileSync(join(__dirname, 'ts-template', ...path), join(cwd, ...path)); } diff --git a/packages/create-svelte/template/tsconfig.json b/packages/create-svelte/template/jsconfig.json similarity index 92% rename from packages/create-svelte/template/tsconfig.json rename to packages/create-svelte/template/jsconfig.json index 9b33f8d2644a..be7efbd7350e 100644 --- a/packages/create-svelte/template/tsconfig.json +++ b/packages/create-svelte/template/jsconfig.json @@ -1,6 +1,5 @@ { "compilerOptions": { - "allowJs": true, "paths": { "$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"], "$components/*": ["src/components/*"] diff --git a/packages/create-svelte/ts-template/src/globals.d.ts b/packages/create-svelte/ts-template/src/globals.d.ts new file mode 100644 index 000000000000..ef3b4bfef94a --- /dev/null +++ b/packages/create-svelte/ts-template/src/globals.d.ts @@ -0,0 +1,54 @@ +/// + +//#region Ensure Svelte file endings have a type for TypeScript +/** + * These declarations tell TypeScript that we allow import of Svelte files in TS files, e.g. + * ``` + import Component from './Component.svelte'; + ``` + */ +declare module '*.svelte' { + export { SvelteComponent as default } from 'svelte'; +} +//#endregion + +//#region Ensure image file endings have a type for TypeScript +/** + * These declarations tell TypeScript that we allow import of images, e.g. + * ``` + + + ``` + */ +declare module '*.gif' { + const value: string; + export = value; +} + +declare module '*.jpg' { + const value: string; + export = value; +} + +declare module '*.jpeg' { + const value: string; + export = value; +} + +declare module '*.png' { + const value: string; + export = value; +} + +declare module '*.svg' { + const value: string; + export = value; +} + +declare module '*.webp' { + const value: string; + export = value; +} +//#endregion diff --git a/packages/create-svelte/ts-template/tsconfig.json b/packages/create-svelte/ts-template/tsconfig.json new file mode 100644 index 000000000000..9de39abd0475 --- /dev/null +++ b/packages/create-svelte/ts-template/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "moduleResolution": "node", + "target": "es2017", + /** + svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript + to enforce using \`import type\` instead of \`import\` for Types. + */ + "importsNotUsedAsValues": "error", + "isolatedModules": true, + /** + To have warnings/errors of the Svelte compiler at the correct position, + enable source maps by default. + */ + "sourceMap": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "baseUrl": ".", + "allowJs": true, + "paths": { + "$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"], + "$components/*": ["src/components/*"] + } + }, + "include": ["src/**/*.js", "src/**/*.ts", "src/**/*.svelte"] +}