@exdst-sitecore-content-sdk/astro 0.0.1

package/src/sharedTypes/component-props.ts

@@ -0,0 +1,17 @@
+export type ComponentPropsError = { error: string; componentName: string };
+
+/**
+ * Shape of component props storage
+ */
+export type ComponentPropsCollection = {
+  [componentUid: string]: unknown | ComponentPropsError;
+};
+
+export type AstroContentSdkComponent = (_props: Record<string, any>) => any;
+
+export type PreviewData = string | false | object | undefined;
+
+export type ComponentMap<
+  TComponent extends AstroContentSdkComponent = AstroContentSdkComponent
+> = Map<string, TComponent>;
+

package/src/site/index.ts

@@ -0,0 +1 @@
+export { SiteResolver, SiteInfo } from '@sitecore-content-sdk/core/site';

package/src/test-data/helpers.ts

@@ -0,0 +1,46 @@
+export type Query = {
+  [key: string]: string | string[];
+};
+
+const baseUrl = 'https://test.com';
+
+export const mockRequest = ({
+  url,
+  method,
+  query,
+  headers,
+}: {
+  url?: string;
+  method?: string;
+  query?: Query;
+  headers?: { [key: string]: string };
+}) => {
+  const requestUrl = addQueryToUrl(url || baseUrl, query);
+  return new Request(requestUrl, {
+    method,
+    headers: headers,
+  });
+};
+
+export const addQueryToUrl = (baseUrl: string, query?: Query): string => {
+  const url = new URL(baseUrl);
+  const params = new URLSearchParams();
+
+  if (query) {
+    Object.entries(query).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        value.forEach((item) => {
+          params.append(key, item);
+        });
+      } else {
+        params.append(key, value);
+      }
+    });
+
+    params.forEach((value, key) => {
+      url.searchParams.append(key, value);
+    });
+  }
+
+  return url.toString();
+};

package/src/test-data/personalizeData.ts

