Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ESM support for all Yivi packages #15

Open
ericfennis opened this issue May 31, 2023 · 6 comments · May be fixed by #27
Open

ESM support for all Yivi packages #15

ericfennis opened this issue May 31, 2023 · 6 comments · May be fixed by #27
Assignees
@DibranMulder
Labels
enhancement New feature or request

Comments

@ericfennis
Copy link

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
Copy link
Contributor

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
Copy link

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
Copy link
Contributor

@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:)

@ericfennis ericfennis linked a pull request Jan 4, 2024 that will close this issue
Open
@mlangenberg
Copy link

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

@bobhageman
Copy link
Contributor

bobhageman commented Jan 9, 2024 •
edited
Loading

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
Copy link

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.

@DibranMulder DibranMulder added the enhancement New feature or request label Nov 28, 2024
@DibranMulder DibranMulder self-assigned this Nov 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@DibranMulder DibranMulder

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Implement Typescript and ESM, and add Parcel for builds nedap/yivi-frontend-packages
4 participants
@mlangenberg @DibranMulder @ericfennis @bobhageman