[CW-94] Feature 49 notion image style props 추가 (#44)

* migration to SvelteKit 2

* bugfix type error with suffix props type

* image upgraed~

packages/svelte-notion-page/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cozy-blog/svelte-notion-page",
-	"version": "0.0.20",
+	"version": "0.0.23",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "svelte-kit sync && svelte-package",
@@ -24,9 +24,10 @@
 		"@storybook/svelte": "^7.0.0-beta.31",
 		"@storybook/sveltekit": "^7.0.0-beta.31",
 		"@storybook/testing-library": "^0.0.13",
-		"@sveltejs/adapter-auto": "^1.0.0",
-		"@sveltejs/kit": "^1.0.0",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/package": "^1.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/he": "^1.2.0",
 		"@types/katex": "^0.16.0",
 		"@types/prismjs": "^1.26.0",
@@ -40,17 +41,17 @@
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.20",
 		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.8.1",
+		"prettier-plugin-svelte": "^2.10.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"storybook": "^7.0.0-beta.31",
-		"svelte": "^3.54.0",
-		"svelte-check": "^2.9.2",
+		"svelte": "^4.0.0",
+		"svelte-check": "^3.4.3",
 		"tailwindcss": "^3.2.4",
 		"ts-dedent": "^2.2.0",
 		"tslib": "^2.4.1",
-		"typescript": "^4.9.3",
-		"vite": "^4.0.0"
+		"typescript": "^5.0.0",
+		"vite": "^5.0.0"
 	},
 	"type": "module",
 	"dependencies": {
@@ -64,4 +65,4 @@
 		"svelte-legos": "^0.2.1",
 		"svelte-youtube-embed": "^0.1.8"
 	}
-}
+}

packages/svelte-notion-page/src/lib/default-notion-components/Audio.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { AudioProps } from '$lib/types';
+	import type { AudioArgs } from '$lib/types';
 	import RichText from './base/richtext/RichText.svelte';
 
-	export let props: AudioProps;
+	export let props: AudioArgs;
 	const {
 		audio: { type, file, external, caption }
 	} = props;

packages/svelte-notion-page/src/lib/default-notion-components/Bookmark.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { BookmarkProps } from '$lib/types';
+	import type { BookmarkArgs } from '$lib/types';
 	import RichText from './base/richtext/RichText.svelte';
-	export let props: BookmarkProps;
+	export let props: BookmarkArgs;
 	const {
 		bookmark: { url, caption }
 	} = props;

packages/svelte-notion-page/src/lib/default-notion-components/BulletedListItem.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { BulletedListItemProps } from '$lib/types';
+	import type { BulletedListItemArgs } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import { bulletedListItemMarker } from '$lib/utils/listItemMarker';
 	import RichText from './base/richtext/RichText.svelte';
 
