@exdst-sitecore-content-sdk/astro 0.0.1

package/src/config-cli/define-cli-config.test.ts

@@ -0,0 +1,95 @@
+import { expect } from 'chai';
+import { defineCliConfig } from './define-cli-config';
+import {
+  SitecoreCliConfigInput,
+  SitecoreCliConfig,
+  ComponentTemplateType,
+} from '@sitecore-content-sdk/core/config';
+import chalk from 'chalk';
+
+describe('defineCliConfig', () => {
+  const validateDefaultTemplates = (result: SitecoreCliConfig) => {
+    expect(result.scaffold.templates[0].name).to.equal(
+      ComponentTemplateType.DEFAULT
+    );
+    const defaultTemplate =
+      result.scaffold.templates[0].generateTemplate('ComponentName');
+    // expect(defaultTemplate).to.contain(
+    //   // eslint-disable-next-line quotes
+    //   `import { ComponentParams, ComponentRendering } from '@sitecore-content-sdk/nextjs';`
+    // );
+    expect(defaultTemplate).to.contain('ComponentName');
+    if (result.scaffold.templates[0].getNextSteps) {
+      const componentpath = 'src/components/ComponentName.astro';
+      expect(
+        result.scaffold.templates[0].getNextSteps(componentpath)[0]
+      ).to.contain(
+        `* Implement the Astro component in ${chalk.green(componentpath)}`
+      );
+    }
+
+    // expect(result.scaffold.templates[1].name).to.equal(ComponentTemplateType.BYOC);
+    // const byocTemplate = result.scaffold.templates[1].generateTemplate('ByocComponentName');
+    // expect(byocTemplate).to.contain(
+    //   // eslint-disable-next-line quotes
+    //   `import * as FEAAS from '@sitecore-feaas/clientside/react';`
+    // );
+    // expect(byocTemplate).to.contain('ByocComponentName');
+
+    // expect(result.scaffold.templates[1].generateTemplate('comp name')).to.contain(
+    //   // eslint-disable-next-line quotes
+    //   `import * as FEAAS from '@sitecore-feaas/clientside/react';`
+    // );
+    // if (result.scaffold.templates[1].getNextSteps) {
+    //   expect(result.scaffold.templates[1].getNextSteps('componentpath')[0]).to.contain(
+    //     '* Modify component registration through FEAAS.External.registerComponent if needed'
+    //   );
+    // }
+  };
+
+  it('should add default and byoc scaffold templates', () => {
+    const inputConfig: SitecoreCliConfigInput = {
+      build: {
+        commands: [
+          () => {
+            return async () => {
+              Promise.resolve('test');
+            };
+          },
+        ],
+      },
+      scaffold: {
+        templates: [
+          { name: 'existing template', generateTemplate: () => 'test' },
+        ],
+      },
+    };
+
+    const result = defineCliConfig(inputConfig);
+    expect(result.scaffold.templates).to.have.lengthOf(2);
+
+    validateDefaultTemplates(result);
+
+    expect(result.scaffold.templates[1].name).to.equal('existing template');
+  });
+
+  it('should initialize scaffold object if not present', () => {
+    const inputConfig: SitecoreCliConfigInput = {
+      build: {
+        commands: [
+          () => {
+            return async () => {
+              Promise.resolve('test');
+            };
+          },
+        ],
+      },
+    };
+
+    const result = defineCliConfig(inputConfig);
+
+    expect(result.scaffold.templates).to.have.lengthOf(1);
+
+    validateDefaultTemplates(result);
+  });
+});

package/src/config-cli/define-cli-config.ts

