{"id":16163472,"url":"https://github.com/marianfoo/ui5-errorhandler-sample","last_synced_at":"2025-04-07T04:28:38.987Z","repository":{"id":43746809,"uuid":"461270798","full_name":"marianfoo/ui5-errorhandler-sample","owner":"marianfoo","description":null,"archived":false,"fork":false,"pushed_at":"2022-02-20T09:18:42.000Z","size":25,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-13T08:52:39.589Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marianfoo.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-19T17:57:14.000Z","updated_at":"2022-02-19T17:57:30.000Z","dependencies_parsed_at":"2022-08-22T08:21:04.600Z","dependency_job_id":null,"html_url":"https://github.com/marianfoo/ui5-errorhandler-sample","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fui5-errorhandler-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fui5-errorhandler-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fui5-errorhandler-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fui5-errorhandler-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marianfoo","download_url":"https://codeload.github.com/marianfoo/ui5-errorhandler-sample/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247592204,"owners_count":20963477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T02:35:51.619Z","updated_at":"2025-04-07T04:28:38.968Z","avatar_url":"https://github.com/marianfoo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# npmpackagesample\n\nThis sample shows how to use npm packages.\nTwo examples are shown here:\n- How to consume a UI5 AMD style module\n- How to consume a classic js class\n\nWe will consume `@marianfoo/ui5-errorhandler`.  \nRepo is here https://github.com/marianfoo/ui5-errorhandler  \nThe two options are in [UI5 style ErrorHandler](https://github.com/marianfoo/ui5-errorhandler/blob/main/ErrorHandler.js) and [js class style ErrorHandler](https://github.com/marianfoo/ui5-errorhandler/blob/main/ErrorHandlerClass.js).\n\n\n## UI5 AMD style module\n\n### NPM Package\n\nIn npm package [ui5.yaml](https://github.com/marianfoo/ui5-errorhandler/blob/main/ui5.yaml) , the ressource path is defined as:\n\n```yaml\nresources:\n  configuration:\n    paths:\n      \"/resources/cc/errorhandler/\": \"./\"\n```\n\n### Consume in UI5 Sample App\n\nIn the [`package.json`](https://github.com/marianfoo/ui5-errorhandler-sample/blob/main/package.json) file, we have the following entries:\n\n```json\n    \"dependencies\": {\n        \"@marianfoo/ui5-errorhandler\": \"^0.0.4\"\n    },\n```\n\n```json\n    \"ui5\": {\n        \"dependencies\": [\n            \"ui5-middleware-simpleproxy\",\n            \"@marianfoo/ui5-errorhandler\"\n        ]\n    }\n```\n\nConsume it in the UI5 app with the resource path as defined in the npm package ([Component.js](https://github.com/marianfoo/ui5-errorhandler-sample/blob/main/uimoduleui5/webapp/Component.js)):\n\n```js\nsap.ui.define(\n    [\"sap/ui/core/UIComponent\", \"sap/ui/Device\", \"de/marianzeis/npmpackagesample/model/models\", \n    \"cc/errorhandler/ErrorHandler\"\n    ],\n    function (UIComponent, Device, models, ErrorHandler) {\n        \"use strict\";\n\n        return UIComponent.extend(\"de.marianzeis.npmpackagesample.Component\", {\n            metadata: {\n                manifest: \"json\",\n            },\n            init: function () {\n                // call the base component's init function\n                UIComponent.prototype.init.apply(this, arguments);\n\n                // enable routing\n                this.getRouter().initialize();\n\n                // set the device model\n                this.setModel(models.createDeviceModel(), \"device\");\n\n                this._oErrorHandler = new ErrorHandler(this);\n            },\n        });\n    }\n);\n```\n\n\n## javaScript Class style module (any other npm package)\n\n\nIn the [ui5.yaml](uimodulenonui5/ui5.yaml) file, we have the following entries:\n\n```yaml\nserver:\n    customMiddleware:\n        ...\n        - name: ui5-tooling-modules-middleware\n          afterMiddleware: compression\nbuilder:\n  customTasks:\n  - name: ui5-tooling-modules-task\n    afterTask: replaceVersion\n```\n\nIn [package.json](package.json):\n\n```json\n    \"devDependencies\": {\n        \"ui5-tooling-modules\": \"^0.1.2\",\n        \"@marianfoo/ui5-errorhandler\": \"^0.0.1\"\n    },\n    \"ui5\": {\n        \"dependencies\": [\n            \"ui5-tooling-modules\"\n        ]\n    }\n```\n\nWe consume it in [Component.js](uimodulenonui5/webapp/Component.js) with the npm package name:\n\n```js\nsap.ui.define(\n    [\"sap/ui/core/UIComponent\", \"sap/ui/Device\", \"de/marianzeis/npmpackagesample/model/models\", \n    \"@marianfoo/ui5-cc-errorhandler/ErrorHandlerClass\"],\n    function (UIComponent, Device, models, ErrorHandler) {\n        \"use strict\";\n\n        return UIComponent.extend(\"de.marianzeis.npmpackagesample.Component\", {\n            metadata: {\n                manifest: \"json\",\n            },\n            init: function () {\n                // call the base component's init function\n                UIComponent.prototype.init.apply(this, arguments);\n\n                // enable routing\n                this.getRouter().initialize();\n\n                // set the device model\n                this.setModel(models.createDeviceModel(), \"device\");\n\n                this._oErrorHandler = new ErrorHandler(this);\n            },\n        });\n    }\n);\n```\n\nNow the javaScript class is wrapped:\n### Before\n```js\nvar BaseObject = require('sap/ui/base/Object');\nvar MessageBox = require('sap/m/MessageBox');\n\nmodule.exports = class ErrorHandler extends BaseObject {\n// ************************************************************************************************************\n\t\t// Constructor\n\t\t// ************************************************************************************************************\n\n\t\t/**\n\t\t * Constructor Method of the error handler. Initialises the error handler for the default model of the component.\n\t\t * @public\n\t\t * @constructor\n\t\t * @param {sap.ui.core.UIComponent} oComponent Reference to the component of the app\n\t\t * @method module:controller/ErrorHandler#constructor\n\t\t */\n\t\t constructor(oComponent) {\n```\n### After (how the ui5 app is consuming it)\n```js\nsap.ui.define(['sap/ui/base/Object', 'sap/m/MessageBox'], (function (require$$0, require$$1) { 'use strict';\n\n\tfunction _interopDefaultLegacy (e) { return e \u0026\u0026 typeof e === 'object' \u0026\u0026 'default' in e ? e : { 'default': e }; }\n\n\tvar require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);\n\tvar require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);\n\n\tvar BaseObject = require$$0__default[\"default\"];\n\tvar MessageBox = require$$1__default[\"default\"];\n\n\tvar ErrorHandlerClass = class ErrorHandler extends BaseObject {\n\t// ************************************************************************************************************\n\t\t\t// Constructor\n\t\t\t// ************************************************************************************************************\n\n\t\t\t/**\n\t\t\t * Constructor Method of the error handler. Initialises the error handler for the default model of the component.\n\t\t\t * @public\n\t\t\t * @constructor\n\t\t\t * @param {sap.ui.core.UIComponent} oComponent Reference to the component of the app\n\t\t\t * @method module:controller/ErrorHandler#constructor\n\t\t\t */\n\t\t\t constructor(oComponent) {\n```\n## Credits\n\nThis project has been generated with 💙 and [easy-ui5](https://github.com/SAP)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarianfoo%2Fui5-errorhandler-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarianfoo%2Fui5-errorhandler-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarianfoo%2Fui5-errorhandler-sample/lists"}