feat(elements): add schematics #23298
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| package(default_visibility = ["//visibility:public"]) | ||
|
|
||
| load("//tools:defaults.bzl", "ts_library") | ||
| load("@build_bazel_rules_nodejs//:defs.bzl", "jasmine_node_test") | ||
|
|
||
| exports_files([ | ||
| "package.json", | ||
| "collection.json", | ||
| ]) | ||
|
|
||
| ts_library( | ||
| name = "schematics", | ||
| srcs = glob( | ||
| [ | ||
| "ng-add/index.ts", | ||
| "ng-add/schema.d.ts", | ||
| ], | ||
| ), | ||
| module_name = "@angular/elements/schematics", | ||
| deps = [ | ||
| "//packages/common", | ||
| "//packages/core", | ||
| "@rxjs", | ||
| ], | ||
| ) | ||
|
|
||
| ts_library( | ||
| name = "test_lib", | ||
| testonly = 1, | ||
| srcs = glob( | ||
| [ | ||
| "ng-add/index_spec.ts", | ||
| ], | ||
| ), | ||
| deps = [ | ||
| ":schematics", | ||
| "//packages/common", | ||
| "//packages/core", | ||
| "@rxjs", | ||
| "@rxjs//operators", | ||
| ], | ||
| ) | ||
|
|
||
| jasmine_node_test( | ||
| name = "test", | ||
| data = [":collection"], | ||
| deps = [ | ||
| ":test_lib", | ||
| ], | ||
| ) | ||
|
|
||
| genrule( | ||
| name = "collection", | ||
| srcs = ["collection.json"], | ||
| outs = ["test-collection.json"], | ||
| cmd = "cp $< $@", | ||
| output_to_bindir = 1, | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| { | ||
| "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json", | ||
| "schematics": { | ||
| "ng-add": { | ||
| "description": "Adds the document-register-element polyfill.", | ||
| "factory": "./ng-add" | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Google Inc. All Rights Reserved. | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://angular.io/license | ||
| */ | ||
| import {Rule, SchematicContext, Tree, chain, noop} from '@angular-devkit/schematics'; | ||
| import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks'; | ||
| import {Schema} from './schema'; | ||
|
|
||
| export default function(options: Schema): Rule { | ||
| return chain([ | ||
| options && options.skipPackageJson ? noop() : addPackageJsonDependency(), addScript(options) | ||
| ]); | ||
| } | ||
|
|
||
| /** Adds a package.json dependency for document-register-element */ | ||
| function addPackageJsonDependency() { | ||
| return (host: Tree, context: SchematicContext) => { | ||
|
|
||
| if (host.exists('package.json')) { | ||
| const jsonStr = host.read('package.json') !.toString('utf-8'); | ||
| const json = JSON.parse(jsonStr); | ||
|
|
||
| // If there are no dependencies, create an entry for dependencies. | ||
| const type = 'dependencies'; | ||
| if (!json[type]) { | ||
| json[type] = {}; | ||
| } | ||
|
|
||
| // If not already present, add the dependency. | ||
| const pkg = 'document-register-element'; | ||
| const version = '^1.7.2'; | ||
| if (!json[type][pkg]) { | ||
| json[type][pkg] = version; | ||
| } | ||
|
|
||
| // Write the JSON back to package.json | ||
| host.overwrite('package.json', JSON.stringify(json, null, 2)); | ||
| context.logger.log('info', 'Added `document-register-element` as a dependency.'); | ||
|
|
||
| // Install the dependency | ||
| context.addTask(new NodePackageInstallTask()); | ||
| } | ||
|
|
||
| return host; | ||
| }; | ||
| } | ||
|
|
||
| /** Adds the document-register-element.js script to the angular CLI json. */ | ||
| function addScript(options: Schema) { | ||
| return (host: Tree, context: SchematicContext) => { | ||
| const script = 'node_modules/document-register-element/build/document-register-element.js'; | ||
|
|
||
|
|
||
| try { | ||
| // Handle the new json - angular.json | ||
| const angularJsonFile = host.read('angular.json'); | ||
| if (angularJsonFile) { | ||
| const json = JSON.parse(angularJsonFile.toString('utf-8')); | ||
| const project = Object.keys(json['projects'])[0] || options.project; | ||
| const scripts = json['projects'][project]['architect']['build']['options']['scripts']; | ||
| scripts.push({input: script}); | ||
| host.overwrite('angular.json', JSON.stringify(json, null, 2)); | ||
| } | ||
| } catch (e) { | ||
| context.logger.log( | ||
| 'warn', 'Failed to add the polyfill document-register-element.js to scripts'); | ||
| } | ||
|
|
||
| context.logger.log('info', 'Added document-register-element.js polyfill to scripts'); | ||
|
|
||
| return host; | ||
| }; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Google Inc. All Rights Reserved. | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://angular.io/license | ||
| */ | ||
| import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing'; | ||
| import * as path from 'path'; | ||
| import {Observable} from 'rxjs'; | ||
| import {concatMap} from 'rxjs/operators'; | ||
|
|
||
| import {Schema as ElementsOptions} from './schema'; | ||
|
|
||
|
|
||
| const polyfillPath = 'node_modules/document-register-element/build/document-register-element.js'; | ||
|
|
||
| // tslint:disable:max-line-length | ||
| describe('Elements Schematics', () => { | ||
| const schematicRunner = new SchematicTestRunner( | ||
| '@angular/elements', path.join(__dirname, '../test-collection.json'), ); | ||
| const defaultOptions: ElementsOptions = {project: 'bar', skipPackageJson: false}; | ||
|
|
||
| let appTree: UnitTestTree; | ||
|
|
||
| // tslint:disable-next-line:no-any | ||
| const workspaceOptions: any = { | ||
| name: 'workspace', | ||
| newProjectRoot: 'projects', | ||
| version: '6.0.0', | ||
| }; | ||
|
|
||
| // tslint:disable-next-line:no-any | ||
| const appOptions: any = { | ||
| name: 'elements', | ||
| inlineStyle: false, | ||
| inlineTemplate: false, | ||
| routing: false, | ||
| style: 'css', | ||
| skipTests: false, | ||
| }; | ||
|
|
||
| beforeEach((done) => { | ||
| schematicRunner.runExternalSchematicAsync('@schematics/angular', 'workspace', workspaceOptions) | ||
| .pipe(concatMap( | ||
| (tree) => schematicRunner.runExternalSchematicAsync( | ||
| '@schematics/angular', 'application', appOptions, tree))) | ||
| .subscribe((tree: UnitTestTree) => appTree = tree, done.fail, done); | ||
| }); | ||
|
|
||
| it('should run the ng-add schematic', () => { | ||
| const tree = schematicRunner.runSchematic('ng-add', defaultOptions, appTree); | ||
| const configText = tree.readContent('/angular.json'); | ||
| const config = JSON.parse(configText); | ||
| const scripts = config.projects.elements.architect.build.options.scripts; | ||
| expect(scripts[0].input).toEqual(polyfillPath); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| export interface Schema { | ||
|
There was a problem hiding this comment. why put this into a "d.ts" file rather than ".ts" file? |
||
| /** | ||
| * Skip package.json install. | ||
| */ | ||
| skipPackageJson: boolean; | ||
|
|
||
| /** | ||
| * The project that needs the polyfill scripts | ||
| */ | ||
| project: name; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fyi: I heard from Hans that there is now a shorthand way to add a package to a project by passing the package name into one of the options of NodePackageInstallTask. don't change this now, but you might want to refactor this in a followup PR.
(you will need a recent version of schemantics for this)