js backend: HTMLElement->(args) is a helper for common HTML DOM cal…

…ls: create text-nodes, append elements, set attributes.
rusthon · Sep 10, 2015 · e9773c3 · e9773c3
1 parent 86bc4c9
commit e9773c3
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 67 deletions.
diff --git a/examples/hello_fullstack.md b/examples/hello_fullstack.md
@@ -126,6 +126,9 @@ tornado.ioloop.IOLoop.instance().start()
 Client Side
 -----------
 
+note: the syntax `HTMLElement->(args)` is a shortcut for common HTML DOM calls,
+it quickly lets you create text-nodes, append multiple elements, or set attributes.
+
 
 @myapp
 ```rusthon
@@ -152,14 +155,13 @@ def on_message_ws(event):
 	else:
 		msg = JSON.parse(event.data)
 
-
 	pre = document.getElementById('RESULTS')
 	if isinstance(msg, list):
 		for res in msg:
 			s = JSON.stringify(res)
-			pre.appendChild( document.createTextNode(s+'\n') )
+			pre->(s+'\n')
 	else:
-		pre.appendChild( document.createTextNode(msg+'\n') )
+		pre->(msg+'\n')
 
 	print msg
 
@@ -183,70 +185,68 @@ def main():
 	try: connect_ws()
 	except: print 'could not connect to websocket'
 
-	with 𝔼 as "document.createElement(%s)":
-		with 𝕋 as "document.createTextNode(%s)":
-
-			con = document.getElementById('FORM')
-			h = 𝔼('h3')
-			h.appendChild(𝕋('update database:'))
-			con.appendChild(h)
-			keys = ('first name', 'last name', 'age')
-			fields = {}
-			for key in keys:
-				input = 𝔼('input')
-				input.setAttribute('type', 'text')
-				fields[key] = input
-				con.appendChild(𝕋(key))
-				con.appendChild(input)
-				con.appendChild(𝔼('br'))
-
-			button = 𝔼('button')
-			button.appendChild(𝕋('submit'))
-			con.appendChild(button)
-			@bind(button.onclick)
-			def onclick():
-				ob = {}
-				for key in fields.keys():
-					elt = fields[key]
-					ob[key] = elt.value
-
-				jsondata = JSON.stringify(ob)
-				ws.send(jsondata)
-
-				searchform = document.getElementById('SEARCH')
-				if searchform is None:
-					searchform = 𝔼('div')
-					searchform.setAttribute('id', 'SEARCH')
-					document.body.appendChild(searchform)
-					h = 𝔼('h3')
-					h.appendChild(𝕋('search database:'))
-					searchform.appendChild( h )
-
-					search_fields = {}
-					for key in keys:
-						input = 𝔼('input')
-						input.setAttribute('type', 'text')
-						search_fields[key] = input
-						searchform.appendChild(𝕋(key))
-						searchform.appendChild(input)
-						searchform.appendChild(𝔼('br'))
-
-
-					sbutton = 𝔼('button')
-					sbutton.appendChild(𝕋('search'))
-					searchform.appendChild(sbutton)
-					@bind(sbutton.onclick)
-					def onsearch():
-						s = []
-						for key in search_fields.keys():
-							elt = search_fields[key]
-							## note ES6 syntax for a computed key name `[key]` ##
-							o = {
-								[key] : elt.value
-							}
-							s.append( o )
-						ws.send( JSON.stringify(s) )
-
+	with 𝕖𝕝𝕥 as "document.createElement(%s)":
+
+		con = document.getElementById('FORM')
+		h = 𝕖𝕝𝕥('h3')->('Update Database:')
+		con->(h)
+
+		keys = ('first name', 'last name', 'age')
+		fields = {}
+		for key in keys:
+			input = 𝕖𝕝𝕥('input')->(type='text')
+			fields[key] = input
+			con->(
+				key,
+				input,
+				𝕖𝕝𝕥('br')
+			)
+
+		button = 𝕖𝕝𝕥('button')
+		button->('submit')
+		con->(button)
+
+		@bind(button.onclick)
+		def onclick():
+			ob = {}
+			for key in fields.keys():
+				elt = fields[key]
+				ob[key] = elt.value
+
+			jsondata = JSON.stringify(ob)
+			ws.send(jsondata)
+
+			searchform = document.getElementById('SEARCH')
+			if searchform is None:
+				searchform = 𝕖𝕝𝕥('div')->(id="SEARCH")
+				document.body.appendChild(searchform)
+				searchform->( 𝕖𝕝𝕥('h3')->('search database:') )
+
+				search_fields = {}
+				for key in keys:
+					input = 𝕖𝕝𝕥('input')->(type='text')
+					search_fields[key] = input
+					searchform->(
+						key,
+						input,
+						𝕖𝕝𝕥('br')
+					)
+
+
+				sbutton = 𝕖𝕝𝕥('button')->('search')
+				searchform->(sbutton)
+
+				@bind(sbutton.onclick)
+				def onsearch():
+					s = []
+					for key in search_fields.keys():
+						elt = search_fields[key]
+						## note ES6 syntax for a computed key name `[key]` ##
+						o = {
+							[key] : elt.value
+						}
+						s.append( o )
+					ws.send( JSON.stringify(s) )
 
 
 ```

diff --git a/src/runtime/builtins_core.py b/src/runtime/builtins_core.py
@@ -8,6 +8,27 @@
 inline('WebWorkerError = function(msg) {this.message = msg || "";}; WebWorkerError.prototype = Object.create(Error.prototype);WebWorkerError.prototype.name = "WebWorkerError";')
 inline('TypeError = function(msg) {this.message = msg || "";}; TypeError.prototype = Object.create(Error.prototype);TypeError.prototype.name = "TypeError";')
 
+if HTMLElement is not undefined:
+	@bind(HTMLElement.prototype.__right_arrow__)
+	def __auto_dom__():
+		for item in arguments:
+			T = typeof(item)
+			if instanceof(item, HTMLElement):
+				this.appendChild( item )
+			elif instanceof(item, Text):  ## a text node create by `document.createTextNode`
+				this.appendChild( item )
+			elif T=='string':
+				this.appendChild( document.createTextNode(item) )
+			elif T=='function':
+				raise RuntimeError('HTMLElement->(lambda function) is invalid')
+			elif T=='object':
+				for key in item.keys():
+					this.setAttribute(key, item[key])
+			else:
+				raise RuntimeError('HTMLElement->(invalid type): '+ item)
+
+		return this
+
 # the unicode decorator is used in the global namespace to define
 # a mapping from the function name to the unicode version of the name.
 # the user is able to then define their own unicode scripting language,

diff --git a/src/typedpython.md b/src/typedpython.md
@@ -835,6 +835,9 @@ class typedpython:
 				#this_name = a.split()[-1].split('=')[-1].split(':')[-1].split(',')[-1]
 				#method_name = b.split()[0].split('(')[0]
 				#c = c.replace('->'+method_name, '.__right_arrow__<<'+method_name)
+
+				c = c.replace('->(', '.__right_arrow__(')
+				c = c.replace('->[', '.__right_arrow__[')
 				c = c.replace('->', '.__right_arrow__.')