[MVC Static Generation] New "empty" starter (2) (#776)

* Reverse order of remove boilerplate directions When following the current order, the component will error after step 1 and it is no longer possible to follow the remaining steps * Update regex to handle jsx style comments & unit test * Strip dead links from Layout.tsx when using --empty * Remove unused type * Revert * Revert line * Match indentation
Sitecore · Aug 13, 2021 · ed6479c · ed6479c
1 parent be4c379
commit ed6479c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
diff --git a/packages/sitecore-jss-dev-tools/src/templating/strip.test.ts b/packages/sitecore-jss-dev-tools/src/templating/strip.test.ts
@@ -137,6 +137,10 @@ describe('strip', () => {
         'testdir2/test23.js',
         'Test81\r\n// #START_STRIP\r\nTest82 Test83\r\n// #END_STRIP\r\nTest84\r\nTest85'
       );
+      stubFileContent(
+        'testjsx.ts',
+        'return (\r\n<>\r\n{/* #START_STRIP */}\r\nTest86\r\nTest87\r\n{/* #END_STRIP */}\r\nTest88\r\nTest89\r\n</>\r\n)'
+      );
 
       globStub.returns([
         'test1.ts',
@@ -148,13 +152,14 @@ describe('strip', () => {
         'testdir2/test21.ts',
         'testdir2/test22.tsx',
         'testdir2/test23.js',
+        'testjsx.ts',
       ]);
 
       const settings = { stripCode: true };
 
       strip.strip(settings);
 
-      expect(writeFileSyncStub.callCount).to.equal(9);
+      expect(writeFileSyncStub.callCount).to.equal(10);
 
       const testCompile = (callIndex: number, filePath: string, content: string) => {
         expect(writeFileSyncStub.getCall(callIndex).args).to.deep.equal([
@@ -172,6 +177,7 @@ describe('strip', () => {
       testCompile(6, 'testdir2/test21.ts', 'Test61\r\nTest64\r\nTest65');
       testCompile(7, 'testdir2/test22.tsx', 'Test71\r\nTest74\r\nTest75');
       testCompile(8, 'testdir2/test23.js', 'Test81\r\nTest84\r\nTest85');
+      testCompile(9, 'testjsx.ts', 'return (\r\n<>\r\nTest88\r\nTest89\r\n</>\r\n)');
 
       globStub.restore();
       writeFileSyncStub.restore();

diff --git a/packages/sitecore-jss-dev-tools/src/templating/strip.ts b/packages/sitecore-jss-dev-tools/src/templating/strip.ts
@@ -12,7 +12,9 @@ const IGNORE_PATTERN = '@(node_modules|dist|.next|out|.generated)/**';
  * @returns {RegExp} regExp
  */
 const getStripRegExp = (prefix: string, suffix = 'STRIP') => {
-  return new RegExp(`// #${prefix}_${suffix}`, 'g');
+  const name = `#${prefix}_${suffix}`;
+
+  return new RegExp(`(// ${name})|({\\/\\* ${name} \\*\\/})`, 'g');
 };
 
 interface StripSettings {
@@ -79,7 +81,7 @@ export const compile = (file: string, settings: StripSettings) => {
 
 /**
  * Removes part of code which inside the special comments block.
- * Compiles each not excluded file starting from current dirrectory (or `settings.sourcePath`).
+ * Compiles each not excluded file starting from current directory (or `settings.sourcePath`).
  * @param {StripSettings} settings
  */
 export const strip = (settings: StripSettings = {}) => {

diff --git a/samples/nextjs/data/routes/en.yml b/samples/nextjs/data/routes/en.yml
@@ -49,14 +49,15 @@ placeholders:
 
           <div class="alert alert-dark">
             <h4>How to start with an empty app</h4>
+            <p>To start with a fresh app with no boilerplate, run <code>jss create <name of your app> nextjs --empty</code>. Note, disconnected mode is not supported this way</p>
             <p>To remove all of the default sample content (the Styleguide and GraphQL routes) and start out with an empty JSS app:</p>
             <ol>
-              <li>Delete <code>/src/components/Styleguide*</code> and <code>/src/components/GraphQL*</code></li>
-              <li>Delete <code>graphql-let</code> command from <code>bootstrap</code> npm command in <code>package.json</code> until you create <code>.graphql</code> files</li>
-              <li>Delete <code>/sitecore/definitions/components/Styleguide*</code>, <code>/sitecore/definitions/templates/Styleguide*</code>, and <code>/sitecore/definitions/components/GraphQL*</code></li>
-              <li>Delete <code>/data/component-content/Styleguide</code></li>
-              <li>Delete <code>/data/content/Styleguide</code></li>
-              <li>Delete <code>/data/routes/styleguide</code> and <code>/data/routes/graphql</code></li>
               <li>Delete <code>/data/dictionary/*.yml</code></li>
+              <li>Delete <code>/data/routes/styleguide</code> and <code>/data/routes/graphql</code></li>
+              <li>Delete <code>/data/content/Styleguide</code></li>
+              <li>Delete <code>/data/component-content/Styleguide</code></li>
+              <li>Delete <code>/sitecore/definitions/components/Styleguide*</code>, <code>/sitecore/definitions/templates/Styleguide*</code>, and <code>/sitecore/definitions/components/GraphQL*</code></li>
+              <li>Delete <code>graphql-let</code> command from <code>bootstrap</code> npm command in <code>package.json</code> until you create <code>.graphql</code> files</li>
+              <li>Delete <code>/src/components/*</code></li>
             </ol>
           </div>
diff --git a/samples/nextjs/src/Layout.tsx b/samples/nextjs/src/Layout.tsx
@@ -34,15 +34,17 @@ const Navigation = () => {
           href="https://jss.sitecore.com"
           target="_blank"
           rel="noopener noreferrer"
-        >
+          >
           {t('Documentation')}
         </a>
+          {/* #START_EMPTY */}
         <Link href="/styleguide">
           <a className="p-2 text-dark">{t('Styleguide')}</a>
         </Link>
         <Link href="/graphql">
           <a className="p-2 text-dark">{t('GraphQL')}</a>
         </Link>
+          {/* #END_EMPTY */}
       </nav>
     </div>
   );
@@ -80,7 +82,6 @@ const Layout = ({ context }: LayoutProps): JSX.Element => {
       <VisitorIdentification />
 
       <Navigation />
-
       {/* root placeholder for the app, which we add components to using route data */}
       <div className="container">
         <Placeholder name="jss-main" rendering={route} />