neo.mjs 9.3.0 → 9.6.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='9.3.0'
+         * @member {String} version='9.6.0'
          */
-        version: '9.3.0'
+        version: '9.6.0'
     }
 
     /**

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-05-23",
+      "datePublished": "2025-06-01",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v9.3.0'
+                html  : 'v9.6.0'
             }]
         }],
         /**

package/buildScripts/buildAll.mjs

@@ -23,7 +23,7 @@ program
     .name(programName)
     .version(packageJson.version)
     .option('-i, --info',               'print environment debug info')
-    .option('-e, --env <value>',        '"all", "dev", "prod"')
+    .option('-e, --env <value>',        '"all", "dev", "esm", "prod"')
     .option('-l, --npminstall <value>', '"yes", "no"')
     .option('-f, --framework')
     .option('-n, --noquestions')
@@ -74,7 +74,7 @@ if (programOpts.info) {
                 type   : 'list',
                 name   : 'env',
                 message: 'Please choose the environment:',
-                choices: ['all', 'dev', 'prod'],
+                choices: ['all', 'dev', 'esm', 'prod'],
                 default: 'all'
             });
         }
@@ -129,17 +129,24 @@ if (programOpts.info) {
             childProcess.status && process.exit(childProcess.status);
         }
 
-        if (themes     === 'yes') {
+        if (themes === 'yes') {
             childProcess = spawnSync('node', [`${neoPath}/buildScripts/buildThemes.mjs`].concat(cpArgs), cpOpts);
             childProcess.status && process.exit(childProcess.status);
         }
 
-        if (threads    === 'yes') {
-            childProcess = spawnSync('node', [`${webpackPath}/buildThreads.mjs`].concat(cpArgs), cpOpts);
-            childProcess.status && process.exit(childProcess.status);
+        if (threads === 'yes') {
+            if (env !== 'esm') {
+                childProcess = spawnSync('node', [`${webpackPath}/buildThreads.mjs`].concat(cpArgs), cpOpts);
+                childProcess.status && process.exit(childProcess.status);
+            }
+
+            if (env === 'all' || env === 'esm') {
+                childProcess = spawnSync('node', [`${neoPath}/buildScripts/buildESModules.mjs`], cpOpts);
+                childProcess.status && process.exit(childProcess.status);
+            }
         }
 
-        if (parsedocs  === 'yes') {
+        if (parsedocs === 'yes') {
             childProcess = spawnSync(npmCmd, ['run', 'generate-docs-json'], cpOpts);
             childProcess.status && process.exit(childProcess.status);
         }

package/buildScripts/buildESModules.mjs

@@ -0,0 +1,112 @@
+import fs                   from 'fs-extra';
+import path                 from 'path';
+import {minify as minifyJs} from 'terser';
+import {minifyHtml}         from './util/minifyHtml.mjs';
+import {fileURLToPath}      from 'url';
+
+const
+    __filename       = fileURLToPath(import.meta.url),
+    __dirname        = path.dirname(__filename),
+    inputDirectories = ['apps', 'docs', 'examples', 'src'],
+    outputBasePath   = '../dist/esm/';
+
+async function minifyDirectory(inputDir, outputDir) {
+    if (fs.existsSync(inputDir)) {
+        fs.mkdirSync(outputDir, {recursive: true});
+
+        const dirents = fs.readdirSync(inputDir, {recursive: true, withFileTypes: true});
+
+        for (const dirent of dirents) {
+            if (dirent.isFile()) {
+                const
+                    inputPath    = path.join(dirent.path, dirent.name),
+                    relativePath = path.relative(inputDir, inputPath),
+                    outputPath   = path.join(outputDir, relativePath),
+                    content      = fs.readFileSync(inputPath, 'utf8');
+
+                fs.mkdirSync(path.dirname(outputPath), {recursive: true});
+
+                try {
+                    // Minify JSON files
+                    if (dirent.name.endsWith('.json')) {
+                        const jsonContent = JSON.parse(content);
+
+                        if (dirent.name === 'neo-config.json') {
+                            jsonContent.environment = 'dist/esm';
+                        }
+
+                        fs.writeFileSync(outputPath, JSON.stringify(jsonContent));
+                        console.log(`Minified JSON: ${inputPath} -> ${outputPath}`);
+                    }
+                    // Minify HTML files
+                    else if (dirent.name.endsWith('.html')) {
+                        const minifiedContent = await minifyHtml(content);
+
+                        fs.writeFileSync(outputPath, minifiedContent);
+                        console.log(`Minified HTML: ${inputPath} -> ${outputPath}`);
+                    }
+                    // Minify JS files
+                    else if (dirent.name.endsWith('.mjs')) {
+                        const result = await minifyJs(content, {
+                            module: true,
+                            compress: {
+                                dead_code: true
+                            },
+                            mangle: {
+                                toplevel: true
+                            }
+                        });
+
+                        fs.writeFileSync(outputPath, result.code);
+                        console.log(`Minified JS: ${inputPath} -> ${outputPath}`);
+                    }
+                } catch (e) {
+                    console.error(`Error minifying ${inputPath}:`, e);
+                }
+            }
+            // Copy resources folders
+            else if (dirent.name === 'resources') {
+                const
+                    inputPath    = path.join(dirent.path, dirent.name),
+                    relativePath = path.relative(inputDir, inputPath),
+                    outputPath   = path.join(outputDir, relativePath);
+
+                fs.mkdirSync(path.dirname(outputPath), {recursive: true});
+
+                fs.copySync(inputPath, outputPath);
+
+                // Minify all JSON files inside the copied folder
+                const resourcesEntries = fs.readdirSync(outputPath, {recursive: true, withFileTypes: true});
+
+                for (const resource of resourcesEntries) {
+                    if (resource.isFile()) {
+                        if (resource.name.endsWith('.json')) {
+                            const
+                                resourcePath = path.join(resource.path, resource.name),
+                                content      = fs.readFileSync(resourcePath, 'utf8');
+
+                            fs.writeFileSync(resourcePath, JSON.stringify(JSON.parse(content)));
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+const promises = [];
+
+// Execute the minification
+inputDirectories.forEach(folder => {
+    promises.push(minifyDirectory(path.resolve(__dirname, '../' + folder), path.resolve(__dirname, outputBasePath, folder))
+        .catch(err => {
+            console.error('Minification failed:', err);
+            process.exit(1) // Exit with error code
+        })
+    );
+});
+
+Promise.all(promises).then(() => {
+    console.log('Minification complete.');
+    process.exit()
+});

package/buildScripts/buildThemes.mjs

@@ -34,7 +34,7 @@ program
     .name(programName)
     .version(packageJson.version)
     .option('-i, --info',            'print environment debug info')
-    .option('-e, --env <value>',     '"all", "dev", "prod"')
+    .option('-e, --env <value>',     '"all", "dev", "esm", "prod"')
     .option('-f, --framework')
     .option('-n, --noquestions')
     .option('-t, --themes <value>',  ["all", ...themeFolders].join(", "))
@@ -83,19 +83,19 @@ if (programOpts.info) {
                 type   : 'list',
                 name   : 'env',
                 message: 'Please choose the environment:',
-                choices: ['all', 'dev', 'prod'],
+                choices: ['all', 'dev', 'esm', 'prod'],
                 default: 'all'
             });
         }
     }
 
-    inquirer.prompt(questions).then(answers => {
+    inquirer.prompt(questions).then(async answers => {
         const env        = answers.env       || programOpts.env     || 'all',
               themes     = answers.themes    || programOpts.themes  || 'all',
               insideNeo  = programOpts.framework || false,
               startDate  = new Date(),
-              fileCount  = {development: 0, production: 0},
-              totalFiles = {development: 0, production: 0};
+              fileCount  = {development: 0, esm: 0, production: 0},
+              totalFiles = {development: 0, esm: 0, production: 0};
 
         let themeMap;
 
@@ -124,14 +124,14 @@ if (programOpts.info) {
          * @param {String} p
          * @param {String} mode development or production
          */
