Merge pull request #13 from senkulabs/improve-linter-prettier

Improve linter and prettier. Add checker for Svelte components
senkulabs · Nov 16, 2024 · a55d83e · a55d83e
2 parents 7360094 + c03efd1
commit a55d83e
Show file tree

Hide file tree

Showing 12 changed files with 123 additions and 34 deletions.
diff --git a/.prettierrc b/.prettierrc
diff --git a/src/Console/InstallsInertiaStacks.php b/src/Console/InstallsInertiaStacks.php
@@ -32,8 +32,7 @@ protected function installInertiaSvelteStack()
                 'postcss' => '^8.4.33',
                 'tailwindcss' => '^3.4.10',
                 'svelte' => '^5.0',
-                'svelte-check' => '^3.6.3',
-                'svelte-preprocess' => '^5.1.3',
+                'svelte-check' => '^4.0.0',
             ] + $packages;
         });
 
@@ -49,8 +48,8 @@ protected function installInertiaSvelteStack()
         if ($this->option('eslint')) {
             $this->updateNodePackages(function ($packages) {
                 return [
-                    'eslint' => '^8.57.0',
-                    'eslint-plugin-svelte' => '^2.35.1',
+                    'eslint' => '^9.7.0',
+                    'eslint-plugin-svelte' => '^2.36.0',
                     'eslint-config-prettier' => '^9.1.0',
                     'prettier' => '^3.3.3',
                     'prettier-plugin-organize-imports' => '^4.0.0',
@@ -62,28 +61,36 @@ protected function installInertiaSvelteStack()
             if ($this->option('typescript')) {
                 $this->updateNodePackages(function ($packages) {
                     return [
-                        '@types/eslint' => '^8.56.2',
-                        '@typescript-eslint/eslint-plugin' => '^6.19.1',
-                        '@typescript-eslint/parser' => '^6.19.1',
+                        '@types/eslint' => '^9.6.0',
+                        'typescript-eslint' => '^8.0.0',
                     ] + $packages;
                 });
 
-                // TODO: Something related with eslint goes here.
-                // $this->updateNodeScripts(function ($scripts) {
-
-                // });
+
+                $this->updateNodeScripts(function ($scripts) {
+                    return $scripts + [
+                        'check' => 'svelte-check --tsconfig ./tsconfig.json',
+                        'check:watch' => 'svelte-check --tsconfig ./tsconfig.json --watch',
+                        'format' => 'prettier --write resources/js',
+                        'lint' => 'eslint resources/js --fix',
+                    ];
+                });
 
-                // TODO: Copy .estlintrc file from inertia-svelte-ts into the Laravel project
+                copy(__DIR__.'/../../stubs/inertia-svelte-ts/eslint.config.js', base_path('eslint.config.js'));
             } else {
-                // TODO: Something related with eslint goes here.
-                // $this->updateNodeScripts(function ($scripts) {
-
-                // });
+                $this->updateNodeScripts(function ($scripts) {
+                    return $scripts + [
+                        'check' => 'svelte-check --tsconfig ./jsconfig.json',
+                        'check:watch' => 'svelte-check --tsconfig ./jsconfig.json --watch',
+                        'format' => 'prettier --write resources/js',
+                        'lint' => 'eslint resources/js --fix',
+                    ];
+                });
 
-                // TODO: Copy .estlintrc file from inertia-svelte into the Laravel project
+                copy(__DIR__.'/../../stubs/inertia-svelte/eslint.config.js', base_path('eslint.config.js'));
             }
 
-            copy(base_path('vendor/laravel/breeze/stubs/inertia-common/.prettierrc'), base_path('.prettierrc'));
+            copy(__DIR__.'/../../stubs/inertia-svelte/.prettierrc', base_path('.prettierrc'));
         }
 
         // Providers...
@@ -173,7 +180,7 @@ protected function installInertiaSvelteStack()
             $this->replaceInFile('.vue', '.svelte', base_path('tailwind.config.js'));
             $this->replaceInFile('"vite build', '"tsc && vite build', base_path('package.json'));
         } else {
-            copy(base_path('vendor/laravel/breeze/stubs/inertia-common/jsconfig.json'), base_path('jsconfig.json'));
+            copy(__DIR__.'/../../stubs/inertia-svelte/jsconfig.json', base_path('jsconfig.json'));
             copy(__DIR__.'/../../stubs/inertia-svelte/resources/js/app.js', resource_path('js/app.js'));
 
             $this->replaceInFile('.vue', '.svelte', base_path('tailwind.config.js'));

diff --git a/stubs/inertia-svelte-ts/eslint.config.js b/stubs/inertia-svelte-ts/eslint.config.js
@@ -0,0 +1,38 @@
+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: ['bootstrap', 'public', 'vendor']
+	},
+    {
+        rules: {
+            'no-undef': 'off'
+        }
+    }
+);
diff --git a/stubs/inertia-svelte-ts/resources/js/Components/Dropdown.svelte b/stubs/inertia-svelte-ts/resources/js/Components/Dropdown.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import type { TransitionConfig } from 'svelte/transition';
     import type { Snippet } from 'svelte';
-    import { fade } from 'svelte/transition';
     import { cubicIn, cubicOut } from 'svelte/easing';
 
     let {

diff --git a/stubs/inertia-svelte-ts/resources/js/Components/Modal.svelte b/stubs/inertia-svelte-ts/resources/js/Components/Modal.svelte
@@ -6,7 +6,6 @@
 
     // svelte-ignore non_reactive_update
     let dialog: HTMLDivElement;
-    let document: Document;
 
     let {
         children,
@@ -55,7 +54,6 @@
 </script>
 
 <svelte:window on:keydown={closeOnEscape} />
-<svelte:document bind:this={document} />
 
 {#if show}
 <div bind:this={dialog} style:display={show ? 'contents' : 'none'}>

diff --git a/stubs/inertia-svelte/.prettierrc b/stubs/inertia-svelte/.prettierrc
@@ -0,0 +1,18 @@
+{
+    "singleQuote": true,
+    "trailingComma": "none",
+    "printWidth": 100,
+    "plugins": [
+        "prettier-plugin-organize-imports",
+        "prettier-plugin-tailwindcss",
+        "prettier-plugin-svelte"
+    ],
+    "overrides": [
+        {
+            "files": "*.svelte",
+            "options": {
+                "parser": "svelte"
+            }
+        }
+    ]
+}
diff --git a/stubs/inertia-svelte/eslint.config.js b/stubs/inertia-svelte/eslint.config.js
@@ -0,0 +1,28 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+	js.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		ignores: ['bootstrap', 'public', 'vendor']
+	},
+    {
+        rules: {
+            'no-undef': 'off'
+        }
+    }
+];
diff --git a/stubs/inertia-svelte/jsconfig.json b/stubs/inertia-svelte/jsconfig.json
@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["resources/js/*"],
+            "ziggy-js": ["./vendor/tightenco/ziggy"]
+        }
+    },
+    "include": ["resources/js/**/*.js", "resources/js/**/*.svelte"],
+    "exclude": ["node_modules", "public", "vendor"]
+}
diff --git a/stubs/inertia-svelte/resources/js/Components/Dropdown.svelte b/stubs/inertia-svelte/resources/js/Components/Dropdown.svelte
@@ -1,5 +1,4 @@
 <script>
