igniteui-cli 9.0.6 → 9.1.0-beta.0

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

@@ -1,54 +1,21 @@
 "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 });
-const cli_core_1 = require("@igniteui/cli-core");
+exports.EmptyPageTemplate = void 0;
 const path = require("path");
-class EmptyProject {
+const _base_1 = require("../_base");
+class EmptyPageTemplate extends _base_1.BaseIgcProject {
     constructor() {
-        this.id = "webcomponent";
-        this.name = "empty";
-        this.description = "Ignite UI CLI project for Web Components";
+        super(...arguments);
+        this.id = "empty";
+        this.name = "Empty Project";
+        this.description = "Project structure with routing and a home page";
         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.");
-        });
-    }
-    generateConfig(name, theme, ...options) {
-        //TODO update the config with [{key: "keyname", "value"}]
-        return {
-            "cliVersion": cli_core_1.Util.version(),
-            "dash-name": cli_core_1.Util.lowerDashed(name),
-            "description": this.description,
-            "dot": ".",
-            "name": name,
-            "path": name,
-            "theme": theme
-        };
-    }
-    getExtraConfiguration() {
-        throw new Error("Method not implemented.");
-    }
-    setExtraConfiguration(extraConfigKeys) {
-        throw new Error("Method not implemented.");
+        return [...super.templatePaths, path.join(__dirname, "files")];
     }
 }
-module.exports = new EmptyProject();
+exports.EmptyPageTemplate = EmptyPageTemplate;
+exports.default = new EmptyPageTemplate();

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

@@ -0,0 +1,57 @@
+/* eslint-disable no-return-assign */
+import { html, css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcNavDrawerComponent,
+  IgcNavDrawerItemComponent,
+  IgcNavDrawerHeaderItemComponent,
+  IgcRippleComponent,
+} from 'igniteui-webcomponents';
+import { Router } from '@vaadin/router';
+import { routes } from './app-routing.js';
+
+defineComponents(
+  IgcNavDrawerComponent,
+  IgcNavDrawerItemComponent,
+  IgcNavDrawerHeaderItemComponent,
+  IgcRippleComponent,
+);
+
+@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`
+      <igc-nav-drawer open=true>
+        <igc-nav-drawer-header-item>Ignite UI CLI</igc-nav-drawer-header-item>
+        ${routes.filter((element, index) => index < routes.length - 1).map(i => html`
+          <igc-nav-drawer-item>
+            <span slot="content">
+              <a href="${i.path}">${i.name}<igc-ripple></igc-ripple></a>
+            </span>
+          </igc-nav-drawer-item>
+        `)}
+      </igc-nav-drawer>
+      <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/side-nav/index.d.ts

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

package/templates/webcomponents/igc-ts/projects/side-nav/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideNavProject = void 0;
+const path = require("path");
+const _base_1 = require("../_base");
+class SideNavProject extends _base_1.BaseIgcProject {
+    constructor() {
+        super(...arguments);
+        this.id = "side-nav";
+        this.name = "Default side navigation";
+        this.description = "Project structure with side navigation drawer";
+        this.framework = "webcomponents";
+        this.projectType = "igc-ts";
+        this.hasExtraConfiguration = false;
+    }
+    get templatePaths() {
+        return [...super.templatePaths, path.join(__dirname, "files")];
+    }
+}
+exports.SideNavProject = SideNavProject;
+exports.default = new SideNavProject();

package/templates/webcomponents/igc-ts/radial-gauge/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('IgcRadialGaugeComponent', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {

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

@@ -1,3 +1,5 @@
+import { html, css, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import {
   IgcRadialGaugeModule,
 } from 'igniteui-webcomponents-gauges';
@@ -7,17 +9,17 @@ ModuleManager.register(
   IgcRadialGaugeModule,
 );
 
-export default class $(ClassName) extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot!.innerHTML = `
-    <style>
-      :host{
-        height: 50%;
-        width: 50%;
-      }
-    </style>
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  static styles = css`
+    :host{
+      height: 50%;
+      width: 50%;
+    }
+  `;
+
+  render() {
+    return html`
     <igc-radial-gauge
       height="100%"
       width="50%"
@@ -39,5 +41,3 @@ export default class $(ClassName) extends HTMLElement {
   `;
   }
 }
