### Added

* Upgraded entire front end build process to ColdBox Elixir v4
* Upgraded to Node 16 for all front end processes

### Fixed

* If the cbdebugger was embedded within an app already using Alpine, it will fail. Now it will leach on to the running Alpine app.

Author: lmajano

changelog.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ----
 
+## [3.4.0] => 2022-JUN-27
+
+### Added
+
+* Upgraded entire front end build process to ColdBox Elixir v4
+* Upgraded to Node 16 for all front end processes
+
+### Fixed
+
+* If the cbdebugger was embedded within an app already using Alpine, it will fail. Now it will leach on to the running Alpine app.
+
+----
+
 ## [3.3.2] => 2022-MAY-02
 
 ### Fixed

package-lock.json

@@ -1,30 +1,24 @@
 {
     "private": true,
     "devDependencies": {
+        "@babel/eslint-parser": "^7.18.2",
         "@babel/preset-env": "^7.16.11",
-        "autoprefixer": "^9.7.6",
-        "babel-eslint": "^10.0.1",
-        "coldbox-elixir": "^3.0.0",
-        "copy-webpack-plugin": "^6.4.1",
-        "css-loader": "^3.5.3",
+        "coldbox-elixir": "^4.0.0",
+        "copy-webpack-plugin": "^10.2.4",
         "eslint": "^7.21.0",
         "eslint-config-prettier": "^8.1.0",
-        "eslint-loader": "^4.0.2",
-        "eslint-plugin-vue": "^7.6.0",
-        "expose-loader": "^1.0.0",
-        "node-sass": "^4.14.1",
-        "postcss-loader": "^3.0.0",
-        "sass-loader": "^10.0.0",
-        "style-loader": "^1.2.1"
+        "eslint-webpack-plugin": "^3.2.0",
+        "sass": "^1.53.0",
+        "sass-loader": "^13.0.2",
+        "webpack-cli": "^4.10.0"
     },
     "dependencies": {
         "@alpinejs/morph": "^3.9.6",
         "alpinejs": "^3.9.6"
     },
     "scripts": {
-        "dev": "cross-env NODE_ENV=development webpack --env.NODE_ENV=development --hide-modules",
-        "dev:analyze": "cross-env NODE_ENV=development WEBPACK_ANALYZER=true webpack --env.NODE_ENV=development --hide-modules",
+        "dev": "webpack --node-env development",
         "watch": "npm run dev -- --watch",
-        "prod": "cross-env NODE_ENV=production webpack -p --env.NODE_ENV=production --hide-modules"
+        "prod": "webpack --node-env production"
     }
 }

package.json

@@ -1,31 +1,35 @@
-import Alpine from "alpinejs";
-// Load Plugins
-// Using common js due to NOT being on webpack5, the esm was giving us issues
-// Once we update to elixir 4, try it again
-import morph from "@alpinejs/morph/dist/module.cjs";
+import cbAlpine from "alpinejs";
+
 // Load Custom Components
 import ModulesPanel from "./components/ModulesPanel";
 import RequestTrackerPanel from "./components/RequestTrackerPanel";
 
-// For easy referencing
-window.Alpine = Alpine;
-
-// Register Plugins
-Alpine.plugin( morph );
-
-// Register Components
-Alpine.data( "modulesPanel", ModulesPanel );
-Alpine.data( "requestTrackerPanel", RequestTrackerPanel );
-
-// Startup your engines!!!!!!!!
-Alpine.start();
-
 // Init the coldbox debugger module
 window.coldboxDebugger = ( () => {
+
+	/**
+	 * Listen to alpine startup to load cbDebugger components
+	 */
+	document.addEventListener('alpine:init', () => {
+		// Register Components so our prefixed alpine version can read it.
+		window.Alpine.data( "cbdModulesPanel", ModulesPanel );
+		window.Alpine.data( "cbdRequestTrackerPanel", RequestTrackerPanel );
+		//console.log( "Registering cbDebugger Alpine Components!" );
+	});
+
 	/**
-	 * Listen to dom load and attach
+	 * Listen to DOM to see if we load our Alpine or use a version of Alpine
 	 */
 	window.addEventListener( "load", ( event ) => {
+		// Verify if alpine is already loaded in the window
+		if( !window.hasOwnProperty( "Alpine" ) ){
+			window.Alpine = cbAlpine;
+			// Startup your engines!!!!!!!!
+			window.Alpine.start();
+			//console.log( "Alpine not loaded, loading it!" );
+		} else {
+			console.log( "Alpine already loaded, cbDebugger will use it!" );
+		}
 		console.log( "ColdBox Debugger Loaded!" );
 	} );
 

resources/assets/js/cbdebugger.js

@@ -92,6 +92,10 @@ component {
 		log.info( "in the index event firing" );
 	}
 
+	function embedded( event, rc, prc ){
+		event.setView( "main/embedded" ).setLayout( "Embedded" );
+	}
+
 	any function noDebugger( event, rc, prc ){
 		hideDebugger();
 		event.renderData( data = "<h1>Hello</h1>" );

test-harness/handlers/Main.cfc

@@ -0,0 +1,10 @@
+<cfoutput>
+<html>
+	<head>
+		<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
+	</head>
+	<body>
+		#renderView()#
+	</body>
+</html>
+</cfoutput>

test-harness/layouts/Embedded.cfm

@@ -0,0 +1,6 @@
+<cfoutput>
+	<h1>Embedded</h1>
+
+	<h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
+
+</cfoutput>

test-harness/views/main/embedded.cfm

@@ -19,7 +19,7 @@ rootModules = args.moduleSettings.filter( function( module, config ){
 <cfoutput>
 <div
 	id="cbd-modules"
-	x-data="modulesPanel( #args.debuggerConfig.modules.expanded ? 'true' : 'false'# )"
+	x-data="cbdModulesPanel( #args.debuggerConfig.modules.expanded ? 'true' : 'false'# )"
 >
 	<!--- Panel Header --->
 	<div

views/main/panels/modulesPanel.cfm

@@ -2,7 +2,7 @@
 <cfoutput>
 <div
 	id="cbd-request-tracker"
-	x-data = "requestTrackerPanel(
+	x-data = "cbdRequestTrackerPanel(
 		#args.debuggerConfig.requestTracker.expanded ? 'true' : 'false'#,
 		#args.refreshFrequency#,
 		#controller.getSetting( 'ReinitPassword' ).length() ? 'true' : 'false'#,