Skip to content

feat: search and install Schematics #10000

Description

@manekinekko

RFC: Search and install Angular CLI Schematics

tl;dr

The goal of this proposal is to add a new ng command allowing to search and install Angular CLI Schematics right from the command line, using the NPM registry. Read below for more technical details.

Longer version

The Angular CLI has introduced support for Schematics allowing developers to easily extend or even completely change the default behavior of the Angular CLI commands. With Schematics, we can (for instance)...

More generally, you can use Schematics to "[...] transforms to your project, such as create a new component or updating your code to fix breaking changes in a dependency. Or maybe you want to add a new configuration option or framework to an existing project". Read more on the angular.io.

The Angular community has already started creating custom Schematics, here are some of them:

We expect the number of the Angular CLI Schematics to grow; hence, the goal of this thread is to discuss the ability to add a new ng command allowing to (right from the command line):

Note: the commands used below ng search ** are just for illustration purposes!

  1. Searching for available Schematics
> ng search foo_
● foo_abc     (description)      (popularity index)
○ foo_def     (description)      (popularity index)   
○ foo_ghi     (description)      (popularity index)
○ foo_ijk     (description)      (popularity index)
  1. Interactively search for Schematics
> ng search
? Find and install Angular CLI Schematics: foo_
● foo_abc     (description)      (popularity index)
○ foo_def     (description)      (popularity index)   
○ foo_ghi     (description)      (popularity index)
○ foo_ijk     (description)      (popularity index)
  1. Interactively installing Schematics
> ng search 
? Find and install Angular CLI Schematics: bar_ [ENTER]
● bar_def     (description)      (popularity index)   
○ bar_ijk     (description)      (popularity index)

Installing packages for tooling via npm...
  1. Install Schematics
    NOTE: This was implemented via the ng add command.
> ng schematics install foo_abc foo_ghi
Installing...

In order for this search to be done, we will leverage the NPM infrastructure and use the public registry as the database and we need to be able to identify what NPM packages are actually Angular CLI Schematics. Here are different proposals:

  1. Use the current schematics property in the package.json, eg. see example:
{
  ...
  "schematics": "./src/collection.json"
}
  1. Use an NPM named scope, eg. @ngxschematics (ngx being the community reserved prefix we agreed on (cc @IgorMinar) — @schematics is already reserved for the official Schematics made by the Angular team). The community NPM scope (@ngxschematics) would obviously be owned (and maintained) by the Angular core team. So (community) Schematics authors will have to send PRs to that repository to make their Schematics available (listed) in the Angular CLI search command (discussed here). This approach is similar to the DefinitelyTyped project (@types/**).

  2. Have some sort of a "Market Place for Schematics" (out of the scope of this proposal). This could be merged with the previous solution.

  3. Community Schematics authors would have to tag their schematics with an explicit set of tags, eg. (angular, schematics). Community Schematics that aren't tagged using these keywords won't be listed by the Angular CLI search command (discussed here).

Other topics to cover (later) are:

  1. list, update or remove local Schematics.
  2. Replace an active Schematic, eg. defaults, with a new one.

The search process would be done by using 3rd party search APIs that interface with the NPM registry (offering probably better performances?), here are some of them:

  1. npms.io
  2. npmsearch.com
  3. github.com/algolia/npm-search
  4. npm search

Similar projects (inspiration):


Please use Github's emoji to express your interest in this draft.

cc @hansl @Brocco @filipesilva

[UPDATE] working prototype (https://github.com/manekinekko/angular-cli/blob/search-install-schematics/packages/%40angular/cli/tasks/schematic-search.ts)

[UPDATE] upgrade ptotype to v6.0.0-rc.6 (manekinekko@3706337)

angular-schematics

Activity

  1. manfredsteyer commented on Mar 18, 2018

    @manfredsteyer
    Contributor

    I like those ideas. Two things came in mind when reading this:

    • As Schematic Collections are distributed via npm packages, we could leverage the existing npm infrastructure
    • There is not always a strict separation b/w Schematics and libraries as a library can come with its own Schematics baked in
  2. vitaliy-bobrov commented on Mar 18, 2018

    @vitaliy-bobrov

    Great initiative, regarding search IMHO tags, looks better, as the simplier way to be listed in the search results. More steps to follow with publication === more contributions.

  3. manekinekko commented on Mar 18, 2018

    @manekinekko
    ContributorAuthor

    @manfredsteyer

    As Schematic Collections are distributed via npm packages, we could leverage the existing npm infrastructure

    Agreed. Although, this will depend on what DX we wanna have (simple query search, autocomplete...etc).

    There is not always a strict separation b/w Schematics and libraries as a library can come with its own Schematics baked in

    This proposal is only for Schematics that are published on NPM. It's not meant for Schematics

  4. manekinekko commented on Mar 18, 2018

    @manekinekko
    ContributorAuthor

    @vitaliy-bobrov I'm okay with that too as long as the search process can be done in a deterministic and consistent way ^^

  5. choucry13 commented on Mar 19, 2018

    @choucry13

    @manekinekko , it's very a good idea and if we use a specific schematics in enterprise, we can store it on a private nexus (a hoster for all packager type like npm, nuget, maven...). Do you think it's possible or not ?

  6. Haroenv commented on Mar 19, 2018

    @Haroenv

    Hey! Just chiming in here from Algolia, you can see a similar search made with our index in Emma-cli. It's made for the Yarn website originally, but definitely also meant to be used by other parts of the community.

    We'd prefer it if the search said powered by Algolia or something near the results (can be underneath or to the right edge maybe?), because we provide it as a free service and want as many people/projects as possible to know about it.

    Emma cli demo

    Ping me if you have any questions or want to try it out

  7. added
    featureLabel used to distinguish feature request from other issues
    on Mar 19, 2018
  8. Toxicable commented on Mar 29, 2018

    @Toxicable

    I made another little demo here https://schematics-search.firebaseapp.com/
    It's search is pretty crude but it somewhat works and there's lots of optimizations that could be done to speed it up.
    The main point here is showing the kinds of speed it would take at max to find packages that are usable as Schematics

    The interface is irrlevent, I just wanted peoplr to be able to use it, we can easily put it into a CLI interface.

  9. StephenFluin commented on Apr 26, 2018

    @StephenFluin
    Contributor

    Love this. I've been recommending people to add specific tags including:

    ng-add ng-update ng-generate ng-new to indicate their capabilities.

  10. added
    needs: discussionOn the agenda for team meeting to determine next steps
    and removed
    needs: discussionOn the agenda for team meeting to determine next steps
    on May 27, 2020
  11. added this to the Backlog milestone on May 27, 2020
  12. added
    feature: under considerationFeature request for which voting has completed and the request is now under consideration
    on Nov 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: @angular/clifeatureLabel used to distinguish feature request from other issuesfeature: under considerationFeature request for which voting has completed and the request is now under consideration

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions