diff --git a/README.md b/README.md index 591699a..9888d41 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,54 @@ +# Vite templates for Solid + +This repository holds most of the official starter templates for Vite. + +You get: + +* HMR out of the box +* Minimal bundle size +* All the vite features.. + ## Install +Those templates dependencies are maintained via [pnpm](https://pnpm.js.org/) via `pnpm up -i --latest`. +This is the reason you see a `pnpm-lock.yaml`. This is my favorite package manager because it's fast and doesn't bloat the `node_modules` folder. + +Note that any package manager should work. I'd just advice you to remove the `pnpm-lock.yml` file before doing an install via your package manager of choice. + ```bash # Javascript template $ npx degit amoutonbrady/vite-template-solid/js my-solid-project $ cd my-solid-project -$ npm install # or pnpm install or yarn install +$ pnpm install # or npm install or yarn install ``` ```bash # Typescript template $ npx degit amoutonbrady/vite-template-solid/ts my-solid-project $ cd my-solid-project -$ npm install # or pnpm install or yarn install +$ pnpm install # or npm install or yarn install ``` ```bash # Typescript minimal template $ npx degit amoutonbrady/vite-template-solid/ts-minimal my-solid-project $ cd my-solid-project -$ npm install # or pnpm install or yarn install +$ pnpm install # or npm install or yarn install ``` ```bash # Typescript tailwind template $ npx degit amoutonbrady/vite-template-solid/ts-tailwind my-solid-project $ cd my-solid-project -$ npm install # or pnpm install or yarn install +$ pnpm install # or npm install or yarn install ``` +## I don't see a template that matches my need? + +You wish there was a template with a router? Bootstrap? Your favorite library? + +Feel free to make a pull request. Copy on of the template already available, tweak, name it properly and make a PR. + ## Troubleshooting It appears that Webstorm generate some weird triggers when saving a file. In order to prevent that you can follow [this thread](https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000154544-I-m-having-a-huge-problem-with-Webstorm-and-react-hot-loader-) and disable the **"Safe Write"** option in **"Settings | Appearance & Behavior | System Settings"**. diff --git a/js/README.md b/js/README.md index 03a2e3f..eb7540a 100644 --- a/js/README.md +++ b/js/README.md @@ -1,7 +1,12 @@ ## Usage +Those templates dependencies are maintained via [pnpm](https://pnpm.js.org/) via `pnpm up -i --latest`. +This is the reason you see a `pnpm-lock.yaml`. This is my favorite package manager because it's fast and doesn't bloat the `node_modules` folder. + +Note that any package manager should work. I'd just advice you to remove the `pnpm-lock.yml` file before doing an install via your package manager of choice. + ```bash -$ npm install # or pnpm install or yarn install +$ pnpm install # or npm install or yarn install ``` ## Available Scripts diff --git a/js/package.json b/js/package.json index e896428..65b6532 100644 --- a/js/package.json +++ b/js/package.json @@ -3,13 +3,13 @@ "version": "0.0.0", "description": "My solid + vite project", "scripts": { - "dev": "vite", + "start": "vite", "build": "vite build" }, "license": "ISC", "devDependencies": { - "vite": "^2.0.0-beta.33", - "vite-plugin-solid": "^0.6.0" + "vite": "^2.0.0-beta.44", + "vite-plugin-solid": "^0.7.0" }, "dependencies": { "solid-js": "^0.23.11" diff --git a/js/pnpm-lock.yaml b/js/pnpm-lock.yaml index ec38b9e..afa91c4 100644 --- a/js/pnpm-lock.yaml +++ b/js/pnpm-lock.yaml @@ -1,8 +1,8 @@ dependencies: solid-js: 0.23.11 devDependencies: - vite: 2.0.0-beta.33 - vite-plugin-solid: 0.6.0 + vite: 2.0.0-beta.44 + vite-plugin-solid: 0.7.0 lockfileVersion: 5.2 packages: /@babel/code-frame/7.12.11: @@ -295,12 +295,12 @@ packages: optional: true resolution: integrity: sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ== - /esbuild/0.8.33: + /esbuild/0.8.34: dev: true hasBin: true requiresBuild: true resolution: - integrity: sha512-2ms/P6Y9zJfopR9dKo2vHzhXKfGSNlquVVoVOF8YnhjuzZVrvManMVBPadBsR/t7jzIkRnwqvxrs7d4f3C3eyg== + integrity: sha512-tnr0V1ooakYr1aRLXQLzCn2GVG1kBTW3FWpRyC+NgrR3ntsouVpJOlTOV0BS4YLATx3/c+x3h/uBq9lWJlUAtQ== /escape-string-regexp/1.0.5: dev: true engines: @@ -413,7 +413,7 @@ packages: dev: true resolution: integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg== - /rollup/2.37.0: + /rollup/2.38.0: dev: true engines: node: '>=10.0.0' @@ -421,7 +421,7 @@ packages: optionalDependencies: fsevents: 2.1.3 resolution: - integrity: sha512-cbxuxkMGCQV+TnVh+yZSUerbVb5i8soRydbzHYoMNojgt7MMi+jDLLs24U9HHCssKkwkXmsj+LXcOZMldTbz2w== + integrity: sha512-ay9zDiNitZK/LNE/EM2+v5CZ7drkB2xyDljvb1fQJCGnq43ZWRkhxN145oV8GmoW1YNi4sA/1Jdkr2LfawJoXw== /safe-buffer/5.1.2: dev: true resolution: @@ -460,22 +460,22 @@ packages: node: '>=4' resolution: integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4= - /vite-plugin-solid/0.6.0: + /vite-plugin-solid/0.7.0: dependencies: '@babel/core': 7.12.10 '@babel/preset-typescript': 7.12.7_@babel+core@7.12.10 babel-preset-solid: 0.23.8_@babel+core@7.12.10 solid-js: 0.23.11 - vite: 2.0.0-beta.33 + vite: 2.0.0-beta.44 dev: true resolution: - integrity: sha512-nGF87Mh6g5ZKsmausJRRl1MQRduv2T/v57JZQVYPAtLhIboVE62BtfXBkVNKHBhU7WoKM+0wCm5bt34uEJwrRw== - /vite/2.0.0-beta.33: + integrity: sha512-gU0xb5zFpjIZiCvPpyir5fSBDIUPC2S32NYdJ9x8pbA/W0J/bzfB5yw2DTa7ZQoFXfnkNWZsEdsjkGXhw0aHTw== + /vite/2.0.0-beta.44: dependencies: - esbuild: 0.8.33 + esbuild: 0.8.34 postcss: 8.2.4 resolve: 1.19.0 - rollup: 2.37.0 + rollup: 2.38.0 dev: true engines: node: '>=12.0.0' @@ -483,8 +483,8 @@ packages: optionalDependencies: fsevents: 2.1.3 resolution: - integrity: sha512-vg7rZbO19w1+nkV3fXsk0ggfI7J8DBDm74olVKgN7/SarrlisOZI/YWwP4XybGVNPnsSsOG9pKXhXl1mY6Oe5A== + integrity: sha512-NTzmP7HEKDg3J5r3I22f87jK3ugPVEU81BQ8hWn3hNWU0msCziUlj7aHwItSUEbQA+ymqO3TBO2fN7Aa+OKckQ== specifiers: solid-js: ^0.23.11 - vite: ^2.0.0-beta.33 - vite-plugin-solid: ^0.6.0 + vite: ^2.0.0-beta.44 + vite-plugin-solid: ^0.7.0 diff --git a/js/src/App.jsx b/js/src/App.jsx index 1d726b6..5cef684 100644 --- a/js/src/App.jsx +++ b/js/src/App.jsx @@ -1,16 +1,16 @@ import logo from "./logo.svg"; -import "./App.css"; +import styles from "./App.module.css"; function App() { return ( -
-
- +
+
+ logo

