Giter VIP home page Giter VIP logo

openui5-webpack's Introduction

OpenUI5 Webpack

This repository contains some projects to build OpenUI5/SAPUI5 applications with webpack.

Projects

openui5-webpack-plugin

This is the main plugin for webpack to build UI5 applications. It enables webpack to understand the UI5 module system.

Documentation

openui5-render-loader

By default UI5 controls don't have a dependency to their renderer. This loader scans UI5 controls and adds a dependency to the control, so that the renderer is included in the build.

Documentation

openui5-xml-loader

This loader parses XML views and adds all controls used in XML views as dependency.

Documentation

openui5-manifest-loader

The manifest loader preprocesses a manifest.json file and adds dependencies for the libraries and modules specified in it.

Documentation

Install

Please check the README.md files of the sub packages to find out more about how to install and configure the different plugins/loaders.

Usage

Depending on your project setup you will need a different combination of plugin and loaders.

  • openui5-webpack-plugin is always needed
  • openui5-renderer-loader is always needed
  • openui5-xml-loader is only needed if you use XML Views in your application
  • openui5-manifest-loader is only needed if you have a component and a separate manifest.json file

Check out the modified openui5-sample-app for a working example.

openui5-webpack's People

Contributors

cevou avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

openui5-webpack's Issues

Examples?

Hello. Thanks for a very interesting project.

Would it be possible to add an example or getting started?

Webpack 3 example?

Hi!

I'm trying to setup a React/webpack/babel project we have to utilize some of the SAPUI5 code and came across this loader. Unfortunately due to upstream issues we still have to use Webpack 3 for now. Can you tell me at what version that webpack 3 was still supported? And did that have any particular dependencies on the SAP/OpenUI5 version as well?

Adding a theme from another directory

Hello,

I would like to add a theme which is not a standard theme and thus not located in sap/ui/core/themes/ how would I go about doing this?

I tried to add my theme path to the rootPaths Array but with no success. Thanks in advance.

Namespace Assumption in openui5-xml-loader

I was setting up a webpack.config for a project, and I got some errors. After doing some research and looking in the sources, I came to the conclusion that it's not guaranteed that FragmentDefinition or View are always in the "core:" or "mvc:" namespace. Even in the official libraries this is not always the case. See: RuleUpdate.fragment

This causes an error:

WARNING in ./node_modules/@openui5/sap.ui.fl/src/sap/ui/fl/support/apps/contentbrowser/view/ContentDetails.view.xml
Module build failed (from ./node_modules/openui5-xml-loader/dist/index.js):
TypeError: Cannot read property '$' of undefined
    at [...]\node_modules\openui5-xml-loader\dist\index.js:56:31
    at Parser.<anonymous> ([...]\node_modules\xml2js\lib\parser.js:303:18)
    at Parser.emit (events.js:182:13)
    at SAXParser.onclosetag ( [...]\node_modules\xml2js\lib\parser.js:261:26)
    at emit ( [...]\node_modules\sax\lib\sax.js:624:35)
    at emitNode ( [...]\node_modules\sax\lib\sax.js:629:5)
    at closeTag ( [...]\node_modules\sax\lib\sax.js:889:7)
    at SAXParser.write ( [...]\node_modules\sax\lib\sax.js:1436:13)
    at Parser.exports.Parser.Parser.parseString ( [...]\node_modules\xml2js\lib\parser.js:322:31)
    at Parser.parseString ( [...]\node_modules\xml2js\lib\parser.js:5:59)
    at exports.parseString ( [...]\node_modules\xml2js\lib\parser.js:354:19)
    at Object.module.exports ( [...]\node_modules\openui5-xml-loader\dist\index.js:47:27)
 @ . openui5 resources
 @ ./node_modules/@openui5/sap.ui.core/src/sap/ui/core/Component.js
 @ ./node_modules/@openui5/sap.ui.core/src/sap/ui/core/ComponentContainer.js
 @ ./src/index.js

view = result['core:FragmentDefinition'];

I am using Yarn:

"@openui5/sap.m": "~1.56.3",
"@openui5/sap.tnt": "1.56.3",
"@openui5/sap.ui.core": "^1.56.3",
"@openui5/sap.ui.support": "1.56.3",
"@openui5/sap.ui.table": "^1.56.3",
"@openui5/themelib_sap_belize": "^1.56.3"