@@ -0,0 +1,63 @@
+export const mountain_bike_audience = {
+  uid: '0b6d23d8-c50e-4e79-9eca-317ec43e82b0',
+  componentName: 'ContentBlock',
+  dataSource: '20679cd4-356b-4452-b507-453beeb0be39',
+  fields: {
+    content: {
+      value:
+        '<p><img src="https://edge-beta.sitecorecloud.io/ser-edge-personalization/media/CsdkNextWeb/Mountain-Bike.jpg?h=675&amp;w=1200" style="width:1200px;height:675px;" /></p>',
+    },
+    heading: { value: 'Mountain Bike' },
+  },
+};
+
+export const city_bike_audience = {
+  uid: '0b6d23d8-c50e-4e79-9eca-317ec43e82b0',
+  componentName: 'ContentBlock',
+  dataSource: '36e02581-2056-4c55-a4d5-f4b700ba1ae2',
+  fields: {
+    content: {
+      value:
+        '<p><img src="https://edge-beta.sitecorecloud.io/ser-edge-personalization/media/CsdkNextWeb/Mountain-Bike.jpg?h=675&amp;w=1200" style="width:1200px;height:675px;" /></p>',
+    },
+    heading: { value: 'Mountain Bike' },
+  },
+};
+
+export const layoutData = {
+  sitecore: {
+    context: {
+      pageEditing: false,
+      site: { name: 'CsdkNextWeb' },
+      visitorIdentificationTimestamp: 1038543,
+      language: 'en',
+      variantId: undefined,
+    },
+    route: {
+      name: 'landingpage',
+      placeholders: {
+        'content-sdk-main': [
+          {
+            uid: '0b6d23d8-c50e-4e79-9eca-317ec43e82b0',
+            componentName: 'ContentBlock',
+            dataSource: 'e020fb58-1be8-4537-aab8-67916452ecf2',
+            fields: { content: { value: '' }, heading: { value: 'Default Content' } },
+            experiences: {
+              mountain_bike_audience: mountain_bike_audience,
+              city_bike_audience: city_bike_audience,
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+export const componentWithExperiences = {
+  uid: '0b6d23d8-c50e-4e79-9eca-317ec43e82b0',
+  componentName: 'ContentBlock',
+  dataSource: '20679cd4-356b-4452-b507-453beeb0be39',
+  fields: mountain_bike_audience.fields,
+};
+
+export const componentsWithExperiencesArray = [componentWithExperiences];

package/src/tools/generate-map.ts

@@ -0,0 +1,83 @@
+import {
+  GenerateMapArgs,
+  GenerateMapFunction,
+  ComponentMapTemplate,
+} from '@sitecore-content-sdk/core/tools';
+import path from 'path';
+import fs from 'fs';
+import { getComponentList } from './templating/components';
+
+/**
+ * Generate and write componentMap.ts file based on provided params.
+ * @param {GenerateMapArgs} param0 params for generateMap
+ */
+export const generateMap: GenerateMapFunction = ({
+  paths,
+  destination = '.sitecore',
+  exclude,
+  componentImports,
+  mapTemplate = buildAstroMapContent,
+}: GenerateMapArgs) => {
+  const components = getComponentList(paths, exclude);
+
+  const content = (mapTemplate as ComponentMapTemplate)(components, componentImports);
+
+  const componentMapFile = path.join(process.cwd(), destination, 'component-map.ts');
+
+  try {
+    fs.writeFileSync(componentMapFile, content, {
+      encoding: 'utf8',
+    });
+  } catch (error) {
+    console.error(`Component Map generation failed. Error writing to file ${destination}:`, error);
+    throw error;
+  }
+};
+
+const buildAstroMapContent: ComponentMapTemplate = (components, componentImports): string => {
+  const wildcardImports: string[] = [];
+  const namedImports: string[] = [];
+
+  const componentMapEntries: string[] = [];
+
+  components.forEach((component) => {
+    wildcardImports.push(`import ${component.moduleName} from '${component.importPath}.astro';`);
+    componentMapEntries.push(`['${component.moduleName}', ${component.moduleName}]`);
+  });
+
+  componentImports?.forEach((packageEntry) => {
+    if (packageEntry.importInfo.namedImports) {
+      namedImports.push(
+        `import { ${packageEntry.importInfo.namedImports.join(', ')} } from '${
+          packageEntry.importInfo.importFrom
+        }.astro';`
+      );
+      packageEntry.importInfo.namedImports.forEach((importName) => {
+        componentMapEntries.push(`['${importName}', ${importName}]`);
+      });
+    } else {
+      wildcardImports.push(
+        `import ${packageEntry.importName} from '${packageEntry.importInfo.importFrom}';`
+      );
+      componentMapEntries.push(`['${packageEntry.importName}', ${packageEntry.importName}]`);
+    }
+  });
+
+  return `//@ts-nocheck
+import { AstroContentSdkComponent } from '@astro-sitecore-jss/astro-content-sdk';
+
+// Components imported from the app itself
+${wildcardImports.join('\n')}
+${namedImports.join('\n')}
+
+// Components must be registered within the map to match the string key with component name in Sitecore
+export const componentMap = new Map<string, AstroContentSdkComponent>([
+${componentMapEntries
+  .map((component) => {
+    return `  ${component},\n`;
+  })
+  .join('')}]);
+
+export default componentMap;
+`;
+};

package/src/tools/index.ts

@@ -0,0 +1,8 @@
+export {
+  generateSites,
+  generateMetadata,
+} from '@sitecore-content-sdk/core/tools';
+
+export { generateMap } from './generate-map';
+
+export * from './templating';

package/src/tools/templating/components.test.ts

@@ -0,0 +1,305 @@
+/* eslint-disable no-unused-expressions */
+import { expect } from 'chai';
+import sinon from 'sinon';
+import { getComponentList } from './components';
+import { ComponentFile } from '@sitecore-content-sdk/core/tools';
+import path from 'path';
+
+describe('components', () => {
+  const sandbox = sinon.createSandbox();
+  beforeEach(() => {
+    sandbox.restore();
+  });
+
+  describe('getComponentList', () => {
+    afterEach(() => {
+      sandbox.restore();
+    });
+
+    it('should return results when one of "paths" is a glob pattern', () => {
+      const items = [
+        {
+          importPath: 'src/test-data/components/Qux',
+          filePath: path.normalize('src/test-data/components/Qux.astro'),
+          componentName: 'Qux',
+          moduleName: 'Qux',
+        },
+        {
+          importPath: 'src/test-data/components/Foo',
+          filePath: path.normalize('src/test-data/components/Foo.astro'),
+          componentName: 'Foo',
+          moduleName: 'Foo',
+        },
+        {
+          importPath: 'src/test-data/components/Baz',
+          filePath: path.normalize('src/test-data/components/Baz.astro'),
+          componentName: 'Baz',
+          moduleName: 'Baz',
+        },
+        {
+          importPath: 'src/test-data/components/Bar',
+          filePath: path.normalize('src/test-data/components/Bar.astro'),
+          componentName: 'Bar',
+          moduleName: 'Bar',
+        },
+      ] as ComponentFile[];
+
+      const result = getComponentList(['src/test-data/components/*.astro'], ['**/*.test.*'], false);
+      expect(result).to.deep.equal(items);
+    });
+
+    it('should return results with all folded paths when path is a non-glob path', () => {
+      const items = [
+        {
+          importPath: 'src/test-data/components/Qux',
+          filePath: path.normalize('src/test-data/components/Qux.astro'),
+          componentName: 'Qux',
+          moduleName: 'Qux',
+        },
+        {
+          importPath: 'src/test-data/components/Foo',
+          filePath: path.normalize('src/test-data/components/Foo.astro'),
+          componentName: 'Foo',
+          moduleName: 'Foo',
+        },
+        {
+          importPath: 'src/test-data/components/Baz',
+          filePath: path.normalize('src/test-data/components/Baz.astro'),
+          componentName: 'Baz',
+          moduleName: 'Baz',
+        },
+        {
+          importPath: 'src/test-data/components/Bar',
+          filePath: path.normalize('src/test-data/components/Bar.astro'),
+          componentName: 'Bar',
+          moduleName: 'Bar',
+        },
+        {
+          importPath: 'src/test-data/components/folded/Folded',
+          filePath: path.normalize('src/test-data/components/folded/Folded.astro'),
+          componentName: 'Folded',
+          moduleName: 'Folded',
+        },
+      ] as ComponentFile[];
+
+      const result = getComponentList(['src/test-data/components'], ['**/*.test.*'], false);
+      expect(result).to.deep.equal(items);
+    });
+
+    it('should filter out results that are not components', () => {
+      const items = [
+        {
+          importPath: 'src/test-data/components/Qux',
+          filePath: path.normalize('src/test-data/components/Qux.astro'),
+          componentName: 'Qux',
+          moduleName: 'Qux',
+        },
+        {
+          importPath: 'src/test-data/components/Foo',
+          filePath: path.normalize('src/test-data/components/Foo.astro'),
+          componentName: 'Foo',
+          moduleName: 'Foo',
+        },
+        {
+          importPath: 'src/test-data/components/Baz',
+          filePath: path.normalize('src/test-data/components/Baz.astro'),
+          componentName: 'Baz',
+          moduleName: 'Baz',
+        },
+        {
+          importPath: 'src/test-data/components/Bar',
+          filePath: path.normalize('src/test-data/components/Bar.astro'),
+          componentName: 'Bar',
+          moduleName: 'Bar',
+        },
+        {
+          importPath: 'src/test-data/components/folded/Folded',
+          filePath: path.normalize('src/test-data/components/folded/Folded.astro'),
+          componentName: 'Folded',
+          moduleName: 'Folded',
+        },
+      ] as ComponentFile[];
+
+      const result = getComponentList(['src/test-data/components/**/*']);
+      expect(result).to.deep.equal(items);
+    });
+
+    it('should return result when "paths" contain exact paths to Astro components', () => {
+      const items = [
+        {
+          importPath: 'src/test-data/components/Foo',
+          filePath: path.normalize('src/test-data/components/Foo.astro'),
+          componentName: 'Foo',
+          moduleName: 'Foo',
+        },
+        {
+          importPath: 'src/test-data/components/Bar',
+          filePath: path.normalize('src/test-data/components/Bar.astro'),
+          componentName: 'Bar',
+          moduleName: 'Bar',
+        },
+        {
+          importPath: 'src/test-data/components/Baz',
+          filePath: path.normalize('src/test-data/components/Baz.astro'),
+          componentName: 'Baz',
+          moduleName: 'Baz',
+        },
+        {
+          importPath: 'src/test-data/components/Qux',
+          filePath: path.normalize('src/test-data/components/Qux.astro'),
+          componentName: 'Qux',
+          moduleName: 'Qux',
+        },
+      ];
+
+      const result = getComponentList([
+        'src/test-data/components/Foo.astro',
+        'src/test-data/components/Bar.astro',
+        'src/test-data/components/Baz.astro',
+        'src/test-data/components/Qux.astro',
+      ]);
+      expect(result).to.deep.equal(items);
+    });
+
+    it('should return filtered results when "exclude" contains a glob pattern', () => {
+      const exclude = ['**/components/**'];
+      expect(getComponentList(['src/test-data/components/*.astro'], exclude)).to.be.empty;
+    });
+
+    it('should return variants in results when includeVariants is true', () => {
+      sandbox.stub(console, 'debug');
+
+      const items = [
+        {
+          importPath: 'src/test-data/components/Qux',
+          filePath: path.normalize('src/test-data/components/Qux.astro'),
+          componentName: 'Qux',
+          moduleName: 'Qux',
+        },
+        // variant component
+        {
+          importPath: 'src/test-data/components/Hero.variant',
+          filePath: path.normalize('src/test-data/components/Hero.variant.astro'),
+          componentName: 'Hero.variant',
+          moduleName: 'Herovariant',
+        },
+        {
+          importPath: 'src/test-data/components/Foo',
+          filePath: path.normalize('src/test-data/components/Foo.astro'),
+          componentName: 'Foo',
+          moduleName: 'Foo',
+        },
+        {
+          importPath: 'src/test-data/components/Baz',
+          filePath: path.normalize('src/test-data/components/Baz.astro'),
+          componentName: 'Baz',
+          moduleName: 'Baz',
+        },
+        {
+          importPath: 'src/test-data/components/Bar',
+          filePath: path.normalize('src/test-data/components/Bar.astro'),
+          componentName: 'Bar',
+          moduleName: 'Bar',
+        },
+        {
+          importPath: 'src/test-data/components/folded/Folded',
+          filePath: path.normalize('src/test-data/components/folded/Folded.astro'),
+          componentName: 'Folded',
+          moduleName: 'Folded',
+        },
+      ] as ComponentFile[];
+
+      const result = getComponentList(['src/test-data/components'], ['**/*.test.*'], true);
+      expect(result).to.deep.equal(items);
+    });
+
+    it('should return filtered results when "exclude" contains an exact path', () => {
+      const exclude = ['src/test-data/components/Foo.astro'];
+      getComponentList(['src/test-data/components/*.astro'], exclude);
+    });
+
+    it('should return correct result in unix file systems', () => {
+      const stubbedPaths = [
+        'src/test-data/components/Foo.astro',
+        'src/test-data/components/Bar.astro',
+        'src/test-data/components/Baz.astro',
+        'src/test-data/components/Qux.astro',
+      ];
+      const expected = [
+        {
+          importPath: 'src/test-data/components/Foo',
+          filePath: 'src/test-data/components/Foo.astro',
+          componentName: 'Foo',
+          moduleName: 'Foo',
+        },
+        {
+          importPath: 'src/test-data/components/Bar',
+          filePath: 'src/test-data/components/Bar.astro',
+          componentName: 'Bar',
+          moduleName: 'Bar',
+        },
+        {
+          importPath: 'src/test-data/components/Baz',
+          filePath: 'src/test-data/components/Baz.astro',
+          componentName: 'Baz',
+          moduleName: 'Baz',
+        },
+        {
+          importPath: 'src/test-data/components/Qux',
+          filePath: 'src/test-data/components/Qux.astro',
+          componentName: 'Qux',
+          moduleName: 'Qux',
+        },
+      ];
+
+      const globSyncStub = sandbox.stub(require('glob'), 'sync').returns(stubbedPaths);
+
+      const result = getComponentList(['src/test-data/components/*.astro']);
+      expect(result).to.deep.equal(expected);
+
+      globSyncStub.restore();
+    });
+
+    it('should return correct result in windows file systems', () => {
+      const stubbedPaths = [
+        'src\\test-data\\components\\Foo.astro',
+        'src\\test-data\\components\\Bar.astro',
+        'src\\test-data\\components\\Baz.astro',
+        'src\\test-data\\components\\Qux.astro',
+      ];
+      const expected = [
+        {
+          importPath: 'src/test-data/components/Foo',
+          filePath: 'src\\test-data\\components\\Foo.astro',
+          componentName: 'Foo',
+          moduleName: 'Foo',
+        },
+        {
+          importPath: 'src/test-data/components/Bar',
+          filePath: 'src\\test-data\\components\\Bar.astro',
+          componentName: 'Bar',
+          moduleName: 'Bar',
+        },
+        {
+          importPath: 'src/test-data/components/Baz',
+          filePath: 'src\\test-data\\components\\Baz.astro',
+          componentName: 'Baz',
+          moduleName: 'Baz',
+        },
+        {
+          importPath: 'src/test-data/components/Qux',
+          filePath: 'src\\test-data\\components\\Qux.astro',
+          componentName: 'Qux',
+          moduleName: 'Qux',
+        },
+      ];
+
+      const globSyncStub = sandbox.stub(require('glob'), 'sync').returns(stubbedPaths);
+
+      const result = getComponentList(['src/test-data/components/*.astro']);
+      expect(result).to.deep.equal(expected);
+
+      globSyncStub.restore();
+    });
+  });
+});

package/src/tools/templating/components.ts

@@ -0,0 +1,49 @@
+import * as glob from 'glob';
+import { ComponentFile } from '@sitecore-content-sdk/core/tools';
+
+const componentNamePattern = /^[\/]*(.+[\/\\])*(.+)\.astro?$/;
+
+const componentPathPattern = /^([\/]*.+[\/\\].+)\..+$/;
+
+/**
+ * Get list of components from @var path
+ * Returns a list of components in the following format:
+ * {
+ *  path: 'path/to/component',
+ *  componentName: 'ComponentName',
+ *  moduleName: 'ComponentName'
+ * }
+ * @param {string[]} paths paths to search
+ * @param {string[]} [exclude] paths and glob patterns to exclude from final result
+ * @param {boolean} [includeVariants] whether to include variant components
+ */
+export function getComponentList(
+  paths: string[],
+  exclude?: string[],
+  includeVariants?: boolean
+): ComponentFile[] {
+  const components = paths.reduce<ComponentFile[]>((result, path) => {
+    const globPath =
+      glob.hasMagic(path, { magicalBraces: true }) || path.match(componentNamePattern)
+        ? path
+        : path.replace(/\/$/, '').concat('/**/*.astro');
+    return result.concat(
+      ...glob
+        .sync(globPath, { ignore: exclude, nodir: true })
+        .filter((path: string) => path.match(componentNamePattern))
+        .map((filePath: string) => {
+          const name = filePath.match(componentNamePattern)![2];
+          return {
+            filePath,
+            importPath: filePath.match(componentPathPattern)![1].replace(/\\/g, '/'), // use forward slashes for consistency
+            componentName: name,
+            moduleName: name.replace(/[^\w]+/g, ''),
+          };
+        })
+    );
+  }, []);
+
+  return includeVariants
+    ? components
+    : components.filter((component) => !component.componentName.includes('.'));
+}

package/src/tools/templating/constants.ts

@@ -0,0 +1,4 @@
+/**
+ * The file extension for Astro components
+ */
+export const COMPONENT_FILE_EXTENSION = 'astro';

package/src/tools/templating/default-component.test.ts

@@ -0,0 +1,31 @@
+/* eslint-disable no-unused-expressions, @typescript-eslint/no-unused-expressions */
+import { expect } from 'chai';
+import { defaultTemplate } from './default-component';
+import chalk from 'chalk';
+
+describe('default-component', () => {
+  describe('generateTemplate', () => {
+    it('should generate a template with the given component name', () => {
+      const componentName = 'TestComponent';
+      const template = defaultTemplate.generateTemplate(componentName);
+      expect(template).to.include(`export type ${componentName}Props`);
+      expect(template).to.include(`<p>${componentName} Component</p>`);
+    });
+  });
+
+  describe('getNextSteps', () => {
+    it('should return an empty array if no componentOutputPath is provided', () => {
+      const nextSteps = defaultTemplate.getNextSteps && defaultTemplate.getNextSteps('');
+      expect(nextSteps).to.be.an('array').that.is.empty;
+    });
+
+    it('should return an array with next steps if componentOutputPath is provided', () => {
+      const componentOutputPath = 'src/components/TestComponent.astro';
+      const nextSteps =
+        defaultTemplate.getNextSteps && defaultTemplate.getNextSteps(componentOutputPath);
+      expect(nextSteps)
+        .to.be.an('array')
+        .that.includes(`* Implement the Astro component in ${chalk.green(componentOutputPath)}`);
+    });
+  });
+});