Nhl97-ngx-atoms-lib NPM

AtomsLib Public Readme

About This Project / Package

AtomsLib, published as the npm package nhl97-ngx-atoms-lib, is a library of Angular components, services, SCSS mixins, font assets and such, which I, Nikolaus-Mathias Herl, built/collected and reuse throughout my web development projects. AtomsLib is named after the "Atomic Design" pattern/system, i.e. it aims to provide a set of basic, reusable, well-typed components, such as buttons or inputs, that can then be instantiated and recombined to build more complex UIs.

The library is a work-in-progress and partially a playground for me, not currently suitable as a quality dependency for external developers. It does provide some components and styles to my BSc thesis project AdMaTilE.

The following notes and instructions are meant for myself, are often specific to my development environment (/my mono repo), and are in good part about the no-longer pursued compilation to WebComponent.

Roadmap / (Want) TODOs

button/clickable Directive
bundle ('import') all essential AtomsLib styles into a single file 'atoms-lib.scss' (or similar)
dropdown (from small enum/selection)
ShortString editor (single row text input) @Input placeholder @Output txt$
time editor @Input start-with: Time | DateTime | "now" @Output selected$: O
date editor @Input year-format = Human Era (12021) @Output selected$: O
composite: formfield {describing label, input-type, missing/data-error messages/handler}

Build

Building For Other Angular Projects

To this end, AtomsLib gets compiled using the Ivy engine's "partial compilation" feature. This means it should be compatible with Angular v12+.

ng build AtomsLib will build the artifacts into the 'AngularMono/dist/atoms-lib' directory.

Building To Web Components

... is broken as of now. Back when it worked / was set up for that purpose, the relevant command was:

ng build --configuration=prod --output-hashing none

(I don't know how the '--output-hashing' option affects things, but an article back then prescribed it)

Publish

Go to the full dist folder 'AngularMono/dist/atoms-lib' and run npm publish.

Consume

In Another Angular Project

Add 'nhl97-ngx-atoms-lib' to the consuming project's package.json under 'dependencies'. Run npm install.

In the consuming Angular module, add AtomsLibModule to the 'imports' array:

imports: [...,
          AtomsLibModule,
          ...]

In the consuming 'angular.json' file:

Add to the 'styles' array all stylesheets that should apply styles on their own. (full key: projects/<project-name>/architect/build/options/styles)
Also register the AtomsLib styles folder as a source for SCSS partial files, so these files can be @use'd, and their mixins @included in the consuming project's SCSS files. (full key: projects/<project-name>/architect/build/options/stylePreprocessorOptions/includePaths):

"styles": [
  ...
  "node_modules/nhl97-ngx-atoms-lib/styles/base_consts.scss",
  "node_modules/nhl97-ngx-atoms-lib/styles/colors.scss",
  "node_modules/nhl97-ngx-atoms-lib/styles/material_icons.scss",
  ...
  ],
  "stylePreprocessorOptions": {
    "includePaths": [
      "node_modules/nhl97-ngx-atoms-lib/styles"
    ]
  },

After rebuilding / restarting ng serve, AtomsLib's components, services styling, etc. should be available.

As WebComps

<head>
<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="es2015-polyfills.js" nomodule></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<!-- mby more accurate? -->
    <script type="text/javascript" src="./atoms/runtime-es2020.js"></script>
    <script type="text/javascript" src="./atoms/polyfills-es5.js" nomodule></script>
    <script type="text/javascript" src="./atoms/polyfills-es2020.js"></script>
    <!-- TODO: get scripts.js to be produced + included here? -->
    <script type="text/javascript" src="./atoms/main-es2020.js"></script>
    <script type="text/javascript" src="./atoms/styles.css"></script>

Input properties' naming pattern are forced into kebab-case: (from camelCase. and snake_case??)

Goals:

Figure out how to get AtomsLib styles to apply to WebComps. Stretch goal: Make (S)CSS vars, mixins available too. This article - specifically the "Add styles" section - should help (though past Me said there are some "questionable decisions" in there): https://medium.com/angular-in-depth/how-to-compile-your-angular-components-library-into-web-components-47ff0ac73bd7#1409 "We do not have a root element of the application that contains our styles using Web Components, but we can compile our styles and insert them into the page"
Document How-To WebComponents.

tslib

@everything-registry/sub-chunk-2289

5 months ago

5 months ago

5 months ago

10 months ago

10 months ago