Merge pull request #15 from osspkg/dev

[core@0.2.1] fix work with links

Author: markus621

.gitignore

@@ -36,3 +36,5 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+/apigen/*.mjs

.nvmrc

@@ -1 +1 @@
-v18.18.0
+v20.14.0

Makefile

@@ -18,13 +18,13 @@ lint:
 	yarn run apigen
 	yarn run lint
 
-build: lint
+build: build_icons build_styles build_core build_kit
 	yarn run build
 
 prerender:
-	jasta prerender --config=development/dev/config.yaml
+	/home/user/.gvm/.cache/modules/bin/jasta prerender --config=development/dev/config.yaml
 
-deploy: build prerender
+deploy: lint build prerender
 	scp -r dist/website/* root@$(value STATIC_HOST):/home/onegaui/www/
 	scp development/prod/jasta.yaml root@$(value STATIC_HOST):/etc/jasta/websites/onega-ui.yaml
 	ssh root@$(value STATIC_HOST) 'systemctl restart jasta'

apigen/index.mts

@@ -1,21 +1,21 @@
-import {readdirSync, writeFileSync} from "node:fs";
-import path from "node:path";
-import {readFileSync} from "fs";
+import {readFileSync} from 'fs';
+import {readdirSync, writeFileSync} from 'node:fs';
+import path from 'node:path';
 
 function readAllFiles(dir: string, ext: string): string[] {
-  const out: string[] = []
-  const files = readdirSync(dir, {withFileTypes: true, recursive: true})
+  const out = new Set<string>();
+  const files = readdirSync(dir, {withFileTypes: true, recursive: true});
   files.forEach(file => {
     if (file.isFile() && path.extname(file.name) === ext) {
-      out.push(path.join(dir, file.name))
-      return
+      out.add(path.join(file.path || dir, file.name));
+      return;
     }
     if (file.isDirectory()) {
-      out.push(...readAllFiles(path.join(dir, file.name), ext))
-      return
+      readAllFiles(path.join(dir, file.name), ext).forEach(v => out.add(v))
+      return;
     }
-  })
-  return out
+  });
+  return Array.from(out).slice();
 }
 
 interface TagProp {
@@ -34,7 +34,7 @@ interface Tag {
 }
 
 function extractTags(data: string): Tag {
-  const out: Tag = {name: '', code: '', desc: '', group: '', html: '', other: '', props: []}
+  const out: Tag = {name: '', code: '', desc: '', group: '', html: '', other: '', props: []};
 
   const rexName = /@name(.*?)$/gms;
   const rexGroup = /@group(.*?)$/gms;
@@ -45,38 +45,38 @@ function extractTags(data: string): Tag {
   const rexOther = /@other(.*?)[@*]/gms;
 
   for (const item of data.matchAll(rexName)) {
-    out.name = item[1].trim()
+    out.name = item[1].trim();
   }
   for (const item of data.matchAll(rexGroup)) {
-    out.group = item[1].trim()
+    out.group = item[1].trim();
   }
   for (const item of data.matchAll(rexDesc)) {
-    out.desc = item[1].trim()
+    out.desc = item[1].trim();
   }
   for (const item of data.matchAll(rexHtml)) {
-    out.html = item[1].trimEnd()
+    out.html = item[1].trimEnd();
   }
   for (const item of data.matchAll(rexCode)) {
-    out.code = item[1].trimEnd()
+    out.code = item[1].trimEnd();
   }
   for (const item of data.matchAll(rexOther)) {
-    out.other = item[1].trimEnd()
+    out.other = item[1].trimEnd();
   }
   for (const item of data.matchAll(rexProp)) {
-    out.props.push({key: item[1].trim(), value: item[2].trim()})
+    out.props.push({key: item[1].trim(), value: item[2].trim()});
   }
 
-  return out
+  return out;
 }
 
 function extractComment(file: string): Tag[] {
-  const out: Tag[] = []
-  const buf = readFileSync(file).toString()
+  const out: Tag[] = [];
+  const buf = readFileSync(file).toString();
   const rex = /\/\*(.*?)\*\//sg;
-  for (let item of buf.matchAll(rex)) {
-    out.push(extractTags(item[0]))
+  for (const item of buf.matchAll(rex)) {
+    out.push(extractTags(item[0]));
   }
-  return out
+  return out;
 }
 
 interface DocTemplate {
@@ -85,43 +85,43 @@ interface DocTemplate {
   filename: string
 }
 
-function escapeHTML(data: string): string{
+function escapeHTML(data: string): string {
   return data
-    .replaceAll('<','&lt;')
-    .replaceAll('>','&gt;')
-    .replaceAll('{','&#123;')
-    .replaceAll('}','&#125;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('{', '&#123;')
+    .replaceAll('}', '&#125;');
 }
 
 function docTemplate(name: string, mod: string, data: Tag[]): DocTemplate {
-  const selector = `${mod.toLowerCase()}-${name.toLowerCase().replaceAll(' ', '-')}`
-  const modName = mod.split(' ').map(value => value[0].toUpperCase() + value.substring(1)).join('')
-  const className = modName + name.split(' ').map(value => value[0].toUpperCase() + value.substring(1)).join('')
+  const selector = `${mod.toLowerCase()}-${name.toLowerCase().replaceAll(' ', '-')}`;
+  const modName = mod.split(' ').map(value => value[0].toUpperCase() + value.substring(1)).join('');
+  const className = modName + name.split(' ').map(value => value[0].toUpperCase() + value.substring(1)).join('');
 
-  const other: string[] = []
-  let view: string = `\n`;
+  const other: string[] = [];
+  let view = '\n';
 
   data.forEach(tag => {
-    other.push(tag.other)
-    view += `<h4 class="bq bq-warning demo-name">${tag.name}</h4>\n`
-    view += `<p class="demo-desc">${tag.desc}</p>\n`
+    other.push(tag.other);
+    view += `<h4 class="bq bq-warning demo-name">${tag.name}</h4>\n`;
+    view += `<p class="demo-desc">${tag.desc}</p>\n`;
     if (tag.html.length > 0) {
-      view += `<div class="demo-view w-full">${tag.html}</div>\n`
-      view += `<pre class="demo-html w-full">${escapeHTML(tag.html)}</pre>\n`
+      view += `<div class="demo-view w-full">${tag.html}</div>\n`;
+      view += `<pre class="demo-html w-full">${escapeHTML(tag.html)}</pre>\n`;
     }
     if (tag.code.length > 0) {
-      view += `<pre class="demo-code w-full">${tag.code}</pre>\n`
+      view += `<pre class="demo-code w-full">${tag.code}</pre>\n`;
     }
-    if (tag.props.length>0){
-      view += `<table class="demo-attr">\n`
+    if (tag.props.length > 0) {
+      view += '<table class="demo-attr">\n';
       tag.props.forEach(value => {
         view += `<tr><td class="t-wrap-line" style="width: 30%;"><b>${value.key}</b></td>
-<td class="t-wrap-line">${value.value}</td></tr>`
-      })
-      view += `</table>\n`
+<td class="t-wrap-line">${value.value}</td></tr>`;
+      });
+      view += '</table>\n';
     }
-    view += `<div class="demo-end">&nbsp;</div>\n`
-  })
+    view += '<div class="demo-end">&nbsp;</div>\n';
+  });
 
   return {
     data: `import { Component } from '@angular/core';
@@ -137,7 +137,7 @@ export class ${className} {
 }`,
     filename: selector,
     class: className,
-  }
+  };
 }
 
 interface ModuleTemplate {
@@ -151,15 +151,16 @@ function moduleTemplate(mod: string, data: ModuleTemplate[]): string {
   const links: string[] = [];
   const declarations: string[] = [];
 
-  const modName = mod.split(' ').map(value => value[0].toUpperCase() + value.substring(1)).join('')
+  const modName = mod.split(' ').map(value => value[0].toUpperCase() + value.substring(1)).join('');
 
   data.forEach(value => {
-    imports.push(`import { ${value.class} } from './${value.filename}';`)
-    links.push(`{ link: '${value.title}', component: ${value.class} },`)
-    declarations.push(`${value.class},`)
-  })
+    imports.push(`import { ${value.class} } from './${value.filename}';`);
+    links.push(`{ link: '${value.title}', component: ${value.class} },`);
+    declarations.push(`${value.class},`);
+  });
 
   return `import { NgModule } from '@angular/core';
+import { CoreModule } from '../../../../../core/src/lib/core.module';
 import { KitModule } from '../../../../../kit/src/lib/kit.module';
 import { ApiLink } from '../../root/api.models';
 ${imports.join('\n')}
@@ -176,47 +177,52 @@ export function links(): ApiLink[] {
   ],
   imports: [
     KitModule,
+    CoreModule,
   ],
 })
 export class ${modName}Module { }
-`
+`;
 }
 
-function parse(dir: string, ext: string, mod: string, out: string): void {
+function parse(ext: string, mod: string, out: string, dirs: string[]): void {
   const tags: Tag[] = [];
-  const files = readAllFiles(dir, ext)
-  files.forEach(file => {
-    tags.push(...extractComment(file))
+  dirs.forEach(dir =>{
+    const files = readAllFiles(dir, ext);
+    files.forEach(file => {
+      tags.push(...extractComment(file));
+    });
   })
 
-  const _groups = new Map<string, string>();
-  const groups : string[] = []
-  tags.forEach(value => _groups.set(value.group, value.group))
-  for (let group of _groups.keys()) {
-    groups.push(group)
+  const tmpGroups = new Map<string, string>();
+  const groups: string[] = [];
+  tags.forEach(value => tmpGroups.set(value.group, value.group));
+  for (const group of tmpGroups.keys()) {
+    groups.push(group);
   }
-  groups.sort()
+  groups.sort();
 
-  const module: ModuleTemplate[] = []
+  const module: ModuleTemplate[] = [];
 
   groups.forEach(group => {
-    const list = tags.filter(value => value.group === group)
-    const doc = docTemplate(group, mod, list)
-    module.push({filename: doc.filename, class: doc.class, title: group})
+    const list = tags.filter(value => value.group === group);
+    const doc = docTemplate(group, mod, list);
+    module.push({filename: doc.filename, class: doc.class, title: group});
 
     writeFileSync(
       path.join(out, doc.filename + '.ts'),
       doc.data,
-      {encoding: "utf-8"},
-    )
-  })
+      {encoding: 'utf-8'},
+    );
+  });
 
   writeFileSync(
-    path.join(out, `module.ts`),
+    path.join(out, 'module.ts'),
     moduleTemplate(mod, module),
-    {encoding: "utf-8"},
-  )
+    {encoding: 'utf-8'},
+  );
 }
 
-parse('projects/styles/src/', '.scss', 'style', 'projects/website/src/pages/styles/models')
-parse('projects/kit/src/lib/', '.ts', 'comp', 'projects/website/src/pages/kit/models')
+parse('.scss', 'style', 'projects/website/src/pages/styles/models',
+  ['projects/styles/src/']);
+parse('.ts', 'comp', 'projects/website/src/pages/kit/models',
+  ['projects/kit/src/lib/', 'projects/core/src/lib/']);

apigen/tsconfig.json

@@ -1,15 +1,12 @@
 {
-  "extends": "ts-node/node16/tsconfig.json",
   "compilerOptions": {
-
-  },
-  "ts-node": {
-    "esm": true,
-    "compilerOptions": {
-      "types": ["node"],
-      "target": "ES2022",
-      "module": "ES2022",
-      "moduleResolution": "Node"
-    }
+    "module": "ESNext",
+    "moduleResolution": "NodeNext",
+    "target": "ES2022",
+    "lib": [
+      "ES2022",
+      "dom"
+    ],
+    "allowSyntheticDefaultImports": true
   }
 }

package.json

@@ -21,7 +21,7 @@
     "styles:css": "sass projects/styles/src/_index.scss dist/styles/styles.css --style compressed --no-source-map",
     "styles:themes": "sass projects/styles/src/themes:dist/styles/themes --style compressed --no-source-map",
     "styles": "yarn run styles:scss && yarn run styles:css && yarn run styles:themes",
-    "apigen": "ts-node --project apigen/tsconfig.json apigen/index.mts"
+    "apigen": "tsc --project apigen/tsconfig.json && node apigen/index.mjs"
   },
   "dependencies": {
     "@angular/animations": "^16.0.0",
@@ -53,7 +53,6 @@
     "eslint-plugin-import": "^2.0.0",
     "fs.notify": "^0.0.4",
     "ng-packagr": "^16.2.2",
-    "ts-node": "^10.9.2",
     "typescript": "~5.1.0",
     "webfont": "^11.2.26"
   }

projects/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onega-ui/core",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Core library for creating Angular components and applications using Onega UI",
   "author": "OSSPkg Team <github@osspkg.com> (https://github.com/osspkg)",
   "maintainers": [

projects/core/src/lib/directives/active-route.directive.ts

@@ -1,9 +1,9 @@
-import { Directive, ElementRef, Input, OnInit } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
 
 @Directive({
   selector: 'a[ong-active-route]',
 })
-export class ActiveRouteDirective implements OnInit {
+export class ActiveRouteDirective implements AfterViewInit {
   @Input({ alias: 'ong-active-route' }) classes!: string | string[];
 
   constructor(
@@ -25,13 +25,30 @@ export class ActiveRouteDirective implements OnInit {
     }
   }
 
-  ngOnInit() {
+  ngAfterViewInit() {
     const curr = new URL(location.href).pathname.substring(1);
-    const link = new URL(this.ref.nativeElement.href).pathname.substring(1);
+    if (
+      this.ref.nativeElement?.href === null ||
+      this.ref.nativeElement?.href === undefined ||
+      this.ref.nativeElement?.href.length === 0
+    ) {
+      console.warn('[ong-active-route]: href not found');
+      return;
+    }
+    const link = new URL(this.ref.nativeElement?.href).pathname.substring(1);
     let isActive = curr.startsWith(link);
     if (link.length === 0) {
       isActive = curr.length === 0;
     }
     this.applyClass(isActive);
   }
 }
+
+/*
+@name Active Route
+@group Links
+@prop [ong-active-route] := Adding a class if the link matches the current route or starts with it.
+@html
+  <a href="/" [ong-active-route]="['btn']">HOME</a>
+  <a href="/kit" [ong-active-route]="['btn']">KIT</a>
+*/