diff --git a/CHANGELOG.md b/CHANGELOG.md index f240db6dce..c4ea2fbe7c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,10 @@ * Detect unused empty attribute CSS selectors ([#8042](https://github.com/sveltejs/svelte/issues/8042)) * Simpler output for reactive statements if dependencies are all static ([#7942](https://github.com/sveltejs/svelte/pull/7942)) * Flush remaining `afterUpdate` calls before `onDestroy` ([#7476](https://github.com/sveltejs/svelte/issues/7476)) +* Check value equality for `input` types `url` and `search` ([#7027](https://github.com/sveltejs/svelte/issues/7027)) +* Compute node dimensions directly before crossfading ([#4111](https://github.com/sveltejs/svelte/issues/4111)) +* Add `readonly` method to convert `writable` store to readonly ([#6518](https://github.com/sveltejs/svelte/pull/6518)) +* Ensure `bind:offsetHeight` updates initially ([#4233](https://github.com/sveltejs/svelte/issues/4233)) ## 3.55.1 diff --git a/package-lock.json b/package-lock.json index 5ab035cd2e..b8aea534af 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "devDependencies": { "@ampproject/remapping": "^0.3.0", + "@jridgewell/sourcemap-codec": "^1.4.14", "@rollup/plugin-commonjs": "^11.0.0", "@rollup/plugin-json": "^4.0.1", "@rollup/plugin-node-resolve": "^11.2.1", @@ -44,7 +45,6 @@ "rollup": "^1.27.14", "source-map": "^0.7.4", "source-map-support": "^0.5.21", - "sourcemap-codec": "^1.4.8", "tiny-glob": "^0.2.9", "tslib": "^2.4.1", "typescript": "^3.7.5", @@ -162,6 +162,12 @@ "node": ">=6.0.0" } }, + "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==", + "dev": true + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -5373,6 +5379,12 @@ "integrity": "sha512-9oLAnygRMi8Q5QkYEU4XWK04B+nuoXoxjRvRxgjuChkLZFBja0YPSgdZ7dZtwhncLBcQe/I/E+fLuk5qxcYVJA==", "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==", + "dev": true + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", diff --git a/package.json b/package.json index 1efd4cb780..975f171fe6 100644 --- a/package.json +++ b/package.json @@ -120,6 +120,7 @@ "homepage": "https://svelte.dev", "devDependencies": { "@ampproject/remapping": "^0.3.0", + "@jridgewell/sourcemap-codec": "^1.4.14", "@rollup/plugin-commonjs": "^11.0.0", "@rollup/plugin-json": "^4.0.1", "@rollup/plugin-node-resolve": "^11.2.1", @@ -154,7 +155,6 @@ "rollup": "^1.27.14", "source-map": "^0.7.4", "source-map-support": "^0.5.21", - "sourcemap-codec": "^1.4.8", "tiny-glob": "^0.2.9", "tslib": "^2.4.1", "typescript": "^3.7.5", diff --git a/site/content/docs/03-template-syntax.md b/site/content/docs/03-template-syntax.md index 74a2069c68..f0bbf67dea 100644 --- a/site/content/docs/03-template-syntax.md +++ b/site/content/docs/03-template-syntax.md @@ -751,6 +751,22 @@ Videos additionally have readonly `videoWidth` and `videoHeight` bindings. > ``` +##### Image element bindings + +--- + +Image elements (``) have two readonly bindings: + +* `naturalWidth` (readonly) — the original width of the image, available after the image has loaded +* `naturalHeight` (readonly) — the original height of the image, available after the image has loaded + +```sv + +``` + ##### Block-level element bindings --- diff --git a/site/content/tutorial/06-bindings/05-textarea-inputs/text.md b/site/content/tutorial/06-bindings/05-textarea-inputs/text.md index 42763200c7..d9a08eee91 100644 --- a/site/content/tutorial/06-bindings/05-textarea-inputs/text.md +++ b/site/content/tutorial/06-bindings/05-textarea-inputs/text.md @@ -1,8 +1,7 @@ --- title: Textarea inputs --- - -The ` @@ -14,4 +13,4 @@ In cases like these, where the names match, we can also use a shorthand form: ``` -This applies to all bindings, not just textareas. \ No newline at end of file +This applies to all bindings, not just textareas. diff --git a/src/compiler/compile/nodes/Binding.ts b/src/compiler/compile/nodes/Binding.ts index 46112a03a3..9a62b68850 100644 --- a/src/compiler/compile/nodes/Binding.ts +++ b/src/compiler/compile/nodes/Binding.ts @@ -22,7 +22,9 @@ const read_only_media_attributes = new Set([ 'seeking', 'ended', 'videoHeight', - 'videoWidth' + 'videoWidth', + 'naturalWidth', + 'naturalHeight' ]); export default class Binding extends Node { diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 4d1cb758fe..1ac75faffd 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -918,6 +918,13 @@ export default class Element extends Node { } else if (is_void(this.name)) { return component.error(binding, compiler_errors.invalid_binding_on(binding.name, `void elements like <${this.name}>. Use a wrapper element instead`)); } + } else if ( + name === 'naturalWidth' || + name === 'naturalHeight' + ) { + if (this.name !== 'img') { + return component.error(binding, compiler_errors.invalid_binding_element_with('', name)); + } } else if ( name === 'textContent' || name === 'innerHTML' diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 8a8f59810b..39ca782af0 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -137,6 +137,10 @@ const events = [ event_names: ['toggle'], filter: (node: Element, _name: string) => node.name === 'details' + }, + { + event_names: ['load'], + filter: (_: Element, name: string) => name === 'naturalHeight' || name === 'naturalWidth' } ]; diff --git a/src/compiler/preprocess/decode_sourcemap.ts b/src/compiler/preprocess/decode_sourcemap.ts index c7e13c2853..be4b70125f 100644 --- a/src/compiler/preprocess/decode_sourcemap.ts +++ b/src/compiler/preprocess/decode_sourcemap.ts @@ -1,4 +1,4 @@ -import { decode as decode_mappings } from 'sourcemap-codec'; +import { decode as decode_mappings } from '@jridgewell/sourcemap-codec'; import { Processed } from './types'; /** diff --git a/test/js/samples/natural-dimension-binding/expected.js b/test/js/samples/natural-dimension-binding/expected.js new file mode 100644 index 0000000000..3920c61009 --- /dev/null +++ b/test/js/samples/natural-dimension-binding/expected.js @@ -0,0 +1,95 @@ +/* generated by Svelte vX.Y.Z */ +import { + SvelteComponent, + add_render_callback, + attr, + detach, + element, + init, + insert, + listen, + noop, + safe_not_equal, + set_data, + space, + src_url_equal, + text +} from "svelte/internal"; + +function create_fragment(ctx) { + let img; + let img_src_value; + let t0; + let t1; + let t2; + let t3; + let mounted; + let dispose; + + return { + c() { + img = element("img"); + t0 = space(); + t1 = text(/*naturalWidth*/ ctx[0]); + t2 = text(" x "); + t3 = text(/*naturalHeight*/ ctx[1]); + if (!src_url_equal(img.src, img_src_value = "something.jpg")) attr(img, "src", img_src_value); + if (/*naturalWidth*/ ctx[0] === void 0 || /*naturalHeight*/ ctx[1] === void 0) add_render_callback(() => /*img_load_handler*/ ctx[2].call(img)); + }, + m(target, anchor) { + insert(target, img, anchor); + insert(target, t0, anchor); + insert(target, t1, anchor); + insert(target, t2, anchor); + insert(target, t3, anchor); + + if (!mounted) { + dispose = listen(img, "load", /*img_load_handler*/ ctx[2]); + mounted = true; + } + }, + p(ctx, [dirty]) { + if (dirty & /*naturalWidth*/ 1) set_data(t1, /*naturalWidth*/ ctx[0]); + if (dirty & /*naturalHeight*/ 2) set_data(t3, /*naturalHeight*/ ctx[1]); + }, + i: noop, + o: noop, + d(detaching) { + if (detaching) detach(img); + if (detaching) detach(t0); + if (detaching) detach(t1); + if (detaching) detach(t2); + if (detaching) detach(t3); + mounted = false; + dispose(); + } + }; +} + +function instance($$self, $$props, $$invalidate) { + let { naturalWidth = 0 } = $$props; + let { naturalHeight = 0 } = $$props; + + function img_load_handler() { + naturalWidth = this.naturalWidth; + naturalHeight = this.naturalHeight; + $$invalidate(0, naturalWidth); + $$invalidate(1, naturalHeight); + } + + $$self.$$set = $$props => { + if ('naturalWidth' in $$props) $$invalidate(0, naturalWidth = $$props.naturalWidth); + if ('naturalHeight' in $$props) $$invalidate(1, naturalHeight = $$props.naturalHeight); + }; + + return [naturalWidth, naturalHeight, img_load_handler]; +} + +class Component extends SvelteComponent { + constructor(options) { + super(); + init(this, options, instance, create_fragment, safe_not_equal, { naturalWidth: 0, naturalHeight: 1 }); + } +} + +export default Component; \ No newline at end of file diff --git a/test/js/samples/natural-dimension-binding/input.svelte b/test/js/samples/natural-dimension-binding/input.svelte new file mode 100644 index 0000000000..67a7a947fa --- /dev/null +++ b/test/js/samples/natural-dimension-binding/input.svelte @@ -0,0 +1,8 @@ + + + + +{naturalWidth} x {naturalHeight}