rollup.js issues

[hrstoyanov]

@pskelin @ilhan007 Based on our previous discussion,
I tried rollup.js to bundle my SAP Ui5 1.0.0-rc.11 web components, filed some issues here but the major issue I face is that after the rollup bundling, the components are not exported from within the generated bundle. Why?

Here is my package.json :

{
...
  "devDependencies": {
    "@playwright/test": "^0.162.0",
    "npm-run-all": "^4.1.5",
    "rollup": "^2.35.1",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-url": "^3.0.1",
    "serve": "^11.3.2"
  },
  "dependencies": {
    "@ui5/webcomponents": "^1.0.0-rc.11",
    "@ui5/webcomponents-fiori": "^1.0.0-rc.11",
    "@ui5/webcomponents-icons": "^1.0.0-rc.11"
  }
}

Here is my rollup.config.js (note the output format is es and not esm):

import resolve from "rollup-plugin-node-resolve";
import {terser} from "rollup-plugin-terser";
import url from "rollup-plugin-url";

export default [
    {
        input: "./sapui5wc.esm.js",
        output: {
            file: "./recres-webapp/src/main/resources/META-INF/resources/lib/sapui5.js",
            format: "es"
        },
        plugins: [
            resolve()
            ,url({
                limit: 0,
                include: [
                    /assets\/.*\.json/,
                ],
                emitFiles: true,
                fileName: "[name].[hash][extname]",
                publicPath: "lib/",
            })
            //,terser()
        ]
    }
]
;

And here is the file with requested SAP UI5 WC stuff to be rolled up:

// Components
import  "@ui5/webcomponents/dist/Avatar.js";
import  "@ui5/webcomponents/dist/Button.js";
import  "@ui5/webcomponents/dist/Input.js";
import  "@ui5/webcomponents-fiori/dist/ShellBar.js";
import  "@ui5/webcomponents-fiori/dist/ShellBarItem.js";
import  "@ui5/webcomponents-fiori/dist/SideNavigation.js";
import  "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
import  "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";

// Icons
import "@ui5/webcomponents-icons/dist/bell.js";
import "@ui5/webcomponents-icons/dist/building.js";
import "@ui5/webcomponents-icons/dist/company-view.js";
import "@ui5/webcomponents-icons/dist/customer.js";
import "@ui5/webcomponents-icons/dist/insurance-life.js";
import "@ui5/webcomponents-icons/dist/lab.js";
import "@ui5/webcomponents-icons/dist/money-bills.js";
import "@ui5/webcomponents-icons/dist/product.js";
import "@ui5/webcomponents-icons/dist/incident.js";
import "@ui5/webcomponents-icons/dist/log.js";
import "@ui5/webcomponents-icons/dist/email.js";
import "@ui5/webcomponents-icons/dist/message-information.js";

[hrstoyanov]

If I narrow down to just rolling up the Avatar component, below is the generated bundle - You will see there is no export anywhere - the exports were stripped from original sources. The lasyt line, Avatar.define() from the original JS file is there, but not the follow-up export. What am I doing wrong?

[hrstoyanov]

Another issue that might be related:
The rollup-plugin-terser plug-in, if applied during roll up, will mangle the Avatar class name, perhaps because it is not exported ...

[hrstoyanov]

@pskelin @ilhan007 any help here?

[pskelin]

I wonder why you need the component classes to be exported? We mostly rely that importing them will have the side effect of calling define(), and from that point on they are available as tag names in the DOM to be used by any framework.

You never call new Avatar(), but instead use the DOM APIs like document.createElement("ui5-avatar") and for the latter you don't need anything exported.

In case you need some APIs from the base project, you need to export them yourself from your bundle like this:

import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
export { getTheme, setTheme };

[hrstoyanov]

@pskelin @ilhan007
See the attached files :
jsfiles.zip

App.js uses lit-html to render the base UI in its view() method. But for this to happen, I need to import some SAP UI5 web components , which I do via the deps.js file (See this for background on why deps.js is used as such)

When I run this, the following error shows in Chrome console:

127.0.0.1/:1 Uncaught SyntaxError: The requested module '../lib/sapui5.js' does not provide an export named 'ShellBar'

where ../lib/sapui5.js is the rolled up bundle as per your recommendations, and I expected it to re-export all components as is the case with the original sources.

[hrstoyanov]

.. try to create a simple app like App.js . You dont need lit-html, try standard template to render the SAPUI5 html like in my view() method.

[pskelin]

The bundle does not export the classes that you try import in your application, that's why you get the error.

My point was that you don't actually need the classes in your app as you don't use them directly, so just remove them from the import.

instead of

import {
   ShellBar, SideNavigation, SideNavigationItem, SideNavigationSubItem
}
    from '../lib/sapui5wc.esm.js';

import just the bundle:

import from '../lib/sapui5wc.esm.js';

The bundle will import the web components, the web components modules will call the define() method and whatever is rendered via lit-html like <ui5-shellbar> will be the populated by the browser. The define method is doing the necessary work to tell the browser which HTML tag name is implemented by which UI5 web component class, and the import of the webcomponent class is enough for that - no exports necessary.

[hrstoyanov]

@psekelin - thanks! That seems to work, but i now have to do:

import from '../lib/sapui5wc.js';

in every file! ...So, what happens if I want to switch to: ../lib/sapui5wc.min.js ? I guess I have to edit every file?

This is a problem that the above deps.js solves so elegantly (borrowed from the Deno community) - there is only one place to make such change.

... Either that or wait for Import maps to arrive .

[pskelin]

What setup are you trying to achieve? What files are you importing the bundle from? Can you describe it in more detail please?

In a productive usage, you will import the components directly in the views that use them and the build will create one bundle.

If you create a bundle and want to use it in multiple pages, that is an independent problem from how you import the web components.

[hrstoyanov]

@pskelin this is probably outside the topic of this discussion (which you resolved for me, thanks again!).

... Overall, I am trying to use modern JS practices and utilize CDNs such as skypack.dev as much as possible and not have to use any form of bundling or old build tools (npm, webpack, rollup, snowpack) . SAPUI 5 WC is the one thing in my stack however that I cannot get from a CDN .

[pskelin]

CDN consumption is mostly nice for development, but serving too many files for production is never good for performance. In the end, all tools should be able to generate a bundle for production.

I see that snowpack 3 was just released and does just that.
From the announcement of the 3.0 version:
https://www.snowpack.dev/posts/2021-01-13-snowpack-3-0
There is a link to the documentation for creating bundles:
https://www.snowpack.dev/guides/optimize-and-bundle

snowpack build builds your site into web native JS, CSS, and HTML files. This “unbundled” deployment can be enough for small sites, but many developers prefer to optimize and bundle their final site for production performance.

So my suggestion is:

• ignore the warning that assets are not inlined for the development and use CDN for consuming webcomponents (although refresh might be slow)
• give the bundling a try. I think it will still inline the assets, but I am preparing a change in the webcomponents which should address this and help for the CDN usage as well.

[hrstoyanov]

Thanks @pskelin !
.... Remember, snowpack was my first choice, but it did not work out. See here and here. I doubt Showpack 3 fixed the issue you found, but if you make it work, please document it well in the SAP UI5 docs. This is one of the big frustrations for SAP UI5W newcomers!

I think "CDN only, no bundle tools" can be a very useful approach for a whole class of web apps that fully embrace modern ESM modules and unbundled distribution. Combined with local caching, HTTP2, high availability and geographical server distribution of modern CDNs like skypack.dev, JSDeliver etc. this becomes the easiest development approach. What is missing is import maps to help with versioning and caching (but this can largely be accomplished with the deps.js approach that the Deno community advocates and i poset here).

Ideally, I would love to pick and choose my SAP UI5 web components from skypack.dev CDN as expressed here. HTTP2 and the high performance of pinned assets is all I need! And it seems skypack.dev is really close to doing this , but it would ned some help from the SAP UI5 WC developers!

Of course, there are companies paranoid about the web assets their apps use where everything not coming from a local bundle or local CDN is forbidden.

[pskelin]

@hrstoyanov not sure if you have given it a try recently, but thanks to your questions we improved the asset handling to work with the modern build tools.

You can have a look at this PR for more information.
#2740

Thanks for triggering this improvement and any further feedback is welcome.

[hrstoyanov]

Thank you all! I am about to get back to my SAP UI5 projects and will test the new builds!
Also a question: will SAP UI 5 work with import maps, already available chromium browsers:

https://github.com/WICG/import-maps#the-basic-idea

[pskelin]

Yes, import maps do work. I have created an example here, since the mappings are not quite clear:

https://codesandbox.io/s/ui5-web-components-with-import-maps-xkdm6?file=/index.html

Asset imports will still need a build tool however, as the json imports are not standardized in browsers yet. This works perfectly with snowpack, as it creates a .js file out of the json file and uses the dynamic import for a single request.

So use import maps for no tools at all (no asset support, chrome only) or use snowpack, vitejs for a bundleless dev experience and a build as well.