-	export let props: BulletedListItemProps;
+	export let props: BulletedListItemArgs;
 
 	const {
 		bulleted_list_item: { color, rich_text: texts }

packages/svelte-notion-page/src/lib/default-notion-components/Callout.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { CalloutProps } from '$lib/types';
+	import type { CalloutArgs } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import RichText from './base/richtext/RichText.svelte';
-	export let props: CalloutProps;
+	export let props: CalloutArgs;
 	const {
 		callout: { color, rich_text: texts, icon }
 	} = props;

packages/svelte-notion-page/src/lib/default-notion-components/Code/Code.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { CodeProps } from '$lib/types';
+	import type { CodeArgs } from '$lib/types';
 	import copyToClipboard from 'clipboard-copy';
 	import RichText from '../base/richtext/RichText.svelte';
 	import { fade, fly } from 'svelte/transition';
@@ -15,7 +15,7 @@
 	import loadSql from './support-language/sql';
 	import loadTypescript from './support-language/typescript';
 
-	export let props: CodeProps;
+	export let props: CodeArgs;
 
 	/*
 	prismjs가 기본적으로 지원하는 언어: 
@@ -92,7 +92,7 @@
 	{/if}
 
 	{#if copied}
-		<div in:fly={{ y: 40 }} out:fade class="notion-code-copy-tooltip">
+		<div in:fly|global={{ y: 40 }} out:fade|global class="notion-code-copy-tooltip">
 			<div>{'Copied'}</div>
 		</div>
 	{/if}

packages/svelte-notion-page/src/lib/default-notion-components/ColumnList.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type {  ColumnListProps } from '$lib/types';
-	export let props: ColumnListProps;
+	import type { ColumnListArgs } from '$lib/types';
+	export let props: ColumnListArgs;
 	const columnCount = props.blocks?.length || 0;
 </script>
 

packages/svelte-notion-page/src/lib/default-notion-components/Equation.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { EquationProps } from '$lib/types';
+	import type { EquationArgs } from '$lib/types';
 	import renderEquation from '$lib/utils/renderEquation';
 
-	export let props: EquationProps;
+	export let props: EquationArgs;
 	const {
 		equation: { expression }
 	} = props;

packages/svelte-notion-page/src/lib/default-notion-components/Heading1.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { Heading_1_Props } from '$lib/types';
+	import type { Heading_1_Args } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import RichText from './base/richtext/RichText.svelte';
-	export let props: Heading_1_Props;
+	export let props: Heading_1_Args;
 	const {
 		heading_1: { color, rich_text: texts, is_toggleable }
 	} = props;

packages/svelte-notion-page/src/lib/default-notion-components/Heading2.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { Heading_2_Props } from '$lib/types';
+	import type { Heading_2_Args } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import RichText from './base/richtext/RichText.svelte';
-	export let props: Heading_2_Props;
+	export let props: Heading_2_Args;
 	const {
 		heading_2: { color, rich_text: texts, is_toggleable }
 	} = props;

packages/svelte-notion-page/src/lib/default-notion-components/Heading3.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-	import type { Heading_3_Props } from '$lib/types';
+	import type { Heading_3_Args } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import RichText from './base/richtext/RichText.svelte';
-	export let props: Heading_3_Props;
+	export let props: Heading_3_Args;
 	const {
 		heading_3: { color, rich_text: texts, is_toggleable }
 	} = props;
-	let open = false
+	let open = false;
 
 	// Give id to make it convenient to write TableOfContents
-	export let id = texts.map(({plain_text}) => plain_text).join('')
+	export let id = texts.map(({ plain_text }) => plain_text).join('');
 </script>
 
 <div
-	id={id}
+	{id}
 	class:notion-toggle-open={open}
 	class={`${getColorCss(color)} notion-block notion-h3 notion-toggle`}
 >

packages/svelte-notion-page/src/lib/default-notion-components/Image/Image.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import type { ImageProps, ContextedBlock } from '$lib/types';
+	import type { ImageArgs, ContextedBlock } from '$lib/types';
 	import RichText from '../base/richtext/RichText.svelte';
 	import ImageViewer from './ImageViewer.svelte';
 
-	export let props: ImageProps;
+	export let style = ''
+	export let props: ImageArgs;
 	const { image } = props;
 	const { type, caption } = image;
 	export let convertUrl: (url: string) => string = (url) => url;
@@ -53,7 +54,7 @@
 	}
 </script>
 
-<div class="notion-block notion-image">
+<div style={style} class="notion-block notion-image">
 	<div class="notion-image-content">
 		{#if url}
 			<ImageViewer bind:opened {initialIndex} {urls} />
@@ -81,10 +82,4 @@
 		display: flex;
 		flex-direction: column;
 	}
-
-	.notion-image-content img {
-		width: 100%;
-		margin: 0 auto;
-		object-fit: contain;
-	}
 </style>

packages/svelte-notion-page/src/lib/default-notion-components/Image/ImageViewer.svelte

@@ -184,7 +184,7 @@
 		tabindex="0"
 		on:mousemove={handleHideCursorOnMouseStop}
 		use:focusAction={opened}
-		transition:fade={{ duration: 200 }}
+		transition:fade|global={{ duration: 200 }}
 		class:hide-cursor={!cursorVisible}
 		class="notion-viewer-container"
 	>

packages/svelte-notion-page/src/lib/default-notion-components/NumberedListItem.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { NumberedListItemProps } from '$lib/types';
+	import type { NumberedListItemArgs } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import { numberedListItemMarker } from '$lib/utils/listItemMarker';
 	import RichText from './base/richtext/RichText.svelte';
 
-	export let props: NumberedListItemProps;
+	export let props: NumberedListItemArgs;
 	const {
 		numbered_list_item: { rich_text: texts, color }
 	} = props;

packages/svelte-notion-page/src/lib/default-notion-components/Paragraph.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { ParagraphProps } from '$lib/types';
+	import type { ParagraphArgs } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import RichText from './base/richtext/RichText.svelte';
-	export let props: ParagraphProps;
+	export let props: ParagraphArgs;
 	const {
 		paragraph: { color, rich_text: texts }
 	} = props;
@@ -26,5 +26,4 @@
 	.notion-paragraph-content {
 		padding: 3px 2px;
 	}
-
-</style>
+</style>

packages/svelte-notion-page/src/lib/default-notion-components/Quote.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { QuoteProps } from '$lib/types';
+	import type { QuoteArgs } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import RichText from './base/richtext/RichText.svelte';
 
-	export let props: QuoteProps;
+	export let props: QuoteArgs;
 	const {
 		quote: { color, rich_text: texts }
 	} = props;

packages/svelte-notion-page/src/lib/default-notion-components/SyncedBlock.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { SyncedBlockProps } from '$lib/types';
-	export let props: SyncedBlockProps;
+	import type { SyncedBlockArgs } from '$lib/types';
+	export let props: SyncedBlockArgs;
 </script>
 
 <div class="notion-block notion-synced-block">

packages/svelte-notion-page/src/lib/default-notion-components/Table.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { TableProps } from '$lib/types';
-	export let props: TableProps;
+	import type { TableArgs } from '$lib/types';
+	export let props: TableArgs;
 	const {
 		table: { has_column_header, has_row_header }
 	} = props;

packages/svelte-notion-page/src/lib/default-notion-components/TableRow.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { TableRowProps } from '$lib/types';
+	import type { TableRowArgs } from '$lib/types';
 	import RichText from './base/richtext/RichText.svelte';
-	export let props: TableRowProps;
+	export let props: TableRowArgs;
 	const {
 		table_row: { cells }
 	} = props;

packages/svelte-notion-page/src/lib/default-notion-components/Todo.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { TodoProps } from '$lib/types';
+	import type { TodoArgs } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import RichText from './base/richtext/RichText.svelte';
 	import CheckBox from './base/CheckBox.svelte';
-	export let props: TodoProps;
+	export let props: TodoArgs;
 
 	const {
 		to_do: { color, rich_text: texts, checked }

packages/svelte-notion-page/src/lib/default-notion-components/Toggle.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { ToggleProps } from '$lib/types';
+	import type { ToggleArgs } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import RichText from './base/richtext/RichText.svelte';
-	export let props: ToggleProps;
+	export let props: ToggleArgs;
 	const {
 		toggle: { color, rich_text: texts }
 	} = props;
@@ -21,7 +21,7 @@
 			<RichText props={texts} />
 		</p>
 	</div>
-	<slot/>
+	<slot />
 </div>
 
 <style>

packages/svelte-notion-page/src/lib/default-notion-components/Video.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type {  VideoProps } from '$lib/types';
+	import type { VideoArgs } from '$lib/types';
 	import RichText from './base/richtext/RichText.svelte';
 	import { getYoutubeId } from '$lib/utils/getYoutubeId';
 
-	export let props: VideoProps;
+	export let props: VideoArgs;
 	const {
 		video: { type, file, external, caption }
 	} = props;
@@ -20,7 +20,7 @@
 
 			{#if youtubeId}
 				<iframe
-          style="width: 100%; aspect-ratio: 560 / 315;"
+					style="width: 100%; aspect-ratio: 560 / 315;"
 					src="https://www.youtube.com/embed/{youtubeId}"
 					title="YouTube video player"
 					frameborder="0"

packages/svelte-notion-page/src/lib/default-notion-components/base/richtext/RichText.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { TextProps } from '$lib/types';
+	import type { TextArgs } from '$lib/types';
 	import Text from './component/Text.svelte';
 	import Equation from './component/Equation.svelte';
-	export let props: TextProps[];
+	export let props: TextArgs[];
 	const configs = {
 		text: Text,
 		equation: Equation

packages/svelte-notion-page/src/lib/default-notion-components/base/richtext/component/Equation.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { EquationProps } from '$lib/types';
-	export let props: EquationProps;
+	import type { EquationArgs } from '$lib/types';
+	export let props: EquationArgs;
 	import renderEquation from '$lib/utils/renderEquation';
 	const {
 		equation: { expression }

packages/svelte-notion-page/src/lib/default-notion-components/base/richtext/component/Text.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { TextProps } from '$lib/types';
+	import type { TextArgs } from '$lib/types';
 	import { getColorCss } from '$lib/utils/getColorCss';
 	import he from 'he';
-	export let props: TextProps;
+	export let props: TextArgs;
 	const {
 		href,
 		text: { content },