@sitecore-jss/sitecore-jss-dev-tools 21.2.0-canary.9 → 21.3.0-canary.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +2 -3
- package/dist/cjs/templating/components.js +27 -0
- package/dist/cjs/templating/index.js +10 -0
- package/dist/cjs/templating/nextjs/generate-component-builder.js +61 -0
- package/dist/cjs/templating/nextjs/index.js +7 -0
- package/dist/cjs/templating/nextjs/templates/component-builder.js +54 -0
- package/dist/cjs/templating/plugins.js +78 -0
- package/dist/cjs/templating/react/generate-component-builder.js +56 -0
- package/dist/cjs/templating/react/index.js +7 -0
- package/dist/cjs/templating/react/templates/component-builder.js +48 -0
- package/dist/cjs/templating/scaffold.js +38 -0
- package/dist/cjs/templating/utils.js +56 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/templating/components.js +23 -0
- package/dist/esm/templating/index.js +3 -0
- package/dist/esm/templating/nextjs/generate-component-builder.js +52 -0
- package/dist/esm/templating/nextjs/index.js +2 -0
- package/dist/esm/templating/nextjs/templates/component-builder.js +50 -0
- package/dist/esm/templating/plugins.js +70 -0
- package/dist/esm/templating/react/generate-component-builder.js +47 -0
- package/dist/esm/templating/react/index.js +2 -0
- package/dist/esm/templating/react/templates/component-builder.js +41 -0
- package/dist/esm/templating/scaffold.js +30 -0
- package/dist/esm/templating/utils.js +48 -0
- package/nextjs.d.ts +1 -0
- package/nextjs.js +3 -0
- package/package.json +6 -4
- package/react.d.ts +1 -0
- package/react.js +3 -0
- package/types/index.d.ts +1 -1
- package/types/templating/components.d.ts +29 -0
- package/types/templating/index.d.ts +4 -0
- package/types/templating/nextjs/generate-component-builder.d.ts +39 -0
- package/types/templating/nextjs/index.d.ts +2 -0
- package/types/templating/nextjs/templates/component-builder.d.ts +7 -0
- package/types/templating/plugins.d.ts +67 -0
- package/types/templating/react/generate-component-builder.d.ts +25 -0
- package/types/templating/react/index.d.ts +2 -0
- package/types/templating/react/templates/component-builder.d.ts +8 -0
- package/types/templating/scaffold.d.ts +15 -0
- package/types/templating/utils.d.ts +38 -0
package/dist/cjs/index.js
CHANGED
|
@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.
|
|
17
|
+
exports.resolveScJssConfig = exports.createDefaultDisconnectedServer = exports.createDefaultDocumentMiddleware = exports.createDisconnectedDictionaryService = exports.createDisconnectedLayoutService = exports.createDisconnectedAssetMiddleware = exports.packageGenerate = exports.packageDeploy = exports.clean = exports.deploy = exports.mergeFs = exports.verifySetup = exports.userConfigPath = exports.setup = exports.replaceConfigTokens = void 0;
|
|
18
18
|
var jss_config_1 = require("./setup/jss-config");
|
|
19
19
|
Object.defineProperty(exports, "replaceConfigTokens", { enumerable: true, get: function () { return jss_config_1.replaceConfigTokens; } });
|
|
20
20
|
var setup_1 = require("./setup/setup");
|
|
@@ -44,8 +44,7 @@ var create_default_disconnected_server_1 = require("./disconnected-server/create
|
|
|
44
44
|
Object.defineProperty(exports, "createDefaultDisconnectedServer", { enumerable: true, get: function () { return create_default_disconnected_server_1.createDefaultDisconnectedServer; } });
|
|
45
45
|
var resolve_scjssconfig_1 = require("./resolve-scjssconfig");
|
|
46
46
|
Object.defineProperty(exports, "resolveScJssConfig", { enumerable: true, get: function () { return resolve_scjssconfig_1.resolveScJssConfig; } });
|
|
47
|
-
|
|
48
|
-
Object.defineProperty(exports, "strip", { enumerable: true, get: function () { return strip_1.strip; } });
|
|
47
|
+
__exportStar(require("./templating"), exports);
|
|
49
48
|
__exportStar(require("./manifest"), exports);
|
|
50
49
|
__exportStar(require("./pipelines"), exports);
|
|
51
50
|
__exportStar(require("./update"), exports);
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getComponentList = void 0;
|
|
4
|
+
const utils_1 = require("./utils");
|
|
5
|
+
/**
|
|
6
|
+
* Get list of components from @var path
|
|
7
|
+
* Returns a list of components in the following format:
|
|
8
|
+
* {
|
|
9
|
+
* path: 'path/to/component',
|
|
10
|
+
* componentName: 'ComponentName',
|
|
11
|
+
* moduleName: 'ComponentName'
|
|
12
|
+
* }
|
|
13
|
+
* @param {string} path path to search
|
|
14
|
+
*/
|
|
15
|
+
function getComponentList(path) {
|
|
16
|
+
const components = (0, utils_1.getItems)({
|
|
17
|
+
path,
|
|
18
|
+
resolveItem: (path, name) => ({
|
|
19
|
+
path: `${path}/${name}`,
|
|
20
|
+
componentName: name,
|
|
21
|
+
moduleName: name.replace(/[^\w]+/g, ''),
|
|
22
|
+
}),
|
|
23
|
+
cb: (name) => console.debug(`Registering JSS component ${name}`),
|
|
24
|
+
});
|
|
25
|
+
return components;
|
|
26
|
+
}
|
|
27
|
+
exports.getComponentList = getComponentList;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.strip = exports.scaffoldFile = exports.ModuleType = exports.generatePlugins = void 0;
|
|
4
|
+
var plugins_1 = require("./plugins");
|
|
5
|
+
Object.defineProperty(exports, "generatePlugins", { enumerable: true, get: function () { return plugins_1.generatePlugins; } });
|
|
6
|
+
Object.defineProperty(exports, "ModuleType", { enumerable: true, get: function () { return plugins_1.ModuleType; } });
|
|
7
|
+
var scaffold_1 = require("./scaffold");
|
|
8
|
+
Object.defineProperty(exports, "scaffoldFile", { enumerable: true, get: function () { return scaffold_1.scaffoldFile; } });
|
|
9
|
+
var strip_1 = require("./strip");
|
|
10
|
+
Object.defineProperty(exports, "strip", { enumerable: true, get: function () { return strip_1.strip; } });
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.writeComponentBuilder = exports.watchComponentBuilder = exports.generateComponentBuilder = void 0;
|
|
7
|
+
const path_1 = __importDefault(require("path"));
|
|
8
|
+
const fs_1 = __importDefault(require("fs"));
|
|
9
|
+
const component_builder_1 = require("./templates/component-builder");
|
|
10
|
+
const components_1 = require("../components");
|
|
11
|
+
const utils_1 = require("../utils");
|
|
12
|
+
// Default destination path for component builder
|
|
13
|
+
const defaultComponentBuilderOutputPath = 'src/temp/componentBuilder.ts';
|
|
14
|
+
const defaultComponentRootPath = 'src/components';
|
|
15
|
+
/**
|
|
16
|
+
* Generate component builder based on provided settings
|
|
17
|
+
* @param {Object} [settings] settings for component builder generation
|
|
18
|
+
* @param {string} [settings.componentRootPath] path to components root
|
|
19
|
+
* @param {string} [settings.componentBuilderOutputPath] path to component builder output
|
|
20
|
+
* @param {PackageDefinition[]} [settings.packages] list of packages to include in component builder
|
|
21
|
+
* @param {boolean} [settings.watch] whether to watch for changes to component builder sources
|
|
22
|
+
*/
|
|
23
|
+
function generateComponentBuilder({ componentRootPath = defaultComponentRootPath, componentBuilderOutputPath = defaultComponentBuilderOutputPath, packages = [], watch, } = {}) {
|
|
24
|
+
if (watch) {
|
|
25
|
+
watchComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages });
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
writeComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages });
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
exports.generateComponentBuilder = generateComponentBuilder;
|
|
32
|
+
/**
|
|
33
|
+
* Watch for changes to component builder sources
|
|
34
|
+
* @param {Object} settings settings for component builder generation
|
|
35
|
+
* @param {string} settings.componentRootPath path to components root
|
|
36
|
+
* @param {string} settings.componentBuilderOutputPath path to component builder output
|
|
37
|
+
* @param {PackageDefinition[]} settings.packages list of packages to include in component builder
|
|
38
|
+
*/
|
|
39
|
+
function watchComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages, }) {
|
|
40
|
+
console.log(`Watching for changes to component builder sources in ${componentRootPath}...`);
|
|
41
|
+
(0, utils_1.watchItems)([componentRootPath], writeComponentBuilder.bind(null, { componentRootPath, componentBuilderOutputPath, packages }));
|
|
42
|
+
}
|
|
43
|
+
exports.watchComponentBuilder = watchComponentBuilder;
|
|
44
|
+
/**
|
|
45
|
+
* Write component builder to file
|
|
46
|
+
* @param {Object} settings settings for component builder generation
|
|
47
|
+
* @param {string} settings.componentRootPath path to components root
|
|
48
|
+
* @param {string} settings.componentBuilderOutputPath path to component builder output
|
|
49
|
+
* @param {PackageDefinition[]} settings.packages list of packages to include in component builder
|
|
50
|
+
*/
|
|
51
|
+
function writeComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages, }) {
|
|
52
|
+
const components = (0, components_1.getComponentList)(componentRootPath);
|
|
53
|
+
components.unshift(...packages);
|
|
54
|
+
const componentBuilderPath = path_1.default.resolve(componentBuilderOutputPath);
|
|
55
|
+
const fileContent = (0, component_builder_1.getComponentBuilderTemplate)(components);
|
|
56
|
+
console.log(`Writing component builder to ${componentBuilderPath}`);
|
|
57
|
+
fs_1.default.writeFileSync(componentBuilderPath, fileContent, {
|
|
58
|
+
encoding: 'utf8',
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
exports.writeComponentBuilder = writeComponentBuilder;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getComponentBuilderTemplate = exports.generateComponentBuilder = void 0;
|
|
4
|
+
var generate_component_builder_1 = require("./generate-component-builder");
|
|
5
|
+
Object.defineProperty(exports, "generateComponentBuilder", { enumerable: true, get: function () { return generate_component_builder_1.generateComponentBuilder; } });
|
|
6
|
+
var component_builder_1 = require("./templates/component-builder");
|
|
7
|
+
Object.defineProperty(exports, "getComponentBuilderTemplate", { enumerable: true, get: function () { return component_builder_1.getComponentBuilderTemplate; } });
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getComponentBuilderTemplate = void 0;
|
|
4
|
+
const isLazyLoadingModule = (componentPath) => componentPath.includes('.dynamic');
|
|
5
|
+
const removeDynamicModuleNameEnding = (moduleName) => moduleName.replace(/\.?dynamic$/i, '');
|
|
6
|
+
/**
|
|
7
|
+
* Generate component builder template
|
|
8
|
+
* @param {(PackageDefinition | ComponentFile)[]} components components to include in component builder
|
|
9
|
+
* @returns generated component builder template
|
|
10
|
+
*/
|
|
11
|
+
const getComponentBuilderTemplate = (components) => {
|
|
12
|
+
const componentFiles = components.filter((component) => component.componentName);
|
|
13
|
+
const packages = components.filter((component) => component.components);
|
|
14
|
+
const hasLazyModules = componentFiles.find((component) => isLazyLoadingModule(component.path));
|
|
15
|
+
return `/* eslint-disable */
|
|
16
|
+
// Do not edit this file, it is auto-generated at build time!
|
|
17
|
+
// See scripts/generate-component-builder/index.ts to modify the generation of this file.
|
|
18
|
+
|
|
19
|
+
${hasLazyModules ? "import dynamic from 'next/dynamic';" : ''}
|
|
20
|
+
import { ComponentBuilder } from '@sitecore-jss/sitecore-jss-nextjs';
|
|
21
|
+
|
|
22
|
+
${packages.map((pkg) => {
|
|
23
|
+
const list = pkg.components.map((c) => c.moduleName).join(', ');
|
|
24
|
+
return `import { ${list} } from '${pkg.name}'`;
|
|
25
|
+
})}
|
|
26
|
+
${componentFiles
|
|
27
|
+
.map((component) => {
|
|
28
|
+
if (isLazyLoadingModule(component.path)) {
|
|
29
|
+
const moduleName = removeDynamicModuleNameEnding(component.moduleName);
|
|
30
|
+
return `const ${moduleName} = {
|
|
31
|
+
module: () => import('${component.path}'),
|
|
32
|
+
element: (isEditing?: boolean) => isEditing ? require('${component.path}')?.default : dynamic(${moduleName}.module)
|
|
33
|
+
}`;
|
|
34
|
+
}
|
|
35
|
+
return `import * as ${component.moduleName} from '${component.path}';`;
|
|
36
|
+
})
|
|
37
|
+
.join('\n')}
|
|
38
|
+
|
|
39
|
+
const components = new Map();
|
|
40
|
+
${packages.map((p) => p.components.map((component) => `components.set('${component.componentName}', ${component.moduleName})`))}
|
|
41
|
+
${componentFiles
|
|
42
|
+
.map((component) => `components.set('${isLazyLoadingModule(component.path)
|
|
43
|
+
? removeDynamicModuleNameEnding(component.componentName)
|
|
44
|
+
: component.componentName}', ${isLazyLoadingModule(component.path)
|
|
45
|
+
? removeDynamicModuleNameEnding(component.moduleName)
|
|
46
|
+
: component.moduleName});`)
|
|
47
|
+
.join('\n')}
|
|
48
|
+
|
|
49
|
+
export const componentBuilder = new ComponentBuilder({ components });
|
|
50
|
+
|
|
51
|
+
export const moduleFactory = componentBuilder.getModuleFactory();
|
|
52
|
+
`;
|
|
53
|
+
};
|
|
54
|
+
exports.getComponentBuilderTemplate = getComponentBuilderTemplate;
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.generatePlugins = exports.getPluginList = exports.ModuleType = void 0;
|
|
7
|
+
const fs_1 = __importDefault(require("fs"));
|
|
8
|
+
const path_1 = __importDefault(require("path"));
|
|
9
|
+
const utils_1 = require("./utils");
|
|
10
|
+
/**
|
|
11
|
+
* Identifies the format of the module to be compiled
|
|
12
|
+
*/
|
|
13
|
+
var ModuleType;
|
|
14
|
+
(function (ModuleType) {
|
|
15
|
+
ModuleType[ModuleType["CJS"] = 0] = "CJS";
|
|
16
|
+
ModuleType[ModuleType["ESM"] = 1] = "ESM";
|
|
17
|
+
})(ModuleType = exports.ModuleType || (exports.ModuleType = {}));
|
|
18
|
+
/**
|
|
19
|
+
* Get list of plugins from @var path
|
|
20
|
+
* Returns a list of plugins in the following format:
|
|
21
|
+
* {
|
|
22
|
+
* path: 'path/to/plugin/foo',
|
|
23
|
+
* name: 'fooPlugin'
|
|
24
|
+
* }
|
|
25
|
+
* @example getPluginList('src/foo/plugins', 'Foo')
|
|
26
|
+
* @param {Object} definition plugin definition
|
|
27
|
+
* @param {string} definition.path path to get plugin from
|
|
28
|
+
* @param {string} definition.pluginName plugin name
|
|
29
|
+
* @param {boolean} [definition.silent] whether to suppress console output
|
|
30
|
+
*/
|
|
31
|
+
function getPluginList({ path, pluginName, silent = false, }) {
|
|
32
|
+
const plugins = (0, utils_1.getItems)({
|
|
33
|
+
path,
|
|
34
|
+
resolveItem: (path, name) => ({
|
|
35
|
+
path: `${path}/${name}`,
|
|
36
|
+
name: `${name.replace(/-./g, (x) => x[1].toUpperCase())}Plugin`,
|
|
37
|
+
}),
|
|
38
|
+
cb: (name) => !silent && console.debug(`Registering ${pluginName} plugin ${name}`),
|
|
39
|
+
});
|
|
40
|
+
return plugins;
|
|
41
|
+
}
|
|
42
|
+
exports.getPluginList = getPluginList;
|
|
43
|
+
/**
|
|
44
|
+
* Generates the plugins file and saves it to the filesystem.
|
|
45
|
+
* By convention, we expect to find plugins under {pluginName}/plugins/** (subfolders are searched recursively).
|
|
46
|
+
* generated file will be saved to @var {distPath} and will contain a list of plugins in the following format:
|
|
47
|
+
* CJS: exports.fooPlugin = require('{pluginPath}');
|
|
48
|
+
* ESM: export { fooPlugin } from '{pluginPath}';
|
|
49
|
+
* @example generatePlugins({ distPath: 'src/temp/foo-plugins.js', rootPath: 'src/foo/plugins', moduleType: ModuleType.CJS })
|
|
50
|
+
* @param {PluginDefinition} definition plugin definition
|
|
51
|
+
*/
|
|
52
|
+
function generatePlugins(definition) {
|
|
53
|
+
const { rootPath, distPath, moduleType, relative = false, silent } = definition;
|
|
54
|
+
const segments = rootPath.split('/');
|
|
55
|
+
const pluginName = segments[segments.length - 2];
|
|
56
|
+
const plugins = getPluginList({ path: rootPath, pluginName, silent });
|
|
57
|
+
let fileContent = '';
|
|
58
|
+
fileContent = plugins
|
|
59
|
+
.map((plugin) => {
|
|
60
|
+
const sourcePath = relative
|
|
61
|
+
? path_1.default.relative(path_1.default.dirname(distPath), plugin.path).replace(/\\/g, '/')
|
|
62
|
+
: plugin.path;
|
|
63
|
+
return moduleType === ModuleType.CJS
|
|
64
|
+
? `exports.${plugin.name} = require('${sourcePath}');`
|
|
65
|
+
: `export { ${plugin.name} } from '${sourcePath}';`;
|
|
66
|
+
})
|
|
67
|
+
.join('\r\n')
|
|
68
|
+
.concat('\r\n');
|
|
69
|
+
if (!plugins.length) {
|
|
70
|
+
fileContent = moduleType === ModuleType.CJS ? 'module.exports = {};\r\n' : 'export {};\r\n';
|
|
71
|
+
}
|
|
72
|
+
const filePath = path_1.default.resolve(distPath);
|
|
73
|
+
!silent && console.log(`Writing ${pluginName} plugins to ${filePath}`);
|
|
74
|
+
fs_1.default.writeFileSync(filePath, fileContent, {
|
|
75
|
+
encoding: 'utf8',
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
exports.generatePlugins = generatePlugins;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.writeComponentBuilder = exports.watchComponentBuilder = exports.generateComponentBuilder = void 0;
|
|
7
|
+
const path_1 = __importDefault(require("path"));
|
|
8
|
+
const fs_1 = __importDefault(require("fs"));
|
|
9
|
+
const component_builder_1 = require("./templates/component-builder");
|
|
10
|
+
const components_1 = require("../components");
|
|
11
|
+
const utils_1 = require("../utils");
|
|
12
|
+
// Default destination path for component builder
|
|
13
|
+
const componentBuilderOutputPath = 'src/temp/componentBuilder.js';
|
|
14
|
+
const defaultComponentRootPath = 'src/components';
|
|
15
|
+
/**
|
|
16
|
+
* Generate component builder based on provided settings
|
|
17
|
+
* @param {Object} settings settings for component builder generation
|
|
18
|
+
* @param {string} settings.componentRootPath path to components root
|
|
19
|
+
* @param {PackageDefinition[]} settings.packages list of packages to include in component builder
|
|
20
|
+
* @param {boolean} settings.watch whether to watch for changes to component builder sources
|
|
21
|
+
*/
|
|
22
|
+
function generateComponentBuilder({ componentRootPath = defaultComponentRootPath, packages, watch, }) {
|
|
23
|
+
if (watch) {
|
|
24
|
+
watchComponentBuilder(componentRootPath, packages);
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
writeComponentBuilder(componentRootPath, packages);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
exports.generateComponentBuilder = generateComponentBuilder;
|
|
31
|
+
/**
|
|
32
|
+
* Watch for changes to component builder sources
|
|
33
|
+
* @param {string} componentRootPath root path to components
|
|
34
|
+
* @param {PackageDefinition[]} [packages] packages to include in component builder
|
|
35
|
+
*/
|
|
36
|
+
function watchComponentBuilder(componentRootPath, packages) {
|
|
37
|
+
console.log(`Watching for changes to component builder sources in ${componentRootPath}...`);
|
|
38
|
+
(0, utils_1.watchItems)([componentRootPath], writeComponentBuilder.bind(null, componentRootPath, packages));
|
|
39
|
+
}
|
|
40
|
+
exports.watchComponentBuilder = watchComponentBuilder;
|
|
41
|
+
/**
|
|
42
|
+
* Write component builder to file
|
|
43
|
+
* @param {string} componentRootPath root path to components
|
|
44
|
+
* @param {PackageDefinition[]} [packages] packages to include in component builder
|
|
45
|
+
*/
|
|
46
|
+
function writeComponentBuilder(componentRootPath, packages = []) {
|
|
47
|
+
const components = (0, components_1.getComponentList)(componentRootPath);
|
|
48
|
+
components.unshift(...packages);
|
|
49
|
+
const componentBuilderPath = path_1.default.resolve(componentBuilderOutputPath);
|
|
50
|
+
const fileContent = (0, component_builder_1.getComponentBuilderTemplate)(components, componentBuilderPath);
|
|
51
|
+
console.log(`Writing component builder to ${componentBuilderPath}`);
|
|
52
|
+
fs_1.default.writeFileSync(componentBuilderPath, fileContent, {
|
|
53
|
+
encoding: 'utf8',
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
exports.writeComponentBuilder = writeComponentBuilder;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.generateComponentBuilder = exports.getComponentBuilderTemplate = void 0;
|
|
4
|
+
var component_builder_1 = require("./templates/component-builder");
|
|
5
|
+
Object.defineProperty(exports, "getComponentBuilderTemplate", { enumerable: true, get: function () { return component_builder_1.getComponentBuilderTemplate; } });
|
|
6
|
+
var generate_component_builder_1 = require("./generate-component-builder");
|
|
7
|
+
Object.defineProperty(exports, "generateComponentBuilder", { enumerable: true, get: function () { return generate_component_builder_1.generateComponentBuilder; } });
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.getComponentBuilderTemplate = void 0;
|
|
7
|
+
const path_1 = __importDefault(require("path"));
|
|
8
|
+
/**
|
|
9
|
+
* Generate component builder template
|
|
10
|
+
* @param {(PackageDefinition | ComponentFile)[]} components components to include in component builder
|
|
11
|
+
* @param {string} distPath destination path for component builder
|
|
12
|
+
* @returns generated component builder template
|
|
13
|
+
*/
|
|
14
|
+
const getComponentBuilderTemplate = (components, distPath) => {
|
|
15
|
+
const componentFiles = components.filter((component) => component.componentName);
|
|
16
|
+
const packages = components.filter((component) => component.components);
|
|
17
|
+
return `/* eslint-disable */
|
|
18
|
+
// Do not edit this file, it is auto-generated at build time!
|
|
19
|
+
// See scripts/generate-component-builder/index.js to modify the generation of this file.
|
|
20
|
+
|
|
21
|
+
import { ComponentBuilder } from '@sitecore-jss/sitecore-jss-react';
|
|
22
|
+
${packages
|
|
23
|
+
.map((pkg) => {
|
|
24
|
+
const list = pkg.components.map((c) => c.moduleName).join(', ');
|
|
25
|
+
return `import { ${list} } from '${pkg.name}'`;
|
|
26
|
+
})
|
|
27
|
+
.join('\n')}
|
|
28
|
+
${componentFiles
|
|
29
|
+
.map((component) => {
|
|
30
|
+
const sourcePath = path_1.default.relative(path_1.default.dirname(distPath), component.path).replace(/\\/g, '/');
|
|
31
|
+
return `import ${component.moduleName} from '${sourcePath}';`;
|
|
32
|
+
})
|
|
33
|
+
.join('\n')}
|
|
34
|
+
|
|
35
|
+
const components = new Map();
|
|
36
|
+
${packages
|
|
37
|
+
.map((p) => p.components.map((component) => `components.set('${component.componentName}', ${component.moduleName})`))
|
|
38
|
+
.join('\n')}
|
|
39
|
+
${componentFiles
|
|
40
|
+
.map((component) => `components.set('${component.componentName}', ${component.moduleName});`)
|
|
41
|
+
.join('\n')}
|
|
42
|
+
|
|
43
|
+
const componentBuilder = new ComponentBuilder({ components });
|
|
44
|
+
|
|
45
|
+
export const componentFactory = componentBuilder.getComponentFactory();
|
|
46
|
+
`;
|
|
47
|
+
};
|
|
48
|
+
exports.getComponentBuilderTemplate = getComponentBuilderTemplate;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.scaffoldFile = exports.editLineEndings = void 0;
|
|
7
|
+
const fs_1 = __importDefault(require("fs"));
|
|
8
|
+
const chalk_1 = __importDefault(require("chalk"));
|
|
9
|
+
const path_1 = __importDefault(require("path"));
|
|
10
|
+
/**
|
|
11
|
+
* Force to use `crlf` line endings, we are using `crlf` across the project.
|
|
12
|
+
* Replace: `lf` (\n), `cr` (\r)
|
|
13
|
+
* @param {string} content
|
|
14
|
+
*/
|
|
15
|
+
function editLineEndings(content) {
|
|
16
|
+
return content.replace(/\r|\n/gm, '\r\n');
|
|
17
|
+
}
|
|
18
|
+
exports.editLineEndings = editLineEndings;
|
|
19
|
+
/**
|
|
20
|
+
* Creates a file relative to the specified path if the file doesn't exist.
|
|
21
|
+
* Creates directories as needed.
|
|
22
|
+
* Does not overwrite existing files.
|
|
23
|
+
* @param {string} filePath - the file path
|
|
24
|
+
* @param {string} fileContent - the file content
|
|
25
|
+
* @returns {string} the file path if the file was created, otherwise null
|
|
26
|
+
*/
|
|
27
|
+
function scaffoldFile(filePath, fileContent) {
|
|
28
|
+
const outputDir = path_1.default.dirname(filePath);
|
|
29
|
+
if (fs_1.default.existsSync(filePath)) {
|
|
30
|
+
console.log(chalk_1.default.red(`Skipping creating ${filePath}; already exists.`));
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
fs_1.default.mkdirSync(outputDir, { recursive: true });
|
|
34
|
+
fs_1.default.writeFileSync(filePath, editLineEndings(fileContent), 'utf8');
|
|
35
|
+
console.log(chalk_1.default.green(`File ${filePath} has been scaffolded.`));
|
|
36
|
+
return filePath;
|
|
37
|
+
}
|
|
38
|
+
exports.scaffoldFile = scaffoldFile;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.watchItems = exports.getItems = void 0;
|
|
7
|
+
const fs_1 = __importDefault(require("fs"));
|
|
8
|
+
const chokidar_1 = __importDefault(require("chokidar"));
|
|
9
|
+
/**
|
|
10
|
+
* Using @var path find all files and generate output using @var resolveItem function for each file
|
|
11
|
+
* Can be used to generate list of components, templates, etc.
|
|
12
|
+
* @param {GetItemsSettings} settings
|
|
13
|
+
* @returns {Item[]} list of items
|
|
14
|
+
*/
|
|
15
|
+
function getItems(settings) {
|
|
16
|
+
const { recursive = true, path, resolveItem, cb, fileFormat = new RegExp(/(.+)(?<!\.d)\.[jt]sx?$/), } = settings;
|
|
17
|
+
const items = [];
|
|
18
|
+
const folders = [];
|
|
19
|
+
if (!fs_1.default.existsSync(path))
|
|
20
|
+
return [];
|
|
21
|
+
fs_1.default.readdirSync(path, { withFileTypes: true }).forEach((item) => {
|
|
22
|
+
if (item.isDirectory()) {
|
|
23
|
+
folders.push(item);
|
|
24
|
+
}
|
|
25
|
+
if (fileFormat.test(item.name)) {
|
|
26
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
27
|
+
const name = item.name.match(fileFormat)[1];
|
|
28
|
+
items.push(resolveItem(path, name));
|
|
29
|
+
cb && cb(name);
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
for (const folder of folders) {
|
|
33
|
+
recursive
|
|
34
|
+
? items.push(...getItems({
|
|
35
|
+
path: `${path}/${folder.name}`,
|
|
36
|
+
resolveItem,
|
|
37
|
+
cb,
|
|
38
|
+
fileFormat,
|
|
39
|
+
}))
|
|
40
|
+
: items.push(resolveItem(`${path}/${folder.name}`, folder.name));
|
|
41
|
+
}
|
|
42
|
+
return items;
|
|
43
|
+
}
|
|
44
|
+
exports.getItems = getItems;
|
|
45
|
+
/**
|
|
46
|
+
* Run watch mode, watching on @var paths
|
|
47
|
+
* @param {string[]} paths paths to watch by chokidar
|
|
48
|
+
* @param {Function<void>} cb callback to run on file change
|
|
49
|
+
*/
|
|
50
|
+
function watchItems(paths, cb) {
|
|
51
|
+
chokidar_1.default
|
|
52
|
+
.watch(paths, { ignoreInitial: true, awaitWriteFinish: true })
|
|
53
|
+
.on('add', cb)
|
|
54
|
+
.on('unlink', cb);
|
|
55
|
+
}
|
|
56
|
+
exports.watchItems = watchItems;
|
package/dist/esm/index.js
CHANGED
|
@@ -12,7 +12,7 @@ export { createDisconnectedDictionaryService, } from './disconnected-server/dict
|
|
|
12
12
|
export { createDefaultDocumentMiddleware, } from './disconnected-server/default-document';
|
|
13
13
|
export { createDefaultDisconnectedServer, } from './disconnected-server/create-default-disconnected-server';
|
|
14
14
|
export { resolveScJssConfig } from './resolve-scjssconfig';
|
|
15
|
-
export
|
|
15
|
+
export * from './templating';
|
|
16
16
|
export * from './manifest';
|
|
17
17
|
export * from './pipelines';
|
|
18
18
|
export * from './update';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { getItems } from './utils';
|
|
2
|
+
/**
|
|
3
|
+
* Get list of components from @var path
|
|
4
|
+
* Returns a list of components in the following format:
|
|
5
|
+
* {
|
|
6
|
+
* path: 'path/to/component',
|
|
7
|
+
* componentName: 'ComponentName',
|
|
8
|
+
* moduleName: 'ComponentName'
|
|
9
|
+
* }
|
|
10
|
+
* @param {string} path path to search
|
|
11
|
+
*/
|
|
12
|
+
export function getComponentList(path) {
|
|
13
|
+
const components = getItems({
|
|
14
|
+
path,
|
|
15
|
+
resolveItem: (path, name) => ({
|
|
16
|
+
path: `${path}/${name}`,
|
|
17
|
+
componentName: name,
|
|
18
|
+
moduleName: name.replace(/[^\w]+/g, ''),
|
|
19
|
+
}),
|
|
20
|
+
cb: (name) => console.debug(`Registering JSS component ${name}`),
|
|
21
|
+
});
|
|
22
|
+
return components;
|
|
23
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import path from 'path';
|
|
2
|
+
import fs from 'fs';
|
|
3
|
+
import { getComponentBuilderTemplate } from './templates/component-builder';
|
|
4
|
+
import { getComponentList } from '../components';
|
|
5
|
+
import { watchItems } from '../utils';
|
|
6
|
+
// Default destination path for component builder
|
|
7
|
+
const defaultComponentBuilderOutputPath = 'src/temp/componentBuilder.ts';
|
|
8
|
+
const defaultComponentRootPath = 'src/components';
|
|
9
|
+
/**
|
|
10
|
+
* Generate component builder based on provided settings
|
|
11
|
+
* @param {Object} [settings] settings for component builder generation
|
|
12
|
+
* @param {string} [settings.componentRootPath] path to components root
|
|
13
|
+
* @param {string} [settings.componentBuilderOutputPath] path to component builder output
|
|
14
|
+
* @param {PackageDefinition[]} [settings.packages] list of packages to include in component builder
|
|
15
|
+
* @param {boolean} [settings.watch] whether to watch for changes to component builder sources
|
|
16
|
+
*/
|
|
17
|
+
export function generateComponentBuilder({ componentRootPath = defaultComponentRootPath, componentBuilderOutputPath = defaultComponentBuilderOutputPath, packages = [], watch, } = {}) {
|
|
18
|
+
if (watch) {
|
|
19
|
+
watchComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages });
|
|
20
|
+
}
|
|
21
|
+
else {
|
|
22
|
+
writeComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages });
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Watch for changes to component builder sources
|
|
27
|
+
* @param {Object} settings settings for component builder generation
|
|
28
|
+
* @param {string} settings.componentRootPath path to components root
|
|
29
|
+
* @param {string} settings.componentBuilderOutputPath path to component builder output
|
|
30
|
+
* @param {PackageDefinition[]} settings.packages list of packages to include in component builder
|
|
31
|
+
*/
|
|
32
|
+
export function watchComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages, }) {
|
|
33
|
+
console.log(`Watching for changes to component builder sources in ${componentRootPath}...`);
|
|
34
|
+
watchItems([componentRootPath], writeComponentBuilder.bind(null, { componentRootPath, componentBuilderOutputPath, packages }));
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Write component builder to file
|
|
38
|
+
* @param {Object} settings settings for component builder generation
|
|
39
|
+
* @param {string} settings.componentRootPath path to components root
|
|
40
|
+
* @param {string} settings.componentBuilderOutputPath path to component builder output
|
|
41
|
+
* @param {PackageDefinition[]} settings.packages list of packages to include in component builder
|
|
42
|
+
*/
|
|
43
|
+
export function writeComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages, }) {
|
|
44
|
+
const components = getComponentList(componentRootPath);
|
|
45
|
+
components.unshift(...packages);
|
|
46
|
+
const componentBuilderPath = path.resolve(componentBuilderOutputPath);
|
|
47
|
+
const fileContent = getComponentBuilderTemplate(components);
|
|
48
|
+
console.log(`Writing component builder to ${componentBuilderPath}`);
|
|
49
|
+
fs.writeFileSync(componentBuilderPath, fileContent, {
|
|
50
|
+
encoding: 'utf8',
|
|
51
|
+
});
|
|
52
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
const isLazyLoadingModule = (componentPath) => componentPath.includes('.dynamic');
|
|
2
|
+
const removeDynamicModuleNameEnding = (moduleName) => moduleName.replace(/\.?dynamic$/i, '');
|
|
3
|
+
/**
|
|
4
|
+
* Generate component builder template
|
|
5
|
+
* @param {(PackageDefinition | ComponentFile)[]} components components to include in component builder
|
|
6
|
+
* @returns generated component builder template
|
|
7
|
+
*/
|
|
8
|
+
export const getComponentBuilderTemplate = (components) => {
|
|
9
|
+
const componentFiles = components.filter((component) => component.componentName);
|
|
10
|
+
const packages = components.filter((component) => component.components);
|
|
11
|
+
const hasLazyModules = componentFiles.find((component) => isLazyLoadingModule(component.path));
|
|
12
|
+
return `/* eslint-disable */
|
|
13
|
+
// Do not edit this file, it is auto-generated at build time!
|
|
14
|
+
// See scripts/generate-component-builder/index.ts to modify the generation of this file.
|
|
15
|
+
|
|
16
|
+
${hasLazyModules ? "import dynamic from 'next/dynamic';" : ''}
|
|
17
|
+
import { ComponentBuilder } from '@sitecore-jss/sitecore-jss-nextjs';
|
|
18
|
+
|
|
19
|
+
${packages.map((pkg) => {
|
|
20
|
+
const list = pkg.components.map((c) => c.moduleName).join(', ');
|
|
21
|
+
return `import { ${list} } from '${pkg.name}'`;
|
|
22
|
+
})}
|
|
23
|
+
${componentFiles
|
|
24
|
+
.map((component) => {
|
|
25
|
+
if (isLazyLoadingModule(component.path)) {
|
|
26
|
+
const moduleName = removeDynamicModuleNameEnding(component.moduleName);
|
|
27
|
+
return `const ${moduleName} = {
|
|
28
|
+
module: () => import('${component.path}'),
|
|
29
|
+
element: (isEditing?: boolean) => isEditing ? require('${component.path}')?.default : dynamic(${moduleName}.module)
|
|
30
|
+
}`;
|
|
31
|
+
}
|
|
32
|
+
return `import * as ${component.moduleName} from '${component.path}';`;
|
|
33
|
+
})
|
|
34
|
+
.join('\n')}
|
|
35
|
+
|
|
36
|
+
const components = new Map();
|
|
37
|
+
${packages.map((p) => p.components.map((component) => `components.set('${component.componentName}', ${component.moduleName})`))}
|
|
38
|
+
${componentFiles
|
|
39
|
+
.map((component) => `components.set('${isLazyLoadingModule(component.path)
|
|
40
|
+
? removeDynamicModuleNameEnding(component.componentName)
|
|
41
|
+
: component.componentName}', ${isLazyLoadingModule(component.path)
|
|
42
|
+
? removeDynamicModuleNameEnding(component.moduleName)
|
|
43
|
+
: component.moduleName});`)
|
|
44
|
+
.join('\n')}
|
|
45
|
+
|
|
46
|
+
export const componentBuilder = new ComponentBuilder({ components });
|
|
47
|
+
|
|
48
|
+
export const moduleFactory = componentBuilder.getModuleFactory();
|
|
49
|
+
`;
|
|
50
|
+
};
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import fs from 'fs';
|
|
2
|
+
import path from 'path';
|
|
3
|
+
import { getItems } from './utils';
|
|
4
|
+
/**
|
|
5
|
+
* Identifies the format of the module to be compiled
|
|
6
|
+
*/
|
|
7
|
+
export var ModuleType;
|
|
8
|
+
(function (ModuleType) {
|
|
9
|
+
ModuleType[ModuleType["CJS"] = 0] = "CJS";
|
|
10
|
+
ModuleType[ModuleType["ESM"] = 1] = "ESM";
|
|
11
|
+
})(ModuleType || (ModuleType = {}));
|
|
12
|
+
/**
|
|
13
|
+
* Get list of plugins from @var path
|
|
14
|
+
* Returns a list of plugins in the following format:
|
|
15
|
+
* {
|
|
16
|
+
* path: 'path/to/plugin/foo',
|
|
17
|
+
* name: 'fooPlugin'
|
|
18
|
+
* }
|
|
19
|
+
* @example getPluginList('src/foo/plugins', 'Foo')
|
|
20
|
+
* @param {Object} definition plugin definition
|
|
21
|
+
* @param {string} definition.path path to get plugin from
|
|
22
|
+
* @param {string} definition.pluginName plugin name
|
|
23
|
+
* @param {boolean} [definition.silent] whether to suppress console output
|
|
24
|
+
*/
|
|
25
|
+
export function getPluginList({ path, pluginName, silent = false, }) {
|
|
26
|
+
const plugins = getItems({
|
|
27
|
+
path,
|
|
28
|
+
resolveItem: (path, name) => ({
|
|
29
|
+
path: `${path}/${name}`,
|
|
30
|
+
name: `${name.replace(/-./g, (x) => x[1].toUpperCase())}Plugin`,
|
|
31
|
+
}),
|
|
32
|
+
cb: (name) => !silent && console.debug(`Registering ${pluginName} plugin ${name}`),
|
|
33
|
+
});
|
|
34
|
+
return plugins;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Generates the plugins file and saves it to the filesystem.
|
|
38
|
+
* By convention, we expect to find plugins under {pluginName}/plugins/** (subfolders are searched recursively).
|
|
39
|
+
* generated file will be saved to @var {distPath} and will contain a list of plugins in the following format:
|
|
40
|
+
* CJS: exports.fooPlugin = require('{pluginPath}');
|
|
41
|
+
* ESM: export { fooPlugin } from '{pluginPath}';
|
|
42
|
+
* @example generatePlugins({ distPath: 'src/temp/foo-plugins.js', rootPath: 'src/foo/plugins', moduleType: ModuleType.CJS })
|
|
43
|
+
* @param {PluginDefinition} definition plugin definition
|
|
44
|
+
*/
|
|
45
|
+
export function generatePlugins(definition) {
|
|
46
|
+
const { rootPath, distPath, moduleType, relative = false, silent } = definition;
|
|
47
|
+
const segments = rootPath.split('/');
|
|
48
|
+
const pluginName = segments[segments.length - 2];
|
|
49
|
+
const plugins = getPluginList({ path: rootPath, pluginName, silent });
|
|
50
|
+
let fileContent = '';
|
|
51
|
+
fileContent = plugins
|
|
52
|
+
.map((plugin) => {
|
|
53
|
+
const sourcePath = relative
|
|
54
|
+
? path.relative(path.dirname(distPath), plugin.path).replace(/\\/g, '/')
|
|
55
|
+
: plugin.path;
|
|
56
|
+
return moduleType === ModuleType.CJS
|
|
57
|
+
? `exports.${plugin.name} = require('${sourcePath}');`
|
|
58
|
+
: `export { ${plugin.name} } from '${sourcePath}';`;
|
|
59
|
+
})
|
|
60
|
+
.join('\r\n')
|
|
61
|
+
.concat('\r\n');
|
|
62
|
+
if (!plugins.length) {
|
|
63
|
+
fileContent = moduleType === ModuleType.CJS ? 'module.exports = {};\r\n' : 'export {};\r\n';
|
|
64
|
+
}
|
|
65
|
+
const filePath = path.resolve(distPath);
|
|
66
|
+
!silent && console.log(`Writing ${pluginName} plugins to ${filePath}`);
|
|
67
|
+
fs.writeFileSync(filePath, fileContent, {
|
|
68
|
+
encoding: 'utf8',
|
|
69
|
+
});
|
|
70
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import path from 'path';
|
|
2
|
+
import fs from 'fs';
|
|
3
|
+
import { getComponentBuilderTemplate } from './templates/component-builder';
|
|
4
|
+
import { getComponentList } from '../components';
|
|
5
|
+
import { watchItems } from '../utils';
|
|
6
|
+
// Default destination path for component builder
|
|
7
|
+
const componentBuilderOutputPath = 'src/temp/componentBuilder.js';
|
|
8
|
+
const defaultComponentRootPath = 'src/components';
|
|
9
|
+
/**
|
|
10
|
+
* Generate component builder based on provided settings
|
|
11
|
+
* @param {Object} settings settings for component builder generation
|
|
12
|
+
* @param {string} settings.componentRootPath path to components root
|
|
13
|
+
* @param {PackageDefinition[]} settings.packages list of packages to include in component builder
|
|
14
|
+
* @param {boolean} settings.watch whether to watch for changes to component builder sources
|
|
15
|
+
*/
|
|
16
|
+
export function generateComponentBuilder({ componentRootPath = defaultComponentRootPath, packages, watch, }) {
|
|
17
|
+
if (watch) {
|
|
18
|
+
watchComponentBuilder(componentRootPath, packages);
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
writeComponentBuilder(componentRootPath, packages);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Watch for changes to component builder sources
|
|
26
|
+
* @param {string} componentRootPath root path to components
|
|
27
|
+
* @param {PackageDefinition[]} [packages] packages to include in component builder
|
|
28
|
+
*/
|
|
29
|
+
export function watchComponentBuilder(componentRootPath, packages) {
|
|
30
|
+
console.log(`Watching for changes to component builder sources in ${componentRootPath}...`);
|
|
31
|
+
watchItems([componentRootPath], writeComponentBuilder.bind(null, componentRootPath, packages));
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Write component builder to file
|
|
35
|
+
* @param {string} componentRootPath root path to components
|
|
36
|
+
* @param {PackageDefinition[]} [packages] packages to include in component builder
|
|
37
|
+
*/
|
|
38
|
+
export function writeComponentBuilder(componentRootPath, packages = []) {
|
|
39
|
+
const components = getComponentList(componentRootPath);
|
|
40
|
+
components.unshift(...packages);
|
|
41
|
+
const componentBuilderPath = path.resolve(componentBuilderOutputPath);
|
|
42
|
+
const fileContent = getComponentBuilderTemplate(components, componentBuilderPath);
|
|
43
|
+
console.log(`Writing component builder to ${componentBuilderPath}`);
|
|
44
|
+
fs.writeFileSync(componentBuilderPath, fileContent, {
|
|
45
|
+
encoding: 'utf8',
|
|
46
|
+
});
|
|
47
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import path from 'path';
|
|
2
|
+
/**
|
|
3
|
+
* Generate component builder template
|
|
4
|
+
* @param {(PackageDefinition | ComponentFile)[]} components components to include in component builder
|
|
5
|
+
* @param {string} distPath destination path for component builder
|
|
6
|
+
* @returns generated component builder template
|
|
7
|
+
*/
|
|
8
|
+
export const getComponentBuilderTemplate = (components, distPath) => {
|
|
9
|
+
const componentFiles = components.filter((component) => component.componentName);
|
|
10
|
+
const packages = components.filter((component) => component.components);
|
|
11
|
+
return `/* eslint-disable */
|
|
12
|
+
// Do not edit this file, it is auto-generated at build time!
|
|
13
|
+
// See scripts/generate-component-builder/index.js to modify the generation of this file.
|
|
14
|
+
|
|
15
|
+
import { ComponentBuilder } from '@sitecore-jss/sitecore-jss-react';
|
|
16
|
+
${packages
|
|
17
|
+
.map((pkg) => {
|
|
18
|
+
const list = pkg.components.map((c) => c.moduleName).join(', ');
|
|
19
|
+
return `import { ${list} } from '${pkg.name}'`;
|
|
20
|
+
})
|
|
21
|
+
.join('\n')}
|
|
22
|
+
${componentFiles
|
|
23
|
+
.map((component) => {
|
|
24
|
+
const sourcePath = path.relative(path.dirname(distPath), component.path).replace(/\\/g, '/');
|
|
25
|
+
return `import ${component.moduleName} from '${sourcePath}';`;
|
|
26
|
+
})
|
|
27
|
+
.join('\n')}
|
|
28
|
+
|
|
29
|
+
const components = new Map();
|
|
30
|
+
${packages
|
|
31
|
+
.map((p) => p.components.map((component) => `components.set('${component.componentName}', ${component.moduleName})`))
|
|
32
|
+
.join('\n')}
|
|
33
|
+
${componentFiles
|
|
34
|
+
.map((component) => `components.set('${component.componentName}', ${component.moduleName});`)
|
|
35
|
+
.join('\n')}
|
|
36
|
+
|
|
37
|
+
const componentBuilder = new ComponentBuilder({ components });
|
|
38
|
+
|
|
39
|
+
export const componentFactory = componentBuilder.getComponentFactory();
|
|
40
|
+
`;
|
|
41
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import fs from 'fs';
|
|
2
|
+
import chalk from 'chalk';
|
|
3
|
+
import path from 'path';
|
|
4
|
+
/**
|
|
5
|
+
* Force to use `crlf` line endings, we are using `crlf` across the project.
|
|
6
|
+
* Replace: `lf` (\n), `cr` (\r)
|
|
7
|
+
* @param {string} content
|
|
8
|
+
*/
|
|
9
|
+
export function editLineEndings(content) {
|
|
10
|
+
return content.replace(/\r|\n/gm, '\r\n');
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Creates a file relative to the specified path if the file doesn't exist.
|
|
14
|
+
* Creates directories as needed.
|
|
15
|
+
* Does not overwrite existing files.
|
|
16
|
+
* @param {string} filePath - the file path
|
|
17
|
+
* @param {string} fileContent - the file content
|
|
18
|
+
* @returns {string} the file path if the file was created, otherwise null
|
|
19
|
+
*/
|
|
20
|
+
export function scaffoldFile(filePath, fileContent) {
|
|
21
|
+
const outputDir = path.dirname(filePath);
|
|
22
|
+
if (fs.existsSync(filePath)) {
|
|
23
|
+
console.log(chalk.red(`Skipping creating ${filePath}; already exists.`));
|
|
24
|
+
return null;
|
|
25
|
+
}
|
|
26
|
+
fs.mkdirSync(outputDir, { recursive: true });
|
|
27
|
+
fs.writeFileSync(filePath, editLineEndings(fileContent), 'utf8');
|
|
28
|
+
console.log(chalk.green(`File ${filePath} has been scaffolded.`));
|
|
29
|
+
return filePath;
|
|
30
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import fs from 'fs';
|
|
2
|
+
import chokidar from 'chokidar';
|
|
3
|
+
/**
|
|
4
|
+
* Using @var path find all files and generate output using @var resolveItem function for each file
|
|
5
|
+
* Can be used to generate list of components, templates, etc.
|
|
6
|
+
* @param {GetItemsSettings} settings
|
|
7
|
+
* @returns {Item[]} list of items
|
|
8
|
+
*/
|
|
9
|
+
export function getItems(settings) {
|
|
10
|
+
const { recursive = true, path, resolveItem, cb, fileFormat = new RegExp(/(.+)(?<!\.d)\.[jt]sx?$/), } = settings;
|
|
11
|
+
const items = [];
|
|
12
|
+
const folders = [];
|
|
13
|
+
if (!fs.existsSync(path))
|
|
14
|
+
return [];
|
|
15
|
+
fs.readdirSync(path, { withFileTypes: true }).forEach((item) => {
|
|
16
|
+
if (item.isDirectory()) {
|
|
17
|
+
folders.push(item);
|
|
18
|
+
}
|
|
19
|
+
if (fileFormat.test(item.name)) {
|
|
20
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
21
|
+
const name = item.name.match(fileFormat)[1];
|
|
22
|
+
items.push(resolveItem(path, name));
|
|
23
|
+
cb && cb(name);
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
for (const folder of folders) {
|
|
27
|
+
recursive
|
|
28
|
+
? items.push(...getItems({
|
|
29
|
+
path: `${path}/${folder.name}`,
|
|
30
|
+
resolveItem,
|
|
31
|
+
cb,
|
|
32
|
+
fileFormat,
|
|
33
|
+
}))
|
|
34
|
+
: items.push(resolveItem(`${path}/${folder.name}`, folder.name));
|
|
35
|
+
}
|
|
36
|
+
return items;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Run watch mode, watching on @var paths
|
|
40
|
+
* @param {string[]} paths paths to watch by chokidar
|
|
41
|
+
* @param {Function<void>} cb callback to run on file change
|
|
42
|
+
*/
|
|
43
|
+
export function watchItems(paths, cb) {
|
|
44
|
+
chokidar
|
|
45
|
+
.watch(paths, { ignoreInitial: true, awaitWriteFinish: true })
|
|
46
|
+
.on('add', cb)
|
|
47
|
+
.on('unlink', cb);
|
|
48
|
+
}
|
package/nextjs.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './types/templating/nextjs/index';
|
package/nextjs.js
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sitecore-jss/sitecore-jss-dev-tools",
|
|
3
|
-
"version": "21.
|
|
3
|
+
"version": "21.3.0-canary.2",
|
|
4
4
|
"description": "Utilities to assist in the development and deployment of Sitecore JSS apps.",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"url": "https://github.com/sitecore/jss/issues"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@sitecore-jss/sitecore-jss": "^21.
|
|
36
|
+
"@sitecore-jss/sitecore-jss": "^21.3.0-canary.2",
|
|
37
37
|
"axios": "^1.3.2",
|
|
38
38
|
"chalk": "^4.1.2",
|
|
39
39
|
"chokidar": "^3.5.3",
|
|
@@ -84,9 +84,11 @@
|
|
|
84
84
|
"typescript": "~4.9.5"
|
|
85
85
|
},
|
|
86
86
|
"types": "types/index.d.ts",
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "a498d1b8b6bab066a58907a2a01a554b9d20bd42",
|
|
88
88
|
"files": [
|
|
89
89
|
"dist",
|
|
90
|
-
"types"
|
|
90
|
+
"types",
|
|
91
|
+
"/*.js",
|
|
92
|
+
"/*.d.ts"
|
|
91
93
|
]
|
|
92
94
|
}
|
package/react.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './types/templating/react/index';
|
package/react.js
ADDED
package/types/index.d.ts
CHANGED
|
@@ -13,7 +13,7 @@ export { createDisconnectedDictionaryService, DisconnectedDictionaryServiceOptio
|
|
|
13
13
|
export { createDefaultDocumentMiddleware, DefaultDocumentMiddlewareOptions, } from './disconnected-server/default-document';
|
|
14
14
|
export { createDefaultDisconnectedServer, DisconnectedServerOptions, } from './disconnected-server/create-default-disconnected-server';
|
|
15
15
|
export { ScJssConfig, JssConfiguration, resolveScJssConfig } from './resolve-scjssconfig';
|
|
16
|
-
export
|
|
16
|
+
export * from './templating';
|
|
17
17
|
export * from './manifest';
|
|
18
18
|
export * from './pipelines';
|
|
19
19
|
export * from './update';
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Describes a file that represents a component definition
|
|
3
|
+
*/
|
|
4
|
+
export interface ComponentFile {
|
|
5
|
+
path: string;
|
|
6
|
+
moduleName: string;
|
|
7
|
+
componentName: string;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Describes a package and components to be imported
|
|
11
|
+
*/
|
|
12
|
+
export interface PackageDefinition {
|
|
13
|
+
name: string;
|
|
14
|
+
components: {
|
|
15
|
+
moduleName: string;
|
|
16
|
+
componentName: string;
|
|
17
|
+
}[];
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Get list of components from @var path
|
|
21
|
+
* Returns a list of components in the following format:
|
|
22
|
+
* {
|
|
23
|
+
* path: 'path/to/component',
|
|
24
|
+
* componentName: 'ComponentName',
|
|
25
|
+
* moduleName: 'ComponentName'
|
|
26
|
+
* }
|
|
27
|
+
* @param {string} path path to search
|
|
28
|
+
*/
|
|
29
|
+
export declare function getComponentList(path: string): (PackageDefinition | ComponentFile)[];
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { PackageDefinition } from '../components';
|
|
2
|
+
/**
|
|
3
|
+
* Generate component builder based on provided settings
|
|
4
|
+
* @param {Object} [settings] settings for component builder generation
|
|
5
|
+
* @param {string} [settings.componentRootPath] path to components root
|
|
6
|
+
* @param {string} [settings.componentBuilderOutputPath] path to component builder output
|
|
7
|
+
* @param {PackageDefinition[]} [settings.packages] list of packages to include in component builder
|
|
8
|
+
* @param {boolean} [settings.watch] whether to watch for changes to component builder sources
|
|
9
|
+
*/
|
|
10
|
+
export declare function generateComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages, watch, }?: {
|
|
11
|
+
componentRootPath?: string;
|
|
12
|
+
componentBuilderOutputPath?: string;
|
|
13
|
+
packages?: PackageDefinition[];
|
|
14
|
+
watch?: boolean;
|
|
15
|
+
}): void;
|
|
16
|
+
/**
|
|
17
|
+
* Watch for changes to component builder sources
|
|
18
|
+
* @param {Object} settings settings for component builder generation
|
|
19
|
+
* @param {string} settings.componentRootPath path to components root
|
|
20
|
+
* @param {string} settings.componentBuilderOutputPath path to component builder output
|
|
21
|
+
* @param {PackageDefinition[]} settings.packages list of packages to include in component builder
|
|
22
|
+
*/
|
|
23
|
+
export declare function watchComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages, }: {
|
|
24
|
+
componentRootPath: string;
|
|
25
|
+
componentBuilderOutputPath: string;
|
|
26
|
+
packages: PackageDefinition[];
|
|
27
|
+
}): void;
|
|
28
|
+
/**
|
|
29
|
+
* Write component builder to file
|
|
30
|
+
* @param {Object} settings settings for component builder generation
|
|
31
|
+
* @param {string} settings.componentRootPath path to components root
|
|
32
|
+
* @param {string} settings.componentBuilderOutputPath path to component builder output
|
|
33
|
+
* @param {PackageDefinition[]} settings.packages list of packages to include in component builder
|
|
34
|
+
*/
|
|
35
|
+
export declare function writeComponentBuilder({ componentRootPath, componentBuilderOutputPath, packages, }: {
|
|
36
|
+
componentRootPath: string;
|
|
37
|
+
componentBuilderOutputPath: string;
|
|
38
|
+
packages: PackageDefinition[];
|
|
39
|
+
}): void;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ComponentFile, PackageDefinition } from '../../components';
|
|
2
|
+
/**
|
|
3
|
+
* Generate component builder template
|
|
4
|
+
* @param {(PackageDefinition | ComponentFile)[]} components components to include in component builder
|
|
5
|
+
* @returns generated component builder template
|
|
6
|
+
*/
|
|
7
|
+
export declare const getComponentBuilderTemplate: (components: (PackageDefinition | ComponentFile)[]) => string;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Identifies the format of the module to be compiled
|
|
3
|
+
*/
|
|
4
|
+
export declare enum ModuleType {
|
|
5
|
+
CJS = 0,
|
|
6
|
+
ESM = 1
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Type to specify plugin file details
|
|
10
|
+
*/
|
|
11
|
+
export interface PluginFile {
|
|
12
|
+
path: string;
|
|
13
|
+
name: string;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Definition to be used for plugin registration during bootstrap
|
|
17
|
+
*/
|
|
18
|
+
export interface PluginDefinition {
|
|
19
|
+
/**
|
|
20
|
+
* destination path to compile plugins to
|
|
21
|
+
*/
|
|
22
|
+
distPath: string;
|
|
23
|
+
/**
|
|
24
|
+
* source path for where the plugins are defined
|
|
25
|
+
*/
|
|
26
|
+
rootPath: string;
|
|
27
|
+
/**
|
|
28
|
+
* CJS or ESM - which type to compile plugins to
|
|
29
|
+
*/
|
|
30
|
+
moduleType: ModuleType;
|
|
31
|
+
/**
|
|
32
|
+
* whether to use relative or absolute paths in the generated file. By default, absolute paths are used.
|
|
33
|
+
*/
|
|
34
|
+
relative?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* whether to suppress console output
|
|
37
|
+
*/
|
|
38
|
+
silent?: boolean;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Get list of plugins from @var path
|
|
42
|
+
* Returns a list of plugins in the following format:
|
|
43
|
+
* {
|
|
44
|
+
* path: 'path/to/plugin/foo',
|
|
45
|
+
* name: 'fooPlugin'
|
|
46
|
+
* }
|
|
47
|
+
* @example getPluginList('src/foo/plugins', 'Foo')
|
|
48
|
+
* @param {Object} definition plugin definition
|
|
49
|
+
* @param {string} definition.path path to get plugin from
|
|
50
|
+
* @param {string} definition.pluginName plugin name
|
|
51
|
+
* @param {boolean} [definition.silent] whether to suppress console output
|
|
52
|
+
*/
|
|
53
|
+
export declare function getPluginList({ path, pluginName, silent, }: {
|
|
54
|
+
path: string;
|
|
55
|
+
pluginName: string;
|
|
56
|
+
silent?: boolean;
|
|
57
|
+
}): PluginFile[];
|
|
58
|
+
/**
|
|
59
|
+
* Generates the plugins file and saves it to the filesystem.
|
|
60
|
+
* By convention, we expect to find plugins under {pluginName}/plugins/** (subfolders are searched recursively).
|
|
61
|
+
* generated file will be saved to @var {distPath} and will contain a list of plugins in the following format:
|
|
62
|
+
* CJS: exports.fooPlugin = require('{pluginPath}');
|
|
63
|
+
* ESM: export { fooPlugin } from '{pluginPath}';
|
|
64
|
+
* @example generatePlugins({ distPath: 'src/temp/foo-plugins.js', rootPath: 'src/foo/plugins', moduleType: ModuleType.CJS })
|
|
65
|
+
* @param {PluginDefinition} definition plugin definition
|
|
66
|
+
*/
|
|
67
|
+
export declare function generatePlugins(definition: PluginDefinition): void;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { PackageDefinition } from '../components';
|
|
2
|
+
/**
|
|
3
|
+
* Generate component builder based on provided settings
|
|
4
|
+
* @param {Object} settings settings for component builder generation
|
|
5
|
+
* @param {string} settings.componentRootPath path to components root
|
|
6
|
+
* @param {PackageDefinition[]} settings.packages list of packages to include in component builder
|
|
7
|
+
* @param {boolean} settings.watch whether to watch for changes to component builder sources
|
|
8
|
+
*/
|
|
9
|
+
export declare function generateComponentBuilder({ componentRootPath, packages, watch, }: {
|
|
10
|
+
componentRootPath?: string;
|
|
11
|
+
packages?: PackageDefinition[];
|
|
12
|
+
watch?: boolean;
|
|
13
|
+
}): void;
|
|
14
|
+
/**
|
|
15
|
+
* Watch for changes to component builder sources
|
|
16
|
+
* @param {string} componentRootPath root path to components
|
|
17
|
+
* @param {PackageDefinition[]} [packages] packages to include in component builder
|
|
18
|
+
*/
|
|
19
|
+
export declare function watchComponentBuilder(componentRootPath: string, packages?: PackageDefinition[]): void;
|
|
20
|
+
/**
|
|
21
|
+
* Write component builder to file
|
|
22
|
+
* @param {string} componentRootPath root path to components
|
|
23
|
+
* @param {PackageDefinition[]} [packages] packages to include in component builder
|
|
24
|
+
*/
|
|
25
|
+
export declare function writeComponentBuilder(componentRootPath: string, packages?: PackageDefinition[]): void;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ComponentFile, PackageDefinition } from '../../components';
|
|
2
|
+
/**
|
|
3
|
+
* Generate component builder template
|
|
4
|
+
* @param {(PackageDefinition | ComponentFile)[]} components components to include in component builder
|
|
5
|
+
* @param {string} distPath destination path for component builder
|
|
6
|
+
* @returns generated component builder template
|
|
7
|
+
*/
|
|
8
|
+
export declare const getComponentBuilderTemplate: (components: (PackageDefinition | ComponentFile)[], distPath: string) => string;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Force to use `crlf` line endings, we are using `crlf` across the project.
|
|
3
|
+
* Replace: `lf` (\n), `cr` (\r)
|
|
4
|
+
* @param {string} content
|
|
5
|
+
*/
|
|
6
|
+
export declare function editLineEndings(content: string): string;
|
|
7
|
+
/**
|
|
8
|
+
* Creates a file relative to the specified path if the file doesn't exist.
|
|
9
|
+
* Creates directories as needed.
|
|
10
|
+
* Does not overwrite existing files.
|
|
11
|
+
* @param {string} filePath - the file path
|
|
12
|
+
* @param {string} fileContent - the file content
|
|
13
|
+
* @returns {string} the file path if the file was created, otherwise null
|
|
14
|
+
*/
|
|
15
|
+
export declare function scaffoldFile(filePath: string, fileContent: string): string | null;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Settings for @var getItems function
|
|
3
|
+
*/
|
|
4
|
+
export type GetItemsSettings<Item> = {
|
|
5
|
+
/**
|
|
6
|
+
* items path
|
|
7
|
+
*/
|
|
8
|
+
path: string;
|
|
9
|
+
/**
|
|
10
|
+
* Resolve item in required data format
|
|
11
|
+
*/
|
|
12
|
+
resolveItem: (path: string, name: string) => Item;
|
|
13
|
+
/**
|
|
14
|
+
* Will be called when new file is found
|
|
15
|
+
*/
|
|
16
|
+
cb?: (name: string) => void;
|
|
17
|
+
/**
|
|
18
|
+
* Matches specific files format
|
|
19
|
+
*/
|
|
20
|
+
fileFormat?: RegExp;
|
|
21
|
+
/**
|
|
22
|
+
* Wether to search recursively
|
|
23
|
+
*/
|
|
24
|
+
recursive?: boolean;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Using @var path find all files and generate output using @var resolveItem function for each file
|
|
28
|
+
* Can be used to generate list of components, templates, etc.
|
|
29
|
+
* @param {GetItemsSettings} settings
|
|
30
|
+
* @returns {Item[]} list of items
|
|
31
|
+
*/
|
|
32
|
+
export declare function getItems<Item>(settings: GetItemsSettings<Item>): Item[];
|
|
33
|
+
/**
|
|
34
|
+
* Run watch mode, watching on @var paths
|
|
35
|
+
* @param {string[]} paths paths to watch by chokidar
|
|
36
|
+
* @param {Function<void>} cb callback to run on file change
|
|
37
|
+
*/
|
|
38
|
+
export declare function watchItems(paths: string[], cb: () => void): void;
|