⬆️ Update to latest dependencies

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"**.

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

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": "^2.0.0-beta.44",
-    "vite-plugin-solid": "^0.6.0"
+    "vite-plugin-solid": "^0.7.0"
   },
   "dependencies": {
     "solid-js": "^0.23.11"

js/pnpm-lock.yaml

@@ -1,8 +1,8 @@
 dependencies:
   solid-js: 0.23.11
 devDependencies:
-  vite: 2.0.0-beta.33
+  vite: 2.0.0-beta.44
-  vite-plugin-solid: 0.6.0
+  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_@[email protected]
       babel-preset-solid: 0.23.8_@[email protected]
       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==
+      integrity: sha512-gU0xb5zFpjIZiCvPpyir5fSBDIUPC2S32NYdJ9x8pbA/W0J/bzfB5yw2DTa7ZQoFXfnkNWZsEdsjkGXhw0aHTw==
-  /vite/2.0.0-beta.33:
+  /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: ^2.0.0-beta.44
-  vite-plugin-solid: ^0.6.0
+  vite-plugin-solid: ^0.7.0

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 (
-    <div class="App">
+    <div class={styles.App}>
-      <header class="App-header">
+      <header class={styles.header}>
-        <img src={logo} class="App-logo" alt="logo" />
+        <img src={logo} class={styles.logo} alt="logo" />
         <p>
           Edit <code>src/App.js</code> and save to reload.
         </p>
         <a
-          class="App-link"
+          class={styles.link}
           href="https://github.com/ryansolid/solid"
           target="_blank"
           rel="noopener noreferrer"

js/src/App.module.css

@@ -2,13 +2,13 @@
   text-align: center;
 }
 
-.App-logo {
+.logo {
-  animation: App-logo-spin infinite 20s linear;
+  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);
   }

js/src/index.jsx

@@ -1,4 +1,4 @@
-import { render } from "solid-js/dom";
+import { render } from "solid-js/web";
 
 import "./index.css";
 import App from "./App";
@@ -6,6 +6,6 @@ import App from "./App";
 const dispose = render(App, document.getElementById("root"));
 
 if (import.meta.hot) {
-  import.meta.hot.accept()
+  import.meta.hot.accept();
-  import.meta.hot.dispose(dispose)
+  import.meta.hot.dispose(dispose);
 }

js/vite.config.js

@@ -3,4 +3,8 @@ import solidPlugin from "vite-plugin-solid";
 
 export default defineConfig({
   plugins: [solidPlugin()],
+  build: {
+    target: "esnext",
+    polyfillDynamicImport: false,
+  },
 });

ts-minimal/README.md

@@ -1,14 +1,18 @@
 ## Usage
 
-```bash
+Those templates dependencies are maintained via [pnpm](https://pnpm.js.org/) via `pnpm up -i --latest`.
-$ npm install # or pnpm install or yarn install
+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
+$ pnpm install # or npm install or yarn install
+```
 ## Available Scripts
 
 In the project directory, you can run:
 
-### `npm start`
+### `npm run dev`
 
 Runs the app in the development mode.<br>
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

ts-minimal/package.json

@@ -8,8 +8,8 @@
   },
   "license": "ISC",
   "devDependencies": {
-    "vite": "^2.0.0-beta.33",
+    "vite": "^2.0.0-beta.44",
-    "vite-plugin-solid": "^0.6.0"
+    "vite-plugin-solid": "^0.7.0"
   },
   "dependencies": {
     "solid-js": "^0.23.11"

ts-minimal/pnpm-lock.yaml

@@ -1,8 +1,8 @@
 dependencies:
   solid-js: 0.23.11
 devDependencies:
-  vite: 2.0.0-beta.33
+  vite: 2.0.0-beta.44
-  vite-plugin-solid: 0.6.0
+  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_@[email protected]
       babel-preset-solid: 0.23.8_@[email protected]
       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==
+      integrity: sha512-gU0xb5zFpjIZiCvPpyir5fSBDIUPC2S32NYdJ9x8pbA/W0J/bzfB5yw2DTa7ZQoFXfnkNWZsEdsjkGXhw0aHTw==
-  /vite/2.0.0-beta.33:
+  /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: ^2.0.0-beta.44
-  vite-plugin-solid: ^0.6.0
+  vite-plugin-solid: ^0.7.0

ts-minimal/src/App.tsx

@@ -1,7 +1,7 @@
-import { Component } from "solid-js";
+import type { Component } from "solid-js";
 
 const App: Component = () => {
-  return <p>minimal</p>;
+  return <h1>Hello world!</h1>;
 };
 
 export default App;

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";
 

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,
+  },
 });

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

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": "^2.0.0-beta.44",
-    "vite-plugin-solid": "^0.6.0"
+    "vite-plugin-solid": "^0.7.0"
   },
   "dependencies": {
     "solid-js": "^0.23.11"

ts/pnpm-lock.yaml

@@ -1,8 +1,8 @@
 dependencies:
   solid-js: 0.23.11
 devDependencies:
-  vite: 2.0.0-beta.33
+  vite: 2.0.0-beta.44
-  vite-plugin-solid: 0.6.0
+  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_@[email protected]
       babel-preset-solid: 0.23.8_@[email protected]
       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==
+      integrity: sha512-gU0xb5zFpjIZiCvPpyir5fSBDIUPC2S32NYdJ9x8pbA/W0J/bzfB5yw2DTa7ZQoFXfnkNWZsEdsjkGXhw0aHTw==
-  /vite/2.0.0-beta.33:
+  /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: ^2.0.0-beta.44
-  vite-plugin-solid: ^0.6.0
+  vite-plugin-solid: ^0.7.0

ts/src/App.module.css

@@ -2,13 +2,13 @@
   text-align: center;
 }
 
-.App-logo {
+.logo {
-  animation: App-logo-spin infinite 20s linear;
+  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);
   }

ts/src/App.tsx

@@ -1,17 +1,18 @@
+import type { Component } from "solid-js";
+
 import logo from "./logo.svg";
-import "./App.css";
+import styles from "./App.module.css";
-import { Component } from "solid-js";
 
 const App: Component = () => {
   return (
-    <div class="App">
+    <div class={styles.App}>
-      <header class="App-header">
+      <header class={styles.header}>
-        <img src={logo} class="App-logo" alt="logo" />
+        <img src={logo} class={styles.logo} alt="logo" />
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
         </p>
         <a
-          class="App-link"
+          class={styles.link}
           href="https://github.com/ryansolid/solid"
           target="_blank"
           rel="noopener noreferrer"

ts/src/index.tsx

@@ -1,4 +1,4 @@
-import { render } from "solid-js/dom";
+import { render } from "solid-js/web";
 
 import "./index.css";
 import App from "./App";

ts/vite.config.ts

@@ -3,4 +3,8 @@ import solidPlugin from "vite-plugin-solid";
 
 export default defineConfig({
   plugins: [solidPlugin()],
+  build: {
+    target: "esnext",
+    polyfillDynamicImport: false,
+  },
 });