@nstudio/angular 16.8.0 → 17.0.0-alpha.1

package/collection.json

@@ -1,7 +1,7 @@
 {
   "name": "nstudio/angular",
   "version": "0.1",
-  "extends": ["@nx/angular", "@nstudio/xplat"],
+  "extends": ["@nstudio/xplat"],
   "schematics": {
     "ng-add": {
       "factory": "./src/schematics/ng-add/ng-add",
@@ -49,11 +49,6 @@
       "schema": "./src/schematics/ngrx/schema.json",
       "description": "Create a ngrx store."
     },
-    "elements": {
-      "factory": "./src/schematics/elements",
-      "schema": "./src/schematics/elements/schema.json",
-      "description": "Create custom elements for the web with Angular."
-    },
     "helpers": {
       "factory": "./src/schematics/helpers",
       "schema": "./src/schematics/helpers/schema.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nstudio/angular",
-  "version": "16.8.0",
+  "version": "17.0.0-alpha.1",
   "description": "Angular Plugin for xplat",
   "homepage": "https://nstudio.io/xplat",
   "repository": {
@@ -29,9 +29,9 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nx/angular": "^16.0.0"
+    "@nx/angular": "^17.0.0"
   },
   "peerDependencies": {
-    "@nstudio/xplat": "16.8.0"
+    "@nstudio/xplat": "17.0.0-alpha.1"
   }
 }

package/src/schematics/application/index.js

@@ -10,7 +10,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const schematics_1 = require("@angular-devkit/schematics");
-const workspace_1 = require("@nx/workspace");
+const devkit_1 = require("@nx/devkit");
+const generators_1 = require("@nx/angular/generators");
 const xplat_1 = require("@nstudio/xplat");
 const xplat_utils_1 = require("@nstudio/xplat-utils");
 function default_1(options) {
@@ -52,16 +53,13 @@ function default_1(options) {
                 // ensure ends up in apps directory
                 nrwlWebOptions.directory = `apps/${options.directory}`;
             }
-            let executionOptions;
             if (options.useXplat) {
                 // when generating xplat architecture, ensure:
                 // 1. sass is used
                 nrwlWebOptions.style = 'scss';
-                // executionOptions = {
-                //   interactive: false
-                // };
             }
-            return (0, schematics_1.externalSchematic)('@nx/angular', 'app', nrwlWebOptions, executionOptions)(tree, context);
+            // NOTE: This is what this needs to be:
+            return (0, devkit_1.convertNxGenerator)(generators_1.applicationGenerator)(nrwlWebOptions);
         },
         (tree, context) => addHeadlessE2e(options)(tree, context),
         options.useXplat
@@ -72,58 +70,18 @@ function default_1(options) {
             : (0, schematics_1.noop)(),
         // adjust app files
         options.useXplat
-            ? (tree, context) => adjustAppFiles(options, tree)
+            ? (tree, context) => adjustAppFiles(options, tree, context)
             : (0, schematics_1.noop)(),
-        (0, workspace_1.formatFiles)({ skipFormat: options.skipFormat }),
     ]);
 }
 exports.default = default_1;
-/**
- * Add a Protractor config with headless Chrome and create a
- * target configuration to use the config created.
- *
- * @param options
- */
-function addProtractorCiConfig(options) {
-    return (tree, context) => {
-        const config = `
-const defaultConfig = require('./protractor.conf').config;
-defaultConfig.capabilities.chromeOptions = {
-  args: ['--headless']
-};
-
-exports.config = defaultConfig;
-    `;
-        const directory = options.directory ? `${options.directory}/` : '';
-        const e2eProjectName = `${options.name}-e2e`;
-        const confFile = 'protractor.headless.js';
-        tree.create(`/apps/${directory}${e2eProjectName}/${confFile}`, config);
-        return (0, workspace_1.updateWorkspace)((workspace) => {
-            if (workspace.projects.has(e2eProjectName)) {
-                const projectDef = workspace.projects.get(e2eProjectName);
-                const e2eDef = projectDef.targets.get('e2e');
-                if (e2eDef) {
-                    e2eDef.configurations.ci = {
-                        protractorConfig: `apps/${directory}${e2eProjectName}/${confFile}`,
-                    };
-                    projectDef.targets.set('e2e', e2eDef);
-                }
-            }
-        });
-    };
-}
 /**
  * Add headless options to e2e tests
  * @param options
  */
 function addHeadlessE2e(options) {
     const framework = options.e2eTestRunner;
-    switch (framework) {
-        case 'protractor':
-            return addProtractorCiConfig(options);
-        default:
-            return (0, schematics_1.noop)();
-    }
+    return (0, schematics_1.noop)();
 }
 function addAppFiles(options, extra = '') {
     extra = extra ? `${extra}_` : '';
@@ -133,7 +91,7 @@ function addAppFiles(options, extra = '') {
         (0, schematics_1.move)(`apps/${directory}${options.name}`),
     ])));
 }