@@ -0,0 +1,50 @@
+import {
+  SitecoreCliConfigInput,
+  SitecoreCliConfig,
+} from '@sitecore-content-sdk/core/config';
+import { defineCliConfig as defineCliConfigCore } from '@sitecore-content-sdk/core/config-cli';
+// import { byocTemplate } from '../tools/templating/byoc-component';
+import { defaultTemplate } from '../tools/templating/default-component';
+import { generateMap } from '../tools/generate-map';
+
+/**
+ * Accepts a `SitecoreCliConfigInput` object and returns the Sitecore Content SDK CLI configuration from the specified file,
+ * updated with the required default values.
+ * @param {SitecoreCliConfigInput} cliConfig the cli configuration provided by the application
+ * @returns {SitecoreCliConfig} full sitecore cli configuration to use with cli
+ */
+export const defineCliConfig = (
+  cliConfig: SitecoreCliConfigInput
+): SitecoreCliConfig => {
+  addDefaultScaffoldTemplates(cliConfig);
+  addDefaultComponentMapGenerator(cliConfig);
+  return defineCliConfigCore(cliConfig);
+};
+
+/**
+ * Adds default scaffold templates to the CLI configuration.
+ * @param {SitecoreCliConfigInput} cliConfig - The CLI configuration object
+ */
+function addDefaultScaffoldTemplates(cliConfig: SitecoreCliConfigInput) {
+  if (!cliConfig.scaffold) {
+    cliConfig.scaffold = {};
+  }
+
+  if (!cliConfig.scaffold.templates) {
+    cliConfig.scaffold.templates = [];
+  }
+
+  cliConfig.scaffold.templates.unshift(defaultTemplate);
+}
+
+/**
+ * Add the framework-specific implementaion of the component map generator to the CLI configuration.
+ * @param {SitecoreCliConfigInput} cliConfig - The CLI configuration object
+ */
+function addDefaultComponentMapGenerator(cliConfig: SitecoreCliConfigInput) {
+  cliConfig.componentMap = {
+    generator: generateMap,
+    paths: ['src/components'],
+    ...cliConfig.componentMap,
+  };
+}

package/src/config-cli/index.ts

@@ -0,0 +1 @@
+export { defineCliConfig } from './define-cli-config';

package/src/context.ts

@@ -0,0 +1,68 @@
+import { map } from 'nanostores';
+import { ComponentMap } from './sharedTypes/component-props';
+import { Page } from '@sitecore-content-sdk/core/client';
+import { SitecoreConfig } from '@sitecore-content-sdk/core/config';
+import { DictionaryPhrases } from '@sitecore-content-sdk/core/types/i18n';
+
+export const SitecoreContext: any = map({});
+
+export interface SitecoreContextProps {
+  /**
+   * The API configuration defined in the `SitecoreConfig`.
+   */
+  api: SitecoreConfig['api'];
+  /**
+   * The component map to use for rendering components.
+   */
+  componentMap?: ComponentMap;
+  /**
+   * The page data.
+   */
+  page: Page;
+}
+
+export interface SitecoreDictionarytProps {
+  /**
+   * The dictionary data.
+   */
+  dictionary: DictionaryPhrases;
+}
+
+export const updateSitecoreContext = ({
+  page,
+  api,
+  componentMap,
+}: SitecoreContextProps) => {
+  SitecoreContext.setKey('page', page);
+  SitecoreContext.setKey('api', api);
+  SitecoreContext.setKey('componentMap', componentMap);
+};
+
+export const updateSitecoreDictionary = ({
+  dictionary,
+}: SitecoreDictionarytProps) => {
+  SitecoreContext.setKey('dictionary', dictionary);
+};
+
+export const useSitecore = (): SitecoreContextProps => {
+  return {
+    page: SitecoreContext.get()['page'],
+    api: SitecoreContext.get()['api'],
+  };
+};
+
+export const useComponentMap = (): ComponentMap => {
+  return SitecoreContext.get()['componentMap'];
+};
+
+export const useDictionary = () => {
+  const t = (key: string): string => {
+    const dictionary = SitecoreContext.get()['dictionary'];
+    if (!dictionary) {
+      return key;
+    }
+    return dictionary[key];
+  };
+
+  return t;
+};

package/src/editing/constants.ts

@@ -0,0 +1,8 @@
+export const QUERY_PARAM_VERCEL_PROTECTION_BYPASS = 'x-vercel-protection-bypass';
+export const QUERY_PARAM_VERCEL_SET_BYPASS_COOKIE = 'x-vercel-set-bypass-cookie';
+
+/**
+ * Headers that should be passed along to (Editing Chromes handler) SSR request.
+ * Note these are in lowercase format to match expected `IncomingHttpHeaders`.
+ */
+export const EDITING_PASS_THROUGH_HEADERS = ['authorization', 'cookie'];

package/src/editing/editing-config-middleware.test.ts

@@ -0,0 +1,166 @@
+/* eslint-disable no-unused-expressions */
+import { expect } from 'chai';
+import { EditingConfigMiddleware } from './editing-config-middleware';
+import { QUERY_PARAM_EDITING_SECRET } from '@sitecore-content-sdk/core/editing';
+import { AstroContentSdkComponent } from '../sharedTypes/component-props';
+import { mockRequest as MockRequest, Query } from '../test-data/helpers';
+
+const allowedOrigin = 'https://allowed.com';
+
+const mockRequest = (
+  method: string,
+  query?: Query,
+  headers?: { [key: string]: string }
+) => {
+  return MockRequest({
+    query,
+    method,
+    headers: {
+      origin: allowedOrigin,
+      ...headers,
+    },
+  });
+};
+
+const componentsMap = new Map<string, AstroContentSdkComponent>();
+componentsMap.set('TestComponentOne', () => {});
+componentsMap.set('TestComponentTwo', () => {});
+const metadata = { packages: { testPackageOne: '0.1.1' } };
+
+const expectedResultWithMetadata = {
+  components: ['TestComponentOne', 'TestComponentTwo'],
+  packages: { testPackageOne: '0.1.1' },
+  editMode: 'metadata',
+};
+
+const expectedResultForbidden = {
+  message: 'Missing or invalid editing secret',
+};
+
+describe('EditingConfigMiddleware', () => {
+  const secret = 'jss-editing-secret-mock';
+
+  beforeEach(() => {
+    process.env.SITECORE_EDITING_SECRET = secret;
+    process.env.JSS_ALLOWED_ORIGINS = allowedOrigin;
+  });
+
+  after(() => {
+    delete process.env.SITECORE_EDITING_SECRET;
+    delete process.env.JSS_ALLOWED_ORIGINS;
+  });
+
+  it('should respond with 401 for missing secret', async () => {
+    const key = 'wrongkey';
+    const query = { key } as Query;
+    const req = mockRequest('GET', query);
+
+    const middleware = new EditingConfigMiddleware({
+      components: componentsMap,
+      metadata,
+    });
+    const handler = middleware.getHandler();
+
+    const res = await handler(req);
+
+    const body = await res.json();
+    expect(res.status).to.equal(401);
+    expect(body).to.deep.equal(expectedResultForbidden);
+  });
+
+  it('should stop request and return 401 when CORS match is not met', async () => {
+    const req = mockRequest('GET', {}, { origin: 'https://notallowed.com' });
+    const middleware = new EditingConfigMiddleware({
+      components: componentsMap,
+      metadata,
+    });
+    const handler = middleware.getHandler();
+
+    const res = await handler(req);
+
+    const body = await res.json();
+    expect(res.status).to.equal(401);
+    expect(body).to.deep.equal({ message: 'Invalid origin' });
+  });
+
+  it('should respond with 401 for invalid secret', async () => {
+    const key = 'wrongkey';
+    const query = { key } as Query;
+    query[QUERY_PARAM_EDITING_SECRET] = 'wrongsekret';
+    const req = mockRequest('GET', query);
+
+    const middleware = new EditingConfigMiddleware({
+      components: componentsMap,
+      metadata,
+    });
+    const handler = middleware.getHandler();
+
+    const res = await handler(req);
+
+    const body = await res.json();
+    expect(res.status).to.equal(401);
+    expect(body).to.deep.equal(expectedResultForbidden);
+  });
+
+  it('should respond with 204 for preflight OPTIONS request', async () => {
+    const query = {} as Query;
+    query[QUERY_PARAM_EDITING_SECRET] = secret;
+    const req = mockRequest('OPTIONS', query);
+
+    const middleware = new EditingConfigMiddleware({
+      components: componentsMap,
+      metadata,
+    });
+    const handler = middleware.getHandler();
+
+    const res = await handler(req);
+
+    expect(res.headers.has('Access-Control-Allow-Origin')).to.be.true;
+    expect(res.headers.get('Access-Control-Allow-Origin')).to.equal(
+      allowedOrigin
+    );
+
+    expect(res.headers.has('Access-Control-Allow-Methods')).to.be.true;
+    expect(res.headers.get('Access-Control-Allow-Methods')).to.equal(
+      'GET, POST, OPTIONS, DELETE, PUT, PATCH'
+    );
+
+    expect(res.headers.has('Access-Control-Allow-Headers')).to.be.true;
+    expect(res.headers.get('Access-Control-Allow-Headers')).to.equal(
+      'Content-Type, Authorization'
+    );
+
+    expect(res.status).to.equal(204);
+    expect(res.body).to.equal(null);
+  });
+
+  const testEditingConfig = async (
+    components: Map<string, AstroContentSdkComponent>,
+    expectedResult: {
+      components: string[];
+      packages: { testPackageOne: string };
+      editMode: string;
+    }
+  ) => {
+    const key = 'wrongkey';
+    const query = { key } as Query;
+    query[QUERY_PARAM_EDITING_SECRET] = secret;
+    const req = mockRequest('GET', query);
+    const middleware = new EditingConfigMiddleware({ components, metadata });
+    const handler = middleware.getHandler();
+
+    const res = await handler(req);
+
+    const body = await res.json();
+    expect(res.status).to.equal(200);
+    expect(body).to.deep.equal(expectedResult);
+  };
+
+  it('should respond with 200 and return config data with components array as argument', async () => {
+    await testEditingConfig(componentsMap, expectedResultWithMetadata);
+  });
+
+  it('should respond with 200 and return config data with components map as argument', async () => {
+    await testEditingConfig(componentsMap, expectedResultWithMetadata);
+  });
+});

