feat: big derived rework

Author: paoloricciuti

.changeset/README.md

@@ -6,4 +6,3 @@ find the full documentation for it [in our repository](https://github.com/change
 
 We have a quick list of common questions to get you started engaging with this project in
 [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
-

.changeset/config.json

@@ -1,11 +1,11 @@
 {
-  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
-  "changelog": "@changesets/cli/changelog",
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "public",
-  "baseBranch": "master",
-  "updateInternalDependencies": "patch",
-  "ignore": []
+	"$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+	"changelog": "@changesets/cli/changelog",
+	"commit": false,
+	"fixed": [],
+	"linked": [],
+	"access": "public",
+	"baseBranch": "master",
+	"updateInternalDependencies": "patch",
+	"ignore": []
 }

.eslintrc.cjs

@@ -6,15 +6,15 @@ module.exports = {
 	ignorePatterns: ['*.cjs'],
 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 	settings: {
-		'svelte3/typescript': () => require('typescript')
+		'svelte3/typescript': () => require('typescript'),
 	},
 	parserOptions: {
 		sourceType: 'module',
-		ecmaVersion: 2020
+		ecmaVersion: 2020,
 	},
 	env: {
 		browser: true,
 		es2017: true,
-		node: true
-	}
+		node: true,
+	},
 };

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -1,29 +1,29 @@
 name: "\U0001F41E Bug report"
 description: Report an issue
 body:
-  - type: markdown
-    attributes:
-      value: |
-        First thing first, thanks for reporting!
-  - type: textarea
-    id: bug-description
-    attributes:
-      label: Describe the bug
-      description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
-      placeholder: Bug description
-    validations:
-      required: true
-  - type: textarea
-    id: reproduction
-    attributes:
-      label: Reproduction
-      description: Please provide a link to a repo or better a stackblitz/replit that can reproduce the problem you ran into. This will speed up the fixing.
-      placeholder: Reproduction
-    validations:
-      required: true
-  - type: textarea
-    id: logs
-    attributes:
-      label: Logs
-      description: "Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text."
-      render: shell
+    - type: markdown
+      attributes:
+          value: |
+              First thing first, thanks for reporting!
+    - type: textarea
+      id: bug-description
+      attributes:
+          label: Describe the bug
+          description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
+          placeholder: Bug description
+      validations:
+          required: true
+    - type: textarea
+      id: reproduction
+      attributes:
+          label: Reproduction
+          description: Please provide a link to a repo or better a stackblitz/replit that can reproduce the problem you ran into. This will speed up the fixing.
+          placeholder: Reproduction
+      validations:
+          required: true
+    - type: textarea
+      id: logs
+      attributes:
+          label: Logs
+          description: 'Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text.'
+          render: shell

.github/ISSUE_TEMPLATE/feature_request.yaml

@@ -1,23 +1,23 @@
 name: "\U0001F4A1 Feature Request"
 description: Request a new feature
 body:
-  - type: markdown
-    attributes:
-      value: |
-        Thank you for taking the time to propose a new idea
-  - type: textarea
-    id: problem
-    attributes:
-      label: Describe the problem
-      description: Please provide a clear and concise description the problem this feature would solve. The more information you can provide here, the better.
-      placeholder: I would like to...
-    validations:
-      required: true
-  - type: textarea
-    id: solution
-    attributes:
-      label: Describe the proposed solution
-      description: Try to provide a description of the API you would like to see implemented
-      placeholder: I would like to see...
-    validations:
-      required: true
+    - type: markdown
+      attributes:
+          value: |
+              Thank you for taking the time to propose a new idea
+    - type: textarea
+      id: problem
+      attributes:
+          label: Describe the problem
+          description: Please provide a clear and concise description the problem this feature would solve. The more information you can provide here, the better.
+          placeholder: I would like to...
+      validations:
+          required: true
+    - type: textarea
+      id: solution
+      attributes:
+          label: Describe the proposed solution
+          description: Try to provide a description of the API you would like to see implemented
+          placeholder: I would like to see...
+      validations:
+          required: true

.github/workflows/release.yml

@@ -1,30 +1,30 @@
 name: Publish
 on:
-  push:
-    branches:
-      - "master"
+    push:
+        branches:
+            - 'master'
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-          cache: "pnpm"
+    publish:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - uses: pnpm/action-setup@v2
+              with:
+                  version: 8
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 16.x
+                  cache: 'pnpm'
 
-      - run: pnpm install --frozen-lockfile
-      - name: Create Release Pull Request or Publish
-        id: changesets
-        uses: changesets/action@v1
-        with:
-          publish: pnpm run publish
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+            - run: pnpm install --frozen-lockfile
+            - name: Create Release Pull Request or Publish
+              id: changesets
+              uses: changesets/action@v1
+              with:
+                  publish: pnpm run publish
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.prettierrc.json

@@ -1,6 +1,7 @@
 {
-	"trailingComma": "es5",
+	"trailingComma": "all",
 	"tabWidth": 4,
+	"useTabs": true,
 	"semi": true,
 	"singleQuote": true
-  }
+}

CODE_OF_CONDUCT.md

