Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Export all libs as NPM package #676

Merged
merged 13 commits into from
Nov 22, 2023
Merged

Export all libs as NPM package #676

merged 13 commits into from
Nov 22, 2023

Conversation

jahow
Copy link
Collaborator

@jahow jahow commented Nov 8, 2023

Similar to #592.

This PR introduces a package directory with:

  • a generate-package.js node script
  • an index.ts file which serves as an entrypoint for the package compilation
  • a ng-package.json file which is used by ng-packagr
  • a package.json describing the npm package
  • a tsconfig.json file used for the package compilation

The generate-package.js file does:

  • copy the contents of the libs folder in the package directory, keeping only relevant files (ts, css, html...)
  • transform the import aliases in the TS files back to a relative path using the paths property of tsconfig.base.json; for instance:
    import { UiLayoutModule } from "@geonetwork-ui/ui/layout"
    becomes:
    import { UiLayoutModule } from "../../../libs/ui/layout"
    (this is needed because ng-packagr does not support Typescript path aliases)
  • launch a compilation of the copied sources using ng-packagr; this is necessary because Angular libraries have to be published according to the Angular Package Format
  • the compilation output is going to package/dist; then the script also copies the source libs folder there as well so that consumers of the package can be redirected to the source file when inspecting it

An example usage of the generated package can be seen here: https://github.com/jahow/geonetwork-ui-custom-app
E.g.

import {UiElementsModule, UiInputsModule, UiWidgetsModule} from 'geonetwork-ui'

Notes:

  • To make the compilation work I had to ensure that all components were exported through their respective lib index.ts file
  • Some cyclic dependencies had also to be resolved

To do:

  • more tests on the consumer app side
  • maybe add separate entrypoints, e.g. geonetwork-ui/ui-layout?
  • handle material theme and icon font
  • document

Copy link
Contributor

github-actions bot commented Nov 8, 2023

Affected libs: api-repository, feature-catalog, feature-record, feature-router, feature-search, feature-map, feature-dataviz, feature-auth, common-domain, api-metadata-converter, feature-editor, ui-search, common-fixtures, util-shared, ui-elements, ui-catalog, ui-widgets, ui-inputs, ui-map, ui-dataviz, ui-layout, data-access-datafeeder, util-data-fetcher, util-app-config, data-access-gn4, util-i18n,
Affected apps: datahub, map-viewer, metadata-editor, search, demo, webcomponents, datafeeder, metadata-converter, data-platform,

  • 🚀 Build and deploy storybook and demo on GitHub Pages
  • 📦 Build and push affected docker images

@@ -1,5 +1,4 @@
import { Organization } from './organization.model'
import _default from 'chart.js/dist/plugins/plugin.tooltip'
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No idea what this line was doing here to be honest!!

@jahow jahow force-pushed the export-as-npm-package branch 2 times, most recently from 243d28f to fcb9edc Compare November 12, 2023 11:40
@jahow jahow changed the title WIP / Export all libs as NPM package Export all libs as NPM package Nov 13, 2023
@jahow jahow marked this pull request as ready for review November 13, 2023 11:16
@jahow jahow force-pushed the export-as-npm-package branch 2 times, most recently from 69163b6 to dae9cea Compare November 13, 2023 11:27
@coveralls
Copy link

coveralls commented Nov 13, 2023

Coverage Status

coverage: 83.888% (-2.8%) from 86.643%
when pulling 3cdac10 on export-as-npm-package
into 295eda8 on main.

@fgravin fgravin added this to the 2.1.0 milestone Nov 15, 2023
Copy link
Collaborator

@tkohr tkohr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this nice PR @jahow with a great description and extensive documentation!

Maybe the PR description could also go into a package/readme.md?

FYI, when testing, I needed to force npm install because of peer dependency conflicts with gn-ui still in angular 16 and your demo app in angular 17. Nevertheless, I ended up with your demo app running and calling GN behind it, nice :-)

Generating a new app following the doc I still run into some error when trying to start it: ⠸ Building...✘ [ERROR] Could not resolve "react-native-fs" node_modules/alasql/dist/alasql.fs.js:26676:25:. My app is a standalone app without any AppModule for now. Not sure if this is related.

I've used yalc to test this PR:
yalc publish inside gn-ui's package/dist
yalc add geonetwork-ui@2.1.0-dev inside the angular app

apps/map-viewer/src/app/app.module.ts Show resolved Hide resolved
docs/guide/custom-app.md Outdated Show resolved Hide resolved
docs/guide/custom-app.md Show resolved Hide resolved
package.json Show resolved Hide resolved
package/generate-package.js Outdated Show resolved Hide resolved
package/package.json Show resolved Hide resolved
@jahow
Copy link
Collaborator Author

jahow commented Nov 20, 2023

I've added a README for the package folder as well as a README for the published package; it's now publicly accessible here: https://www.npmjs.com/package/geonetwork-ui?activeTab=readme

Also added some doc for development workflow in a custom app.

...disable SSR and put gn-ui package last
Copy link
Collaborator

@tkohr tkohr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the additional doc and its latest adaptions! Following it, I now get to use the package without forcing npm installs. Really nice 😃

@jahow jahow merged commit bd29f62 into main Nov 22, 2023
7 checks passed
@jahow jahow deleted the export-as-npm-package branch November 22, 2023 09:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

4 participants