mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-09-14 21:46:35 +00:00
chore: add prettier, eslint, fix some components
This commit is contained in:
@@ -0,0 +1,8 @@
|
||||
node_modules
|
||||
build
|
||||
.svelte-kit
|
||||
dist
|
||||
pnpm-lock.yaml
|
||||
static
|
||||
*.log
|
||||
.DS_Store
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"useTabs": true,
|
||||
"singleQuote": false,
|
||||
"trailingComma": "all",
|
||||
"printWidth": 80,
|
||||
"proseWrap": "always",
|
||||
"endOfLine": "lf",
|
||||
"plugins": ["prettier-plugin-svelte"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": "*.md",
|
||||
"options": {
|
||||
"useTabs": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": "*.svelte",
|
||||
"options": {
|
||||
"parser": "svelte"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import js from "@eslint/js";
|
||||
import prettier from "eslint-config-prettier";
|
||||
import svelte from "eslint-plugin-svelte";
|
||||
import globals from "globals";
|
||||
import svelteParser from "svelte-eslint-parser";
|
||||
import tseslint from "typescript-eslint";
|
||||
|
||||
// Новый код редизайна: к нему применяем полные recommended-наборы уже сейчас.
|
||||
// Когда старый дизайн удалим (C19), этот scoped-блок убирается и recommended
|
||||
// включается на весь код (см. план-redesign §10, шаг 6).
|
||||
const newCode = ["**/src/lib/components/kit/**", "**/src/routes/preview/**"];
|
||||
|
||||
export default tseslint.config(
|
||||
{
|
||||
ignores: [
|
||||
"**/node_modules/**",
|
||||
"**/build/**",
|
||||
"**/.svelte-kit/**",
|
||||
"**/dist/**",
|
||||
"**/static/**",
|
||||
],
|
||||
},
|
||||
// Минимально на весь код: парсинг TS/Svelte + запрет инлайн-тип-импортов.
|
||||
{
|
||||
files: ["**/*.ts", "**/*.svelte.ts", "**/*.svelte.js", "**/*.svelte"],
|
||||
languageOptions: {
|
||||
globals: {
|
||||
...globals.browser,
|
||||
...globals.node,
|
||||
},
|
||||
parserOptions: {
|
||||
projectService: {
|
||||
allowDefaultProject: [
|
||||
"vitest.config.ts",
|
||||
"eslint.config.js",
|
||||
"svelte.config.js",
|
||||
],
|
||||
},
|
||||
extraFileExtensions: [".svelte"],
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
"@typescript-eslint": tseslint.plugin,
|
||||
},
|
||||
rules: {
|
||||
// Инлайн-тип-импорты (import('x').Y) запрещены — только
|
||||
// `import type { Y } from 'x'` наверху файла.
|
||||
"@typescript-eslint/consistent-type-imports": [
|
||||
"error",
|
||||
{ prefer: "type-imports", fixStyle: "separate-type-imports" },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ["**/*.ts", "**/*.svelte.ts", "**/*.svelte.js"],
|
||||
languageOptions: {
|
||||
parser: tseslint.parser,
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ["**/*.svelte"],
|
||||
languageOptions: {
|
||||
parser: svelteParser,
|
||||
parserOptions: {
|
||||
parser: tseslint.parser,
|
||||
},
|
||||
},
|
||||
},
|
||||
// Полные recommended-наборы — только на новый код.
|
||||
...[
|
||||
...(Array.isArray(js.configs.recommended)
|
||||
? js.configs.recommended
|
||||
: [js.configs.recommended]),
|
||||
...tseslint.configs.recommended,
|
||||
...svelte.configs["flat/recommended"],
|
||||
].map((cfg) => ({
|
||||
...cfg,
|
||||
files: newCode,
|
||||
})),
|
||||
|
||||
// В Svelte 5 пропсы деструктурируются через `let` (конвенция документации и
|
||||
// наш AGENTS.md), поэтому prefer-const на них — ложноположительный.
|
||||
{
|
||||
files: ["**/*.svelte"],
|
||||
rules: {
|
||||
"prefer-const": "off",
|
||||
},
|
||||
},
|
||||
// prettier — последним, чтобы гасить форматирующие правила из recommended.
|
||||
prettier,
|
||||
);
|
||||
+12
-1
@@ -10,15 +10,26 @@
|
||||
"prepare": "svelte-kit sync || echo ''",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"test": "vitest run"
|
||||
"test": "vitest run",
|
||||
"format": "prettier --write .",
|
||||
"lint": "eslint ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@sveltejs/adapter-static": "^3.0.10",
|
||||
"@sveltejs/kit": "^2.63.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^7.1.2",
|
||||
"eslint": "^10.9.0",
|
||||
"eslint-config-prettier": "^10.1.8",
|
||||
"eslint-plugin-svelte": "^3.23.0",
|
||||
"globals": "^17.11.0",
|
||||
"prettier": "^3.9.6",
|
||||
"prettier-plugin-svelte": "^4.1.1",
|
||||
"svelte": "^5.56.1",
|
||||
"svelte-check": "^4.6.0",
|
||||
"svelte-eslint-parser": "^1.8.1",
|
||||
"typescript": "^6.0.3",
|
||||
"typescript-eslint": "^8.67.0",
|
||||
"vite": "^8.0.16",
|
||||
"vitest": "^4.1.11"
|
||||
},
|
||||
|
||||
Generated
+969
-20
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import BlueprintGrid from './BlueprintGrid.svelte';
|
||||
import BlueprintGrid from "./BlueprintGrid.svelte";
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
@@ -6,8 +6,16 @@
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(to right, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px);
|
||||
linear-gradient(
|
||||
to right,
|
||||
color-mix(in srgb, var(--line) 45%, transparent) 1px,
|
||||
transparent 1px
|
||||
),
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
color-mix(in srgb, var(--line) 45%, transparent) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-size: 32px 32px;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
@@ -1,40 +1,44 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
interface Props {
|
||||
children?: import('svelte').Snippet;
|
||||
size?: 'sm' | 'large';
|
||||
children?: Snippet;
|
||||
size?: "sm" | "large";
|
||||
}
|
||||
let { children, size = 'large' }: Props = $props();
|
||||
let { children, size = "large" }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="checker-canvas checker-canvas--{size}">
|
||||
{#if children}
|
||||
{@render children()}
|
||||
{/if}
|
||||
{#if children}
|
||||
{@render children()}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.checker-canvas {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
background-color: #0b0f14;
|
||||
background-image: linear-gradient(45deg, #1a2129 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #1a2129 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1a2129 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #1a2129 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position:
|
||||
0 0,
|
||||
0 10px,
|
||||
10px -10px,
|
||||
-10px 0;
|
||||
}
|
||||
.checker-canvas {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
background-color: #0b0f14;
|
||||
background-image:
|
||||
linear-gradient(45deg, #1a2129 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #1a2129 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #1a2129 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #1a2129 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position:
|
||||
0 0,
|
||||
0 10px,
|
||||
10px -10px,
|
||||
-10px 0;
|
||||
}
|
||||
|
||||
.checker-canvas--sm {
|
||||
min-height: 180px;
|
||||
}
|
||||
.checker-canvas--sm {
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.checker-canvas--large {
|
||||
min-height: 360px;
|
||||
}
|
||||
.checker-canvas--large {
|
||||
min-height: 360px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
interface Props {
|
||||
accent?: boolean;
|
||||
children?: import('svelte').Snippet;
|
||||
children?: Snippet;
|
||||
}
|
||||
|
||||
let { accent = false, children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<span class="mono-label" class:accent={accent}>
|
||||
<span class="mono-label" class:accent>
|
||||
{#if children}
|
||||
{@render children()}
|
||||
{/if}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import StatusDot from './StatusDot.svelte';
|
||||
import MonoLabel from './MonoLabel.svelte';
|
||||
import StatusDot from "./StatusDot.svelte";
|
||||
import MonoLabel from "./MonoLabel.svelte";
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
@import '@fontsource/ibm-plex-sans/400.css';
|
||||
@import '@fontsource/ibm-plex-sans/500.css';
|
||||
@import '@fontsource/ibm-plex-sans/600.css';
|
||||
@import '@fontsource/ibm-plex-sans/700.css';
|
||||
@import '@fontsource/ibm-plex-mono/400.css';
|
||||
@import '@fontsource/ibm-plex-mono/500.css';
|
||||
@import "@fontsource/ibm-plex-sans/400.css";
|
||||
@import "@fontsource/ibm-plex-sans/500.css";
|
||||
@import "@fontsource/ibm-plex-sans/600.css";
|
||||
@import "@fontsource/ibm-plex-sans/700.css";
|
||||
@import "@fontsource/ibm-plex-mono/400.css";
|
||||
@import "@fontsource/ibm-plex-mono/500.css";
|
||||
|
||||
/* Новый дизайн: токены (§2 плана redesign).
|
||||
Файл грузится только layout'ом новой ветки (preview/+layout), поэтому
|
||||
глобально не конфликтует со старым app.css. */
|
||||
|
||||
:root {
|
||||
--font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
|
||||
--font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
|
||||
--font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
|
||||
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
|
||||
|
||||
--background: #eef1f4;
|
||||
--panel: #f8fafb;
|
||||
@@ -28,7 +28,7 @@
|
||||
--radius: 4px;
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
[data-theme="dark"] {
|
||||
--background: #11171d;
|
||||
--panel: #182129;
|
||||
--foreground: #e8eef2;
|
||||
|
||||
Reference in New Issue
Block a user