Skip to content

examples.serverside.gridContainer

Latest
Compare
Choose a tag to compare
@tobiu tobiu released this 25 May 19:08
· 17 commits to dev since this release
  • Added a new example to fully load a grid container configuration per remote
  • Added container.Base: loadItems() with support for all environments

Online Demos:
https://neomjs.com/dist/production/examples/serverside/gridContainer/
https://neomjs.com/examples/serverside/gridContainer/

Screenshot 2025-05-25 at 19 50 46 Screenshot 2025-05-25 at 21 27 57

Most important files:
https://github.com/neomjs/neo/blob/dev/examples/serverside/gridContainer/Viewport.mjs
https://github.com/neomjs/neo/blob/dev/examples/serverside/gridContainer/resources/data/grid-container.json

The JSON file contains:

{
    "modules": [
        "src/grid/Container.mjs"
    ],
    
    "items": [/**/]
}

This does get consumed by:

async loadItems(url) {
    let response   = await fetch(url),
        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
}

Meaning:

  • Devs need to specify related modules which have to be there.
  • This works perfectly fine the the development mode
  • For dist/production, it is impossible to let Webpack bundle the dynamic modules, since it could be anything.
  • Neo.mjs provides the ability to run multiple environments inside the same app, which comes to the rescue => We can and have to combine the development and dist/production environments for this specific use case.

Feedback from Google Gemini:
Screenshot 2025-05-25 at 20 46 29
Screenshot 2025-05-25 at 20 46 40