ArchitectUI v4.5.0

ArchitectUI v4.5.0 Release Notes

Highlights

This release brings jQuery 4.0 support, significant production build improvements, and Chart.js fixes for a more reliable development and deployment experience.

---

jQuery 4.0 Upgrade

We've upgraded to jQuery 4.0.0 - the first major jQuery release in over a decade:

• Modernized internals with ES modules
• Smaller bundle size
• Improved CSP (Content Security Policy) support
• Dropped legacy browser support (IE 10 and older)

MetisMenu has been updated to 3.1.0 for jQuery 4.0 compatibility.

---

Production Build Fixes

CSS Now Properly Extracted

• Fixed critical issue where CSS was not being extracted in production builds
• CSS is now output to ./assets/styles/main.css (462KB minified)
• HTML pages now correctly include the CSS <link> tag

New CSS Minification

• Added css-minimizer-webpack-plugin for optimal CSS compression
• ~6% reduction in CSS file size

Webpack Configuration Updates

• Fixed deprecated MiniCssExtractPlugin and CleanWebpackPlugin APIs
• Added proper --env production/development flags
• Set correct mode for production builds

---

Performance Optimizations

Modern Browser Targeting

Updated Babel configuration to target only modern browsers:

Chrome (last 2 versions)
Firefox (last 2 versions)
Safari (last 2 versions)
Edge (last 2 versions)

Benefits:

• ~9KB savings by eliminating unnecessary polyfills
• Removes ES6 class transforms (native in modern browsers)
• Removes Array.prototype.indexOf polyfills

---

Chart.js Improvements

Fixed HMR Error

Resolved the "Cannot set properties of undefined" error that occurred on initial page load during development.

Fixed Production NaN Error

Charts in hidden tabs no longer cause scale(NaN) translate(NaN...) errors. Charts are now initialized only when their containing tab becomes visible.

Dashboard Tab Charts

Added actual Chart.js visualizations to secondary tabs:

• Sales Report "Current" tab: Horizontal bar chart
• Bandwidth Reports "Tab 2": Line chart with bandwidth data

---

Design System Improvements

• 50+ color fixes: Replaced hardcoded rgba() values with SASS variables
• New utility classes: .chart-container, .map-container, .divider-spacing, .card-dark
• New button shadow mixin: Consistent shadows across all button variants
• Functional dashboard tabs: Bootstrap 5 native tab system integration

---

Build Output

File	Size
main.css	462KB
main.js	161KB
chart_js.js	216KB
fullcalendar.js	260KB
scrollbar.js	95KB
toastr.js	86KB
maps.js	80KB
demo.js	78KB

---

Dependency Updates

Production

• jquery: 3.7.1 → 4.0.0
• metismenu: 3.0.7 → 3.1.0

Development

• @babel/core: 7.28.6
• css-minimizer-webpack-plugin: 7.0.4 (new)
• sass: 1.97.3
• webpack: 5.104.1
• webpack-dev-server: 5.2.3

---

Security

• Zero vulnerabilities - All packages audited and secure

---

Breaking Changes

• Dropped IE 10 and older support (jQuery 4.0 requirement)
• Production builds now require npm run build (uses --env production)

---

Upgrade Instructions

# Install dependencies
npm install

# Development
npm run start

# Production build
npm run build

---

Full Changelog

See Changelog.md for complete details.

ArchitectUI FREE v4.4.0

ArchitectUI HTML FREE v4.4.0 - Real Google Maps Integration

Release Date: November 17, 2025

🎯 Overview

Version 4.4.0 brings a significant upgrade to the Maps component, replacing CSS-based placeholder visualizations with real, interactive Google Maps. This update provides a professional, production-ready maps experience without requiring any API keys or additional configuration.

---

🗺️ Major Feature: Real Google Maps Integration

What's New

We've completely reimplemented the maps component to use Google Maps iframe embeds, providing actual interactive maps instead of CSS-based placeholders.

Key Benefits

• ✅ No API Key Required - Uses Google's free iframe embed system
• ✅ Fully Interactive - All standard Google Maps features (zoom, pan, street view, etc.)
• ✅ Professional Quality - Real map data with Google watermarks
• ✅ Zero Configuration - Works out of the box
• ✅ Better Performance - 28KB smaller bundle size

Five Global Locations

1. Tokyo, Japan - Satellite View
2. New York, USA - Standard View
3. London, UK - City Map
4. Paris, France - Location Map
5. San Francisco, USA - City Map

---

📦 Technical Improvements

Bundle Optimization

• maps.js size: 882KB → 854KB (28KB reduction)
• Removed complex CSS animations
• Implemented lazy loading for optimal performance
• Cleaner, more maintainable code

Implementation Details

• Uses Google Maps Embed API (completely free, no quotas)
• Responsive iframes that work on all devices
• Lazy loading with loading="lazy" attribute
• Proper referrerpolicy for privacy
• All locations tested and verified

---

📝 Documentation Updates

Updated Files

• README.md - Highlighted new maps feature in "What's New"
• Changelog.md - Complete release notes

Developer Notes

• The @googlemaps/js-api-loader package (line 24 in package.json) is not used and can be safely removed if desired
• Maps implementation is in src/scripts-init/maps.js (122 lines)
• Template updates in src/DemoPages/components/maps.hbs

---

🚀 Getting Started

For New Users

npm install
npm run build
# Open architectui-html-free/components-maps.html

For Existing Users (Upgrading from v4.3.0)

git pull
npm install  # Not required, no dependency changes
npm run build

Note: If you've customized the maps component, review src/scripts-init/maps.js for breaking changes.

---

🔄 Migration Guide

Breaking Changes

If you customized the previous CSS-based maps, you'll need to:

1. Review your customizations - The new implementation uses iframes instead of CSS
2. Update map IDs - Element IDs remain the same: map, gmap-example, map-multiple-markers, map-custom-styles, map-interactive-demo
3. Replace custom CSS - Google Maps styling is now handled via URL parameters
4. Test your implementation - Ensure maps display correctly in your environment

No Changes Required If:

• You haven't customized the maps component
• You're using the default implementation
• You're doing a fresh install

---

📸 Screenshots

The maps now show:

• Real satellite imagery (Tokyo)
• Actual street maps (New York, London, Paris, San Francisco)
• Google Maps watermark and branding
• Interactive zoom controls
• Street view access (where available)

---

🐛 Bug Fixes

• Fixed: CSS-based maps looked unfinished and unprofessional
• Fixed: No actual map data or interactivity
• Fixed: Placeholder graphics instead of real maps
• Improved: User experience with professional map integration

---

📊 Version Information

• Version: 4.4.0
• Previous Version: 4.3.0
• Build: Production-ready
• Compatibility: All modern browsers
• Dependencies: No changes from v4.3.0

---

🔗 Resources

• Repository: GitHub
• Website: DashboardPack.com
• Pro Version: ArchitectUI Pro
• Changelog: Changelog.md

---

👥 Contributors

Thanks to all contributors who helped make this release possible!

---

📄 License

Licensed under MIT - see LICENSE for details.

---

🎉 What's Next?

Stay tuned for future updates! Follow our repository for the latest releases and features.

Upgrade today and enjoy professional Google Maps integration in your dashboard! 🗺️

ArchitectUI v4.3.0

• Bump version from 4.2.0 to 4.3.0 in package.json
• Update FontAwesome to version 7.0.1
• Update FullCalendar packages to version 6.1.19
• Update Google Maps JS API Loader to version 1.16.10
• Update Bootstrap to version 5.3.8
• Update Babel packages to latest versions
• Update ESLint to version 9.35.0
• Update Mini CSS Extract Plugin to version 2.9.4
• Update Sass to version 1.92.1
• Update Webpack to version 5.101.3
• Modify FontAwesome SCSS import to use new module syntax

ArchitectUI v4.2.0

🚀 ArchitectUI v4.2.0 - Complete Modernization & SASS Future-Proofing

Major Updates

• 🔄 Complete dependency modernization - All npm packages updated to latest versions
• 🎯 SASS future-proofing - Migrated from deprecated SASS syntax to modern @use modules
• 🔒 Enhanced security - Fixed all security vulnerabilities (0 vulnerabilities detected)
• ⚡ Modern tooling - Upgraded to ESLint v9 with flat configuration
• 📦 Performance optimizations - Reduced bundle sizes and improved build times

✨ New Features

• 🗺️ Enhanced Maps Component - Completely rebuilt with 5 interactive map examples
  • CSS-based satellite terrain map
  • Interactive demo with animations
  • Multiple cities markers display
  • Custom gradient styling
  • Interactive controls demo
• 🎨 Improved Favicon Support - Proper favicon serving and webpack integration
• 💻 Better Development Experience - Clean console output with no 404 errors

🔧 Technical Improvements

Package Updates

• Bootstrap: 5.3.5 → 5.3.7
• Chart.js: 4.4.8 → 4.5.0
• Webpack: 5.88.2 → 5.99.9
• Babel Core: 7.26.10 → 7.27.4
• SASS: 1.86.3 → 1.89.2
• ESLint: 8.57.1 → 9.29.0
• And 15+ other package updates

SASS Modernization

• Replaced deprecated map-merge() with map.merge()
• Replaced deprecated divide() with math.div()
• Added modern @use statements for SASS modules
• Eliminated 500+ deprecation warnings in custom theme files
• Future-proof code ready for SASS 3.0

Dependency Optimization

• Removed: moment.js (unused, 67KB bundle reduction)
• Replaced: gmaps with modern @googlemaps/js-api-loader
• Enhanced: Security with latest package versions
• Maintained: Full backward compatibility

🐛 Bug Fixes

• Fixed broken maps implementation that relied on expired API keys
• Resolved favicon 404 errors in development
• Eliminated console source map warnings
• Fixed webpack dev server security vulnerabilities

📦 Bundle Improvements

• Reduced main bundle size: 1.87 MiB → 1.82 MiB (50KB improvement)
• Eliminated unused dependencies for better performance
• Modern ES modules for better tree-shaking
• Optimized asset loading with proper webpack configuration

🎯 Migration Benefits

• Future-proof codebase ready for upcoming SASS and build tool updates
• Enhanced security posture with latest dependency versions
• Improved development workflow with modern tooling
• Better performance through optimized dependencies
• Clean code architecture following modern best practices

---

Full Changelog: v4.1.0...v4.2.0

v4.1.0

Full Changelog: v4.0.0...v4.1.0

v4.0.0

Check out the latest changes, improvements, and bug fixes in our project by referring to the detailed changelog in CHANGELOG.md. Stay up to date with our latest releases and enhancements!

WebPack 5 Release

Merge pull request #35 from DashboardPack/node-16-update

Webpack 5 Update

Bootstrap 5 Release

Merge pull request #30 from DashboardPack/Bootstrap-5-update

Migrating to bootstrap v5

v1.2.3: Merge pull request #25 from DashboardPack/test

• Added mapbox-gl plugin
• Alert Dismissing issue resolved
• Card image issue resolved
• Fontawesome icon issue resolved