and

"openui5-renderer-loader": "^0.1.0",
"openui5-theme-base-loader": "^0.2.0",
"openui5-theme-loader": "^0.2.0",
"openui5-webpack-plugin": "^0.2.1",
"openui5-xml-loader": "^0.2.0",

Thank you.

Does this work with 1.52 versions?

I've my problems to get this to work with openui5 1.52.10 (latest stable).

WARNING in ./node_modules/openui5.runtime.downloader/lib/resources/sap-ui-core.js
Module not found: Error: Can't resolve 'vertx' in 'C:\Users\\node_modules\openui5.runtime.downloader\lib\resources'
 @ ./node_modules/openui5.runtime.downloader/lib/resources/sap-ui-core.js 108:1496-1506
 @ ./src/index.js

ERROR in ./node_modules/openui5.runtime.downloader/lib/resources/sap-ui-core.js
Module not found: Error: Can't resolve './IPv6' in 'C:\Users\\node_modules\openui5.runtime.downloader\lib\resources'
 @ ./node_modules/openui5.runtime.downloader/lib/resources/sap-ui-core.js 94:84-101
 @ ./src/index.js

ERROR in ./node_modules/openui5.runtime.downloader/lib/resources/sap-ui-core.js
Module not found: Error: Can't resolve './SecondLevelDomains' in 'C:\Users\\node_modules\openui5.runtime.downloader\lib\resources'
 @ ./node_modules/openui5.runtime.downloader/lib/resources/sap-ui-core.js 94:102-133
 @ ./src/index.js

ERROR in ./node_modules/openui5.runtime.downloader/lib/resources/sap-ui-core.js
Module not found: Error: Can't resolve './punycode' in 'C:\Users\\node_modules\openui5.runtime.downloader\lib\resources'
 @ ./node_modules/openui5.runtime.downloader/lib/resources/sap-ui-core.js 94:62-83

I've tried to configure something for the missing resolves, but I don't know why they are not found.
I've

resolve: {
    'modules': [
      'node_modules/openui5.runtime.downloader/lib/resources/sap/core',
      'node_modules/openui5.runtime.downloader/lib/resources/sap/m',
      'node_modules/openui5.runtime.downloader/lib/resources/sap/ui/thirdparty',
      'node_modules/openui5.runtime.downloader/lib/resources',
      'node_modules'
    ]
  },

and sap-ui-core.js is in 'node_modules/openui5.runtime.downloader/lib/resources' and e.g. punycode.js would be in 'node_modules/openui5.runtime.downloader/lib/resources/sap/ui/thirdparty'.

Do you know what to do?

Webpack build failing at sample application

There seems to be multiple issues on the openui5-sample-app application referenced in README.

  • openui5-manifest-loader seems to be a devDependency, but is not listed in package.json
  • After adding openui5-manifest-loader as a devDependency, when trying to run npm run build, some other SAPUI5 libraries seems to be missing, like @openui5/sap.ui.support and @openui5/sap.ui.testrecorder.
  • Even after adding these two libraries, sap.ui.support and sap.ui.testrecorder, I still get the following errors when trying to build:
Module not found: Error: Can't resolve 'sap/ui/testrecorder/Bootstrap' in '/Users/i847991/SAPDevelop/openui5-sample-app/node_modules/@openui5/sap.ui.core/src/sap/ui/core/support/techinfo'
 @ ../node_modules/@openui5/sap.ui.core/src/sap/ui/core/support/techinfo/TechnicalInfo.js 308:3-312:5
 @ ../node_modules/@openui5/sap.ui.core/src/sap/ui/core/support/Hotkeys.js
 @ ../node_modules/@openui5/sap.ui.core/src/jquery.sap.global.js
 @ ../node_modules/@openui5/sap.ui.core/src/sap/ui/core/Core.js
 @ ./app.js

ERROR in ../node_modules/@openui5/sap.ui.core/src/sap/ui/test/RecorderHotkeyListener.js
Module not found: Error: Can't resolve 'sap/ui/testrecorder/Bootstrap' in '/Users/i847991/SAPDevelop/openui5-sample-app/node_modules/@openui5/sap.ui.core/src/sap/ui/test'
 @ ../node_modules/@openui5/sap.ui.core/src/sap/ui/test/RecorderHotkeyListener.js 28:5-33:7
 @ ../node_modules/@openui5/sap.ui.core/src/jquery.sap.global.js
 @ ../node_modules/@openui5/sap.ui.core/src/sap/ui/core/Core.js
 @ ./app.js

