cumulocity-hellowidget-plugin - npm Package Compare versions

Comparing version 2.2.2 to 2.3.0

cumulocity.json

@@ -5,2 +5,3 @@ {
   "key": "hellowidgetapp-application-key",
+  "tabsHorizontal": false,
   "imports": [
@@ -13,2 +14,3 @@ "core/c8yBranding",
     "core/assetTable",
+    "core/eventsBinary",
 
@@ -22,5 +24,7 @@ "devicemanagement/alarmList",
     "core/dashboard2",
+    "core/dashboardUI",
     "core/groupsHierarchy",
     "core/measurements",
     "core/map",
+    "core/alarmAssets",
 
@@ -34,3 +38,2 @@ "core/welcomeScreen",
     "cockpit/assetCount",
-    "core/alarmAssets",
     "cockpit/alarmRecent",
@@ -41,5 +44,6 @@ "cockpit/reports",
     "cockpit/dataPointExplorerUI",
+    "core/alarmsEventsExplorer",
 
     "core/deviceDatabase4",
-    "core/modbusWidgets",
+    "core/modbusWidget4",
     "core/scada",
@@ -50,6 +54,9 @@
     "core/dataPointTable",
+    "core/switchDisplay",
+    "core/trafficLightWidget",
+    "core/infoGauge",
+    "core/binary-file-download",
 
-    "core/babel-polyfill",
     "hellowidgetapp/hello-widget"
   ]
 }

karma.conf.js

 const _ = require('lodash');
 const glob = require('glob');
 const { readJsonSync } = require('fs-extra');
-const {
-  join,
-  dirname,
-} = require('path');
+const { join, dirname } = require('path');
 
-const APP_CONTEXT_PATH = process.argv[4] || 'pocs';
+const APP_CONTEXT_PATH = process.argv[4] || 'hellowidgetapp';
 
 const pluginJsFiles = _(glob.sync('plugins/**/*/cumulocity.json'))
   .flatMap(manifestFile =>
-    _.map(readJsonSync(manifestFile).js, (jsFile) => {
+    _.map(readJsonSync(manifestFile).js, jsFile => {
       let baseDir = dirname(manifestFile);
@@ -21,7 +18,8 @@
       return join(baseDir, jsFile);
-    }))
+    })
+  )
   .compact()
   .value();
 
-module.exports = (config) => {
+module.exports = config => {
   config.set({
@@ -38,3 +36,3 @@ singleRun: true,
       'plugins/**/*.spec.js',
-      'plugins/**/*.html',
+      'plugins/**/*.html'
     ],
@@ -52,3 +50,3 @@
       'karma-babel-preprocessor',
-      { 'preprocessor:c8y-pluginpath': ['factory', c8yPluginPathPreprocessor] },
+      { 'preprocessor:c8y-pluginpath': ['factory', c8yPluginPathPreprocessor] }
     ],
@@ -60,4 +58,7 @@
       // Match files in all plugins subfolders except vendor/ or lib/.
-      'plugins/*/{*.js,!(vendor)/**/*.js,!(lib)/**/*.js}': ['c8y-pluginpath', 'babel'],
-      'plugins/**/*.html': ['ng-html2js'],
+      'plugins/*/{*.js,!(vendor)/**/*.js,!(lib)/**/*.js}': [
+        'c8y-pluginpath',
+        'babel'
+      ],
+      'plugins/**/*.html': ['ng-html2js']
     },
@@ -72,3 +73,3 @@
       suppressSkipped: false, // do not print information about skipped tests
-      showSpecTiming: false, // print the time elapsed for each spec
+      showSpecTiming: false // print the time elapsed for each spec
     },
@@ -78,3 +79,3 @@
       cacheIdFromPath: filepath => filepath.replace(/^plugins\//i, ''),
-      moduleName: 'c8yHtml.test',
+      moduleName: 'c8yHtml.test'
     },
