@sitecore-content-sdk/content 1.5.0-canary.10

package/dist/esm/tools/codegen/import-map.js

@@ -0,0 +1,355 @@
+import * as ts from 'typescript';
+import path from 'path';
+import fs from 'fs';
+import { debug } from '@sitecore-content-sdk/core';
+import { getComponentList } from './../templating';
+import crypto from 'crypto';
+import { isNodeModuleImportOrAlias, getRelativeImportPath } from './utils';
+let _getComponentList = getComponentList;
+const aliasImport = /^([a-zA-Z0-9]+) as .+$/;
+export const unitMocks = ({ getComponentListStub, }) => {
+    getComponentListStub && (_getComponentList = getComponentListStub);
+};
+/**
+ * Gets a Map object with import modules and their respective exports present throughout the paths specified
+ * @param {string} paths paths to files to be processed for import-map
+ * @returns {Map<string, ImportModule>} collection of keys and values, where keys refer to modules being processed and values are collections of exports for each module
+ */
+export let getImportMap = _getImportMap;
+/**
+ * Builds file contents for component map based on the default template
+ * @param {Map<string, ImportModule>} indexedImportMap map to be processed into final component-map.ts file
+ * @returns {string} file code for component-map.ts
+ * @internal
+ */
+export let defaultMapTemplate = _defaultMapTemplate;
+export const importUnitMocks = {
+    set getImportMap(mockImplementation) {
+        getImportMap = mockImplementation;
+    },
+    get getImportMap() {
+        return _getImportMap;
+    },
+    set defaultMapTemplate(mockImplementation) {
+        defaultMapTemplate = mockImplementation;
+    },
+    get defaultMapTemplate() {
+        return _defaultMapTemplate;
+    },
+};
+/**
+ * Parses and AST import node and extracts all imported values from it
+ * @param {ts.ImportDeclaration} importNode import node to be parsed
+ * @returns {ImportNames | null} object with named, default and namespace imported values, or null if import node is not valid
+ */
+export const getImportedValues = (importNode) => {
+    const importClause = importNode.importClause;
+    if (!importClause) {
+        console.warn('Cannot parse import string from: %s', importNode.getText());
+        return null;
+    }
+    const result = {
+        named: [],
+        default: null,
+        namespace: null,
+    };
+    importClause.getChildren().forEach((child) => {
+        if (child.kind === ts.SyntaxKind.NamedImports) {
+            // import [...,]{a,b,c}
+            child.forEachChild((namedChild) => {
+                const importText = namedChild.getText().trim();
+                const aliasMatch = aliasImport.exec(importText);
+                result.named.push(aliasMatch ? aliasMatch[1] : importText);
+            });
+        }
+        else if (child.kind === ts.SyntaxKind.NamespaceImport) {
+            // * as coolName
+            result.namespace = child.getText().replace('* as ', '');
+        }
+        else if (child.kind === ts.SyntaxKind.Identifier) {
+            // import coolName
+            result.default = child.getText();
+        }
+    });
+    return result;
+};
+// return alias-like name for an import value/variable name
+// this helps alleviate duplicate import names in import-map.ts
+export const getImportValueAlias = (importValue, moduleName, importType) => {
+    if (process.env.IMPORT_ALIAS_STRATEGY === 'plain')
+        return importValue;
+    // Add extra uniqueness since the same alias can be used for different import types
+    const importTypeId = importType === 'named' ? 'n' : importType === 'default' ? 'd' : 'ns';
+    const suffix = crypto.hash('sha1', `${moduleName}_${importTypeId}`);
+    return `${importValue}_${suffix}`;
+};
+// eslint-disable-next-line jsdoc/require-jsdoc
+function _getImportMap(paths) {
+    // make preparations for handling ts/js files
+    const appPath = process.cwd();
+    let cliCompilerOptions = {
+        baseUrl: appPath,
+        allowJs: true,
+        target: ts.ScriptTarget.ESNext,
+    };
+    const tsConfig = ts.readConfigFile(path.resolve(appPath, 'tsconfig.json'), ts.sys.readFile);
+    if (tsConfig.error) {
+        console.warn(`[Codegen] Error reading tsconfig.json from app root: ${tsConfig.error.messageText}`);
+    }
+    else {
+        cliCompilerOptions = Object.assign(Object.assign({}, tsConfig.config.compilerOptions), cliCompilerOptions);
+    }
+    const tsHost = ts.createCompilerHost(cliCompilerOptions, true);
+    // indexed version of import map - we will store and aggregate unique import paths and their imports here
+    const importMap = new Map();
+    // index to keep track of unique import values imported from different modules
+    // helps avoid duplicate import names in the final import-map.ts file
+    const importsList = [];
+    paths.forEach((codeFilePath) => {
+        const codeFileFullPath = path.isAbsolute(codeFilePath)
+            ? codeFilePath
+            : path.resolve(appPath, codeFilePath);
+        // attempt to parse current file to extract imports from
+        const tsCodeSource = tsHost.getSourceFile(codeFileFullPath, ts.ScriptTarget.Latest, (msg) => {
+            throw new Error(`[Codegen] Failed to parse ${codeFileFullPath}: ${msg}`);
+        });
+        if (!tsCodeSource)
+            throw ReferenceError(`[Codegen] Failed to find file ${codeFileFullPath}`);
+        // By transpiling the code from current file to JS we get rid of unused imports and the type imports
+        const jsCode = ts.transpileModule(tsCodeSource.getFullText(), {
+            compilerOptions: cliCompilerOptions,
+        });
+        // despite the name, ts.createSourceFile only creates SourceFile instance in runtime. Go figure ¯\_(ツ)_/¯
+        const jsCodeSource = ts.createSourceFile('code.js', jsCode.outputText, ts.ScriptTarget.ESNext, true);
+        // finally, we parse the final, trasformed js code and process import statements
+        ts.forEachChild(jsCodeSource, (childNode) => {
+            var _a;
+            if (ts.isImportDeclaration(childNode) && childNode.importClause) {
+                const imports = getImportedValues(childNode);
+                if (!imports) {
+                    return;
+                }
+                // import path is extracted
+                const moduleName = childNode.moduleSpecifier.getText().replace(/['"]/g, '');
+                const resolvedModule = ts.nodeModuleNameResolver(moduleName, codeFileFullPath, cliCompilerOptions, tsHost);
+                // get import path and check if its import target exists
+                const resolvedImportPath = (_a = resolvedModule === null || resolvedModule === void 0 ? void 0 : resolvedModule.resolvedModule) === null || _a === void 0 ? void 0 : _a.resolvedFileName;
+                if (!resolvedImportPath) {
+                    console.warn('[Codegen] Could not resolve a file for import %s', moduleName);
+                    return;
+                }
+                let importModuleName;
+                // if module path points to local app - get relative import path to the file (i.e. ./myComponent)
+                // if it points to node_modules, file or an alias - keep as-is
+                importModuleName = isNodeModuleImportOrAlias(moduleName)
+                    ? moduleName
+                    : getRelativeImportPath(resolvedImportPath, appPath);
+                // Set module import info in the map. If module import exists - add entries to existing entry
+                // Otherwise, add new entry
+                if (!importMap.has(importModuleName)) {
+                    importMap.set(importModuleName, {
+                        namedExports: new Map(),
+                        defaultExport: null,
+                        namespaceExport: null,
+                    });
+                }
+                const moduleEntry = importMap.get(importModuleName);
+                imports.named.forEach((importEntry) => {
+                    const sameModuleNamedAlready = moduleEntry.namedExports.has(importEntry);
+                    if (sameModuleNamedAlready) {
+                        return;
+                    }
+                    const nameTaken = importsList.includes(importEntry);
+                    const importValue = nameTaken
+                        ? getImportValueAlias(importEntry, importModuleName, 'named')
+                        : importEntry;
+                    moduleEntry.namedExports.set(importEntry, importValue);
+                    importsList.push(importEntry);
+                });
+                if (imports.namespace) {
+                    const sameModuleNamedAlready = moduleEntry.namespaceExport;
+                    if (sameModuleNamedAlready) {
+                        return;
+                    }
+                    const nameTaken = importsList.includes(imports.namespace);
+                    const importValue = nameTaken
+                        ? getImportValueAlias(imports.namespace, importModuleName, 'namespace')
+                        : imports.namespace;
+                    moduleEntry.namespaceExport = importValue;
+                    importsList.push(importValue);
+                }
+                if (imports.default) {
+                    const sameModuleNamedAlready = moduleEntry.defaultExport;
+                    if (sameModuleNamedAlready) {
+                        return;
+                    }
+                    const nameTaken = importsList.includes(imports.default);
+                    const importValue = nameTaken
+                        ? getImportValueAlias(imports.default, importModuleName, 'default')
+                        : imports.default;
+                    moduleEntry.defaultExport = importValue;
+                    importsList.push(importValue);
+                }
+            }
+        });
+    });
+    return importMap;
+}
+const prepImportMaps = async (paths, separateMaps) => {
+    const importMapFileDefault = path.join(process.cwd(), '.sitecore', 'import-map.ts');
+    if (!separateMaps) {
+        return [{ map: getImportMap(paths), path: importMapFileDefault }];
+    }
+    const appPath = process.cwd();
+    const serverPaths = [];
+    const clientPaths = [];
+    const importMapFileClient = path.join(process.cwd(), '.sitecore', 'import-map.client.ts');
+    const importMapFileServer = path.join(process.cwd(), '.sitecore', 'import-map.server.ts');
+    for (const componentPath of paths) {
+        const fullPath = path.isAbsolute(componentPath)
+            ? componentPath
+            : path.resolve(appPath, componentPath);
+        // read the start of the file that may be 'use client'
+        const firstLine = await new Promise((resolve) => {
+            let readBuffer = '';
+            const stream = fs.createReadStream(fullPath, { end: 12 });
+            stream
+                .on('data', async (chunk) => {
+                readBuffer += chunk.toString();
+            })
+                .on('close', () => resolve(readBuffer))
+                .on('error', () => resolve(''));
+        });
+        if (!firstLine)
+            continue;
+        if (firstLine.match(/['"]use client['"]/)) {
+            clientPaths.push(fullPath);
+        }
+        else {
+            serverPaths.push(fullPath);
+        }
+    }
+    return [
+        { map: getImportMap(serverPaths), path: importMapFileServer },
+        { map: getImportMap(clientPaths), path: importMapFileClient, isClient: true },
+    ];
+};
+/**
+ * Entry point function for generating import-map. Parses provided paths and outputs the modules and imports from those files into .sitecore/import-map.ts
+ * @param {WriteImportMapArgsInternal} args include/exclude paths settings to be processed for import-map, and the Sitecore configuration.
+ * @public
+ */
+export const writeImportMap = (args) => {
+    return async ({ scConfig }) => {
+        const defaultTemplate = args.defaultTemplate || defaultMapTemplate;
+        const clientTemplate = args.clientTemplate || defaultMapTemplate;
+        if (!scConfig) {
+            throw new Error('Sitecore configuration is required to be provided');
+        }
+        if (scConfig.disableCodeGeneration) {
+            debug.common('Skipping import map generation. Code generation functionality is disabled.');
+            return;
+        }
+        const paths = _getComponentList(args.paths, args.exclude).map((entry) => entry.filePath);
+        // TODO: don't run in pages router
+        const importMaps = await prepImportMaps(paths, args.separateServerClientMaps);
+        for (const importMap of importMaps) {
+            console.log(`[Codegen] Generating import map: ${JSON.stringify({
+                paths: args.paths,
+                exclude: args.exclude,
+            })}.\n Writing into ${importMap.path} ...`);
+            // get generated map and combine with default one
+            // can be expanded when adding support for non-react frameworks
+            const importMapContent = importMap.isClient
+                ? clientTemplate(importMap.map)
+                : defaultTemplate(importMap.map);
+            try {
+                fs.writeFileSync(importMap.path, importMapContent, {
+                    encoding: 'utf8',
+                });
+            }
+            catch (error) {
+                console.error(`[Codegen] Import Map generation failed. Error writing to file ${importMap.path}:`, error);
+                throw error;
+            }
+        }
+    };
+};
+// eslint-disable-next-line jsdoc/require-jsdoc
+function _defaultMapTemplate(indexedImportMap, framework = 'core', defaultImportEntriesImport = 'defaultImportEntries') {
+    const importStatements = [];
+    const importMapArray = Array.from(indexedImportMap);
+    // get import map entries after
+    const finalImportMap = importMapArray.map(([modulePath, imports]) => {
+        const defaultExport = {
+            name: 'default',
+            value: imports.defaultExport,
+        };
+        const namedExports = Array.from(imports.namedExports).map(([name, value]) => {
+            return {
+                name,
+                value,
+            };
+        });
+        const namespaceExport = {
+            name: '*',
+            value: imports.namespaceExport,
+        };
+        return {
+            module: modulePath,
+            defaultExport,
+            namedExports,
+            namespaceExport,
+        };
+    });
+    finalImportMap.forEach((entry) => {
+        if (entry.namedExports.length > 0) {
+            const namedExports = entry.namedExports
+                .map((entry) => {
+                return entry.name !== entry.value ? `${entry.name} as ${entry.value}` : entry.name;
+            })
+                .join(', ');
+            importStatements.push(`import { ${namedExports} } from '${entry.module}';`);
+        }
+        if (entry.defaultExport.value) {
+            importStatements.push(`import ${entry.defaultExport.value} from '${entry.module}';`);
+        }
+        if (entry.namespaceExport.value) {
+            importStatements.push(`import * as ${entry.namespaceExport.value} from '${entry.module}';`);
+        }
+    });
+    const outputExportEntries = (entry) => {
+        return ([...entry.namedExports, entry.defaultExport, entry.namespaceExport]
+            .filter((entry) => entry.value !== null)
+            .map((namedExport) => `      { name: '${namedExport.name}', value: ${namedExport.value} }`)
+            .join(',\n') + ',');
+    };
+    return `// This file is auto-generated by the Sitecore Content SDK.
+// Below are built-in Content SDK imports neccessary for the import map
+import {
+  combineImportEntries,
+  ${defaultImportEntriesImport},
+  ImportEntry,
+} from '@sitecore-content-sdk/${framework}/codegen';
+// end of built-in imports
+
+${importStatements.join('\n')}
+
+const importMap = [
+${finalImportMap
+        .map((entry) => [
+        '  {',
+        `    module: '${entry.module}',`,
+        '    exports: [',
+        outputExportEntries(entry),
+        '    ]',
+        '  }',
+    ]
+        .filter(Boolean)
+        .join('\n'))
+        .join(',\n')}
+] as ImportEntry[];
+
+export default combineImportEntries(${defaultImportEntriesImport}, importMap);
+`;
+}