diff --git a/CHANGELOG.md b/CHANGELOG.md index 71c736d2a3..f24bc543b7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Svelte changelog +## Unreleased + +* Handle `width`/`height` attributes when spreading ([#6752](https://github.com/sveltejs/svelte/issues/6752)) +* Add support for resize observer bindings (`
`) ([#8022](https://github.com/sveltejs/svelte/pull/8022)) + ## 3.58.0 - Add `bind:innerText` for `contenteditable` elements ([#3311](https://github.com/sveltejs/svelte/issues/3311)) diff --git a/elements/index.d.ts b/elements/index.d.ts index 7595d767bf..ac32ae94c3 100644 --- a/elements/index.d.ts +++ b/elements/index.d.ts @@ -546,6 +546,11 @@ export interface HTMLAttributes extends AriaAttributes, D */ 'bind:innerText'?: string | undefined | null; + readonly 'bind:contentRect'?: DOMRectReadOnly | undefined | null; + readonly 'bind:contentBoxSize'?: Array<{ blockSize: number; inlineSize: number }> | undefined | null; // TODO make this ResizeObserverSize once we require TS>=4.4 + readonly 'bind:borderBoxSize'?: Array<{ blockSize: number; inlineSize: number }> | undefined | null; // TODO make this ResizeObserverSize once we require TS>=4.4 + readonly 'bind:devicePixelContentBoxSize'?: Array<{ blockSize: number; inlineSize: number }> | undefined | null; // TODO make this ResizeObserverSize once we require TS>=4.4 + // SvelteKit 'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null; 'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null; diff --git a/package-lock.json b/package-lock.json index f09607d922..2078ecd761 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "MIT", "devDependencies": { "@ampproject/remapping": "^0.3.0", - "@jridgewell/sourcemap-codec": "^1.4.14", + "@jridgewell/sourcemap-codec": "^1.4.15", "@rollup/plugin-commonjs": "^11.0.0", "@rollup/plugin-json": "^6.0.0", "@rollup/plugin-node-resolve": "^11.2.1", @@ -185,9 +185,9 @@ } }, "node_modules/@jridgewell/sourcemap-codec": { - "version": "1.4.14", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", - "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", + "version": "1.4.15", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", + "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", "dev": true }, "node_modules/@nodelib/fs.scandir": { @@ -5526,9 +5526,9 @@ "dev": true }, "@jridgewell/sourcemap-codec": { - "version": "1.4.14", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", - "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", + "version": "1.4.15", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", + "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", "dev": true }, "@nodelib/fs.scandir": { diff --git a/package.json b/package.json index 51aebb666d..df0668e077 100644 --- a/package.json +++ b/package.json @@ -120,7 +120,7 @@ "homepage": "https://svelte.dev", "devDependencies": { "@ampproject/remapping": "^0.3.0", - "@jridgewell/sourcemap-codec": "^1.4.14", + "@jridgewell/sourcemap-codec": "^1.4.15", "@rollup/plugin-commonjs": "^11.0.0", "@rollup/plugin-json": "^6.0.0", "@rollup/plugin-node-resolve": "^11.2.1", diff --git a/site/content/docs/02-template-syntax/01-svelte-components.md b/site/content/docs/02-template-syntax/01-svelte-components.md index b13a4e1757..7f387a20ab 100644 --- a/site/content/docs/02-template-syntax/01-svelte-components.md +++ b/site/content/docs/02-template-syntax/01-svelte-components.md @@ -266,7 +266,7 @@ You cannot `export default`, since the default export is the component itself. {#if browser} - + {/if} diff --git a/sites/svelte.dev/src/routes/(authed)/apps/+page.svelte b/sites/svelte.dev/src/routes/(authed)/apps/+page.svelte index df5d7d51fa..bbdeb57a1c 100644 --- a/sites/svelte.dev/src/routes/(authed)/apps/+page.svelte +++ b/sites/svelte.dev/src/routes/(authed)/apps/+page.svelte @@ -26,11 +26,11 @@ const res = await fetch(`/apps/destroy`, { method: 'POST', headers: { - 'content-type': 'application/json', + 'content-type': 'application/json' }, body: JSON.stringify({ - ids: selected, - }), + ids: selected + }) }); if (res.ok) { @@ -142,8 +142,8 @@ diff --git a/sites/svelte.dev/src/routes/+page.svelte b/sites/svelte.dev/src/routes/+page.svelte index 295b543b15..5506f9ae55 100644 --- a/sites/svelte.dev/src/routes/+page.svelte +++ b/sites/svelte.dev/src/routes/+page.svelte @@ -123,12 +123,12 @@ npm run dev section { position: relative; margin: 10rem auto; - padding: 0 var(--side-nav); + padding: 0 var(--sk-page-padding-side); max-width: 120rem; } .blurb-shifter { - margin-top: calc(-10rem + var(--side-nav)); + margin-top: calc(-10rem + var(--sk-page-padding-side)); } footer { @@ -139,7 +139,7 @@ npm run dev } footer a { - color: var(--text); + color: var(--sk-text-2); padding: 0.5rem 1rem; display: block; } diff --git a/sites/svelte.dev/src/routes/_components/Demo.svelte b/sites/svelte.dev/src/routes/_components/Demo.svelte index 39dad28649..39f7e7a51b 100644 --- a/sites/svelte.dev/src/routes/_components/Demo.svelte +++ b/sites/svelte.dev/src/routes/_components/Demo.svelte @@ -6,26 +6,26 @@ { id: 'hello-world', title: 'Hello World', - description: 'Svelte components are built on top of HTML. Just add data.', + description: 'Svelte components are built on top of HTML. Just add data.' }, { id: 'nested-components', title: 'Scoped CSS', description: - 'CSS is component-scoped by default — no more style collisions or specificity wars. Or you can use your favourite CSS-in-JS library.', + 'CSS is component-scoped by default — no more style collisions or specificity wars. Or you can use your favourite CSS-in-JS library.' }, { id: 'reactive-assignments', title: 'Reactivity', description: - 'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.', + 'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.' }, { id: 'svg-transitions', title: 'Transitions', description: - 'Build beautiful UIs with a powerful, performant transition engine built right into the framework.', - }, + 'Build beautiful UIs with a powerful, performant transition engine built right into the framework.' + } ]; let selected = examples[0]; @@ -80,14 +80,14 @@ grid-template-columns: 4fr 1fr; color: white; align-items: center; - font-size: var(--h5); + font-size: var(--sk-text-s); } .tabs { display: grid; grid-template-columns: repeat(4, 1fr); height: 100%; - border-radius: var(--border-r) var(--border-r) 0 0; + border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0; background-color: rgba(255, 255, 255, 0.1); } @@ -98,7 +98,7 @@ height: 100%; align-items: center; justify-content: center; - border-radius: var(--border-r) var(--border-r) 0 0; + border-radius: var(--sk-border-radius) var(--sk-border-radius) 0 0; } button:hover { @@ -143,7 +143,7 @@ @media (min-width: 960px) { .controls { - font-size: var(--h4); + font-size: var(--sk-text-s); } .large-show { diff --git a/sites/svelte.dev/src/routes/_components/Example.svelte b/sites/svelte.dev/src/routes/_components/Example.svelte index 408a43271a..d1bc494875 100644 --- a/sites/svelte.dev/src/routes/_components/Example.svelte +++ b/sites/svelte.dev/src/routes/_components/Example.svelte @@ -17,7 +17,7 @@ .repl-container { width: 100%; height: 420px; - border-radius: var(--border-r); + border-radius: var(--sk-border-radius); overflow: hidden; } diff --git a/sites/svelte.dev/src/routes/_components/Hero.svelte b/sites/svelte.dev/src/routes/_components/Hero.svelte index 324cb367c2..55d10c2992 100644 --- a/sites/svelte.dev/src/routes/_components/Hero.svelte +++ b/sites/svelte.dev/src/routes/_components/Hero.svelte @@ -6,7 +6,11 @@
Cybernetically enhanced web apps - The Svelte compiler packaging up your component code + The Svelte compiler packaging up your component code Svelte logotype
@@ -22,13 +26,13 @@ strong { position: absolute; - font-size: min(4vw, var(--h4)); + font-size: min(4vw, var(--sk-text-s)); max-width: 10em; text-transform: uppercase; font-weight: 700; color: var(--sk-text-2); letter-spacing: 0.05em; - left: max(var(--side-nav), 10%); + left: max(var(--sk-page-padding-side), 10%); top: 25%; } @@ -55,15 +59,14 @@ .logotype, strong { - left: calc(var(--side-nav) + 4rem); - /* left: calc(50% - 56rem + var(--side-nav)); */ + left: calc(var(--sk-page-padding-side) + 4rem); } } @media (min-width: 1200px) { strong, .logotype { - left: calc(50% - 56rem + var(--side-nav)); + left: calc(50% - 56rem + var(--sk-page-padding-side)); } } diff --git a/sites/svelte.dev/src/routes/_components/Section.svelte b/sites/svelte.dev/src/routes/_components/Section.svelte index 71f64891d8..e32ec7f35a 100644 --- a/sites/svelte.dev/src/routes/_components/Section.svelte +++ b/sites/svelte.dev/src/routes/_components/Section.svelte @@ -10,7 +10,7 @@ .inner { max-width: 120rem; - padding: 0 var(--side-nav); + padding: 0 var(--sk-page-padding-side); margin: 0 auto; } diff --git a/sites/svelte.dev/src/routes/blog/+page.svelte b/sites/svelte.dev/src/routes/blog/+page.svelte index ddb748bea3..f6a675e7e5 100644 --- a/sites/svelte.dev/src/routes/blog/+page.svelte +++ b/sites/svelte.dev/src/routes/blog/+page.svelte @@ -36,7 +36,7 @@ grid-gap: 1em; min-height: calc(100vh - var(--sk-nav-height)); padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side); - max-width: var(--main-width); + max-width: var(--sk-page-main-width); margin: 0 auto; } @@ -52,7 +52,7 @@ .post:first-child { margin: 0 0 2rem 0; padding: 0 0 4rem 0; - border-bottom: var(--border-w) solid #6767785b; /* based on --second */ + border-bottom: var(--sk-thick-border-width) solid #6767785b; /* based on --second */ } .post:first-child h2 { diff --git a/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte b/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte index 3860149f30..ad1bcfd029 100644 --- a/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte +++ b/sites/svelte.dev/src/routes/blog/[slug]/+page.svelte @@ -36,7 +36,7 @@