Create Angular package exposing ApiEditorComponent #316

zregvart · 2018-06-07T09:13:00Z

In https://github.com/syndesisio/syndesis we're considering embedding a OpenAPI editor functionality of Apicurio. To do this we would like to depend on a Angular module that contains only the ApiEditorComponent.

This is the first step in creating an Angular package that only exposes the ApiEditorComponent. More details are provided in the individual commit messages.

The base commit that accomplishes the creation of the package and exposes the ApiEditorComponent is in 8402911. This is done by using https://github.com/dherges/ng-packagr/. Other commits resolve errors/warnings emitted from the ahead of time compilation.

Next steps might be to use this ApicurioEditorModule internally within Apicurio so that it's always up to date with the dependencies or other code changes to the ApiEditorComponent, or to create a test that embeds the ApiEditorComponent from the ApicurioEditorModule to validate the embedding scenario.

This adds `public_api.ts` file that exports the `ApiEditorComponent` along with all the dependencies. To create the package invoke `yarn package` that uses ng-packagr to help with the ahead of time compilation and bundling. The resulting Angular package is created in the root directory of the project as `dist.tgz`.

Explicitly importing specific RxJS operators helps to make the bundle size smaller and helps with ahead of time compiling.

`filters` property doesn't seem to be referenced outside of the ApisPageComponent it seems to make sense to make it `private`.

This helps the ahead of time compilation.

@param

This resolves the warning reported while performing ahead of time compilation of the public module. ``` warning TS0: the type annotation on @param is redundant with its TypeScript type, remove the {...} part ```

...injection To help dependency injection when the code is ahead of time compiled constructors need to be explicitly declared.

EricWittmann · 2018-06-07T11:56:13Z

Thanks! I'll get this merged today.

EricWittmann

Have some inline questions that you may have answered already in your commit messages. I'll go check that now. :)

EricWittmann · 2018-06-07T14:54:32Z

front-end/studio/package.json

  },
  "private": true,
