Enable ref w/ adding more detailed warning about on___

Author: ClassicOldSong

README.md

@@ -52,6 +52,14 @@ Application.run({ create })
 
 ## Caveats
 
+### Event handling
+
+Use `on:raw-EventName` and `oncapture:RawEvent-Name` to register event handlers instead of `on___`. It may be a little annoying, but NativeScript uses case sensitive event names and don't have native event bubbling, which means delegation couldn't function.
+
+To enable capture and bubble phase of an event, please refer to this [doc](https://github.com/SudoMaker/DOMiNATIVE#tweakabledefineeventoptioneventname-string-option-eventoption)
+
+### Patching `package.json` of `solid-js`
+
 You have to patch the `exports` key in the `package.json` form `node_modules/solid-js`. It is recommended to use [patch-package](https://www.npmjs.com/package/patch-package) for patching.
 
 For example:

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@dominative/solid",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.2-alpha.2",
   "description": "Custom render and patches for SolidJS to work with DOMiNATIVE",
   "main": "src/index.js",
   "type": "module",

package.json

@@ -1,6 +1,7 @@
 import './dom.js'
 import { createRenderer } from 'solid-js/universal'
 
+
 export const {
 	render,
 	effect,
@@ -23,13 +24,29 @@ export const {
 	replaceText(textNode, value) {
 		textNode.nodeValue = value
 	},
-	setProperty(node, name, value) {
-		if (name === 'style') {
-			Object.assign(node.style, value)
-		} else if (name.startsWith('on:')) node.addEventListener(name.slice(3), value)
-		else if (name.startsWith('oncapture:')) node.addEventListener(name.slice(10), value, true)
-		else {
-			if (process.env.NODE_ENV !== 'production' && name.startsWith('on')) console.warn(`[DOMiSOLID] For event handlers, pleas use 'on:eventName' or 'oncapture:eventName'.`)
+	// eslint-disable-next-line max-params
+	setProperty(node, name, value, prev) {
+		if (name === 'style') return Object.assign(node.style, value)
+		if (value === prev) return
+
+		if (name === 'ref') return value(node)
+
+		if (name.startsWith('on:')) {
+			const eventName = name.slice(3)
+			if (prev) node.removeEventListener(eventName, prev)
+			if (value) node.addEventListener(eventName, value)
+		} else if (name.startsWith('oncapture:')) {
+			const eventName = name.slice(10)
+			if (prev) node.removeEventListener(eventName, prev, true)
+			if (value) node.addEventListener(eventName, value, true)
+		} else {
+			if (process.env.NODE_ENV !== 'production' && name.startsWith('on')) {
+				console.warn(`[DOMiSOLID] Can not register '${name}' as an event handler.
+		For event handlers, pleas use 'on:raw-eventName' or 'oncapture:rawEvent-name'.
+		Event delegation isn't supported, also event names are case sensitive on NativeScript.
+		Refer to https://www.solidjs.com/docs/latest/api#on___oncapture___ for details about 'on:___' and 'oncapture:___'.
+		Refer to https://github.com/SudoMaker/dominative#tweaking to learn how to enable event bubbling and capturing.`)
+			}
 			node.setAttribute(name, value)
 		}
 	},