-
-customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/radio-group/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('IgcRadioGroupComponent', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {

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

@@ -1,3 +1,5 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcRadioComponent,
@@ -6,9 +8,10 @@ import {
 
 defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
 
-export default class $(ClassName) extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
       <igc-radio-group>
         <igc-radio name="fruit" value="banana">
           Banana
@@ -23,5 +26,3 @@ export default class $(ClassName) extends HTMLElement {
     `;
   }
 }
-
-customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/ripple/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('IgcRippleComponent', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {

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

@@ -1,3 +1,5 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcRippleComponent,
@@ -5,9 +7,10 @@ import {
 
 defineComponents(IgcRippleComponent);
 
-export default class $(ClassName) extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
     <igc-button>
       <igc-ripple></igc-ripple>
       Button with ripple
@@ -15,6 +18,3 @@ export default class $(ClassName) extends HTMLElement {
     `;
   }
 }
-
-
-customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/slider/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('IgcSliderComponent', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {

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

@@ -1,3 +1,5 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcSliderComponent,
@@ -5,9 +7,10 @@ import {
 
 defineComponents(IgcSliderComponent);
 
-export default class $(ClassName) extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
     <igc-slider
       style="margin: 40px 20px; width: 200px;"
       min="0"
@@ -19,5 +22,3 @@ export default class $(ClassName) extends HTMLElement {
     `;
   }
 }
-
-customElements.define('app-$(path)', $(ClassName));

package/templates/webcomponents/igc-ts/switch/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('IgcSwitchComponent', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {

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

@@ -1,3 +1,5 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
   IgcSwitchComponent,
@@ -5,14 +7,13 @@ import {
 
 defineComponents(IgcSwitchComponent);
 
-export default class $(ClassName) extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
       <igc-switch>
         Label
       </igc-switch>
     `;
   }
 }
-
-customElements.define('app-$(path)', $(ClassName));

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

@@ -1,43 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-
-<head>
-  <meta charset="utf-8">
-  <base href="/">
-  <link rel="stylesheet" href="./node_modules/igniteui-webcomponents/themes/light/bootstrap.css">
-  <style>
-    html, body {
-      height: 100%;
-      margin: 0px;
-      background: #fafafa;
-    }
-
-    :host {
-      display: block;
-      padding: 25px;
-    }
-
-    #outlet {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      text-align: center;
-      flex-flow: column nowrap;
-      justify-content: stretch;
-      align-items: center;
-      overflow: inherit;
-    }
-  </style>
-</head>
-
-<body>
-  <app-navigation></app-navigation>
-  <main id="outlet"></main>
-
-  <script type="module" src="./dist/src/index.js"></script>
-  <script type="module">
-    import './dist/src/app.js';
-  </script>
-</body>
-
-</html>

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

@@ -1,9 +0,0 @@
-export default class NotFound extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-      <h2>Error 404: Page not found</h2>
-    `;
-  }
-}
-
-customElements.define('app-not-found', NotFound);

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

@@ -1,46 +0,0 @@
-/* eslint-disable no-return-assign */
-import {
-  defineComponents,
-  IgcNavDrawerComponent,
-  IgcNavDrawerItemComponent,
-  IgcNavDrawerHeaderItemComponent,
-  IgcRippleComponent,
-} from 'igniteui-webcomponents';
-import { routes } from './index.js';
-import './app/home/home.component';
-import './app/not-found/not-found.component';
-
-defineComponents(
-  IgcNavDrawerComponent,
-  IgcNavDrawerItemComponent,
-  IgcNavDrawerHeaderItemComponent,
-  IgcRippleComponent,
-);
-
-export class App extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-    <style>
-      igc-nav-drawer-header-item {
-        text-align: center;
-        font-weight: bold;
-      }
-    </style>
-    <div id="navigation-outlet">
-      <igc-nav-drawer open=true>
-        <igc-nav-drawer-header-item>Ignite UI CLI</igc-nav-drawer-header-item>
-
-        ${routes.filter((element, index) => index < routes.length - 1).map(i => `
-          <igc-nav-drawer-item>
-            <span slot="content">
-              <a style="text-decoration: none;" href="${i.path}">${i.name}<igc-ripple></igc-ripple></a>
-            </span>
-          </igc-nav-drawer-item>
-        `).join('')}
-      </igc-nav-drawer>
-    </div>
-    `;
-  }
-}
-
-customElements.define('app-navigation', App);

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

@@ -1,16 +0,0 @@
-/* eslint-disable import/extensions, quotes, no-tabs, indent, comma-dangle */
-import {
-  Route,
-  Router
-} from '@vaadin/router';
-import './app/home/home.component';
-
-export const routes: Route[] = [
-  { path: '/', component: 'app-home', name: 'Home' },
-  // The fallback route should always be after other alternatives.
-  { path: '(.*)', component: 'app-not-found' },
-];
-
-const outlet = document.getElementById('outlet');
-export const router = new Router(outlet);
-router.setRoutes(routes);

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

@@ -1,31 +0,0 @@
-{
-	"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/empty/files/webpack.config.mjs

@@ -1,67 +0,0 @@
-import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import path from 'path';
-
-const __dirname = path.resolve();
-
-export default ({
-
-  entry: path.resolve(__dirname, 'src'),
-  devtool: false,
-  output: {
-    filename: '[chunkhash].bundle.js',
-  },
-
-  resolve: {
-    mainFields: ['fesm2015', 'module', 'main'],
-    extensions: ['.ts', '.js', '.json'],
-  },
-  module: {
-    rules: [{
-      test: /\.m?js/,
-      type: "javascript/auto",
-    },
-    {
-      test: /\.m?js/,
-      resolve: {
-        fullySpecified: false,
-      },
-    },
-    {
-      test: /\.(ts|js)$/,
-      exclude: /node_modules/,
-      loader: 'babel-loader',
-      options: {
-        "compact": true,
-        "presets": [
-          ["@babel/preset-env", {
-            "useBuiltIns": "usage",
-            "corejs": 3,
-            "targets": {
-              "browsers": [
-                "last 2 Chrome versions",
-                "last 2 Safari versions",
-                "last 2 iOS versions",
-                "last 2 Firefox versions",
-                "last 2 Edge versions"
-              ]
-            }
-          }],
-          "@babel/preset-typescript"
-        ],
-        "plugins": [
-          "@babel/plugin-proposal-class-properties",
-          "@babel/plugin-transform-runtime"
-        ]
-      },
-    }],
-  },
-
-  plugins: [
-    new HtmlWebpackPlugin({
-      title: '@@AppName',
-      template: './index.html',
-    }),
-    new ForkTsCheckerWebpackPlugin(),
-  ],
-});