From f836915f8be34ed5da457262d07efe34a2ecdf4b Mon Sep 17 00:00:00 2001 From: GrygrFlzr Date: Tue, 16 Mar 2021 19:21:04 +0700 Subject: [PATCH] feat(create-app): add 'svelte' and 'svelte-ts' options --- packages/create-app/README.md | 2 + packages/create-app/index.js | 5 +- .../.vscode/extensions.json | 3 + .../create-app/template-svelte-ts/README.md | 11 +++ .../create-app/template-svelte-ts/_gitignore | 4 ++ .../template-svelte-ts/globals.d.ts | 2 + .../create-app/template-svelte-ts/index.html | 13 ++++ .../template-svelte-ts/package.json | 16 +++++ .../template-svelte-ts/public/favicon.ico | Bin 0 -> 1150 bytes .../template-svelte-ts/src/App.svelte | 65 ++++++++++++++++++ .../template-svelte-ts/src/assets/svelte.png | Bin 0 -> 5185 bytes .../template-svelte-ts/src/lib/Counter.svelte | 36 ++++++++++ .../template-svelte-ts/src/lib/hmr-stores.ts | 21 ++++++ .../create-app/template-svelte-ts/src/main.ts | 7 ++ .../template-svelte-ts/svelte.config.cjs | 7 ++ .../template-svelte-ts/tsconfig.json | 36 ++++++++++ .../template-svelte-ts/vite.config.js | 7 ++ .../template-svelte/.vscode/extensions.json | 3 + packages/create-app/template-svelte/README.md | 11 +++ .../create-app/template-svelte/_gitignore | 4 ++ .../create-app/template-svelte/globals.d.ts | 2 + .../create-app/template-svelte/index.html | 13 ++++ .../create-app/template-svelte/jsconfig.json | 33 +++++++++ .../create-app/template-svelte/package.json | 14 ++++ .../template-svelte/public/favicon.ico | Bin 0 -> 1150 bytes .../create-app/template-svelte/src/App.svelte | 65 ++++++++++++++++++ .../template-svelte/src/assets/svelte.png | Bin 0 -> 5185 bytes .../template-svelte/src/lib/Counter.svelte | 37 ++++++++++ .../template-svelte/src/lib/hmr-stores.js | 29 ++++++++ .../create-app/template-svelte/src/main.js | 7 ++ .../create-app/template-svelte/vite.config.js | 7 ++ 31 files changed, 459 insertions(+), 1 deletion(-) create mode 100644 packages/create-app/template-svelte-ts/.vscode/extensions.json create mode 100644 packages/create-app/template-svelte-ts/README.md create mode 100644 packages/create-app/template-svelte-ts/_gitignore create mode 100644 packages/create-app/template-svelte-ts/globals.d.ts create mode 100644 packages/create-app/template-svelte-ts/index.html create mode 100644 packages/create-app/template-svelte-ts/package.json create mode 100644 packages/create-app/template-svelte-ts/public/favicon.ico create mode 100644 packages/create-app/template-svelte-ts/src/App.svelte create mode 100644 packages/create-app/template-svelte-ts/src/assets/svelte.png create mode 100644 packages/create-app/template-svelte-ts/src/lib/Counter.svelte create mode 100644 packages/create-app/template-svelte-ts/src/lib/hmr-stores.ts create mode 100644 packages/create-app/template-svelte-ts/src/main.ts create mode 100644 packages/create-app/template-svelte-ts/svelte.config.cjs create mode 100644 packages/create-app/template-svelte-ts/tsconfig.json create mode 100644 packages/create-app/template-svelte-ts/vite.config.js create mode 100644 packages/create-app/template-svelte/.vscode/extensions.json create mode 100644 packages/create-app/template-svelte/README.md create mode 100644 packages/create-app/template-svelte/_gitignore create mode 100644 packages/create-app/template-svelte/globals.d.ts create mode 100644 packages/create-app/template-svelte/index.html create mode 100644 packages/create-app/template-svelte/jsconfig.json create mode 100644 packages/create-app/template-svelte/package.json create mode 100644 packages/create-app/template-svelte/public/favicon.ico create mode 100644 packages/create-app/template-svelte/src/App.svelte create mode 100644 packages/create-app/template-svelte/src/assets/svelte.png create mode 100644 packages/create-app/template-svelte/src/lib/Counter.svelte create mode 100644 packages/create-app/template-svelte/src/lib/hmr-stores.js create mode 100644 packages/create-app/template-svelte/src/main.js create mode 100644 packages/create-app/template-svelte/vite.config.js diff --git a/packages/create-app/README.md b/packages/create-app/README.md index c4ab2e42728621..f3b4b76b598121 100644 --- a/packages/create-app/README.md +++ b/packages/create-app/README.md @@ -43,6 +43,8 @@ Currently supported template presets include: - `preact-ts` - `lit-element` - `lit-element-ts` +- `svelte` +- `svelte-ts` ## Community Templates diff --git a/packages/create-app/index.js b/packages/create-app/index.js index 0cc1af168e6bfd..2613a66ab50cf2 100755 --- a/packages/create-app/index.js +++ b/packages/create-app/index.js @@ -11,6 +11,7 @@ const { cyan, magenta, lightRed, + red, stripColors } = require('kolorist') @@ -25,7 +26,9 @@ const TEMPLATES = [ magenta('preact'), magenta('preact-ts'), lightRed('lit-element'), - lightRed('lit-element-ts') + lightRed('lit-element-ts'), + red('svelte'), + red('svelte-ts') ] const renameFiles = { diff --git a/packages/create-app/template-svelte-ts/.vscode/extensions.json b/packages/create-app/template-svelte-ts/.vscode/extensions.json new file mode 100644 index 00000000000000..bdef82015138f5 --- /dev/null +++ b/packages/create-app/template-svelte-ts/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["svelte.svelte-vscode"] +} diff --git a/packages/create-app/template-svelte-ts/README.md b/packages/create-app/template-svelte-ts/README.md new file mode 100644 index 00000000000000..2e42916edc251b --- /dev/null +++ b/packages/create-app/template-svelte-ts/README.md @@ -0,0 +1,11 @@ +# Svelte + TS + Vite + +This template should help get you started developing with Svelte and TypeScript in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). + +## Need an official Svelte framework? + +Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more. diff --git a/packages/create-app/template-svelte-ts/_gitignore b/packages/create-app/template-svelte-ts/_gitignore new file mode 100644 index 00000000000000..126fe84d533f52 --- /dev/null +++ b/packages/create-app/template-svelte-ts/_gitignore @@ -0,0 +1,4 @@ +/node_modules/ +/dist/ +/.vscode/ +.DS_Store diff --git a/packages/create-app/template-svelte-ts/globals.d.ts b/packages/create-app/template-svelte-ts/globals.d.ts new file mode 100644 index 00000000000000..4078e7476a2eaf --- /dev/null +++ b/packages/create-app/template-svelte-ts/globals.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/packages/create-app/template-svelte-ts/index.html b/packages/create-app/template-svelte-ts/index.html new file mode 100644 index 00000000000000..d2f6839bab176c --- /dev/null +++ b/packages/create-app/template-svelte-ts/index.html @@ -0,0 +1,13 @@ + + + + + + + Svelte + TS + Vite App + + +
+ + + diff --git a/packages/create-app/template-svelte-ts/package.json b/packages/create-app/template-svelte-ts/package.json new file mode 100644 index 00000000000000..b6356f160bc5b2 --- /dev/null +++ b/packages/create-app/template-svelte-ts/package.json @@ -0,0 +1,16 @@ +{ + "name": "vite-svelte-ts-starter", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "serve": "vite preview" + }, + "devDependencies": { + "@svitejs/vite-plugin-svelte": "^0.11.1", + "svelte": "^3.35.0", + "svelte-preprocess": "^4.6.9", + "typescript": "^4.2.3", + "vite": "^2.1.0" + } +} diff --git a/packages/create-app/template-svelte-ts/public/favicon.ico b/packages/create-app/template-svelte-ts/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..d75d248ef0b15096a95054643a4d97f5d9b60846 GIT binary patch literal 1150 zcmaKqSxA*Z7>4KMS_;~x;8i!JU{-`tpyx!I(n2NFMU)w2L{WiMS3#Lcp@vrpA*5Yp zSy6|`AkYfDD(e{`n8yX0pLf20X1@3RmKkGw`Vte3=0)aUq%ldx zm^49K+Hw0b#^`KboP)QXJOwbuVUFxlAs{RfqJ+twGylWfOp{Hc$s#253LlN1nsFVc zKa>40?h5(7PTC6ltDx)(Y&Ze2xggCq(kK? zTA`;gAfKD!+uFjpxc_A3+Ma(L28W=z4Gvs@r*ECk`;c45=S#;=oA|abt`f&j5&uJO z3Dn+&^gZ%h4JidsaTR{{!_Y8PUx(-%PosPy2gi@qIvBMMYz;e3L1{f~mrd9RdB>pZ zD}4R|sk_C`;=cT&r)c=8u>7h9)u32*SbL`xiq3(pq5C^5-sSOw;<|fv@nfXfl&U`2 z81K5ExDp;bf#DISW%IY%k&2-noShOoz-;kb(u?5RFX-ro?87j3GZdCXrFc8bTx}jd zz_n@djWnxc*TbbCjEq80FPyG}1zQwvjq7R6ZSWuQ@_#A*LN5n<3$BI?X}q%iD!B-s zdSFcNp!EgpJr6CAK?klug4>=)Tv z+F#{yt>6EK)3NU=L&y_W3UNaC?Tg=6YE0)^V;(0Mb0$WJ7>7@Lg0~+3x9d)!Pd + import logo from './assets/svelte.png' + import Counter from './lib/Counter.svelte' + + +
+ Svelte Logo +

Hello Typescript!

+ + + +

+ Visit svelte.dev to learn how to build Svelte + apps. +

+ +

+ Check out SvelteKit for + the officially supported framework, also powered by Vite! +

+
+ + diff --git a/packages/create-app/template-svelte-ts/src/assets/svelte.png b/packages/create-app/template-svelte-ts/src/assets/svelte.png new file mode 100644 index 0000000000000000000000000000000000000000..e673c91c7bcb0e3a1be737745af56990613a641e GIT binary patch literal 5185 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 literal 0 HcmV?d00001 diff --git a/packages/create-app/template-svelte-ts/src/lib/Counter.svelte b/packages/create-app/template-svelte-ts/src/lib/Counter.svelte new file mode 100644 index 00000000000000..da35d76dafe7d3 --- /dev/null +++ b/packages/create-app/template-svelte-ts/src/lib/Counter.svelte @@ -0,0 +1,36 @@ + + + + + diff --git a/packages/create-app/template-svelte-ts/src/lib/hmr-stores.ts b/packages/create-app/template-svelte-ts/src/lib/hmr-stores.ts new file mode 100644 index 00000000000000..2b2ef88b53edd9 --- /dev/null +++ b/packages/create-app/template-svelte-ts/src/lib/hmr-stores.ts @@ -0,0 +1,21 @@ +// Customized HMR-safe stores +// Based off https://github.com/svitejs/svite/blob/ddec6b9/packages/playground/hmr/src/stores/hmr-stores.js +import { writable } from 'svelte/store' +import type { Writable } from 'svelte/store' + +let stores: Record> = {} + +export function getStore(id: string, initialValue: T): Writable { + return stores[id] || (stores[id] = writable(initialValue)) +} + +// preserve the store across HMR updates +if (import.meta.hot) { + if (import.meta.hot.data.stores) { + stores = import.meta.hot.data.stores + } + import.meta.hot.accept() + import.meta.hot.dispose(() => { + import.meta.hot.data.stores = stores + }) +} diff --git a/packages/create-app/template-svelte-ts/src/main.ts b/packages/create-app/template-svelte-ts/src/main.ts new file mode 100644 index 00000000000000..0dfb1eefa5c33b --- /dev/null +++ b/packages/create-app/template-svelte-ts/src/main.ts @@ -0,0 +1,7 @@ +import App from './App.svelte' + +const app = new App({ + target: document.body +}) + +export default app diff --git a/packages/create-app/template-svelte-ts/svelte.config.cjs b/packages/create-app/template-svelte-ts/svelte.config.cjs new file mode 100644 index 00000000000000..0b32783a0c9940 --- /dev/null +++ b/packages/create-app/template-svelte-ts/svelte.config.cjs @@ -0,0 +1,7 @@ +const sveltePreprocess = require('svelte-preprocess') + +module.exports = { + // Consult https://github.com/sveltejs/svelte-preprocess + // for more information about preprocessors + preprocess: sveltePreprocess() +} diff --git a/packages/create-app/template-svelte-ts/tsconfig.json b/packages/create-app/template-svelte-ts/tsconfig.json new file mode 100644 index 00000000000000..63a55db19f9b89 --- /dev/null +++ b/packages/create-app/template-svelte-ts/tsconfig.json @@ -0,0 +1,36 @@ +{ + "compilerOptions": { + "moduleResolution": "node", + "target": "esnext", + "module": "esnext", + /** + * 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": ".", + /** + * Typecheck JS in `.svelte` and `.js` files by default. + * Disable checkJs if you'd like to use dynamic types in JS. + * Note that setting allowJs false does not prevent the use + * of JS in `.svelte` files. + */ + "allowJs": true, + "checkJs": true + }, + /** + * Use globals.d.ts instead of compilerOptions.types + * to avoid limiting type declarations. + */ + "include": ["globals.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"] +} diff --git a/packages/create-app/template-svelte-ts/vite.config.js b/packages/create-app/template-svelte-ts/vite.config.js new file mode 100644 index 00000000000000..0f1999654603c9 --- /dev/null +++ b/packages/create-app/template-svelte-ts/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import svelte from '@svitejs/vite-plugin-svelte' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [svelte()] +}) diff --git a/packages/create-app/template-svelte/.vscode/extensions.json b/packages/create-app/template-svelte/.vscode/extensions.json new file mode 100644 index 00000000000000..bdef82015138f5 --- /dev/null +++ b/packages/create-app/template-svelte/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["svelte.svelte-vscode"] +} diff --git a/packages/create-app/template-svelte/README.md b/packages/create-app/template-svelte/README.md new file mode 100644 index 00000000000000..6bf819e309a7b7 --- /dev/null +++ b/packages/create-app/template-svelte/README.md @@ -0,0 +1,11 @@ +# Svelte + Vite + +This template should help get you started developing with Svelte in Vite. + +## Recommended IDE Setup + +[VSCode](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). + +## Need an official Svelte framework? + +Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more. diff --git a/packages/create-app/template-svelte/_gitignore b/packages/create-app/template-svelte/_gitignore new file mode 100644 index 00000000000000..126fe84d533f52 --- /dev/null +++ b/packages/create-app/template-svelte/_gitignore @@ -0,0 +1,4 @@ +/node_modules/ +/dist/ +/.vscode/ +.DS_Store diff --git a/packages/create-app/template-svelte/globals.d.ts b/packages/create-app/template-svelte/globals.d.ts new file mode 100644 index 00000000000000..4078e7476a2eaf --- /dev/null +++ b/packages/create-app/template-svelte/globals.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/packages/create-app/template-svelte/index.html b/packages/create-app/template-svelte/index.html new file mode 100644 index 00000000000000..4a3886b62cf793 --- /dev/null +++ b/packages/create-app/template-svelte/index.html @@ -0,0 +1,13 @@ + + + + + + + Svelte + Vite App + + +
+ + + diff --git a/packages/create-app/template-svelte/jsconfig.json b/packages/create-app/template-svelte/jsconfig.json new file mode 100644 index 00000000000000..69e281112333b4 --- /dev/null +++ b/packages/create-app/template-svelte/jsconfig.json @@ -0,0 +1,33 @@ +{ + "compilerOptions": { + "moduleResolution": "node", + "target": "esnext", + "module": "esnext", + /** + * 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": ".", + /** + * Typecheck JS in `.svelte` and `.js` files by default. + * Disable this if you'd like to use dynamic types. + */ + "checkJs": true + }, + /** + * Use globals.d.ts instead of compilerOptions.types + * to avoid limiting type declarations. + */ + "include": ["globals.d.ts", "src/**/*.js", "src/**/*.svelte"] +} diff --git a/packages/create-app/template-svelte/package.json b/packages/create-app/template-svelte/package.json new file mode 100644 index 00000000000000..6645d9c12a7f1c --- /dev/null +++ b/packages/create-app/template-svelte/package.json @@ -0,0 +1,14 @@ +{ + "name": "vite-svelte-starter", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "serve": "vite preview" + }, + "devDependencies": { + "@svitejs/vite-plugin-svelte": "^0.11.1", + "svelte": "^3.35.0", + "vite": "^2.1.0" + } +} diff --git a/packages/create-app/template-svelte/public/favicon.ico b/packages/create-app/template-svelte/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..d75d248ef0b15096a95054643a4d97f5d9b60846 GIT binary patch literal 1150 zcmaKqSxA*Z7>4KMS_;~x;8i!JU{-`tpyx!I(n2NFMU)w2L{WiMS3#Lcp@vrpA*5Yp zSy6|`AkYfDD(e{`n8yX0pLf20X1@3RmKkGw`Vte3=0)aUq%ldx zm^49K+Hw0b#^`KboP)QXJOwbuVUFxlAs{RfqJ+twGylWfOp{Hc$s#253LlN1nsFVc zKa>40?h5(7PTC6ltDx)(Y&Ze2xggCq(kK? zTA`;gAfKD!+uFjpxc_A3+Ma(L28W=z4Gvs@r*ECk`;c45=S#;=oA|abt`f&j5&uJO z3Dn+&^gZ%h4JidsaTR{{!_Y8PUx(-%PosPy2gi@qIvBMMYz;e3L1{f~mrd9RdB>pZ zD}4R|sk_C`;=cT&r)c=8u>7h9)u32*SbL`xiq3(pq5C^5-sSOw;<|fv@nfXfl&U`2 z81K5ExDp;bf#DISW%IY%k&2-noShOoz-;kb(u?5RFX-ro?87j3GZdCXrFc8bTx}jd zz_n@djWnxc*TbbCjEq80FPyG}1zQwvjq7R6ZSWuQ@_#A*LN5n<3$BI?X}q%iD!B-s zdSFcNp!EgpJr6CAK?klug4>=)Tv z+F#{yt>6EK)3NU=L&y_W3UNaC?Tg=6YE0)^V;(0Mb0$WJ7>7@Lg0~+3x9d)!Pd + import logo from './assets/svelte.png' + import Counter from './lib/Counter.svelte' + + +
+ Svelte Logo +

Hello world!

+ + + +

+ Visit svelte.dev to learn how to build Svelte + apps. +

+ +

+ Check out SvelteKit for + the officially supported framework, also powered by Vite! +

+
+ + diff --git a/packages/create-app/template-svelte/src/assets/svelte.png b/packages/create-app/template-svelte/src/assets/svelte.png new file mode 100644 index 0000000000000000000000000000000000000000..e673c91c7bcb0e3a1be737745af56990613a641e GIT binary patch literal 5185 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 literal 0 HcmV?d00001 diff --git a/packages/create-app/template-svelte/src/lib/Counter.svelte b/packages/create-app/template-svelte/src/lib/Counter.svelte new file mode 100644 index 00000000000000..5224771e987640 --- /dev/null +++ b/packages/create-app/template-svelte/src/lib/Counter.svelte @@ -0,0 +1,37 @@ + + + + + diff --git a/packages/create-app/template-svelte/src/lib/hmr-stores.js b/packages/create-app/template-svelte/src/lib/hmr-stores.js new file mode 100644 index 00000000000000..9cd6d0e7005880 --- /dev/null +++ b/packages/create-app/template-svelte/src/lib/hmr-stores.js @@ -0,0 +1,29 @@ +// Customized HMR-safe stores +// Based off https://github.com/svitejs/svite/blob/ddec6b9/packages/playground/hmr/src/stores/hmr-stores.js +import { writable } from 'svelte/store' + +/** + * @type { Record> } + */ +let stores = {} + +/** + * @template T + * @param { string } id + * @param { T } initialValue + * @returns { import('svelte/store').Writable } + */ +export function getStore(id, initialValue) { + return stores[id] || (stores[id] = writable(initialValue)) +} + +// preserve the store across HMR updates +if (import.meta.hot) { + if (import.meta.hot.data.stores) { + stores = import.meta.hot.data.stores + } + import.meta.hot.accept() + import.meta.hot.dispose(() => { + import.meta.hot.data.stores = stores + }) +} diff --git a/packages/create-app/template-svelte/src/main.js b/packages/create-app/template-svelte/src/main.js new file mode 100644 index 00000000000000..0dfb1eefa5c33b --- /dev/null +++ b/packages/create-app/template-svelte/src/main.js @@ -0,0 +1,7 @@ +import App from './App.svelte' + +const app = new App({ + target: document.body +}) + +export default app diff --git a/packages/create-app/template-svelte/vite.config.js b/packages/create-app/template-svelte/vite.config.js new file mode 100644 index 00000000000000..0f1999654603c9 --- /dev/null +++ b/packages/create-app/template-svelte/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import svelte from '@svitejs/vite-plugin-svelte' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [svelte()] +})