package/src/editing/editing-config-middleware.ts

@@ -0,0 +1,111 @@
+import {
+  EDITING_ALLOWED_ORIGINS,
+  QUERY_PARAM_EDITING_SECRET,
+} from '@sitecore-content-sdk/core/editing';
+import { debug } from '@sitecore-content-sdk/core';
+import { Metadata } from '@sitecore-content-sdk/core/editing';
+import { getEnforcedCorsHeaders } from '@sitecore-content-sdk/core/utils';
+import { EditMode } from '@sitecore-content-sdk/core/layout';
+import { getEditingSecret } from '../utils';
+import { AstroContentSdkComponent, ComponentMap } from '../sharedTypes/component-props';
+
+export type EditingConfigMiddlewareConfig = {
+  /**
+   * Components available in the application
+   */
+  components: ComponentMap<AstroContentSdkComponent>;
+  /**
+   * Application metadata
+   */
+  metadata: Metadata;
+};
+
+/**
+ * Middleware / handler used in the editing config API route in xmcloud add on (e.g. '/api/editing/config')
+ * provides configuration information to determine feature compatibility on Pages side.
+ */
+export class EditingConfigMiddleware {
+  /**
+   * @param {EditingConfigMiddlewareConfig} [config] Editing configuration middleware config
+   */
+  constructor(protected config: EditingConfigMiddlewareConfig) {}
+
+  /**
+   * Gets the API route handler
+   * @returns middleware handler
+   */
+  public getHandler(): (req: Request) => Promise<Response> {
+    return this.handler;
+  }
+
+  private handler = async (_req: Request): Promise<Response> => {
+    const url = new URL(_req.url.toLowerCase());
+    const secret = url.searchParams.get(QUERY_PARAM_EDITING_SECRET);
+
+    const _res = new Response();
+    _res.headers.append('content-type', 'application/json; charset=utf-8');
+
+    const corsHeaders = getEnforcedCorsHeaders({
+      requestMethod: _req.method,
+      headers: _req.headers,
+      allowedOrigins: EDITING_ALLOWED_ORIGINS,
+    });
+
+    if (!corsHeaders) {
+      debug.editing(
+        'invalid origin host - set allowed origins in JSS_ALLOWED_ORIGINS environment variable'
+      );
+
+      return new Response(
+        JSON.stringify({
+          message: 'Invalid origin',
+        }),
+        {
+          status: 401,
+        }
+      );
+    }
+
+    Object.keys(corsHeaders).forEach((key) => {
+      _res.headers.append(key, corsHeaders[key]);
+    });
+
+    if (secret !== getEditingSecret()) {
+      debug.editing('invalid editing secret - sent "%s" expected "%s"', secret, getEditingSecret());
+
+      return new Response(
+        JSON.stringify({
+          message: 'Missing or invalid editing secret',
+        }),
+        {
+          status: 401,
+          headers: _res.headers,
+        }
+      );
+    }
+
+    // Handle preflight request
+    if (_req.method === 'OPTIONS') {
+      debug.editing('preflight request');
+
+      // CORS headers are set by enforceCors
+      return new Response(null, {
+        status: 204,
+        headers: _res.headers,
+      });
+    }
+
+    const components = Array.from(this.config.components.keys());
+
+    return new Response(
+      JSON.stringify({
+        components,
+        packages: this.config.metadata.packages,
+        editMode: EditMode.Metadata,
+      }),
+      {
+        headers: _res.headers,
+      }
+    );
+  };
+}