@@ -85,4 +86,4 @@
     client: {
-      captureConsole: false,
-    },
+      captureConsole: true
+    }
   });
@@ -93,3 +94,8 @@ };
   return (content, file, done) => {
-    done(content.replace(/:::PLUGIN_PATH:::/g, computePluginPath(file.originalPath)));
+    done(
+      content.replace(
+        /:::PLUGIN_PATH:::/g,
+        computePluginPath(file.originalPath)
+      )
+    );
   };
@@ -99,3 +105,3 @@ }
 function computePluginPath(filepath) {
-  const pluginName = (/plugins\/(.+?)\/+?/.exec(filepath))[1];
+  const pluginName = /plugins\/(.+?)\/+?/.exec(filepath)[1];
   //const pluginPath = `${APP_CONTEXT_PATH}_${pluginName}`;
@@ -102,0 +108,0 @@ const pluginPath = pluginName;

LICENSE.txt

@@ -1,2 +0,2 @@
-Copyright (c) 2017 Cumulocity GmbH
+Copyright (c) 2018 Cumulocity GmbH
 
@@ -3,0 +3,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

package.json

 {
   "name": "cumulocity-hellowidget-plugin",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "A demo app for showcasing creation of a custom Cumulocity UI widget plugin",
@@ -23,43 +23,45 @@ "keywords": [
   "scripts": {
-    "preinstall:clean": "node ./preinstall.js rimraf yarn",
+    "preinstall:clean": "node ./preinstall.js rimraf",
     "install:clean": "yarn upgrade || yarn install",
     "update": "yarn upgrade-interactive --latest",
-    "start": "c8y server -u https://developer.cumulocity.com -k",
+    "start": "c8y server -k -u https://developer.cumulocity.com",
     "build": "yarn clean && c8y build:app",
     "deploy:easy": "yarn clean:tmp && c8y deploy:target target.json",
-    "deploy:fast": "yarn deploy -- -p build/hellowidgetapp.zip",
+    "deploy:fast": "yarn deploy -p build/hellowidgetapp.zip",
     "deploy": "yarn clean:tmp && c8y deploy:app hellowidgetapp",
     "clean": "rimraf build",
     "clean:tmp": "rimraf _build_for_deploy",
-    "lint": "eslint --cache --",
-    "test": "karma start -- hellowidgetapp"
+    "lint": "eslint --cache",
+    "test": "karma start --",
+    "prettier": "prettier --write"
   },
   "dependencies": {
-    "babel-polyfill": "6.26.0",
-    "cumulocity-ui-build": "http://resources.cumulocity.com/webapps/ui/8.14.3.tar.gz"
+    "cumulocity-ui-build": "http://resources.cumulocity.com/webapps/ui/9.8.2.tar.gz"
   },
   "devDependencies": {
     "angular-mocks": "1.6.6",
-    "babel-core": "6.26.0",
-    "babel-eslint": "8.0.1",
+    "babel-core": "6.26.3",
+    "babel-eslint": "8.2.3",
     "babel-plugin-transform-object-rest-spread": "6.26.0",
-    "babel-preset-env": "1.6.1",
-    "cumulocity-tools": "2.0.26",
-    "eslint": "4.10.0",
+    "babel-preset-env": "1.7.0",
+    "cumulocity-tools": "2.1.14",
+    "eslint": "4.19.1",
     "eslint-config-airbnb-base": "12.1.0",
-    "eslint-plugin-import": "2.8.0",
-    "fs-extra": "4.0.2",
+    "eslint-config-prettier": "2.9.0",
+    "eslint-plugin-import": "2.12.0",
+    "fs-extra": "6.0.1",
     "glob": "7.1.2",
-    "jasmine-core": "2.8.0",
-    "karma": "1.7.1",
+    "jasmine-core": "3.1.0",
+    "karma": "2.0.3",
     "karma-babel-preprocessor": "7.0.0",
     "karma-chrome-launcher": "2.2.0",
-    "karma-jasmine": "1.1.0",
+    "karma-jasmine": "1.1.2",
     "karma-ng-html2js-preprocessor": "1.0.0",
     "karma-phantomjs-launcher": "1.0.4",
-    "karma-spec-reporter": "0.0.31",
-    "lodash": "4.17.4",
-    "sinon": "4.0.2",
+    "karma-spec-reporter": "0.0.32",
+    "lodash": "4.17.10",
+    "prettier": "1.13.5",
+    "sinon": "6.0.0",
     "tentacle.js": "0.1.0"
   }
 }

plugins/hello-widget/cumulocity.json

@@ -5,5 +5,3 @@ {
   "category": "Boilerplate",
-  "ngModules": [
-    "helloWidgetApp.helloWidget"
-  ],
+  "ngModules": ["helloWidgetApp.helloWidget"],
   "js": [
@@ -10,0 +8,0 @@ "widget.module.js",

plugins/hello-widget/text-input.component.js

@@ -5,15 +5,13 @@ /**
 
-(function () {
+(() => {
   'use strict';
 
-  angular
-    .module('helloWidgetApp.helloWidget')
-    .component('c8yHelloTextInput', {
-      template: '<input ng-model="vm.config.helloText">',
-      bindings: {
-        config: '<',
-      },
-      controllerAs: 'vm',
-      controller: Controller,
-    });
+  angular.module('helloWidgetApp.helloWidget').component('c8yHelloTextInput', {
+    templateUrl: ':::PLUGIN_PATH:::/text-input.component.html',
+    bindings: {
+      config: '<'
+    },
+    controllerAs: 'vm',
+    controller: Controller
+  });
 
@@ -26,3 +24,3 @@ function Controller() {
       $onInit,
-      $onChanges,
+      $onChanges
     });
@@ -52,2 +50,2 @@
   }
-}());
+})();

plugins/hello-widget/text-input.component.spec.js

@@ -14,12 +14,8 @@ /**
     common.globalBeforeWithUI();
-    module('helloWidgetApp.helloWidget');
+    angular.mock.module('helloWidgetApp.helloWidget');
 
-    inject((
-      _$injector_,
-      _$rootScope_,
-      _$compile_,
-    ) => {
+    inject(_$injector_ => {
       $injector = _$injector_;
-      $rootScope = _$rootScope_;
-      $compile = _$compile_;
+      $rootScope = $injector.get('$rootScope');
+      $compile = $injector.get('$compile');
     });
@@ -29,4 +25,3 @@ });
   it('component should exist', () => {
-    expect($injector.has('c8yHelloTextInputDirective'))
-      .toEqual(true);
+    expect($injector.has('c8yHelloTextInputDirective')).toEqual(true);
   });
@@ -37,3 +32,2 @@
       //////////// stubbing dependencies
-
     });
@@ -58,9 +52,8 @@
       const element = createComponent(
-        '<c8y-hello-text-input config="config" />',
-        { config: { helloText } },
+        '<c8y-hello-text-input config="config"></c8y-hello-text-input>',
+        { config: { helloText } }
       );
 
       // then
-      expect(element.scope().config.helloText)
-        .toEqual(expectedConfiguredText);
+      expect(element.scope().config.helloText).toEqual(expectedConfiguredText);
     }
@@ -67,0 +60,0 @@

plugins/hello-widget/widget.component.js

@@ -5,15 +5,13 @@ /**
 
-(function () {
+(() => {
   'use strict';
 
-  angular
-    .module('helloWidgetApp.helloWidget')
-    .component('c8yHelloWidget', {
-      template: '<div>{{vm.text}}</div>',
-      bindings: {
-        config: '<',
-      },
-      controllerAs: 'vm',
-      controller: Controller,
-    });
+  angular.module('helloWidgetApp.helloWidget').component('c8yHelloWidget', {
+    template: '<div>{{vm.text}}</div>',
+    bindings: {
+      config: '<'
+    },
+    controllerAs: 'vm',
+    controller: Controller
+  });
 
@@ -31,2 +29,2 @@ function Controller() {
   }
-}());
+})();

plugins/hello-widget/widget.component.spec.js

@@ -13,10 +13,7 @@ /**
     common.globalBeforeWithUI();
-    module('helloWidgetApp.helloWidget');
+    angular.mock.module('helloWidgetApp.helloWidget');
 
-    inject((
-      _$injector_,
-      _$componentController_,
-    ) => {
+    inject(_$injector_ => {
       $injector = _$injector_;
-      $componentController = _$componentController_;
+      $componentController = $injector.get('$componentController');
     });
@@ -26,4 +23,3 @@ });
   it('component should exist', () => {
-    expect($injector.has('c8yHelloWidgetDirective'))
-      .toEqual(true);
+    expect($injector.has('c8yHelloWidgetDirective')).toEqual(true);
   });
@@ -34,3 +30,2 @@
       //////////// stubbing dependencies
-
     });
@@ -54,10 +49,11 @@
       // when
-      const controller = $componentController('c8yHelloWidget', undefined, { config: { helloText: textBinding } });
+      const controller = $componentController('c8yHelloWidget', undefined, {
+        config: { helloText: textBinding }
+      });
       controller.$onInit();
 
       // then
-      expect(controller.text)
-        .toEqual(expectedText);
+      expect(controller.text).toEqual(expectedText);
     }
   });
 });

plugins/hello-widget/widget.config.js

@@ -5,14 +5,9 @@ /**
 
-(function () {
+(() => {
   'use strict';
 
-  angular
-    .module('helloWidgetApp.helloWidget')
-    .config(configure);
+  angular.module('helloWidgetApp.helloWidget').config(configure);
 
   /* @ngInject */
-  function configure(
-    c8yComponentsProvider,
-    gettext,
-  ) {
+  function configure(c8yComponentsProvider, gettext) {
     c8yComponentsProvider.add({
@@ -22,6 +17,12 @@ name: 'hello',
       description: gettext('Displays that classic "hello, world" string'),
-      templateUrl: ':::PLUGIN_PATH:::/main.html',
-      configTemplateUrl: ':::PLUGIN_PATH:::/config.html',
+      widgetComponent: 'c8yHelloWidget',
+      configComponent: 'c8yHelloTextInput',
+      options: {
+        noDeviceTarget: false,
+        noNewWidgets: false,
+        deviceTargetNotRequired: false,
+        groupsSelectable: false
+      }
     });
   }
-}());
+})();

plugins/hello-widget/widget.fiddle.js

@@ -5,8 +5,6 @@ /**
 
-(function () {
+(() => {
   'use strict';
 
-  angular
-    .module('helloWidgetApp.helloWidget')
-    .run(runBlock);
+  angular.module('helloWidgetApp.helloWidget').run(runBlock);
 
@@ -24,2 +22,2 @@ /* @ngInject */
   }
