Using Strelit Layout with RequireJS (AMD)

For legacy enterprise codebases that still employ AMD / RequireJS or UMD bundles, Strelit Layout can be loaded as an AMD module.

Dependency Setup

Unlike legacy GoldenLayout v1, modern Strelit UI Kit has zero jQuery dependency. Configure RequireJS paths to point to your UMD or AMD bundle:

requirejs.config({
    baseUrl: '../js',
    paths: {
        'strelit': 'lib/strelit'
    }
});

Require Strelit Layout and instantiate your workspace using the modern 2-step instantiation pattern:

require(['strelit'], function(strelitModule) {
    var StrelitLayout = strelitModule.StrelitLayout || strelitModule;
    var containerElement = document.getElementById('layoutContainer');

    // 1. Instantiate with DOM container
    var layout = new StrelitLayout(containerElement);

    // 2. Register component factory function
    layout.registerComponentFactoryFunction('testComponent', function(container, state) {
        container.element.innerHTML = '<div class="p-4"><h3>' + (state.title || 'Item') + '</h3></div>';
    });

    // 3. Load modern LayoutConfig with root item
    layout.loadLayout({
        root: {
            type: 'row',
            content: [
                {
                    type: 'component',
                    componentType: 'testComponent',
                    componentState: { title: 'First Item' }
                },
                {
                    type: 'component',
                    componentType: 'testComponent',
                    componentState: { title: 'Second Item' }
                }
            ]
        }
    });
});

Community & Support