Merge pull request #46 from SpiriitLabs/dev

Version 2.2.4

demo/_fixtures/scss/spritemap.scss

@@ -3,12 +3,12 @@
 $sprites-prefix: 'icon-';
 $sprites: (
 	'spiriit': (
-		uri: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='118' height='38' viewBox='0 0 125 41'%3e%3cpath d='M0 25.5h6.2c.4 1.9 2.2 3 4.6 3 2.3 0 3.9-.7 3.9-2.5 0-1.2-.7-2-2.5-2.3l-5.8-1c-4-.7-6-2.6-6-6 0-4.7 4.5-7 9.9-7 5.7 0 9.6 2.6 9.9 7h-6c-.3-1.7-1.7-2.6-4-2.6-2 0-3.6.6-3.6 2.1 0 1 .6 1.7 2.3 2l5.8.9c4.1.7 6.2 2.7 6.2 6.2 0 5.2-4.7 7.6-10.2 7.6S.6 30.4 0 25.5m48-4.2c0 6.4-3.7 11.7-9.5 11.7-3.4 0-6.6-1.6-7.7-7.3v14.9h-6.6V10h5.6l.7 6.6c1.4-5.6 4.7-7 8.3-7 5.5 0 9.2 5.2 9.2 11.7m-6.6 0c0-3.4-2.1-6.4-5.3-6.4-3.3 0-5.3 2.8-5.3 6.4s2 6.3 5.3 6.3c3.2 0 5.3-2.9 5.3-6.3M60 32.6h-6.6V15.2h-3.3V10H60zM53.1 3.9c0-2.2 1.6-3.4 3.6-3.4s3.6 1.1 3.6 3.4c0 2.2-1.6 3.3-3.6 3.3-2.1 0-3.6-1.1-3.6-3.3m27 6.1v5.2h-2.6c-3.9 0-6 2.1-6 6.4v11h-6.6V10h5.4l.6 7c.9-5.2 3.4-7 6.5-7zM93 32.6h-6.6V15.2h-3.3V10H93zM86.1 3.9c0-2.2 1.6-3.4 3.6-3.4s3.6 1.1 3.6 3.4c0 2.2-1.6 3.3-3.6 3.3s-3.6-1.1-3.6-3.3M125 27.1v5.4h-4.7c-4.8 0-7.2-2.5-7.2-7.4v-9.9h-3.3V10h3.3V3.9h6.6v1.3c0 2.3-1.4 4.8-4.9 4.8H125v5.2h-5.2v9c0 1.9 1 2.9 2.8 2.9z'/%3e%3cpath fill='%233960ff' d='M106.6 32.6H100V15.2h-3.3V10h9.9zM99.7 3.9c0-2.2 1.6-3.4 3.6-3.4s3.6 1.1 3.6 3.4c0 2.2-1.6 3.3-3.6 3.3s-3.6-1.1-3.6-3.3'/%3e%3c/svg%3e",
+		uri: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 125 41' width='118' height='38'%3e %3cpath d='M0 25.5h6.2c.4 1.9 2.2 3 4.6 3 2.3 0 3.9-.7 3.9-2.5 0-1.2-.7-2-2.5-2.3l-5.8-1c-4-.7-6-2.6-6-6 0-4.7 4.5-7 9.9-7 5.7 0 9.6 2.6 9.9 7h-6c-.3-1.7-1.7-2.6-4-2.6-2 0-3.6.6-3.6 2.1 0 1 .6 1.7 2.3 2l5.8.9c4.1.7 6.2 2.7 6.2 6.2 0 5.2-4.7 7.6-10.2 7.6C5.2 32.9.6 30.4 0 25.5zM48 21.3c0 6.4-3.7 11.7-9.5 11.7-3.4 0-6.6-1.6-7.7-7.3v14.9h-6.6V10h5.6l.7 6.6c1.4-5.6 4.7-7 8.3-7 5.5 0 9.2 5.2 9.2 11.7zm-6.6 0c0-3.4-2.1-6.4-5.3-6.4-3.3 0-5.3 2.8-5.3 6.4s2 6.3 5.3 6.3c3.2 0 5.3-2.9 5.3-6.3zM60 32.6h-6.6V15.2h-3.3V10H60v22.6zM53.1 3.9c0-2.2 1.6-3.4 3.6-3.4s3.6 1.1 3.6 3.4c0 2.2-1.6 3.3-3.6 3.3-2.1 0-3.6-1.1-3.6-3.3zM80.1 10v5.2h-2.6c-3.9 0-6 2.1-6 6.4v11h-6.6V10h5.4l.6 7c.9-5.2 3.4-7 6.5-7h2.7zM93 32.6h-6.6V15.2h-3.3V10H93v22.6zM86.1 3.9c0-2.2 1.6-3.4 3.6-3.4s3.6 1.1 3.6 3.4c0 2.2-1.6 3.3-3.6 3.3s-3.6-1.1-3.6-3.3zM125 27.1v5.4h-4.7c-4.8 0-7.2-2.5-7.2-7.4v-9.9h-3.3V10h3.3V3.9h6.6v1.3c0 2.3-1.4 4.8-4.9 4.8H125v5.2h-5.2v9c0 1.9 1 2.9 2.8 2.9h2.4z' /%3e %3cpath fill='%233960ff' d='M106.6 32.6H100V15.2h-3.3V10h9.9v22.6zM99.7 3.9c0-2.2 1.6-3.4 3.6-3.4s3.6 1.1 3.6 3.4c0 2.2-1.6 3.3-3.6 3.3s-3.6-1.1-3.6-3.3z' /%3e %3c/svg%3e",
 		width: 118px,
 		height: 38px
 	),
 	'vite': (
-		uri: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='31.88' height='32' aria-hidden='true' class='iconify iconify--file-icons' viewBox='0 0 510 512'%3e%3cpath fill='currentColor' d='M493.89 58.275 355.178 83.558 379.282 0 186.79 37.718l-2.999 50.64L15.145 58.214C3.53 57.538-3.238 65.879 1.558 77.46l244.056 427.983c5.253 8.575 17.347 8.91 22.65 0L507.575 77.419c5.4-9.676-2.874-21.018-13.685-19.144m-237 435.435L17.87 74.556l164.993 29.491-7.778 131.365 67.632-15.608-18.858 92.344 51.374-15.608-25.495 123.397c-1.27 8.069 9.241 12.362 14.44.812l150.22-299.792-74.135 14.308 10.086-34.962 140.91-25.684z'/%3e%3c/svg%3e",
+		uri: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' class='iconify iconify--file-icons' width='31.88' height='32' preserveAspectRatio='xMidYMid meet' viewBox='0 0 510 512'%3e %3cpath fill='currentColor' d='M493.89 58.275L355.178 83.558L379.282 0L186.79 37.718l-2.999 50.64L15.145 58.214C3.53 57.538-3.238 65.879 1.558 77.46l244.056 427.983c5.253 8.575 17.347 8.91 22.65 0L507.575 77.419c5.4-9.676-2.874-21.018-13.685-19.144zm-237 435.435L17.87 74.556l164.993 29.491l-7.778 131.365l67.632-15.608l-18.858 92.344l51.374-15.608l-25.495 123.397c-1.27 8.069 9.241 12.362 14.44.812l150.22-299.792l-74.135 14.308l10.086-34.962l140.91-25.684L256.89 493.71z' /%3e %3c/svg%3e",
 		width: 31.88px,
 		height: 32px
 	)

demo/basic/README.md

@@ -4,15 +4,9 @@
 
 ## Usage
 
-```shell
-npm i
-npm run dev
-
-# yarn
-yarn install
-yarn run dev
+> You need to build the project before using the demo. To do that, run `pnpm build` at the root of the project and after run the following commands in the `demo/basic/` folder.
 
-# pnpm
+```shell
 pnpm install
 pnpm dev
 ```

demo/basic/package.json

@@ -10,13 +10,13 @@
   },
   "devDependencies": {
     "@spiriit/vite-plugin-svg-spritemap": "workspace:*",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
     "less": "^4.2.0",
     "postcss": "^8.4.33",
-    "sass": "^1.69.7",
+    "sass": "^1.70.0",
     "stylus": "^0.62.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11",
+    "vite": "^5.0.12",
     "vite-plugin-inspect": "^0.8.1"
   }
 }

demo/basic/vite.config.ts

@@ -16,10 +16,10 @@ export default defineConfig({
       // styles: './../_fixtures/icons/spritemap.less',
       prefix: 'icon-',
       svgo: false,
-      output: {
-        use: false,
-        view: false,
-      },
+      // output: {
+      //   use: false,
+      //   view: false,
+      // },
     }),
     Inspect(),
   ],

demo/nuxt/README.md

@@ -4,72 +4,34 @@ Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introdu
 
 ## Setup
 
+> You need to build the project before using the demo. To do that, run `pnpm build` at the root of the project and after run the following commands in the `demo/nuxt/` folder.
+
 Make sure to install the dependencies:
 
 ```bash
-# npm
-npm install
-
-# pnpm
 pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
 ```
 
 ## Development Server
 
 Start the development server on `http://localhost:3000`:
 
 ```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
+pnpm dev
 ```
 
 ## Production
 
 Build the application for production:
 
 ```bash
-# npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-
-# bun
-bun run build
+pnpm build
 ```
 
 Locally preview production build:
 
 ```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
+pnpm preview
 ```
 
 Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

demo/nuxt/package.json

@@ -11,8 +11,8 @@
   "devDependencies": {
     "@spiriit/vite-plugin-svg-spritemap": "workspace:*",
     "nuxt": "^3.9.3",
-    "sass": "^1.69.7",
-    "vue": "^3.4.14",
+    "sass": "^1.70.0",
+    "vue": "^3.4.15",
     "vue-router": "^4.2.5"
   }
 }