-}());
+})();

plugins/hello-widget/widget.module.js

@@ -5,7 +5,6 @@ /**
 
-(function () {
+(() => {
   'use strict';
 
-  angular
-    .module('helloWidgetApp.helloWidget', []);
-}());
+  angular.module('helloWidgetApp.helloWidget', []);
+})();

preinstall.js

 const { exec } = require('child_process');
+
 const [, , ...packages] = process.argv;
@@ -3,0 +4,0 @@

README.md

@@ -7,3 +7,3 @@ # cumulocity-hellowidget-plugin
 
-#### *** Heads-up! Since version 2.X, this Cumulocity UI plugin boilerplate is written in ES6+. :tada: ***
+#### *** Heads-up! Since version 2.X, this Cumulocity UI plugin boilerplate is written in ES6+. 🎉 ***
 
@@ -16,10 +16,20 @@ A demo app for showcasing creation of a custom Cumulocity UI widget plugin.
 ## Installation
-* Make sure you have Node.js ≥ v6.11.0 installed and npm from its [website](https://nodejs.org), or better even, use [nvm](https://github.com/creationix/nvm).
+* Make sure you have Node.js ≥ v8.9.0 installed and npm from its [website](https://nodejs.org), or better even, use [nvm](https://github.com/creationix/nvm).
 
-* Clone the repo, `cd` to your project directory, and setup dependencies:
+- Install [yarn](https://yarnpkg.com/en/docs/install).
 
+- Install [cumulocity-tools](https://www.npmjs.com/package/cumulocity-tools).
+
+- Clone the repo, `cd` to your project directory.
+
+- Adapt the UI build version you want to develop against:
 ```bash
-$ npm run install:clean
+$ c8y install [ui_build_version]
 ```
 
+- Install dependencies:
+```bash
+$ yarn install:clean
+```
+
 ## Usage
@@ -32,3 +42,3 @@ Check out [the introduction to plugin development docs](http://cumulocity.com/guides/web/introduction/).
 ```bash
-$ npm run deploy
+$ yarn deploy
 ```
@@ -40,10 +50,8 @@
 ```bash
-$ npm t
+$ yarn test
 ```
 
-~~Note that you may need to supply different app context path other than `hellowidgetapp` in npm scripts for `test` (in `package.json`) if you want to reuse this boilerplate.~~
-
 ## Linting
 ```bash
-$ npm run lint <targetFileOrDir>
+$ yarn lint <targetFileOrDir>
 ```
@@ -53,3 +61,3 @@
 ```bash
-$ npm run lint plugins
+$ yarn lint plugins
 ```
@@ -56,0 +64,0 @@

test-helper.js

@@ -1,2 +0,2 @@
-(function () {
+(() => {
   'use strict';
@@ -8,3 +8,3 @@
     globalBeforeWithUI,
-    globalBefore,
+    globalBefore
   };
@@ -15,11 +15,7 @@
   function initBackendMocks() {
-    angular
-      .module('c8y.backendMocks', [])
-      .run(runBlock);
+    angular.module('c8y.backendMocks', []).run(runBlock);
 
     /* @ngInject */
     function runBlock($httpBackend) {
-      $httpBackend
-        .when('GET', /\/user\/currentUser(.*)/)
-        .respond({});
+      $httpBackend.when('GET', /\/user\/currentUser(.*)/).respond({});
     }
