Nhl97-ngx-atoms-lib NPM

AtomsLib Public Readme

Please note the licensing conditions detailed in the file 'License AtomsLib.md'. To summarize it quickly (and non-bindingly): At this time, you're not allowed to use this library in any way, shape or form.

About This Project / Package

AtomsLib - published as the npm package nhl97-ngx-atoms-lib - is a library of Angular components, services and more that I, Nikolaus-Mathias Herl, reuse throughout my programming and web development projects. It aims to follow the "Atomic Design" pattern/system, hence the name.

AtomsLib is primarily meant to be consumed by (my) other Angular projects, though building to framework-agnostic Web Components is also a goal.

The following notes and instructions are meant for myself - and the latter are specific to my development environment (/my mono repo).

Roadmap / (Want) TODOs / I'll probably need the following eventually

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

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago