[PYTHON] Load multiple JavaScript files with PyWebView

I want to use multiple JavaScripts in PyWebView

In PyWebView, when you want to load JavaScript in a window, use the method window # evaluate_js ().

When this method is called multiple times, each JavaScript is recognized as a separate file and processed. Therefore, if you create the following method, you can create a PyWebView GUI with a feeling closer to HTML5 application development. I will.

def webview_load_elems(window):
  """
Load the following CSS and JS libraries into any window specified by the argument
・ Bootstrap.css
・ Bootstrap.js/popper.js/jquery.js
・ Index for original development.css/index.js
  """
  css = ["index.css"]
  js = ["index.js", "classes.js"]
  nm = "node_modules"
  dist = nm / "bootstrap-honoka" / "dist"
  distjs = dist / "js"

  css.insert(0, dist / "css" / "bootstrap.css")
  js.insert(0, nm / "popper.js" / "dist" / "popper.js")
  js.insert(0, distjs / "bootstrap.js")
  js.insert(0, nm / "jquery" / "dist" / "jquery.js")

  for file in css:
    with open(file, mode="r", encoding="utf-8") as f:
      window.load_css(f.read())
  for file in js:
    with open(file, mode="r", encoding="utf-8") as f:
      window.evaluate_js(f.read())

index.js

let test = TestClass()
/* ... */

classes.js

class TestClass {
  /* ... */
}

Problem with the above code

If you load the file as above, you will not be able to use the classes declared in classes.js in index.js. I get a ReferenceError.

In recent JavaScript, there are ʻexport statements etc., but the file handled on PyWebView is treated as a local file (by default), the file is not read in the first place, and the JavaScript code is directly browsered. You can't use the ʻexport statement because it's loaded into the engine

Add as a property of a global variable

In such cases, there is a hint at the beginning of files such as jQuery.

jquery.js

( function( global, factory ) {

	"use strict";

	if ( typeof module === "object" && typeof module.exports === "object" ) {

		// For CommonJS and CommonJS-like environments where a proper `window`
		// is present, execute the factory and get jQuery.
		// For environments that do not have a `window` with a `document`
		// (such as Node.js), expose a factory as module.exports.
		// This accentuates the need for the creation of a real `window`.
		// e.g. var jQuery = require("jquery")(window);
		// See ticket #14549 for more info.
		module.exports = global.document ?
			factory( global, true ) :
			function( w ) {
				if ( !w.document ) {
					throw new Error( "jQuery requires a window with a document" );
				}
				return factory( w );
			};
	} else {
		factory( global );
	}

// Pass this if window is not defined yet
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {

jQuery makes it possible to call jQuery from other JavaScript files by registering itself in global variables and export areas for each JavaScript execution environment.

In the PyWebView execution environment, the global variable that can be used is window. Therefore, it is OK if you register the declared class as a property of window.

classes.js

class TestClass {
  /* ... */
}

window.TestClass = TestClass;

Now you can use the classes.js class from ʻindex.js`.

Bonus: I want to see the JavaScript file from the developer console of the PyWebView window

If you set gui of thewebview.start ()method to a browser engine that can use the developer console (cef etc.) and debug to True, you can open the developer console from the right-click menu of the browser window. Will be.

If you want to see the JavaScript file loaded from this developer console. The JavaScript code you load is not in file format, so you can't see its contents from the Source tab.

In such a case, it is good to put console.log ("filename ") etc. in the first line of the JavaScript file.

You can browse the loaded JavaScript code by clicking the "VMnn: Number of Lines" link on the right side of the screen.