@@ -34,3 +30,3 @@ }
   function globalBefore() {
-    module(($provide) => {
+    module($provide => {
       /*
@@ -56,3 +52,3 @@ * Best to keep the below "magic" fake info data for unit testing purpose,
         skipSwitchingToDefaultLanguage: true,
-        test: true,
+        test: true
       });
@@ -64,2 +60,2 @@ });
   }
-}());
+})();

New alerts

HTTP dependency

Supply chain risk

Contains a dependency which resolves to a remote HTTP URL which could be used to inject untrusted code and reduce overall package reliability.

Found 1 instance in 1 package

Fixed alerts

HTTP dependency

Supply chain risk

Contains a dependency which resolves to a remote HTTP URL which could be used to inject untrusted code and reduce overall package reliability.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6157564

increased by13.52%

Dependency count

1

decreased by-50%

Number of package files

24

increased by4.35%

Number of lines in readme file

71

increased by12.7%

Worsened metrics

Dev dependency count

24

increased by9.09%

Lines of code

416

decreased by-1.89%

Dependency changes

• - Removedbabel-polyfill@6.26.0

• - Removedbabel-polyfill@6.26.0(transitive)

• - Removedbabel-runtime@6.26.0(transitive)

• - Removedcore-js@2.6.12(transitive)

• - Removedregenerator-runtime@0.10.50.11.1(transitive)

• Updatedcumulocity-ui-build@http://resources.cumulocity.com/webapps/ui/9.8.2.tar.gz