fix(#128, #126): Updates to project configuration to support usage in…

…side svelte-kit applications (#129)

- added svelte property to package.json
- updated readme with instructions for svelte-kit users (add optimizeDeps config)
- update CI to create prerelease (next dist-tag) on pushes to next branch

.github/workflows/release.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - master
+      - next
 jobs:
   release:
     name: Release

README.md

@@ -10,6 +10,24 @@ A small date picker built with Svelte 3. Demo available here: [view docs and exa
 npm i -D svelte-calendar
 ```
 
+## Usage within svelte-kit project
+
+When using this component within a svelte-kit application it is necessary to add its two dependencies (`just-throttle` and `dayjs`) to the `config.kit.vite.optimizeDeps.include` array in `svelte.config.js`. Eg: your config should include the following:
+
+```js
+const config = {
+	kit: {
+		vite: {
+			optimizeDeps: {
+				include: ['just-throttle', 'dayjs']
+			}
+		}
+	}
+};
+
+export default config;
+```
+
 ## Features
 
 - Day, Month & Year pickers

docs/index.html

@@ -77,7 +77,7 @@ <h1 class="svelte-alugsa">svelte-calendar</h1>
         </pre></div></div></div>
 	<div class="column-secondary svelte-92c9vu"><div class="sc-popover svelte-197aegr" style="--sc-theme-calendar-width: 620px;--sc-theme-calendar-maxWidth: 100vw;--sc-theme-calendar-legend-height: 45px;--sc-theme-calendar-shadow: 0px 10px 26px rgba(0, 0, 0, 0.25);--sc-theme-calendar-colors-text-primary: #eee;--sc-theme-calendar-colors-text-highlight: #fff;--sc-theme-calendar-colors-background-primary: #333;--sc-theme-calendar-colors-background-highlight: #5829d6;--sc-theme-calendar-colors-background-hover: #222;--sc-theme-calendar-colors-border: #222;--sc-theme-calendar-font-regular: 1.5em;--sc-theme-calendar-font-large: 37em;--sc-theme-calendar-grid-disabledOpacity: .5;--sc-theme-calendar-grid-outsiderOpacity: .7; min-width: NaNpx; min-height: NaNpx;"><div class="trigger svelte-197aegr">
 	<div class="button-container svelte-18igz6t"><button class="svelte-18igz6t"></button>
-		<span class="button-text svelte-18igz6t">09/18/2021</span></div>
+		<span class="button-text svelte-18igz6t">09/19/2021</span></div>
 </div></div></div>
 </div></div></div></div>
 

package.json

@@ -1,10 +1,11 @@
 {
   "name": "svelte-calendar",
-  "version": "3.0.19",
+  "version": "3.0.27",
   "main": "index.js",
   "scripts": {
     "dev": "svelte-kit dev",
     "package": "svelte-kit package",
+    "postpackage": "node scripts/postpackage",
     "prebuild": "rm -rf build",
     "build": "svelte-kit build",
     "postbuild": "touch docs/.nojekyll",
@@ -37,5 +38,6 @@
     "svelte2tsx": "^0.4.6",
     "typescript": "^4.4.3"
   },
-  "type": "module"
+  "type": "module",
+  "svelte": "index.js"
 }

release.config.cjs

@@ -1,11 +1,5 @@
-const npm = [
-	'@semantic-release/npm',
-	{
-		pkgRoot: 'package'
-	}
-];
 module.exports = {
-	branches: ['master'],
+	branches: [{ name: 'master' }, { name: 'next', channel: 'next' }],
 	verifyConditions: [
 		'@semantic-release/changelog',
 		'@semantic-release/npm',
@@ -20,5 +14,13 @@ module.exports = {
 			message: 'chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}'
 		}
 	],
-	publish: [npm, '@semantic-release/github']
+	publish: [
+		[
+			'@semantic-release/npm',
+			{
+				pkgRoot: 'package'
+			}
+		],
+		'@semantic-release/github'
+	]
 };