@sitecore-jss/sitecore-jss-dev-tools 21.2.0-canary.34 → 21.2.0-canary.36

package/dist/cjs/templating/nextjs/generate-component-builder.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.writeComponentBuilder = exports.watchComponentBuilder = exports.generateComponentBuilder = void 0;
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const component_builder_1 = require("./templates/component-builder");
+const components_1 = require("../components");
+const utils_1 = require("../utils");
+// Default destination path for component builder
+const defaultComponentBuilderOutputPath = 'src/temp/componentBuilder.ts';
+const defaultComponentRootPath = 'src/components';
+/**
+ * Generate component builder based on provided settings
+ * @param {Object} [settings] settings for component builder generation
+ * @param {string} [settings.componentRootPath] path to components root
+ * @param {string} [settings.componentBuilderOutputPath] path to component builder output
+ * @param {PackageDefinition[]} [settings.packages] list of packages to include in component builder
+ * @param {boolean} [settings.watch] whether to watch for changes to component builder sources
+ */
+function generateComponentBuilder({ componentRootPath = defaultComponentRootPath, componentBuilderOutputPath = defaultComponentBuilderOutputPath, packages = [], watch, } = {}) {
+    if (watch) {
+        watchComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages });
+    }
+    else {
+        writeComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages });
+    }
+}
+exports.generateComponentBuilder = generateComponentBuilder;
+/**
+ * Watch for changes to component builder sources
+ * @param {Object} settings settings for component builder generation
+ * @param {string} settings.componentRootPath path to components root
+ * @param {string} settings.componentBuilderOutputPath path to component builder output
+ * @param {PackageDefinition[]} settings.packages list of packages to include in component builder
+ */
+function watchComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages, }) {
+    console.log(`Watching for changes to component builder sources in ${componentRootPath}...`);
+    (0, utils_1.watchItems)([componentRootPath], writeComponentBuilder.bind(null, { componentRootPath, componentBuilderOutputPath, packages }));
+}
+exports.watchComponentBuilder = watchComponentBuilder;
+/**
+ * Write component builder to file
+ * @param {Object} settings settings for component builder generation
+ * @param {string} settings.componentRootPath path to components root
+ * @param {string} settings.componentBuilderOutputPath path to component builder output
+ * @param {PackageDefinition[]} settings.packages list of packages to include in component builder
+ */
+function writeComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages, }) {
+    const components = (0, components_1.getComponentList)(componentRootPath);
+    components.unshift(...packages);
+    const componentBuilderPath = path_1.default.resolve(componentBuilderOutputPath);
+    const fileContent = (0, component_builder_1.getComponentBuilderTemplate)(components);
+    console.log(`Writing component builder to ${componentBuilderPath}`);
+    fs_1.default.writeFileSync(componentBuilderPath, fileContent, {
+        encoding: 'utf8',
+    });
+}
+exports.writeComponentBuilder = writeComponentBuilder;

package/dist/cjs/templating/nextjs/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponentBuilderTemplate = exports.generateComponentBuilder = void 0;
+var generate_component_builder_1 = require("./generate-component-builder");
+Object.defineProperty(exports, "generateComponentBuilder", { enumerable: true, get: function () { return generate_component_builder_1.generateComponentBuilder; } });
+var component_builder_1 = require("./templates/component-builder");
+Object.defineProperty(exports, "getComponentBuilderTemplate", { enumerable: true, get: function () { return component_builder_1.getComponentBuilderTemplate; } });

package/dist/cjs/templating/nextjs/templates/component-builder.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponentBuilderTemplate = void 0;
+const isLazyLoadingModule = (componentPath) => componentPath.includes('.dynamic');
+const removeDynamicModuleNameEnding = (moduleName) => moduleName.replace(/\.?dynamic$/i, '');
+/**
+ * Generate component builder template
+ * @param {(PackageDefinition | ComponentFile)[]} components components to include in component builder
+ * @returns generated component builder template
+ */
+const getComponentBuilderTemplate = (components) => {
+    const componentFiles = components.filter((component) => component.componentName);
+    const packages = components.filter((component) => component.components);
+    const hasLazyModules = componentFiles.find((component) => isLazyLoadingModule(component.path));
+    return `/* eslint-disable */
+// Do not edit this file, it is auto-generated at build time!
+// See scripts/generate-component-builder/index.ts to modify the generation of this file.
+
+${hasLazyModules ? "import dynamic from 'next/dynamic';" : ''}
+import { ComponentBuilder } from '@sitecore-jss/sitecore-jss-nextjs';
+
+${packages.map((pkg) => {
+        const list = pkg.components.map((c) => c.moduleName).join(', ');
+        return `import { ${list} } from '${pkg.name}'`;
+    })}
+${componentFiles
+        .map((component) => {
+        if (isLazyLoadingModule(component.path)) {
+            const moduleName = removeDynamicModuleNameEnding(component.moduleName);
+            return `const ${moduleName} = {
+  module: () => import('${component.path}'),
+  element: (isEditing?: boolean) => isEditing ? require('${component.path}')?.default : dynamic(${moduleName}.module)
+}`;
+        }
+        return `import * as ${component.moduleName} from '${component.path}';`;
+    })
+        .join('\n')}
+
+const components = new Map();
+${packages.map((p) => p.components.map((component) => `components.set('${component.componentName}', ${component.moduleName})`))}
+${componentFiles
+        .map((component) => `components.set('${isLazyLoadingModule(component.path)
+        ? removeDynamicModuleNameEnding(component.componentName)
+        : component.componentName}', ${isLazyLoadingModule(component.path)
+        ? removeDynamicModuleNameEnding(component.moduleName)
+        : component.moduleName});`)
+        .join('\n')}
+
+export const componentBuilder = new ComponentBuilder({ components });
+
+export const moduleFactory = componentBuilder.getModuleFactory();
+`;
+};
+exports.getComponentBuilderTemplate = getComponentBuilderTemplate;

package/dist/cjs/templating/plugins.js

@@ -23,17 +23,19 @@ var ModuleType;
  *   name: 'fooPlugin'
  * }
  * @example getPluginList('src/foo/plugins', 'Foo')
- * @param {string} path path to get plugin from
- * @param {string} pluginName plugin name
+ * @param {Object} definition plugin definition
+ * @param {string} definition.path path to get plugin from
+ * @param {string} definition.pluginName plugin name
+ * @param {boolean} [definition.silent] whether to suppress console output
  */
-function getPluginList(path, pluginName) {
+function getPluginList({ path, pluginName, silent = false, }) {
     const plugins = (0, utils_1.getItems)({
         path,
         resolveItem: (path, name) => ({
             path: `${path}/${name}`,
             name: `${name.replace(/-./g, (x) => x[1].toUpperCase())}Plugin`,
         }),
-        cb: (name) => console.debug(`Registering ${pluginName} plugin ${name}`),
+        cb: (name) => !silent && console.debug(`Registering ${pluginName} plugin ${name}`),
     });
     return plugins;
 }
@@ -45,17 +47,13 @@ exports.getPluginList = getPluginList;
  * CJS: exports.fooPlugin = require('{pluginPath}');
  * ESM: export { fooPlugin } from '{pluginPath}';
  * @example generatePlugins({ distPath: 'src/temp/foo-plugins.js', rootPath: 'src/foo/plugins', moduleType: ModuleType.CJS })
- * @param {Object} definition plugin definition
- * @param {string} definition.distPath path to write plugins to
- * @param {string} definition.rootPath plugin source path
- * @param {string} definition.moduleType module type: CJS or ESM
- * @param {boolean} [definition.relative] whether to use relative paths in the generated file. By default, absolute paths are used.
+ * @param {PluginDefinition} definition plugin definition
  */
 function generatePlugins(definition) {
-    const { rootPath, distPath, moduleType, relative = true } = definition;
+    const { rootPath, distPath, moduleType, relative = false, silent } = definition;
     const segments = rootPath.split('/');
     const pluginName = segments[segments.length - 2];
-    const plugins = getPluginList(rootPath, pluginName);
+    const plugins = getPluginList({ path: rootPath, pluginName, silent });
     let fileContent = '';
     fileContent = plugins
         .map((plugin) => {
@@ -72,7 +70,7 @@ function generatePlugins(definition) {
         fileContent = moduleType === ModuleType.CJS ? 'module.exports = {};\r\n' : 'export {};\r\n';
     }
     const filePath = path_1.default.resolve(distPath);
-    console.log(`Writing ${pluginName} plugins to ${filePath}`);
+    !silent && console.log(`Writing ${pluginName} plugins to ${filePath}`);
     fs_1.default.writeFileSync(filePath, fileContent, {
         encoding: 'utf8',
     });

package/dist/cjs/templating/react/templates/component-builder.js

@@ -7,7 +7,7 @@ exports.getComponentBuilderTemplate = void 0;
 const path_1 = __importDefault(require("path"));
 /**
  * Generate component builder template
- * @param {(PackageDefinition | ComponentFile)[]}components components to include in component builder
+ * @param {(PackageDefinition | ComponentFile)[]} components components to include in component builder
  * @param {string} distPath destination path for component builder
  * @returns generated component builder template
  */

package/dist/esm/templating/nextjs/generate-component-builder.js

@@ -0,0 +1,52 @@
+import path from 'path';
+import fs from 'fs';
+import { getComponentBuilderTemplate } from './templates/component-builder';
+import { getComponentList } from '../components';
+import { watchItems } from '../utils';
+// Default destination path for component builder
+const defaultComponentBuilderOutputPath = 'src/temp/componentBuilder.ts';
+const defaultComponentRootPath = 'src/components';
+/**
+ * Generate component builder based on provided settings
+ * @param {Object} [settings] settings for component builder generation
+ * @param {string} [settings.componentRootPath] path to components root
+ * @param {string} [settings.componentBuilderOutputPath] path to component builder output
+ * @param {PackageDefinition[]} [settings.packages] list of packages to include in component builder
+ * @param {boolean} [settings.watch] whether to watch for changes to component builder sources
+ */
+export function generateComponentBuilder({ componentRootPath = defaultComponentRootPath, componentBuilderOutputPath = defaultComponentBuilderOutputPath, packages = [], watch, } = {}) {
+    if (watch) {
+        watchComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages });
+    }
+    else {
+        writeComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages });
+    }
+}
+/**
+ * Watch for changes to component builder sources
+ * @param {Object} settings settings for component builder generation
+ * @param {string} settings.componentRootPath path to components root
+ * @param {string} settings.componentBuilderOutputPath path to component builder output
+ * @param {PackageDefinition[]} settings.packages list of packages to include in component builder
+ */
+export function watchComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages, }) {
+    console.log(`Watching for changes to component builder sources in ${componentRootPath}...`);
+    watchItems([componentRootPath], writeComponentBuilder.bind(null, { componentRootPath, componentBuilderOutputPath, packages }));
+}
+/**
+ * Write component builder to file
+ * @param {Object} settings settings for component builder generation
+ * @param {string} settings.componentRootPath path to components root
+ * @param {string} settings.componentBuilderOutputPath path to component builder output
+ * @param {PackageDefinition[]} settings.packages list of packages to include in component builder
+ */
+export function writeComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages, }) {
+    const components = getComponentList(componentRootPath);
+    components.unshift(...packages);
+    const componentBuilderPath = path.resolve(componentBuilderOutputPath);
+    const fileContent = getComponentBuilderTemplate(components);
+    console.log(`Writing component builder to ${componentBuilderPath}`);
+    fs.writeFileSync(componentBuilderPath, fileContent, {
+        encoding: 'utf8',
+    });
+}

package/dist/esm/templating/nextjs/index.js

