chore: add prettier (#8543)

Author: baseballyama

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
 	root: true,
-	extends: '@sveltejs',
+	extends: ['@sveltejs', 'prettier'],
 	settings: {
 		'import/core-modules': [
 			'svelte',

.github/workflows/ci.yml

@@ -44,7 +44,7 @@ jobs:
         with:
           node-version: 16
           cache: pnpm
-      - run: 'pnpm i && pnpm lint'
+      - run: 'pnpm i && pnpm format:check && pnpm lint'
   Unit:
     runs-on: ${{ matrix.os }}
     timeout-minutes: 10

.prettierignore

@@ -0,0 +1,13 @@
+/*
+!/elements
+!/scripts
+# TODO: after launch new site, format site dir.
+/site
+!/src
+src/compiler/compile/internal_exports.ts
+!/test
+/test/**/*.svelte
+/test/**/_expected*
+/test/**/_actual*
+/test/**/expected*
+/types

.prettierrc

@@ -0,0 +1,23 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [
+		{
+			"files": ["*.svelte"],
+			"options": {
+				"bracketSameLine": false
+			}
+		},
+		{
+			"files": ["README.md", "packages/*/README.md"],
+			"options": {
+				"useTabs": false,
+				"tabWidth": 2
+			}
+		}
+	],
+	"pluginSearchDirs": ["."]
+}

elements/index.d.ts

@@ -39,8 +39,9 @@ type Booleanish = boolean | 'true' | 'false';
 // Event Handler Types
 // ----------------------------------------------------------------------
 
-type EventHandler<E extends Event = Event, T extends EventTarget = Element> =
-(event: E & { currentTarget: EventTarget & T}) => any;
+type EventHandler<E extends Event = Event, T extends EventTarget = Element> = (
+	event: E & { currentTarget: EventTarget & T }
+) => any;
 
 export type ClipboardEventHandler<T extends EventTarget> = EventHandler<ClipboardEvent, T>;
 export type CompositionEventHandler<T extends EventTarget> = EventHandler<CompositionEvent, T>;
@@ -196,7 +197,7 @@ export interface DOMAttributes<T extends EventTarget> {
 	// Message Events
 	'on:message'?: MessageEventHandler<T> | undefined | null;
 	'on:messageerror'?: MessageEventHandler<T> | undefined | null;
-	
+
 	// Document Events
 	'on:visibilitychange'?: EventHandler<Event, T> | undefined | null;
 
@@ -350,7 +351,19 @@ export interface AriaAttributes {
 	 * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
 	 * @see aria-atomic.
 	 */
-	'aria-relevant'?: 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals' | undefined | null;
+	'aria-relevant'?:
+		| 'additions'
+		| 'additions removals'
+		| 'additions text'
+		| 'all'
+		| 'removals'
+		| 'removals additions'
+		| 'removals text'
+		| 'text'
+		| 'text additions'
+		| 'text removals'
+		| undefined
+		| null;
 	/** Indicates that user input is required on the element before a form may be submitted. */
 	'aria-required'?: Booleanish | undefined | null;
 	/** Defines a human-readable, author-localized description for the role of an element. */
@@ -470,14 +483,23 @@ export type AriaRole =
 
 export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, DOMAttributes<T> {
 	// Standard HTML Attributes
-	accesskey?: string  | undefined | null;
+	accesskey?: string | undefined | null;
 	autofocus?: boolean | undefined | null;
 	class?: string | undefined | null;
 	contenteditable?: Booleanish | 'inherit' | undefined | null;
 	contextmenu?: string | undefined | null;
 	dir?: string | undefined | null;
 	draggable?: Booleanish | undefined | null;
-	enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined | null;
+	enterkeyhint?:
+		| 'enter'
+		| 'done'
+		| 'go'
+		| 'next'
+		| 'previous'
+		| 'search'
+		| 'send'
+		| undefined
+		| null;
 	hidden?: boolean | undefined | null;
 	id?: string | undefined | null;
 	lang?: string | undefined | null;
@@ -526,7 +548,17 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	 * Hints at the type of data that might be entered by the user while editing the element or its contents
 	 * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
 	 */
-	inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | undefined | null;
+	inputmode?:
+		| 'none'
+		| 'text'
+		| 'tel'
+		| 'url'
+		| 'email'
+		| 'numeric'
+		| 'decimal'
+		| 'search'
+		| undefined
+		| null;
 	/**
 	 * Specify that a standard HTML element should behave like a defined custom built-in element
 	 * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
@@ -554,7 +586,16 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	// SvelteKit
 	'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null;
 	'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;
-	'data-sveltekit-preload-code'?: true | '' | 'eager' | 'viewport' | 'hover' | 'tap' | 'off' | undefined | null;
+	'data-sveltekit-preload-code'?:
+		| true
+		| ''
+		| 'eager'
+		| 'viewport'
+		| 'hover'
+		| 'tap'
+		| 'off'
+		| undefined
+		| null;
 	'data-sveltekit-preload-data'?: true | '' | 'hover' | 'tap' | 'off' | undefined | null;
 	'data-sveltekit-reload'?: true | '' | 'off' | undefined | null;
 	'data-sveltekit-replacestate'?: true | '' | 'off' | undefined | null;
@@ -563,12 +604,7 @@ export interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, D
 	[key: `data-${string}`]: any;
 }
 
-export type HTMLAttributeAnchorTarget =
-	| '_self'
-	| '_blank'
-	| '_parent'
-	| '_top'
-	| (string & {});
+export type HTMLAttributeAnchorTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {});
 
 export interface HTMLAnchorAttributes extends HTMLAttributes<HTMLAnchorElement> {
 	download?: any;
@@ -844,7 +880,14 @@ export interface HTMLMenuAttributes extends HTMLAttributes<HTMLMenuElement> {
 export interface HTMLMediaAttributes<T extends HTMLMediaElement> extends HTMLAttributes<T> {
 	autoplay?: boolean | undefined | null;
 	controls?: boolean | undefined | null;
-	controlslist?: 'nodownload' | 'nofullscreen' | 'noplaybackrate' | 'noremoteplayback' | (string & {}) | undefined | null;
+	controlslist?:
+		| 'nodownload'
+		| 'nofullscreen'
+		| 'noplaybackrate'
+		| 'noremoteplayback'
+		| (string & {})
+		| undefined
+		| null;
 	crossorigin?: string | undefined | null;
 	currenttime?: number | undefined | null;
 	defaultmuted?: boolean | undefined | null;
@@ -1155,9 +1198,22 @@ export interface SVGAttributes<T extends EventTarget> extends AriaAttributes, DO
 	'accent-height'?: number | string | undefined | null;
 	accumulate?: 'none' | 'sum' | undefined | null;
 	additive?: 'replace' | 'sum' | undefined | null;
-	'alignment-baseline'?: 'auto' | 'baseline' | 'before-edge' | 'text-before-edge' | 'middle' |
-	  'central' | 'after-edge' | 'text-after-edge' | 'ideographic' | 'alphabetic' | 'hanging' |
-	  'mathematical' | 'inherit' | undefined | null;
+	'alignment-baseline'?:
+		| 'auto'
+		| 'baseline'
+		| 'before-edge'
+		| 'text-before-edge'
+		| 'middle'
+		| 'central'
+		| 'after-edge'
+		| 'text-after-edge'
+		| 'ideographic'
+		| 'alphabetic'
+		| 'hanging'
+		| 'mathematical'
+		| 'inherit'
+		| undefined
+		| null;
 	allowReorder?: 'no' | 'yes' | undefined | null;
 	alphabetic?: number | string | undefined | null;
 	amplitude?: number | string | undefined | null;
@@ -1604,15 +1660,27 @@ export interface SvelteHTMLElements {
 	'svelte:body': HTMLAttributes<HTMLElement>;
 	'svelte:fragment': { slot?: string };
 	'svelte:options': {
-		customElement?: string | undefined | {
-			tag: string;
-			shadow?: 'open' | 'none' | undefined;
-			props?: Record<string, { attribute?: string; reflect?: boolean; type?: 'String' | 'Boolean' | 'Number' | 'Array' | 'Object' }> | undefined;
-		};
+		customElement?:
+			| string
+			| undefined
+			| {
+					tag: string;
+					shadow?: 'open' | 'none' | undefined;
+					props?:
+						| Record<
+								string,
+								{
+									attribute?: string;
+									reflect?: boolean;
+									type?: 'String' | 'Boolean' | 'Number' | 'Array' | 'Object';
+								}
+						  >
+						| undefined;
+			  };
 		immutable?: boolean | undefined;
 		accessors?: boolean | undefined;
 		namespace?: string | undefined;
-		[name: string]: any
+		[name: string]: any;
 	};
 	'svelte:head': { [name: string]: any };
 

elements/package.json

@@ -1,3 +1,3 @@
 {
-  "types": "./index.d.ts"
+	"types": "./index.d.ts"
 }

package.json

@@ -81,6 +81,8 @@
   },
   "types": "types/runtime/index.d.ts",
   "scripts": {
+    "format:fix": "prettier . --cache --plugin-search-dir=. --write",
+    "format:check": "prettier . --cache --plugin-search-dir=. --check",
     "test": "npm run test:unit && npm run test:integration && echo \"manually check that there are no type errors in test/types by opening the files in there\"",
     "test:integration": "mocha --exit",
     "test:unit": "mocha --config .mocharc.unit.js --exit",
@@ -133,6 +135,7 @@
     "code-red": "^1.0.0",
     "css-tree": "^2.3.1",
     "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-svelte3": "^4.0.0",
     "estree-walker": "^3.0.3",
@@ -143,6 +146,8 @@
     "magic-string": "^0.30.0",
     "mocha": "^10.2.0",
     "periscopic": "^3.1.0",
+    "prettier": "^2.8.8",
+    "prettier-plugin-svelte": "^2.10.0",
     "puppeteer": "^19.8.5",
     "rollup": "^3.20.2",
     "source-map": "^0.7.4",