Initial commit

Co-Authored-By: Eric Tuvesson <eric.tuvesson@gmail.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: Anders Larsson <64838990+anders-topp@users.noreply.github.com>
Co-Authored-By: Johan  <4934465+joolsus@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: victoratndl <99176179+victoratndl@users.noreply.github.com>

packages/noodl-editor/webpackconfigs/helpers/get-externals-modules.js

@@ -0,0 +1,36 @@
+const fs = require('fs');
+const packageJson = require('../../package');
+
+module.exports = function ({ production }) {
+  //some modules are not packaged in the production build to reduce app size
+  //make sure webpack bundles those and don't exclude them
+  //skip this in dev mode since it slows down the bundling
+  function getExcludedNodeModules() {
+    return packageJson.build.files
+      .map((pattern) => pattern.match(/\!node_modules\/(.+)/))
+      .filter((match) => match !== null)
+      .map((match) => match[1]);
+  }
+
+  // don't bundle external modules from node_modules
+  let externals = [];
+
+  if (fs.existsSync('node_modules')) {
+    externals = [...externals, ...fs.readdirSync('node_modules')];
+  }
+
+  // When building normally in a monorepo
+  if (fs.existsSync('../../node_modules')) {
+    externals = [...externals, ...fs.readdirSync('../../node_modules')];
+  }
+
+  if (production) {
+    // ..except these
+    getExcludedNodeModules().forEach((m) => {
+      const i = externals.indexOf(m);
+      if (i !== -1) externals.splice(i, 1);
+    });
+  }
+
+  return externals;
+};

packages/noodl-editor/webpackconfigs/shared/webpack.renderer.core.js

@@ -0,0 +1,109 @@
+module.exports = {
+  target: 'electron-renderer',
+  module: {
+    rules: [
+      //run babel on .jsx to transform the jsx
+      //not doing it on all .js files speeds up the bundling by a lot
+      {
+        test: /\.(jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            babelrc: false,
+            cacheDirectory: true,
+            presets: ['@babel/preset-react']
+          }
+        }
+      },
+      {
+        test: /\.ts(x?)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'ts-loader'
+          }
+        ]
+      },
+      {
+        // Setup to match what we have in Storybook
+        test: /\.svg$/,
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              prettier: false,
+              svgo: false,
+              svgoConfig: {
+                plugins: [
+                  {
+                    removeViewBox: false
+                  }
+                ]
+              },
+              titleProp: true,
+              ref: true
+            }
+          },
+          {
+            loader: 'file-loader'
+          }
+        ]
+      },
+      //requiring html-files will return a string of the html
+      {
+        test: /\.(html)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'html-loader',
+          options: {
+            sources: false,
+            esModule: false
+          }
+        }
+      },
+      {
+        test: /(\.module)?.(sass|scss)$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              url: false,
+              modules: {
+                localIdentName: '[name]__[local]--[hash:base64:5]'
+              },
+              sourceMap: true
+            }
+          },
+          'sass-loader'
+        ]
+      },
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              url: false
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(txt)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'raw-loader',
+          options: {
+            esModule: false
+          }
+        }
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx', '.ttf']
+  }
+};

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

@@ -0,0 +1,24 @@
+const merge = require('webpack-merge').default;
+const shared = require('./webpack.shared.js');
+const sharedCore = require('./webpack.renderer.core.js');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+
+module.exports = merge(
+  sharedCore,
+  merge(shared, {
+    entry: {
+      './src/editor/index': './src/editor/index.ts',
+      './src/frames/viewer-frame/index': './src/frames/viewer-frame/index.js',
+    },
+    output: {
+      filename: '[name].bundle.js',
+      // https://github.com/webpack/webpack/issues/1114
+      libraryTarget: 'commonjs2'
+    },
+    plugins: [
+      new MonacoWebpackPlugin({
+        languages: ['typescript', 'javascript', 'css']
+      })
+    ]
+  })
+);

packages/noodl-editor/webpackconfigs/shared/webpack.shared.js

