[sitecore-jss-dev-tools] Fix line endings for component builder (#1580)

* add deafultImport to componentBuilder * update changelog * add changes to react template * revert defaultImport changes * remove comment * update changelog
Sitecore · Aug 9, 2023 · 7fbfed0 · 7fbfed0
1 parent 073a54c
commit 7fbfed0
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 52 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -45,6 +45,8 @@ Check the BYOC documentation for more info. ([#1568](https://github.com/Sitecore
 * `[sitecore.jss-react]` Fix double placeholder in Experience Editor in production mode ([#1557](https://github.com/Sitecore/jss/pull/1557))
 * `[sitecore-jss-nextjs]` Fix of redirects middleware. Add possible to use tokens like $1, $2, $3, etc. ([#1547](https://github.com/Sitecore/jss/pull/1547)) ([#1559](https://github.com/Sitecore/jss/pull/1559)) ([#1561](https://github.com/Sitecore/jss/pull/1561)) ([#1562](https://github.com/Sitecore/jss/pull/1562))
 * `[templates/nextjs-sxa]` Change Content-Type of robots.txt response (`text/html;charset=utf-8`➡`text/plain`).
+* `[sitecore-jss-dev-tools]` Fix line endings for component builder ([#1580](https://github.com/Sitecore/jss/pull/1580))
+
 
 ## 21.2.3
 

diff --git a/packages/sitecore-jss-dev-tools/src/templating/nextjs/generate-component-builder.test.ts b/packages/sitecore-jss-dev-tools/src/templating/nextjs/generate-component-builder.test.ts
@@ -34,17 +34,25 @@ describe('generate-component-builder', () => {
       getComponentStub.withArgs(componentsPath).returns(components);
       sinon.stub(path, 'resolve').callsFake((path) => path);
       const expectedOutput = [
-        '/* eslint-disable */\n',
-        '// Do not edit this file, it is auto-generated at build time!\n',
-        '// See scripts/generate-component-builder/index.ts to modify the generation of this file.\n\n\n',
-        "import { ComponentBuilder } from '@sitecore-jss/sitecore-jss-nextjs';\n\n",
-        "import { Foo } from 'custom-module'\n",
-        "import * as barModule from 'bar';\n\n",
-        'const components = new Map();\n',
-        "components.set('Foo', Foo)\n",
-        "components.set('BarComponent', barModule);\n\n",
-        'export const componentBuilder = new ComponentBuilder({ components });\n\n',
-        'export const moduleFactory = componentBuilder.getModuleFactory();\n',
+        '/* eslint-disable */\n' +
+          '// Do not edit this file, it is auto-generated at build time!\n' +
+          '// See scripts/generate-component-builder/index.ts to modify the generation of this file.\n' +
+          '\n' +
+          '\n' +
+          "import { ComponentBuilder } from '@sitecore-jss/sitecore-jss-nextjs';\n" +
+          '\n' +
+          "import { Foo } from 'custom-module';\n" +
+          '\n' +
+          "import * as barModule from 'bar';\n" +
+          '\n' +
+          'const components = new Map();\n' +
+          "components.set('Foo', Foo);\n" +
+          '\n' +
+          "components.set('BarComponent', barModule);\n" +
+          '\n' +
+          'export const componentBuilder = new ComponentBuilder({ components });\n' +
+          '\n' +
+          'export const moduleFactory = componentBuilder.getModuleFactory();\n',
       ].join('');
 
       generateComponentBuilder({
@@ -63,6 +71,8 @@ describe('generate-component-builder', () => {
         ],
       });
 
+      expect(writeFileStub.getCall(0).args[1]).to.equal(expectedOutput);
+
       expect(
         writeFileStub.calledWith(outputPath, expectedOutput, {
           encoding: 'utf8',
@@ -90,23 +100,30 @@ describe('generate-component-builder', () => {
       getComponentStub.withArgs(componentsPath).returns(components);
       sinon.stub(path, 'resolve').callsFake((path) => path);
       const expectedOutput = [
-        '/* eslint-disable */\n',
-        '// Do not edit this file, it is auto-generated at build time!\n',
-        '// See scripts/generate-component-builder/index.ts to modify the generation of this file.\n\n',
-        "import dynamic from 'next/dynamic';\n",
-        "import { ComponentBuilder } from '@sitecore-jss/sitecore-jss-nextjs';\n\n",
-        "import { Foo } from 'custom-module'\n",
-        "import * as barModule from 'bar';\n",
-        'const carModule = {\n',
-        "  module: () => import('car.dynamic'),\n",
-        "  element: (isEditing?: boolean) => isEditing ? require('car.dynamic')?.default : dynamic(carModule.module)\n",
-        '}\n\n',
-        'const components = new Map();\n',
-        "components.set('Foo', Foo)\n",
-        "components.set('BarComponent', barModule);\n",
-        "components.set('CarComponent', carModule);\n\n",
-        'export const componentBuilder = new ComponentBuilder({ components });\n\n',
-        'export const moduleFactory = componentBuilder.getModuleFactory();\n',
+        '/* eslint-disable */\n' +
+          '// Do not edit this file, it is auto-generated at build time!\n' +
+          '// See scripts/generate-component-builder/index.ts to modify the generation of this file.\n' +
+          '\n' +
+          "import dynamic from 'next/dynamic';\n" +
+          "import { ComponentBuilder } from '@sitecore-jss/sitecore-jss-nextjs';\n" +
+          '\n' +
+          "import { Foo } from 'custom-module';\n" +
+          '\n' +
+          "import * as barModule from 'bar';\n" +
+          'const carModule = {\n' +
+          "  module: () => import('car.dynamic'),\n" +
+          "  element: (isEditing?: boolean) => isEditing ? require('car.dynamic')?.default : dynamic(carModule.module)\n" +
+          '}\n' +
+          '\n' +
+          'const components = new Map();\n' +
+          "components.set('Foo', Foo);\n" +
+          '\n' +
+          "components.set('BarComponent', barModule);\n" +
+          "components.set('CarComponent', carModule);\n" +
+          '\n' +
+          'export const componentBuilder = new ComponentBuilder({ components });\n' +
+          '\n' +
+          'export const moduleFactory = componentBuilder.getModuleFactory();\n',
       ].join('');
 
       generateComponentBuilder({
@@ -125,6 +142,8 @@ describe('generate-component-builder', () => {
         ],
       });
 
+      expect(writeFileStub.getCall(0).args[1]).to.equal(expectedOutput);
+
       expect(
         writeFileStub.calledWith(outputPath, expectedOutput, {
           encoding: 'utf8',

diff --git a/packages/sitecore-jss-dev-tools/src/templating/nextjs/templates/component-builder.ts b/packages/sitecore-jss-dev-tools/src/templating/nextjs/templates/component-builder.ts
@@ -28,11 +28,12 @@ export const getComponentBuilderTemplate = (components: (PackageDefinition | Com
 ${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}'`;
-})}
+${packages
+  .map((pkg) => {
+    const list = pkg.components.map((c) => c.moduleName).join(', ');
+    return `import { ${list} } from '${pkg.name}';\n`;
+  })
+  .join('')}
 ${componentFiles
   .map((component) => {
     if (isLazyLoadingModule(component.path)) {
@@ -48,11 +49,14 @@ ${componentFiles
   .join('\n')}
 
 const components = new Map();
-${packages.map((p) =>
-  p.components.map(
-    (component) => `components.set('${component.componentName}', ${component.moduleName})`
+${packages
+  .map((p) =>
+    p.components.map(
+      (component) => `components.set('${component.componentName}', ${component.moduleName});\n`
+    )
   )
-)}
+  .flat()
+  .join('')}
 ${componentFiles
   .map(
     (component) =>

diff --git a/packages/sitecore-jss-dev-tools/src/templating/react/generate-component-builder.test.ts b/packages/sitecore-jss-dev-tools/src/templating/react/generate-component-builder.test.ts
@@ -34,17 +34,23 @@ describe('generate-component-builder', () => {
       sinon.stub(path, 'resolve').callsFake((path) => path);
       sinon.stub(path, 'relative').callsFake((_, path) => path);
       const expectedOutput = [
-        '/* eslint-disable */\n',
-        '// Do not edit this file, it is auto-generated at build time!\n',
-        '// See scripts/generate-component-builder/index.js to modify the generation of this file.\n\n',
-        "import { ComponentBuilder } from '@sitecore-jss/sitecore-jss-react';\n",
-        "import { Foo } from 'custom-module'\n",
-        "import barModule from 'bar';\n\n",
-        'const components = new Map();\n',
-        "components.set('Foo', Foo)\n",
-        "components.set('BarComponent', barModule);\n\n",
-        'const componentBuilder = new ComponentBuilder({ components });\n\n',
-        'export const componentFactory = componentBuilder.getComponentFactory();\n',
+        '/* eslint-disable */\n' +
+          '// Do not edit this file, it is auto-generated at build time!\n' +
+          '// See scripts/generate-component-builder/index.js to modify the generation of this file.\n' +
+          '\n' +
+          "import { ComponentBuilder } from '@sitecore-jss/sitecore-jss-react';\n" +
+          "import { Foo } from 'custom-module';\n" +
+          '\n' +
+          "import barModule from 'bar';\n" +
+          '\n' +
+          'const components = new Map();\n' +
+          "components.set('Foo', Foo);\n" +
+          '\n' +
+          "components.set('BarComponent', barModule);\n" +
+          '\n' +
+          'const componentBuilder = new ComponentBuilder({ components });\n' +
+          '\n' +
+          'export const componentFactory = componentBuilder.getComponentFactory();\n',
       ].join('');
 
       generateComponentBuilder({
@@ -62,6 +68,8 @@ describe('generate-component-builder', () => {
         ],
       });
 
+      expect(writeFileStub.getCall(0).args[1]).to.equal(expectedOutput);
+
       expect(
         writeFileStub.calledWith('src/temp/componentBuilder.js', expectedOutput, {
           encoding: 'utf8',

diff --git a/packages/sitecore-jss-dev-tools/src/templating/react/templates/component-builder.ts b/packages/sitecore-jss-dev-tools/src/templating/react/templates/component-builder.ts
@@ -26,9 +26,9 @@ import { ComponentBuilder } from '@sitecore-jss/sitecore-jss-react';
 ${packages
   .map((pkg) => {
     const list = pkg.components.map((c) => c.moduleName).join(', ');
-    return `import { ${list} } from '${pkg.name}'`;
+    return `import { ${list} } from '${pkg.name}';\n`;
   })
-  .join('\n')}
+  .join('')}
 ${componentFiles
   .map((component) => {
     const sourcePath = path.relative(path.dirname(distPath), component.path).replace(/\\/g, '/');
@@ -40,10 +40,11 @@ const components = new Map();
 ${packages
   .map((p) =>
     p.components.map(
-      (component) => `components.set('${component.componentName}', ${component.moduleName})`
+      (component) => `components.set('${component.componentName}', ${component.moduleName});\n`
     )
   )
-  .join('\n')}
+  .flat()
+  .join('')}
 ${componentFiles
   .map((component) => `components.set('${component.componentName}', ${component.moduleName});`)
   .join('\n')}