sap-archive / grunt-openui5 Goto Github PK

When i try and use openui5_connect the server starts and then stops almost immediately.

I noticed that if i set options keepalive:true it stays open

not sure if this is a bug or just missing from the doucmentation

The preload task fails for me without error if a JS file that should be included contains syntax errors.

Creating preload module for the/sample/app/Component.js
Reading sample_app/webapp/Component.js...OK
Adding the/sample/app/Component.js (160 B → 116 B)
Reading sample_app/webapp/util/util.js...OK

Done.

It seems to fail when invoking minification.

I would expect to get an error message saying something like *Minifying file xyz failed".

It seems as if this can be done with a simple try-catch block. I could provide a PR.

What do you think?

Related to #20

Are there any plans to provide plain node.js programatic APIs for OpenUI5 dev flows?

That will enable supporting any build system and avoids coupling the development flows to a build system that is becoming less and less popular and common...

See:

• https://stateofjs.com/2016/buildtools/
  • That is from 2016, the 2017 survey results should hopefully be released soon.
• http://www.npmtrends.com/grunt-vs-gulp

Just to emphasize I'm not saying there should be gulp or webpack plugins for Openui5 dev flows.
Instead there should be generic APIs which could be reused in any javaScript build tool.

Thanks.
Shahar.

Hi there,

I have similar grunt config to your sample-app, but use different directory names:

grunt.initConfig({

    dir: {
        src: 'src',
        dist: 'dist'
    },

    openui5_preload: {
        component: {
            options: {
                resources: {
                    cwd: '<%= dir.src %>',
                    prefix: ''
                },
                dest: '<%= dir.dist %>'
            },
            components: true
        }
    },

When run, I get:
Warning: No files found for pattern(s): "/**"! Use --force to continue.

I don't need/want a prefix. I've also noticed that if I start adding in prefixes to keep the warning quiet, the app doesn't use the Component-preload.js, it still reads in each of the Controllers/Views.

Snippet of my index.html:

<script type="text/javascript" id="sap-ui-bootstrap" src="sdk/openui5-runtime-1.30.8/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-libs="sap.m" data-sap-ui-resourceroots='{ "com.ffa.dash": "./", "view" : "./view", "util" : "./util", "thirdparty" : "./thirdparty" }'>
</script>

Directory structure:
app
-- util
-- view
---- App.controller.js
---- App.view.xml

Declaration from App controller:

jQuery.sap.declare("view.App");

// Provides controller view.App
sap.ui.define(['jquery.sap.global', 'com/ffa/dash/util/Controller'],
function(jQuery, Controller) {
"use strict";

var App = Controller.extend("view.App", /** @lends view.App.prototype */ {

});

    return App;

}, /* bExport= */ true);

Hi Guys,

I am not able to figure this out why I am keep getting this error
"Warning: No files found. Check your "resources" option! Use --force to continue." I have correct file structure

Hi,

When using grunt-openui5 dependency, a security issue raised:
npm WARN notice [SECURITY] mime has 1 moderate vulnerability. Go here for more details: https://nodesecurity.io/advisories?search=mime&version=1.2.11 - Run npm i npm@latest -g to upgrade your npm version, and then npm audit to get more info.

The problematic mime version is used from less-openui5 dependency.
I have opened an issue also to less-openui5: SAP/less-openui5#25
Once it is fixed, grunt-openui5 should be updated to

Thanks,
Gaia

I found a very minor but curious problem. Your preload task for building a library produces the file
library-preload.json. But OpenUI5 appears to expect library-preload.js and only does a fallback to .json, if that file is not found.

failed to load Javascript resource: xxx/lib/library-preload.js
failed to load 'xxx/lib/library-preload.js' (undefined), falling back to library-preload.json

It would be super-easy to add the target extension as an option. Would you consider this, or is it a conscious decision to go with .json and OpenUI5 will not expect .js at some point?

I have an app with a sub component:

app
|- Component.js
|- model
|...
|- shared
   |- Component.js
   |- model
   |...

When I build the project with "components: true" the app/Component-preload.js contains all the resources including the ones from shared.
I would have expected that each component only provides its recources and not the ones of sub components. Or is this intentionally?

This is closely related to issue #13 which you closed. If you see my final comment on that issue you'll see that I believe it is more widely used to have resources in the root folder than in a webapp folder.

When using the root folder the openui5_connect task won't serve the resources straight away - there is a long delay of a couple of minutes before it works. Any refresh takes equally long.

I have excluded some of the folders like so (to try and ensure its not scanning them for some reason?):

src: {
    options: {
        appresources: [
            "!./node_modules",
            "!./model",
            "!./bower_components",
            "<%= dir.webapp %>"
        ]
    }
},

When I use the grunt-contrib-connect module on its own this all works perfectly well.

connect: {
    options: {
        port: "<%= localServerPort %>",
        livereload: 35729,
        hostname: "localhost",
        base: "."
    },

    // Must have at least one connect task!
    livereload: {
    }

Hello everyone,

i tried to allow corse for our local development environment using this snippet:

cors: {
  origin: '*'
}

But it doesnt't show any reaction. Do i have to specify this option for openui5_connect or for:

    grunt.initConfig({
        connect: {
            options: {
                port: 8080,
                hostname: '*'
                // add corse support here?
           },
        },

can someone give me a hint how it should be used to allow external uses in my local environment?
I also tried adding a middleware and print some test messages, but these area also being ignored:

      middleware: function(connect, options, middlewares) {
        middlewares.unshift(function(req, res, next) {
          console.log("Test unshift");
          res.setHeader('Access-Control-Allow-Origin', '');
          res.setHeader('Access-Control-Allow-Methods', '');
          next();
        });
        middlewares.push(function(req, res, next) {
          console.log("Test push");
          // after openui5 middleware
        });
        return middlewares;
      }

It looks like this is being iggnored in favor of openui5_connect - so how do i add support? or must i enable it in the browser...?

@matz3 - Currently component-preload file is cached in the browser, is there is a way to avoid this. Cant able to use cache-buster as we are using HANA.

So is there is a way to explicitly include component-preload, similar to manifestUrl in configuration.

Hello, I'd like to suggest adding ascii_only: true to preload task of this plugin. The reason is that after minification escaped national symbols are converted back into plain.

This issue has been discussed in relevant UglifyJS issue.

With UI5 version 1.40 a new library-preload format has been introduced which is now aligned with the Component-preload.

Both files are now .js files which need to register the preloaded files on their own.
The easiest way to achieve this would be to wrap the JSON object (current content of the library-preload.json) with a jQuery.sap.registerPreloadedModules() call, like it is done for the Component-preload.js.

Tasks

• Change library-preload from .json to .js (breaking change for UI5 < 1.40)
• Add option to get the old behavior back (for compatibility with older versions like 1.28 / 1.38)

See

SAP/openui5@9b5b98c
SAP/openui5#1124
SAP/openui5#1115 (comment)

Hi, I was wondering if it is possible to autogenerate the sourcemaps so that it is possible to work in chrome with CSS preprocessors

Currently, looking into grunt-contrib-less, because that appears to be less.Parser

Looking into http://stackoverflow.com/a/25732523/1123985 but having trouble reproducing solution.

This would greatly speed up ui5 css development!

Hello ,
are there possibility to run as livereload server ? I tried it . But I couldn't success.

When installing this package I got this warning by npm

npm WARN deprecated [email protected]: This was a fun hack, but now we have template literals, so use that instead.

The package in question is this one which has not had a release in 4 years and is marked as deprecated. Is it possible to get rid of this dependency?

Just wondering if you have an example Gruntfile using grunt-connect's proxy feature as I can't seem to get it to work.

For example.... When the app tries to load URL's from "/destinations/Northwind/v3/northwind/northwind.svc/" they should proxy to: "http://services.odata.orgv3/northwind/northwind.svc/"

Using the proxypath option as per the doco doesn't seem to engage the functionality...

Whitesource issues are reported in latest version of @sap/grunt-sapui5-bestpractice-build - 1.4.15
High severity issues are reported in below packages which are part of @sap/grunt-sapui5-bestpractice-build - 1.4.15
uglify-js - 3.4.10
xmldom - 0.7.5
terser - 5.14.1
async-1.5.2

Hi @matz3

Enhancement:
I'd like to also build the -dbg files for each controller/control in the built version of an app. This is simply a copy/paste/rename into the destination folder, but it means the ?sap-ui-debug=true flag will pick up the -dbg files for debugging productionised Fiori/UI5 apps.

Thoughts?

Please document all API options

Can be reproduced e.g. by using an undefined less variable in a less file and requesting the corresponding "library.css" file in the browser.

The less error should be logged and included in the css response instead of crashing the server.

/cc @Michadelic

Hi,

with version 0.10.0 I build my component-preload and do not have any problems. After updating to 0.13.0 I will get this error message:

"typeerror sap.ui.require.preload is not a function"

Does someone have the same problem?

screenshot: jquery.sap.global-dbg.js

successfully requested component-preload.js

Configuring the preload task isn't really straight-forward, especially with the prefix option which is important to get the correct namespaces.

See:

• #79
• SAP/openui5#2295

Hi guys,

I am having a bit of trouble generating the Component-Preload file.
In my Gruntfile I have the following configuration:

openui5_preload: {
      board: {
        options: {
          resources: {
            cwd: "src/board",
            expand: true,
            src: [
              "model/*.json",
              "view/*.view.xml",
              "fragment/*.fragment.xml",
              "controller/*.controller.js",
              "util/*.js",
              "lib/classes/*.js",
              "lib/controls/*.js",
              "Component.js",
            ],
          },
          dest: "dest/board",
          compress: true,
        },
        components: true,
        filter: function (sPath) {
          return !(
            sPath.includes("lib/lib1") ||
            sPath.includes("lib/lib2") ||
            sPath.includes("lib/lib3") ||
            sPath.includes("sw.js")
          );
        },
      },
    },

And my projects structure is as follows:

When I run grunt openui5_preload:board I am getting the warning Warning: No files found for pattern(s): "./**", "!./Component-preload.js"! Use --force to continue.

What am I doing wrong?

Any help will will be deeply appreciated.

Hello,

I have a problem, when minifying with openui5_preload that the included properties and css files are still requested seperately, altough they are included in the Component-preload.js.

This is my folder structure:

|   Gruntfile.js
|   package.json           
\---webapp
    |   Component.js
    |   index.html
    |   manifest.json
    +---controller
    |       View1.controller.js  
    +---css
    |       style.css
    +---i18n
    |       i18n.properties
    +---model
    |       models.js
    \---view
            View1.view.xml

I have the following openui5_preload config:

openui5_preload: {
    component: {
        options: {
            resources: {
                cwd: 'webapp',
                prefix: 'test/minification',
                src: [
                    '**/*.js',
                    '**/*.fragment.html',
                    '**/*.fragment.json',
                    '**/*.fragment.xml',
                    '**/*.view.html',
                    '**/*.view.json',
                    '**/*.view.xml',
                    '**/*.properties',
                    '**/*.json',
                    '**/*.css'
                ]
            },
            dest: 'dist'
        },
        components: 'test/minification'
    }
}

which generates the following Component-preload.js:

jQuery.sap.registerPreloadedModules({
    "version": "2.0",
    "name": "test/minification/Component-preload",
    "modules": {
        "test/minification/Component.js": "sap.ui.define([\"sap/ui/...",
        "test/minification/controller/View1.controller.js": "sap.ui.define([\"sap...",
        "test/minification/model/models.js": "sap.ui.define([\"sap/ui/model...",
        "test/minification/view/View1.view.xml": "<mvc:View controllerName=\"test...",
        "test/minification/i18n/i18n.properties": "title=Title\nappTitle = App...",
        "test/minification/manifest.json": "{\"_version\":\"1.1.0\",\"sap.app...",
        "test/minification/css/style.css": "/* Enter your..."
    }
});

When I run the app, then the i18n.properties and style.css file are still requested seperately:

What can I do to solve this issue? The app works when the properties and style files are not included (as you see in the plunk) - but it is still confusing that they are requested.

Here is my example app: (zip upload to issue did not work...)
https://www.dropbox.com/s/6nnieomdtn4eoq2/openui5_preload_example.zip?dl=0

Plunk here:
https://embed.plnkr.co/KWcMn1/

Looking at https://github.com/SAP/openui5-sample-app the app resources are within a webapp directory. If I try to use the openui5-preload task in the projects root directory instead of a subdirectory like webapp it finds no resources.
Would it be possible to provide an example usage of the preload grunt task when resources are in the root folder?

I'm using the following in my gruntfile where dir.webapp is "." (current directory or root directory of project):

dir: {
    webapp: ".",
    dist: "dist",
    bower_components: "bower_components"
},

connect: {
    options: {
        port: 8080,
        hostname: "localhost",
        base: "."
    },
    src: {},
    dist: {}
},

openui5_connect: {
    //options: {
    //  resources: [
    //      "<%= dir.bower_components %>/openui5-sap.ui.core/resources",
    //      "<%= dir.bower_components %>/openui5-sap.m/resources",
    //      "<%= dir.bower_components %>/openui5-themelib_sap_bluecrystal/resources"
    //  ]
    //},
    src: {
        options: {
            appresources: "<%= dir.webapp %>"
        }
    },
    dist: {
        options: {
            appresources: "<%= dir.dist %>"
        }
    }
},

openui5_preload: {
    component: {
        options: {
            resources: {
                cwd: "<%= dir.webapp %>",
                prefix: "todo"
            },
            dest: "<%= dir.dist %>"
        },
        components: true
    }
},

If I remove prefix: "todo" it actually outputs some info to the screen but says 0 files added. With the prefix in it outputs and does nothing...

Note also in the connect task above that I had to put base: "." to get it to allow access to the ui5 library when testing with https://openui5.hana.ondemand.com/resources/sap-ui-core.js

calc() expressions (https://developer.mozilla.org/en-US/docs/Web/CSS/calc) that contain a mix of units which cannot be simplified are being incorrectly modified.

For instance this .less input:

.percentMinusEm {
  width: calc(100%-1em);
}

Results in this CSS output:

.percentMinusEm {
  width: calc(99%);
}

I can see that this bug is not present in the latest version of less when I use the less compiler directly.
I see notice that code changes are required to update the version of the less dependency.

Hi experts,

there's a similar npm lib grunt-sapui5-bestpractice-build, and this webide guide tells user to use this one.
Could you tell me what's the difference between grunt-openui5 and grunt-sapui5-bestpractice-build, and how to choose between them?

also, In ui-tooling, there's a ui5-builder module, which can also be used to build ui5 project. Which one is the future, any suggestion ?

Would it be worth to support another import parameter in openui5_connect task for custom themes? Like it's done for other resource paths, e.g. 'appresources', 'resources' and 'test-resources'.

In the theme designer help, there is a parameter for setting themes via bootstrap configuration: data-sap-ui-theme-roots. In the WebIDE is this done via a separate route entry in neo-app.json file. For local development this file is not respected in openui5_connect task. It could be done in a separate middleware by the consumer of this grunt task, but for convenience reason I'd like to create a pull request with an dedicated parameter.

Any thoughts on this?

Steffen

Hi SAP UI5 Team,
On our team, we're not using grunt. We're using some gulp and mostly just vanilla node.
We still want to generate preload files. So I did a successful PoC of splitting up the grunt-preload functionality into a separate module, and removed the grunt dependency. Since it's 95% the same, it can easily be used by this grunt plugin. And can potentially be used by a gulp plugin, so they share the same core. It's the same modular approach used by many popular tools, include UglifyJS, Babel, and I see connect-openui5 as well.

I'd be happy to contribute my changes back, and agree to the Apache Contributor agreement (I already have for OpenUI5), if it's an approach you're interested in. I was something I had to do anyways for our build process, which is why I didn't gauge interest first.

Here is the core module. https://github.com/r-murphy/openui5-preload
And a fork of this project using it. https://github.com/r-murphy/grunt-openui5/tree/feature/openui5-preload-core

All tests pass. The core module uses the same unit tests, with some changes to actually make the preload from the tests, rather than from grunt.

I also tried it out in the openui5-worklist-app.

Thanks
Ryan

Hi
we are using the manifest.json within UI5 components.
Is it possible to include this in defaultResourcePatterns.
Or do we need to explicit do this in grunt command ?

thanks & regards,
Dirk

If I'm developing using resources from https://openui5.hana.ondemand.com/resources/sap-ui-core.js the openui5_connect tasks seems to block them. It only works for me when I specify a local directory for the UI5 resources... (such as when using the downloaded bower library files)?

As far as I understand the code is also mangled by default. Is it possible to add options.mangle true|false and pass it to UglifyJS?
https://github.com/SAP/grunt-openui5/blob/master/tasks/preload.js#L210

Created Fiori Elements project using WebIDE Full Stack and changed the table using Visual Editor to support "export to excel".
These kind of changes will not be included into the build result "dist" folder.
Is there any configuration missing ? or just Grunt build does not support Visual Editor changes?

Hi,

I wanted to submit a new Todo MVC example app for OpenUI5 and I included a Component-preload.js file to it. During testing, I realized that the produced code is not following their (quite strict) JSCS and JSHint rules:

• disallowQuotedKeysInObject = true
• validateQuoteMarks = single
• maximumLineLength = 120

Could we get an option to control the style of the output of the openui5_preload task?

I've experimented with various options in my Gruntfile.js. If I don't get the paths exactly right, the task complains about no files found. When I do get the paths right, it runs and says Done but doesn't create Component-preload file. See file structure on left of below screen shot, Gruntfile.js on right and task output bottom-right:

Any tips or advice would be appreciated.

Example:
In application https://github.com/SAP/openui5-sample-app I changed Gruntfile.js and I have error.
see attachment

In the README.md documentation, the headline level of "compatVersion" (https://github.com/SAP/grunt-openui5#compatversion) should be h4 (instead of h5), because it is a property under "options" (and not "resources") - technically proofed via trial & error in my Gruntfile ;)

FEATURE REQUEST

Currently it is not possible to use new JavaScript Features (const, let, Arrow Functions ...). Please update the compress task and replace the old UglifyJS2 module (supports only ES5) otherwise the whole preload task, which works great two years ago, is no longer usable...

Dear developers,

Here is an issue we faced recently.

We created a library. Name of git project + directory after clone is booking.ovp

Inside we created a library with nested modules.

However after build with grunt we have code like this:

{ "version": "2.0", "name": "booking.ovp.library-preload", "modules": { "booking.ovp/cards/charts/donut/Component.js": "sap.ui.define(

But in fact booking.ovp is a library name which means we expect to have modules like this in the file:
"booking/ovp/...

We fixed this problem by a small adjustement of preload.js:

Instead of this:
preloadObject.modules[preloadFile] = fileContent;

we set this:
preloadObject.modules[preloadFile.replace(/[.](?=.*[.])/, '/')] = fileContent;

In this case if folder name is a.b.c we'll have a/b/c path for modules.

How do you think can it be a standard solution?

Thanks!

I've built a Component-preload.js by [email protected] with compatVersion: "1.44" parameter since my SAPUI5 Core is 1.44.

The script:

openui5_preload: {

	component: {

		options: {

			resources: {

				cwd: "<%= dir.webcontent %>",
				prefix: "<%= dir.webapp %>/<%= dir.webcontent %>",
				src: [
					"**/*.js",
					"**/*.html",
					"**/*.json",
					"**/*.fragment.html",
					"**/*.fragment.xml",
					"**/*.fragment.json",
					"**/*.view.html",
					"**/*.view.xml",
					"**/*.view.json",
					"**/*.properties",
					"manifest.json",
					"!test/**"
				]
			},
			compatVersion: "1.44",

			dest: "<%= dir.dist %>"
		},

		components: "<%= dir.webapp %>/<%= dir.webcontent %>"
	}
}

As the result, I have a file, which contains everything I mentioned in the script, I store it in WebContent folder, and update the paths according to the hierarchy, just like it is described in the SAPUI5 book.

When I test it, I get a strange behaviour — a browser loads both Component-preload.js and all the files, which are mentioned in it. In other words, after generation of the preloader browser downloads it, but ignores its content and still requests the separate files, although they are already located in this preloader,

I want that the files, mentioned in the preloader, will not be requested as separate files by the browser. Otherwise, there is no any reason to use preloader. How can I fix it?

P.S. The issue is similar to Minified *.properties and *.css are still requested.

Hi,

I using grunt-openui5 version - 0.9.0 in my project.

The component-preloaded file is created through grunt in local if js files are available in subfolders example (test1/test2/test.js) are loaded again even they available in Component preload.

the code used in grunt below

openui5_preload : {
component : {
options : {
resources : {
cwd : 'src/test/resources/META-INF/resources',
prefix : 'iss',
src : [ 'test1/test2/**/.js', 'test1/test2/.js', 'manifest.json', 'Component.js', '!Component-preload.js' ]
},
dest : 'target/classes/META-INF/resources/min'
},
components : true
}
}

Other than "Component" file rest of the files are loaded again.

Please help me to resolve this issue.

Thanks in advance

Hi, I'm trying to include external files from my node_modules to build the library-preload.js
My actual Gruntfile.js is like this:

module.exports = function(grunt) {

	grunt.initConfig({

		dir: {
			src: 'src',
			src_thirdparty: 'node_modules/qrcode-generator',
			dest: 'dist',
		},

		copy: {

		},

		clean: {
			dist: '<%= dir.dest %>/**'
		},

		openui5_preload: {
			library: {
				options: {
					resources: [
						{
							cwd: '<%= dir.src_thirdparty %>',
							src: '**/qrcode.js'
						},
						'<%= dir.src %>'
					],
					dest: '<%= dir.dest %>',
					compatVersion: '1.44',
					compress: false
				},
				libraries: 'it/designfuture/qrcode'
			}
		}
	});

	// These publins provide necessary tasks
	grunt.loadNpmTasks('grunt-contrib-clean');
	grunt.loadNpmTasks('grunt-contrib-copy');
	grunt.loadNpmTasks('grunt-openui5');

	// Build task
	grunt.registerTask('build', ['openui5_preload']);

	// Default task
	grunt.registerTask('default', ['clean', 'build']);

};

it get aborted with this error:

Warning: No "library.js" found for pattern "it/designfuture/qrcode"! Use --force to continue.

Is there a way to do what I want to achieve?

Hi,

I have several UI5 resources I would like to bundle (a view, a controller and custom controls).
They are not defined by a component.js file.

Can such resources be bundled using openui5_preload, or does it only support library and/or component?

Thanks

It looks like the openui5_preload task by deafuly includes "Component-preload.js" files. Hence, with multiple executions fo the same task, the previous preload will always be appended and the file become bigger and bigger.

Is there a way to specifically exclude existing preload files from the SRC? I think this should also be a default

Hi,

I just started to use the grunt tools to create my custom build package so forgive my ignorance.

After the documented grunt build I would expect a complete resources tree, containing a sap-ui-core.js and a tree structure equivalent to the ready-to-run downloaded package.

Is there a command to achieve that?

Thanks for all the good code,

Roberto