From c2574f5dd41af7c9375f85da538f0cefeac2b80b Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Thu, 12 Jan 2023 15:12:31 +0100 Subject: [PATCH 1/7] docs: explain why typescript is added either way for a library project closes #8189 --- documentation/docs/30-advanced/70-packaging.md | 2 +- packages/create-svelte/bin.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/documentation/docs/30-advanced/70-packaging.md b/documentation/docs/30-advanced/70-packaging.md index 571b21c58eac..94e3fb02951e 100644 --- a/documentation/docs/30-advanced/70-packaging.md +++ b/documentation/docs/30-advanced/70-packaging.md @@ -13,7 +13,7 @@ A component library has the exact same structure as a SvelteKit app, except that Running the `svelte-package` command from `@sveltejs/package` will take the contents of `src/lib` and generate a `package` directory (which can be [configured](/docs/configuration)) containing the following: - All the files in `src/lib`, unless you [configure](/docs/configuration) custom `include`/`exclude` options. Svelte components will be preprocessed, TypeScript files will be transpiled to JavaScript. -- Type definitions (`d.ts` files) which are generated for Svelte, JavaScript and TypeScript files. You need to install `typescript >= 4.0.0` for this. Type definitions are placed next to their implementation, hand-written `d.ts` files are copied over as is. You can [disable generation](/docs/configuration), but we strongly recommend against it. +- Type definitions (`d.ts` files) which are generated for Svelte, JavaScript and TypeScript files. You need to install `typescript >= 4.0.0` for this. Type definitions are placed next to their implementation, hand-written `d.ts` files are copied over as is. You can [disable generation](/docs/configuration), but we strongly recommend against it: People using your library might use TypeScript, for which they require these type definition files. - A `package.json` copied from the project root with all fields except `"scripts"`, `"publishConfig.directory"` and `"publishConfig.linkDirectory"`. The `"dependencies"` field is included, which means you should add packages that you only need for your documentation or demo site to `"devDependencies"`. A `"type": "module"` and an `"exports"` field will be added if it's not defined in the original file. The `"exports"` field contains the package's entry points. By default, all files in `src/lib` will be treated as an entry point unless they start with (or live in a directory that starts with) an underscore, but you can [configure](/docs/configuration) this behaviour. If you have a `src/lib/index.js` or `src/lib/index.svelte` file, it will be treated as the package root. diff --git a/packages/create-svelte/bin.js b/packages/create-svelte/bin.js index c3447a7f0630..afa531704fff 100755 --- a/packages/create-svelte/bin.js +++ b/packages/create-svelte/bin.js @@ -136,6 +136,10 @@ async function main() { } else if (options.types === 'checkjs') { console.log(bold('✔ Type-checked JavaScript')); console.log(' https://www.typescriptlang.org/tsconfig#checkJs'); + } else if (options.template === 'skeletonlib') { + console.log( + '🛈 You chose to not add type checking, but TypeScript will still be installed in order to generate type definitions when building the library' + ); } if (options.eslint) { From bde66a4a5deae1a2d3ca0f257ecf1ceeb0fc58ac Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Thu, 12 Jan 2023 15:42:19 +0100 Subject: [PATCH 2/7] add jsconfig for lib, closes #7475 --- .../shared/+libskeleton-typescript/jsconfig.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 packages/create-svelte/shared/+libskeleton-typescript/jsconfig.json diff --git a/packages/create-svelte/shared/+libskeleton-typescript/jsconfig.json b/packages/create-svelte/shared/+libskeleton-typescript/jsconfig.json new file mode 100644 index 000000000000..7125447cb881 --- /dev/null +++ b/packages/create-svelte/shared/+libskeleton-typescript/jsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "moduleResolution": "NodeNext" + } +} From 6d53e8fc746fb92a636fd093212b8996b404f3fc Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 12 Jan 2023 22:15:59 -0500 Subject: [PATCH 3/7] Update documentation/docs/30-advanced/70-packaging.md --- documentation/docs/30-advanced/70-packaging.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/30-advanced/70-packaging.md b/documentation/docs/30-advanced/70-packaging.md index 94e3fb02951e..f39f53446783 100644 --- a/documentation/docs/30-advanced/70-packaging.md +++ b/documentation/docs/30-advanced/70-packaging.md @@ -13,7 +13,7 @@ A component library has the exact same structure as a SvelteKit app, except that Running the `svelte-package` command from `@sveltejs/package` will take the contents of `src/lib` and generate a `package` directory (which can be [configured](/docs/configuration)) containing the following: - All the files in `src/lib`, unless you [configure](/docs/configuration) custom `include`/`exclude` options. Svelte components will be preprocessed, TypeScript files will be transpiled to JavaScript. -- Type definitions (`d.ts` files) which are generated for Svelte, JavaScript and TypeScript files. You need to install `typescript >= 4.0.0` for this. Type definitions are placed next to their implementation, hand-written `d.ts` files are copied over as is. You can [disable generation](/docs/configuration), but we strongly recommend against it: People using your library might use TypeScript, for which they require these type definition files. +- Type definitions (`d.ts` files) which are generated for Svelte, JavaScript and TypeScript files. You need to install `typescript >= 4.0.0` for this. Type definitions are placed next to their implementation, hand-written `d.ts` files are copied over as is. You can [disable generation](/docs/configuration), but we strongly recommend against it — people using your library might use TypeScript, for which they require these type definition files. - A `package.json` copied from the project root with all fields except `"scripts"`, `"publishConfig.directory"` and `"publishConfig.linkDirectory"`. The `"dependencies"` field is included, which means you should add packages that you only need for your documentation or demo site to `"devDependencies"`. A `"type": "module"` and an `"exports"` field will be added if it's not defined in the original file. The `"exports"` field contains the package's entry points. By default, all files in `src/lib` will be treated as an entry point unless they start with (or live in a directory that starts with) an underscore, but you can [configure](/docs/configuration) this behaviour. If you have a `src/lib/index.js` or `src/lib/index.svelte` file, it will be treated as the package root. From cf941643cd4740c36276295837d2cd2c739eceb1 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Fri, 13 Jan 2023 10:37:05 +0100 Subject: [PATCH 4/7] replace icon with warning sign --- packages/create-svelte/bin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-svelte/bin.js b/packages/create-svelte/bin.js index afa531704fff..8b9d5ec42d8b 100755 --- a/packages/create-svelte/bin.js +++ b/packages/create-svelte/bin.js @@ -138,7 +138,7 @@ async function main() { console.log(' https://www.typescriptlang.org/tsconfig#checkJs'); } else if (options.template === 'skeletonlib') { console.log( - '🛈 You chose to not add type checking, but TypeScript will still be installed in order to generate type definitions when building the library' + '⚠ You chose to not add type checking, but TypeScript will still be installed in order to generate type definitions when building the library' ); } From baf386aca2ad565ecea7f3a81260630fbe861334 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Fri, 13 Jan 2023 10:38:54 +0100 Subject: [PATCH 5/7] changeset --- .changeset/slow-stingrays-hunt.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/slow-stingrays-hunt.md diff --git a/.changeset/slow-stingrays-hunt.md b/.changeset/slow-stingrays-hunt.md new file mode 100644 index 000000000000..483e77479703 --- /dev/null +++ b/.changeset/slow-stingrays-hunt.md @@ -0,0 +1,5 @@ +--- +'create-svelte': patch +--- + +fix: note why TypeScript is always installed for library projects and add jsconfig From cebe0da3b99e572190508ab497359eda2a33ef5e Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 13 Jan 2023 09:00:17 -0500 Subject: [PATCH 6/7] unicode warning symbol looks strangely shit - use a yellow triangle instead --- packages/create-svelte/bin.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/create-svelte/bin.js b/packages/create-svelte/bin.js index 8b9d5ec42d8b..b2bdcbd301f9 100755 --- a/packages/create-svelte/bin.js +++ b/packages/create-svelte/bin.js @@ -1,7 +1,7 @@ #!/usr/bin/env node import fs from 'fs'; import path from 'path'; -import { bold, cyan, gray, green, red } from 'kleur/colors'; +import { bold, cyan, gray, green, yellow } from 'kleur/colors'; import prompts from 'prompts'; import { create } from './index.js'; import { dist } from './utils.js'; @@ -137,8 +137,9 @@ async function main() { console.log(bold('✔ Type-checked JavaScript')); console.log(' https://www.typescriptlang.org/tsconfig#checkJs'); } else if (options.template === 'skeletonlib') { + const warning = bold(yellow('▲')); console.log( - '⚠ You chose to not add type checking, but TypeScript will still be installed in order to generate type definitions when building the library' + `${warning} You chose to not add type checking, but TypeScript will still be installed in order to generate type definitions when building the library` ); } From e47149a89527bf0c4b08fd5b0e3dfd5951d816e6 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 13 Jan 2023 09:02:59 -0500 Subject: [PATCH 7/7] the bold does nothing --- packages/create-svelte/bin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-svelte/bin.js b/packages/create-svelte/bin.js index b2bdcbd301f9..868b6122351b 100755 --- a/packages/create-svelte/bin.js +++ b/packages/create-svelte/bin.js @@ -137,7 +137,7 @@ async function main() { console.log(bold('✔ Type-checked JavaScript')); console.log(' https://www.typescriptlang.org/tsconfig#checkJs'); } else if (options.template === 'skeletonlib') { - const warning = bold(yellow('▲')); + const warning = yellow('▲'); console.log( `${warning} You chose to not add type checking, but TypeScript will still be installed in order to generate type definitions when building the library` );