ngimport - npm Package Compare versions

Comparing version 0.0.7 to 0.1.0

karma.conf.js

@@ -8,3 +8,2 @@ module.exports = function(config) {
       './node_modules/angular-mocks/angular-mocks.js',
-      './ngimport.js',
       './test.js'
@@ -17,3 +16,3 @@ ],
       debug: true,
-      external: 'angular',
+      external: ['angular', 'angular-mocks'],
       extensions: ['.js'],
@@ -30,4 +29,5 @@ transform: ['rollupify']
     singleRun: false,
-    concurrency: Infinity
+    concurrency: Infinity,
+    browserDisconnectTolerance: 30
   })
 }

ngimport.d.ts

@@ -1,2 +0,1 @@
-import * as angular from 'angular';
 export declare let $anchorScroll: angular.IAnchorScrollService;
@@ -12,3 +11,3 @@ export declare let $cacheFactory: angular.ICacheFactoryService;
 export declare let $httpParamSerializer: angular.IHttpParamSerializer;
-export declare let $httpParamSerializerJQLike: any;
+export declare let $httpParamSerializerJQLike: angular.IHttpParamSerializer;
 export declare let $injector: angular.auto.IInjectorService;
@@ -30,3 +29,3 @@ export declare let $interpolate: angular.IInterpolateService;
 export declare let $window: angular.IWindowService;
-export declare let $xhrFactory: any;
-export declare function bootstrap(moduleName: string): void;
+export declare let $xhrFactory: angular.IXhrFactory<any>;
+export declare function bootstrap(element: string | Element | JQuery | Document, modules?: (string | Function | any[])[], config?: angular.IAngularBootstrapConfig): angular.auto.IInjectorService;

ngimport.js

 "use strict";
-const angular = require('angular');
 exports.$anchorScroll = undefined;
@@ -31,54 +30,35 @@ exports.$cacheFactory = undefined;
 exports.$xhrFactory = undefined;