-  "dependencies": {
+  "peerDependencies": {


Can you explain the changes in package.json and how they will impact apicurio when built as an application (vs. as a module to be used in e.g. syndesis)?

So this is my understanding of dependencies vs peerDependencies: when we use dependencies NPM (Yarn) will put the dependencies listed within, whereas with peerDependencies it will put them on the same level with Apicurio.

The difference can be seen in node_modules when you add Apicurio as a dependency:

Declared as dependencies:

node_modules ├── apicurio-design-studio ... │ ├── node_modules │ │ ├── bootstrap-datepicker ... │ │ │ ├── node_modules │ │ │ │ └── jquery ... │ │ ├── bootstrap-switch ... │ │ ├── brace │ │ │ └── index.d.ts │ │ ├── camel-case │ │ │ └── camel-case.d.ts ...

Declared as peerDependencies:

├── apicurio-design-studio ... │ ├── node_modules │ │ ├── brace │ │ │ └── index.d.ts │ │ ├── camel-case │ │ │ └── camel-case.d.ts ...

Notice that we then don't get bootstrap-datepicker or bootstrap-switch (and so on) dependencies in the project that uses Apicurio.

If you try to declare dependencies as dependencies, you get an error from ng-packagr:

Distributing npm packages with 'dependencies' is not recommended. Please consider adding @angular/animations to 'peerDependencies' or remove it from 'dependencies'. BUILD ERROR Dependency @angular/animations must be explicitly whitelisted. Error: Dependency @angular/animations must be explicitly whitelisted.

This is somewhat similar to optional dependencies when using Maven.

EricWittmann · 2018-06-07T14:56:35Z

front-end/studio/src/app/pages/apis/{apiId}/editor/_components/dialogs/add-path.component.ts

@@ -20,7 +20,7 @@ import {ModalDirective} from "ngx-bootstrap";
 import {OasDocument, OasLibraryUtils} from "oai-ts-core";
 import {FormControl} from "@angular/forms";
 import {Subject} from "rxjs/Subject";
-
+import 'rxjs/add/operator/distinctUntilChanged';


Why was this added? I can't see where it is used...

Oh I see - I have the rxjs operators imported globally in the application, but it's needed here as well when using as a component of syndesis. (I presume) :)

Yeah, this prevents bundling all of RxJS, a better option might be to have a RxJS include file, and list only the modules that are used. Bundling the whole RxJS (as in app.module.ts) tends to increase the bundle size.

I think this rationale is explained well in this blog post.

EricWittmann · 2018-06-07T14:57:22Z

front-end/studio/src/app/pages/apis/{apiId}/editor/_components/common/inline-editor.base.ts

@@ -261,7 +261,7 @@ export abstract class TextAreaEditorComponent extends TextInputEditorComponent {

    /**
     * Subclasses can override this to provide validation status of the current value.
-     * @return {boolean}


Lots of jsdoc changes in this diff. I think WebStorm adds this automatically. I'm happy to remove them all but am wondering why. :)

Seems that ng-packagr is treating warnings as errors, so to help with this warning:

warning TS0: the type annotation on @param is redundant with its TypeScript type, remove the {...} part

I made that change so that the packaging wouldn't fail.

See ng-packagr/ng-packagr#413

Yeah figured that one out. WebStorm adds the {Type} automatically ATM, but the next patched version of it will add an option to toggle that behavior (and set the default for typescript to false). So that's good. :)

I'll go through all of Apicurio at some point and remove them.

You could do find . -name '*.ts' -exec sed -i -e 's/\(@param\|@return\) {[^}]*}/\1/' {} \; or some other bulk magic.

+1 - I do that sort of thing with regular expressions from within Eclipse. It has nice support for find/replace across files using regexp and with full preview before approving the change.

FWIW: https://youtrack.jetbrains.com/issue/WEB-28964

EricWittmann · 2018-06-07T14:58:19Z

front-end/studio/src/app/pages/apis/apis.page.ts

@@ -78,7 +78,7 @@ export class ApisPageComponent extends AbstractPageComponent implements OnDestro
    public allApis: Api[] = [];
    public filteredApis: Api[];
    public selectedApis: Api[];
-    public filters: Filters = new Filters();
+    private filters: Filters = new Filters();


Any particular reason to make this particular field private? I'm sure there are lots of fields around that could be private but are not.

I can't remember exactly, but I think the ahead of time compilation failed as I haven't imported Filters in the public_api.ts, being that Filters is only used here made more sense to make it private.

zregvart added 6 commits June 7, 2018 11:04

Add imports to RxJS operators

7a7dea2

Explicitly importing specific RxJS operators helps to make the bundle size smaller and helps with ahead of time compiling.

Reduce scope of filters property

519baa0

`filters` property doesn't seem to be referenced outside of the ApisPageComponent it seems to make sense to make it `private`.

Declare return type of createReplaceNodeCommand

3a3110f

This helps the ahead of time compilation.

Resolve TS03 warning

0394162

This resolves the warning reported while performing ahead of time compilation of the public module. ``` warning TS0: the type annotation on @param is redundant with its TypeScript type, remove the {...} part ```

Explicitly declare constructors for dependency ...

23e79a2

...injection To help dependency injection when the code is ahead of time compiled constructors need to be explicitly declared.

EricWittmann reviewed Jun 7, 2018

View reviewed changes

EricWittmann merged commit 23e79a2 into Apicurio:master Jun 7, 2018

zregvart deleted the angular-package branch June 8, 2018 07:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create Angular package exposing ApiEditorComponent #316

Create Angular package exposing ApiEditorComponent #316

zregvart commented Jun 7, 2018

EricWittmann commented Jun 7, 2018

EricWittmann left a comment

EricWittmann Jun 7, 2018

zregvart Jun 8, 2018

EricWittmann Jun 7, 2018

EricWittmann Jun 7, 2018

zregvart Jun 8, 2018

EricWittmann Jun 7, 2018

zregvart Jun 8, 2018

EricWittmann Jun 8, 2018

zregvart Jun 8, 2018

EricWittmann Jun 8, 2018

EricWittmann Jun 8, 2018

EricWittmann Jun 7, 2018

zregvart Jun 8, 2018

Create Angular package exposing ApiEditorComponent #316

Create Angular package exposing ApiEditorComponent #316

Conversation

zregvart commented Jun 7, 2018

EricWittmann commented Jun 7, 2018

EricWittmann left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment