Tasks completed to update Storybook and Typescript versions. Please see phase-1-summary.md for details

packages/noodl-editor/@include-types/global.d.ts

@@ -1,31 +1,11 @@
-declare module '*.svg' {
-  import React = require('react');
-  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
-  const src: string;
-  export default src;
-}
+/**
+ * Global type declarations for noodl-editor
+ * 
+ * This file imports shared global types from @noodl/noodl-types.
+ * Package-specific types can be added below the reference directive.
+ * 
+ * @see packages/noodl-types/src/global.d.ts for shared types
+ */
 
-declare module '*.css' {
-  const styles: { readonly [key: string]: string };
-  export default styles;
-}
-
-declare module '*.scss' {
-  const styles: { readonly [key: string]: string };
-  export default styles;
-}
-
-type TSFixme = any;
-
-type NodeColor = 'data' | 'visual' | 'logic' | 'component' | 'javascript';
-
-interface Window {
-  noodlEditorPreviewRoute: string;
-}
-
-type Prettify<T> = {
-  [K in keyof T]: T[K];
-  // eslint-disable-next-line @typescript-eslint/ban-types
-} & {};
-
-type PartialWithRequired<T, K extends keyof T> = Pick<T, K> & Partial<T>;
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../noodl-types/src/global.d.ts" />

packages/noodl-editor/tsconfig.json

@@ -1,8 +1,10 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "skipLibCheck": true,
     "moduleResolution": "node",
     "module": "es2020",
+    "baseUrl": ".",
     "paths": {
       "@noodl-core-ui/*": ["../noodl-core-ui/src/*"],
       "@noodl-hooks/*": ["./src/editor/src/hooks/*"],

packages/noodl-editor/webpackconfigs/webpack.renderer.dev.js

@@ -4,9 +4,14 @@ const merge = require('webpack-merge').default;
 const shared = require('./shared/webpack.renderer.shared.js');
 const getExternalModules = require('./helpers/get-externals-modules');
 
+// Track if electron has been started to prevent multiple launches
+let electronStarted = false;
+
 module.exports = merge(shared, {
   mode: 'development',
-  devtool: 'eval-source-map',
+  // Use faster sourcemap for development - 'eval-cheap-module-source-map' is much faster
+  // than 'eval-source-map' while still providing decent debugging experience
+  devtool: 'eval-cheap-module-source-map',
   externals: getExternalModules({
     production: false
   }),
@@ -27,20 +32,34 @@ module.exports = merge(shared, {
     host: 'localhost', // Default: '0.0.0.0' that is causing issues on some OS / net interfaces
     port: 8080,
     onListening(devServer) {
-      //start electron when the dev server has started
-      child_process
-        .spawn('npm', ['run', 'start:_dev'], {
-          shell: true,
-          env: process.env,
-          stdio: 'inherit'
-        })
-        .on('close', (code) => {
-          devServer.stop();
-        })
-        .on('error', (spawnError) => {
-          console.error(spawnError);
-          devServer.stop();
-        });
+      // Wait for webpack compilation to finish before starting Electron
+      // This prevents the black screen issue where Electron opens before
+      // the bundle is ready to be served
+      devServer.compiler.hooks.done.tap('StartElectron', (stats) => {
+        // Only start once, and only if compilation succeeded
+        if (electronStarted) return;
+        if (stats.hasErrors()) {
+          console.error('Webpack compilation has errors - not starting Electron');
+          return;
+        }
+        
+        electronStarted = true;
+        console.log('\n✓ Webpack compilation complete - launching Electron...\n');
+        
+        child_process
+          .spawn('npm', ['run', 'start:_dev'], {
+            shell: true,
+            env: process.env,
+            stdio: 'inherit'
+          })
+          .on('close', (code) => {
+            devServer.stop();
+          })
+          .on('error', (spawnError) => {
+            console.error(spawnError);
+            devServer.stop();
+          });
+      });
     }
   }
 });