update to latest packages

.gitignore

@@ -1,3 +1,5 @@
-/node_modules
-package-lock.json
-/dist
+node_modules
+prod_dist
+dev_dist
+prod-dist
+dev-dist

.vscode/launch.json

@@ -5,28 +5,22 @@
     "version": "0.2.0",
     "configurations": [        
         {
-            "type": "node",
+            "command": "npm install",
+            "name": "1. Install NPM packages (first time only)",
             "request": "launch",
-            "name": "1. Run NPM install (first time run)",
-            "program": "${workspaceFolder}/BuildScripts/npm-install.js"
+            "type": "node-terminal"
         },
         {
-            "type": "node",
+            "command": "npm run server",
+            "name": "2. Start server (w. hot)",
             "request": "launch",
-            "name": "2. Start webpack server (w. hot)",
-            "program": "${workspaceFolder}/BuildScripts/webpack-server.js"
+            "type": "node-terminal"
         },
         {
-            "type": "node",
+            "command": "npm run production",
+            "name": "3. Build for production",
             "request": "launch",
-            "name": "3. Re-open localhost (if webpack server already running)",
-            "program": "${workspaceFolder}/BuildScripts/open-localhost.js"
+            "type": "node-terminal"
         },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "4. Publish",
-            "program": "${workspaceFolder}/BuildScripts/publish.js"
-        }
     ]
 }

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "typescript.tsdk": "node_modules\\typescript\\lib"
-}

BuildScripts/npm-install.js

@@ -1,13 +0,0 @@
-var exec = require('child_process').exec;
-
-console.log("Installing NPM packages");
-
-exec('npm install',
-    function (error, stdout, stderr) {
-        if (error !== null) {
-            console.error("ERROR installing NPM packages", error);
-        }
-        else {
-            console.error("Successfully installed NPM packages", stdout, stderr);
-        }
-    });

BuildScripts/open-localhost.js

@@ -1,3 +0,0 @@
-var open = require("open");
-  
-open("http://localhost:8080");

BuildScripts/publish.js

@@ -1,20 +0,0 @@
-var npm = require("npm");
-var open = require("open");
-
-npm.load(function(err) {
-npm.commands.run(['webpack-production'], function(er, data) {
-    // log errors or data
-    if (er){
-      console.error(er);
-    }
-
-    if (data) {
-      console.log("Publish done!");
-    }
-  });
-
-  npm.on('log', function(message) {
-    // log installation progress
-    console.log(message);
-  });
-});

BuildScripts/webpack-server.js

@@ -1,17 +0,0 @@
-var npm = require("npm");
-var open = require("open");
-
-npm.load(function(err) {
-npm.commands.run(['webpack-dev-server'], function(er, data) {
-    // log errors or data
-    if (er){
-      console.error(er);
-    }
-  });
-
-  open("http://localhost:8080");
-  npm.on('log', function(message) {
-    // log installation progress
-    console.log(message);
-  });
-});

app/app.html

@@ -0,0 +1,6 @@
+<app-root>
+    <div class="flex-horiz">
+        <div>col1</div>
+        <div>col2</div>
+    </div>
+</app-root>

app/app.less

@@ -0,0 +1,34 @@
+html, body, body > * {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.flex-horiz {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+}
+
+.flex-vert {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+
+.flex-horiz > *, .flex-vert > * {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 1px;
+}
+
+.flex-horiz .flex-shrink, .flex-vert .flex-shrink {
+    flex-grow: 0;
+    flex-shrink: 1;
+}
+
+.flex-horiz .flex-grow, .flex-vert .flex-grow {
+    flex-grow: 1;
+    flex-shrink: 0;
+}

app/boot.html

@@ -1,3 +0,0 @@
-<div>
-    my app-root html here!
-</div>

app/boot.less

@@ -1,8 +0,0 @@
-html, body {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    background: rgb(179, 179, 179);
-    margin: 0;
-    overflow: hidden;
-}

app/boot.ts

@@ -1,6 +1,10 @@
-require("./boot.less");
-var bootHtml = require("./boot.html");
-var appEle = document.createElement("app-root");
+import './app.less';
+import bootHtml from './app.html';
+import { AppRoot } from './elements/app-root/app-root';
+
+window.customElements.define('app-root', AppRoot);
+
+var appEle = document.createElement("div");
 appEle.innerHTML = bootHtml;
 
 document.body.appendChild(appEle);

app/elements/_base.ts

@@ -0,0 +1,18 @@
+export class BaseElement extends HTMLElement {
+    private _hasConnectedCallback: boolean = false;
+    connectedCallback() {
+
+        if (!this._hasConnectedCallback) {
+            this.onInit();
+        }
+        else {
+            this.onUpdate();
+        }
+
+        this._hasConnectedCallback = true;
+
+    }
+
+    onInit() { }
+    onUpdate() { }
+}

app/elements/app-root/app-root.less

@@ -0,0 +1,5 @@
+app-root {
+    width: 100%;
+    height: 100%;
+    display: block;
+}

app/elements/app-root/app-root.ts

@@ -0,0 +1,12 @@
+import { BaseElement } from "../_base";
+import './app-root.less';
+
+export class AppRoot extends BaseElement {
+    onInit(): void {
+        console.log("APP ROOT INIT");
+    }
+
+    onUpdate(): void {
+        console.log("APP ROOT UPDATE");
+    }
+}

package.json

@@ -1,33 +1,44 @@
 {
   "version": "0.0.1",
-  "name": "new-webpack",
-  "description": "new-webpack",
+  "name": "name",
+  "description": "desc",
   "license": "0BSD",
   "repository": {},
   "scripts": {
-    "webpack-error-details": "webpack --display-error-details",
-    "webpack-development": "webpack --display-error-details --mode development",
-    "webpack-production": "webpack --display-error-details --mode production",
-    "webpack-dev-server": "webpack-dev-server"
+    "webpack": "webpack --config webpack.dev.js",
+    "dev": "webpack --config webpack.dev.js",
+    "server": "webpack-dev-server --port 8020 --open --config webpack.dev.js",
+    "server-prod": "webpack-dev-server --port 8020 --open --config webpack.prod.js",
+    "production": "webpack --config webpack.prod.js"
   },
+  "dependencies": {},
   "devDependencies": {
-    "@types/webpack-env": "1.13.6",
-    "copy-webpack-plugin": "4.5.1",
-    "css-loader": "0.28.11",
-    "file-loader": "1.1.11",
-    "gulp": "3.9.1",
-    "html-loader": "0.5.5",
-    "less": "3.0.2",
-    "less-loader": "4.1.0",
-    "npm": "6.0.0",
-    "open": "0.0.5",
-    "replace-in-file-webpack-plugin": "1.0.5",
-    "style-loader": "0.21.0",
-    "ts-loader": "4.2.0",
-    "typescript": "2.8.3",
-    "webpack": "4.6.0",
-    "webpack-cli": "2.0.15",
-    "webpack-dev-server": "3.1.3",
-    "webpack-merge": "4.1.2"
+    "@types/offscreencanvas": "2019.7.3",
+    "@webcomponents/custom-elements": "1.6.0",
+    "@babel/core": "7.26.0",
+    "babel-loader": "9.2.1",
+    "babel-plugin-transform-custom-element-classes": "0.1.0",
+    "babel-preset-env": "1.7.0",
+    "file-loader": "6.2.0",
+    "gulp": "5.0.0",
+    "less": "4.2.0",
+    "npm": "10.9.0",
+    "open": "10.1.0",
+    "path": "0.12.7",
+    "webpack": "5.95.0",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "5.1.0",
+    "webpack-merge": "6.0.1",
+    "typescript": "5.6.3",
+    "node-gameloop": "0.1.4",
+    
+    "replace-in-file-webpack-plugin": "1.0.6",
+    
+    "copy-webpack-plugin": "12.0.2",
+    "html-loader": "5.1.0",
+    "css-loader": "7.1.2",
+    "less-loader": "12.2.0",
+    "style-loader": "4.0.0",
+    "ts-loader": "9.5.1"
   }
 }

static/index.html

@@ -8,11 +8,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <title>Title</title>
 
-    <link rel="apple-touch-icon" href="logo.png">
-    <link rel="apple-touch-startup-image" href='splash.png'>
-
     <link rel="manifest" href="manifest.json?v=1">
-    
     <base href="/" />
 </head>
 

tsconfig.json

@@ -2,15 +2,26 @@
   "compilerOptions": {    
     "target": "es6",
     "sourceMap": true,
+		"moduleResolution": "node",
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "skipDefaultLibCheck": true,
     "skipLibCheck": true,
     "strict": true,
     "lib": [ "es6", "dom" ],
-    "types": [ "webpack-env" ],
+    "types": [ ],
+		"baseUrl": "./node_modules",
     "allowJs": true
   },
-  "exclude": [ "bin", "node_modules" ],
+  "exclude": [ 
+    "dev-dist", 
+    "prod-dist", 
+    "bin", 
+    "BuildScripts", 
+    "node_modules", 
+    "webpack.common.js", 
+    "webpack.dev.js", 
+    "webpack.prod.js"
+  ],
   "atom": { "rewriteTsconfig": false }
 }

typings.d.ts

@@ -0,0 +1,7 @@
+declare module '*.html' {
+    const content: string;
+    export default content;
+}
+
+declare module '*.png';
+declare module '*.jpg';

webpack.common.js

@@ -0,0 +1,33 @@
+const path = require('path');
+module.exports = {
+    entry: {
+        'main': path.resolve(__dirname, 'App', 'boot.ts')
+    },
+    resolve: {
+        extensions: [".ts", ".js", ".json"]
+    },
+    module: {
+        rules: [
+            {
+                //ts to js
+                test: /\.ts$/,
+                use: 'ts-loader'
+            },
+            {
+                //html to js
+                test: /\.html$/,
+                use: 'html-loader'
+            },
+            {
+                //css to js to inline style append
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader']
+            },
+            {
+                //less to css to js to inline style append
+                test: /\.less$/,
+                use: ['style-loader', 'css-loader', 'less-loader']
+            }
+        ]
+    }
+};

webpack.config.js

@@ -1,105 +0,0 @@
-const webpack = require('webpack');
-const merge = require('webpack-merge');
-const path = require('path');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');
-
-
-module.exports = (env, argv) => {
-
-    var isDevServer = argv.mode === undefined;
-
-    if (isDevServer && __dirname.indexOf(" ") !== -1) {
-        throw new Error("Space in __dirname not allowed: " + __dirname);
-    }
-
-    const sharedSettings = {
-        entry: {
-            'main': path.resolve(__dirname, 'App', 'boot.ts')
-        },
-        resolve: {
-            extensions: [".ts", ".js", ".json"]
-        },
-        module: {
-            rules: [
-                {
-                    //ts to js
-                    test: /\.ts$/,
-                    use: 'ts-loader'
-                },
-                {
-                    //html to js
-                    test: /\.html$/,
-                    use: 'html-loader'
-                },
-                {
-                    //css to js to inline style append
-                    test: /\.css$/,
-                    use: ['style-loader', 'css-loader']
-                },
-                {
-                    //less to css to js to inline style append
-                    test: /\.less$/,
-                    use: ['style-loader', 'css-loader', 'less-loader']
-                }
-            ]
-        }        
-    }
-
-    const developmentSettings = {
-        mode: 'development',
-        output: {
-            path: path.resolve(__dirname, "dist"),
-            publicPath: "/",
-            filename: 'main.js'
-        },
-        devServer: {
-            contentBase: './dist',
-            historyApiFallback: true
-        },
-        plugins: [
-            new CopyWebpackPlugin([
-                {
-                    from: path.resolve(__dirname, '*.html'),
-                    to: path.resolve(__dirname, 'dist', '[name].[ext]')
-                }
-            ])            
-        ]
-    };
-
-    const productionSettings = {
-        mode: "production",
-        plugins: [
-            new CopyWebpackPlugin([
-                {
-                    from: path.resolve(__dirname, '*.html'),
-                    to: path.resolve(__dirname, 'dist', '[name].[ext]')
-                }
-            ]),
-            new ReplaceInFileWebpackPlugin(
-                [
-                    {
-                        dir: path.join(__dirname, 'dist'),
-                        test: /\.html$/,
-                        rules: [
-                            {
-                                search: /((\?|\&)v\=)(.+?)(?=\"|\'|\&)/ig,
-                                replace: (match) => {
-                                    return match.toString().substr(0, 3) +
-                                        +new Date();
-                                }
-                            }
-                        ]
-                    }
-                ]
-            )         
-        ]
-    }
-    //to merge sharedSettings
-    var dev = Object.assign({}, sharedSettings, developmentSettings);
-    var prod = Object.assign({}, sharedSettings, productionSettings);
-
-
-    //return dev or prod to webpack depending on --mode config (webpack-dev-server: argv.mode = undefined)
-    return argv.mode === "development" || argv.mode === undefined ? dev : prod;
-};

webpack.dev.js

@@ -0,0 +1,33 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const copyPlugin = require('copy-webpack-plugin');
+const common = require('./webpack.common.js');
+
+const devFolderName = "dev-dist";
+
+module.exports = merge(common, {
+    mode: 'development',
+    output: {
+        path: path.resolve(__dirname, devFolderName),
+        publicPath: "/",
+        filename: 'main.js'
+    },
+    devServer: {
+        static: {
+            directory: path.join(__dirname, devFolderName),
+        },
+        historyApiFallback: true
+    },
+    plugins: [
+        new copyPlugin(
+            {
+                patterns: [
+                    {
+                        from: path.resolve(__dirname, 'static'),
+                        to: path.resolve(__dirname, devFolderName, '[name][ext]')
+                    }
+                ]
+            }
+        )
+    ]
+});

webpack.prod.js

@@ -0,0 +1,48 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const path = require('path');
+const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const prodFolderName = "prod-dist";
+
+const replaceVersionInHtmlOption = {
+    //set ?v= with new date in html files for production
+    dir: path.join(__dirname, prodFolderName),
+    test: /\.html$/,
+    rules: [
+        {
+            search: /((\?|\&)v\=)(.+?)(?=\"|\'|\&)/ig,
+            replace: (match) => {
+                return match.toString().substr(0, 3) +
+                    +new Date();
+            }
+        }
+    ]
+};
+
+module.exports = merge(common, {
+    mode: "production",
+    output: {
+        path: path.resolve(__dirname, prodFolderName),
+        publicPath: "/",
+        filename: 'main.js'
+    },
+    plugins: [
+        new CopyWebpackPlugin(
+            {
+                patterns: [
+                    {
+                        from: path.resolve(__dirname, 'static'),
+                        to: path.resolve(__dirname, prodFolderName, '[name][ext]')
+                    }
+                ]
+            }
+        ),
+        new ReplaceInFileWebpackPlugin(
+            [
+                replaceVersionInHtmlOption
+            ]
+        )
+    ]
+});