apollo-components v0.7.1-beta.0

Apollo Components

Table of Content

• Description
• Getting Started
  • Development
  • Production
• Notes

Description

This is an angular multi-project that contains a library for UI components and services that are shared across all the Apollo frontend apps, and a playground app to be used as a sandbox for component development. The library is targeted to be used as a stand-alone npm package. There are two modules in it:

• Core, which does not import anything but modules installed through npm. So as a result any service, interceptor, etc. in core can only have dependencies to other parts of the core. 1
• Shared, which contains all the isolated "dumb" presentational elements such as components, pipes, directives, etc., which cannot have dependencies to anything else but material components, hence dumb, and they interact with other components through their inputs and outputs (not importing any services except built-in angular services e.g. changeDetectionRef), hence isolated. Banner component is an example.

When using Apollo Components in a consumer project make sure your module dependencies follow this diagram:

Getting started

Development

In order to use development:

New features should be developed in isolation. There is a playground app in this workspace which is used for interactively developing a new feature.

Once your module is ready to be used in the consumer project run the following command to package it:

npm run package

Next, go to dist/common and copy the absolute path of the tgz extension file then head over to your consumer project and run:

npm install /absolute/path/to/tgz --no-save

This is enough for you to load the newly created feature (or updated) into your consumer project. Once verified that it works (hopefully you tested the module in isolation well and you wouldn't have to do this more than one time) as expected follow the release section.

Production

If you do not intend to change anything inside apollo-component and just want to use it as it is:

1. First make sure you unlink on consumer npm unlink @elemica/common --no-save
2. Add the following line into your consumer .npmrc //registry.npmjs.org/:_authToken=${NPM_TOKEN}
3. export NPM_TOKEN=<YOUR-ACCESS-TOKEN>
4. npm install @elemica/common

Release

Once you are done with development and ready to publish to npm registry:

1. export NPM_TOKEN=<YOUR-ACCESS-TOKEN>.
2. From the root directory npm run release

Notes

• There is one exception which is when a service has dependency to a component of another module, since this is through typescript (not HTML), there is no need for importing the shared module into core as this should never happen.

• Make sure you follow conventional commit. Here's a quick summary of enums:

  • feat: Add a new feature (equivalent to a MINOR in Semantic Versioning).
  • fix: Fix a bug (equivalent to a PATCH in Semantic Versioning).
  • docs: Documentation changes.
  • style: Code style change (semicolon, indentation...).
  • refactor: Refactor code without changing public API.
  • perf: Update code performances.
  • test: Add test to an existing feature.
  • chore: Update something without impacting the user (ex: bump a dependency in package.json).

• If in any case release build failed and after fixing you got "tag xxx already exists" error the easiest way to fix this would be to do a fresh clone of the repo (make sure your work is in remote before doing so) and doing another release. Alternatively, you can also remote .git directory and do git init following git remote add origin git@github.com:elemica/apollo-components.git

• Make sure nothing is imported using barrel files