demo/server/README.md

@@ -4,16 +4,11 @@ Look at the [Nitro documentation](https://nitro.unjs.io/) to learn more.
 
 ## Setup
 
+> You need to build the project before using the demo. To do that, run `pnpm install` at the root of the project and after run the following commands in the `demo/server/` folder.
+
 Make sure to install the dependencies:
 
 ```bash
-# npm
-npm install
-
-# yarn
-yarn install
-
-# pnpm
 pnpm install
 ```
 
@@ -22,21 +17,21 @@ pnpm install
 Start the development server on <http://localhost:3000>
 
 ```bash
-npm run dev
+pnpm dev
 ```
 
 ## Production
 
 Build the application for production:
 
 ```bash
-npm run build
+pnpm build
 ```
 
 Locally preview production build:
 
 ```bash
-npm run preview
+pnpm preview
 ```
 
 Check out the [deployment documentation](https://nitro.unjs.io/deploy) for more information.

demo/server/package.json

@@ -12,12 +12,12 @@
   },
   "devDependencies": {
     "@spiriit/vite-plugin-svg-spritemap": "workspace:*",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
     "concurrently": "^8.2.2",
     "postcss": "^8.4.33",
-    "sass": "^1.69.7",
+    "sass": "^1.70.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11",
+    "vite": "^5.0.12",
     "vite-plugin-inspect": "^0.8.1"
   }
 }

