fix(demo): remove ionic (stencil) demos to fix Angular routing, fix #14

- use ink and wired elements instead - improve dynamic example (add controls) - code cleanup
angular-extensions · Sep 27, 2019 · 428e242 · 428e242
1 parent a0a1200
commit 428e242
Show file tree

Hide file tree

Showing 16 changed files with 16,646 additions and 16,644 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,116 +1,117 @@
-{
-  "name": "@angular-extensions/elements",
-  "version": "8.8.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve -o",
-    "start:prod": "npm run build && node ./projects/elements-server/server.js",
-    "lint": "ng lint",
-    "test": "ng lint && npm run format:test && ng test --watch false --codeCoverage",
-    "watch": "ng test",
-    "e2e": "ng e2e",
-    "build": "ng build --project elements && ng build --prod ",
-    "postbuild": "replace \"onFetch.*\\{\" \"onFetch(event) { if (event.request.url.indexOf('unpkg.com') > -1) { return; }\" ./dist/elements-demo/ngsw-worker.js",
-    "ci": "npm run test && npm run build && cpx README.md dist/elements",
-    "format:write": "prettier projects/**/*.{ts,json,md} --write",
-    "format:test": "prettier projects/**/*.{ts,json,md} --list-different",
-    "release": "standard-version -a && git push --follow-tags origin master",
-    "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer ./dist/elements-demo/stats-es2015.json",
-    "contributors:add": "all-contributors add",
-    "contributors:generate": "all-contributors generate && node sync-contributors.js",
-    "contributors:check": "all-contributors check"
-  },
-  "standard-version": {
-    "scripts": {
-      "precommit": "node sync-versions.js && git add ."
-    }
-  },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "pre-commit": "pretty-quick --staged"
-    }
-  },
-  "private": false,
-  "dependencies": {
-    "@angular/animations": "^8.0.0",
-    "@angular/cdk": "^8.0.0",
-    "@angular/common": "^8.0.0",
-    "@angular/compiler": "^8.0.0",
-    "@angular/core": "^8.0.0",
-    "@angular/forms": "^8.0.0",
-    "@angular/material": "^8.0.0",
-    "@angular/platform-browser": "^8.0.0",
-    "@angular/platform-browser-dynamic": "^8.0.0",
-    "@angular/pwa": "^0.801.2",
-    "@angular/router": "^8.0.0",
-    "@angular/service-worker": "^8.0.0",
-    "highlight.js": "^9.15.8",
-    "ngx-highlightjs": "^3.0.3",
-    "rxjs": "~6.4.0",
-    "tslib": "^1.9.0",
-    "zone.js": "~0.9.1"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^0.801.1",
-    "@angular-devkit/build-ng-packagr": "^0.800.0",
-    "@angular/cli": "^8.0.2",
-    "@angular/compiler-cli": "^8.1.1",
-    "@angular/language-service": "~8.0.0",
-    "@commitlint/cli": "^8.0.0",
-    "@commitlint/config-conventional": "^8.0.0",
-    "@types/jasmine": "~3.3.8",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
-    "all-contributors-cli": "~5.4.1",
-    "codelyzer": "^5.0.0",
-    "compression": "^1.7.4",
-    "cpx": "^1.5.0",
-    "express": "^4.17.1",
-    "husky": "^2.4.1",
-    "jasmine-core": "~3.4.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
-    "karma-spec-reporter": "0.0.32",
-    "ng-packagr": "^5.1.0",
-    "prettier": "^1.18.2",
-    "pretty-quick": "^1.11.1",
-    "protractor": "~5.4.0",
-    "replace": "^1.1.0",
-    "standard-version": "^6.0.1",
-    "ts-node": "~7.0.0",
-    "tsickle": "^0.35.0",
-    "tslint": "~5.15.0",
-    "typescript": "~3.4.3",
-    "webpack-bundle-analyzer": "^3.5.0"
-  },
-  "keywords": [
-    "angular",
-    "elements",
-    "web componentst",
-    "custom elements",
-    "lazy loading",
-    "microfrontends",
-    "components",
-    "web component"
-  ],
-  "author": "Tomas Trajan <@tomastrajan>",
-  "license": "MIT",
-  "homepage": "https://github.com/angular-extensions/elements#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/angular-extensions/elements.git"
-  },
-  "bugs": {
-    "url": "https://github.com/angular-extensions/elements/issues"
-  }
-}
+{
+  "name": "@angular-extensions/elements",
+  "version": "8.8.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve -o",
+    "start:prod": "npm run build && node ./projects/elements-server/server.js",
+    "lint": "ng lint",
+    "test": "ng lint && npm run format:test && ng test --watch false --codeCoverage",
+    "watch": "ng test",
+    "e2e": "ng e2e",
+    "build": "ng build --project elements && ng build --prod ",
+    "postbuild": "replace \"onFetch.*\\{\" \"onFetch(event) { if (event.request.url.indexOf('unpkg.com') > -1) { return; }\" ./dist/elements-demo/ngsw-worker.js",
+    "ci": "npm run test && npm run build && cpx README.md dist/elements",
+    "format:write": "prettier projects/**/*.{ts,json,md} --write",
+    "format:test": "prettier projects/**/*.{ts,json,md} --list-different",
+    "release": "standard-version -a && git push --follow-tags origin master",
+    "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer ./dist/elements-demo/stats-es2015.json",
+    "contributors:add": "all-contributors add",
+    "contributors:generate": "all-contributors generate && node sync-contributors.js",
+    "contributors:check": "all-contributors check"
+  },
+  "standard-version": {
+    "scripts": {
+      "precommit": "node sync-versions.js && git add ."
+    }
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "pre-commit": "pretty-quick --staged"
+    }
+  },
+  "private": false,
+  "dependencies": {
+    "@angular/animations": "^8.0.0",
+    "@angular/cdk": "^8.0.0",
+    "@angular/common": "^8.0.0",
+    "@angular/compiler": "^8.0.0",
+    "@angular/core": "^8.0.0",
+    "@angular/forms": "^8.0.0",
+    "@angular/material": "^8.0.0",
+    "@angular/platform-browser": "^8.0.0",
+    "@angular/platform-browser-dynamic": "^8.0.0",
+    "@angular/pwa": "^0.801.2",
+    "@angular/router": "^8.0.0",
+    "@angular/service-worker": "^8.0.0",
+    "hammerjs": "^2.0.8",
+    "highlight.js": "^9.15.8",
+    "ngx-highlightjs": "^3.0.3",
+    "rxjs": "~6.4.0",
+    "tslib": "^1.9.0",
+    "zone.js": "~0.9.1"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^0.801.1",
+    "@angular-devkit/build-ng-packagr": "^0.800.0",
+    "@angular/cli": "^8.0.2",
+    "@angular/compiler-cli": "^8.1.1",
+    "@angular/language-service": "~8.0.0",
+    "@commitlint/cli": "^8.0.0",
+    "@commitlint/config-conventional": "^8.0.0",
+    "@types/jasmine": "~3.3.8",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
+    "all-contributors-cli": "~5.4.1",
+    "codelyzer": "^5.0.0",
+    "compression": "^1.7.4",
+    "cpx": "^1.5.0",
+    "express": "^4.17.1",
+    "husky": "^2.4.1",
+    "jasmine-core": "~3.4.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.1.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
+    "karma-spec-reporter": "0.0.32",
+    "ng-packagr": "^5.1.0",
+    "prettier": "^1.18.2",
+    "pretty-quick": "^1.11.1",
+    "protractor": "~5.4.0",
+    "replace": "^1.1.0",
+    "standard-version": "^6.0.1",
+    "ts-node": "~7.0.0",
+    "tsickle": "^0.35.0",
+    "tslint": "~5.15.0",
+    "typescript": "~3.4.3",
+    "webpack-bundle-analyzer": "^3.5.0"
+  },
+  "keywords": [
+    "angular",
+    "elements",
+    "web componentst",
+    "custom elements",
+    "lazy loading",
+    "microfrontends",
+    "components",
+    "web component"
+  ],
+  "author": "Tomas Trajan <@tomastrajan>",
+  "license": "MIT",
+  "homepage": "https://github.com/angular-extensions/elements#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/angular-extensions/elements.git"
+  },
+  "bugs": {
+    "url": "https://github.com/angular-extensions/elements/issues"
+  }
+}
diff --git a/projects/elements-demo/src/app/features/examples/advanced/advanced.component.html b/projects/elements-demo/src/app/features/examples/advanced/advanced.component.html
@@ -10,7 +10,7 @@ <h2>Elements configured in a feature module</h2>
       </button>
     </div>
     <div class="implementation" *ngIf="example1">
