@sitecore-content-sdk/angular 0.1.0-canary.20260609132302

package/cli-node/tools/generate-map.spec.js

@@ -0,0 +1,207 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable jsdoc/require-jsdoc */
+/* eslint-disable no-unused-vars */
+const vitest_1 = require("vitest");
+const node_tools_1 = require("@sitecore-content-sdk/content/node-tools");
+const tools_1 = require("@sitecore-content-sdk/content/tools");
+const readState = vitest_1.vi.hoisted(() => ({
+    readFileImpl: (_filePath) => '@Component({})\nexport class Default {}',
+}));
+const fsMock = vitest_1.vi.hoisted(() => ({
+    readFileSync: vitest_1.vi.fn((filePath, _encoding) => readState.readFileImpl(String(filePath))),
+    mkdirSync: vitest_1.vi.fn(),
+    writeFileSync: vitest_1.vi.fn(),
+}));
+vitest_1.vi.mock('node:fs', () => fsMock);
+vitest_1.vi.mock('@sitecore-content-sdk/content/node-tools', () => ({
+    getComponentList: vitest_1.vi.fn(),
+}));
+vitest_1.vi.mock('@sitecore-content-sdk/content/tools', () => ({
+    prepareComponentsForMap: vitest_1.vi.fn(),
+    buildComponentMapContent: vitest_1.vi.fn(() => '// generated map'),
+}));
+const generate_map_1 = require("../tools/generate-map");
+const mockGetComponentList = vitest_1.vi.mocked(node_tools_1.getComponentList);
+const mockPrepareComponentsForMap = vitest_1.vi.mocked(tools_1.prepareComponentsForMap);
+const mockBuildComponentMapContent = vitest_1.vi.mocked(tools_1.buildComponentMapContent);
+const ANGULAR_BUILTIN_IMPORTS = `import { ScFormComponent } from '@sitecore-content-sdk/angular';`;
+const ANGULAR_BUILTIN_MAP_ENTRIES = [`['Form', ScFormComponent]`];
+const makeComponent = (overrides) => ({
+    importPath: './',
+    moduleName: 'Mod',
+    componentName: 'Comp',
+    ...overrides,
+});
+(0, vitest_1.describe)('generateMap', () => {
+    const preparedEntries = [
+        { key: 'Hero', imports: [], valueExpr: 'HeroMod', annotateClient: false },
+    ];
+    let cwdSpy;
+    (0, vitest_1.beforeEach)(() => {
+        cwdSpy = vitest_1.vi.spyOn(process, 'cwd').mockReturnValue('/project/root');
+        readState.readFileImpl = () => '@Component({})\nexport class Default {}';
+        fsMock.readFileSync.mockClear();
+        fsMock.mkdirSync.mockReset();
+        fsMock.writeFileSync.mockReset();
+        mockPrepareComponentsForMap.mockReset();
+        mockPrepareComponentsForMap.mockReturnValue(preparedEntries);
+        mockBuildComponentMapContent.mockReset();
+        mockBuildComponentMapContent.mockReturnValue('// map file body');
+        mockGetComponentList.mockReset();
+        mockGetComponentList.mockReturnValue([]);
+    });
+    (0, vitest_1.afterEach)(() => {
+        cwdSpy.mockRestore();
+    });
+    (0, vitest_1.it)('should pass paths, exclude, includeVariants into getComponentList', () => {
+        const paths = ['src/app/a', 'src/app/b'];
+        const exclude = ['**/*.spec.ts'];
+        (0, generate_map_1.generateMap)({ paths, exclude, includeVariants: false });
+        (0, vitest_1.expect)(mockGetComponentList).toHaveBeenCalledWith(paths, exclude, false);
+    });
+    (0, vitest_1.it)('should default includeVariants to true when omitted', () => {
+        (0, generate_map_1.generateMap)({ paths: ['src/components'] });
+        (0, vitest_1.expect)(mockGetComponentList).toHaveBeenCalledWith(['src/components'], undefined, true);
+    });
+    (0, vitest_1.it)('should only add components with @Component directive for component map processing', () => {
+        const withDecorator = makeComponent({
+            filePath: '/project/root/src/with.component.ts',
+            componentName: 'With',
+            moduleName: 'With',
+            importPath: 'src/with.component',
+        });
+        const withoutDecorator = makeComponent({
+            filePath: '/project/root/src/plain.ts',
+            componentName: 'Plain',
+            moduleName: 'Plain',
+            importPath: 'src/plain',
+        });
+        mockGetComponentList.mockReturnValue([withDecorator, withoutDecorator]);
+        readState.readFileImpl = (filePath) => {
+            const p = String(filePath).replace(/\\/g, '/');
+            if (p.includes('with.component')) {
+                return `import { Component } from '@angular/core';\n@Component({ standalone: true })\nexport class With {}`;
+            }
+            return `export const x = 1;`;
+        };
+        (0, generate_map_1.generateMap)({ paths: ['src'] });
+        (0, vitest_1.expect)(fsMock.readFileSync).toHaveBeenCalled();
+        (0, vitest_1.expect)(mockPrepareComponentsForMap).toHaveBeenCalledTimes(1);
+        const [passedComponents] = mockPrepareComponentsForMap.mock.calls[0];
+        (0, vitest_1.expect)(passedComponents).toHaveLength(1);
+        (0, vitest_1.expect)(passedComponents[0].filePath).toContain('with.component');
+    });
+    (0, vitest_1.it)('should use default buildAngularComponentMap function when no mapTemplate is provided', () => {
+        const comp = makeComponent({
+            filePath: '/project/root/src/a.component.ts',
+            componentName: 'A',
+            moduleName: 'A',
+            importPath: 'src/a.component',
+        });
+        mockGetComponentList.mockReturnValue([comp]);
+        (0, generate_map_1.generateMap)({ paths: ['src'] });
+        (0, vitest_1.expect)(mockBuildComponentMapContent).toHaveBeenCalledTimes(1);
+    });
+    (0, vitest_1.it)('should pass angular default imports and builtin entries into component map', () => {
+        const comp = makeComponent({
+            filePath: '/project/root/src/x.component.ts',
+            componentName: 'X',
+            moduleName: 'X',
+            importPath: 'src/x.component',
+        });
+        mockGetComponentList.mockReturnValue([comp]);
+        const componentImports = [
+            { importName: 'Lib', importInfo: { importFrom: '@lib/pkg', namedImports: ['A'] } },
+        ];
+        (0, generate_map_1.generateMap)({ paths: ['src'], componentImports });
+        const [entries, passedImports, options] = mockBuildComponentMapContent.mock.calls[0];
+        (0, vitest_1.expect)(entries).toEqual(preparedEntries);
+        (0, vitest_1.expect)(passedImports).toEqual(componentImports);
+        const opts = options;
+        (0, vitest_1.expect)(opts.builtInImports).toBe(ANGULAR_BUILTIN_IMPORTS);
+        (0, vitest_1.expect)(opts.builtInMapEntries).toEqual(ANGULAR_BUILTIN_MAP_ENTRIES);
+    });
+    (0, vitest_1.it)('should pass angular as framework to buildComponentMapContent', () => {
+        const comp = makeComponent({
+            filePath: '/project/root/src/a.component.ts',
+            componentName: 'A',
+            moduleName: 'A',
+            importPath: 'src/a.component',
+        });
+        mockGetComponentList.mockReturnValue([comp]);
+        (0, generate_map_1.generateMap)({ paths: ['src'] });
+        (0, vitest_1.expect)(mockBuildComponentMapContent).toHaveBeenCalledWith(preparedEntries, undefined, vitest_1.expect.objectContaining({ framework: 'angular' }));
+    });
+    (0, vitest_1.it)('should use mapTemplate override function when provided', () => {
+        const comp = makeComponent({
+            filePath: '/project/root/src/a.component.ts',
+            componentName: 'A',
+            moduleName: 'A',
+            importPath: 'src/a.component',
+        });
+        mockGetComponentList.mockReturnValue([comp]);
+        const customTemplate = vitest_1.vi.fn().mockReturnValue('CUSTOM_MAP_BODY');
+        (0, generate_map_1.generateMap)({ paths: ['src'], mapTemplate: customTemplate });
+        (0, vitest_1.expect)(customTemplate).toHaveBeenCalledTimes(1);
+        const [comps, imports, ctx] = customTemplate.mock.calls[0];
+        (0, vitest_1.expect)(comps).toHaveLength(1);
+        (0, vitest_1.expect)(comps[0]).toEqual(comp);
+        (0, vitest_1.expect)(imports).toBeUndefined();
+        (0, vitest_1.expect)(ctx).toEqual({ entries: preparedEntries, includeVariants: true, isClientMap: false });
+        (0, vitest_1.expect)(mockBuildComponentMapContent).not.toHaveBeenCalled();
+        (0, vitest_1.expect)(fsMock.writeFileSync).toHaveBeenCalledWith(vitest_1.expect.stringMatching(/[\\/]component-map\.ts$/), 'CUSTOM_MAP_BODY', 'utf8');
+    });
+    (0, vitest_1.it)('should log to console.error and rethrow when mkdirSync fails', () => {
+        const comp = makeComponent({
+            filePath: '/project/root/src/a.component.ts',
+            componentName: 'A',
+            moduleName: 'A',
+            importPath: 'src/a.component',
+        });
+        mockGetComponentList.mockReturnValue([comp]);
+        const diskError = new Error('mkdir EACCES');
+        fsMock.mkdirSync.mockImplementation(() => {
+            throw diskError;
+        });
+        const consoleErrorSpy = vitest_1.vi.spyOn(console, 'error').mockImplementation(() => { });
+        try {
+            (0, vitest_1.expect)(() => (0, generate_map_1.generateMap)({ paths: ['src'] })).toThrow(diskError);
+            (0, vitest_1.expect)(consoleErrorSpy).toHaveBeenCalledTimes(1);
+            const [message, err] = consoleErrorSpy.mock.calls[0];
+            (0, vitest_1.expect)(message).toContain('Component Map generation failed');
+            (0, vitest_1.expect)(message).toContain('component-map.ts');
+            (0, vitest_1.expect)(err).toBe(diskError);
+        }
+        finally {
+            consoleErrorSpy.mockRestore();
+        }
+        (0, vitest_1.expect)(fsMock.writeFileSync).not.toHaveBeenCalled();
+    });
+    (0, vitest_1.it)('should log to console.error and rethrow when writeFileSync fails', () => {
+        const comp = makeComponent({
+            filePath: '/project/root/src/a.component.ts',
+            componentName: 'A',
+            moduleName: 'A',
+            importPath: 'src/a.component',
+        });
+        mockGetComponentList.mockReturnValue([comp]);
+        const writeError = new Error('ENOSPC');
+        fsMock.writeFileSync.mockImplementation(() => {
+            throw writeError;
+        });
+        const consoleErrorSpy = vitest_1.vi.spyOn(console, 'error').mockImplementation(() => { });
+        try {
+            (0, vitest_1.expect)(() => (0, generate_map_1.generateMap)({ paths: ['src'] })).toThrow(writeError);
+            (0, vitest_1.expect)(consoleErrorSpy).toHaveBeenCalledTimes(1);
+            const [message, err] = consoleErrorSpy.mock.calls[0];
+            (0, vitest_1.expect)(message).toContain('Component Map generation failed');
+            (0, vitest_1.expect)(message).toContain('component-map.ts');
+            (0, vitest_1.expect)(err).toBe(writeError);
+        }
+        finally {
+            consoleErrorSpy.mockRestore();
+        }
+        (0, vitest_1.expect)(fsMock.mkdirSync).toHaveBeenCalled();
+    });
+});

