Simplify field definitions for custom events. Allow using LWScriptCal…

…lback (with debounce etc) as handler.

src/LiveWeb-Core/LWCustomElement.class.st

@@ -125,14 +125,17 @@ LWCustomElement >> renderCustomEvents: h [
  h script: [ 
 	h raw: 'window.addEventListener("load",function(){ const '; raw: c; raw: ' = _lw.get('; raw: id asString; raw: ');'.
 	eventListeners do: [ :e |
-		| cb event callback |
+		| cb event callback block |
 		event := e key.
-		callback := e value.
-		cb := ctx registerCallback: [ :d | |evt|
-			evt := event fromDictionary: d.
-			callback value: evt ] for: self. 
-      h raw: c; raw: '.addEventListener("'; raw: event type; raw: '",e=>_lws(';
-        raw: cb asString; raw: ', ['; raw: event eventJS; raw: ']));'
+		callback := e value asLWScriptCallback.
+		callback jsParams: { '[{1}]' format: {(',' join: (event eventFields collect: #value))} }.
+		block := callback callback.
+		cb := ctx registerCallback: [ :arr | |evt|
+			evt := event fromArray: arr.
+			block value: evt ] for: self. 
+      h raw: c; raw: '.addEventListener("'; raw: event type; raw: '",e=>';
+        raw: (callback asJS: cb);
+        raw: ');'
     ].
   h raw: '})'
 ]

src/LiveWeb-Core/LWCustomEvent.class.st

@@ -19,20 +19,12 @@ LWCustomEvent class >> eventFields [
 	self subclassResponsibility 
 ]
 
-{ #category : #'as yet unclassified' }
-LWCustomEvent class >> eventJS [ 
- "Build JS to create the event object in the browser side, using the event 'e'.
-  For example: ^ '{''value'': e.target.value}'
- "
- self subclassResponsibility. 
-]
-
 { #category : #'instance creation' }
-LWCustomEvent class >> fromDictionary: d [
+LWCustomEvent class >> fromArray: arr [
  | e |
  e := self new.
- self eventFields do: [ :f |
-	e at: f put: (d at: f)
+ self eventFields doWithIndex: [ :f :i |
+	e at: f key put: (arr at: i)
  ].
  ^ e
 ]

src/LiveWeb-Core/LWScriptCallback.class.st

@@ -39,7 +39,8 @@ LWScriptCallback >> asJS: cb [
 
 { #category : #converting }
 LWScriptCallback >> asLWScriptCallback [ 
-  ^ self
+ ^ self 
+
 ]
 
 { #category : #accessing }

src/LiveWeb-Developer/LWDevMain.class.st

@@ -35,7 +35,8 @@ LWDevMain >> initialize [
 	spotterDialog := SlDialog new 
 		className: 'spotter';
 		label: 'Jump to class';
-		add: (LWBlockContainer new block: [ :h | h input: { #placeholder -> 'type classname part' } ]);
+		add: (SlInput new placeholder: 'type class name'; autofocus: true;
+			on: SlInputEvent do: (Js debounced: [ :e | e inspect ] wait: (Duration milliSeconds: 250)));
 		yourself. 
 
 ]

src/LiveWeb-Shoelace/SlChangeEvent.class.st

@@ -9,18 +9,13 @@ SlChangeEvent class >> eventFields [
 	^ #( 'value' )
 ]
 
-{ #category : #'as yet unclassified' }
-SlChangeEvent class >> eventJS [ 
- ^ '{"value": e.target.value}'
-]
-
 { #category : #accessing }
 SlChangeEvent class >> type [ 
  ^ 'sl-change'
 ]
 
 { #category : #evaluating }
 SlChangeEvent >> value [ 
- ^ self at: 'value'
+ ^ self at: #value
 
 ]

src/LiveWeb-Shoelace/SlCheckboxEvent.class.st

@@ -9,11 +9,6 @@ SlCheckboxEvent class >> eventFields [
 	^ #('checked')
 ]
 
-{ #category : #'as yet unclassified' }
-SlCheckboxEvent class >> eventJS [ 
-^'{"checked":e.target.checked}'
-]
-
 { #category : #accessing }
 SlCheckboxEvent class >> type [ 
 ^'sl-change'

src/LiveWeb-Shoelace/SlInputEvent.class.st

@@ -0,0 +1,20 @@
+"
+I am a form input event. I provide the current value of the target.
+"
+Class {
+	#name : #SlInputEvent,
+	#superclass : #LWCustomEvent,
+	#category : #'LiveWeb-Shoelace'
+}
+
+{ #category : #accessing }
+SlInputEvent class >> type [ 
+ ^ 'sl-input'
+
+]
+
+{ #category : #evaluating }
+SlInputEvent >> value [ 
+ ^ self at: #value
+
+]