From c308e520e4c408c8f34736cb0201b87793b8b187 Mon Sep 17 00:00:00 2001 From: yosuke ota Date: Wed, 15 Jan 2025 16:06:51 +0900 Subject: [PATCH] chore: fix some broken examples on docs site --- docs-svelte-kit/package.json | 1 + docs-svelte-kit/src/site.css | 135 ++++++++++-------- .../tools/vite-plugin-svelte-md-option.mts | 42 +++++- ...port-load-in-svelte-module-in-kit-pages.md | 14 -- docs/rules/no-inner-declarations.md | 5 +- docs/rules/valid-prop-names-in-kit-pages.md | 11 -- 6 files changed, 115 insertions(+), 93 deletions(-) diff --git a/docs-svelte-kit/package.json b/docs-svelte-kit/package.json index 9d86cdbd6..5ef0b0d95 100644 --- a/docs-svelte-kit/package.json +++ b/docs-svelte-kit/package.json @@ -59,6 +59,7 @@ "svelte": "^5.2.10", "svelte-adapter-ghpages": "0.2.2", "twoslash-eslint": "^0.2.12", + "twoslash-protocol": "^0.2.12", "util": "^0.12.5", "vite": "^6.0.1", "vite-plugin-svelte-md": "^0.1.7" diff --git a/docs-svelte-kit/src/site.css b/docs-svelte-kit/src/site.css index 9f848c986..d92d25313 100644 --- a/docs-svelte-kit/src/site.css +++ b/docs-svelte-kit/src/site.css @@ -1,55 +1,66 @@ /* @import "prismjs/themes/prism"; */ -@import "prismjs/themes/prism-tomorrow"; -@import "@shikijs/twoslash/style-rich.css"; +@import 'prismjs/themes/prism-tomorrow'; +@import '@shikijs/twoslash/style-rich.css'; .twoslash .twoslash-popup-container { - transform: translateY(2em); - white-space: pre-wrap; + transform: translateY(2em); + white-space: pre-wrap; + margin-right: 32px; +} + +.twoslash .twoslash-error > span:not(.twoslash-popup-container):not(:has(*)) { + /* + Since elements with no content have a width of zero and no wavy line is displayed, + we specify a minimum width to display the wavy line. + e.g. https://sveltejs.github.io/eslint-plugin-svelte/rules/html-closing-bracket-new-line/ + */ + min-width: 6px; + display: inline-block; } /* theme */ :root { - --primary-color: #ffffff; - --secondary-color: #676778; - --tertiary-color: #edf0f8; - --background-without-opacity: rgba(255, 255, 255, 0.95); + --primary-color: #ffffff; + --secondary-color: #676778; + --tertiary-color: #edf0f8; + --background-without-opacity: rgba(255, 255, 255, 0.95); } /*** markdown ***/ :not(pre) > code { - padding: 0.1rem 0.4rem 0; - margin: 0 0.2rem; - background: #e5eef5; - position: relative; - border-radius: 0.3em; - white-space: nowrap; - color: #444; - -webkit-font-smoothing: initial; + padding: 0.1rem 0.4rem 0; + margin: 0 0.2rem; + background: #e5eef5; + position: relative; + border-radius: 0.3em; + white-space: nowrap; + color: #444; + -webkit-font-smoothing: initial; } blockquote { - padding: 1rem; - color: #09f; - border: 1px solid #40b3ff; - margin: 1.6rem 2.4rem 2.4rem; - padding: 0.5rem 2.4rem; - border-radius: 0.4rem; + padding: 1rem; + color: #09f; + border: 1px solid #40b3ff; + margin: 1.6rem 2.4rem 2.4rem; + padding: 0.5rem 2.4rem; + border-radius: 0.4rem; } blockquote p { - color: #09f; + color: #09f; } table { - margin: 0 0 2em; - width: 100%; - font-size: var(--h5); + margin: 0 0 2em; + width: 100%; + font-size: var(--h5); } td, th { - text-align: left; - border-bottom: 1px solid rgba(0 0 0 / 0.1); - padding: 0.4rem 0.8rem 0.4rem 0; + text-align: left; + border-bottom: 1px solid rgba(0 0 0 / 0.1); + padding: 0.4rem 0.8rem 0.4rem 0; } /* header */ @@ -58,89 +69,89 @@ h3, h4, h5, h6 { - font-weight: 400; - color: var(--heading-color); + font-weight: 400; + color: var(--heading-color); } h2 { - font-size: 1.2rem; + font-size: 1.2rem; } h3, h4, h5, h6 { - font-size: 1rem; + font-size: 1rem; } /*** custom container ***/ .custom-block .custom-block-title { - font-weight: 600; - margin-bottom: -0.4rem; + font-weight: 600; + margin-bottom: -0.4rem; } .custom-block.danger, .custom-block.tip, .custom-block.warning { - padding: 0.1rem 1.5rem; - border-left-width: 4px; - border-left-style: solid; - margin: 1rem 0; + padding: 0.1rem 1.5rem; + border-left-width: 4px; + border-left-style: solid; + margin: 1rem 0; } .custom-block.tip { - background-color: #f3f5f7; - border-color: #42b983; + background-color: #f3f5f7; + border-color: #42b983; } .custom-block.warning { - background-color: rgba(255, 229, 100, 0.3); - border-color: #e7c000; - color: #6b5900; + background-color: rgba(255, 229, 100, 0.3); + border-color: #e7c000; + color: #6b5900; } .custom-block.warning .custom-block-title { - color: #b29400; + color: #b29400; } .custom-block.warning a { - color: #2c3e50; + color: #2c3e50; } .custom-block.danger { - background-color: #ffe6e6; - border-color: #c00; - color: #4d0000; + background-color: #ffe6e6; + border-color: #c00; + color: #4d0000; } .custom-block.danger .custom-block-title { - color: #900; + color: #900; } .custom-block.danger a { - color: #2c3e50; + color: #2c3e50; } .custom-block.details { - display: block; - position: relative; - border-radius: 2px; - margin: 1.6em 0; - padding: 1.6em; - background-color: #eee; + display: block; + position: relative; + border-radius: 2px; + margin: 1.6em 0; + padding: 1.6em; + background-color: #eee; } .custom-block.details h4 { - margin-top: 0; + margin-top: 0; } .custom-block.details figure:last-child, .custom-block.details p:last-child { - margin-bottom: 0; - padding-bottom: 0; + margin-bottom: 0; + padding-bottom: 0; } .custom-block.details summary { - outline: none; - cursor: pointer; + outline: none; + cursor: pointer; } diff --git a/docs-svelte-kit/tools/vite-plugin-svelte-md-option.mts b/docs-svelte-kit/tools/vite-plugin-svelte-md-option.mts index 7bb2b61b5..c2e27935b 100644 --- a/docs-svelte-kit/tools/vite-plugin-svelte-md-option.mts +++ b/docs-svelte-kit/tools/vite-plugin-svelte-md-option.mts @@ -9,9 +9,12 @@ import containerPluginOption from './markdown-it-container-option.mjs'; import slugify from '@sindresorhus/slugify'; import type { Options } from 'vite-plugin-svelte-md'; import { createTwoslasher as createTwoslasherESLint } from 'twoslash-eslint'; +import { type TwoslashGenericFunction } from 'twoslash-protocol'; import Shiki from '@shikijs/markdown-it'; import plugin from 'eslint-plugin-svelte'; import { transformerTwoslash } from '@shikijs/twoslash'; +import tsParser from '@typescript-eslint/parser'; +import path from 'path'; const shikiPlugin = await Shiki({ theme: 'dark-plus', @@ -27,10 +30,33 @@ const shikiPlugin = await Shiki({ }, explicitTrigger: false, // Pass the custom twoslasher - twoslasher: createTwoslasherESLint({ - eslintConfig: [...plugin.configs['flat/base']], - includeDocs: false - }), + twoslasher: adjustTwoslasherESLint( + createTwoslasherESLint({ + eslintConfig: [ + ...plugin.configs['flat/base'], + { + files: ['**/*.svelte'], + languageOptions: { + parserOptions: { + parser: { + ts: tsParser + } + } + }, + settings: { + svelte: { + kit: { + files: { + routes: '' + } + } + } + } + } + ], + includeDocs: false + }) + ), rendererRich: { errorRendering: 'hover' } @@ -38,6 +64,14 @@ const shikiPlugin = await Shiki({ ] }); +function adjustTwoslasherESLint(base: TwoslashGenericFunction): TwoslashGenericFunction { + // Change the file name to `+page` to make the rules for Svelte Kit work. + return (code, file, options) => { + const filename = file?.includes('.') ? file : `+page.${file ?? 'ts'}`; + return base(code, path.join(process.cwd(), filename), options); + }; +} + export default (options: { baseUrl: string; root: string }): Options => ({ wrapperClasses: [], markdownItOptions: { diff --git a/docs/rules/no-export-load-in-svelte-module-in-kit-pages.md b/docs/rules/no-export-load-in-svelte-module-in-kit-pages.md index 654bde491..45bf70214 100644 --- a/docs/rules/no-export-load-in-svelte-module-in-kit-pages.md +++ b/docs/rules/no-export-load-in-svelte-module-in-kit-pages.md @@ -16,20 +16,6 @@ This rule reports unexpected exported `load` function at ` - ```svelte