[lit-labs/ssr-dom-shim] shim Element.prototype.toggleAttribute method (…

…#4493)

.changeset/fresh-fishes-do.md

@@ -0,0 +1,5 @@
+---
+'@lit-labs/ssr-dom-shim': minor
+---
+
+Add `toggleAttribute` to the Element shim.

.eslintignore

@@ -348,6 +348,7 @@ packages/labs/ssr-client/lit-element-hydrate-support.*
 
 packages/labs/ssr-dom-shim/index.*
 packages/labs/ssr-dom-shim/lib/
+packages/labs/ssr-dom-shim/test/
 
 packages/labs/ssr-react/node/
 packages/labs/ssr-react/lib/

.prettierignore

@@ -336,6 +336,7 @@ packages/labs/ssr-client/lit-element-hydrate-support.*
 
 packages/labs/ssr-dom-shim/index.*
 packages/labs/ssr-dom-shim/lib/
+packages/labs/ssr-dom-shim/test/
 
 packages/labs/ssr-react/node/
 packages/labs/ssr-react/lib/

package.json

@@ -174,6 +174,7 @@
         "./packages/labs/react:test",
         "./packages/labs/rollup-plugin-minify-html-literals:test",
         "./packages/labs/ssr:test",
+        "./packages/labs/ssr-dom-shim:test",
         "./packages/labs/ssr-react:test",
         "./packages/labs/testing:test",
         "./packages/labs/virtualizer:test",

packages/labs/ssr-dom-shim/.gitignore

@@ -1,2 +1,3 @@
 /index.*
 /lib/
+/test/

packages/labs/ssr-dom-shim/package.json

@@ -28,7 +28,8 @@
   ],
   "scripts": {
     "build": "wireit",
-    "build:ts": "wireit"
+    "build:ts": "wireit",
+    "test": "wireit"
   },
   "wireit": {
     "build": {
@@ -48,6 +49,16 @@
         "index.{d.ts,d.ts.map,js,js.map}",
         "tsconfig.tsbuildinfo"
       ]
+    },
+    "test": {
+      "command": "uvu test \"_test\\.js$\"",
+      "dependencies": [
+        "build"
+      ],
+      "env": {
+        "NODE_OPTIONS": "--enable-source-maps"
+      },
+      "output": []
     }
   }
 }

packages/labs/ssr-dom-shim/src/index.ts

@@ -61,6 +61,17 @@ const ElementShim = class Element {
   removeAttribute(name: string) {
     attributesForElement(this).delete(name);
   }
+  toggleAttribute(name: string, force?: boolean): boolean {
+    if (force === undefined) {
+      force = !this.hasAttribute(name);
+    }
+    if (force) {
+      this.setAttribute(name, '');
+    } else {
+      this.removeAttribute(name);
+    }
+    return force;
+  }
   hasAttribute(name: string) {
     return attributesForElement(this).has(name);
   }

packages/labs/ssr-dom-shim/src/test/element-shim_test.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {suite} from 'uvu';
+// eslint-disable-next-line import/extensions
+import * as assert from 'uvu/assert';
+import {HTMLElement} from '@lit-labs/ssr-dom-shim';
+
+const test = suite('Element Shim');
+
+test('toggleAttribute adds and removes attributes', () => {
+  const shimmedEl = new HTMLElement();
+  assert.ok(shimmedEl.toggleAttribute('potato'));
+  assert.ok(shimmedEl.hasAttribute('potato'));
+  assert.not.ok(shimmedEl.toggleAttribute('potato'));
+  assert.not.ok(shimmedEl.hasAttribute('potato'));
+});
+
+test('toggleAttribute accepts an optional force parameter', () => {
+  const shimmedEl = new HTMLElement();
+  assert.not.ok(shimmedEl.toggleAttribute('potato', false));
+  assert.not.ok(shimmedEl.hasAttribute('potato'));
+  assert.ok(shimmedEl.toggleAttribute('potato', true));
+  assert.ok(shimmedEl.hasAttribute('potato'));
+  // A no-op, ensuring attribute remains
+  assert.ok(shimmedEl.toggleAttribute('potato', true));
+  assert.ok(shimmedEl.hasAttribute('potato'));
+});
+
+test('setAttribute silently casts values to a string', () => {
+  const shimmedEl = new HTMLElement();
+  // It is possible to pass any value to `setAttribute`, and we
+  // silently convert it to a string.
+  shimmedEl.setAttribute('tomato', {} as unknown as string);
+  assert.equal(shimmedEl.getAttribute('tomato'), '[object Object]');
+});
+
+test.run();