feat: improve cross-uni app workflow

packages/angular-builder/builders.json

@@ -0,0 +1,8 @@
+{
+  "builders": {
+    "application": {
+      "implementation": "./lib/application.js",
+      "schema": "./node_modules/@angular-devkit/build-angular/src/builders/browser/schema.json"
+    }
+  }
+}

packages/angular-builder/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@openstapps/angular-builder",
+  "version": "3.2.0",
+  "type": "module",
+  "license": "GPL-3.0-only",
+  "author": "Thea Schöbl <dev@theaninova.de>",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "schemas",
+    "builders.json",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "builders": "builders.json",
+  "scripts": {
+    "build": "tsup-node --dts",
+    "docs": "typedoc --json ./docs/docs.json --options ../../typedoc.base.json src/index.ts",
+    "format": "prettier . -c --ignore-path ../../.gitignore",
+    "format:fix": "prettier --write . --ignore-path ../../.gitignore",
+    "lint": "eslint --ext .ts src/",
+    "lint:fix": "eslint --fix --ext .ts src/",
+    "test": "c8 mocha"
+  },
+  "dependencies": {
+    "@angular-devkit/architect": "0.1703.0",
+    "@angular-devkit/build-angular": "17.3.0",
+    "@angular-devkit/core": "17.3.0",
+    "cosmiconfig": "8.1.3",
+    "rxjs": "7.8.1",
+    "fontkit": "2.0.2",
+    "glob": "10.3.10"
+  },
+  "devDependencies": {
+    "@angular-devkit/schematics": "17.3.0",
+    "@openstapps/prettier-config": "workspace:*",
+    "@openstapps/tsconfig": "workspace:*",
+    "@types/fontkit": "2.0.7",
+    "@types/glob": "8.1.0",
+    "@types/node": "18.15.3",
+    "@types/chai": "4.3.5",
+    "@types/chai-as-promised": "7.1.5",
+    "@types/chai-spies": "1.0.3",
+    "@types/mocha": "10.0.1",
+    "c8": "7.14.0",
+    "chai": "4.3.7",
+    "chai-as-promised": "7.1.1",
+    "chai-spies": "1.0.0",
+    "mocha": "10.2.0",
+    "mocha-junit-reporter": "2.2.0",
+    "tsup": "6.7.0",
+    "ts-node": "10.9.2",
+    "typescript": "5.4.2"
+  },
+  "tsup": {
+    "entry": [
+      "src/application.ts",
+      "src/index.ts"
+    ],
+    "sourcemap": true,
+    "clean": true,
+    "format": "esm",
+    "outDir": "lib"
+  },
+  "prettier": "@openstapps/prettier-config",
+  "eslintConfig": {
+    "extends": [
+      "@openstapps"
+    ]
+  }
+}

packages/angular-builder/src/application.ts

@@ -0,0 +1,33 @@
+/// <reference types="@angular-devkit/core" />
+import {BuilderContext, BuilderOutput, createBuilder} from '@angular-devkit/architect';
+import {BrowserBuilderOptions, executeBrowserBuilder} from '@angular-devkit/build-angular';
+import {runPrebuild} from './shared.js';
+import {from, of, mergeMap, Observable} from 'rxjs';
+
+function applicationBuilder(
+  input: BrowserBuilderOptions,
+  context: BuilderContext,
+): Observable<BuilderOutput> {
+  if (process.env.APP_VARIANT) {
+    input.fileReplacements ??= [];
+    input.fileReplacements.push(
+      {
+        replace: 'config/default.json',
+        with: `config/${process.env.APP_VARIANT}/default.json`,
+      },
+      {
+        replace: 'src/assets/imgs/logo.png',
+        with: `config/${process.env.APP_VARIANT}/logo.png`,
+      },
+      {
+        replace: 'src/assets/icon/favicon.png',
+        with: `config/${process.env.APP_VARIANT}/favicon.png`,
+      },
+    );
+  }
+  return from(runPrebuild(context)).pipe(
+    mergeMap(it => (it ? of(it) : executeBrowserBuilder(input, context, {}))),
+  );
+}
+
+export default createBuilder(applicationBuilder);

packages/angular-builder/src/icons/check-icon-correctness.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2022 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {Font, open} from 'fontkit';
+import {existsSync} from 'fs';
+import {getUsedIcons} from './gather-used-icons.js';
+import {fetchCodePointMap} from './get-code-points.js';
+import type {IconConfig} from '../index.js';
+
+export async function checkIconCorrectness(config: IconConfig) {
+  if (!existsSync(config.outputPath)) {
+    throw new Error('Icons have not been generated');
+  }
+
+  const modifiedFont = (await open(config.outputPath)) as Font;
+  const codePoints = await fetchCodePointMap();
+
+  for (const icon of await getUsedIcons(config)) {
+    const codePoint = codePoints.get(icon);
+    if (!codePoint) throw new Error(`"${icon}" is not a valid icon`);
+    if (!modifiedFont.getGlyph(Number.parseInt(codePoint, 16))) {
+      throw new Error(`"${icon}" (code point ${codePoint}) is missing`);
+    }
+  }
+}

packages/angular-builder/src/icons/gather-used-icons.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2022 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {glob} from 'glob';
+import {readFileSync} from 'fs';
+import {matchPropertyAccess, matchPropertyContent, matchTagProperties} from './icon-match.js';
+import {IconConfig} from '../index.js';
+
+export async function getUsedIconsHtml(pattern = 'src/**/*.html'): Promise<Record<string, string[]>> {
+  return Object.fromEntries(
+    (await glob(pattern))
+      .map(file => [
+        file,
+        readFileSync(file, 'utf8')
+          .match(matchTagProperties('ion-icon'))
+          ?.flatMap(match => {
+            return match.match(matchPropertyContent(['name', 'md', 'ios']));
+          })
+          .filter(it => !!it) || [],
+      ])
+      .filter(([, values]) => values && values.length > 0),
+  );
+}
+
+export async function getUsedIconsTS(pattern = 'src/**/*.ts'): Promise<Record<string, string[]>> {
+  const regex = matchPropertyAccess('SCIcon');
+  return Object.fromEntries(
+    (await glob(pattern))
+      .map(file => [file, readFileSync(file, 'utf8').match(regex) || []])
+      .filter(([, values]) => values && values.length > 0),
+  );
+}
+
+export async function getUsedIcons(config: IconConfig) {
+  return new Set(
+    [
+      config.additionalIcons ?? {},
+      await getUsedIconsTS(config.scriptGlob),
+      await getUsedIconsHtml(config.htmlGlob),
+    ]
+      .map(Object.values)
+      .flat(2),
+  );
+}

packages/angular-builder/src/icons/get-code-points.ts

@@ -0,0 +1,20 @@
+const url =
+  'https://raw.githubusercontent.com/google/material-design-icons/master/' +
+  'variablefont/MaterialSymbolsRounded%5BFILL%2CGRAD%2Copsz%2Cwght%5D.codepoints';
+
+export async function fetchCodePointMap() {
+  const icons = await fetch(url)
+    .then(it => it.text())
+    .then(it => new Map(it.split('\n').map(it => it.split(' ') as [string, string])));
+  if (icons.size < 100) throw new Error(`Code point map is very small, is the URL incorrect? ${url}`);
+  return icons;
+}
+
+export async function getCodePoints(icons: string[]) {
+  const codePoints = await fetchCodePointMap();
+  return icons.map(icon => {
+    const code = codePoints.get(icon);
+    if (!code) throw new Error(`Code point for icon ${icon} not found`);
+    return code;
+  });
+}

packages/angular-builder/src/icons/icon-config.ts

@@ -0,0 +1,11 @@
+import {cosmiconfig} from 'cosmiconfig';
+import type {IconConfig} from '../index.js';
+
+export async function getIconConfig(): Promise<IconConfig> {
+  const explorer = cosmiconfig('icons');
+  const result = await explorer.search();
+  if (!result) {
+    throw new Error('No icon configuration found');
+  }
+  return result.config;
+}

packages/angular-builder/src/icons/icon-match.spec.ts