-function adjustAppFiles(options, tree) {
+function adjustAppFiles(options, tree, context) {
     return __awaiter(this, void 0, void 0, function* () {
         const directory = options.directory ? `${options.directory}/` : '';
         tree.overwrite(`/apps/${directory}${options.name}/src/index.html`, indexContent(options.name));
@@ -150,18 +108,20 @@ function adjustAppFiles(options, tree) {
         tree.overwrite(`/apps/${directory}${options.name}/src/app/app.component.spec.ts`, appCmpSpec());
         tree.overwrite(`/apps/${directory}${options.name}/src/app/app.module.ts`, appModuleContent(options));
         // update cli config for shared web specific scss
-        const workspace = yield (0, workspace_1.getWorkspace)(tree);
-        const project = workspace.projects.get(options.name);
-        if (project && project.targets) {
-            const buildOptions = project.targets.get('build').options;
-            if (buildOptions) {
-                project.targets.get('build').options.styles = [
-                    `libs/xplat/${xplat_1.XplatHelpers.getXplatFoldername('web', 'angular')}/scss/src/_index.scss`,
-                    `apps/${directory}${options.name}/src/styles.scss`,
-                ];
+        (0, devkit_1.updateProjectConfiguration)((0, xplat_1.convertNgTreeToDevKit)(tree, context), options.name, {
+            root: `apps/${directory}${options.name}`,
+            targets: {
+                build: {
+                    options: {
+                        styles: [
+                            `libs/xplat/${xplat_1.XplatHelpers.getXplatFoldername('web', 'angular')}/scss/src/_index.scss`,
+                            `apps/${directory}${options.name}/src/styles.scss`,
+                        ]
+                    }
+                }
             }
-        }
-        return (0, workspace_1.updateWorkspace)(workspace);
+        });
+        return (0, schematics_1.noop)();
     });
 }
 function indexContent(name) {

package/src/schematics/application/index.spec.js

@@ -40,7 +40,7 @@ describe('app', () => {
         expect(tree.exists('/libs/xplat/web/scss/src/_index.scss')).toBeTruthy();
         expect(tree.exists('/libs/xplat/web/scss/src/package.json')).toBeTruthy();
         // let checkPath = 'angular.json'
-        // let checkFile = getFileContent(tree, checkPath);
+        // let checkFile = tree.readContent(checkPath)
         // console.log(checkPath, checkFile)
     }));
     it('should create all files for web app using groupByName', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -51,7 +51,7 @@ describe('app', () => {
         // console.log(files);
         expect(files.indexOf('/apps/foo-web/tsconfig.json')).toBeGreaterThanOrEqual(0);
         let checkPath = (0, xplat_utils_1.getRootTsConfigPath)();
-        let checkFile = (0, testing_1.getFileContent)(tree, checkPath);
+        let checkFile = tree.readContent(checkPath);
         // console.log('tsconfig.base:', checkFile);
         expect(files.indexOf(checkPath)).toBeGreaterThanOrEqual(0);
         expect(files.indexOf('/tsconfig.base.json')).toBeGreaterThanOrEqual(0);

package/src/schematics/component/index.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const schematics_1 = require("@angular-devkit/schematics");
 const xplat_1 = require("@nstudio/xplat");
 const xplat_utils_1 = require("@nstudio/xplat-utils");
-const workspace_1 = require("@nx/workspace");
 const angular_1 = require("@nstudio/angular");
 let componentSettings;
 function default_1(options) {
@@ -47,7 +46,6 @@ function default_1(options) {
             : (0, schematics_1.noop)()(tree, context),
         // add platform chains
         (tree, context) => (0, schematics_1.chain)(externalChains),
-        (0, workspace_1.formatFiles)({ skipFormat: options.skipFormat }),
     ]);
 }
 exports.default = default_1;

package/src/schematics/feature/index.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const schematics_1 = require("@angular-devkit/schematics");
-const workspace_1 = require("@nx/workspace");
 const xplat_1 = require("@nstudio/xplat");
 const xplat_utils_1 = require("@nstudio/xplat-utils");
 function default_1(options) {
@@ -40,7 +39,6 @@ function default_1(options) {
             : xplat_1.XplatFeatureHelpers.adjustBarrelIndex(options, 'libs/xplat/features/src/lib/index.ts'),
         // external schematic handling
         (tree, context) => (0, schematics_1.chain)(externalChains),
-        (0, workspace_1.formatFiles)({ skipFormat: options.skipFormat }),
     ]);
 }
 exports.default = default_1;

package/src/schematics/helpers/index.js

@@ -4,7 +4,6 @@ const xplat_1 = require("@nstudio/xplat");
 const xplat_utils_1 = require("@nstudio/xplat-utils");
 const applitools_1 = require("./applitools");
 const schematics_1 = require("@angular-devkit/schematics");
-const workspace_1 = require("@nx/workspace");
 const supportedHelpers = {
     applitools: applitools_1.config,
 };
@@ -22,6 +21,6 @@ function default_1(options) {
             helperChain.push((0, schematics_1.noop)());
         }
     }
-    return (0, schematics_1.chain)([(0, xplat_utils_1.prerun)(options), ...helperChain, (0, workspace_1.addInstallTask)()]);
+    return (0, schematics_1.chain)([(0, xplat_utils_1.prerun)(options), ...helperChain]);
 }
 exports.default = default_1;

package/src/schematics/xplat/index.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const schematics_1 = require("@angular-devkit/schematics");
-const workspace_1 = require("@nx/workspace");
 const xplat_1 = require("@nstudio/xplat");
 const xplat_utils_1 = require("@nstudio/xplat-utils");
 const xplat_2 = require("../../utils/xplat");
@@ -40,7 +39,6 @@ function default_1(options) {
                 }
             });
         },
