Comprehensive update to MWDK 3.x

.github/workflows/release-build.yml

@@ -11,14 +11,14 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [18.13.0]
 
     steps:
     - name: Checkout code
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     - name: Test and build with node ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
 
@@ -31,5 +31,5 @@ jobs:
         repo_token: ${{ secrets.GITHUB_TOKEN }}
         file: build/_output/*
         tag: ${{ github.ref }}
-        overwrite: false
+        overwrite: true
         file_glob: true

.github/workflows/test.yml

@@ -6,14 +6,14 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.3.1, 12.x]
+        node-version: [18.13.0]
 
     steps:
     - name: Checkout code
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     - name: Run tests with Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm install -g yarn

package.json

@@ -5,20 +5,22 @@
   },
   "version": "1.2.0",
   "scripts": {
-    "start": "webpack-dev-server",
-    "build": "webpack -p",
-    "build-dev": "webpack",
+    "start": "mwdk-start",
+    "build": "mwdk-build-prod",
+    "build-dev": "mwdk-build-dev",
     "test": "echo 'tests not implemented'",
     "test-ci": "echo 'tests not implemented'"
   },
   "devDependencies": {
-    "materia-widget-development-kit": "2.5.2"
+    "materia-widget-development-kit": "~3.0.0",
+	"react":"^17.0.2",
+	"react-dom":"^17.0.2",
+	"@babel/core":"7.24.4",
+	"@babel/preset-react":"7.24.1"
   },
   "dependencies": {
-    "@babel/preset-react": "^7.16.0",
     "createjs": "1.0.0",
     "hammerjs": "1.0.5",
-    "modernizr-webpack-plugin": "^1.0.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

src/creator.html

@@ -16,7 +16,6 @@
 		<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-animate.min.js"></script>
 		<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-sanitize.min.js"></script>
 		<script src="assets/lib/hammer.min.js" data-embed="false"></script>
-		<script src="assets/lib/angular-hammer.min.js" data-embed="false"></script>
 
 		<!-- MAIN CREATOR SCRIPT -->
 		<script src="creator.js"></script>

src/install.yaml

@@ -74,7 +74,7 @@ score:
   #  CLIENT - means your widget will tell Materia what the widget score should be.
   #  SERVER-CLIENT - utilizes both methods.
   #score_type: SERVER
-  score_screen: scoreScreen.html
+  score_screen: scorescreen.html
 
 meta_data:
   # A list of features which will be presented in the widget catalog.

src/player.html

@@ -17,9 +17,7 @@
 		<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js" data-embed="false"></script>
 		<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-animate.min.js" data-embed="false"></script>
 		<script src="assets/lib/createjs.js"></script>
-		<script src="assets/lib/modernizr.js" data-embed="false"></script>
 		<script src="assets/lib/hammer.min.js" data-embed="false"></script>
-		<script src="assets/lib/angular-hammer.min.js" data-embed="false"></script>
 
 		<!-- MAIN PLAYER SCRIPT -->
 		<script src="player.js"></script>

src/scoreScreen.html

@@ -6,20 +6,20 @@
 
 		<!-- STYLESHEETS -->
 		<link href="//fonts.googleapis.com/css?family=Montserrat:400,700|Purple+Purse" rel="stylesheet" type="text/css">
-		<link rel="stylesheet" type="text/css" href="scoreScreen.css">
+		<link rel="stylesheet" type="text/css" href="scorescreen.css">
 
 		<!-- REQUIRED MATERIA JAVASCRIPT -->
 		<script src="materia.scorecore.js"></script>
 
 		<!-- YOUR PREREQUISITES -->
-		<script src="//cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.development.js"></script>
-		<script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.development.js"></script>
+		<script src="//cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
+		<script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>
 
 		<!-- MAIN PLAYER APP -->
 	</head>
 
 	<body>
 		<div id="root"></div>
-		<script src="scoreScreen.js"></script>
+		<script src="scorescreen.js"></script>
 	</body>
 </html>

src/scoreScreen.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from 'react'
+import ReactDOM from 'react-dom'
 
 let title = '';
 

webpack.config.js

@@ -1,7 +1,6 @@
 const fs = require('fs')
 const path = require('path')
 const widgetWebpack = require('materia-widget-development-kit/webpack-widget')
-const ModernizrWebpackPlugin = require('modernizr-webpack-plugin');
 const srcPath = path.join(__dirname, 'src') + path.sep
 const outputPath = path.join(__dirname, 'build') + path.sep
 
@@ -13,58 +12,39 @@ const customDoNothingToJs = rules.loaderDoNothingToJs
 customDoNothingToJs.test = /(?:player|creator)\.js$/
 
 const customReactLoader = {
-	test: /scoreScreen.*\.js$/i,
+	test: /scorescreen.*\.js$/i,
 	exclude: /node_modules/,
 	use: {
 		loader: 'babel-loader'
 	}
 }
 
 let customRules = [
-	customDoNothingToJs,
 	rules.loaderCompileCoffee,
 	rules.copyImages,
 	rules.loadHTMLAndReplaceMateriaScripts,
-	rules.loadAndPrefixCSS,
 	rules.loadAndPrefixSASS,
-	rules.loadAndCompileMarkdown,
 	customReactLoader
 ]
 
 const entries = {
-	'creator.js': [
-			path.join(srcPath, 'creator.coffee'),
+	'creator': [
+		path.join(srcPath, 'creator.html'),
+		path.join(srcPath, 'angular-hammer.js'),
+		path.join(srcPath, 'creator.coffee'),
+		path.join(srcPath, 'creator.scss'),
 	],
-	'player.js': [
-			path.join(srcPath, 'draw.coffee'),
-			path.join(srcPath, 'player.coffee')
+	'player': [
+		path.join(srcPath, 'player.html'),
+		path.join(srcPath, 'angular-hammer.js'),
+		path.join(srcPath, 'draw.coffee'),
+		path.join(srcPath, 'player.coffee'),
+		path.join(srcPath, 'player.scss')
 	],
-	'scoreScreen.js': [
-			path.join(srcPath, 'scoreScreen.js')
-	],
-	'assets/lib/draw.js': [
-			path.join(srcPath, 'draw.coffee')
-	],
-	'assets/lib/angular-hammer.min.js': [
-			path.join(srcPath, 'angular-hammer.js')
-	],
-	'creator.css': [
-			path.join(srcPath, 'creator.html'),
-			path.join(srcPath, 'creator.scss')
-	],
-	'player.css': [
-			path.join(srcPath, 'player.html'),
-			path.join(srcPath, 'player.scss')
-	],
-	'scoreScreen.css': [
-			path.join(srcPath, 'scoreScreen.html'),
-			path.join(srcPath, 'scoreScreen.scss')
-	],
-	'guides/player.temp.html': [
-			path.join(srcPath, '_guides', 'player.md')
-	],
-	'guides/creator.temp.html': [
-			path.join(srcPath, '_guides', 'creator.md')
+	'scorescreen': [
+		path.join(srcPath, 'scorescreen.html'),
+		path.join(srcPath, 'scorescreen.js'),
+		path.join(srcPath, 'scorescreen.scss')
 	]
 }
 
@@ -92,38 +72,9 @@ const options = {
 
 let buildConfig = widgetWebpack.getLegacyWidgetBuildConfig(options)
 
-const modernizrConfig = {
-	noChunk: true,
-	filename: 'assets/lib/modernizr.js',
-	'options':[
-		'domPrefixes',
-		'prefixes',
-		'setClasses',
-		"html5shiv",
-		"testAllProps",
-		"testProp",
-		"testStyles"
-	],
-	'feature-detects': [
-		'css/borderradius',
-		'css/animations',
-		'css/transforms',
-		'css/transforms3d',
-		'css/transitions',
-		'css/fontface',
-		'css/generatedcontent',
-		'input',
-		'css/opacity',
-		'css/rgba'
-	],
-	minify: {
-		output: {
-			comments: true,
-			beautify: false
-		}
-	}
+buildConfig.externals = {
+	"react": "React",
+	"react-dom": "ReactDOM"
 }
 
-buildConfig.plugins.unshift(new ModernizrWebpackPlugin(modernizrConfig))
-
 module.exports = buildConfig