Compilation errors with OpenUI5/SAPUI5 1.54+

Hi,

I tried https://github.com/cevou/openui5-sample-app. It works fine with UI5 1.52. However, I ran into several issues in UI5 1.54 and 1.56. I was able to get it running by twisting the UI5 source code a little. But it is of course not a solution. Please suggest a solution for this issue.

I will explain the issues I encountered as follows. jquery.sap.global has changed in 1.54 to use sap.ui.define. Several imports in openui5-sample-app are no longer required.

sap.ui.define([
	// new sap/base/* modules
	"sap/base/util/now",
	"sap/base/util/getObject", "sap/base/util/getter", "sap/base/Version",
	"sap/base/util/extend", "sap/base/assert", "sap/base/log",
	// new sap/ui/* modules
	"sap/ui/Configuration", "sap/ui/dom/appendHead", "sap/ui/dom/computedStylePolyfill", "sap/ui/dom/activeElementFix", "sap/ui/dom/includeScript",
	"sap/ui/dom/includeStylesheet", "sap/ui/initjQuerySupport", "sap/ui/initSupportHooks", "sap/ui/initjQueryBrowser",
	"sap/ui/security/FrameOptions", "sap/ui/performance/Measurement", "sap/ui/performance/Interaction", "sap/ui/performance/ResourceTimings",
	"sap/ui/bootstrap/StoredConfig", "sap/ui/SyncPoint", "sap/ui/XHRProxy",
	// former sap-ui-core.js dependencies
	"sap/ui/Device", "sap/ui/thirdparty/URI",
	"sap/ui/thirdparty/jquery",
	"sap/ui/thirdparty/jqueryui/jquery-ui-position",
	"ui5loader-autoconfig"
], function(now, getObject, getter, Version, extend, assert, log,
     Configuration, appendHead, computedStylePolyfill, activeElementFix, includeScript,
     includeStylesheet, initjQuerySupport, initSupportHooks, initjQueryBrowser,
     FrameOptions, Measurement, Interaction, ResourceTimings,
     StoredConfig, SyncPoint, XHRProxy,
     Device, URI,
     jQuery/*, jqueryUiPosition, ui5loaderAutoconfig*/) {
     .......
}

Based on the order of issues I ran into, the major changes that cause the problems are listed below:

  • A new dependency ui5loaderAutoconfig. I added two import statements to solve this problem.
import "ui5loader";
import "ui5loader-autoconfig";

In addition, ui5loaderAutoconfig validates baseURL by checking the global scope window['sap-ui-config'].

window["sap-ui-config"] = {
      theme: "sap_belize",
      bindingSyntax: "complex",
      compatVersion: "edge",
      resourceRoots: {
        '': 'resources/'
      }
    };
  • In the main function of jquery.sap.global, the following throws cannot access jquery of undefinied (i..e fn is undefined). I debugged into this line, the problem is jQuery is evaluated to empty object "{}". I haven't got time to investigate why jQuery is not evalued to "sap/ui/thirdparty/jquery", since Device, URI, and other dependencies are evaluated successfully.
var oJQVersion = Version(jQuery.fn.jquery);

To temporarily remove this runtime error, I import "jquery.sap.global-dbg" instead. In the -dbg version, I commented out the jQuery parameter and instead usingjQuery that has been instantiated in global scope through script-loader. See the changes I made below.

sap.ui.define([
	......
	// former sap-ui-core.js dependencies
	"sap/ui/Device", "sap/ui/thirdparty/URI",
	"sap/ui/thirdparty/jquery",
	"sap/ui/thirdparty/jqueryui/jquery-ui-position",
	"ui5loader-autoconfig"
], function(now, getObject, getter, Version, extend, assert, log,
     ......
     Device, URI/*,
     jQuery, jqueryUiPosition, ui5loaderAutoconfig*/) {
     .......
}
  • Similarly, I referred to "sap/ui/initjQuerySupport-dbg" instead of "sap/ui/initjQuerySupport" in jquery-sap-global, and removed the jQuery passed to the main function in sap.ui.define for initjQuerySupport.

Please kindly help on these issues.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.