wildhaber / gluebert Goto Github PK

Description

Currently a once added css in the head will stay, even the module has been destructed. It should be removed from the dom when the last existing module is gone.

Description

Since in the very basic data-controller it is mostly just an empty abstract extension. So this could be fast forwarded to have a controller automatically initialized, when no controller is given by default.

Something like:

import { DataSignature } from 'gluebert/data';

const SIGNATURE = new DataSignature('key.data');

export {
    SIGNATURE,
};

should become a valid data observable to key.data

Description

Some modules or data might need to be loaded immediately.

Adding a flag or a "noLazy" setting would do the trick.

Description

Currently it's a manual process within the controller to load further dependencies manually like:

    async _loadDependencies() {
        this._anime = await import('animejs');
    }

Example:
https://github.com/wildhaber/gluebert/blob/develop/documentation/themes/gluebert/src/js/modules/process-illustration/process-illustration.controller.js#L28-L30

It would be good to be able to define dependencies in the module signature and have them available in the controllers later.

Description

Currently, its a manual process to invalidate service worker cache when something has changed on the documentation.

To improve this and make the documentation updates more rapidly, we would need to integrate the package-version number in the sw.js cache-version.

Descriptions

As a developer who wants to contribute to gluebert, I want to have some guidance how the repository is set up and where to test things.

This also might be necessary to make some cleanup in the repo :-)

Description

When developing on a responsive website there are some elements that has to be cloned and used doubled - for example a navigation for the burger-style-menu on mobile and the mega-menu on a large screen.

Instead of loading both at once, what, if it would be possible to load a module only when a certain viewport width/height is valid, like:

import { ModuleSignature } from 'gluebert/module';

const NAVIGATION_MODULE = new ModuleSignature(`menu`, `.c-navigation`, { viewport: width: min: 123, max: 789 }, height: { min: 123, max: 678 }  })
    .setImportController(() => import('./navigation.controller').then((controller) => controller.NavigationController))
    .setImportStyles(() => import('./navigation.styles.scss'));

export {
    NAVIGATION_MODULE,
};

Description

As a developer I want to be able to create styling according to component's states.

For example:
sleep = the controller is ready to be attached as soon as the element appears within viewport
loading = the controller, stylesheets and dependencies are loading
ready = everything is bound successfully to the component (the controller must be able to overrule this)

All classes and it's appearance must be configurable in the options params.

Description

As a developer I want to setup my modules, data and elements quickly with no hassle. For this reason it would be helpful to write some simple cli commands like:

gluebert create module slider

That builds a module structure like:

slider/
|-- slider.module.js
|-- slider.controller.js
|-- slider.styles.scss

or:

gluebert create data user

That builds a data structure like:

user/
|-- user.signature.js
|-- user.data.js

Description

The current polyfill approach needs to be done at the loading level of the main JS-File like:

Example:

<script>
    var appElement = document.createElement('script');
    appElement.src = '/app.js';
    var scriptElement = document.createElement('script');
    if('MutationObserver' in window
        && 'content' in document.createElement('template')) {
        document.body.appendChild(appElement);
    } else {
        window.addEventListener('load', function() {
            scriptElement.src = 'https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.10/webcomponents-loader.js';
            document.body.appendChild(scriptElement);
        });
    }
    window.addEventListener('WebComponentsReady', function() {
        document.body.appendChild(appElement);
    });
</script>

See:
https://github.com/wildhaber/gluebert/blob/develop/documentation/themes/gluebert/layouts/partials/footer.html#L1-L22

This could be optimized and be done internally so developers only need to load the main script in their html - like:

<script src="/mysupercoolapp.js" async></script>

Description

The current 0.0.10-version throws errors on many browsers actually.
There are most probably issues with the documentFragment interpretator or IntersectionObserver.

Browsers

Safari Version 10.1.2

Throws errors :-)

Microsoft Edge

Don't load any component without error message in the console

IE11

Throws errors :-)

Screenshots

Edge:

IE11:

Safari:

Description

Currently, within the data-signature you have to bind DataObserver manually like:

const SIGNATURE = new DataSignature(
    'balls.data',
    (dataPool) => {
        return import('./balls.data')
            .then((module) => {
                return new module.BallsData(dataPool);
            });
    },
);

Example:
https://github.com/wildhaber/gluebert/blob/develop/documentation/themes/gluebert/src/js/data/balls/balls.signature.js#L9-L13

It would be better to have a unified process like:

const SIGNATURE = new DataSignature(
    'balls.data',
    () => import('./balls.data').then((module) => module.BallsData);
    },
);

And gluebert will handle the instanciation.