Standardize Dev Tooling and CI Pipelines

endigo9740 commented 5 months ago

NOTE: this issue is a working in progress

Goal

Currently we use a mix of different tech stacks for all our v3 sites and packages, however we should consolidate the dev tooling around this to make it easier to understand as a contributor.

This may include:

Standardize the commands per project
Update the local README's per project to list recommended commands before submitting a PR
Update the PR template to link to these recommend commands (within each README)
Update GitHub Actions and CI/CD pipeline to make use of the new/updated commands

Recommendations

I propose we focus on a few common commands:

pnpm format - runs Prettier's auto-formatting feature
pnpm check - runs the local diagnostic tooling (ex: svelte check)
pnpm test - runs local test cases; limited to components packages only

Audit

Sites:

[ ] /sites/next.skeleton.dev
- [ ] format - runs prettier --write .
- [ ] check - runs astro check
- [ ] test - n/a
[ ] /sites/themes.skeleton.dev
- [ ] format - runs prettier --write .
- [ ] check - runs svelte-kit sync && svelte-check --tsconfig ./jsconfig.json
- [ ] test - n/a

Packages:

[ ] /packages/skeleton
- [ ] format - runs prettier --ignore-path .prettierignore --write --plugin-search-dir=. .
- [ ] lint - runs prettier --ignore-path .prettierignore --check --plugin-search-dir=. . && eslint --fix --ignore-path .gitignore .
- [ ] test - n/a
[ ] /packages/skeleton-svelte
- [ ] format - runs prettier --write .
- [ ] check - runs svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
- [ ] test:integration - runs playwright test
- [ ] test:unit - runs vitest
[ ] /packages/skeleton-react
- [ ] format - (missing)
- [ ] check - (missing)
- [ ] test - runs vitest run
- [ ] test:watch - runs vitest

AdrianGonz97 commented 5 months ago

We should remove prettier and eslint from the individual packages and hoist them up to the root of the monorepo so that they can be applied everywhere. This will also require moving their respective prettier and eslint plugins to the root as well.

Scripts that should reside in the root of the monorepo:

lint -> prettier --check . && eslint .
format -> prettier --write .
build -> pnpm -r build (this executes the script of each sub-package since they'll be individually in charge of their own build script)
check -> pnpm --parallel check
test -> pnpm --parallel test (tests should only run after all the projects have been built, so we can safely execute them in parallel)
test:integration -> pnpm --parallel test:integration
dev -> pnpm -F next.skeleton.dev dev (this is what we currently have. it starts-up the dev server for the docs site, which in turn, starts up the dev servers for all of the packages)

Each package will be in charge of their own scripts for build, dev (which is build but in watch-mode), test, test:integration, and check.

endigo9740 commented 4 months ago

From @eagerestwolf on Discord:

Are you okay with a stricter ESLint Config? React doesn't have the same level of a11y checking that Svelte does by default (and by that I mean it doesn't check a11y at all). A few plugins that are basically essential for a React component library these days (assuming you aren't using headless primitives like Radix-UI, more on that in a bit) are eslint-plugin-jsx-a11y (this plugin checks your JSX to ensure a11y with screen readers and other assistive technologies, and also provides some good UX defaults as well), eslint-plugin-react (this plugin helps ensure all of your JSX is consistent and predictable, as well as consistently enforcing usage, or lack thereof, of the new React runtime introduced in React 17), eslint-plugin-react-hooks(this plugin helps make sure you are using React's hooks [useEffect, useCallback, useState, useMemo, etc.] correctly, and following React's Rules of Hooks), and eslint-plugin-react-compiler(this plugin helps you make sure your React app and associated components will play nicely with React's new compiler, using the compiler is not necessary to use the plugin; this plugin also helps ensure you are following React's Rules of React).

eagerestwolf commented 4 months ago

I have the repo cloned locally. I am going to add the plugins I mentioned, just using the recommended configs, and run the tests to see if it seems feasible to make the changes for React. The defaults for eslint-plugin-svelte are actually quite sane, so it's probably best left alone.

endigo9740 commented 4 months ago

@AdrianGonz97 FYI, see above. You can read the full discussion around this on the Discord > #skeleton-next channel.

eagerestwolf commented 4 months ago

Case in point of how using the right tools makes the job a lot easier. I just found and squashed at least 2 component bugs (malformed JSX attributes), and found a usage of useEffect where the dependency array is useless because the code changes on every render anyway, thus causing an infinite render loop. The only function called just needed to be created as a memoized callback.

/home/seth/Projects/skeleton/packages/skeleton-react/src/lib/components/ProgressRing/ProgressRing.tsx
  49:6  warning  React Hook useEffect has a missing dependency: 'calcDashOffset'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

/home/seth/Projects/skeleton/packages/skeleton-react/src/lib/components/ProgressRing/ProgressRing.tsx
  51:3  warning  The 'calcDashOffset' function makes the dependencies of useEffect Hook (at line 49) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'calcDashOffset' in its own useCallback() Hook  react-hooks/exhaustive-deps

Additionally, I need input on this one. So, in Svelte, I know they follow the HTML standard of a form element being inside a label being enough to associate a form label and control. However, JSX doesn't follow HTML standards, it follows XML standards (JSX actually means JavaScript XML); therefore a for/name connection is required to associate a label with a control. How would you like to proceed on that? Should we follow the correct React standard, or the correct web standard? I can disable the jsx-a11y/label-has-associated-control rule, but that seems to be counterproductive to having the a11y plugin to begin with.

/home/seth/Projects/skeleton/packages/skeleton-react/src/App.tsx
  29:9  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control

/home/seth/Projects/skeleton/packages/skeleton-react/src/routes/components/switch.tsx
  33:9  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control
  43:9  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control
  53:9  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control
  64:9  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control
  77:9  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control
  90:9  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control

eagerestwolf commented 4 months ago

Also, for the React package, the easiest check is probably just to do tsc --noEmit. I have implemented that as a check unless someone comes up with something better.

EDIT: I also added Prettier, but oh boy this is going to be a big PR. Basically every file was using spaces instead of tabs, and there were plenty of trailing commas, so Prettier touched basically everything; but it's all up to the same standards as the rest of the repo now. Might I suggest an EditorConfig in the repo root?

eagerestwolf commented 4 months ago

Oops, I forgot I have Headwind installed. Crap, now I gotta do all this all over again, it changed all the className orders in every file I touched.

eagerestwolf commented 4 months ago

@AdrianGonz97 FYI, see above. You can read the full discussion around this on the Discord > #skeleton-next channel.

@AdrianGonz97's idea could actually still work. If you hoist the default configs to the top, and set the root option for ESLint, both ESLint and Prettier will default to a config that is a merge of the config closest to the file being checked/linted/fixed/formatted and the root config. So, the root ESLint config could have all the JavaScript and TypeScript related things (you'll need to override the typescript-eslint project in each package), but then you could add the React/Svelte specifics as needed. Anyhow, I'll look into that one when I wake up. I have been up for over 24 hours now. I worked last night, but I at least wanted to take a stab at seeing what I could improve.