package/cli-node/tools/index.d.ts

@@ -0,0 +1,2 @@
+export { generateMap } from './generate-map';
+//# sourceMappingURL=index.d.ts.map

package/cli-node/tools/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/cli-node/tools/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateMap = void 0;
+var generate_map_1 = require("./generate-map");
+Object.defineProperty(exports, "generateMap", { enumerable: true, get: function () { return generate_map_1.generateMap; } });

package/dist/README.md

@@ -0,0 +1,33 @@
+# Sitecore Content SDK for Angular
+
+This package provides Angular integration for the Sitecore Content SDK. Use it in your Angular application to work with Sitecore XM Cloud content.
+
+[Documentation](https://doc.sitecore.com/xmc/en/developers/content-sdk/creating-a-content-sdk-app.html)
+
+## Installation
+
+In your Angular app:
+
+```bash
+npm install @sitecore-content-sdk/angular
+# or
+yarn add @sitecore-content-sdk/angular
+```
+
+## Build (developers)
+
+From the monorepo root:
+
+```bash
+yarn install
+yarn build
+```
+
+From this package:
+
+```bash
+yarn install
+yarn build
+```
+
+The library is built with [ng-packagr](https://github.com/ng-packagr/ng-packagr) and outputs to `dist/` in Angular Package Format (APF).