@@ -0,0 +1,2 @@
+export { generateComponentBuilder } from './generate-component-builder';
+export { getComponentBuilderTemplate } from './templates/component-builder';

package/dist/esm/templating/nextjs/templates/component-builder.js

@@ -0,0 +1,50 @@
+const isLazyLoadingModule = (componentPath) => componentPath.includes('.dynamic');
+const removeDynamicModuleNameEnding = (moduleName) => moduleName.replace(/\.?dynamic$/i, '');
+/**
+ * Generate component builder template
+ * @param {(PackageDefinition | ComponentFile)[]} components components to include in component builder
+ * @returns generated component builder template
+ */
+export const getComponentBuilderTemplate = (components) => {
+    const componentFiles = components.filter((component) => component.componentName);
+    const packages = components.filter((component) => component.components);
+    const hasLazyModules = componentFiles.find((component) => isLazyLoadingModule(component.path));
+    return `/* eslint-disable */
+// Do not edit this file, it is auto-generated at build time!
+// See scripts/generate-component-builder/index.ts to modify the generation of this file.
+
+${hasLazyModules ? "import dynamic from 'next/dynamic';" : ''}
+import { ComponentBuilder } from '@sitecore-jss/sitecore-jss-nextjs';
+
+${packages.map((pkg) => {
+        const list = pkg.components.map((c) => c.moduleName).join(', ');
+        return `import { ${list} } from '${pkg.name}'`;
+    })}
+${componentFiles
+        .map((component) => {
+        if (isLazyLoadingModule(component.path)) {
+            const moduleName = removeDynamicModuleNameEnding(component.moduleName);
+            return `const ${moduleName} = {
+  module: () => import('${component.path}'),
+  element: (isEditing?: boolean) => isEditing ? require('${component.path}')?.default : dynamic(${moduleName}.module)
+}`;
+        }
+        return `import * as ${component.moduleName} from '${component.path}';`;
+    })
+        .join('\n')}
+
+const components = new Map();
+${packages.map((p) => p.components.map((component) => `components.set('${component.componentName}', ${component.moduleName})`))}
+${componentFiles
+        .map((component) => `components.set('${isLazyLoadingModule(component.path)
+        ? removeDynamicModuleNameEnding(component.componentName)
+        : component.componentName}', ${isLazyLoadingModule(component.path)
+        ? removeDynamicModuleNameEnding(component.moduleName)
+        : component.moduleName});`)
+        .join('\n')}
+
+export const componentBuilder = new ComponentBuilder({ components });
+
+export const moduleFactory = componentBuilder.getModuleFactory();
+`;
+};

package/dist/esm/templating/plugins.js

@@ -17,17 +17,19 @@ export var ModuleType;
  *   name: 'fooPlugin'
  * }
  * @example getPluginList('src/foo/plugins', 'Foo')
- * @param {string} path path to get plugin from
- * @param {string} pluginName plugin name
+ * @param {Object} definition plugin definition
+ * @param {string} definition.path path to get plugin from
+ * @param {string} definition.pluginName plugin name
+ * @param {boolean} [definition.silent] whether to suppress console output
  */