@@ -0,0 +1,40 @@
+const path = require('path');
+
+// NOTE: packagesDir will be resolved to packages by the build system too
+const editorDir = path.join(__dirname, '../../');
+const packagesDir = path.join(__dirname, '../../../');
+
+console.log('--- Webpack Configuration');
+console.log('> Editor path: ', editorDir);
+console.log('> Packages path: ', packagesDir);
+console.log('---');
+
+const alias = {
+  '@scss-placeholders': path.join(editorDir, 'src/editor/src/styles/placeholders'),
+  '@scss-mixins': path.join(editorDir, 'src/editor/src/styles/mixins'),
+  '@scss-variables': path.join(editorDir, 'src/editor/src/styles/variables'),
+  '@noodl-core-ui': path.join(packagesDir, 'noodl-core-ui/src'),
+  '@noodl-hooks': path.join(editorDir, 'src/editor/src/hooks'),
+  '@noodl-utils': path.join(editorDir, 'src/editor/src/utils'),
+  '@noodl-models': path.join(editorDir, 'src/editor/src/models'),
+  '@noodl-constants': path.join(editorDir, 'src/editor/src/constants'),
+  '@noodl-contexts': path.join(editorDir, 'src/editor/src/contexts'),
+  '@noodl-types': path.join(editorDir, 'src/editor/src/types'),
+  '@noodl-views': path.join(editorDir, 'src/editor/src/views'),
+  '@noodl-store': path.join(editorDir, 'src/editor/src/store')
+};
+
+console.log('> alias:');
+console.log(JSON.stringify(alias, null, 2));
+console.log('---');
+
+module.exports = {
+  output: {
+    // https://github.com/webpack/webpack/issues/1114
+    libraryTarget: 'commonjs2'
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx', '.ttf'],
+    alias
+  }
+};

packages/noodl-editor/webpackconfigs/webpack.main.production.js

@@ -0,0 +1,21 @@
+const path = require('path');
+const merge = require('webpack-merge').default;
+const shared = require('./shared/webpack.shared.js');
+const getExternalModules = require('./helpers/get-externals-modules');
+
+module.exports = merge(shared, {
+  mode: 'production',
+  target: 'electron-main',
+  externals: getExternalModules({
+    production: true
+  }),
+  entry: {
+    './src/main/main': './src/main/main.js'
+  },
+  output: {
+    path: path.join(__dirname, '.././'),
+    filename: '[name].bundle.js',
+    // https://github.com/webpack/webpack/issues/1114
+    libraryTarget: 'commonjs2'
+  }
+});

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

@@ -0,0 +1,46 @@
+const webpack = require('webpack'); //this must be included for webpack to work
+const child_process = require('child_process');
+const merge = require('webpack-merge').default;
+const shared = require('./shared/webpack.renderer.shared.js');
+const getExternalModules = require('./helpers/get-externals-modules');
+
+module.exports = merge(shared, {
+  mode: 'development',
+  devtool: 'eval-source-map',
+  externals: getExternalModules({
+    production: false
+  }),
+  output: {
+    publicPath: `http://localhost:8080/`
+  },
+  devServer: {
+    client: {
+      logging: 'info',
+      // show error overlay in the electron windows
+      overlay: {
+        errors: true,
+        warnings: false,
+        runtimeErrors: false
+      }
+    },
+    hot: true,
+    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();
+        });
+    }
+  }
+});

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

@@ -0,0 +1,18 @@
+const merge = require('webpack-merge').default;
+const path = require('path');
+const shared = require('./shared/webpack.renderer.shared.js');
+const getExternalModules = require('./helpers/get-externals-modules');
+
+module.exports = merge(shared, {
+  mode: 'production',
+  optimization: {
+    minimize: false
+  },
+  devtool: 'source-map',
+  externals: getExternalModules({
+    production: true
+  }),
+  output: {
+    path: path.join(__dirname, '.././')
+  }
+});

packages/noodl-editor/webpackconfigs/webpack.test-ci.js

@@ -0,0 +1,6 @@
+const merge = require('webpack-merge').default;
+const shared = require('./webpack.test.js');
+
+module.exports = merge(shared, {
+  watch: false
+});

packages/noodl-editor/webpackconfigs/webpack.test.js

@@ -0,0 +1,43 @@
+const merge = require('webpack-merge').default;
+const path = require('path');
+const child_process = require('child_process');
+const shared = require('./shared/webpack.renderer.shared.js');
+const getExternalModules = require('./helpers/get-externals-modules');
+
+module.exports = merge(shared, {
+  entry: './tests/index.ts',
+  output: {
+    filename: 'index.bundle.js',
+    path: path.resolve(__dirname, '..', 'tests'),
+    // https://github.com/webpack/webpack/issues/1114
+    libraryTarget: 'commonjs2',
+    publicPath: `http://localhost:8081/`
+  },
+  target: 'electron-renderer',
+  mode: 'development',
+  devtool: 'eval-cheap-module-source-map',
+  externals: getExternalModules({
+    production: false
+  }),
+  devServer: {
+    host: 'localhost', // Default: '0.0.0.0' that is causing issues on some OS / net interfaces
+    port: 8081,
+    onListening(devServer) {
+      //start electron when the dev server has started
+      console.log('webpack dev server listening, starting electron with tests');
+      child_process
+        .spawn('npm', ['run', 'test:_start_electron'], {
+          shell: true,
+          env: process.env,
+          stdio: 'inherit'
+        })
+        .on('close', (code) => {
+          devServer.stop();
+        })
+        .on('error', (spawnError) => {
+          console.error(spawnError);
+          devServer.stop();
+        });
+    }
+  }
+});