-        (0, workspace_1.formatFiles)({ skipFormat: options.skipFormat }),
         // clean shared code script - don't believe need this anymore
         // (tree: Tree) => {
         //   const scripts = {};

package/src/utils/generator.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.adjustSandbox = exports.adjustRouting = exports.adjustFeatureModuleForState = exports.adjustFeatureModule = exports.adjustModule = exports.adjustBarrelIndexForType = exports.adjustBarrelIndex = exports.adjustBarrel = exports.shouldTargetCoreBarrel = exports.isFeatureInGeneralBarrel = exports.addToFeature = exports.getNxFeaturePath = exports.getFeatureName = exports.generate = void 0;
 const schematics_1 = require("@angular-devkit/schematics");
-const workspace_1 = require("@nx/workspace");
 const xplat_1 = require("@nstudio/xplat");
 const xplat_utils_1 = require("@nstudio/xplat-utils");
 const ast_1 = require("./ast");
@@ -164,7 +163,6 @@ function generate(type, options) {
             ? // ensure ngrx dependencies are added to root package
                 (0, xplat_1.updatePackageForNgrx)(tree)
             : (0, schematics_1.noop)()(tree, context),
-        (0, workspace_1.formatFiles)({ skipFormat: options.skipFormat }),
     ]);
 }
 exports.generate = generate;

package/src/utils/versions.d.ts

@@ -1,10 +1,9 @@
 export declare const xplatVersion = "*";
-export declare const nxVersion = "^16.0.0";
+export declare const nxVersion = "^17.0.0";
 export declare const angularVersion = "^16.0.0";
 export declare const angularDevkitVersion = "^16.0.0";
 export declare const ngxTranslateVersion = "~14.0.0";
 export declare const ngxTranslateHttpVersion = "~7.0.0";
 export declare const rxjsVersion = "^7.8.0";
 export declare const zonejsVersion = "~0.13.0";
-export declare const jestPresetAngular = "^13.0.0";
-export declare const typesJest = "29.4.0";
+export declare const typesJest = "29.5.6";

package/src/utils/versions.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.typesJest = exports.jestPresetAngular = exports.zonejsVersion = exports.rxjsVersion = exports.ngxTranslateHttpVersion = exports.ngxTranslateVersion = exports.angularDevkitVersion = exports.angularVersion = exports.nxVersion = exports.xplatVersion = void 0;
-exports.xplatVersion = '16.8.0';
-exports.nxVersion = '^16.0.0';
+exports.typesJest = exports.zonejsVersion = exports.rxjsVersion = exports.ngxTranslateHttpVersion = exports.ngxTranslateVersion = exports.angularDevkitVersion = exports.angularVersion = exports.nxVersion = exports.xplatVersion = void 0;
+exports.xplatVersion = '17.0.0-alpha.1';
+exports.nxVersion = '^17.0.0';
 exports.angularVersion = '^16.0.0';
 exports.angularDevkitVersion = '^16.0.0';
 exports.ngxTranslateVersion = '~14.0.0';
 exports.ngxTranslateHttpVersion = '~7.0.0';
 exports.rxjsVersion = '^7.8.0';
 exports.zonejsVersion = '~0.13.0';