eagerestwolf commented 4 months ago

Working on Prettier now. Some things that will need to be resolved, since I forgot that Prettier actually doesn't support split configs like ESLint, are listed below. Mind you these are stylistic choices and do not affect the final product in any meaningful way:

printWidth: some parts of the project have a print width of 140, while others use a print width of 120
tabWidth: some parts of the project are using a tab width of 2, while others are using a tab width of 4
trailingComma: some parts of the project use all trailing commas, some use none

While this ultimately has no bearing, it's good to pick a style and be consistent with it (it helps reduce bugs from poorly formatted code). Assuming you're doing the tabWidth of 4 for Svelte and Astro files since they are essentially HTML, I would advise using a tabWidth of 2, with a Svelte and Astro override for 4 (side effect of this is that the scripts in Svelte scripts will also have a tab width of 4). As for print width, it's probably just best to standardize on 140, since that's what most of the parts of this project are using. Likewise with trailing commas, you should probably standardize on none, since that's what most of the parts of this project are using.

Assuming those are the changes you want, the root config would like what is shown below (mind you, I removed any references to semi because it's only ever set to true which is the default) (side note: I'm also using Prettier's new config format)

import astroPlugin from 'prettier-plugin-astro';
import sveltePlugin from 'prettier-plugin-svelte';

/** @type {import('prettier').Config} */
export default {
    overrides: [
        {
            files: '*.astro',
            options: {
                parser: 'astro',
                tabWidth: 4
            }
        },
        {
            files: '*.svelte',
            options: {
                parser: 'svelte',
                tabWidth: 4
            }
        }
    ],
    plugins: [astroPlugin, sveltePlugin],
    printWidth: 140,
    singleQuote: true,
    trailingComma: 'none',
    useTabs: true
}

I'm also tinkering with the idea of having an EditorConfig in the root of the repo. This will allow users to adapt to Skeleton's coding style (to some extent) without needing to make major changes to their editor's settings (assuming they have the extension installed, if required).

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = tab
insert_final_newline = true
tab_width = 2
trim_trailing_whitespace = true

[*.{astro,svelte}]
indent_size = 4
tab_width = 4

That also kind of demonstrates the power of EditorConfig and Prettier there, you can set arbitrary, per file style choices. It's important to remember that Prettier supports more than just JavaScript and TypeScript. These changes (minus things like trailing comma) also apply to HTML, Svelte, Astro, JSX/TSX, JSON, and more. Also, this is more of a personal suggestion, I would advise dropping hard tabs in favor of spaces. Spaces over tabs is pretty much the standard in the entire JS community at this point, and other communities are also making similar changes; however, it's your project, and how you want it set up is what you will get. I just wanted to offer some guidance there.

eagerestwolf commented 4 months ago

I would also suggest prettier-plugin-tailwindcss (partly becuase then I don't have to remember to disable Headwind in VSCode) because I know it seems like it wouldn't, but the order of your Tailwind classes actually does matter to some extent. Namely when it comes to compression. If you standardize the order of your Tailwind classes, then it will compress much better.

eagerestwolf commented 4 months ago

Ok, I lied. Apparently Prettier does supported nested configs...it just says it doesn't. Anyhow, it's all in the root now, just need to standardize the rules. I am still working on ESLint, and attempting to get a flat config working (just to see if/how you guys like it). This is what I have so far. It won't work at the moment though and I am attempting to debug it (it keeps throwing an error about an unknown keyword meta, it's probably something somewhere in the plugins).

import js from "@eslint/js";
import jsxA11y from "eslint-plugin-jsx-a11y";
import prettierRecommended from "eslint-plugin-prettier";
import react from "eslint-plugin-react";
import reactRecommended from "eslint-plugin-react/configs/recommended.js";
import reactCompiler from "eslint-plugin-react-compiler";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import svelte from 'eslint-plugin-svelte';
import globals from "globals";
import ts from "typescript-eslint";

/** @type {import('eslint').Linter.FlatConfig[]} */
export default [
    {
        linterOptions: {
            reportUnusedDisableDirectives: "warn"
        }
    },

    // Basic JavaScript rule checking (basically equivalent to extends "eslint:recommended")
    {
        files: ['**/*.{cjs,js,jsx,mjs}'],
        languageOptions: {
            globals: {
                ...globals.es2017,
                ...globals.node
            }
        },
        rules: {
            ...js.configs.recommended.rules,
            'no-useless-escape': 'off'
        }
    },

    // TS Rules
    {
        // Extends the default recommended TypeScript eslint config
        ...ts.configs.recommended,

        // Apply required overrides
        files: ['**/*.{ts,tsx}'],
        languageOptions: {
            globals: {
                ...globals.es2017,
                ...globals.node
            },
            parserOptions: {
                extraFileExtensions: ['.svelte']
            }
        },
        rules: {
            'no-empty-function': 'off',
            '@typescript-eslint/no-empty-function': ['error', { allow: ['arrowFunctions'] }]
        }
    },

    // React
    {
        // Enforce usage of JSX/TSX
        files: ['**/*.{jsx,tsx}'],
        languageOptions: {
            globals: {
                ...globals.browser,
                ...globals.es2020
            },
            parserOptions: {
                ecmaFeatures: {
                    jsx: true
                }
            }
        },
        plugins: {
            'jsx-a11y': jsxA11y,
            react,
            'react-compiler': reactCompiler,
            'react-hooks': reactHooks,
            'react-refresh': reactRefresh
        },
        rules: {
            ...jsxA11y.configs.recommended,
            ...reactRecommended,
            ...reactHooks.configs.recommended,
            'react-refresh/only-export-components': [
                'warn',
                { allowConstantExport: true },
            ],
            'react-compiler/react-compiler': 'error'
        }
    },

    // Svelte config, man Svelte makes this easy (kinda like they do everything)
    ...svelte.configs['flat/recommended'],
    ...svelte.configs['flat/prettier'],

    // Prettier now gets its own config at the end, so that it can make the overrides it needs to
    // IMPORTANT: THIS MUST BE THE LAST CONFIG!!!
    prettierRecommended
];

eagerestwolf commented 4 months ago

Ok, nevermind. Not going with a flat config. I keep getting an error about an unexpected array in the config, and I don't know why. Anyhow, got everything working with one singular root config, but oh boy there's a lot of errors. With this setup, anything can be overriden with a nested Prettier or ESLint config if that project requires it, and the nested .eslintignore and .prettierignore files continue to function as expected.

skeleton on  next [✘!?] via  v20.14.0 took 8s 
❯ pnpm eslint .

/home/seth/Projects/skeleton/packages/skeleton-react/src/App.tsx
  29:9  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control

/home/seth/Projects/skeleton/packages/skeleton-react/src/lib/components/ProgressRing/ProgressRing.tsx
  44:8   error    'circumference' is never reassigned. Use 'const' instead                                                           prefer-const
  44:23  error    'setCircumference' is never reassigned. Use 'const' instead                                                        prefer-const
  45:8   error    'dashoffset' is never reassigned. Use 'const' instead                                                              prefer-const
  45:20  error    'setDashoffset' is never reassigned. Use 'const' instead                                                           prefer-const
  49:6   warning  React Hook useEffect has a missing dependency: 'calcDashOffset'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

/home/seth/Projects/skeleton/packages/skeleton-react/src/routes/components/avatars.tsx
  56:6  error  Unknown property 'color-interpolation-filters' found, use 'colorInterpolationFilters' instead  react/no-unknown-property

/home/seth/Projects/skeleton/packages/skeleton-react/src/routes/components/switch.tsx
  33:9  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control
  43:9  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control
  53:9  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control
  64:9  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control
  77:9  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control
  90:9  error  A form label must be associated with a control  jsx-a11y/label-has-associated-control

/home/seth/Projects/skeleton/packages/skeleton-svelte/src/lib/components/Accordion/AccordionItem.svelte
  5:16  error  'Mouse' is defined but never used  @typescript-eslint/no-unused-vars

/home/seth/Projects/skeleton/packages/skeleton-svelte/src/routes/components/accordions/+page.svelte
  7:8  error  'ontoggle' is assigned a value but never used  @typescript-eslint/no-unused-vars

/home/seth/Projects/skeleton/packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
  45:6  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags
  49:6  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags
  53:6  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags
  70:6  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags
  73:6  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags
  76:6  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags

/home/seth/Projects/skeleton/packages/skeleton/src/plugin/extends/animations.ts
  15:44  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/packages/vite-plugin-tw-plugin-watcher/index.d.ts
  26:24  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/components/docs/FrameworkTabs.tsx
  4:38  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/components/docs/Preview.tsx
  4:32  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/components/docs/Search.svelte
  205:13  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/env.d.ts
  1:1  error  Do not use a triple slash reference for ../.astro/types.d.ts, use `import` style instead  @typescript-eslint/triple-slash-reference

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/accordions/Example.tsx
  5:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/app-bars/Example.tsx
  5:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/app-bars/ExampleResponsive.tsx
  5:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/app-bars/ExampleToolbar.tsx
  5:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/avatars/Example.tsx
  4:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/progress-rings/ExampleIcons.tsx
  1:10  error  'useState' is defined but never used  @typescript-eslint/no-unused-vars

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/switch/Example.tsx
  4:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/switch/ExampleCompact.tsx
  5:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/switch/ExampleIcons.tsx
  5:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/switch/ExampleLightswitch.tsx
  5:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/switch/ExampleList.tsx
   4:29  error  Unexpected any. Specify a different type        @typescript-eslint/no-explicit-any
  11:4   error  A form label must be associated with a control  jsx-a11y/label-has-associated-control
  16:4   error  A form label must be associated with a control  jsx-a11y/label-has-associated-control
  26:4   error  A form label must be associated with a control  jsx-a11y/label-has-associated-control

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/tabs/Example.tsx
  4:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/tabs/ExampleFocusableContent.tsx
  4:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/tabs/ExampleIcons.tsx
  5:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/tabs/ExampleJustify.tsx
  5:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/tabs/ExampleRTL.tsx
  5:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/tabs/ExampleStretch.tsx
  4:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/components/tabs/ExampleVerticalIcons.tsx
  5:29  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/next.skeleton.dev/src/examples/tailwind/chips/ExampleSelect.tsx
  5:7   error  'color' is never reassigned. Use 'const' instead     prefer-const
  5:14  error  'setColor' is never reassigned. Use 'const' instead  prefer-const

/home/seth/Projects/skeleton/sites/skeleton.dev/src/lib/components/DocsAppBar/DocsAppBar.svelte
  77:4  error  $storeTheme is an illegal variable name. To reference a global variable called $storeTheme, use globalThis.$storeTheme(illegal-global)  svelte/valid-compile

/home/seth/Projects/skeleton/sites/skeleton.dev/src/lib/components/DocsSidebar/DocsSidebar.svelte
  81:7   error  A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.(a11y-no-noninteractive-element-interactions)  svelte/valid-compile
  83:33  error  `{@html}` can lead to XSS attack                                                                                                           svelte/no-at-html-tags

/home/seth/Projects/skeleton/sites/skeleton.dev/src/lib/layouts/DocsShell/DocsShell.svelte
  35:17  error  $page is an illegal variable name. To reference a global variable called $page, use globalThis.$page(illegal-global)  svelte/valid-compile

/home/seth/Projects/skeleton/sites/skeleton.dev/src/lib/layouts/DocsShell/partials/Header.svelte
  34:50  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags
  36:6   error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags

/home/seth/Projects/skeleton/sites/skeleton.dev/src/lib/layouts/DocsShell/partials/PanelEvents.svelte
  26:32  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags

/home/seth/Projects/skeleton/sites/skeleton.dev/src/lib/layouts/DocsShell/partials/PanelProps.svelte
  36:31  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags

/home/seth/Projects/skeleton/sites/skeleton.dev/src/lib/layouts/DocsShell/partials/PanelSlots.svelte
  26:31  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags

/home/seth/Projects/skeleton/sites/skeleton.dev/src/lib/layouts/DocsThemer/DocsThemer.svelte
  116:7   error  $storePreview is an illegal variable name. To reference a global variable called $storePreview, use globalThis.$storePreview(illegal-global)  svelte/valid-compile
  204:14  error  `{@html}` can lead to XSS attack                                                                                                              svelte/no-at-html-tags
  254:12  error  `{@html}` can lead to XSS attack                                                                                                              svelte/no-at-html-tags

/home/seth/Projects/skeleton/sites/skeleton.dev/src/lib/layouts/LayoutPage/LayoutPage.svelte
  30:9  error  $storeVercelProductionMode is an illegal variable name. To reference a global variable called $storeVercelProductionMode, use globalThis.$storeVercelProductionMode(illegal-global)  svelte/valid-compile

/home/seth/Projects/skeleton/sites/skeleton.dev/src/routes/(inner)/components/ratings/+page.svelte
   41:7  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags
   44:7  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags
   47:7  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags
   90:8  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags
   93:8  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags
   96:8  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags
  122:8  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags
  125:8  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags
  128:8  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags

/home/seth/Projects/skeleton/sites/skeleton.dev/src/routes/(inner)/docs/colors/+page.svelte
  24:8  error  'shadesArr' is assigned a value but never used  @typescript-eslint/no-unused-vars
  25:8  error  'colorsArr' is assigned a value but never used  @typescript-eslint/no-unused-vars

/home/seth/Projects/skeleton/sites/skeleton.dev/src/routes/(inner)/docs/contributing/+page.svelte
  0:0  error  Parsing error: </a> attempted to close element that was already automatically closed by <a> (cannot nest <a> inside <a>)

/home/seth/Projects/skeleton/sites/skeleton.dev/src/routes/(inner)/docs/get-started/SectionInstall.svelte
  11:20  error  $storeOnboardMethod is an illegal variable name. To reference a global variable called $storeOnboardMethod, use globalThis.$storeOnboardMethod(illegal-global)  svelte/valid-compile

/home/seth/Projects/skeleton/sites/skeleton.dev/src/routes/(inner)/docs/get-started/SectionSkeleton.svelte
  11:20  error  $storeOnboardMethod is an illegal variable name. To reference a global variable called $storeOnboardMethod, use globalThis.$storeOnboardMethod(illegal-global)  svelte/valid-compile

/home/seth/Projects/skeleton/sites/skeleton.dev/src/routes/(inner)/docs/get-started/SectionTailwind.svelte
  15:20  error  $storeOnboardMethod is an illegal variable name. To reference a global variable called $storeOnboardMethod, use globalThis.$storeOnboardMethod(illegal-global)  svelte/valid-compile

/home/seth/Projects/skeleton/sites/skeleton.dev/src/routes/(inner)/docs/get-started/SectionThemes.svelte
  30:5  error  A11y: <div> with click, keydown handlers must have an ARIA role(a11y-no-static-element-interactions)  svelte/valid-compile

/home/seth/Projects/skeleton/sites/skeleton.dev/src/routes/(inner)/elements/scroll-containers/+page.svelte
  73:30  error  '_' is defined but never used  @typescript-eslint/no-unused-vars

/home/seth/Projects/skeleton/sites/skeleton.dev/src/routes/(inner)/utilities/lightswitches/+page.svelte
  23:6  error  'tabSection' is assigned a value but never used  @typescript-eslint/no-unused-vars

/home/seth/Projects/skeleton/sites/skeleton.dev/src/routes/+error.svelte
  6:6  error  $page is an illegal variable name. To reference a global variable called $page, use globalThis.$page(illegal-global)  svelte/valid-compile

/home/seth/Projects/skeleton/sites/skeleton.dev/src/routes/+layout.svelte
  169:29  error  $prefersReducedMotionStore is an illegal variable name. To reference a global variable called $prefersReducedMotionStore, use globalThis.$prefersReducedMotionStore(illegal-global)  svelte/valid-compile

/home/seth/Projects/skeleton/sites/skeleton.dev/src/routes/blog/[slug]/+page.svelte
  77:3  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags

/home/seth/Projects/skeleton/sites/skeleton.dev/src/routes/home-partials/HomeFeatures.svelte
  52:8  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags

/home/seth/Projects/skeleton/sites/themes.skeleton.dev/src/lib/components/fieldsets/Colors.svelte
  60:47  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags

/home/seth/Projects/skeleton/sites/themes.skeleton.dev/src/lib/components/previews/CodeGen.svelte
  7:30  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

/home/seth/Projects/skeleton/sites/themes.skeleton.dev/src/lib/components/previews/Palette.svelte
  121:28  error  'i' is defined but never used  @typescript-eslint/no-unused-vars
  126:34  error  'i' is defined but never used  @typescript-eslint/no-unused-vars

/home/seth/Projects/skeleton/sites/themes.skeleton.dev/src/lib/constants.ts
    7:30  error  Unexpected any. Specify a different type          @typescript-eslint/no-explicit-any
   11:34  error  Unexpected any. Specify a different type          @typescript-eslint/no-explicit-any
  120:12  error  'radii' is never reassigned. Use 'const' instead  prefer-const
  131:12  error  'edges' is never reassigned. Use 'const' instead  prefer-const

/home/seth/Projects/skeleton/sites/themes.skeleton.dev/src/lib/generator.svelte.ts
   62:6  error  'palette' is never reassigned. Use 'const' instead    prefer-const
   72:6  error  'code' is never reassigned. Use 'const' instead       prefer-const
   73:6  error  'colorsArr' is never reassigned. Use 'const' instead  prefer-const
   94:6  error  'colorsArr' is never reassigned. Use 'const' instead  prefer-const
  184:6  error  'theme' is never reassigned. Use 'const' instead      prefer-const

/home/seth/Projects/skeleton/sites/themes.skeleton.dev/src/lib/state.svelte.ts
    7:12  error  'stateDisplay' is never reassigned. Use 'const' instead          prefer-const
    7:26  error  Unexpected any. Specify a different type                         @typescript-eslint/no-explicit-any
   14:12  error  'stateFormCore' is never reassigned. Use 'const' instead         prefer-const
   19:12  error  'stateFormColors' is never reassigned. Use 'const' instead       prefer-const
   64:12  error  'stateFormBackgrounds' is never reassigned. Use 'const' instead  prefer-const
   71:12  error  'stateFormTypography' is never reassigned. Use 'const' instead   prefer-const
  107:12  error  'stateFormSpacing' is never reassigned. Use 'const' instead      prefer-const
  113:12  error  'stateFormEdges' is never reassigned. Use 'const' instead        prefer-const

/home/seth/Projects/skeleton/sites/themes.skeleton.dev/src/routes/+layout.svelte
  10:2  error  `{@html}` can lead to XSS attack  svelte/no-at-html-tags

✖ 107 problems (106 errors, 1 warning)
  21 errors and 0 warnings potentially fixable with the `--fix` option.

Same with Prettier as well

skeleton on  next [✘!?] via  v20.14.0 
❯ pnpm prettier -c .
Checking formatting...
[warn] .changeset/chilled-comics-hear.md
[warn] .changeset/config.json
[warn] .changeset/lovely-dingos-join.md
[warn] .changeset/mean-schools-double.md
[warn] .changeset/nasty-chefs-build.md
[warn] .changeset/pre.json
[warn] .changeset/six-tables-warn.md
[warn] .eslintrc.cjs
[warn] .github/ISSUE_TEMPLATE/bug_report.yml
[warn] .github/ISSUE_TEMPLATE/docs_issue.yml
[warn] .github/workflows-old/release-dev.yml
[warn] .github/workflows-old/release.yml
[warn] .github/workflows/release-next.yaml
[warn] .vscode/extensions.json
[warn] .vscode/launch-debug.json
[warn] .vscode/settings.json
[warn] cspell.json
[warn] infra/notes.md
[warn] packages/create-skeleton-app/README-MONO.md
[warn] packages/create-skeleton-app/README.md
[warn] packages/create-skeleton-app/scripts/prepare-templates.mjs
[warn] packages/create-skeleton-app/src/creator.js
[warn] packages/create-skeleton-app/src/index.js
[warn] packages/create-skeleton-app/src/utils.js
[warn] packages/create-skeleton-app/templates/skeleton-template-appshell/src/app.html
[warn] packages/create-skeleton-app/templates/skeleton-template-appshell/src/routes/+layout.svelte
[warn] packages/create-skeleton-app/templates/skeleton-template-appshell/src/routes/+page.svelte
[warn] packages/create-skeleton-app/templates/skeleton-template-bare/src/app.html
[warn] packages/skeleton-react/index.html
[warn] packages/skeleton-react/postcss.config.js
[warn] packages/skeleton-react/scripts/generator.js
[warn] packages/skeleton-react/scripts/schema.json
[warn] packages/skeleton-react/scripts/types.ts
[warn] packages/skeleton-react/src/App.css
[warn] packages/skeleton-react/src/App.test.tsx
[warn] packages/skeleton-react/src/App.tsx
[warn] packages/skeleton-react/src/lib/components/Accordion/Accordion.test.tsx
[warn] packages/skeleton-react/src/lib/components/Accordion/Accordion.tsx
[warn] packages/skeleton-react/src/lib/components/Accordion/schema.json
[warn] packages/skeleton-react/src/lib/components/Accordion/types.ts
[warn] packages/skeleton-react/src/lib/components/AppBar/AppBar.tsx
[warn] packages/skeleton-react/src/lib/components/AppBar/schema.json
[warn] packages/skeleton-react/src/lib/components/AppBar/types.ts
[warn] packages/skeleton-react/src/lib/components/Avatar/Avatar.tsx
[warn] packages/skeleton-react/src/lib/components/Avatar/schema.json
[warn] packages/skeleton-react/src/lib/components/Avatar/types.ts
[warn] packages/skeleton-react/src/lib/components/Progress/Progress.tsx
[warn] packages/skeleton-react/src/lib/components/Progress/schema.json
[warn] packages/skeleton-react/src/lib/components/Progress/types.ts
[warn] packages/skeleton-react/src/lib/components/ProgressRing/ProgressRing.test.tsx
[warn] packages/skeleton-react/src/lib/components/ProgressRing/ProgressRing.tsx
[warn] packages/skeleton-react/src/lib/components/ProgressRing/schema.json
[warn] packages/skeleton-react/src/lib/components/ProgressRing/types.ts
[warn] packages/skeleton-react/src/lib/components/Switch/schema.json
[warn] packages/skeleton-react/src/lib/components/Switch/Switch.test.tsx
[warn] packages/skeleton-react/src/lib/components/Switch/Switch.tsx
[warn] packages/skeleton-react/src/lib/components/Switch/types.ts
[warn] packages/skeleton-react/src/lib/components/Tabs/schema.json
[warn] packages/skeleton-react/src/lib/components/Tabs/Tabs.test.tsx
[warn] packages/skeleton-react/src/lib/components/Tabs/Tabs.tsx
[warn] packages/skeleton-react/src/lib/components/Tabs/types.ts
[warn] packages/skeleton-react/src/lib/components/Test/Test.tsx
[warn] packages/skeleton-react/src/lib/index.ts
[warn] packages/skeleton-react/src/lib/schemas.ts
[warn] packages/skeleton-react/src/main.tsx
[warn] packages/skeleton-react/src/router.ts
[warn] packages/skeleton-react/src/routes/components/accordions.tsx
[warn] packages/skeleton-react/src/routes/components/app-bars.tsx
[warn] packages/skeleton-react/src/routes/components/avatars.tsx
[warn] packages/skeleton-react/src/routes/components/progress-rings.tsx
[warn] packages/skeleton-react/src/routes/components/progress.tsx
[warn] packages/skeleton-react/src/routes/components/switch.tsx
[warn] packages/skeleton-react/src/routes/components/tabs.tsx
[warn] packages/skeleton-react/src/routes/components/test.tsx
[warn] packages/skeleton-react/src/routes/index.tsx
[warn] packages/skeleton-react/tailwind.config.js
[warn] packages/skeleton-react/tests/setup.js
[warn] packages/skeleton-react/tsconfig.json
[warn] packages/skeleton-react/tsconfig.node.json
[warn] packages/skeleton-react/tsconfig.package.json
[warn] packages/skeleton-react/vite.config.ts
[warn] packages/skeleton-svelte/src/lib/components/Tab/TabsControl.svelte
[warn] packages/skeleton-svelte/src/routes/components/tabs/+page.svelte
[warn] packages/skeleton/src/plugin/generated/generated-classes.cjs
[warn] packages/vite-plugin-tw-plugin-watcher/index.js
[warn] pnpm-workspace.yaml
[warn] prettier.config.js
[warn] scripts/checkout.cjs
[warn] scripts/dev-version.js
[warn] scripts/rimraf.js
[warn] scripts/template-gen.js
[warn] sites/next.skeleton.dev/.vscode/extensions.json
[warn] sites/next.skeleton.dev/.vscode/launch.json
[warn] sites/next.skeleton.dev/.vscode/settings.json
[warn] sites/next.skeleton.dev/astro.config.js
[warn] sites/next.skeleton.dev/src/components/docs/ApiTable.astro
[warn] sites/next.skeleton.dev/src/components/docs/ChipsBar.astro
[warn] sites/next.skeleton.dev/src/components/docs/Footer.astro
[warn] sites/next.skeleton.dev/src/components/docs/FrameworkPicker.astro
[warn] sites/next.skeleton.dev/src/components/docs/Header.astro
[warn] sites/next.skeleton.dev/src/components/docs/Navigation.astro
[warn] sites/next.skeleton.dev/src/components/docs/Search.svelte
[warn] sites/next.skeleton.dev/src/components/docs/TableOfContents.astro
[warn] sites/next.skeleton.dev/src/components/mdx/index.ts
[warn] sites/next.skeleton.dev/src/content/config.ts
[warn] sites/next.skeleton.dev/src/content/docs/components/accordion/react.mdx
[warn] sites/next.skeleton.dev/src/content/docs/components/accordion/svelte.mdx
[warn] sites/next.skeleton.dev/src/content/docs/components/app-bar/react.mdx
[warn] sites/next.skeleton.dev/src/content/docs/components/avatar/react.mdx
[warn] sites/next.skeleton.dev/src/content/docs/components/avatar/svelte.mdx
[warn] sites/next.skeleton.dev/src/content/docs/components/progress-ring/react.mdx
[warn] sites/next.skeleton.dev/src/content/docs/components/progress/react.mdx
[warn] sites/next.skeleton.dev/src/content/docs/components/progress/svelte.mdx
[warn] sites/next.skeleton.dev/src/content/docs/components/switch/react.mdx
[warn] sites/next.skeleton.dev/src/content/docs/components/tabs/react.mdx
[warn] sites/next.skeleton.dev/src/content/docs/components/tabs/svelte.mdx
[warn] sites/next.skeleton.dev/src/content/docs/design/iconography.mdx
[warn] sites/next.skeleton.dev/src/content/docs/design/presets.mdx
[warn] sites/next.skeleton.dev/src/content/docs/design/spacing.mdx
[warn] sites/next.skeleton.dev/src/content/docs/design/themes.mdx
[warn] sites/next.skeleton.dev/src/content/docs/get-started/fundamentals.mdx
[warn] sites/next.skeleton.dev/src/content/docs/get-started/installation/nextjs.mdx
[warn] sites/next.skeleton.dev/src/content/docs/get-started/installation/sveltekit.mdx
[warn] sites/next.skeleton.dev/src/content/docs/get-started/mode.mdx
[warn] sites/next.skeleton.dev/src/content/docs/get-started/plugin.mdx
[warn] sites/next.skeleton.dev/src/content/docs/resources/_markdown.mdx
[warn] sites/next.skeleton.dev/src/content/docs/resources/contribute/components.mdx
[warn] sites/next.skeleton.dev/src/content/docs/resources/contribute/documentation.mdx
[warn] sites/next.skeleton.dev/src/content/docs/resources/contribute/get-started.mdx
[warn] sites/next.skeleton.dev/src/content/docs/tailwind/gradients.mdx
[warn] sites/next.skeleton.dev/src/examples/components/accordions/Example.svelte
[warn] sites/next.skeleton.dev/src/examples/components/app-bars/Example.svelte
[warn] sites/next.skeleton.dev/src/examples/components/app-bars/ExampleResponsive.svelte
[warn] sites/next.skeleton.dev/src/examples/components/app-bars/ExampleToolbar.svelte
[warn] sites/next.skeleton.dev/src/examples/components/progress-rings/Example.tsx
[warn] sites/next.skeleton.dev/src/examples/components/progress-rings/ExampleIndeterminate.svelte
[warn] sites/next.skeleton.dev/src/examples/components/progress-rings/ExampleIndeterminate.tsx
[warn] sites/next.skeleton.dev/src/examples/components/switch/ExampleCompact.svelte
[warn] sites/next.skeleton.dev/src/examples/components/switch/ExampleIcons.svelte
[warn] sites/next.skeleton.dev/src/examples/components/switch/ExampleLightswitch.svelte
[warn] sites/next.skeleton.dev/src/examples/components/switch/ExampleList.tsx
[warn] sites/next.skeleton.dev/src/examples/components/tabs/Example.svelte
[warn] sites/next.skeleton.dev/src/examples/components/tabs/ExampleFocusableContent.svelte
[warn] sites/next.skeleton.dev/src/examples/components/tabs/ExampleIcons.svelte
[warn] sites/next.skeleton.dev/src/examples/components/tabs/ExampleJustify.svelte
[warn] sites/next.skeleton.dev/src/examples/components/tabs/ExampleRTL.svelte
[warn] sites/next.skeleton.dev/src/examples/components/tabs/ExampleStretch.svelte
[warn] sites/next.skeleton.dev/src/examples/components/tabs/ExampleVerticalIcons.svelte
[warn] sites/next.skeleton.dev/src/examples/design/colors/ExampleColors.astro
[warn] sites/next.skeleton.dev/src/examples/design/colors/ExamplePairings.astro
[warn] sites/next.skeleton.dev/src/examples/design/typography/Blockquotes.astro
[warn] sites/next.skeleton.dev/src/examples/tailwind/cards/ExampleDetailed.astro
[warn] sites/next.skeleton.dev/src/examples/tailwind/chips/ExampleSelect.tsx
[warn] sites/next.skeleton.dev/src/examples/tailwind/forms/Example.astro
[warn] sites/next.skeleton.dev/src/examples/tailwind/forms/ExampleTextarea.astro
[warn] sites/next.skeleton.dev/src/examples/tailwind/gradients/Example.astro
[warn] sites/next.skeleton.dev/src/examples/tailwind/gradients/ExampleConic.astro
[warn] sites/next.skeleton.dev/src/examples/tailwind/gradients/ExampleSpinner.astro
[warn] sites/next.skeleton.dev/src/examples/tailwind/gradients/ExampleText.astro
[warn] sites/next.skeleton.dev/src/examples/tailwind/tables/Example.astro
[warn] sites/next.skeleton.dev/src/layouts/LayoutDoc.astro
[warn] sites/next.skeleton.dev/src/pages/404.astro
[warn] sites/next.skeleton.dev/src/pages/blog/[...slug]/index.astro
[warn] sites/next.skeleton.dev/src/pages/blog/index.astro
[warn] sites/next.skeleton.dev/src/pages/docs/[...slug]/index.astro
[warn] sites/next.skeleton.dev/src/pages/index.astro
[warn] sites/next.skeleton.dev/src/stores/doc-search-settings.ts
[warn] sites/next.skeleton.dev/src/stores/preferred-framework.ts
[warn] sites/next.skeleton.dev/svelte.config.js
[warn] sites/next.skeleton.dev/tailwind.config.js
[warn] sites/skeleton.dev/src/app.html
[warn] sites/skeleton.dev/src/lib/components/DocsFooter/DocsFooter.svelte
[warn] sites/skeleton.dev/src/lib/components/DocsLogos/DocsLogoAnim.svelte
[warn] sites/skeleton.dev/src/lib/components/DocsPreview/DocsPreview.svelte
[warn] sites/skeleton.dev/src/lib/layouts/DocsShell/partials/Header.svelte
[warn] sites/skeleton.dev/src/lib/layouts/DocsShell/partials/PanelProps.svelte
[warn] sites/skeleton.dev/src/lib/layouts/DocsThemer/colors.ts
[warn] sites/skeleton.dev/src/lib/layouts/DocsThemer/DocsThemer.svelte
[warn] sites/skeleton.dev/src/lib/modals/DocsSearch/DocsSearch.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/actions/clipboard/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/actions/filters/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/actions/focus-trap/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/accordions/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/app-rail/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/app-shell/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/autocomplete/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/avatars/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/conic-gradients/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/file-buttons/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/input-chips/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/listboxes/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/paginators/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/progress-bars/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/radio-groups/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/ratings/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/slide-toggles/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/steppers/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/tables/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/tabs/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/components/tree-views/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/colors/+page.svelte
sites/skeleton.dev/src/routes/(inner)/docs/contributing/+page.svelte
[error] sites/skeleton.dev/src/routes/(inner)/docs/contributing/+page.svelte: CompileError: </a> attempted to close element that was already automatically closed by <a> (cannot nest <a> inside <a>)
[error]   30 |                          rel="noreferrer"
[error]   31 |                  >
[error] > 32 |                          Read Guide
[error]      |  ^
[error]   33 |                  </a>
[error]   34 |          </a>
[error]   35 |          <!-- GitHub: First Contributions -->
[error] (invalid-closing-tag-after-autoclose)
[warn] sites/skeleton.dev/src/routes/(inner)/docs/contributing/documentation/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/contributing/requirements/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/contributing/style-guide/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/contributing/sveld/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/figma/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/generator/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/get-started/SectionInstall.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/get-started/SectionTailwind.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/introduction/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/purgecss/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/quickstart/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/sponsorship/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/sponsorship/licensing/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/styling/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/tauri/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/themes/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/tokens/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/transitions/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/docs/variants/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/elements/alerts/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/elements/breadcrumbs/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/elements/buttons/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/elements/cards/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/elements/chat/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/elements/chips/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/elements/core/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/elements/forms/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/elements/gradient-headings/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/elements/image-layouts/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/elements/lists/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/elements/scroll-containers/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/elements/tables/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/elements/typography/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/utilities/codeblocks/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/utilities/drawers/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/utilities/lightswitches/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/utilities/local-storage-stores/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/utilities/popups/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/utilities/table-of-contents/+page.svelte
[warn] sites/skeleton.dev/src/routes/(inner)/utilities/toasts/+page.svelte
[warn] sites/skeleton.dev/src/routes/+error.svelte
[warn] sites/skeleton.dev/src/routes/home-partials/HomeHeroComponents.svelte
[warn] sites/skeleton.dev/src/routes/home-partials/HomeSvelteKit.svelte
[warn] sites/skeleton.dev/src/routes/home-partials/HomeTailwind.svelte
[warn] sites/themes.skeleton.dev/src/lib/components/fieldsets/Colors.svelte
[warn] sites/themes.skeleton.dev/src/lib/components/fieldsets/Spacing.svelte
[warn] sites/themes.skeleton.dev/src/lib/components/fieldsets/Typography.svelte
[warn] sites/themes.skeleton.dev/src/lib/components/panels/PanelForm.svelte
[warn] sites/themes.skeleton.dev/src/lib/components/panels/PanelPreview.svelte
[warn] sites/themes.skeleton.dev/src/lib/components/previews/CodeGen.svelte
[warn] sites/themes.skeleton.dev/src/lib/components/previews/Elements.svelte
[warn] sites/themes.skeleton.dev/src/lib/components/previews/Typography.svelte
[warn] sites/themes.skeleton.dev/src/lib/constants.ts
[warn] sites/themes.skeleton.dev/src/lib/generator.svelte.ts
[warn] Code style issues found in 256 files. Run Prettier with --write to fix.

For reference, here's the .eslintrc.cjs and .prettierrc.cjs files I came up with (they have to be cjs because the projects are modules):

.eslintrc.cjs:

/** @type {import('eslint').Linter.Config} */
module.exports = {
    root: true,
    env: {
        es2020: true,
        node: true
    },
    extends: [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier"
    ],
    overrides: [
        {
            files: ["*.svelte"],
            extends: ["plugin:svelte/recommended", "plugin:svelte/prettier"],
            env: {
                browser: true
            },
            parser: "svelte-eslint-parser",
            parserOptions: {
                parser: "@typescript-eslint/parser"
            },
            plugins: ["svelte"]
        },
        {
            files: ["*.tsx"],
            env: {
                browser: true,
                node: false
            },
            extends: [
                "plugin:jsx-a11y/recommended",
                "plugin:react/recommended",
                "plugin:react/jsx-runtime",
                "plugin:react-hooks/recommended"
            ],
            parserOptions: {
                ecmaFeatures: {
                    jsx: true
                }
            },
            plugins: [
                "jsx-a11y",
                "react",
                "react-compiler",
                "react-hooks",
                "react-refresh"
            ],
            rules: {
                "react-compiler/react-compiler": "error",
                "react-refresh/only-export-components": ["warn", { allowConstantExport: true }]
            },
            settings: {
                react: {
                    version: "detect"
                }
            }
        }
    ],
    parser: "@typescript-eslint/parser",
    parserOptions: {
        ecmaVersion: 2020,
        extraFileExtensions: [".svelte"],
        sourceType: "module"
    },
    plugins: ["@typescript-eslint"],
    reportUnusedDisableDirectives: true,
    rules: {
        'no-empty-function': 'off',
        'no-useless-escape': 'off',
        '@typescript-eslint/no-empty-function': ['error', { allow: ['arrowFunctions'] }]
    }
}

.prettierrc.cjs:

/** @type {import('prettier').Config} */
module.exports = {
    overrides: [
        {
            files: '*.astro',
            options: {
                parser: 'astro',
                tabWidth: 4
            }
        },
        {
            files: '*.svelte',
            options: {
                parser: 'svelte',
                tabWidth: 4
            }
        }
    ],
    plugins: ['prettier-plugin-astro', 'prettier-plugin-svelte'],
    printWidth: 140,
    singleQuote: true,
    trailingComma: 'none',
    useTabs: true
}

eagerestwolf commented 4 months ago

Also, ignore the mix of single and double quotes. I am just used to using double quotes, but Prettier will fix that when the time comes.

endigo9740 commented 4 months ago

@eagerestwolf just a reminder it's the weekend and I'm not likely to have much bandwidth to respond. But scanning through the posts above, we welcome testing and suggestions on what to change and implement. But in this specific regard, the team and I will make the final decision and likely implement solutions that balance well cross-framework. We're taking React into account, but it will need to stay in line with the other projects to ensure Adrian's suggestion above for consistently running this globally in the monorepo works as desired. So a bit of a balancing act.

Also just FYI tomorrow is a prep day and Tuesday a release for us, so it may be a couple days until we can review in detail. Feel free to push pause until we can catch up. Then we'll go from there. I'm sure I'll have some follow up questions!

Thanks for all the effort so far!

eagerestwolf commented 4 months ago

@endigo9740 Of course man, I didn't expect you to respond on the weekend anyway. I was just documenting my progress so you guys would see it whenever you had the chance. Long story short though, PR is open with the changes, I will need to rollback if there are any changes requested to the configs, but I can cross that bridge when the time comes. As for the frameworks, it's super simple to just add another plugin and override to Prettier and/or ESLint. In fact, Vue could be added with 5 or 6 lines in ESLint and 2 or 3 in Prettier, as could Solid; so, the expandability is there. Anyhow, I have done what I can. I'm sure you guys will review everything once the launch happens on Tuesday and we can go from there. Forewarning, however, I work full-time as a truck driver on nights. I generally work 8pm until around 7am US Central Time, so I may lag about a day behind on code reviews.

skeletonlabs / skeleton