@@ -0,0 +1,92 @@
+/*
+ * Copyright (C) 2022 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+/* eslint-disable unicorn/no-null */
+import {expect} from 'chai';
+import {matchPropertyAccess, matchPropertyContent, matchTagProperties} from './icon-match.js';
+import {describe} from 'mocha';
+
+describe('matchTagProperties', function () {
+  const regex = matchTagProperties('test');
+
+  it('should match html tag content', function () {
+    expect('<test content></test>'.match(regex)).to.deep.equal([' content']);
+  });
+
+  it('should match all tags', function () {
+    expect('<test content1></test> <test content2></test>'.match(regex)).to.deep.equal([
+      ' content1',
+      ' content2',
+    ]);
+  });
+
+  it('should not match wrong tags', function () {
+    expect('<no content></no>'.match(regex)).to.deep.equal(null);
+  });
+
+  it('should accept valid html whitespaces', function () {
+    expect(
+      `
+    <test
+ content
+ >
+     </test
+        >
+    `.match(regex),
+    ).to.deep.equal(['\n content\n ']);
+  });
+});
+
+describe('matchPropertyContent', function () {
+  const regex = matchPropertyContent(['test1', 'test2']);
+
+  it('should match bare literals', function () {
+    expect(`test1="content" test2="content1"`.match(regex)).to.deep.equal(['content', 'content1']);
+  });
+
+  it('should match angular literals', function () {
+    expect(`[test1]="'content'" [test2]="'content1'"`.match(regex)).to.deep.equal(['content', 'content1']);
+  });
+
+  it('should not match wrong literals', function () {
+    expect(`no="content" [no]="'content'"`.match(regex)).to.deep.equal(null);
+  });
+});
+
+describe('matchPropertyAccess', function () {
+  const property = '0_20a_boninAo0_';
+  const object = 'test';
+  const regex = matchPropertyAccess(object);
+
+  it('should match property access', function () {
+    expect(`${object}.${property}`.match(regex)).to.deep.equal([property]);
+  });
+
+  it('should respect whitespace', function () {
+    expect(`${object}.  ${property}`.match(regex)).to.deep.equal([property]);
+    expect(`${object}  .${property}`.match(regex)).to.deep.equal([property]);
+    expect(`${object}  .  ${property}`.match(regex)).to.deep.equal([property]);
+    expect(`${object} \n . \n ${property}`.match(regex)).to.deep.equal([property]);
+  });
+
+  it('should not include invalid trailing stuff', function () {
+    expect(`${object}.${property}!`.match(regex)).to.deep.equal([property]);
+    expect(`${object}.${property}.`.match(regex)).to.deep.equal([property]);
+    expect(`${object}.${property}-`.match(regex)).to.deep.equal([property]);
+    expect(`${object}.${property}]`.match(regex)).to.deep.equal([property]);
+    expect(`${object}.${property}}`.match(regex)).to.deep.equal([property]);
+    expect(`${object}.${property};`.match(regex)).to.deep.equal([property]);
+    expect(`${object}.${property}:`.match(regex)).to.deep.equal([property]);
+  });
+});

packages/angular-builder/src/icons/icon-match.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2022 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+export function matchTagProperties(tag: string) {
+  return new RegExp(`(?<=<${tag})[\\s\\S]*?(?=>\\s*<\\/${tag}\\s*>)`, 'g');
+}
+
+export function matchPropertyContent(properties: string[]) {
+  const names = properties.join('|');
+
+  return new RegExp(`((?<=(${names})=")[\\w-]+(?="))|((?<=\\[(${names})]="')[\\w-]+(?='"))`, 'g');
+}
+
+export function matchPropertyAccess(objectName: string) {
+  return new RegExp(`(?<=${objectName}\\s*\\.\\s*)\\w+`, 'g');
+}

packages/angular-builder/src/index.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2024 StApps
+ *  This program is free software: you can redistribute it and/or modify it
+ *  under the terms of the GNU General Public License as published by the Free
+ *  Software Foundation, version 3.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT
+ *  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ *  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ *  more details.
+ *
+ *  You should have received a copy of the GNU General Public License along with
+ *  this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+export interface IconConfig {
+  scriptGlob?: string;
+  htmlGlob?: string;
+  inputPath: string;
+  outputPath: string;
+  additionalIcons?: {[purpose: string]: string[]};
+}
+
+export function defineIconConfig(config: IconConfig): IconConfig {
+  return config;
+}
+
+export * from './icons/icon-match.js';

packages/angular-builder/src/scripts/accumulate-licenses.mjs

@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2022 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {readFileSync, writeFileSync} from 'fs';
+import {omit, pickBy} from '@openstapps/collection-utils';
+
+/**
+ * accumulate and transform licenses based on two license files
+ * @param {string} path
+ * @param {string} additionalLicensesPath
+ */
+function accumulateFile(path, additionalLicensesPath) {
+  const packageJson = JSON.parse(readFileSync('./package.json').toString());
+  const dependencies = packageJson.dependencies;
+
+  console.log(`Accumulating licenses from ${path}`);
+
+  writeFileSync(
+    path,
+    JSON.stringify(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      Object.entries({
+        ...pickBy(JSON.parse(readFileSync(path).toString()), (_, key) => {
+          const parts = /** @type {string} */ (key).split('@');
+
+          return dependencies[parts.slice(0, -1).join('@')] === parts[parts.length - 1];
+        }),
+        ...JSON.parse(readFileSync(additionalLicensesPath).toString()),
+      })
+        .map(([key, value]) => ({
+          licenseText: value.licenseFile && readFileSync(value.licenseFile, 'utf8'),
+          name: key,
+          ...omit(value, 'licenseFile', 'path'),
+        }))
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    ),
+  );
+}
+
+accumulateFile('./src/assets/about/licenses.json', './additional-licenses.json');

packages/angular-builder/src/scripts/get-ip.mjs

@@ -0,0 +1,8 @@
+import {networkInterfaces} from 'os';
+
+console.log(
+  Object.entries(networkInterfaces())
+    .map(([, info]) => info)
+    .flat()
+    .find(info => info && !info.internal && info.family === 'IPv4')?.address,
+);

packages/angular-builder/src/scripts/minify-icon-font.mjs

@@ -0,0 +1,102 @@
+/*
+ * Copyright (C) 2022 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import {exec} from 'child_process';
+import config from '../icons.config.mjs';
+import {statSync} from 'fs';
+import {getUsedIconsHtml, getUsedIconsTS} from './gather-used-icons.mjs';
+import {getCodePoints} from './get-code-points.mjs';
+
+/**
+ * @param {string[] | string} command
+ * @returns {Promise<string>}
+ */
+async function run(command) {
+  const fullCommand = Array.isArray(command) ? command.join(' ') : command;
+  console.log(`>> ${fullCommand}`);
+
+  return new Promise((resolve, reject) => {
+    exec(fullCommand, (error, stdout, stderr) => {
+      if (error) {
+        reject(error);
+      } else if (stderr) {
+        reject(stderr);
+      } else {
+        resolve(stdout.trim());
+      }
+    });
+  });
+}
+
+/**
+ *
+ */
+async function minifyIconFont() {
+  /** @type {Set<string>} */
+  const icons = new Set();
+
+  for (const iconSet of [
+    ...Object.values(config.additionalIcons || []),
+    ...Object.values(await getUsedIconsTS(config.scriptGlob)),
+    ...Object.values(await getUsedIconsHtml(config.htmlGlob)),
+  ]) {
+    for (const icon of iconSet) {
+      icons.add(icon);
+    }
+  }
+
+  const glyphs = ['5f-7a', '30-39', ...(await getCodePoints([...icons]))].sort();
+
+  console.log(
+    await run([
+      'pyftsubset',
+      `"${config.inputPath}"`,
+      `--unicodes=${glyphs.join(',')}`,
+      '--no-layout-closure',
+      `--output-file="${config.outputPath}"`,
+      '--flavor=woff2',
+    ]),
+  );
+
+  console.log(`${glyphs.length} Used Icons Total`);
+  console.log(`Minified font saved to ${config.outputPath}`);
+  const result = statSync(config.outputPath).size;
+  const before = statSync(config.inputPath).size;
+
+  console.log(
+    `${toByteUnit(before)} > ${toByteUnit(result)} (${(((before - result) / before) * 100).toFixed(
+      2,
+    )}% Reduction)`,
+  );
+}
+
+// eslint-disable-next-line unicorn/prefer-top-level-await
+minifyIconFont();
+
+/**
+ * Bytes to respective units
+ * @param {number} value
+ * @returns {string}
+ */
+function toByteUnit(value) {
+  if (value < 1024) {
+    return `${value}B`;
+  } else if (value < 1024 * 1024) {
+    return `${(value / 1024).toFixed(2)}KB`;
+  } else {
+    return `${(value / 1024 / 1024).toFixed(2)}MB`;
+  }
+}

packages/angular-builder/src/shared.ts

@@ -0,0 +1,20 @@
+import {BuilderContext, BuilderOutput} from '@angular-devkit/architect';
+import {checkIconCorrectness} from './icons/check-icon-correctness.js';
+import {getIconConfig} from './icons/icon-config.js';
+
+export async function runPrebuild(context: BuilderContext): Promise<void | BuilderOutput> {
+  context.reportStatus('Checking icons');
+  if (!process.env.SKIP_ICON_CHECK) {
+    const iconConfig = await getIconConfig();
+    try {
+      await checkIconCorrectness(iconConfig);
+    } catch (error) {
+      return {
+        success: false,
+        error:
+          (error as Error).message + '\n\nTo skip this check, set the environment variable SKIP_ICON_CHECK=1',
+      };
+    }
+  }
+  context.reportStatus('✔ Icons are correct.');
+}

packages/angular-builder/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@openstapps/tsconfig",
+  "exclude": ["lib", "app.js"]
+}