chore(atomic): add SVG transformer

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts

@@ -3107,5 +3107,4 @@ export declare interface AtomicTimeframeFacet extends Components.AtomicTimeframe
 
 
 
-import type {} from '@coveo/atomic/components';
 import type {} from '@coveo/atomic/components';

packages/atomic/project.json

@@ -34,7 +34,7 @@
         "commands": [
           "node --max_old_space_size=6144 ../../node_modules/@stencil/core/bin/stencil build",
           "node ./scripts/stencil-proxy.mjs",
-          "tsc -p tsconfig.lit.json",
+          "node ./scripts/build.mjs --config=tsconfig.lit.json",
           "esbuild src/autoloader/index.ts --format=esm --outfile=dist/atomic/autoloader/index.esm.js",
           "esbuild src/autoloader/index.ts --format=cjs --outfile=dist/atomic/autoloader/index.cjs.js"
         ],

packages/atomic/scripts/build.mjs

@@ -0,0 +1,87 @@
+import {dirname, basename} from 'path';
+import {argv} from 'process';
+import {
+  readConfigFile,
+  getLineAndCharacterOfPosition,
+  sys,
+  parseJsonConfigFileContent,
+  getPreEmitDiagnostics,
+  createProgram,
+  flattenDiagnosticMessageText,
+} from 'typescript';
+import svgTransformer from './svg-transform.mjs';
+
+const args = argv.slice(2);
+const configArg = args.find((arg) => arg.startsWith('--config='));
+if (configArg === undefined) {
+  throw new Error('Missing --config=[PATH] argument');
+}
+const tsConfigPath = configArg.split('=')[1];
+
+function loadTsConfig(configPath) {
+  const configFile = readConfigFile(configPath, sys.readFile);
+  if (configFile.error) {
+    throw new Error(
+      `Error loading tsconfig file: ${configFile.error.messageText}`
+    );
+  }
+  return parseJsonConfigFileContent(
+    configFile.config,
+    sys,
+    dirname(configPath)
+  );
+}
+
+function emit(program) {
+  const targetSourceFile = undefined;
+  const cancellationToken = undefined;
+  const writeFile = undefined;
+  const emitOnlyDtsFiles = false;
+  const customTransformers = {
+    before: [svgTransformer],
+  };
+
+  return program.emit(
+    targetSourceFile,
+    cancellationToken,
+    writeFile,
+    emitOnlyDtsFiles,
+    customTransformers
+  );
+}
+
+function compileWithTransformer() {
+  console.log('Using tsconfig:', basename(tsConfigPath));
+  const {options, fileNames} = loadTsConfig(tsConfigPath);
+  const program = createProgram(fileNames, options);
+  const emitResult = emit(program);
+
+  const allDiagnostics = getPreEmitDiagnostics(program).concat(
+    emitResult.diagnostics
+  );
+
+  allDiagnostics.forEach((diagnostic) => {
+    if (diagnostic.file) {
+      const {line, character} = getLineAndCharacterOfPosition(
+        diagnostic.file,
+        diagnostic.start
+      );
+      const message = flattenDiagnosticMessageText(
+        diagnostic.messageText,
+        '\n'
+      );
+
+      console.log(
+        `${diagnostic.file.fileName} (${line + 1},${character + 1}): ${message}`
+      );
+    } else {
+      console.error(flattenDiagnosticMessageText(diagnostic.messageText, '\n'));
+    }
+  });
+
+  let exitCode = emitResult.emitSkipped ? 1 : 0;
+  console.log(`Process exiting with code '${exitCode}'.`);
+  process.exit(exitCode);
+}
+
+compileWithTransformer();

packages/atomic/scripts/svg-transform.mjs

@@ -0,0 +1,66 @@
+import {readFileSync} from 'fs';
+import {basename, dirname, join, resolve} from 'path';
+import {
+  NodeFlags,
+  isImportDeclaration,
+  visitEachChild,
+  visitNode,
+} from 'typescript';
+
+function createStatement(factory, svgContent, variableName) {
+  const bindingName = undefined;
+  const exclamationToken = undefined;
+  const modifiers = [];
+  const {
+    createVariableStatement,
+    createVariableDeclarationList,
+    createVariableDeclaration,
+    createStringLiteral,
+  } = factory;
+
+  if (variableName === undefined) {
+    throw new Error(
+      `Variable name is not defined for the import statement ${node.getText()}`
+    );
+  }
+
+  return createVariableStatement(
+    modifiers,
+    createVariableDeclarationList(
+      [
+        createVariableDeclaration(
+          variableName,
+          bindingName,
+          exclamationToken,
+          createStringLiteral(svgContent)
+        ),
+      ],
+      NodeFlags.Const
+    )
+  );
+}
+
+/**
+ * Custom SVG transformer to handle .svg imports.
+ */
+export default function svgTransformer(context) {
+  const {factory} = context;
+
+  function visit(node) {
+    if (isImportDeclaration(node)) {
+      const importPath = node.moduleSpecifier.text;
+      if (importPath.endsWith('.svg')) {
+        console.log('Replacing SVG import:', basename(importPath));
+        const dir = dirname(node.getSourceFile().fileName);
+        const svgPath = resolve(dir, importPath);
+        const svgContent = readFileSync(svgPath, 'utf8');
+        const variableName = node.importClause?.name?.escapedText;
+
+        return createStatement(factory, svgContent, variableName);
+      }
+    }
+    return visitEachChild(node, visit, context);
+  }
+
+  return (sourceFile) => visitNode(sourceFile, visit);
+}

packages/atomic/scripts/watch.mjs

@@ -5,7 +5,7 @@ function rebuild() {
   const commands = [
     'node --max_old_space_size=6144 ../../node_modules/@stencil/core/bin/stencil build',
     'node ./scripts/stencil-proxy.mjs',
-    'tsc -p tsconfig.lit.json',
+    'node ./scripts/build.mjs --config=tsconfig.lit.json',
     'esbuild src/autoloader/index.ts --format=esm --outfile=dist/atomic/autoloader/index.esm.js',
     'esbuild src/autoloader/index.ts --format=cjs --outfile=dist/atomic/autoloader/index.cjs.js',
   ];