From e0c4c601f99aa894b3cb1bc7eb121bb4c0b3bbad Mon Sep 17 00:00:00 2001 From: Jovi De Croock Date: Tue, 15 Nov 2022 19:55:36 +0100 Subject: [PATCH 1/3] Setting translate through direct access does not work --- src/diff/props.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/diff/props.js b/src/diff/props.js index df5710925a..9c26415c44 100644 --- a/src/diff/props.js +++ b/src/diff/props.js @@ -109,6 +109,7 @@ export function setProperty(dom, name, value, oldValue, isSvg) { name = name.replace(/xlink(H|:h)/, 'h').replace(/sName$/, 's'); } else if ( name !== 'href' && + name !== 'translate' && name !== 'list' && name !== 'form' && // Default value in browsers is `-1` and an empty string is From 2a7f25f36a911184b8e66fb2677c657801dd5688 Mon Sep 17 00:00:00 2001 From: Jovi De Croock Date: Wed, 16 Nov 2022 16:11:42 +0100 Subject: [PATCH 2/3] add test --- test/browser/render.test.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/test/browser/render.test.js b/test/browser/render.test.js index bd084a40b6..0498079caa 100644 --- a/test/browser/render.test.js +++ b/test/browser/render.test.js @@ -117,6 +117,11 @@ describe('render()', () => { expect(scratch.firstChild).to.have.property('nodeName', 'X-BAR'); }); + it('should support the translate attribute', () => { + render(Bold, scratch); + expect(scratch.innerHTML).to.equal('Bold'); + }); + it('should support the form attribute', () => { render(
From 41e449a6c38818172205bfde49c4547a89de8b5c Mon Sep 17 00:00:00 2001 From: Jovi De Croock Date: Thu, 8 Feb 2024 08:15:31 +0100 Subject: [PATCH 3/3] alternative fix --- compat/src/render.js | 2 ++ compat/test/browser/render.test.js | 10 ++++++++++ src/diff/props.js | 1 - src/jsx.d.ts | 2 +- test/browser/render.test.js | 9 +++++++-- 5 files changed, 20 insertions(+), 4 deletions(-) diff --git a/compat/src/render.js b/compat/src/render.js index b215c60065..bc56be176a 100644 --- a/compat/src/render.js +++ b/compat/src/render.js @@ -143,6 +143,8 @@ function handleDomVNode(vnode) { // value will be used as the file name and the file will be called // "true" upon downloading it. value = ''; + } else if (lowerCased === 'translate' && value === 'no') { + value = false; } else if (lowerCased === 'ondoubleclick') { i = 'ondblclick'; } else if ( diff --git a/compat/test/browser/render.test.js b/compat/test/browser/render.test.js index 2384788ac4..df1007bca1 100644 --- a/compat/test/browser/render.test.js +++ b/compat/test/browser/render.test.js @@ -499,6 +499,16 @@ describe('compat render', () => { expect(updateSpy).to.not.be.calledOnce; }); + it('should support the translate attribute w/ yes as a string', () => { + render(Bold, scratch); + expect(scratch.innerHTML).to.equal('Bold'); + }); + + it('should support the translate attribute w/ no as a string', () => { + render(Bold, scratch); + expect(scratch.innerHTML).to.equal('Bold'); + }); + it('should support false aria-* attributes', () => { render(
, scratch); expect(scratch.firstChild.getAttribute('aria-checked')).to.equal('false'); diff --git a/src/diff/props.js b/src/diff/props.js index a430dd6f49..75016c4025 100644 --- a/src/diff/props.js +++ b/src/diff/props.js @@ -83,7 +83,6 @@ export function setProperty(dom, name, value, oldValue, isSvg) { name !== 'width' && name !== 'height' && name !== 'href' && - name !== 'translate' && name !== 'list' && name !== 'form' && // Default value in browsers is `-1` and an empty string is diff --git a/src/jsx.d.ts b/src/jsx.d.ts index 38e82f5fdf..85ae0a5f78 100644 --- a/src/jsx.d.ts +++ b/src/jsx.d.ts @@ -2419,7 +2419,7 @@ export namespace JSXInternal { | undefined | SignalLike; results?: number | undefined | SignalLike; - translate?: 'yes' | 'no' | undefined | SignalLike<'yes' | 'no' | undefined>; + translate?: boolean | undefined | SignalLike; // RDFa Attributes about?: string | undefined | SignalLike; diff --git a/test/browser/render.test.js b/test/browser/render.test.js index 87f6f3f9a4..2baf381d3a 100644 --- a/test/browser/render.test.js +++ b/test/browser/render.test.js @@ -130,11 +130,16 @@ describe('render()', () => { expect(scratch.firstChild).to.have.property('nodeName', 'X-BAR'); }); - it('should support the translate attribute', () => { - render(Bold, scratch); + it('should support the translate attribute w/ false as a boolean', () => { + render(Bold, scratch); expect(scratch.innerHTML).to.equal('Bold'); }); + it('should support the translate attribute w/ true as a boolean', () => { + render(Bold, scratch); + expect(scratch.innerHTML).to.equal('Bold'); + }); + it('should support the form attribute', () => { render(