-export function getPluginList(path, pluginName) {
+export function getPluginList({ path, pluginName, silent = false, }) {
     const plugins = getItems({
         path,
         resolveItem: (path, name) => ({
             path: `${path}/${name}`,
             name: `${name.replace(/-./g, (x) => x[1].toUpperCase())}Plugin`,
         }),
-        cb: (name) => console.debug(`Registering ${pluginName} plugin ${name}`),
+        cb: (name) => !silent && console.debug(`Registering ${pluginName} plugin ${name}`),
     });
     return plugins;
 }
@@ -38,17 +40,13 @@ export function getPluginList(path, pluginName) {
  * CJS: exports.fooPlugin = require('{pluginPath}');
  * ESM: export { fooPlugin } from '{pluginPath}';
  * @example generatePlugins({ distPath: 'src/temp/foo-plugins.js', rootPath: 'src/foo/plugins', moduleType: ModuleType.CJS })
- * @param {Object} definition plugin definition
- * @param {string} definition.distPath path to write plugins to
- * @param {string} definition.rootPath plugin source path
- * @param {string} definition.moduleType module type: CJS or ESM
- * @param {boolean} [definition.relative] whether to use relative paths in the generated file. By default, absolute paths are used.
+ * @param {PluginDefinition} definition plugin definition
  */
 export function generatePlugins(definition) {
-    const { rootPath, distPath, moduleType, relative = true } = definition;
+    const { rootPath, distPath, moduleType, relative = false, silent } = definition;
     const segments = rootPath.split('/');
     const pluginName = segments[segments.length - 2];
-    const plugins = getPluginList(rootPath, pluginName);
+    const plugins = getPluginList({ path: rootPath, pluginName, silent });
     let fileContent = '';
     fileContent = plugins
         .map((plugin) => {
@@ -65,7 +63,7 @@ export function generatePlugins(definition) {
         fileContent = moduleType === ModuleType.CJS ? 'module.exports = {};\r\n' : 'export {};\r\n';
     }
     const filePath = path.resolve(distPath);
-    console.log(`Writing ${pluginName} plugins to ${filePath}`);
+    !silent && console.log(`Writing ${pluginName} plugins to ${filePath}`);
     fs.writeFileSync(filePath, fileContent, {
         encoding: 'utf8',
     });

package/dist/esm/templating/react/templates/component-builder.js

@@ -1,7 +1,7 @@
 import path from 'path';
 /**
  * Generate component builder template
- * @param {(PackageDefinition | ComponentFile)[]}components components to include in component builder
+ * @param {(PackageDefinition | ComponentFile)[]} components components to include in component builder
  * @param {string} distPath destination path for component builder
  * @returns generated component builder template
  */

package/nextjs.d.ts

@@ -0,0 +1 @@
+export * from './types/templating/nextjs/index';

package/nextjs.js

@@ -0,0 +1,3 @@
+const templating = require('./dist/cjs/templating/nextjs/index');
+
+module.exports = { ...templating };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-dev-tools",
-  "version": "21.2.0-canary.34",
+  "version": "21.2.0-canary.36",
   "description": "Utilities to assist in the development and deployment of Sitecore JSS apps.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -33,7 +33,7 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^21.2.0-canary.34",
+    "@sitecore-jss/sitecore-jss": "^21.2.0-canary.36",
     "axios": "^1.3.2",
     "chalk": "^4.1.2",
     "chokidar": "^3.5.3",
@@ -84,7 +84,7 @@
     "typescript": "~4.9.5"
   },
   "types": "types/index.d.ts",
-  "gitHead": "e73944adcc1dee36014b734eaa6bea2d3c68b437",
+  "gitHead": "a37e8ba8b467c29b9c8c8c1aca111ca673d66b04",
   "files": [
     "dist",
     "types",

package/types/templating/nextjs/generate-component-builder.d.ts

@@ -0,0 +1,39 @@
+import { PackageDefinition } from '../components';
+/**
+ * Generate component builder based on provided settings
+ * @param {Object} [settings] settings for component builder generation
+ * @param {string} [settings.componentRootPath] path to components root
+ * @param {string} [settings.componentBuilderOutputPath] path to component builder output
+ * @param {PackageDefinition[]} [settings.packages] list of packages to include in component builder
+ * @param {boolean} [settings.watch] whether to watch for changes to component builder sources
+ */
+export declare function generateComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages, watch, }?: {
+    componentRootPath?: string;
+    componentBuilderOutputPath?: string;
+    packages?: PackageDefinition[];
+    watch?: boolean;
+}): void;
+/**
+ * Watch for changes to component builder sources
+ * @param {Object} settings settings for component builder generation
+ * @param {string} settings.componentRootPath path to components root
+ * @param {string} settings.componentBuilderOutputPath path to component builder output
+ * @param {PackageDefinition[]} settings.packages list of packages to include in component builder
+ */
+export declare function watchComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages, }: {
+    componentRootPath: string;
+    componentBuilderOutputPath: string;
+    packages: PackageDefinition[];
+}): void;
+/**
+ * Write component builder to file
+ * @param {Object} settings settings for component builder generation
+ * @param {string} settings.componentRootPath path to components root
+ * @param {string} settings.componentBuilderOutputPath path to component builder output
+ * @param {PackageDefinition[]} settings.packages list of packages to include in component builder
+ */
+export declare function writeComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages, }: {
+    componentRootPath: string;
+    componentBuilderOutputPath: string;
+    packages: PackageDefinition[];
+}): void;

