update deps + eslint + element as second arg on mount

.eslintignore

@@ -0,0 +1,4 @@
+.eslintrc.js
+babel.config.js
+webpack.config.js
+dist/

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended'
+  ],
+  overrides: [
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  plugins: [
+    '@typescript-eslint'
+  ],
+  rules: {
+  }
+}

.npmrc

@@ -1 +1 @@
-package-lock=false
+package-lock=true

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-typescript'
+  ]
+}

dist/index.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

package.json

@@ -5,26 +5,32 @@
   "main": "dist/index.js",
   "scripts": {
     "start": "nodemon ./stubs/server.js",
-    "build": "webpack --mode development"
+    "build": "webpack --mode development",
+    "build:prod": "webpack --mode production"
   },
   "author": "innoavvlasov@gmail.com",
   "license": "ISC",
   "devDependencies": {
-    "@types/node": "13.7.0",
+    "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-typescript": "^7.21.0",
+    "@types/node": "16.18.12",
     "@types/systemjs": "6.1.0",
-    "awesome-typescript-loader": "5.2.1",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "babel-loader": "^9.1.2",
     "clean-webpack-plugin": "3.0.0",
     "es6-promise": "4.2.8",
+    "eslint": "^8.34.0",
     "exports-loader": "0.7.0",
     "fbjs": "1.0.0",
-    "file-loader": "5.0.2",
     "history": "4.10.1",
     "imports-loader": "0.8.0",
+    "nodemon": "^2.0.20",
     "rimraf": "3.0.1",
     "systemjs": "6.2.2",
-    "typescript": "3.7.5",
-    "webpack": "4.41.5",
-    "webpack-cli": "3.3.10",
-    "whatwg-fetch": "3.0.0"
+    "typescript": "^4.9.5",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
   }
 }

src/main.ts

@@ -1,3 +1,4 @@
+/* eslint-disable prefer-const */
 import "systemjs/dist/system";
 import "systemjs/dist/extras/amd";
 import "systemjs/dist/extras/named-register";
@@ -16,6 +17,13 @@ const systemJSImport = async (requestUrl: string) => {
   return { component, mount, unmount }
 }
 
+let mainMountElement = document.getElementById('app');
+
+if (!mainMountElement) {
+  mainMountElement = document.createElement('div');
+  mainMountElement.id = 'app';
+}
+
 export default async ({ apps: rawApps, navigations, config, features }) => {
   defineVirtualModule({ navigations, config, features })
 
@@ -38,7 +46,7 @@ export default async ({ apps: rawApps, navigations, config, features }) => {
   }
 
   let { component, mount, unmount } = await getApp()
-  mount(component.default);
+  mount(component.default, mainMountElement);
 
   history.listen(async (location) => {
     if (location.pathname !== prevPathname) {
@@ -46,7 +54,7 @@ export default async ({ apps: rawApps, navigations, config, features }) => {
       unmount()
 
       const nextApp = await getApp();
-      nextApp.mount(nextApp.component.default)
+      nextApp.mount(nextApp.component.default, mainMountElement)
       unmount = nextApp.unmount;
     }
   })

src/virtual-module.ts

@@ -12,7 +12,6 @@ const createVirtualModule = ({ config, navigations, features }) => ({
 
 export const defineVirtualModule = (params) => {
     const virtualModule = createVirtualModule(params)
-    // @ts-ignore
     System.set('root.scope', {
         ...virtualModule
     });

tsconfig.json

@@ -1,20 +1,23 @@
 {
-    "compilerOptions": {
-        "lib": [
-            "dom",
-            "es7"
-        ],
-        "outDir": "./dist/",
-        "sourceMap": true,
-        "esModuleInterop": true,
-        "downlevelIteration" :true,
-        "noImplicitAny": false,
-        "module": "commonjs",
-        "target": "es6",
-        "jsx": "react",
-        "typeRoots": ["node_modules/@types", "src/typings", "../../node_modules/@types"]
-    },
-    "exclude": [
-        "node_modules"
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "ESNext"
+    ],
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "downlevelIteration": true,
+    "noImplicitAny": false,
+    "module": "commonjs",
+    "target": "es6",
+    "typeRoots": [
+      "node_modules/@types",
+      "src/typings",
+      "../../node_modules/@types"
     ]
+  },
+  "exclude": [
+    "node_modules"
+  ]
 }

webpack.config.js

@@ -6,21 +6,20 @@ const outputDirectory = 'dist';
 const pkg = require('./package.json')
 
 module.exports = {
-  mode: "development",
   entry: {
-    index: "./src/main.ts"
+    index: './src/main.ts'
   },
   output: {
-    library: "fireapp",
+    library: 'fireapp',
     path: path.resolve(__dirname, outputDirectory),
-    libraryExport: "default",
+    libraryExport: 'default',
     publicPath: `/fireapp/${pkg.version}/`
   },
 
   plugins: [new CleanWebpackPlugin()],
 
   resolve: {
-    extensions: [".ts", ".js"]
+    extensions: ['.ts', '.js']
   },
 
   module: {
@@ -28,11 +27,7 @@ module.exports = {
       { parser: { system: false } },
       {
         test: /\.tsx?$/,
-        loader: "awesome-typescript-loader"
-      },
-      {
-        test: /\.(jpe?g|gif|png|svg|woff|ttf|eot|wav|mp3)$/,
-        loader: "file-loader"
+        loader: 'babel-loader'
       }
     ]
   }