Skip to content

fix deprecated note styles #937

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions apps/svelte.dev/content/docs/svelte/98-reference/20-svelte.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ for more info.

## SvelteComponentTyped

<blockquote class="tag deprecated">
<blockquote class="tag deprecated note">

Use `Component` instead. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.

Expand All @@ -172,7 +172,7 @@ class SvelteComponentTyped<

## afterUpdate

<blockquote class="tag deprecated">
<blockquote class="tag deprecated note">

Use `$effect` instead — see https://svelte.dev/docs/svelte/$effect

Expand All @@ -196,7 +196,7 @@ function afterUpdate(fn: () => void): void;

## beforeUpdate

<blockquote class="tag deprecated">
<blockquote class="tag deprecated note">

Use `$effect.pre` instead — see https://svelte.dev/docs/svelte/$effect#$effect.pre

Expand All @@ -220,7 +220,7 @@ function beforeUpdate(fn: () => void): void;

## createEventDispatcher

<blockquote class="tag deprecated">
<blockquote class="tag deprecated note">

Use callback props and/or the `$host()` rune instead — see https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events

Expand Down Expand Up @@ -593,7 +593,7 @@ The custom element version of the component. Only present if compiled with the `

## ComponentConstructorOptions

<blockquote class="tag deprecated">
<blockquote class="tag deprecated note">

In Svelte 4, components are classes. In Svelte 5, they are functions.
Use `mount` instead to instantiate components.
Expand Down Expand Up @@ -693,7 +693,7 @@ $$inline?: boolean;

## ComponentEvents

<blockquote class="tag deprecated">
<blockquote class="tag deprecated note">

The new `Component` type does not have a dedicated Events type. Use `ComponentProps` instead.

Expand Down Expand Up @@ -770,7 +770,7 @@ type ComponentProps<

## ComponentType

<blockquote class="tag deprecated">
<blockquote class="tag deprecated note">

This type is obsolete when working with the new `Component` type.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ function preprocess(

## walk

<blockquote class="tag deprecated">
<blockquote class="tag deprecated note">

Replace this with `import { walk } from 'estree-walker'`

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {

## asClassComponent

<blockquote class="tag deprecated">
<blockquote class="tag deprecated note">

Use this only as a temporary solution to migrate your imperative component code to Svelte 5.

Expand Down Expand Up @@ -58,7 +58,7 @@ function asClassComponent<

## createBubbler

<blockquote class="tag deprecated">
<blockquote class="tag deprecated note">

Use this only as a temporary solution to migrate your automatically delegated events in Svelte 5.

Expand All @@ -80,7 +80,7 @@ function createBubbler(): (

## createClassComponent

<blockquote class="tag deprecated">
<blockquote class="tag deprecated note">

Use this only as a temporary solution to migrate your imperative component code to Svelte 5.

Expand Down Expand Up @@ -199,7 +199,7 @@ function preventDefault(

## run

<blockquote class="tag deprecated">
<blockquote class="tag deprecated note">

Use this only as a temporary solution to migrate your component code to Svelte 5.

Expand Down
6 changes: 6 additions & 0 deletions apps/svelte.dev/scripts/sync-docs/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export async function get_types(code: string, statements: ts.NodeArray<ts.Statem
let start = statement.pos;
let comment = '';
let deprecated_notice: string | null = null;
let since_notice: string | null = null;

// @ts-ignore i think typescript is bad at typescript
if (statement.jsDoc) {
Expand All @@ -97,6 +98,10 @@ export async function get_types(code: string, statements: ts.NodeArray<ts.Statem
deprecated_notice = tag.comment;
}

if (tag.tagName.escapedText === 'since') {
since_notice = tag.comment;
}

if (tag.tagName.escapedText === 'example') {
comment += `\n\n${tag.comment}`;
}
Expand Down Expand Up @@ -174,6 +179,7 @@ export async function get_types(code: string, statements: ts.NodeArray<ts.Statem
name,
comment: cleanup_comment(comment),
deprecated: deprecated_notice,
since: since_notice,
overloads: []
};

Expand Down
11 changes: 9 additions & 2 deletions packages/site-kit/src/lib/components/Text.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -439,8 +439,9 @@
&.deprecated {
p:first-child::before {
content: 'Deprecated ';
display: block;
font-style: normal;
font: var(--sk-font-ui-medium);
text-transform: uppercase;
color: var(--sk-fg-4);
}
}

Expand All @@ -462,6 +463,12 @@
}
}

.since p {
font: var(--sk-font-ui-medium);
text-transform: uppercase;
color: var(--sk-fg-4);
}

details {
position: relative;

Expand Down
1 change: 1 addition & 0 deletions packages/site-kit/src/lib/markdown/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface Declaration {
name: string;
comment: string;
deprecated?: string | null;
since?: string | null;
overloads: Array<{
snippet: string;
children: TypeElement[];
Expand Down
6 changes: 5 additions & 1 deletion packages/site-kit/src/lib/markdown/preprocess.ts
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,11 @@ function render_declaration(declaration: Declaration, full: boolean) {
let content = '';

if (declaration.deprecated) {
content += `<blockquote class="tag deprecated">\n\n${declaration.deprecated}\n\n</blockquote>\n\n`;
content += `<blockquote class="tag deprecated note">\n\n${declaration.deprecated}\n\n</blockquote>\n\n`;
}

if (declaration.since) {
content += `<blockquote class="since note">\n\nAvailable since ${declaration.since}\n\n</blockquote>\n\n`;
}

if (declaration.comment) {
Expand Down
Loading