Edit src/App.js and save to reload.

Open [http://localhost:3000](http://localhost:3000) to view it in the browser. diff --git a/ts-minimal/package.json b/ts-minimal/package.json index 9e461ff..f268b85 100644 --- a/ts-minimal/package.json +++ b/ts-minimal/package.json @@ -8,8 +8,8 @@ }, "license": "ISC", "devDependencies": { - "vite": "^2.0.0-beta.33", - "vite-plugin-solid": "^0.6.0" + "vite": "^2.0.0-beta.44", + "vite-plugin-solid": "^0.7.0" }, "dependencies": { "solid-js": "^0.23.11" diff --git a/ts-minimal/pnpm-lock.yaml b/ts-minimal/pnpm-lock.yaml index ec38b9e..afa91c4 100644 --- a/ts-minimal/pnpm-lock.yaml +++ b/ts-minimal/pnpm-lock.yaml @@ -1,8 +1,8 @@ dependencies: solid-js: 0.23.11 devDependencies: - vite: 2.0.0-beta.33 - vite-plugin-solid: 0.6.0 + vite: 2.0.0-beta.44 + vite-plugin-solid: 0.7.0 lockfileVersion: 5.2 packages: /@babel/code-frame/7.12.11: @@ -295,12 +295,12 @@ packages: optional: true resolution: integrity: sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ== - /esbuild/0.8.33: + /esbuild/0.8.34: dev: true hasBin: true requiresBuild: true resolution: - integrity: sha512-2ms/P6Y9zJfopR9dKo2vHzhXKfGSNlquVVoVOF8YnhjuzZVrvManMVBPadBsR/t7jzIkRnwqvxrs7d4f3C3eyg== + integrity: sha512-tnr0V1ooakYr1aRLXQLzCn2GVG1kBTW3FWpRyC+NgrR3ntsouVpJOlTOV0BS4YLATx3/c+x3h/uBq9lWJlUAtQ== /escape-string-regexp/1.0.5: dev: true engines: @@ -413,7 +413,7 @@ packages: dev: true resolution: integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg== - /rollup/2.37.0: + /rollup/2.38.0: dev: true engines: node: '>=10.0.0' @@ -421,7 +421,7 @@ packages: optionalDependencies: fsevents: 2.1.3 resolution: - integrity: sha512-cbxuxkMGCQV+TnVh+yZSUerbVb5i8soRydbzHYoMNojgt7MMi+jDLLs24U9HHCssKkwkXmsj+LXcOZMldTbz2w== + integrity: sha512-ay9zDiNitZK/LNE/EM2+v5CZ7drkB2xyDljvb1fQJCGnq43ZWRkhxN145oV8GmoW1YNi4sA/1Jdkr2LfawJoXw== /safe-buffer/5.1.2: dev: true resolution: @@ -460,22 +460,22 @@ packages: node: '>=4' resolution: integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4= - /vite-plugin-solid/0.6.0: + /vite-plugin-solid/0.7.0: dependencies: '@babel/core': 7.12.10 '@babel/preset-typescript': 7.12.7_@babel+core@7.12.10 babel-preset-solid: 0.23.8_@babel+core@7.12.10 solid-js: 0.23.11 - vite: 2.0.0-beta.33 + vite: 2.0.0-beta.44 dev: true resolution: - integrity: sha512-nGF87Mh6g5ZKsmausJRRl1MQRduv2T/v57JZQVYPAtLhIboVE62BtfXBkVNKHBhU7WoKM+0wCm5bt34uEJwrRw== - /vite/2.0.0-beta.33: + integrity: sha512-gU0xb5zFpjIZiCvPpyir5fSBDIUPC2S32NYdJ9x8pbA/W0J/bzfB5yw2DTa7ZQoFXfnkNWZsEdsjkGXhw0aHTw== + /vite/2.0.0-beta.44: dependencies: - esbuild: 0.8.33 + esbuild: 0.8.34 postcss: 8.2.4 resolve: 1.19.0 - rollup: 2.37.0 + rollup: 2.38.0 dev: true engines: node: '>=12.0.0' @@ -483,8 +483,8 @@ packages: optionalDependencies: fsevents: 2.1.3 resolution: - integrity: sha512-vg7rZbO19w1+nkV3fXsk0ggfI7J8DBDm74olVKgN7/SarrlisOZI/YWwP4XybGVNPnsSsOG9pKXhXl1mY6Oe5A== + integrity: sha512-NTzmP7HEKDg3J5r3I22f87jK3ugPVEU81BQ8hWn3hNWU0msCziUlj7aHwItSUEbQA+ymqO3TBO2fN7Aa+OKckQ== specifiers: solid-js: ^0.23.11 - vite: ^2.0.0-beta.33 - vite-plugin-solid: ^0.6.0 + vite: ^2.0.0-beta.44 + vite-plugin-solid: ^0.7.0 diff --git a/ts-minimal/src/App.tsx b/ts-minimal/src/App.tsx index fa552fe..31d3961 100644 --- a/ts-minimal/src/App.tsx +++ b/ts-minimal/src/App.tsx @@ -1,7 +1,7 @@ -import { Component } from "solid-js"; +import type { Component } from "solid-js"; const App: Component = () => { - return

minimal

; + return

Hello world!

; }; export default App; diff --git a/ts-minimal/src/index.tsx b/ts-minimal/src/index.tsx index d80ceb7..c103f5f 100644 --- a/ts-minimal/src/index.tsx +++ b/ts-minimal/src/index.tsx @@ -1,4 +1,4 @@ -import { render } from "solid-js/dom"; +import { render } from "solid-js/web"; import App from "./App"; diff --git a/ts-minimal/vite.config.ts b/ts-minimal/vite.config.ts index 2ef329d..31ca950 100644 --- a/ts-minimal/vite.config.ts +++ b/ts-minimal/vite.config.ts @@ -3,4 +3,8 @@ import solidPlugin from "vite-plugin-solid"; export default defineConfig({ plugins: [solidPlugin()], + build: { + target: "esnext", + polyfillDynamicImport: false, + }, }); diff --git a/ts/README.md b/ts/README.md index 03a2e3f..eb7540a 100644 --- a/ts/README.md +++ b/ts/README.md @@ -1,7 +1,12 @@ ## Usage +Those templates dependencies are maintained via [pnpm](https://pnpm.js.org/) via `pnpm up -i --latest`. +This is the reason you see a `pnpm-lock.yaml`. This is my favorite package manager because it's fast and doesn't bloat the `node_modules` folder. + +Note that any package manager should work. I'd just advice you to remove the `pnpm-lock.yml` file before doing an install via your package manager of choice. + ```bash -$ npm install # or pnpm install or yarn install +$ pnpm install # or npm install or yarn install ``` ## Available Scripts diff --git a/ts/package.json b/ts/package.json index 9e461ff..f5482a2 100644 --- a/ts/package.json +++ b/ts/package.json @@ -3,13 +3,13 @@ "version": "0.0.0", "description": "My solid + vite project + ts", "scripts": { - "dev": "vite", + "start": "vite", "build": "vite build" }, "license": "ISC", "devDependencies": { - "vite": "^2.0.0-beta.33", - "vite-plugin-solid": "^0.6.0" + "vite": "^2.0.0-beta.44", + "vite-plugin-solid": "^0.7.0" }, "dependencies": { "solid-js": "^0.23.11" diff --git a/ts/pnpm-lock.yaml b/ts/pnpm-lock.yaml index ec38b9e..afa91c4 100644 --- a/ts/pnpm-lock.yaml +++ b/ts/pnpm-lock.yaml @@ -1,8 +1,8 @@ dependencies: solid-js: 0.23.11 devDependencies: - vite: 2.0.0-beta.33 - vite-plugin-solid: 0.6.0 + vite: 2.0.0-beta.44 + vite-plugin-solid: 0.7.0 lockfileVersion: 5.2 packages: /@babel/code-frame/7.12.11: @@ -295,12 +295,12 @@ packages: optional: true resolution: integrity: sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ== - /esbuild/0.8.33: + /esbuild/0.8.34: dev: true hasBin: true requiresBuild: true resolution: - integrity: sha512-2ms/P6Y9zJfopR9dKo2vHzhXKfGSNlquVVoVOF8YnhjuzZVrvManMVBPadBsR/t7jzIkRnwqvxrs7d4f3C3eyg== + integrity: sha512-tnr0V1ooakYr1aRLXQLzCn2GVG1kBTW3FWpRyC+NgrR3ntsouVpJOlTOV0BS4YLATx3/c+x3h/uBq9lWJlUAtQ== /escape-string-regexp/1.0.5: dev: true engines: @@ -413,7 +413,7 @@ packages: dev: true resolution: integrity: sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg== - /rollup/2.37.0: + /rollup/2.38.0: dev: true engines: node: '>=10.0.0' @@ -421,7 +421,7 @@ packages: optionalDependencies: fsevents: 2.1.3 resolution: - integrity: sha512-cbxuxkMGCQV+TnVh+yZSUerbVb5i8soRydbzHYoMNojgt7MMi+jDLLs24U9HHCssKkwkXmsj+LXcOZMldTbz2w== + integrity: sha512-ay9zDiNitZK/LNE/EM2+v5CZ7drkB2xyDljvb1fQJCGnq43ZWRkhxN145oV8GmoW1YNi4sA/1Jdkr2LfawJoXw== /safe-buffer/5.1.2: dev: true resolution: @@ -460,22 +460,22 @@ packages: node: '>=4' resolution: integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4= - /vite-plugin-solid/0.6.0: + /vite-plugin-solid/0.7.0: dependencies: '@babel/core': 7.12.10 '@babel/preset-typescript': 7.12.7_@babel+core@7.12.10 babel-preset-solid: 0.23.8_@babel+core@7.12.10 solid-js: 0.23.11 - vite: 2.0.0-beta.33 + vite: 2.0.0-beta.44 dev: true resolution: - integrity: sha512-nGF87Mh6g5ZKsmausJRRl1MQRduv2T/v57JZQVYPAtLhIboVE62BtfXBkVNKHBhU7WoKM+0wCm5bt34uEJwrRw== - /vite/2.0.0-beta.33: + integrity: sha512-gU0xb5zFpjIZiCvPpyir5fSBDIUPC2S32NYdJ9x8pbA/W0J/bzfB5yw2DTa7ZQoFXfnkNWZsEdsjkGXhw0aHTw== + /vite/2.0.0-beta.44: dependencies: - esbuild: 0.8.33 + esbuild: 0.8.34 postcss: 8.2.4 resolve: 1.19.0 - rollup: 2.37.0 + rollup: 2.38.0 dev: true engines: node: '>=12.0.0' @@ -483,8 +483,8 @@ packages: optionalDependencies: fsevents: 2.1.3 resolution: - integrity: sha512-vg7rZbO19w1+nkV3fXsk0ggfI7J8DBDm74olVKgN7/SarrlisOZI/YWwP4XybGVNPnsSsOG9pKXhXl1mY6Oe5A== + integrity: sha512-NTzmP7HEKDg3J5r3I22f87jK3ugPVEU81BQ8hWn3hNWU0msCziUlj7aHwItSUEbQA+ymqO3TBO2fN7Aa+OKckQ== specifiers: solid-js: ^0.23.11 - vite: ^2.0.0-beta.33 - vite-plugin-solid: ^0.6.0 + vite: ^2.0.0-beta.44 + vite-plugin-solid: ^0.7.0 diff --git a/ts/src/App.css b/ts/src/App.module.css similarity index 77% rename from ts/src/App.css rename to ts/src/App.module.css index af7f93b..48308b2 100644 --- a/ts/src/App.css +++ b/ts/src/App.module.css @@ -2,13 +2,13 @@ text-align: center; } -.App-logo { - animation: App-logo-spin infinite 20s linear; +.logo { + animation: logo-spin infinite 20s linear; height: 40vmin; pointer-events: none; } -.App-header { +.header { background-color: #282c34; min-height: 100vh; display: flex; @@ -19,11 +19,11 @@ color: white; } -.App-link { +.link { color: #b318f0; } -@keyframes App-logo-spin { +@keyframes logo-spin { from { transform: rotate(0deg); } diff --git a/ts/src/App.tsx b/ts/src/App.tsx index c7977dc..97040de 100644 --- a/ts/src/App.tsx +++ b/ts/src/App.tsx @@ -1,17 +1,18 @@ +import type { Component } from "solid-js"; + import logo from "./logo.svg"; -import "./App.css"; -import { Component } from "solid-js"; +import styles from "./App.module.css"; const App: Component = () => { return ( -
-
- +
+
+ logo

Edit src/App.tsx and save to reload.