ESM support for all Yivi packages

[ericfennis]

We tried to use these frontend packages with our frontend using Vite.
But we have some problems with building, because of the lack of ESM support.
We currently have a workaround but it is not great.

I noticed in all the packages the require() imports are used, which is not very future-proof since most new frontend builders and javascript community already shifted to the import syntax. Also using the ECMA script is recommended by all build tools, see webpack documentation

Is it possible to switch to ECMA Script syntax or maybe even typescript.

Here is a nice blog article about publishing modern NPM package: https://snyk.io/blog/best-practices-create-modern-npm-package/

// /yivi-frontend/index.js
- require('@privacybydesign/yivi-css');
+ import '@privacybydesign/yivi-css';

- const YiviCore = require('@privacybydesign/yivi-core');
- const YiviWeb = require('@privacybydesign/yivi-web');
- const YiviPopup = require('@privacybydesign/yivi-popup');
- const YiviClient = require('@privacybydesign/yivi-client');
+ import YiviCore from '@privacybydesign/yivi-core';
+ import YiviWeb from '@privacybydesign/yivi-web';
+ import YiviPopup from '@privacybydesign/yivi-popup';
+ import YiviClient from '@privacybydesign/yivi-client';

module.exports = {
  newWeb: (options) => {
    const core = new YiviCore(options);
    core.use(YiviWeb);
    core.use(YiviClient);
    return {
      start: core.start.bind(core),
      abort: core.abort.bind(core),
    };
  },

  newPopup: (options) => {
    const core = new YiviCore(options);
    core.use(YiviPopup);
    core.use(YiviClient);
    return {
      start: core.start.bind(core),
      abort: core.abort.bind(core),
    };
  },
};

[bobhageman]

Hi @ericfennis, thanks for the suggestion. We are planning transferring to the import syntax, but I can't say in advance when we'll get this done.

Switching to Typescript requires a bigger effort which we won't be able to do anytime soon, unless you want to get your hands dirty of course ;)

[mlangenberg]

Any updates to this? We are switching our apps to use import maps and Yivi is the only dependency that still requires us to use webpack.

When can we expect ES module support for Yivi?

[bobhageman]

@mlangenberg Unfortunately not anytime soon since it's all hands on deck with other high priority developments at the moment.

Of course it is much appreciated if you could help us out by adding ES module support and submitting this as a PR:)

[mlangenberg]

@bobhageman We’ve followed up with a PR to add ES module support. It would also be appreciated if this could get reviewed.

[bobhageman]

Hi @mlangenberg, and @ericfennis, firstly: thanks for your effort.
Currently, there is no active development on the Yivi project because the project is being transferred to Privacy by Design Foundation. Therefore it can take some time before this PR is reviewed.

[DibranMulder]

Hi all, we are the new maintainers of Yivi and this issue needs to be resolved, since its hard to integrate in modern web frameworks nowadays. We will take a look at the PR.