demo/svelte/README.md

@@ -2,46 +2,22 @@
 
 This template should help get you started developing with Svelte and TypeScript in Vite.
 
-## Recommended IDE Setup
+## Setup
 
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+> You need to build the project before using the demo. To do that, run `pnpm build` at the root of the project and after run the following commands in the `demo/svelte/` folder.
 
-## Need an official Svelte framework?
+### Development
 
-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.
-
-## Technical considerations
-
-**Why use this over SvelteKit?**
-
-- It brings its own routing solution which might not be preferable for some users.
-- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
-
-This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
-
-Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
-
-**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
-
-Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
-
-**Why include `.vscode/extensions.json`?**
-
-Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
-
-**Why enable `allowJs` in the TS template?**
-
-While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
-
-**Why is HMR not preserving my local component state?**
+```bash
+pnpm dev
+```
 
-HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+### Building
 
-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+To create a production version of your app:
 
-```ts
-// store.ts
-// An extremely simple external store
-import { writable } from 'svelte/store'
-export default writable(0)
+```bash
+pnpm build
 ```
+
+You can preview the production build with `pnpm preview`.

demo/svelte/package.json

@@ -13,11 +13,11 @@
     "@spiriit/vite-plugin-svg-spritemap": "workspace:*",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@tsconfig/svelte": "^5.0.2",
-    "sass": "^1.69.7",
+    "sass": "^1.70.0",
     "svelte": "^4.2.9",
     "svelte-check": "^3.6.3",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11"
+    "vite": "^5.0.12"
   }
 }

demo/sveltekit/README.md

@@ -2,37 +2,24 @@
 
 Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
 
-## Creating a project
+## Setup
 
-If you're seeing this, you've probably already done this step. Congrats!
+> You need to build the project before using the demo. To do that, run `pnpm build` at the root of the project and after run the following commands in the `demo/sveltekit/` folder.
 
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+### Development
 
 ```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+pnpm dev
 ```
 
-## Building
+### Building
 
 To create a production version of your app:
 
 ```bash
-npm run build
+pnpm build
 ```
 
-You can preview the production build with `npm run preview`.
+You can preview the production build with `pnpm preview`.
 
 > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

demo/sveltekit/package.json

@@ -12,14 +12,14 @@
   },
   "devDependencies": {
     "@spiriit/vite-plugin-svg-spritemap": "workspace:*",
-    "@sveltejs/adapter-auto": "^3.1.0",
-    "@sveltejs/kit": "^2.3.3",
+    "@sveltejs/adapter-auto": "^3.1.1",
+    "@sveltejs/kit": "^2.4.1",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
-    "sass": "^1.69.7",
+    "sass": "^1.70.0",
     "svelte": "^4.2.9",
     "svelte-check": "^3.6.3",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11"
+    "vite": "^5.0.12"
   }
 }

demo/vue/README.md

@@ -2,17 +2,22 @@
 
 This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
-## Recommended IDE Setup
+## Setup
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+> You need to build the project before using the demo. To do that, run `pnpm build` at the root of the project and after run the following commands in the `demo/vue/` folder.
 
-## Type Support For `.vue` Imports in TS
+### Development
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+```bash
+pnpm dev
+```
 
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+### Building
 
-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+To create a production version of your app:
+
+```bash
+pnpm build
+```
+
+You can preview the production build with `pnpm preview`.