package/types/templating/nextjs/index.d.ts

@@ -0,0 +1,2 @@
+export { generateComponentBuilder } from './generate-component-builder';
+export { getComponentBuilderTemplate } from './templates/component-builder';

package/types/templating/nextjs/templates/component-builder.d.ts

@@ -0,0 +1,7 @@
+import { ComponentFile, PackageDefinition } from '../../components';
+/**
+ * Generate component builder template
+ * @param {(PackageDefinition | ComponentFile)[]} components components to include in component builder
+ * @returns generated component builder template
+ */
+export declare const getComponentBuilderTemplate: (components: (PackageDefinition | ComponentFile)[]) => string;

package/types/templating/plugins.d.ts

@@ -29,9 +29,13 @@ export interface PluginDefinition {
      */
     moduleType: ModuleType;
     /**
-     * whether to use relative or absolute paths in the generated file. By default, relative paths are used.
+     * whether to use relative or absolute paths in the generated file. By default, absolute paths are used.
      */
     relative?: boolean;
+    /**
+     * whether to suppress console output
+     */
+    silent?: boolean;
 }
 /**
  * Get list of plugins from @var path
@@ -41,10 +45,16 @@ export interface PluginDefinition {
  *   name: 'fooPlugin'
  * }
  * @example getPluginList('src/foo/plugins', 'Foo')
- * @param {string} path path to get plugin from
- * @param {string} pluginName plugin name
+ * @param {Object} definition plugin definition
+ * @param {string} definition.path path to get plugin from
+ * @param {string} definition.pluginName plugin name
+ * @param {boolean} [definition.silent] whether to suppress console output
  */
-export declare function getPluginList(path: string, pluginName: string): PluginFile[];
+export declare function getPluginList({ path, pluginName, silent, }: {
+    path: string;
+    pluginName: string;
+    silent?: boolean;
+}): PluginFile[];
 /**
  * Generates the plugins file and saves it to the filesystem.
  * By convention, we expect to find plugins under {pluginName}/plugins/** (subfolders are searched recursively).
@@ -52,10 +62,6 @@ export declare function getPluginList(path: string, pluginName: string): PluginF
  * CJS: exports.fooPlugin = require('{pluginPath}');
  * ESM: export { fooPlugin } from '{pluginPath}';
  * @example generatePlugins({ distPath: 'src/temp/foo-plugins.js', rootPath: 'src/foo/plugins', moduleType: ModuleType.CJS })
- * @param {Object} definition plugin definition
- * @param {string} definition.distPath path to write plugins to
- * @param {string} definition.rootPath plugin source path
- * @param {string} definition.moduleType module type: CJS or ESM
- * @param {boolean} [definition.relative] whether to use relative paths in the generated file. By default, absolute paths are used.
+ * @param {PluginDefinition} definition plugin definition
  */
 export declare function generatePlugins(definition: PluginDefinition): void;

package/types/templating/react/templates/component-builder.d.ts

@@ -1,7 +1,7 @@
 import { ComponentFile, PackageDefinition } from '../../components';
 /**
  * Generate component builder template
- * @param {(PackageDefinition | ComponentFile)[]}components components to include in component builder
+ * @param {(PackageDefinition | ComponentFile)[]} components components to include in component builder
  * @param {string} distPath destination path for component builder
  * @returns generated component builder template
  */