Don't create custom elements in main and fix various small issues on tests (#747)

* Create custom elements when the runtime finishes loading

* Remove xfails and fix repl integration test

* Fix commented ignore

* Address Antonio's comments

* Fix bad rebase

* Make ure to wait for repl to be in attached state before asserting content

* Move createCustomeElement up so it runs before we close the loader, xfail flaky d3 test

* Fix xfail

pyscriptjs/src/components/elements.ts

@@ -0,0 +1,35 @@
+import { PyRepl } from './pyrepl';
+import { PyBox } from './pybox';
+import { PyButton } from './pybutton';
+import { PyTitle } from './pytitle';
+import { PyInputBox } from './pyinputbox';
+import { PyWidget } from './base';
+
+/*
+These were taken from main.js because some of our components call
+runAfterRuntimeInitialized immediately when we are creating the custom
+element, this was causing tests to fail since runAfterRuntimeInitialized
+expects the runtime to have been loaded before being called.
+
+This function is now called from within the `runtime.initialize`. Once
+the runtime finished initializing, then we will create the custom elements
+so they are rendered in the page and we will always have a runtime available.
+
+Ideally, this would live under utils.js, but importing all the components in
+the utils.js file was causing jest to fail with weird errors such as:
+"ReferenceError: Cannot access 'BaseEvalElement' before initialization" coming
+from the PyScript class.
+
+*/
+function createCustomElements() {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    const xPyRepl = customElements.define('py-repl', PyRepl);
+    const xPyBox = customElements.define('py-box', PyBox);
+    const xPyTitle = customElements.define('py-title', PyTitle);
+    const xPyWidget = customElements.define('py-register-widget', PyWidget);
+    const xPyInputBox = customElements.define('py-inputbox', PyInputBox);
+    const xPyButton = customElements.define('py-button', PyButton);
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+}
+
+export { createCustomElements };

pyscriptjs/src/main.ts

@@ -1,32 +1,20 @@
 import './styles/pyscript_base.css';
 
 import { PyScript } from './components/pyscript';
-import { PyRepl } from './components/pyrepl';
 import { PyEnv } from './components/pyenv';
-import { PyBox } from './components/pybox';
-import { PyButton } from './components/pybutton';
-import { PyTitle } from './components/pytitle';
-import { PyInputBox } from './components/pyinputbox';
-import { PyWidget } from './components/base';
 import { PyLoader } from './components/pyloader';
-import { globalLoader } from './stores';
 import { PyConfig } from './components/pyconfig';
 import { getLogger } from './logger';
+import { globalLoader } from './stores';
 
 const logger = getLogger('pyscript/main');
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 const xPyScript = customElements.define('py-script', PyScript);
-const xPyRepl = customElements.define('py-repl', PyRepl);
-const xPyEnv = customElements.define('py-env', PyEnv);
-const xPyBox = customElements.define('py-box', PyBox);
-const xPyButton = customElements.define('py-button', PyButton);
-const xPyTitle = customElements.define('py-title', PyTitle);
-const xPyInputBox = customElements.define('py-inputbox', PyInputBox);
-const xPyWidget = customElements.define('py-register-widget', PyWidget);
 const xPyLoader = customElements.define('py-loader', PyLoader);
 const xPyConfig = customElements.define('py-config', PyConfig);
-/* eslint-enable @typescript-eslint/no-unused-vars */
+const xPyEnv = customElements.define('py-env', PyEnv);
+/* eslint-disable @typescript-eslint/no-unused-vars */
 
 // As first thing, loop for application configs
 logger.info('checking for py-confing');

pyscriptjs/src/runtime.ts

@@ -8,8 +8,9 @@ import {
     postInitializers,
     Initializer,
     scriptsQueue,
-    appConfig
-} from './stores'
+    appConfig,
+} from './stores';
+import { createCustomElements } from './components/elements';
 import type { PyScript } from './components/pyscript';
 import { getLogger } from './logger';
 
@@ -167,6 +168,9 @@ export abstract class Runtime extends Object {
         // now we call all post initializers AFTER we actually executed all page scripts
         loader?.log('Running post initializers...');
 
+        // Finally create the custom elements for pyscript such as pybutton
+        createCustomElements();
+
         if (appConfig_ && appConfig_.autoclose_loader) {
             loader?.close();
         }