Merge pull request #48719 from Faless/js/4.x_interfaces

[HTML5] Implement Godot <-> JavaScript interface.

2 files changed, 69 insertions, 0 deletions

diff --git a/doc/classes/JavaScript.xml b/doc/classes/JavaScript.xml
index c707a72ee8..e6d74eeb21 100644
--- a/doc/classes/JavaScript.xml
+++ b/doc/classes/JavaScript.xml
@@ -11,6 +11,24 @@
 		<link title="Exporting for the Web: Calling JavaScript from script">https://docs.godotengine.org/en/latest/getting_started/workflow/export/exporting_for_web.html#calling-javascript-from-script</link>
 	</tutorials>
 	<methods>
+		<method name="create_callback">
+			<return type="JavaScriptObject">
+			</return>
+			<argument index="0" name="callable" type="Callable">
+			</argument>
+			<description>
+				Creates a reference to a [Callable] that can be used as a callback by JavaScript. The reference must be kept until the callback happens, or it won't be called at all. See [JavaScriptObject] for usage.
+			</description>
+		</method>
+		<method name="create_object" qualifiers="vararg">
+			<return type="Variant">
+			</return>
+			<argument index="0" name="object" type="String">
+			</argument>
+			<description>
+				Creates a new JavaScript object using the [code]new[/code] constructor. The [code]object[/code] must a valid property of the JavaScript [code]window[/code]. See [JavaScriptObject] for usage.
+			</description>
+		</method>
 		<method name="eval">
 			<return type="Variant">
 			</return>
@@ -23,6 +41,15 @@
 				If [code]use_global_execution_context[/code] is [code]true[/code], the code will be evaluated in the global execution context. Otherwise, it is evaluated in the execution context of a function within the engine's runtime environment.
 			</description>
 		</method>
+		<method name="get_interface">
+			<return type="JavaScriptObject">
+			</return>
+			<argument index="0" name="interface" type="String">
+			</argument>
+			<description>
+				Returns an interface to a JavaScript object that can be used by scripts. The [code]interface[/code] must be a valid property of the JavaScript [code]window[/code]. The callback must accept a single [Array] argument, which will contain the JavaScript [code]arguments[/code]. See [JavaScriptObject] for usage.
+			</description>
+		</method>
 	</methods>
 	<constants>
 	</constants>
diff --git a/doc/classes/JavaScriptObject.xml b/doc/classes/JavaScriptObject.xml
new file mode 100644
index 0000000000..a9e9c77e89
--- /dev/null
+++ b/doc/classes/JavaScriptObject.xml
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<class name="JavaScriptObject" inherits="Reference" version="4.0">
+	<brief_description>
+		A wrapper class for native JavaScript objects.
+	</brief_description>
+	<description>
+		JavaScriptObject is used to interact with JavaScript objects retrieved or created via [method JavaScript.get_interface], [method JavaScript.create_object], or [method JavaScript.create_callback].
+		Example:
+		[codeblock]
+		extends Node
+
+		var _my_js_callback = JavaScript.create_callback(self, "myCallback") # This reference must be kept
+		var console = JavaScript.get_interface("console")
+
+		func _init():
+		    var buf = JavaScript.create_object("ArrayBuffer", 10) # new ArrayBuffer(10)
+		    print(buf) # prints [JavaScriptObject:OBJECT_ID]
+		    var uint8arr = JavaScript.create_object("Uint8Array", buf) # new Uint8Array(buf)
+		    uint8arr[1] = 255
+		    prints(uint8arr[1], uint8arr.byteLength) # prints 255 10
+		    console.log(uint8arr) # prints in browser console "Uint8Array(10) [ 0, 255, 0, 0, 0, 0, 0, 0, 0, 0 ]"
+
+		    # Equivalent of JavaScript: Array.from(uint8arr).forEach(myCallback)
+		    JavaScript.get_interface("Array").from(uint8arr).forEach(_my_js_callback)
+
+		func myCallback(args):
+		    # Will be called with the parameters passed to the "forEach" callback
+		    # [0, 0, [JavaScriptObject:1173]]
+		    # [255, 1, [JavaScriptObject:1173]]
+		    # ...
+		    # [0, 9, [JavaScriptObject:1180]]
+		    print(args)
+		[/codeblock]
+		Note: Only available in the "HTML5" platform.
+	</description>
+	<tutorials>
+	</tutorials>
+	<methods>
+	</methods>
+	<constants>
+	</constants>
+</class>