diff --git a/.eslintrc.cjs b/.eslintrc.cjs index ed06925b2..bc6f10b96 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -86,6 +86,7 @@ module.exports = { j: true, k: true, param: true, + Props: true, req: true, res: true, str: true, diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index c35dff124..1c1c223ed 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -17,9 +17,9 @@ jobs: steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - - uses: actions/cache@v3 + - uses: actions/cache@v4 id: yarn-and-build-cache with: path: | @@ -30,21 +30,20 @@ jobs: restore-keys: | ${{ runner.os }}-node_modules-build- - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: - node-version: 18 + node-version-file: '.node-version' cache: 'yarn' # Install NPM dependencies, cache them correctly # and run all Cypress tests - name: Cypress run - uses: cypress-io/github-action@v3 + uses: cypress-io/github-action@v6 with: build: yarn build start: yarn preview wait-on: 'http://localhost:3000' record: true - headless: true parallel: true env: CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} diff --git a/.node-version b/.node-version index 3516580bb..2a393af59 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -20.17.0 +20.18.0 diff --git a/package.json b/package.json index 4d7c3fa21..fbb00d8a8 100644 --- a/package.json +++ b/package.json @@ -24,50 +24,51 @@ "devDependencies": { "@cypress/snapshot": "2.1.7", "@fortawesome/fontawesome-free": "^6.5.1", - "@sveltejs/adapter-static": "3.0.4", - "@sveltejs/kit": "2.5.26", - "@sveltejs/vite-plugin-svelte": "^3.0.1", - "@testing-library/svelte": "4.2.3", + "@sveltejs/adapter-static": "3.0.6", + "@sveltejs/kit": "2.8.0", + "@sveltejs/vite-plugin-svelte": "^4.0.0", + "@testing-library/jest-dom": "^6.6.3", + "@testing-library/svelte": "^5.2.4", "@types/dompurify": "^3.0.5", "@types/lodash-es": "^4.17.12", "@types/pako": "2.0.3", "@types/uuid": "9.0.8", "@typescript-eslint/eslint-plugin": "6.21.0", "@typescript-eslint/parser": "6.21.0", - "@vitest/ui": "^1.1.3", + "@vitest/ui": "^2.1.4", "autoprefixer": "^10.4.14", "c8": "7.14.0", "chai": "^4.3.7", "cssnano": "^6.0.0", "cypress": "12.17.4", "cypress-localstorage-commands": "2.2.6", - "eslint": "8.57.0", + "eslint": "8.57.1", "eslint-config-prettier": "9.1.0", "eslint-plugin-cypress": "2.15.2", "eslint-plugin-es": "^4.1.0", "eslint-plugin-no-only-tests": "^3.1.0", "eslint-plugin-postcss-modules": "^2.0.0", - "eslint-plugin-svelte": "^2.35.1", + "eslint-plugin-svelte": "^2.45.1", "eslint-plugin-tailwindcss": "^3.13.1", "eslint-plugin-unicorn": "^50.0.1", "eslint-plugin-vitest": "^0.5.0", "esserializer": "^1.3.11", "husky": "^8.0.3", - "jsdom": "^21.1.2", + "jsdom": "^25.0.1", "lint-staged": "^15.2.0", "node-html-parser": "^6.1.5", "postcss": "^8.4.33", "postcss-load-config": "5.1.0", "prettier": "^3.1.0", - "prettier-plugin-svelte": "^3.1.2", + "prettier-plugin-svelte": "^3.2.6", "prettier-plugin-tailwindcss": "^0.6.0", - "svelte": "^4.2.8", - "svelte-preprocess": "^5.1.3", + "svelte": "^5.0.0", + "svelte-preprocess": "^6.0.0", "tailwindcss": "^3.4.1", "tslib": "^2.6.2", - "typescript": "^5.3.3", - "vite": "^5.0.11", - "vitest": "^1.1.3", + "typescript": "^5.5.0", + "vite": "^5.4.4", + "vitest": "^2.1.4", "vitest-dom": "^0.1.1" }, "dependencies": { @@ -79,11 +80,11 @@ "js-base64": "3.7.7", "lodash-es": "^4.17.21", "mermaid": "^11.3.0", - "monaco-editor": "0.51.0", + "monaco-editor": "0.52.0", "pako": "2.1.0", "plausible-tracker": "^0.3.8", "random-word-slugs": "0.1.7", - "svg-pan-zoom": "3.6.1", + "svg-pan-zoom": "3.6.2", "svg2roughjs": "^3.2.0", "uuid": "9.0.1" }, diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte index a222e57af..8e7034121 100644 --- a/src/lib/components/Actions.svelte +++ b/src/lib/components/Actions.svelte @@ -6,9 +6,9 @@ import { pakoSerde } from '$lib/util/serde'; import { stateStore } from '$lib/util/state'; import { logEvent } from '$lib/util/stats'; + import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json'; import dayjs from 'dayjs'; import { toBase64 } from 'js-base64'; - import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json'; const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}/css/all.min.css`; @@ -149,7 +149,7 @@ ${svgString}`); logEvent('copyMarkdown'); }; - let gistURL = ''; + let gistURL = $state(''); stateStore.subscribe(({ loader }) => { if (loader?.type === 'gist') { // @ts-expect-error Gist will have url @@ -165,14 +165,14 @@ ${svgString}`); logEvent('loadGist'); }; - let iUrl: string; - let svgUrl: string; - let krokiUrl: string; - let mdCode: string; - let imagemodeselected = 'auto'; - let userimagesize = 1080; + let iUrl: string | undefined = $state(); + let svgUrl: string | undefined = $state(); + let krokiUrl: string | undefined = $state(); + let mdCode: string | undefined = $state(); + let imagemodeselected = $state('auto'); + let userimagesize = $state(1080); - let isNetlify = false; + let isNetlify = $state(false); if (browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path))) { isNetlify = true; } @@ -187,32 +187,32 @@ ${svgString}`);
{#if isClipboardAvailable()} - {/if} - - {#if rendererUrl} {/if} {#if krokiRendererUrl} {/if} @@ -244,9 +244,9 @@ ${svgString}`); {#if rendererUrl}
- + @@ -261,7 +261,7 @@ ${svgString}`); bind:value={gistURL} placeholder="Enter Gist URL" />
{#if isNetlify} diff --git a/src/lib/components/Card/Card.svelte b/src/lib/components/Card/Card.svelte index 3e1074876..dbc92dc72 100644 --- a/src/lib/components/Card/Card.svelte +++ b/src/lib/components/Card/Card.svelte @@ -1,14 +1,38 @@
@@ -16,18 +40,18 @@ role="toolbar" tabindex="0" class="bg-primary p-2 {isTabsShown ? 'pb-0' : ''} flex-none cursor-pointer" - on:click={() => (isOpen = !isOpen)} - on:keypress={() => (isOpen = !isOpen)}> + onclick={toggleCardOpen} + onkeypress={toggleCardOpen}>
- +
- + {@render actions?.()}
{#if isOpen}
- + {@render children?.()}
{/if}
diff --git a/src/lib/components/Card/Tabs.svelte b/src/lib/components/Card/Tabs.svelte index 17fa57b3c..6796ed8a4 100644 --- a/src/lib/components/Card/Tabs.svelte +++ b/src/lib/components/Card/Tabs.svelte @@ -1,34 +1,43 @@
- (isOpen = !isOpen)} - on:keypress|stopPropagation={() => (isOpen = !isOpen)}> - {#if isCloseable} - + + {#if isClosable} + {/if} - {title} + {title} + {#if isOpen && tabs}
    {#each tabs as tab} @@ -36,9 +45,9 @@ role="tab" tabindex="0" class="tab tab-lifted {activeTabID === tab.id ? 'tab-active' : 'text-primary-content'}" - on:click|stopPropagation={() => toggleTabs(tab)} - on:keypress|stopPropagation={() => toggleTabs(tab)}> - + onclick={toggleTabs(tab)} + onkeypress={toggleTabs(tab)}> + {tab.title}
{/each} diff --git a/src/lib/components/Card/card.test.ts b/src/lib/components/Card/card.test.ts index 8fd16961f..8c79fc413 100644 --- a/src/lib/components/Card/card.test.ts +++ b/src/lib/components/Card/card.test.ts @@ -1,5 +1,5 @@ import { cleanup, render } from '@testing-library/svelte'; -import { describe, expect, it, afterEach } from 'vitest'; +import { afterEach, describe, expect, it } from 'vitest'; import Card from './Card.svelte'; describe('card.svelte', () => { diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte index eef1d1eff..7cb1e22f4 100644 --- a/src/lib/components/Editor.svelte +++ b/src/lib/components/Editor.svelte @@ -1,4 +1,4 @@ -
-
+
{#if $stateStore.error instanceof Error}
-