Release - v2.2.11

.github/ISSUE_TEMPLATE/config.yml

@@ -13,6 +13,9 @@ contact_links:
   - name: 🚀 Feature Request or Enhancement
     url: https://github.com/MithrilJS/mithril.js/discussions/new?category=ideas
     about: Got a feature request? Let us know here! We do those in our discussion forum.
+  - name: 📄 Documentation issue
+    url: https://github.com/MithrilJS/docs
+    about: Found an issue with our documentation? File that in our docs repo instead.
   - name: 💻 Zulip Chat
     url: https://mithril.zulipchat.com/
     about: Not sure about something? Just want to hang out? Come over to our Zulip chat!

.github/workflows/pr-create-release.yml

@@ -7,5 +7,7 @@ permissions:
   issues: write
 jobs:
   comment:
+    # Don't auto-close actual release PRs
+    if: ${{github.actor != 'JAForbes' || !contains(github.event.issue.title, "Release - v")}}
     uses: MithrilJS/infra/.github/workflows/reject-pr.yml@main
     secrets: inherit

.github/workflows/push-release.yml

@@ -20,14 +20,11 @@ jobs:
         node-version: 20
     - run: npm ci
     - run: npm run build
-    - run: npx pr-release merge --target release --source main --commit --force --clean --changelog ./docs/recent-changes.md --compact --minimize-semver-change
-      env:
-        GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
-    - run: bash scripts/set-versioned-branch.sh release
-    # The following will publish the release to npm
     - run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/.npmrc
       name: Setup NPM Auth
       env:
         NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-    - run: npm publish
-      name: Publish
+    - run: npx pr-release merge --target release --source main --commit --force --clean --changelog ./docs/recent-changes.md --compact --minimize-semver-change --prerelease="npm publish"
+      env:
+        GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+    - run: bash scripts/set-versioned-branch.sh release

render/render.js

@@ -794,7 +794,7 @@ module.exports = function() {
 			for (var key in style) {
 				var value = style[key]
 				if (value != null) {
-					if (key[0] === "-" && key[1] === "-") element.style.setProperty(key, String(value))
+					if (key.includes("-")) element.style.setProperty(key, String(value))
 					else element.style[key] = String(value)
 				}
 			}
@@ -804,14 +804,14 @@ module.exports = function() {
 			for (var key in style) {
 				var value = style[key]
 				if (value != null && (value = String(value)) !== String(old[key])) {
-					if (key[0] === "-" && key[1] === "-") element.style.setProperty(key, value)
+					if (key.includes("-")) element.style.setProperty(key, value)
 					else element.style[key] = value
 				}
 			}
 			// Remove style properties that no longer exist
 			for (var key in old) {
 				if (old[key] != null && style[key] == null) {
-					if (key[0] === "-" && key[1] === "-") element.style.removeProperty(key)
+					if (key.includes("-")) element.style.removeProperty(key)
 					else element.style[key] = ""
 				}
 			}

render/tests/test-updateElement.js

@@ -257,6 +257,75 @@ o.spec("updateElement", function() {
 
 		}
 	})
+	o("use style property setter only when cameCase keys", function() {
+		var spySetProperty = o.spy()
+		var spyRemoveProperty = o.spy()
+		var spyDashed1 = o.spy()
+		var spyDashed2 = o.spy()
+		var spyDashed3 = o.spy()
+		var spyCamelCase1 = o.spy()
+		var spyCamelCase2 = o.spy()
+
+		render(root, m("a"))
+		var el = root.firstChild
+
+		el.style.setProperty = spySetProperty
+		el.style.removeProperty = spyRemoveProperty
+		Object.defineProperties(el.style, {
+			/* eslint-disable accessor-pairs */
+			"background-color": {set: spyDashed1},
+			"-webkit-border-radius": {set: spyDashed2},
+			"--foo": {set: spyDashed3},
+			backgroundColor: {set: spyCamelCase1},
+			color: {set: spyCamelCase2}
+			/* eslint-enable accessor-pairs */
+		})
+
+		// sets dashed properties
+		render(root, m("a", {
+			style: {
+				"background-color": "red",
+				"-webkit-border-radius": "10px",
+				"--foo": "bar"
+			}
+		}))
+		o(spySetProperty.callCount).equals(3)
+		o(spySetProperty.calls[0].args).deepEquals(["background-color", "red"])
+		o(spySetProperty.calls[1].args).deepEquals(["-webkit-border-radius", "10px"])
+		o(spySetProperty.calls[2].args).deepEquals(["--foo", "bar"])
+
+		// sets camelCase properties and removes dashed properties
+		render(root, m("a", {
+			style: {
+				backgroundColor: "green",
+				color: "red",
+			}
+		}))
+		o(spyCamelCase1.callCount).equals(1)
+		o(spyCamelCase2.callCount).equals(1)
+		o(spyCamelCase1.calls[0].args).deepEquals(["green"])
+		o(spyCamelCase2.calls[0].args).deepEquals(["red"])
+		o(spyRemoveProperty.callCount).equals(3)
+		o(spyRemoveProperty.calls[0].args).deepEquals(["background-color"])
+		o(spyRemoveProperty.calls[1].args).deepEquals(["-webkit-border-radius"])
+		o(spyRemoveProperty.calls[2].args).deepEquals(["--foo"])
+
+		// updates "color" and removes "backgroundColor"
+		render(root, m("a", {style: {color: "blue"}}))
+		o(spyCamelCase1.callCount).equals(2) // set and remove
+		o(spyCamelCase2.callCount).equals(2) // set and update
+		o(spyCamelCase1.calls[1].args).deepEquals([""])
+		o(spyCamelCase2.calls[1].args).deepEquals(["blue"])
+
+		// unchanged by camelCase properties
+		o(spySetProperty.callCount).equals(3)
+		o(spyRemoveProperty.callCount).equals(3)
+
+		// never calls dashed property setter
+		o(spyDashed1.callCount).equals(0)
+		o(spyDashed2.callCount).equals(0)
+		o(spyDashed3.callCount).equals(0)
+	})
 	o("replaces el", function() {
 		var vnode = m("a")
 		var updated = m("b")

test-utils/domMock.js

@@ -284,12 +284,18 @@ module.exports = function(options) {
 					getPropertyValue: {value: function(key){
 						return style[key]
 					}},
-					removeProperty: {value: function(key){
-						style[key] = style[camelCase(key)] = ""
-					}},
-					setProperty: {value: function(key, value){
-						style[key] = style[camelCase(key)] = value
-					}}
+					removeProperty: {
+						writable: true,
+						value: function(key){
+							style[key] = style[camelCase(key)] = ""
+						}
+					},
+					setProperty: {
+						writable: true,
+						value: function(key, value){
+							style[key] = style[camelCase(key)] = value
+						}
+					}
 				})
 				var events = {}
 				var element = {