@@ -17,24 +17,24 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
-  and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
-  overall community
+-   Demonstrating empathy and kindness toward other people
+-   Being respectful of differing opinions, viewpoints, and experiences
+-   Giving and gracefully accepting constructive feedback
+-   Accepting responsibility and apologizing to those affected by our mistakes,
+    and learning from the experience
+-   Focusing on what is best not just for us as individuals, but for the
+    overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
-  advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
-  address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
+-   The use of sexualized language or imagery, and sexual attention or
+    advances of any kind
+-   Trolling, insulting or derogatory comments, and personal or political attacks
+-   Public or private harassment
+-   Publishing others' private information, such as a physical or email
+    address, without their explicit permission
+-   Other conduct which could reasonably be considered inappropriate in a
+    professional setting
 
 ## Enforcement Responsibilities
 
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

README.md

@@ -28,7 +28,7 @@ If you want the fastest way to open a PR try out Codeflow
 
 ## Authors
 
-- [@paoloricciuti](https://www.github.com/paoloricciuti)
+-   [@paoloricciuti](https://www.github.com/paoloricciuti)
 
 ## Installation
 
@@ -162,7 +162,6 @@ The count is {$count}
 <input bind:value={$count} type="number"/>
 ```
 
-
 ### Simple case (all parameters)
 
 You can use the function queryParameters to get an object containing all the present search params.
@@ -183,8 +182,8 @@ assuming the page is `/?framework=svelte&isCool=true` the above code will show
 
 ```json
 {
-  "framework": "svelte",
-  "isCool": "true"
+	"framework": "svelte",
+	"isCool": "true"
 }
 ```
 
@@ -233,19 +232,19 @@ assuming the page is `/?framework=svelte&isCool=true` the above code will show
 
 ```json
 {
-  "framework": "svelte",
-  "isCool": "true",
-  "username": null
+	"framework": "svelte",
+	"isCool": "true",
+	"username": null
 }
 ```
 
 if we add username to the URL like this `/?framework=svelte&isCool=true&username=paoloricciuti` we will get
 
 ```json
 {
-  "framework": "svelte",
-  "isCool": "true",
-  "username": "paoloricciuti"
+	"framework": "svelte",
+	"isCool": "true",
+	"username": "paoloricciuti"
 }
 ```
 
@@ -276,19 +275,19 @@ assuming the page is `/?framework=svelte&isCool=true&username=paoloricciuti` the
 
 ```json
 {
-  "framework": "svelte",
-  "isCool": true,
-  "username": null
+	"framework": "svelte",
+	"isCool": true,
+	"username": null
 }
 ```
 
 notice that this time isCool it's a boolean and not a string anymore. With this particular transformation we've assured that if the url is the following `/?framework=svelte&isCool=false&username=paoloricciuti` or if the isCool parameter is completely missing like this `/?framework=svelte&username=paoloricciuti` we will get
 
 ```json
 {
-  "framework": "svelte",
-  "isCool": false,
-  "username": null
+	"framework": "svelte",
+	"isCool": false,
+	"username": null
 }
 ```
 
@@ -413,12 +412,12 @@ To set the configuration object you can pass it as a third parameter in case of
 If you ran into issues with vite you need to update your `vite.config.ts` or `vite.config.js` file to include the plugin exported from `sveltekit-search-params/plugin`. It's as simple as
 
 ```javascript
-import { sveltekit } from "@sveltejs/kit/vite";
-import { ssp } from "sveltekit-search-params/plugin";
+import { sveltekit } from '@sveltejs/kit/vite';
+import { ssp } from 'sveltekit-search-params/plugin';
 
 /** @type {import('vite').UserConfig} */
 const config = {
-  plugins: [ssp(), sveltekit()],
+	plugins: [ssp(), sveltekit()],
 };
 
 export default config;

package.json

@@ -26,28 +26,38 @@
 		"version:major": "npm version major",
 		"build:landing": "vite build",
 		"build": "svelte-kit sync && svelte-package -o package",
+		"build:playground": "cd playground && pnpm run build",
+		"preview:playground": "cd playground && pnpm run preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "eslint .",
-		"publish": "pnpm run build && changeset publish"
+		"format": "prettier --write .",
+		"publish": "pnpm run build && changeset publish",
+		"test": "npm run test:integration && npm run test:unit",
+		"test:integration": "playwright test",
+		"test:unit": "vitest"
 	},
 	"devDependencies": {
 		"@changesets/cli": "^2.26.0",
+		"@playwright/test": "^1.40.1",
 		"@sveltejs/adapter-static": "^1.0.0-next.47",
-		"@sveltejs/kit": "^1.0.7",
+		"@sveltejs/kit": "^1.29.1",
 		"@sveltejs/package": "^2.0.0",
 		"@typescript-eslint/eslint-plugin": "^5.27.0",
 		"@typescript-eslint/parser": "^5.27.0",
 		"eslint": "^8.16.0",
 		"eslint-plugin-svelte3": "^4.0.0",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.7.1",
 		"svelte-material-icons": "^2.0.4",
 		"svelte-preprocess": "^4.10.6",
 		"svelte-typewriter-store": "^0.0.5",
 		"tslib": "^2.3.1",
 		"typescript": "^4.7.4",
-		"vite": "^4"
+		"vite": "^4",
+		"vitest": "^0.34.6"
 	},
 	"type": "module",
 	"peerDependencies": {