-    import { fade } from 'svelte/transition';
     import { cubicIn, cubicOut } from 'svelte/easing';
 
     let {

diff --git a/stubs/inertia-svelte/resources/js/Components/Modal.svelte b/stubs/inertia-svelte/resources/js/Components/Modal.svelte
@@ -6,8 +6,7 @@
     // svelte-ignore non_reactive_update
     /** @type {HTMLDivElement} */
     let dialog;
-    /** @type {Document} */
-    let document;
+
     let { children, closeable = true, maxWidth = '2xl', onclose = () => {}, show = false } = $props();
 
     $effect(() => {
@@ -41,7 +40,6 @@
 </script>
 
 <svelte:window onkeydown={closeOnEscape}/>
-<svelte:document bind:this={document}/>
 
 {#if show}
 <div bind:this={dialog} style:display={show ? 'contents' : 'none'}>

diff --git a/stubs/inertia-svelte/resources/js/Pages/Profile/Partials/DeleteUserForm.svelte b/stubs/inertia-svelte/resources/js/Pages/Profile/Partials/DeleteUserForm.svelte
@@ -9,7 +9,6 @@
 
     let confirmingUserDeletion = $state(false);
 
-    // svelte-ignore non_reactive_update
     /** @type {HTMLInputElement} */
     let passwordInput;
 

diff --git a/stubs/inertia-svelte/resources/js/app.js b/stubs/inertia-svelte/resources/js/app.js
@@ -6,7 +6,7 @@ import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import { hydrate, mount } from 'svelte';
 
 createInertiaApp({
-    resolve: name =>
+    resolve: (name) =>
         resolvePageComponent(`./Pages/${name}.svelte`, import.meta.glob('./Pages/**/*.svelte')),
     setup({ el, App, props }) {
         if (!el) {