-// bootstrap a dummy application using our module, so the #run block
-// below is synchronously called, and all of the injectables in it are
-// guaranteed to be defined after this code is run.
-// TODO: move this out into a separate module
-// TODO: tests
-function bootstrap(moduleName) {
-    const div = document.createElement('div');
-    document.body.appendChild(div);
-    angular.bootstrap(div, [moduleName]);
-    document.body.removeChild(div);
+// TODO: add mgMock/ngMockE2E services
+function bootstrap(element, modules, config) {
+    const $i = angular.bootstrap(element, modules, config);
+    exports.$anchorScroll = $i.get('$anchorScroll');
+    exports.$cacheFactory = $i.get('$cacheFactory');
+    exports.$compile = $i.get('$compile');
+    exports.$controller = $i.get('$controller');
+    exports.$document = $i.get('$document');
+    exports.$exceptionHandler = $i.get('$exceptionHandler');
+    exports.$filter = $i.get('$filter');
+    exports.$http = $i.get('$http');
+    exports.$httpBackend = $i.get('$httpBackend');
+    exports.$httpParamSerializer = $i.get('$httpParamSerializer');
+    exports.$httpParamSerializerJQLike = $i.get('$httpParamSerializerJQLike');
+    exports.$injector = $i;
+    exports.$interpolate = $i.get('$interpolate');
+    exports.$interval = $i.get('$interval');
+    exports.$locale = $i.get('$locale');
+    exports.$location = $i.get('$location');
+    exports.$log = $i.get('$log');
+    exports.$parse = $i.get('$parse');
+    exports.$q = $i.get('$q');
+    exports.$rootElement = $i.get('$rootElement');
+    exports.$rootScope = $i.get('$rootScope');
+    exports.$sce = $i.get('$sce');
+    exports.$sceDelegate = $i.get('$sceDelegate');
+    exports.$templateCache = $i.get('$templateCache');
+    exports.$templateRequest = $i.get('$templateRequest');
+    exports.$timeout = $i.get('$timeout');
+    exports.$window = $i.get('$window');
+    exports.$xhrFactory = $i.get('$xhrFactory');
+    return $i;
 }
 exports.bootstrap = bootstrap;
-// prevent double-loading, which has the potential
-// to prevent sharing state between services
-let m = null;
-try {
-    m = angular.module('bcherny/ngimport');
-}
-catch (e) {
-    m = angular.module('bcherny/ngimport', []);
-}
-// TODO: add mgMock/ngMockE2E services
-m.run(['$injector', function ($i) {
-        exports.$anchorScroll = $i.get('$anchorScroll');
-        exports.$cacheFactory = $i.get('$cacheFactory');
-        exports.$compile = $i.get('$compile');
-        exports.$controller = $i.get('$controller');
-        exports.$document = $i.get('$document');
-        exports.$exceptionHandler = $i.get('$exceptionHandler');
-        exports.$filter = $i.get('$filter');
-        exports.$http = $i.get('$http');
-        exports.$httpBackend = $i.get('$httpBackend');
-        exports.$httpParamSerializer = $i.get('$httpParamSerializer');
-        exports.$httpParamSerializerJQLike = $i.get('$httpParamSerializerJQLike');
-        exports.$injector = $i;
-        exports.$interpolate = $i.get('$interpolate');
-        exports.$interval = $i.get('$interval');
-        exports.$locale = $i.get('$locale');
-        exports.$location = $i.get('$location');
-        exports.$log = $i.get('$log');
-        exports.$parse = $i.get('$parse');
-        exports.$q = $i.get('$q');
-        exports.$rootElement = $i.get('$rootElement');
-        exports.$rootScope = $i.get('$rootScope');
-        exports.$sce = $i.get('$sce');
-        exports.$sceDelegate = $i.get('$sceDelegate');
-        exports.$templateCache = $i.get('$templateCache');
-        exports.$templateRequest = $i.get('$templateRequest');
-        exports.$timeout = $i.get('$timeout');
-        exports.$window = $i.get('$window');
-        exports.$xhrFactory = $i.get('$xhrFactory');
-    }]);
-bootstrap('bcherny/ngimport');

ngimport.ts

@@ -1,3 +0,1 @@
-import * as angular from 'angular'
-
 export let $anchorScroll: angular.IAnchorScrollService = undefined
@@ -13,3 +11,3 @@ export let $cacheFactory: angular.ICacheFactoryService = undefined
 export let $httpParamSerializer: angular.IHttpParamSerializer = undefined
-export let $httpParamSerializerJQLike: any = undefined
+export let $httpParamSerializerJQLike: angular.IHttpParamSerializer = undefined
 export let $injector: angular.auto.IInjectorService = undefined
@@ -31,56 +29,43 @@ export let $interpolate: angular.IInterpolateService = undefined
 export let $window: angular.IWindowService = undefined
-export let $xhrFactory: any = undefined
+export let $xhrFactory: angular.IXhrFactory<any> = undefined
 
-// bootstrap a dummy application using our module, so the #run block
-// below is synchronously called, and all of the injectables in it are
-// guaranteed to be defined after this code is run.
-// TODO: move this out into a separate module
-// TODO: tests
-export function bootstrap(moduleName: string): void {
-  const div = document.createElement('div')
-  document.body.appendChild(div)
-  angular.bootstrap(div, [moduleName])
-  document.body.removeChild(div)
-}
+// TODO: add mgMock/ngMockE2E services
+export function bootstrap(
+  element: string | Element | JQuery | Document,
+  modules?: (string | Function | any[])[],
+  config?: angular.IAngularBootstrapConfig
+): angular.auto.IInjectorService {
 
-// prevent double-loading, which has the potential
-// to prevent sharing state between services
-let m: angular.IModule = null
-try {
-  m = angular.module('bcherny/ngimport')
-} catch (e) {
-  m = angular.module('bcherny/ngimport', [])
-}
+  const $i = angular.bootstrap(element, modules, config)
 
-// TODO: add mgMock/ngMockE2E services
-m.run(['$injector', function($i: angular.auto.IInjectorService) {
-  $anchorScroll = <angular.IAnchorScrollService>$i.get('$anchorScroll')
-  $cacheFactory = <angular.ICacheFactoryService>$i.get('$cacheFactory')
-  $compile = <angular.ICompileService>$i.get('$compile')
-  $controller = <angular.IControllerService>$i.get('$controller')
-  $document = <angular.IDocumentService>$i.get('$document')
-  $exceptionHandler = <angular.IExceptionHandlerService>$i.get('$exceptionHandler')
-  $filter = <angular.IFilterService>$i.get('$filter')
-  $http = <angular.IHttpService>$i.get('$http')
-  $httpBackend = <angular.IHttpBackendService>$i.get('$httpBackend')
-  $httpParamSerializer = <angular.IHttpParamSerializer>$i.get('$httpParamSerializer')
-  $httpParamSerializerJQLike = <any>$i.get('$httpParamSerializerJQLike')
+  $anchorScroll = $i.get('$anchorScroll')
+  $cacheFactory = $i.get('$cacheFactory')
+  $compile = $i.get('$compile')
+  $controller = $i.get('$controller')
+  $document = $i.get('$document')
+  $exceptionHandler = $i.get('$exceptionHandler')
+  $filter = $i.get('$filter')
+  $http = $i.get('$http')
+  $httpBackend = $i.get('$httpBackend')
+  $httpParamSerializer = $i.get('$httpParamSerializer')
+  $httpParamSerializerJQLike = $i.get('$httpParamSerializerJQLike')
   $injector = $i
-  $interpolate = <angular.IInterpolateService>$i.get('$interpolate')
-  $interval = <angular.IIntervalService>$i.get('$interval')
-  $locale = <angular.ILocaleService>$i.get('$locale')
-  $location = <angular.ILocationService>$i.get('$location')
-  $log = <angular.ILogService>$i.get('$log')
-  $parse = <angular.IParseService>$i.get('$parse')
-  $q = <angular.IQService>$i.get('$q')
-  $rootElement = <angular.IRootElementService>$i.get('$rootElement')
-  $rootScope = <angular.IRootScopeService>$i.get('$rootScope')
-  $sce = <angular.ISCEService>$i.get('$sce')
-  $sceDelegate = <angular.ISCEDelegateService>$i.get('$sceDelegate')
-  $templateCache = <angular.ITemplateCacheService>$i.get('$templateCache')
-  $templateRequest = <angular.ITemplateRequestService>$i.get('$templateRequest')
-  $timeout = <angular.ITimeoutService>$i.get('$timeout')
-  $window = <angular.IWindowService>$i.get('$window')
-  $xhrFactory = <any>$i.get('$xhrFactory')
-}])
-bootstrap('bcherny/ngimport')
+  $interpolate = $i.get('$interpolate')
+  $interval = $i.get('$interval')
+  $locale = $i.get('$locale')
+  $location = $i.get('$location')
+  $log = $i.get('$log')
+  $parse = $i.get('$parse')
+  $q = $i.get('$q')
+  $rootElement = $i.get('$rootElement')
+  $rootScope = $i.get('$rootScope')
+  $sce = $i.get('$sce')
+  $sceDelegate = $i.get('$sceDelegate')
+  $templateCache = $i.get('$templateCache')
+  $templateRequest = $i.get('$templateRequest')
+  $timeout = $i.get('$timeout')
+  $window = $i.get('$window')
+  $xhrFactory = $i.get('$xhrFactory')
+
+  return $i
+}

package.json

 {
   "name": "ngimport",
-  "version": "0.0.7",
-  "description": "Finally, imports for Angular 1 builtins!",
+  "version": "0.1.0",
+  "description": "Finally, ES2015 imports for Angular 1 services!",
   "main": "./ngimport.js",
-  "main:esnext": "./ngimport.es6.js",
+  "main:esnext": "./ngimport.es2015.js",
   "typings": "./ngimport.d.ts",
   "scripts": {
-    "build": "tsc -d -m es2015 --outDir .; mv ./ngimport.js ./ngimport.es6.js; tsc -m commonjs --outDir .;",
+    "build": "tsc -d -m es2015 --outDir .; mv ./ngimport.js ./ngimport.es2015.js; tsc -m commonjs --outDir .;",
     "watch": "tsc -w",
@@ -11,0 +11,0 @@ "test": "karma start --log-level debug --single-run",

README.md

@@ -46,2 +46,33 @@ # ngimport [![Build Status][build]](https://circleci.com/gh/bcherny/ngimport) [![npm]](https://www.npmjs.com/package/ngimport) [![mit]](https://opensource.org/licenses/MIT)
 
+## Installation
+
+```sh
+npm install --save ngimport
+```
+
+In your main file, replace Angular's `bootstrap()` with ngimport's:
+
+### Before:
+
+```ts
+import {bootstrap, module} from 'angular'
+
+// declare module and bootstrap it
+module('myModule', [...])
+boostrap(myElement, ['myModule'])
+```
+
+### After:
+
+```ts
+import {module} from 'angular'
+import {bootstrap} from 'ngimport'
+
+// declare module and bootstrap it (exactly the same as before)
+module('myModule', [...])
+boostrap(myElement, ['myModule'])
+
+// imported services are now available!
+```
+
 ## Full Example
@@ -133,3 +164,8 @@
 - Use it as an adapter to migrate your codebase to imports piece by piece
+- Use Angular services at the top level, without wrapping them in invokable closures
 
+#### But wait, what about mocking providers in tests? Isn't that the whole point of Angular's DI?
+
+TODO
+
 ## Using this technique to wrap your own legacy modules
@@ -174,2 +210,22 @@
 
+## Sharing state between ngimported services and your application
+
+If you are using a stateful service (like `$templateCache`), and are sometimes ngimporting it, sometimes injecting it with Angular DI, you can share its state for free:
+
+```ts
+// Contents of file1.js:
+import {$http} from 'ngimport'
+
+// Contents of file2.js:
+angular.module('myModule', [])
+const $injector = angular.bootstrap(someElement, ['myModule'])
+
+// must be set *after* bootstrapping, since $http is not defined before:
+$http.defaults.headers.common.Authorization = 'Basic YmVlcDpib29w'
+
+// ngimported $http shares its state with DI'd $http!:
+expect($injector.$http.defaults.headers.common.Authorization)
+  .toBe('Basic YmVlcDpib29w')
+```
+
 ## License
@@ -176,0 +232,0 @@

test.js

@@ -1,5 +0,10 @@
-import {$http, $rootScope} from './ngimport.es6'
+import {$http, $rootScope, bootstrap} from './ngimport.js'
 
 describe('ngimport', function() {
-  it('should define angular builtins immediately', function() {
+  afterEach(function() {
+    $http.defaults.headers.common = {}
+  })
+  it('should define angular builtins immediately, before the app is bootstrapped', function () {
+    angular.module('a', [])
+    bootstrap(angular.element(), ['a'])
     expect($http).toBeDefined()
@@ -9,2 +14,42 @@ expect($http.name).toBe('$http')
   })
+  it('should not override ngimported provider state', function() {
+    angular.module('a', [])
+    bootstrap(angular.element(), ['a'])
+    $http.defaults.headers.common.Authorization = 'Basic YmVlcDpib29w'
+    angular.module('a').run(function () {
+      expect($http.defaults.headers.common.Authorization).toBe('Basic YmVlcDpib29w')
+    })
+    angular.bootstrap(document.createElement('div'), ['a'])
+  })
+  it('should share ngimported service state between ngimported and injected instances', function() {
+    angular.module('a', [])
+    const $injector = bootstrap(document.createElement('div'), ['a'])
+    $http.defaults.headers.common.Authorization = 'Basic YmVlcDpib29w'
+    expect($injector.get('$http').defaults.headers.common.Authorization)
+      .toBe('Basic YmVlcDpib29w')
+  })
+  it('should share ngimported service state between injected and ngimported instances', function() {
+    angular.module('a', [])
+    const $injector = bootstrap(document.createElement('div'), ['a'])
+    $injector.get('$http').defaults.headers.common.Authorization = 'Basic YmVlcDpib29w'
+    expect($http.defaults.headers.common.Authorization)
+      .toBe('Basic YmVlcDpib29w')
+  })
+  // it('should be able to mock dependencies with $provide', function () {
+  //   angular.module('a', [])
+  //   const $injector = angular.bootstrap(document.createElement('div'), ['a'])
+  //   angular.module('a')
+  //     .constant('$http', 42)
+  //   expect($injector.get('$http')).toBe(42)
+  //   expect($http).toBe(42)
+  // })
+  // it('should be able to assert against HTTP requests with $httpBackend', inject(function ($httpBackend) {
+  //   angular.module('a', [])
+  //   const $injector = bootstrap(document.createElement('div'), ['a'])
+  //   $httpBackend.expectGET('/url').respond(null)
+  //   $http.get('/url')
+  //   $httpBackend.flush()
+  //   $httpBackend.verifyNoOutstandingExpectation()
+  //   $httpBackend.verifyNoOutstandingRequest()
+  // }))
 })

tsconfig.json

 {
   "compilerOptions": {
-    "module": "commonjs",
+    "module": "es6",
     "moduleResolution": "node",
@@ -13,4 +13,5 @@ "noImplicitAny": true,
     "./typings/main.d.ts",
+    "./typings.d.ts",
     "./ngimport.ts"
   ]
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

173675

increased by760.63%

Number of package files

15

increased by25%

Lines of code

383

increased by15.36%

Number of lines in readme file

239

increased by30.6%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes