@ship-ui/core 0.13.2

package/bin/src/ship-fg.ts

@@ -0,0 +1,368 @@
+#!/usr/bin/env bun
+
+import { Glob } from 'bun';
+import { FSWatcher, watch } from 'fs';
+import path, { join, resolve } from 'path';
+
+import subsetFont from 'subset-font';
+
+import { formatFileSize, getUnicodeObject, InputArguments, SupportedFontTypes } from './utilities';
+
+let writtenCssSize = 0;
+let compressedCssSize = 0;
+
+const run = async (
+  PROJECT_SRC: string,
+  LIB_ICONS: string[],
+  PROJECT_PUBLIC: string,
+  GLYPH_MAP: Record<string, [string, string]>,
+  TARGET_FONT_TYPE: SupportedFontTypes,
+  values: InputArguments
+) => {
+  const startTime = performance.now();
+
+  const glob = new Glob('**/*.html');
+  const tsGlob = new Glob('**/*.ts');
+  const regex = /<sh-icon[^>]*>\s*((?!{{.*?}})[^<]*?)\s*<\/sh-icon>/g;
+  const regex2 = /sh:([^']+)/g;
+  const iconsFound = new Set<string>(LIB_ICONS);
+  const missingIcons = new Set<string>();
+
+  for await (const file of glob.scan(`${PROJECT_SRC}`)) {
+    const fileText = await Bun.file(`${PROJECT_SRC}/${file}`).text();
+    const matches = Array.from((fileText as any).matchAll(regex), (m: string) => m[1]);
+
+    if (matches?.length) {
+      for (let index = 0; index < matches.length; index++) {
+        const match = matches[index];
+
+        if (match) iconsFound.add(match);
+      }
+    }
+  }
+
+  for await (const file of tsGlob.scan(`${PROJECT_SRC}`)) {
+    const fileText = await Bun.file(`${PROJECT_SRC}/${file}`).text();
+    const matches = Array.from((fileText as any).matchAll(regex2), (m: string) => m[1]);
+
+    if (matches?.length) {
+      for (let index = 0; index < matches.length; index++) {
+        const match = matches[index];
+
+        if (match) iconsFound.add(match);
+      }
+    }
+  }
+
+  const groupedIcons = Array.from(iconsFound).reduce(
+    (acc, icon) => {
+      const bold = icon.endsWith('-bold');
+      const thin = icon.endsWith('-thin');
+      const light = icon.endsWith('-light');
+      const fill = icon.endsWith('-fill');
+      const regular = !bold && !thin && !light && !fill;
+      const glyph = GLYPH_MAP[icon];
+
+      if (!glyph) {
+        missingIcons.add(icon);
+        return acc;
+      }
+
+      if (bold) {
+        acc['bold'].push([icon, '']);
+        acc['bold'].push(glyph);
+      }
+      if (thin) {
+        acc['thin'].push([icon, '']);
+        acc['thin'].push(glyph);
+      }
+      if (light) {
+        acc['light'].push([icon, '']);
+        acc['light'].push(glyph);
+      }
+      if (fill) {
+        acc['fill'].push([icon, '']);
+        acc['fill'].push(glyph);
+      }
+      if (regular) {
+        acc['regular'].push([icon, '']);
+        acc['regular'].push(glyph);
+      }
+
+      return acc;
+    },
+    {
+      bold: [],
+      thin: [],
+      light: [],
+      fill: [],
+      regular: [],
+      text: [],
+    } as {
+      [key: string]: [string, string][];
+    }
+  );
+
+  const missingIconsArray = Array.from(missingIcons);
+
+  if (missingIconsArray.length) {
+    console.log('Following icons does not exist in font: \n ', Array.from(missingIcons));
+  }
+
+  writeCssFile(PROJECT_PUBLIC, values, groupedIcons, TARGET_FONT_TYPE);
+
+  // We dont load fonts we dont use
+  const fontTypes = ['bold', 'thin', 'light', 'fill', 'regular'].filter((x) => groupedIcons[x].length > 0);
+  const targetFormat = (TARGET_FONT_TYPE as SupportedFontTypes) === 'ttf' ? 'truetype' : TARGET_FONT_TYPE;
+  const fonts = fontTypes.map(async (fontType) => {
+    const glyphs = uniqueString(groupedIcons[fontType].map((icon) => icon[0]).join(''));
+    const fontFileName = `Phosphor${fontType === 'regular' ? '' : '-' + capitalize(fontType)}.${TARGET_FONT_TYPE}`;
+    const fullPath = path.resolve(
+      process.cwd(),
+      'node_modules',
+      '@phosphor-icons',
+      'web',
+      'src',
+      fontType,
+      fontFileName
+    );
+
+    const arrayBuffer = await Bun.file(fullPath).arrayBuffer();
+    const subsetBuffer = await subsetFont(Buffer.from(arrayBuffer), glyphs, {
+      targetFormat,
+      noLayoutClosure: true,
+    } as any);
+
+    return subsetBuffer;
+  });
+
+  const _fonts = await Promise.all(fonts);
+  let totalFontSize = 0;
+  let totalCompressedFontSize = 0;
+
+  for (let i = 0; i < _fonts.length; i++) {
+    const subsetBuffer = _fonts[i];
+    const fontType = fontTypes[i];
+    const fontWrites = await Bun.write(
+      `${PROJECT_PUBLIC}/sh${fontType === 'regular' ? '' : '-' + fontType}.${TARGET_FONT_TYPE}`,
+      subsetBuffer
+    );
+
+    const compressedFont = Bun.gzipSync(subsetBuffer);
+    const iconsOnGroup = groupedIcons[fontType].filter((icon) => icon[1] === '').map((icon) => icon[0]);
+
+    totalFontSize += fontWrites;
+    totalCompressedFontSize += compressedFont.length;
+
+    if (values.verbose) {
+      console.log('Group: ', fontType, '\n', iconsOnGroup);
+      console.log(
+        `Font & CSS (Generated/Compressed size): ${formatFileSize(fontWrites)}/${formatFileSize(compressedFont.length)}`
+      );
+
+      console.log(' ');
+    }
+  }
+
+  const endTime = performance.now();
+  const runtime = endTime - startTime;
+  console.log(
+    `Font & CSS (Generated/Compressed size): ${formatFileSize(totalFontSize + writtenCssSize)}/${formatFileSize(totalCompressedFontSize + compressedCssSize)}`
+  );
+  console.log('Time taken: ', runtime.toFixed(2) + 'ms');
+  console.log(' ');
+};
+
+function uniqueString(s: string): string {
+  const seen = new Set<string>(); // Use a Set to track seen characters
+  let result = '';
+
+  for (const char of s) {
+    if (!seen.has(char)) {
+      // Check if the character has been seen
+      seen.add(char); // Add the character to the seen set
+      result += char; // Append the character to the result
+    }
+  }
+
+  return result;
+}
+
+const writeCssFile = async (
+  PROJECT_PUBLIC: string,
+  values: InputArguments,
+  groupedIcons: { [key: string]: [string, string][] },
+  TARGET_FONT_TYPE = 'woff2'
+) => {
+  const groupedIconsEntries = Object.entries(groupedIcons).map(([key, value], i) => {
+    if (key === 'text') return '';
+
+    const suffix = key === 'regular' ? '' : '-' + key;
+    const fontUrl = `url('${values.rootPath}sh${suffix}.${TARGET_FONT_TYPE}') format('${TARGET_FONT_TYPE === 'ttf' ? 'truetype' : TARGET_FONT_TYPE}')`;
+
+    return `
+@font-face {
+  font-family: 'sh${suffix}';
+  src: ${fontUrl};
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}`;
+  });
+
+  const keys = Object.keys(groupedIcons).map((key) => {
+    if (['regular', 'text'].includes(key)) return '';
+
+    const suffix = key === 'regular' ? '' : '-' + key;
+
+    return `
+sh-icon.${key} {
+  font-family: 'sh${suffix}' !important;
+}`;
+  });
+  // Create a new css file
+  const cssFileContent = `
+  ${groupedIconsEntries.join('\n')}
+  ${keys.join('\n')}
+sh-icon {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: "sh" !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Enable Ligatures ================ */
+  letter-spacing: 0;
+  -webkit-font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga=1";
+  -moz-font-feature-settings: "liga";
+  -ms-font-feature-settings: "liga" 1;
+  font-feature-settings: "liga";
+  -webkit-font-variant-ligatures: discretionary-ligatures;
+  font-variant-ligatures: discretionary-ligatures;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}`;
+  const cssWrites = await Bun.write(`${PROJECT_PUBLIC}/ship.css`, cssFileContent);
+  const compressedCss = Bun.gzipSync(cssFileContent);
+
+  writtenCssSize = cssWrites;
+  compressedCssSize = compressedCss.length;
+};
+
+const textMateSnippet = async (GLYPH_MAP: Record<string, [string, string]>) => {
+  const iconsSnippetContent = `
+  {
+    "Phosphor icons": {
+      "prefix": ["pp:icon"],
+      "scope": "javascript,typescript,html",
+      "body": "\${1|${Object.keys(GLYPH_MAP).join(',')}|}",
+      "description": "Add a phosphor icon"
+    },
+    "Ship sh-icon": {
+      "prefix": ["sh-icon"],
+      "scope": "html",
+      "body": "<sh-icon>\${1|${Object.keys(GLYPH_MAP).join(',')}|}</sh-icon>",
+      "description": "Add a ship phosphor icon"
+    }
+  }
+  `;
+
+  await Bun.write('./.vscode/html.code-snippets', iconsSnippetContent);
+};
+
+function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export const main = async (values: InputArguments) => {
+  const TARGET_FONT_TYPE: SupportedFontTypes = 'woff2' as SupportedFontTypes;
+  const packageJsonPath = resolve(import.meta.dir, '../../package.json');
+  const packageJson = await Bun.file(packageJsonPath).json();
+  const PROJECT_SRC = values.src;
+  const PROJECT_PUBLIC = values.out;
+  const fontVariants = ['bold', 'thin', 'light', 'fill', 'regular'];
+  const GLYPH_MAPS = await Promise.all(
+    fontVariants.map(async (fontVariant) => {
+      const selectionJsonFullPath = path.resolve(
+        process.cwd(),
+        'node_modules',
+        '@phosphor-icons',
+        'web',
+        'src',
+        fontVariant,
+        'selection.json'
+      );
+      const selectionJson = await Bun.file(selectionJsonFullPath).json();
+
+      // return createCodepointObject(selectionJson.icons);
+      // return createNameCodeObject(selectionJson.icons);
+      return getUnicodeObject(selectionJson.icons);
+    })
+  );
+
+  const GLYPH_MAP = GLYPH_MAPS.reduce(
+    (acc, curr) => {
+      return {
+        ...acc,
+        ...curr,
+      };
+    },
+    {} as Record<string, [string, string]>
+  );
+
+  const LIB_ICONS = packageJson.libraryIcons as string[];
+  let watchers: FSWatcher[] = [];
+
+  textMateSnippet(GLYPH_MAP);
+
+  if (values.watch) {
+    const excludeFolders = ['node_modules', '.git', '.vscode', 'bin', 'assets'].concat([PROJECT_PUBLIC]);
+    const watcher = watch(PROJECT_SRC, { recursive: true }, (_, filename) => {
+      if (
+        filename && // Ensure filename is provided (can be null in some cases)
+        !excludeFolders.some((folder) => resolve(join(PROJECT_SRC, filename)).includes(folder))
+      ) {
+        run(PROJECT_SRC, LIB_ICONS, PROJECT_PUBLIC, GLYPH_MAP, TARGET_FONT_TYPE, values);
+      }
+    });
+
+    watchers.push(watcher);
+  }
+
+  if (values.watchLib) {
+    const watcher = watch(packageJsonPath, {}, async (_, filename) => {
+      const packageJson = await Bun.file(packageJsonPath).json();
+      const newLibIcons = packageJson.libraryIcons as string[];
+
+      run(PROJECT_SRC, newLibIcons, PROJECT_PUBLIC, GLYPH_MAP, TARGET_FONT_TYPE, values);
+    });
+
+    watchers.push(watcher);
+  }
+
+  run(PROJECT_SRC, LIB_ICONS, PROJECT_PUBLIC, GLYPH_MAP, TARGET_FONT_TYPE, values);
+
+  process.on('SIGKILL', killWatchers);
+  process.on('SIGINT', killWatchers);
+  process.on('SIGTERM', killWatchers);
+  process.on('SIGBREAK', killWatchers);
+
+  function killWatchers() {
+    console.log(`✅ The icon font generation watch process has been stopped.`);
+
+    for (let index = 0; index < watchers.length; index++) {
+      const watcher = watchers[index];
+
+      watcher.close();
+      watcher.removeAllListeners();
+    }
+
+    process.exit(0);
+  }
+};

package/bin/src/utilities.js

@@ -0,0 +1,53 @@
+export function createNameCodeObject(jsonData) {
+  const nameCodeObject = {};
+
+  for (let i = 0; i < jsonData.length; i++) {
+    const item = jsonData[i];
+    const hexCode = item.properties.code.toString(16);
+    const codePoint = parseInt(hexCode, 16);
+    const glyph = String.fromCodePoint(codePoint);
+    nameCodeObject[item.properties.ligatures] = glyph;
+  }
+
+  return nameCodeObject;
+}
+
+export const getUnicodeObject = (jsonData) => {
+  const nameCodeObject = {};
+
+  for (let i = 0; i < jsonData.length; i++) {
+    const item = jsonData[i];
+    const hexCode = item.properties.code.toString(16);
+    const codePoint = parseInt(hexCode, 16);
+    const glyph = String.fromCodePoint(codePoint);
+    if (glyph === '') {
+      console.warn(`Invalid codepoint 0x${hexCode} for ligature ${item.properties.ligatures}`);
+      continue;
+    }
+    nameCodeObject[item.properties.ligatures] = [glyph, 'U+' + hexCode];
+  }
+
+  return nameCodeObject;
+};
+
+export const createCodepointObject = (jsonData) => {
+  const nameCodeObject = {};
+
+  for (let i = 0; i < jsonData.length; i++) {
+    const item = jsonData[i];
+
+    nameCodeObject[item.properties.ligatures] = item.properties.code;
+  }
+
+  return nameCodeObject;
+};
+
+export function formatFileSize(bytes, dm = 2) {
+  if (bytes == 0) return '0 Bytes';
+
+  const k = 1000;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}

package/bin/src/utilities.ts

@@ -0,0 +1,98 @@
+export function createNameCodeObject(jsonData: Item[]): Record<string, string> {
+  const nameCodeObject: Record<string, string> = {};
+
+  for (let i = 0; i < jsonData.length; i++) {
+    const item = jsonData[i];
+    const hexCode = item.properties.code.toString(16); // Convert decimal to hex
+    const codePoint = parseInt(hexCode, 16); // Parse hex to integer code point
+    const glyph = String.fromCodePoint(codePoint); // Create the glyph
+    nameCodeObject[item.properties.ligatures] = glyph;
+  }
+
+  return nameCodeObject;
+}
+
+export const getUnicodeObject = (jsonData: Item[]): Record<string, [string, string]> => {
+  const nameCodeObject: Record<string, [string, string]> = {};
+
+  for (let i = 0; i < jsonData.length; i++) {
+    const item = jsonData[i];
+    const hexCode = item.properties.code.toString(16); // Convert decimal to hex
+    const codePoint = parseInt(hexCode, 16); // Parse hex to integer code point
+    const glyph = String.fromCodePoint(codePoint); // Create the glyph
+    if (glyph === '') {
+      console.warn(`Invalid codepoint 0x${hexCode} for ligature ${item.properties.ligatures}`);
+      continue;
+    }
+    nameCodeObject[item.properties.ligatures] = [glyph, 'U+' + hexCode];
+  }
+
+  return nameCodeObject;
+};
+
+export const createCodepointObject = (jsonData: Item[]): Record<string, number> => {
+  const nameCodeObject: Record<string, number> = {};
+
+  for (let i = 0; i < jsonData.length; i++) {
+    const item = jsonData[i];
+
+    nameCodeObject[item.properties.ligatures] = item.properties.code;
+  }
+
+  return nameCodeObject;
+};
+
+export function formatFileSize(bytes: number, dm = 2) {
+  if (bytes == 0) return '0 Bytes';
+
+  const k = 1000;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+interface Icon {
+  paths: string[];
+  attrs: { fill: string; opacity?: number }[];
+  isMulticolor: boolean;
+  isMulticolor2: boolean;
+  colorPermutations: { [key: string]: { f: number }[] };
+  tags: string[];
+  grid: number;
+}
+
+interface Attributes {
+  fill: string;
+  opacity?: number;
+}
+
+interface Properties {
+  id: number;
+  order: number;
+  name: string;
+  ligatures: string;
+  code: number;
+  prevSize: number;
+  codes: boolean;
+}
+
+interface Item {
+  icon: Icon;
+  attrs: Attributes[];
+  properties: Properties;
+  setIdx: number;
+  setId: number;
+  iconIdx: number;
+}
+
+export type SupportedFontTypes = 'woff' | 'woff2' | 'ttf';
+
+export type InputArguments = {
+  src: string;
+  out: string;
+  rootPath: string;
+  watch: boolean;
+  watchLib: boolean;
+  verbose: boolean;
+};

package/bin/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}