-        function buildEnv(p, mode) {
-            parseScssFiles(getAllScssFiles(path.join(p, 'src')), mode, 'src');
+        async function buildEnv(p, mode) {
+            await parseScssFiles(getAllScssFiles(path.join(p, 'src')), mode, 'src');
 
-            themeFolders.forEach(themeFolder => {
+            for (const themeFolder of themeFolders) {
                 if (themes === 'all' || themes === themeFolder) {
-                    parseScssFiles(getAllScssFiles(path.join(p, themeFolder)), mode, themeFolder);
+                    await parseScssFiles(getAllScssFiles(path.join(p, themeFolder)), mode, themeFolder);
                 }
-            });
+            }
         }
 
         /**
@@ -247,17 +247,17 @@ if (programOpts.info) {
          * @param {String} mode development or production
          * @param {String} target src or a theme
          */
-        function parseScssFiles(files, mode, target) {
-            let devMode = mode === 'development',
-                map;
+        async function parseScssFiles(files, mode, target) {
+            let devMode = mode === 'development';
 
             totalFiles[mode] += files.length;
 
-            files.forEach(file => {
+            for (const file of files) {
                 addItemToThemeMap(file, target);
 
                 let folderPath = path.resolve(cwd, `dist/${mode}/css/${target}/${file.relativePath}`),
-                    destPath   = path.resolve(folderPath, `${file.name}.css`);
+                    destPath   = path.resolve(folderPath, `${file.name}.css`),
+                    map;
 
                 let result = sass.compile(file.path, {
                     outFile                : destPath,
@@ -267,71 +267,71 @@ if (programOpts.info) {
 
                 const plugins = [autoprefixer];
 
-                if (mode === 'production') {
-                    plugins.push(cssnano);
+                if (mode === 'esm' || mode === 'production') {
+                    plugins.push(cssnano) // CSSNano works async only
                 }
 
                 map = result.sourceMap;
 
-                postcss(plugins).process(result.css, {
+                const postcssResult = await postcss(plugins).process(result.css, {
                     from: file.path,
                     to  : destPath,
                     map : !devMode ? null : {
                         inline: false,
                         prev  : map && JSON.stringify(map)
                     }
-                }).then(postcssResult => {
-                    fs.mkdirpSync(folderPath);
-                    fileCount[mode]++;
+                });
 
-                    let map         = postcssResult.map,
-                        processTime = (Math.round((new Date - startDate) * 100) / 100000).toFixed(2);
+                fs.mkdirpSync(folderPath);
+                fileCount[mode]++;
 
-                    console.log('Writing file:', (fileCount[mode] + fileCount[mode]), chalk.blue(`${processTime}s`), destPath);
+                let currentFileNumber = fileCount.development + fileCount.esm + fileCount.production,
+                    processTime       = (Math.round((new Date - startDate) * 100) / 100000).toFixed(2);
 
-                    fs.writeFileSync(
-                        destPath,
-                        map ?
-                            `${postcssResult.css}\n\n/*# sourceMappingURL=${path.relative(path.dirname(destPath), postcssResult.opts.to + '.map')} */` :
-                            postcssResult.css,
-                        () => true
-                    );
+                map = postcssResult.map;
 
-                    if (map) {
-                        let mapString = map.toString(),
-                            jsonMap   = JSON.parse(mapString),
-                            sources   = jsonMap.sources;
-
-                        // Somehow files contain both: a relative & an absolute file url
-                        // We only want to keep the relative ones.
-                        [...sources].forEach((item, index) => {
-                            if (!item.startsWith('../')) {
-                                sources.splice(index, 1);
-                            }
-                        });
+                console.log('Writing file:', currentFileNumber, chalk.blue(`${processTime}s`), destPath);
 
-                        map = JSON.stringify(jsonMap);
+                fs.writeFileSync(
+                    destPath,
+                    map ?
+                        `${postcssResult.css}\n\n/*# sourceMappingURL=${path.relative(path.dirname(destPath), postcssResult.opts.to + '.map')} */` :
+                        postcssResult.css,
+                    () => true
+                );
 
-                        fs.writeFileSync(postcssResult.opts.to + '.map', map);
-                    }
+                if (map) {
+                    let mapString = map.toString(),
+                        jsonMap   = JSON.parse(mapString),
+                        sources   = jsonMap.sources;
 
-                    if (fileCount[mode] === totalFiles[mode]) {
-                        fs.writeFileSync(
-                            path.resolve(cwd, themeMapFile),
-                            JSON.stringify(themeMap, null, 0)
-                        );
+                    // Somehow files contain both: a relative & an absolute file url
+                    // We only want to keep the relative ones.
+                    [...sources].forEach((item, index) => {
+                        if (!item.startsWith('../')) {
+                            sources.splice(index, 1);
+                        }
+                    });
 
-                        fs.mkdirpSync(path.join(cwd, '/dist/', mode, '/resources'), {
-                            recursive: true
-                        });
+                    map = JSON.stringify(jsonMap);
 
-                        fs.writeFileSync(
-                            path.join(cwd, '/dist/', mode, themeMapFile),
-                            JSON.stringify(themeMap, null, 0)
-                        );
-                    }
-                });
-            });
+                    fs.writeFileSync(postcssResult.opts.to + '.map', map);
+                }
+
+                if (fileCount[mode] === totalFiles[mode]) {
+                    fs.writeFileSync(
+                        path.resolve(cwd, themeMapFile),
+                        JSON.stringify(themeMap, null, 0)
+                    );
+
+                    fs.mkdirpSync(path.join(cwd, '/dist/', mode, '/resources'), {recursive: true});
+
+                    fs.writeFileSync(
+                        path.join(cwd, '/dist/', mode, themeMapFile),
+                        JSON.stringify(themeMap, null, 0)
+                    );
+                }
+            }
         }
 
         themeMap = getThemeMap(themeMapFile);
@@ -339,13 +339,28 @@ if (programOpts.info) {
         // dist/development
         if (env === 'all' || env === 'dev') {
             console.log(chalk.blue(`${programName} starting dist/development`));
-            buildEnv(scssPath, 'development');
+            await buildEnv(scssPath, 'development');
+        }
+
+        // dist/esm
+        if (env === 'all' || env === 'esm') {
+            console.log(chalk.blue(`${programName} starting dist/esm`));
+            await buildEnv(scssPath, 'esm');
         }
 
         // dist/production
-        if (env === 'all' || env === 'prod') {
+        if (env === 'prod') {
             console.log(chalk.blue(`${programName} starting dist/production`));
-            buildEnv(scssPath, 'production');
+            await buildEnv(scssPath, 'production');
+        } else if (env === 'all') {
+            // dist/esm & dist/production contain the same output, so we can just copy it over.
+            const cssPath = path.join(cwd, '/dist/production/css');
+
+            fs.mkdirpSync(cssPath, {recursive: true});
+            fs.mkdirpSync(path.join(cwd, '/dist/production/resources'), {recursive: true});
+
+            fs.copySync(path.join(cwd, '/dist/esm/css'), cssPath);
+            fs.copySync(path.join(cwd, '/dist/esm/resources/theme-map.json'), path.join(cwd, '/dist/production/resources/theme-map.json'));
         }
     });
 }

package/buildScripts/copyFolder.mjs

@@ -18,5 +18,5 @@ if (!programOpts.target) {
     throw new Error('Missing -t param');
 }
 
-fs.mkdirpSync(programOpts.target);
+fs.mkdirpSync(programOpts.target, {recursive: true});
 fs.copySync(programOpts.source, programOpts.target);

package/buildScripts/util/minifyHtml.mjs

@@ -0,0 +1,26 @@
+import {minify} from 'html-minifier-terser';
+
+const
+    regexBlankAfterColon  = /: /g,
+    regexBlankAfterComma  = /, /g,
+    regexIndexNodeModules = /node_modules/g;
+
+export async function minifyHtml(content) {
+    const minifiedContent = await minify(content, {
+        collapseWhitespace           : true,
+        minifyCSS                    : true,
+        minifyJS                     : true,
+        processScripts               : ['application/ld+json'],
+        removeComments               : true,
+        removeEmptyAttributes        : true,
+        removeRedundantAttributes    : true,
+        removeScriptTypeAttributes   : true,
+        removeStyleLinkTypeAttributes: true,
+        useShortDoctype              : true
+    });
+
+    return minifiedContent
+        .replace(regexBlankAfterColon,  ':')
+        .replace(regexBlankAfterComma,  ',')
+        .replace(regexIndexNodeModules, '../../node_modules')
+}

package/buildScripts/webpack/production/webpack.config.appworker.mjs

@@ -1,21 +1,19 @@
-import fs          from 'fs-extra';
-import path        from 'path';
-import {spawnSync} from 'child_process';
-import webpack     from 'webpack';
-
-const cwd                   = process.cwd(),
-      cpOpts                = {env: process.env, cwd: cwd, stdio: 'inherit', shell: true},
-      requireJson           = path => JSON.parse(fs.readFileSync((path))),
-      packageJson           = requireJson(path.resolve(cwd, 'package.json')),
-      neoPath               = packageJson.name.includes('neo.mjs') ? './' : './node_modules/neo.mjs/',
-      buildTarget           = requireJson(path.resolve(neoPath, 'buildScripts/webpack/production/buildTarget.json')),
-      filenameConfig        = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
-      plugins               = [],
-      regexIndexNodeModules = /node_modules/g,
-      regexLineBreak        = /(\r\n|\n|\r)/gm,
-      regexTopLevel         = /\.\.\//g,
-      regexTrimEnd          = /\s+$/gm,
-      regexTrimStart        = /^\s+/gm;
+import fs           from 'fs-extra';
+import path         from 'path';
+import {spawnSync}  from 'child_process';
+import {minifyHtml} from '../../util/minifyHtml.mjs';
+import webpack      from 'webpack';
+
+const
+    cwd            = process.cwd(),
+    cpOpts         = {env: process.env, cwd: cwd, stdio: 'inherit', shell: true},
+    requireJson    = path => JSON.parse(fs.readFileSync((path))),
+    packageJson    = requireJson(path.resolve(cwd, 'package.json')),
+    neoPath        = packageJson.name.includes('neo.mjs') ? './' : './node_modules/neo.mjs/',
+    buildTarget    = requireJson(path.resolve(neoPath, 'buildScripts/webpack/production/buildTarget.json')),
+    filenameConfig = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
+    plugins        = [],
+    regexTopLevel  = /\.\.\//g;
 
 let contextAdjusted = false,
     examplesPath;
@@ -24,7 +22,7 @@ if (!buildTarget.folder) {
     buildTarget.folder = 'dist/production';
 }
 
-export default env => {
+export default async function(env) {
     let apps      = [],
         examples  = [],
         insideNeo = env.insideNeo == 'true',
@@ -59,7 +57,7 @@ export default env => {
         }
     };
 
-    const createStartingPoint = (key, folder) => {
+    const createStartingPoint = async (key, folder) => {
         let basePath       = '',
             workerBasePath = '',
             treeLevel      = key.replace('.', '/').split('/').length + (key === 'Docs' ? 2 : 3),
@@ -105,15 +103,9 @@ export default env => {
         // index.html
         inputPath  = path.resolve(cwd, folder, lAppName, 'index.html');
         outputPath = path.resolve(cwd, buildTarget.folder, folder, lAppName, 'index.html');
+        content    = await minifyHtml(fs.readFileSync(inputPath, 'utf-8'));
 
-        content = fs.readFileSync(inputPath).toString()
-            .replace(regexIndexNodeModules, '../../node_modules')
-            .replace(regexTrimStart, '')
-            .replace(regexTrimEnd, '')
-            .replace(', ', ',')
-            .replace(regexLineBreak, '');
-
-        fs.writeFileSync(outputPath, content);
+        fs.writeFileSync(outputPath, content)
     };
 
     const isFile = fileName => fs.lstatSync(fileName).isFile();
@@ -136,13 +128,13 @@ export default env => {
 
     parseFolder(apps, path.join(cwd, 'apps'), 0, '');
 
-    apps.forEach(key => {
+    for (const key of apps) {
         copyResources(path.join('apps', key, '/resources'));
-        createStartingPoint(key.substr(1), 'apps');
-    });
+        await createStartingPoint(key.substr(1), 'apps');
+    }
 
     if (fs.existsSync(path.join(cwd, 'docs'))) {
-        createStartingPoint('Docs', '');
+        await createStartingPoint('Docs', '');
     }
 
     examplesPath = path.join(cwd, 'examples');
@@ -150,10 +142,10 @@ export default env => {
     if (fs.existsSync(examplesPath)) {
         parseFolder(examples, examplesPath, 0, '');
 
-        examples.forEach(key => {
+        for (const key of examples) {
             copyResources(path.join('examples', key, '/resources'));
-            createStartingPoint(key.substr(1), 'examples');
-        });
+            await createStartingPoint(key.substr(1), 'examples');
+        }
     }
 
     return {

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='9.3.0'
+         * @member {String} version='9.6.0'
          */
-        version: '9.3.0'
+        version: '9.6.0'
     }
 
     /**

package/examples/serverside/gridContainer/Viewport.mjs

@@ -0,0 +1,49 @@
+import BaseViewport from '../../../src/container/Viewport.mjs';
+import Button       from '../../../src/button/Base.mjs';
+
+/**
+ * @class Neo.examples.serverside.gridContainer.Viewport
+ * @extends Neo.container.Viewport
+ */
+class Viewport extends BaseViewport {
+    static config = {
+        className: 'Neo.examples.serverside.gridContainer.Viewport',
+        cls      : ['neo-serverside-gridcontainer-viewport'],
+        layout   : 'base',
+
+        items: [{
+            ntype    : 'container',
+            cls      : 'neo-serverside-gridcontainer-content',
+            layout   : 'fit',
+            reference: 'container'
+        }, {
+            module : Button,
+            handler: 'up.onLoadGridContainerButtonClick',
+            style  : {marginTop: '1em'},
+            text   : 'Load Grid Container'
+        }]
+    }
+
+    /**
+     * @param {Object} data
+     * @returns {Promise<void>}
+     */
+    async onLoadGridContainerButtonClick(data) {
+        data.component.disabled = true;
+
+        let items = await this.loadItems({url: '../../examples/serverside/gridContainer/resources/data/grid-container.json'});
+
+        this.getReference('container').add(items)
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.value
+     * @returns {String}
+     */
+    rendererGithubId({value}) {
+        return `<i class='fa-brands fa-github'></i> ${value}`
+    }
+}
+
+export default Neo.setupClass(Viewport);

package/examples/serverside/gridContainer/app.mjs

@@ -0,0 +1,6 @@
+import Viewport from './Viewport.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: Viewport,
+    name    : 'Neo.examples.serverside.gridContainer'
+});

package/examples/serverside/gridContainer/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo.mjs - Load Grid Container</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/serverside/gridContainer/neo-config.json

@@ -0,0 +1,7 @@
+{
+    "appPath"    : "examples/serverside/gridContainer/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark"]
+}

package/examples/serverside/gridContainer/resources/data/grid-container.json

@@ -0,0 +1,75 @@
+{
+    "modules": [
+        "src/grid/Container.mjs"
+    ],
+
+    "items": [{
+        "className": "Neo.grid.Container",
+        "store"    : {
+            "keyProperty": "githubId",
+
+            "model" : {
+                "fields": [{
+                    "name": "country",
+                    "type": "String"
+                }, {
+                    "name": "firstname",
+                    "type": "String"
+                }, {
+                    "name": "githubId",
+                    "type": "String"
+                }, {
+                    "name": "lastname",
+                    "type": "String"
+                }]
+            },
+
+            "data": [{
+                "country"  : "Germany",
+                "firstname": "Tobias",
+                "githubId" : "tobiu",
+                "lastname" : "Uhlig"
+            }, {
+                "country"  : "USA",
+                "firstname": "Rich",
+                "githubId" : "rwaters",
+                "lastname" : "Waters"
+            }, {
+                "country"  : "Germany",
+                "firstname": "Nils",
+                "githubId" : "mrsunshine",
+                "lastname" : "Dehl"
+            }, {
+                "country"  : "USA",
+                "firstname": "Gerard",
+                "githubId" : "camtnbikerrwc",
+                "lastname" : "Horan"
+            }, {
+                "country"  : "Slovakia",
+                "firstname": "Jozef",
+                "githubId" : "jsakalos",
+                "lastname" : "Sakalos"
+            }, {
+                "country"  : "Germany",
+                "firstname": "Bastian",
+                "githubId" : "bhaustein",
+                "lastname" : "Haustein"
+            }]
+        },
+
+        "columnDefaults": {
+            "width": 200
+        },
+
+        "columns": [
+            {"dataField": "firstname", "text": "Firstname"},
+            {"dataField": "lastname",  "text": "Lastname"},
+            {"dataField": "githubId",  "text": "Github Id", "renderer": "up.rendererGithubId"},
+            {"dataField": "country",   "text": "Country"}
+        ],
+
+        "wrapperStyle": {
+            "height": "250px"
+        }
+    }]
+}

package/examples/serverside/toolbarItems/Viewport.mjs

@@ -30,10 +30,9 @@ class Viewport extends BaseViewport {
     async onLoadItemsButtonClick(data) {
         data.component.disabled = true;
 
-        let response   = await fetch('../../examples/serverside/toolbarItems/resources/data/toolbar-items.json'),
-            remoteData = await response.json();
+        let items = await this.loadItems({url: '../../examples/serverside/toolbarItems/resources/data/toolbar-items.json'});
 
-        this.getReference('toolbar').add(remoteData.items)
+        this.getReference('toolbar').add(items)
     }
 }
 

package/package.json

@@ -1,33 +1,34 @@
 {
-    "name": "neo.mjs",
-    "version": "9.3.0",
-    "description": "The webworkers driven UI framework",
-    "type": "module",
-    "repository": {
+    "name"           : "neo.mjs",
+    "version"        : "9.6.0",
+    "description"    : "The webworkers driven UI framework",
+    "type"           : "module",
+    "repository"     : {
         "type": "git",
-        "url": "https://github.com/neomjs/neo.git"
+        "url" : "https://github.com/neomjs/neo.git"
     },
-    "bin": {
+    "bin"            : {
         "neo-cc": "./buildScripts/createClass.mjs"
     },
-    "scripts": {
-        "add-config": "node ./buildScripts/addConfig.mjs",
-        "build-all": "node ./buildScripts/buildAll.mjs -f -n",
-        "build-all-questions": "node ./buildScripts/buildAll.mjs -f",
-        "build-themes": "node ./buildScripts/buildThemes.mjs -f",
-        "build-threads": "node ./buildScripts/webpack/buildThreads.mjs -f",
-        "convert-design-tokens": "node ./buildScripts/convertDesignTokens.mjs",
-        "create-app": "node ./buildScripts/createApp.mjs",
-        "create-app-minimal": "node ./buildScripts/createAppMinimal.mjs",
-        "create-class": "node ./buildScripts/createClass.mjs",
-        "create-component": "node ./buildScripts/createComponent.mjs",
-        "generate-docs-json": "node ./buildScripts/docs/jsdocx.mjs",
+    "scripts"        : {
+        "add-config"            : "node ./buildScripts/addConfig.mjs",
+        "build-all"             : "node ./buildScripts/buildAll.mjs -f -n",
+        "build-all-questions"   : "node ./buildScripts/buildAll.mjs -f",
+        "build-es-modules"      : "node ./buildScripts/buildESModules.mjs",
+        "build-themes"          : "node ./buildScripts/buildThemes.mjs -f",
+        "build-threads"         : "node ./buildScripts/webpack/buildThreads.mjs -f",
+        "convert-design-tokens" : "node ./buildScripts/convertDesignTokens.mjs",
+        "create-app"            : "node ./buildScripts/createApp.mjs",
+        "create-app-minimal"    : "node ./buildScripts/createAppMinimal.mjs",
+        "create-class"          : "node ./buildScripts/createClass.mjs",
+        "create-component"      : "node ./buildScripts/createComponent.mjs",
+        "generate-docs-json"    : "node ./buildScripts/docs/jsdocx.mjs",
         "inject-package-version": "node ./buildScripts/injectPackageVersion.mjs",
-        "server-start": "webpack serve -c ./buildScripts/webpack/webpack.server.config.mjs --open",
-        "test": "echo \"Error: no test specified\" && exit 1",
-        "watch-themes": "node ./buildScripts/watchThemes.mjs"
+        "server-start"          : "webpack serve -c ./buildScripts/webpack/webpack.server.config.mjs --open",
+        "test"                  : "echo \"Error: no test specified\" && exit 1",
+        "watch-themes"          : "node ./buildScripts/watchThemes.mjs"
     },
-    "keywords": [
+    "keywords"       : [
         "javascript",
         "frontend",
         "framework",
@@ -40,39 +41,41 @@
         "react-alternative",
         "angular-alternative"
     ],
-    "author": "Tobias Uhlig",
-    "license": "MIT",
-    "bugs": {
+    "author"         : "Tobias Uhlig",
+    "license"        : "MIT",
+    "bugs"           : {
         "url": "https://github.com/neomjs/neo/issues"
     },
-    "homepage": "https://neomjs.com/",
+    "homepage"       : "https://neomjs.com/",
     "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.7.2",
-        "autoprefixer": "^10.4.21",
-        "chalk": "^5.4.1",
-        "clean-webpack-plugin": "^4.0.0",
-        "commander": "^14.0.0",
-        "cssnano": "^7.0.7",
-        "envinfo": "^7.14.0",
-        "fs-extra": "^11.3.0",
-        "highlightjs-line-numbers.js": "^2.9.0",
-        "inquirer": "^12.6.1",
-        "marked": "^15.0.12",
-        "monaco-editor": "0.50.0",
-        "neo-jsdoc": "1.0.1",
-        "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.5.3",
-        "sass": "^1.89.0",
-        "siesta-lite": "5.5.2",
-        "url": "^0.11.4",
-        "webpack": "^5.99.9",
-        "webpack-cli": "^6.0.1",
-        "webpack-dev-server": "^5.2.1",
-        "webpack-hook-plugin": "^1.0.7",
-        "webpack-node-externals": "^3.0.0"
+        "autoprefixer"                 : "^10.4.21",
+        "chalk"                        : "^5.4.1",
+        "clean-webpack-plugin"         : "^4.0.0",
+        "commander"                    : "^14.0.0",
+        "cssnano"                      : "^7.0.7",
+        "envinfo"                      : "^7.14.0",
+        "fs-extra"                     : "^11.3.0",
+        "highlightjs-line-numbers.js"  : "^2.9.0",
+        "html-minifier-terser"         : "^7.2.0",
+        "inquirer"                     : "^12.6.3",
+        "marked"                       : "^15.0.12",
+        "monaco-editor"                : "0.50.0",
+        "neo-jsdoc"                    : "1.0.1",
+        "neo-jsdoc-x"                  : "1.0.5",
+        "postcss"                      : "^8.5.4",
+        "sass"                         : "^1.89.1",
+        "siesta-lite"                  : "5.5.2",
+        "terser"                       : "^5.40.0",
+        "url"                          : "^0.11.4",
+        "webpack"                      : "^5.99.9",
+        "webpack-cli"                  : "^6.0.1",
+        "webpack-dev-server"           : "^5.2.1",
+        "webpack-hook-plugin"          : "^1.0.7",
+        "webpack-node-externals"       : "^3.0.0"
     },
-    "funding": {
+    "funding"        : {
         "type": "GitHub Sponsors",
-        "url": "https://github.com/sponsors/tobiu"
+        "url" : "https://github.com/sponsors/tobiu"
     }
 }

package/resources/scss/src/examples/serverside/gridContainer/Viewport.scss

@@ -0,0 +1,13 @@
+.neo-viewport.neo-serverside-gridcontainer-viewport {
+    padding: 1em;
+
+    .neo-serverside-gridcontainer-content {
+        border: 1px solid #3E63DD;
+        height: 250px;
+        width : 800px;
+
+        .fa-github {
+            margin-right: .4em;
+        }
+    }
+}

package/src/DefaultConfig.mjs

@@ -263,12 +263,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '9.3.0'
+     * @default '9.6.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '9.3.0'
+    version: '9.6.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/Main.mjs

@@ -253,7 +253,7 @@ class Main extends core.Base {
 
         // we need different publicPath values for the main thread inside the webpack based dist envs,
         // depending on the hierarchy level of the app entry point
-        if (config.environment !== 'development') {
+        if (config.environment === 'dist/development' || config.environment === 'dist/production') {
             __webpack_require__.p = config.basePath.substring(6)
         }
 

package/src/code/LivePreview.mjs

@@ -223,11 +223,13 @@ class LivePreview extends Container {
         }
 
         let me                = this,
+            {config}          = Neo,
             container         = me.getPreviewContainer(),
+            hasJsModules      = config.environment === 'development' || config.environment === 'dist/esm',
             source            = me.editorValue || me.value,
+            className         = me.findLastClassName(source),
             cleanLines        = [],
             moduleNameAndPath = [],
-            className         = me.findLastClassName(source),
             params            = [],
             vars              = [],
             codeString, promises;
@@ -240,7 +242,7 @@ class LivePreview extends Container {
                     path       = importMatch[2],
                     index;
 
-                if (Neo.config.environment !== 'development') {
+                if (!hasJsModules) {
                     index = path.lastIndexOf('../');
 
                     if (index === 0) {

package/src/container/Base.mjs

@@ -579,6 +579,36 @@ class Container extends Component {
         return item;
     }
 
+    /**
+     * Load items from a remote endpoint.
+     * See: https://github.com/neomjs/neo/tree/dev/examples/serverside
+     * The response should return a JSON file in the following format:
+     * {"modules": [], "items": []}
+     * See: https://github.com/neomjs/neo/blob/dev/examples/serverside/gridContainer/resources/data/grid-container.json
+     * It is important to add modules which are not already imported inside your app yet.
+     * @param {Object} data
+     * @param {Object} [data.options={}]
+     * @param {String} data.url
+     * @returns {Promise<Object[]>}
+     */
+    async loadItems({options={}, url}) {
+        let response   = await fetch(url, options),
+            remoteData = await response.json();
+
+        if (remoteData.modules?.length > 0) {
+            await Promise.all(remoteData.modules.map(modulePath => {
+                // Adjust relative URLs
+                if (!modulePath.startsWith('http')) {
+                    modulePath = (Neo.config.environment === 'development' ? '../../' : '../../../../') + modulePath
+                }
+
+                return import(/* webpackIgnore: true */ modulePath)
+            }))
+        }
+
+        return remoteData.items
+    }
+
     /**
      *
      */

package/src/main/addon/Stylesheet.mjs

@@ -43,13 +43,18 @@ class Stylesheet extends Base {
         super.construct(config);
 
         let neoConfig = Neo.config,
+            env       = neoConfig.environment,
             faPath;
 
         if (neoConfig.useFontAwesome) {
-            if (neoConfig.environment === 'development') {
-                faPath = neoConfig.basePath + 'node_modules/@fortawesome/fontawesome-free/css/all.min.css'
+            if (env === 'development' || env === 'dist/esm') {
+                faPath = neoConfig.basePath + 'node_modules/@fortawesome/fontawesome-free/css/all.min.css';
+
+                if (env === 'dist/esm') {
+                    faPath = '../../' + faPath
+                }
             } else {
-                faPath = neoConfig.basePath.substr(6) + 'resources/fontawesome-free/css/all.min.css'
+                faPath = neoConfig.basePath.substring(6) + 'resources/fontawesome-free/css/all.min.css'
             }
 
             this.createStyleSheet(null, null, faPath)
@@ -68,11 +73,15 @@ class Stylesheet extends Base {
             {themes} = config,
             folders  = ['src', ...themes],
             env      = config.environment,
-            path      = env.startsWith('dist/') ? '' : config.appPath.includes('docs') ? `../dist/${env}/` : `../../dist/${env}/`,
+            path     = env.startsWith('dist/') ? '' : config.appPath.includes('docs') ? `../dist/${env}/` : `../../dist/${env}/`,
             rootPath = config.basePath.substring(6);
 
         document.body.classList.add(themes[0]);
 
+        if (env === 'dist/esm') {
+            path = '../../' + path;
+        }
+
         folders.forEach(folder => {
             if (folder.startsWith('neo-')) {
                 folder = folder.substring(4)
@@ -100,6 +109,10 @@ class Stylesheet extends Base {
             promises    = [],
             rootPath    = config.basePath.substring(6);
 
+        if (env === 'dist/esm') {
+            path = '../../' + path;
+        }
+
         if (className.startsWith('Neo.')) {
             className = className.substring(4)
         }

package/src/remotes/Api.mjs

@@ -39,15 +39,16 @@ class Api extends Base {
      *
      */
     load() {
-        let {config} = Neo,
-            path     = config.remotesApiUrl;
+        let {config}     = Neo,
+            hasJsModules = config.environment === 'development' || config.environment === 'dist/esm',
+            path         = config.remotesApiUrl;
 
-        // relative paths need a special treatment
+        // Relative paths need a special treatment
         if (!path.includes('http')) {
             path = config.appPath.split('/');
             path.pop();
             path = `${path.join('/')}/${config.remotesApiUrl}`;
-            path = (config.environment === 'development' ? '../../' : './') + path
+            path = (hasJsModules ? '../../' : './') + path
         }
 
         fetch(path)

package/src/state/Provider.mjs

@@ -391,20 +391,22 @@ class Provider extends Base {
      * @param {String} value
      */
     getFormatterVariables(value) {
+        let {environment} = Neo.config;
+
         if (Neo.isFunction(value)) {
             value = value.toString()
         }
 
-        if (Neo.config.environment === 'dist/production') {
-            // see: https://github.com/neomjs/neo/issues/2371
-            // inside dist/prod the formatter:
+        if (environment === 'dist/esm' || environment === 'dist/production') {
+            // See: https://github.com/neomjs/neo/issues/2371
+            // Inside dist/esm & dist/prod the formatter:
             // data => DateUtil.convertToyyyymmdd(data.currentDate)
             // will get minified to:
             // e=>s.Z.convertToyyyymmdd(e.currentDate)
-            // the new strategy: find the first variable name => "e"
-            // replace it with "data":
+            // The new strategy: find the first variable name => "e"
+            // Replace it with "data":
             // data=>s.Z.convertToyyyymmdd(data.currentDate)
-            // from there we can use the dev mode regex again.
+            // From there we can use the dev mode regex again.
 
             let dataName       = value.match(variableNameRegex)[0],
                 variableRegExp = new RegExp(`(^|[^\\w.])(${dataName})(?!\\w)`, 'g');

package/src/worker/App.mjs

@@ -300,7 +300,7 @@ class App extends Base {
 
         return import(
             /* webpackInclude: /(?:\/|\\)app.mjs$/ */
-            /* webpackExclude: /(?:\/|\\)node_modules/ */
+            /* webpackExclude: /(?:\/|\\)(dist|node_modules)/ */
             /* webpackMode: "lazy" */
             `../../${path}.mjs`
         )
@@ -433,15 +433,15 @@ class App extends Base {
     onRegisterNeoConfig(msg) {
         super.onRegisterNeoConfig(msg);
 
-        let config = Neo.config,
-            {data} = msg,
-            url    = 'resources/theme-map.json';
+        let {config} = Neo,
+            {data}   = msg,
+            url      = 'resources/theme-map.json';
 
         Neo.windowConfigs = Neo.windowConfigs || {};
 
         Neo.windowConfigs[data.windowId] = data;
 
-        if (config.environment === 'development') {
+        if (config.environment === 'development' || config.environment === 'dist/esm') {
             url = `../../${url}`
         }
 

package/src/worker/Manager.mjs

@@ -5,8 +5,8 @@ import Message            from './Message.mjs';
 import Observable         from '../core/Observable.mjs';
 import RemoteMethodAccess from './mixin/RemoteMethodAccess.mjs';
 
-const NeoConfig = Neo.config,
-      devMode   = NeoConfig.environment === 'development';
+const NeoConfig    = Neo.config,
+      hasJsModules = NeoConfig.environment === 'development' || NeoConfig.environment === 'dist/esm';
 
 // Using ?. since SWs do not exist for http (only https)
 navigator.serviceWorker?.addEventListener('controllerchange', function() {
@@ -89,19 +89,19 @@ class Manager extends Base {
          */
         workers: {
             app: {
-                fileName: devMode ? 'App.mjs'    : 'appworker.js'
+                fileName: hasJsModules ? 'App.mjs'    : 'appworker.js'
             },
             canvas: {
-                fileName: devMode ? 'Canvas.mjs' : 'canvasworker.js'
+                fileName: hasJsModules ? 'Canvas.mjs' : 'canvasworker.js'
             },
             data: {
-                fileName: devMode ? 'Data.mjs'   : 'dataworker.js'
+                fileName: hasJsModules ? 'Data.mjs'   : 'dataworker.js'
             },
             task: {
-                fileName: devMode ? 'Task.mjs'   : 'taskworker.js'
+                fileName: hasJsModules ? 'Task.mjs'   : 'taskworker.js'
             },
             vdom: {
-                fileName: devMode ? 'VDom.mjs'   : 'vdomworker.js'
+                fileName: hasJsModules ? 'VDom.mjs'   : 'vdomworker.js'
             }
         }
     }
@@ -168,7 +168,7 @@ class Manager extends Base {
             name       = `neomjs-${fileName.substring(0, fileName.indexOf('.')).toLowerCase()}-worker`,
             isShared   = me.sharedWorkersEnabled && NeoConfig.useSharedWorkers,
             cls        = isShared ? SharedWorker : Worker,
-            worker     = devMode  // todo: switch to the new syntax to create a worker from a JS module once browsers are ready
+            worker     = hasJsModules
                 ? new cls(filePath, {name, type: 'module'})
                 : new cls(filePath, {name});
 
@@ -295,7 +295,7 @@ class Manager extends Base {
      */
     onWorkerError(e) {
         // starting a worker from a JS module will show JS errors in a correct way
-        !devMode && console.log('Worker Error:', e)
+        !hasJsModules && console.log('Worker Error:', e)
     }
 
     /**