-      <ion-button *axLazyElement (click)="increment()">Click me</ion-button>
+      <wired-button *axLazyElement (click)="increment()">Click me</wired-button>
       <p>Counter: {{ counter }}</p>
     </div>
     <div class="description">

diff --git a/projects/elements-demo/src/app/features/examples/advanced/advanced.component.scss b/projects/elements-demo/src/app/features/examples/advanced/advanced.component.scss
@@ -24,6 +24,10 @@
       .additional-btn {
         margin-top: 10px;
       }
+
+      wired-button {
+        padding: 10px 15px;
+      }
     }
 
     .description {

diff --git a/projects/elements-demo/src/app/features/examples/advanced/advanced.component.ts b/projects/elements-demo/src/app/features/examples/advanced/advanced.component.ts
@@ -49,8 +49,8 @@ const CODE_EXAMPLE_1_MODULE = `// pre-configured LazyElementsModule
 const options: LazyElementModuleOptions = {
   elementConfigs: [
     {
-      tag: 'ion-button',
-      url: 'https://unpkg.com/@ionic/core@4.6.2/dist/ionic/ionic.js',
+      tag: 'wired-button',
+      url: 'https://unpkg.com/wired-elements@latest/dist/wired-elements.bundled.js',
       loadingComponent: SpinnerComponent,
       errorComponent: ErrorComponent,
       preload: true
@@ -69,7 +69,7 @@ export class FeatureModule { }
 `;
 
 const CODE_EXAMPLE_1_HTML = `<!-- No need to specify url -->
-<ion-button *axLazyElement></ion-button>`;
+<wired-button *axLazyElement></wired-button>`;
 
 const CODE_EXAMPLE_2_MODULE = `// pre-configured LazyElementsModule in FeatureModule
 const options: LazyElementModuleOptions = {

diff --git a/projects/elements-demo/src/app/features/examples/advanced/advanced.module.ts b/projects/elements-demo/src/app/features/examples/advanced/advanced.module.ts
@@ -16,8 +16,9 @@ import { ErrorComponent } from '../../../shared/error/error.component';
 const options: LazyElementModuleOptions = {
   elementConfigs: [
     {
-      tag: 'ion-button',
-      url: 'https://unpkg.com/@ionic/core@4.6.2/dist/ionic/ionic.js',
+      tag: 'wired-button',
+      url:
+        'https://unpkg.com/wired-elements@latest/dist/wired-elements.bundled.js',
       loadingComponent: SpinnerComponent,
       errorComponent: ErrorComponent,
       preload: true
@@ -48,6 +49,7 @@ const options: LazyElementModuleOptions = {
   imports: [
     HighlightModule,
     LazyElementsModule.forFeature(options),
+    LazyElementsModule.forFeature(options),
     SharedModule,
     AdvancedRoutingModule
   ]