-exports.jestPresetAngular = '^13.0.0';
-exports.typesJest = '29.4.0';
+exports.typesJest = '29.5.6';

package/src/utils/xplat.js

@@ -119,7 +119,7 @@ var XplatAngularHelpers;
             dependencies[`@${(0, xplat_utils_1.getNpmScope)()}/xplat-scss`] = 'file:libs/xplat/scss/src';
             return xplat_1.XplatHelpers.updatePackageForXplat(options, {
                 dependencies: Object.assign(Object.assign({}, dependencies), { '@ngx-translate/core': versions_1.ngxTranslateVersion, '@ngx-translate/http-loader': versions_1.ngxTranslateHttpVersion }),
-                devDependencies: Object.assign(Object.assign({}, devDependencies), { '@types/jest': versions_1.typesJest, 'jest-preset-angular': versions_1.jestPresetAngular }),
+                devDependencies: Object.assign(Object.assign({}, devDependencies), { '@types/jest': versions_1.typesJest }),
             })(tree, context);
         };
     }

package/src/schematics/elements/_builder_files/builder/elements.ts__tmpl__

@@ -1,6 +0,0 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { <%= utils.classify(name) %>Module } from '../<%= name %>.module';
-
-platformBrowserDynamic()
-  .bootstrapModule(<%= utils.classify(name) %>Module)
-  .catch(err => console.log(err));

package/src/schematics/elements/_builder_files/builder/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Custom Elements</title>
-    <base href="/" />
-
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  </head>
-  <body>
-    <%= htmlElements %>
-  </body>
-</html>

package/src/schematics/elements/_builder_files/builder/polyfills.ts__tmpl__

@@ -1,77 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
-/** Evergreen browsers require these. **/
-// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-// import 'core-js/es/reflect';
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- */
-
-// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
-// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
-// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
-
-/*
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- */
-// (window as any).__Zone_enable_cross_context_check = true;
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */
-import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';

package/src/schematics/elements/_builder_files/builder/tsconfig.elements.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../../../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "../../../../../dist/out-tsc/libs/xplat/web/elements",
-    "module": "es2015",
-    "types": []
-  },
-  "exclude": ["src/test.ts", "**/*.spec.ts"],
-  "include": ["**/*.ts"]
-}

package/src/schematics/elements/_files/__name__.module.ts__tmpl__

@@ -1,20 +0,0 @@
-import { NgModule, Injector } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { createCustomElement } from '@angular/elements';
-import { <%= componentSymbolList %> } from '<%= barrel %>';
-
-@NgModule({
-  imports: [BrowserModule],
-  entryComponents: [
-    <%= componentSymbolList %>
-  ]
-})
-export class <%= utils.classify(name) %>Module {
-  constructor(private injector: Injector) {
-    
-  }
-
-  ngDoBootstrap() {
-    <%= customElementList %>
-  }
-}

package/src/schematics/elements/index.d.ts

@@ -1,3 +0,0 @@
-import { Rule } from '@angular-devkit/schematics';
-import { Schema as ElementsOptions } from './schema';
-export default function (options: ElementsOptions): Rule;

package/src/schematics/elements/index.js

