igniteui-cli 9.0.6 → 9.1.0-beta.0

package/templates/webcomponents/igc-ts/navbar/default/files/src/app/__path__/__filePrefix__.ts

@@ -1,3 +1,5 @@
+import { html, css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcIconComponent,
@@ -5,24 +7,32 @@ import {
 } from 'igniteui-webcomponents';
 import {
   registerIcon,
-} from "igniteui-webcomponents/components/icon/icon.registry";
+} from 'igniteui-webcomponents/components/icon/icon.registry';
 
 defineComponents(IgcIconComponent, IgcNavbarComponent);
 
 registerIcon(
   'home',
-  'https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg'
+  'https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_home_24px.svg',
 );
 
 registerIcon(
   'search',
-  'https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_search_24px.svg'
+  'https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_search_24px.svg',
 );
 
-export default class $(ClassName) extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-      <igc-navbar style="height:30px; width:800px">
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  static styles = css`
+    igc-navbar {
+      width:100%;
+    }
+  `;
+
+  render() {
+    return html`
+      <igc-navbar>
         <igc-icon slot="start" name="home"></igc-icon>
         <h2>Home</h2>
         <igc-icon slot="end" name="search"></igc-icon>
@@ -30,5 +40,3 @@ export default class $(ClassName) extends HTMLElement {
     `;
   }
 }
-
-customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/pie-chart/default/files/src/app/__path__/{__filePrefix__.component.test.ts → __filePrefix__.test.ts}

@@ -1,5 +1,5 @@
 import { expect } from '@open-wc/testing';
-import $(ClassName) from './$(path)';
+import $(ClassName) from './$(path).js';
 
 describe('IgcPieChartComponent', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {

package/templates/webcomponents/igc-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.ts

@@ -1,4 +1,5 @@
-import { Data } from './sampleData';
+import { html, css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import {
   IgcItemLegendComponent,
   IgcItemLegendModule,
@@ -6,25 +7,26 @@ import {
   IgcPieChartModule,
 } from 'igniteui-webcomponents-charts';
 import { ModuleManager } from 'igniteui-webcomponents-core';
+import { Data } from './sampleData.js';
 
 ModuleManager.register(
   IgcItemLegendModule,
   IgcPieChartModule,
 );
 
-export default class $(ClassName) extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot!.innerHTML = `
-    <style>
-      :host, igc-pie-chart {
-        height: 100%;
-      }
-      .container {
-        height: 60%;
-      }
-    </style>
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  static styles = css`
+    :host, igc-pie-chart {
+      height: 100%;
+    }
+    .container {
+      height: 60%;
+    }
+  `;
+
+  render() {
+    return html`
     <div class="legend-title">
       Global Electricity Demand by Energy Use
     </div>
@@ -48,11 +50,9 @@ export default class $(ClassName) extends HTMLElement {
   `;
   }
 
-  connectedCallback() {
-    const chart = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('chart') as IgcPieChartComponent;
+  firstUpdated() {
+    const chart = this.shadowRoot?.getElementById('chart') as IgcPieChartComponent;
     chart.dataSource = new Data();
-    chart.legend = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('legend') as IgcItemLegendComponent;
+    chart.legend = this.shadowRoot?.getElementById('legend') as IgcItemLegendComponent;
   }
 }
-
-customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/pie-chart/default/files/src/app/__path__/sampleData.ts

@@ -1,39 +1,44 @@
 export class DataItem {
   public constructor(init: Partial<DataItem>) {
-      Object.assign(this, init);
+    Object.assign(this, init);
   }
 
   public marketShare: number = 0;
-  public category: string = '';
 
+  public category: string = '';
 }
 export class Data extends Array<DataItem> {
   public constructor() {
-      super();
-      this.push(new DataItem(
+    super();
+    this.push(new DataItem(
       {
-          marketShare: 37,
-          category: `Cooling`
-      }));
-      this.push(new DataItem(
+        marketShare: 37,
+        category: 'Cooling',
+      }
+    ));
+    this.push(new DataItem(
       {
-          marketShare: 25,
-          category: `Residential`
-      }));
-      this.push(new DataItem(
+        marketShare: 25,
+        category: 'Residential',
+      }
+    ));
+    this.push(new DataItem(
       {
-          marketShare: 12,
-          category: `Heating`
-      }));
-      this.push(new DataItem(
+        marketShare: 12,
+        category: 'Heating',
+      }
+    ));
+    this.push(new DataItem(
       {
-          marketShare: 11,
-          category: `Lighting`
-      }));
-      this.push(new DataItem(
+        marketShare: 11,
+        category: 'Lighting',
+      }
+    ));
+    this.push(new DataItem(
       {
-          marketShare: 15,
-          category: `Other`
-      }));
+        marketShare: 15,
+        category: 'Other',
+      }
+    ));
   }
 }

package/templates/webcomponents/igc-ts/projects/{empty → _base}/files/ignite-ui-cli.json

@@ -3,6 +3,7 @@
 	"project": {
 		"defaultPort": 8000,
 		"framework": "webcomponents",
+    "projectTemplate": "$(projectTemplate)",
 		"projectType": "igc-ts",
 		"theme": "$(theme)",
 		"isBundle": false,
@@ -12,4 +13,4 @@
 		"version": ""
 	},
 	"build": {}
-}
+}

package/templates/webcomponents/igc-ts/projects/_base/files/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en-GB">
+
+<head>
+  <meta charset="utf-8">
+  <base href="/">
+  <title>Ignite UI for Web Components</title>
+  <link rel="stylesheet" href="./node_modules/igniteui-webcomponents/themes/light/bootstrap.css">
+  <link rel="stylesheet" href="./styles.css">
+</head>
+
+<body>
+  <app-root></app-root>
+
+  <script type="module" src="./dist/src/index.js"></script>
+</body>
+</html>

package/templates/webcomponents/igc-ts/projects/{empty → _base}/files/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "$(dash-name)",
+  "name": "$(dashName)",
   "version": "0.0.0",
   "private": true,
   "description": "WebComponents project for Ignite UI CLI",
@@ -10,16 +10,16 @@
   "type": "module",
   "exports": {
     ".": "./dist/src/index.js",
-    "./$(dash-name).js": "./dist/src/$(dash-name).js"
+    "./$(dashName).js": "./dist/src/$(dashName).js"
   },
   "scripts": {
-    "start": "tsc && concurrently --kill-others \"tsc -w\" \"wds\"",
-    "build": "webpack --mode production",
+    "start": "tsc && concurrently -k -r \"tsc --watch\" \"wds\"",
+    "build": "rimraf dist && tsc && rollup -c rollup.config.mjs",
+    "start:build": "web-dev-server --root-dir dist --app-index index.html --open",
     "lint": "eslint --ext .js,.ts,.html . --ignore-path .gitignore",
     "test": "tsc && wtr"
   },
   "dependencies": {
-    "@open-wc/testing": "^2.5.33",
     "@vaadin/router": "^1.7.4",
     "igniteui-webcomponents": "2.0.0",
     "igniteui-webcomponents-grids": "~1.4.1",
@@ -31,33 +31,33 @@
     "igniteui-dockmanager": "~1.6.0",
     "@igniteui/material-icons-extended": "^2.10.0",
     "lit": "^2.0.2",
-    "typescript": "^4.5.2",
-    "babel-runtime": "^6.26.0"
+    "typescript": "^4.5.2"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.16.4",
+    "@open-wc/testing": "^2.5.33",
+    "@open-wc/building-rollup": "^2.0.1",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "rollup-plugin-copy-assets": "^2.0.3",
     "@open-wc/eslint-config": "^4.3.0",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^4.30.0",
     "@web/dev-server": "^0.1.22",
+    "@web/rollup-plugin-html": "^1.10.1",
+    "@web/rollup-plugin-import-meta-assets": "^1.0.7",
+    "babel-plugin-template-html-minifier": "^4.1.0",
     "@web/test-runner": "next",
-    "igniteui-cli": "$(cliVersion)",
+    "igniteui-cli": "~$(cliVersion)",
     "concurrently": "^6.3.0",
+    "deepmerge": "^4.2.2",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.60.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-workbox": "^6.2.0",
     "eslint": "^7.32.0",
     "tslib": "^2.3.1",
-    "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.0",
-    "@babel/plugin-transform-runtime": "^7.16.4",
-    "@babel/preset-env": "^7.16.4",
-    "@babel/preset-typescript": "^7.16.0",
-    "@types/source-map": "^0.5.7",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-transform-custom-element-classes": "^0.1.0",
-    "fork-ts-checker-webpack-plugin": "^6.4.2",
-    "html-webpack-plugin": "^5.5.0",
-    "source-map": "^0.7.3",
-    "webpack": "^5.64.2",
-    "webpack-cli": "^4.9.1"
+    "source-map": "^0.7.3"
   },
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",

package/templates/webcomponents/igc-ts/projects/_base/files/rollup.config.mjs

@@ -0,0 +1,90 @@
+import nodeResolve from '@rollup/plugin-node-resolve';
+import babel from '@rollup/plugin-babel';
+import copy from 'rollup-plugin-copy-assets';
+import { rollupPluginHTML as html } from '@web/rollup-plugin-html';
+import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
+import { terser } from 'rollup-plugin-terser';
+import { generateSW } from 'rollup-plugin-workbox';
+import path from 'path';
+
+export default {
+  input: 'index.html',
+  output: {
+    entryFileNames: '[hash].js',
+    chunkFileNames: '[hash].js',
+    assetFileNames: '[hash][extname]',
+    format: 'es',
+    dir: 'dist',
+  },
+  preserveEntrySignatures: false,
+
+  plugins: [
+    copy({
+      assets: [
+        'src/assets',
+      ],
+    }),
+    /** Enable using HTML as rollup entrypoint */
+    html({
+      minify: true,
+      injectServiceWorker: true,
+      serviceWorkerPath: 'dist/sw.js',
+    }),
+    /** Resolve bare module imports */
+    nodeResolve(),
+    /** Minify JS */
+    terser(),
+    /** Bundle assets references via import.meta.url */
+    importMetaAssets(),
+    /** Compile JS to a lower language target */
+    babel.babel({
+      babelHelpers: 'bundled',
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: [
+              'last 3 Chrome major versions',
+              'last 3 Firefox major versions',
+              'last 3 Edge major versions',
+              'last 3 Safari major versions',
+            ],
+            modules: false,
+            bugfixes: true,
+          },
+        ],
+      ],
+      plugins: [
+        [
+          'babel-plugin-template-html-minifier',
+          {
+            modules: { lit: ['html', { name: 'css', encapsulation: 'style' }] },
+            failOnError: false,
+            strictCSS: true,
+            htmlMinifier: {
+              collapseWhitespace: true,
+              conservativeCollapse: true,
+              removeComments: true,
+              caseSensitive: true,
+              minifyCSS: true,
+            },
+          },
+        ],
+      ],
+    }),
+    /** Create and inject a service worker */
+    generateSW({
+      globIgnores: ['polyfills/*.js', 'nomodule-*.js'],
+      navigateFallback: '/index.html',
+      // where to output the generated sw
+      swDest: path.join('dist', 'sw.js'),
+      // directory to match patterns against to be precached
+      globDirectory: path.join('dist'),
+      // cache any html js and css by default
+      globPatterns: ['**/*.{html,js,css,webmanifest}'],
+      skipWaiting: true,
+      clientsClaim: true,
+      runtimeCaching: [{ urlPattern: 'polyfills/*.js', handler: 'CacheFirst' }],
+    }),
+  ],
+};

package/templates/webcomponents/igc-ts/projects/_base/files/src/app/app-routing.ts

@@ -0,0 +1,11 @@
+import {
+  Route
+} from '@vaadin/router';
+import './home/home.js';
+import './not-found/not-found.js';
+
+export const routes: Route[] = [
+  { path: '/', component: 'app-home', name: 'Home' },
+  // The fallback route should always be after other alternatives.
+  { path: '(.*)', component: 'app-not-found' },
+];

package/templates/webcomponents/igc-ts/projects/_base/files/src/app/app.ts

@@ -0,0 +1,32 @@
+import { html, css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { Router, } from '@vaadin/router';
+import { routes } from './app-routing.js';
+
+@customElement('app-root')
+export class App extends LitElement {
+  static styles = css`
+    router-outlet {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      text-align: center;
+      flex-flow: column nowrap;
+      justify-content: stretch;
+      align-items: center;
+      overflow: inherit;
+    }
+  `;
+
+  render() {
+    return html`
+      <router-outlet></router-outlet>
+    `;
+  }
+
+  firstUpdated() {
+    const outlet = this.shadowRoot?.querySelector('router-outlet');
+    const router = new Router(outlet);
+    router.setRoutes(routes);
+  }
+}

package/templates/webcomponents/igc-ts/projects/{empty/files/src/app/home/home.component.test.ts → _base/files/src/app/home/home.test.ts}

@@ -1,5 +1,5 @@
 import { expect } from '@open-wc/testing';
-import { HomeComponent } from './home.component.js';
+import { HomeComponent } from './home.js';
 
 describe('HomeComponent', () => {
   it('<my-element> is an instance of MyElement', async () => {

package/templates/webcomponents/igc-ts/projects/{empty/files/src/app/home/home.component.ts → _base/files/src/app/home/home.ts}

@@ -1,17 +1,21 @@
-export class HomeComponent extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-      <style>
-        p {
-          margin: 0px 0px 8px 0px;
-        }
-        img {
-          margin-bottom: 48px;
-          max-height: 480px;
-          max-width: 100%;
-        }
-      </style>
+import { html, css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 
+@customElement('app-home')
+export class HomeComponent extends LitElement {
+  static styles = css`
+    p {
+      margin: 0px 0px 8px 0px;
+    }
+    img {
+      margin-bottom: 48px;
+      max-height: 480px;
+      max-width: 100%;
+    }
+  `;
+
+  render() {
+    return html`
       <h1>Welcome to Ignite UI for Web Components!</h1>
       <h4>A complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.</h4>
       <img src="./src/assets/astronaut-components.svg" alt="indigoDesign">
@@ -35,5 +39,3 @@ export class HomeComponent extends HTMLElement {
     `;
   }
 }
-
-customElements.define('app-home', HomeComponent);

package/templates/webcomponents/igc-ts/projects/_base/files/src/app/not-found/not-found.ts

@@ -0,0 +1,11 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('app-not-found')
+export default class NotFound extends LitElement {
+  render() {
+    return html`
+      <h2>Error 404: Page not found</h2>
+    `;
+  }
+}

package/templates/webcomponents/igc-ts/projects/_base/files/src/index.ts

@@ -0,0 +1,2 @@
+import './app/app.js';
+import './app/app-routing.js';

package/templates/webcomponents/igc-ts/projects/_base/files/styles.css

@@ -0,0 +1,5 @@
+html, body {
+  height: 100%;
+  margin: 0px;
+  background: #fafafa;
+}

package/templates/webcomponents/igc-ts/projects/_base/files/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": [
+      "es2017",
+      "dom",
+      "dom.iterable"
+    ],
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true
+  },
+  "exclude": [
+    "dist"
+  ],
+  "include": [
+    "**/*.ts"
+  ]
+}

package/templates/webcomponents/igc-ts/projects/_base/index.d.ts

@@ -0,0 +1,19 @@
+import { ControlExtraConfiguration, ProjectTemplate } from "@igniteui/cli-core";
+export declare class BaseIgcProject implements ProjectTemplate {
+    id: string;
+    name: string;
+    description: string;
+    dependencies: string[];
+    framework: string;
+    projectType: string;
+    hasExtraConfiguration: boolean;
+    delimiters: import("@igniteui/cli-core").TemplateDelimiters;
+    get templatePaths(): string[];
+    installModules(): void;
+    upgradeIgniteUIPackages(projectPath: string, packagePath: string): Promise<boolean>;
+    getExtraConfiguration(): ControlExtraConfiguration[];
+    setExtraConfiguration(extraConfigKeys: any[]): void;
+    generateConfig(name: string, theme: string, ...options: any[]): {
+        [key: string]: any;
+    };
+}

package/templates/webcomponents/igc-ts/projects/_base/index.js

@@ -0,0 +1,56 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseIgcProject = void 0;
+const cli_core_1 = require("@igniteui/cli-core");
+const path = require("path");
+class BaseIgcProject {
+    constructor() {
+        this.id = "base";
+        this.name = "base";
+        this.description = "Empty project layout structure for Ignite UI for Web Components";
+        this.dependencies = [];
+        this.framework = "webcomponents";
+        this.projectType = "igc-ts";
+        this.hasExtraConfiguration = false;
+        this.delimiters = cli_core_1.defaultDelimiters;
+    }
+    get templatePaths() {
+        return [path.join(__dirname, "files")];
+    }
+    installModules() {
+        throw new Error("Method not implemented.");
+    }
+    upgradeIgniteUIPackages(projectPath, packagePath) {
+        return __awaiter(this, void 0, void 0, function* () {
+            throw new Error("Method not implemented.");
+        });
+    }
+    getExtraConfiguration() {
+        return [];
+    }
+    setExtraConfiguration(extraConfigKeys) { }
+    generateConfig(name, theme, ...options) {
+        const config = {
+            name,
+            theme,
+            cliVersion: cli_core_1.Util.version(),
+            CustomTheme: "",
+            dashName: cli_core_1.Util.lowerDashed(name),
+            DefaultTheme: "",
+            dot: ".",
+            path: name,
+            projectTemplate: this.id
+        };
+        return config;
+    }
+}
+exports.BaseIgcProject = BaseIgcProject;

package/templates/webcomponents/igc-ts/projects/empty/index.d.ts

@@ -1 +1,14 @@
-export {};
+import { ProjectTemplate } from "@igniteui/cli-core";
+import { BaseIgcProject } from "../_base";
+export declare class EmptyPageTemplate extends BaseIgcProject implements ProjectTemplate {
+    id: string;
+    name: string;
+    description: string;
+    framework: string;
+    projectType: string;
+    dependencies: string[];
+    hasExtraConfiguration: boolean;
+    get templatePaths(): string[];
+}
+declare const _default: EmptyPageTemplate;
+export default _default;