refactor!: support [email protected]

.gitignore

@@ -1,4 +1,23 @@
-.DS_Store
+test-results
 node_modules
+
+# Output
+.output
+.vercel
 /.svelte-kit
+/build
 /dist
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -1,3 +1 @@
 registry=https://registry.npmjs.org
-package-lock=false
-engine-strict=true

.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

.prettierrc

@@ -1,10 +1,15 @@
 {
-	"arrowParens": "avoid",
-	"bracketSpacing": true,
-	"endOfLine": "auto",
-	"printWidth": 120,
-	"semi": true,
-	"singleQuote": false,
-	"trailingComma": "all",
-	"useTabs": true
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
 }

README.md

@@ -12,56 +12,29 @@ npm install gridjs gridjs-svelte
 
 ```html
 <script>
-	import Grid from "gridjs-svelte";
+	import { gridjs } from "gridjs-svelte";
 
 	const data = [
 		{ name: "John", email: "[email protected]" },
 		{ name: "Mark", email: "[email protected]" },
 	];
 </script>
 
-<Grid {data} />
+<article use:gridjs={{ data }} />
 
 <style global>
 	@import "https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css";
 </style>
 ```
 
-> You can pass all Grid.js configs, refer to [Grid.js types](https://github.com/grid-js/gridjs/blob/master/src/config.ts) for specific configuration options.
-
-## Example
+or you can play [online](https://svelte.dev/playground) or with more [real world example](https://svelte.dev/playground)
 
-- [Basic](https://svelte.dev/repl/3da1b239563843c4b76ab1b90115821c)
-- [Custom Style](https://svelte.dev/repl/d6fffbcd8ce0409c8bdb4a7c2e7df63c)
-- [Action Button](https://svelte.dev/repl/80eca12417414c7eabc79756c5a8f464)
-- [Server side](https://svelte.dev/repl/e772220feac54e65b132615ac4d8eb09)
-- [Event](https://svelte.dev/repl/318d3daa2ed2402cbeb965f7317c1071)
-- [Plugin](https://svelte.dev/repl/9a066ccf55f54173bf5c6c8042142566)
-- [HTML in cell](https://svelte.dev/repl/3c6d68ee5793465fb19b16b3d6831d57)
-- [Svelte component in cell](https://svelte.dev/repl/e3247cb80c344f95b1fdd2853006f159)
-- [forceRender](https://svelte.dev/repl/c779df2be3d64008b3b83fbd091df429)
-- [Star Wars](https://svelte.dev/repl/0c77bee765c1458d825a4df13aefb5a4)
+> You can pass all Grid.js configs, refer to [Grid.js types](https://github.com/grid-js/gridjs/blob/master/src/config.ts) for specific configuration options.
 
-## Contributing
+---
 
 **PRs are welcome!**
 You noticed a bug, a possible improvement or whatever?
 Any help is always appreciated, so don't hesitate opening one!
 
-### Get started (Devs)
-
-```bash
-git clone https://github.com/iamyuu/gridjs-svelte
-cd gridjs-svelte
-npm install
-npm run dev:web
-```
-
-### Running the tests
-
-```bash
-npm test
-
-# or on watch mode
-npm run test:watch
-```
+&copy; MIT License

eslint.config.js

@@ -0,0 +1,33 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+
+export default ts.config(
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte'],
+
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+);

package.json

@@ -1,51 +1,51 @@
 {
 	"name": "gridjs-svelte",
-	"type": "module",
-	"version": "2.1.0",
+	"version": "3.0.0",
 	"description": "A Svelte wrapper component for Grid.js",
 	"scripts": {
-		"build": "svelte-kit package",
-		"dev:web": "svelte-kit dev",
-		"build:web": "svelte-kit build",
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"package": "svelte-kit sync && svelte-package",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"test": "vitest run",
-		"test:watch": "vitest watch",
-		"check": "svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "eslint --ignore-path .gitignore .",
-		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+		"test:watch": "vitest"
+	},
+	"files": ["dist", "!dist/**/*.test.*", "!dist/**/*.spec.*"],
+	"sideEffects": ["**/*.css"],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
 	},
-	"keywords": [
-		"svelte",
-		"gridjs"
-	],
+	"keywords": ["svelte", "gridjs"],
 	"author": "Muhammad Yusuf <[email protected]>",
 	"license": "MIT",
 	"peerDependencies": {
-		"gridjs": ">=5.0.0",
-		"svelte": ">=3.30.0"
+		"gridjs": "^6.0.0",
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "next",
-		"@sveltejs/kit": "next",
-		"@sveltejs/vite-plugin-svelte": "1.0.0-next.34",
-		"@testing-library/jest-dom": "5.16.1",
-		"@testing-library/svelte": "3.0.3",
-		"@typescript-eslint/eslint-plugin": "4.31",
-		"@typescript-eslint/parser": "4.31",
-		"eslint": "7.32",
-		"eslint-config-prettier": "8.3",
-		"eslint-plugin-svelte3": "3.2",
-		"gridjs": "5.0",
-		"jsdom": "19.0.0",
-		"prettier": "2.4",
-		"prettier-plugin-svelte": "2.4",
-		"svelte": "3.44",
-		"svelte-check": "2.2",
-		"svelte-preprocess": "4.9",
-		"svelte2tsx": "0.4.13",
-		"tslib": "2.3",
-		"typescript": "4.4",
-		"vitest": "0.0.142"
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@types/eslint": "^9.6.0",
+		"eslint": "^9.7.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.6",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.0.0",
+		"vite": "^5.0.11"
 	},
 	"repository": {
 		"type": "git",