@@ -1,239 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const schematics_1 = require("@angular-devkit/schematics");
-const workspace_1 = require("@nx/workspace");
-const xplat_1 = require("@nstudio/xplat");
-const xplat_utils_1 = require("@nstudio/xplat-utils");
-let customElementList;
-let componentSymbols;
-let componentSymbolList;
-let htmlElements;
-function default_1(options) {
-    if (!options.builderModule) {
-        const example = `nx g @nstudio/angular:elements menu --barrel=@mycompany/ui --components=menu,footer`;
-        if (!options.name) {
-            throw new schematics_1.SchematicsException((0, xplat_1.missingArgument)('name', 'Provide a name for the custom element module.', example));
-        }
-        if (!options.barrel) {
-            throw new schematics_1.SchematicsException((0, xplat_1.missingArgument)('barrel', 'Provide the name of the workspace barrel where your components live.', example));
-        }
-        if (!options.components) {
-            throw new schematics_1.SchematicsException((0, xplat_1.missingArgument)('components', `Provide a comma delimited list of components you'd like to create as custom elements.`, example));
-        }
-    }
-    return (0, schematics_1.chain)([
-        (0, xplat_utils_1.prerun)(options),
-        (tree) => {
-            if (!options.builderModule) {
-                const workspacePrefix = options.prefix || (0, xplat_utils_1.getPrefix)() || '';
-                const htmlElementList = [];
-                componentSymbols = [];
-                // parse component names to standard convention
-                const componentNames = options.components.split(',');
-                for (let component of componentNames) {
-                    // using short name ("menu" for a component named "MenuComponent")
-                    // convert to fully best practice name
-                    const isShortName = component.toLowerCase().indexOf('component') === -1;
-                    let selector = `${workspacePrefix ? `${workspacePrefix}-` : ''}`;
-                    if (isShortName) {
-                        selector += component.toLowerCase();
-                    }
-                    else {
-                        const parts = component.toLowerCase().split('component');
-                        selector += parts[0];
-                    }
-                    componentSymbols.push({
-                        selector,
-                        symbol: `${xplat_1.stringUtils.classify(component)}${isShortName ? 'Component' : ''}`,
-                    });
-                    htmlElementList.push(`<${selector}></${selector}>`);
-                }
-                componentSymbolList = componentSymbols.map((c) => c.symbol).join(', ');
-                htmlElements = htmlElementList.join('\n');
-                customElementList = createCustomElementList(componentSymbols);
-            }
-            return tree;
-        },
-        // add custom element module
-        (tree, context) => {
-            return options.builderModule ? (0, schematics_1.noop)() : addFiles(options)(tree, context);
-        },
-        // add builder files or update them
-        (tree, context) => {
-            if (tree.exists('libs/xplat/web/elements/builder/index.html')) {
-                return updateBuilder(tree, options);
-            }
-            else {
-                return addFiles(options, 'builder')(tree, context);
-            }
-        },
-        // adjust app files
-        // (tree: Tree) => adjustAppFiles(options, tree),
-        // add build scripts
-        (tree) => {
-            if (options.builderModule) {
-                return (0, schematics_1.noop)();
-            }
-            else {
-                const scripts = {};
-                scripts[`build.web.elements`] = `ng build web-elements --prod --output-hashing=none --single-bundle=true --keep-polyfills=true`;
-                scripts[`preview.web.elements`] = `http-server dist/ngelements`;
-                return (0, xplat_1.updatePackageScripts)(tree, scripts);
-            }
-        },
-        (tree, context) => {
-            if (options.builderModule) {
-                return (0, schematics_1.noop)()(tree, context);
-            }
-            else {
-                return (0, workspace_1.updateWorkspace)((workspace) => {
-                    const projectDef = {
-                        root: '',
-                        sourceRoot: 'libs/xplat/web/elements/builder',
-                        projectType: 'application',
-                        prefix: 'web-elements',
-                        schematics: {},
-                        targets: {
-                            build: {
-                                builder: 'ngx-build-plus:build',
-                                options: {
-                                    outputPath: 'dist/ngelements',
-                                    index: 'libs/xplat/web/elements/builder/index.html',
-                                    main: 'libs/xplat/web/elements/builder/elements.ts',
-                                    polyfills: 'libs/xplat/web/elements/builder/polyfills.ts',
-                                    tsConfig: 'libs/xplat/web/elements/builder/tsconfig.elements.json',
-                                },
-                                configurations: {
-                                    production: {
-                                        optimization: true,
-                                        outputHashing: 'all',
-                                        sourceMap: false,
-                                        extractCss: true,
-                                        namedChunks: false,
-                                        aot: true,
-                                        extractLicenses: true,
-                                        vendorChunk: false,
-                                        buildOptimizer: true,
-                                    },
-                                },
-                            },
-                            serve: {
-                                builder: 'ngx-build-plus:dev-server',
-                                options: {
-                                    browserTarget: 'web-elements:build',
-                                },
-                                configurations: {
-                                    production: {
-                                        browserTarget: 'web-elements:build:production',
-                                    },
-                                },
-                            },
-                        },
-                    };
-                    if (workspace.projects.has('web-elements')) {
-                        workspace.projects.set('web-elements', projectDef);
-                    }
-                    else {
-                        workspace.projects.add(Object.assign({ name: `web-elements` }, projectDef));
-                    }
-                });
-            }
-        },
-        // update dependencies
-        (tree, context) => {
-            return options.builderModule
-                ? (0, schematics_1.noop)()
-                : updateWorkspaceSupport(options, tree, context);
-        },
-        // update for builderModule if desired
-        (tree, context) => {
-            if (options.builderModule) {
-            }
-            else {
-                return (0, schematics_1.noop)();
-            }
-        },
-        (0, workspace_1.formatFiles)({ skipFormat: options.skipFormat }),
-    ]);
-}
-exports.default = default_1;
-function addFiles(options, extra = '') {
-    extra = extra ? `${extra}_` : '';
-    const xplatFolderName = xplat_1.XplatHelpers.getXplatFoldername('web', 'angular');
-    return (0, schematics_1.branchAndMerge)((0, schematics_1.mergeWith)((0, schematics_1.apply)((0, schematics_1.url)(`./_${extra}files`), [
-        (0, schematics_1.template)(Object.assign(Object.assign(Object.assign({}, options), (0, xplat_1.getDefaultTemplateOptions)()), { name: options.name.toLowerCase(), xplatFolderName,
-            customElementList,
-            componentSymbolList,
-            componentSymbols,
-            htmlElements })),
-        (0, schematics_1.move)(`libs/xplat/${xplatFolderName}/elements`),
-    ])));
-}
-function updateWorkspaceSupport(options, tree, context) {
-    const packagePath = 'package.json';
-    const json = (0, xplat_utils_1.getJsonFromFile)(tree, packagePath);
-    json.scripts = json.scripts || {};
-    json.dependencies = json.dependencies || {};
-    const angularVersion = json.dependencies['@angular/core'];
-    json.dependencies = Object.assign(Object.assign({}, json.dependencies), { '@angular/elements': angularVersion, '@webcomponents/webcomponentsjs': '^2.6.0' });
-    json.devDependencies = json.devDependencies || {};
-    json.devDependencies = Object.assign(Object.assign({}, json.devDependencies), { 'http-server': '^14.1.1', 'ngx-build-plus': '^16.0.0' });
-    return (0, xplat_utils_1.updateJsonFile)(tree, packagePath, json);
-}
-function createCustomElementList(componentSymbols) {
-    const customElements = ['let component;'];
-    for (const comp of componentSymbols) {
-        customElements.push(`component = createCustomElement(${comp.symbol}, { injector: this.injector });
-    customElements.define('${comp.selector}', component);`);
-    }
-    return customElements.join('\n');
-}
-function updateBuilder(tree, options) {
-    if (options.builderModule) {
-        tree.overwrite(`libs/xplat/web/elements/builder/elements.ts`, builderElementsContent(options.builderModule));
-        const moduleFilePath = `libs/xplat/web/elements/${options.builderModule}.module.ts`;
-        if (tree.exists(moduleFilePath)) {
-            const moduleFile = tree.get(moduleFilePath).content.toString();
-            const selectorParts = moduleFile.split('.define(');
-            selectorParts.splice(0, 1); // remove starting data
-            const customElements = [];
-            for (const part of selectorParts) {
-                let selector = part.split(',')[0].replace(/'/gi, '').replace(/"/gi, '');
-                customElements.push(`<${selector}></${selector}>`);
-            }
-            tree.overwrite(`libs/xplat/web/elements/builder/index.html`, buildIndexContent(customElements.join('\n')));
-        }
-        else {
-            throw new schematics_1.SchematicsException(`${moduleFilePath} does not exist.`);
-        }
-    }
-    else {
-        tree.overwrite(`libs/xplat/web/elements/builder/elements.ts`, builderElementsContent(options.name));
-        tree.overwrite(`libs/xplat/web/elements/builder/index.html`, buildIndexContent(htmlElements));
-    }
-    return tree;
-}
-function builderElementsContent(name) {
-    return `import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { ${xplat_1.stringUtils.classify(name)}Module } from '../${name}.module';
-
-platformBrowserDynamic()
-  .bootstrapModule(${xplat_1.stringUtils.classify(name)}Module)
-  .catch(err => console.log(err));
-`;
-}
-function buildIndexContent(customElements) {
-    return `<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Custom Elements</title>
-  <base href="/">
-
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
-<body>
-  ${customElements}
-</body>
-</html>`;
-}

package/src/schematics/elements/index.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/src/schematics/elements/index.spec.js

@@ -1,137 +0,0 @@
-"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 schematics_1 = require("@angular-devkit/schematics");
-const testing_1 = require("@nstudio/xplat/testing");
-const testing_2 = require("../../utils/testing");
-describe('elements schematic', () => {
-    let appTree;
-    const defaultOptions = {
-        name: 'ui-kit',
-        barrel: '@mycompany/xplat/web/features',
-        components: 'menu,footer',
-    };
-    beforeEach(() => {
-        appTree = schematics_1.Tree.empty();
-        appTree = (0, testing_1.createXplatWithApps)(appTree, 'angular');
-    });
-    it('should create an elements module that provides the specified components', () => __awaiter(void 0, void 0, void 0, function* () {
-        const options = Object.assign({}, defaultOptions);
-        // console.log('appTree:', appTree);
-        const componentOptions = {
-            name: 'menu',
-            platforms: 'web',
-        };
-        let tree = yield (0, testing_2.runSchematic)('component', componentOptions, appTree);
-        componentOptions.name = 'footer';
-        tree = yield (0, testing_2.runSchematic)('component', componentOptions, tree);
-        let files = tree.files;
-        // console.log(files.slice(85,files.length));
-        expect(files.indexOf('/libs/xplat/web/features/src/lib/ui/components/menu/menu.component.html')).toBeGreaterThanOrEqual(0);
-        expect(files.indexOf('/libs/xplat/web/features/src/lib/ui/components/menu/menu.component.ts')).toBeGreaterThanOrEqual(0);
-        expect(files.indexOf('/libs/xplat/web/features/src/lib/ui/components/footer/footer.component.html')).toBeGreaterThanOrEqual(0);
-        expect(files.indexOf('/libs/xplat/web/features/src/lib/ui/components/footer/footer.component.ts')).toBeGreaterThanOrEqual(0);
-        tree = yield (0, testing_2.runSchematic)('elements', options, tree);
-        files = tree.files;
-        const elementModulePath = '/libs/xplat/web/elements/ui-kit.module.ts';
-        expect(files.indexOf(elementModulePath)).toBeGreaterThanOrEqual(0);
-        const elementModule = (0, testing_1.getFileContent)(tree, elementModulePath);
-        // console.log(elementModule);
-        expect(elementModule.indexOf(`import { MenuComponent, FooterComponent } from '@mycompany/xplat/web/features';`)).toBeGreaterThanOrEqual(0);
-        expect(elementModule.indexOf(`createCustomElement(MenuComponent`)).toBeGreaterThanOrEqual(0);
-        expect(elementModule.indexOf(`define('tt-menu'`)).toBeGreaterThanOrEqual(0);
-        expect(elementModule.indexOf(`createCustomElement(FooterComponent`)).toBeGreaterThanOrEqual(0);
-        expect(elementModule.indexOf(`define('tt-footer'`)).toBeGreaterThanOrEqual(0);
-        const packageFile = (0, testing_1.getFileContent)(tree, 'package.json');
-        // console.log(elementModule);
-        expect(packageFile.indexOf(`build.web.elements`)).toBeGreaterThanOrEqual(0);
-        expect(packageFile.indexOf(`preview.web.elements`)).toBeGreaterThanOrEqual(0);
-    }));
-    it('--builderModule argument', () => __awaiter(void 0, void 0, void 0, function* () {
-        const options = Object.assign({}, defaultOptions);
-        // console.log('appTree:', appTree);
-        const componentOptions = {
-            name: 'menu',
-            platforms: 'web',
-        };
-        let tree = yield (0, testing_2.runSchematic)('component', componentOptions, appTree);
-        componentOptions.name = 'footer';
-        tree = yield (0, testing_2.runSchematic)('component', componentOptions, tree);
-        let files = tree.files;
-        // console.log(files.slice(85,files.length));
-        expect(files.indexOf('/libs/xplat/web/features/src/lib/ui/components/menu/menu.component.html')).toBeGreaterThanOrEqual(0);
-        expect(files.indexOf('/libs/xplat/web/features/src/lib/ui/components/menu/menu.component.ts')).toBeGreaterThanOrEqual(0);
-        expect(files.indexOf('/libs/xplat/web/features/src/lib/ui/components/footer/footer.component.html')).toBeGreaterThanOrEqual(0);
-        expect(files.indexOf('/libs/xplat/web/features/src/lib/ui/components/footer/footer.component.ts')).toBeGreaterThanOrEqual(0);
-        tree = yield (0, testing_2.runSchematic)('elements', options, tree);
-        files = tree.files;
-        let elementModulePath = '/libs/xplat/web/elements/ui-kit.module.ts';
-        expect(files.indexOf(elementModulePath)).toBeGreaterThanOrEqual(0);
-        let elementModule = (0, testing_1.getFileContent)(tree, elementModulePath);
-        // console.log(elementModule);
-        expect(elementModule.indexOf(`'@mycompany/xplat/web/features';`)).toBeGreaterThanOrEqual(0);
-        let builderPath = '/libs/xplat/web/elements/builder/elements.ts';
-        expect(files.indexOf(builderPath)).toBeGreaterThanOrEqual(0);
-        let builderModule = (0, testing_1.getFileContent)(tree, builderPath);
-        // console.log(builderModule);
-        expect(builderModule.indexOf(`../ui-kit.module`)).toBeGreaterThanOrEqual(0);
-        let builderIndexPath = '/libs/xplat/web/elements/builder/index.html';
-        expect(files.indexOf(builderPath)).toBeGreaterThanOrEqual(0);
-        let builderIndex = (0, testing_1.getFileContent)(tree, builderIndexPath);
-        // console.log(builderIndex);
-        expect(builderIndex.indexOf(`<tt-menu></tt-menu>`)).toBeGreaterThanOrEqual(0);
-        expect(builderIndex.indexOf(`<tt-footer></tt-footer>`)).toBeGreaterThanOrEqual(0);
-        const component2Options = {
-            name: 'dropdown',
-            platforms: 'web',
-        };
-        tree = yield (0, testing_2.runSchematic)('component', component2Options, tree);
-        component2Options.name = 'link';
-        tree = yield (0, testing_2.runSchematic)('component', component2Options, tree);
-        files = tree.files;
-        // console.log(files.slice(85,files.length));
-        expect(files.indexOf('/libs/xplat/web/features/src/lib/ui/components/dropdown/dropdown.component.html')).toBeGreaterThanOrEqual(0);
-        expect(files.indexOf('/libs/xplat/web/features/src/lib/ui/components/dropdown/dropdown.component.ts')).toBeGreaterThanOrEqual(0);
-        expect(files.indexOf('/libs/xplat/web/features/src/lib/ui/components/link/link.component.html')).toBeGreaterThanOrEqual(0);
-        expect(files.indexOf('/libs/xplat/web/features/src/lib/ui/components/link/link.component.ts')).toBeGreaterThanOrEqual(0);
-        const newElementOptions = {
-            name: 'widgets',
-            barrel: '@mycompany/xplat/web/features',
-            components: 'dropdown,link',
-        };
-        tree = yield (0, testing_2.runSchematic)('elements', newElementOptions, tree);
-        files = tree.files;
-        elementModulePath = '/libs/xplat/web/elements/widgets.module.ts';
-        expect(files.indexOf(elementModulePath)).toBeGreaterThanOrEqual(0);
-        elementModule = (0, testing_1.getFileContent)(tree, elementModulePath);
-        // console.log(elementModule);
-        expect(elementModule.indexOf(`'@mycompany/xplat/web/features';`)).toBeGreaterThanOrEqual(0);
-        builderModule = (0, testing_1.getFileContent)(tree, builderPath);
-        // console.log(builderModule);
-        expect(builderModule.indexOf(`../widgets.module`)).toBeGreaterThanOrEqual(0);
-        builderIndex = (0, testing_1.getFileContent)(tree, builderIndexPath);
-        // console.log(builderIndex);
-        expect(builderIndex.indexOf(`<tt-dropdown></tt-dropdown>`)).toBeGreaterThanOrEqual(0);
-        expect(builderIndex.indexOf(`<tt-link></tt-link>`)).toBeGreaterThanOrEqual(0);
-        const builderOption = {
-            builderModule: 'ui-kit',
-        };
-        tree = yield (0, testing_2.runSchematic)('elements', builderOption, tree);
-        files = tree.files;
-        builderModule = (0, testing_1.getFileContent)(tree, builderPath);
-        // console.log(builderModule);
-        expect(builderModule.indexOf(`../ui-kit.module`)).toBeGreaterThanOrEqual(0);
-        builderIndex = (0, testing_1.getFileContent)(tree, builderIndexPath);
-        // console.log(builderIndex);
-        expect(builderIndex.indexOf(`<tt-menu></tt-menu>`)).toBeGreaterThanOrEqual(0);
-        expect(builderIndex.indexOf(`<tt-footer></tt-footer>`)).toBeGreaterThanOrEqual(0);
-    }));
-});

package/src/schematics/elements/schema.json

@@ -1,38 +0,0 @@
-{
-  "$schema": "http://json-schema.org/schema",
-  "$id": "elements",
-  "title": "Create custom elements for the web.",
-  "type": "object",
-  "properties": {
-    "name": {
-      "description": "The name of the custom element module.",
-      "type": "string",
-      "$default": {
-        "$source": "argv",
-        "index": 0
-      }
-    },
-    "barrel": {
-      "description": "The barrel in your workspace that contains the components you'd like to create as custom elements.",
-      "type": "string"
-    },
-    "components": {
-      "description": "Comma delimited list of components from your barrel to create as custom elements.",
-      "type": "string"
-    },
-    "builderModule": {
-      "type": "string",
-      "description": "Update builder files to use a different Angular Element module. Used in isolation with no other options."
-    },
-    "prefix": {
-      "type": "string",
-      "description": "A unique prefix to add to each custom element. Defaults to workspace selector setting."
-    },
-    "skipFormat": {
-      "description": "Skip formatting files",
-      "type": "boolean",
-      "default": false
-    }
-  },
-  "required": []
-}