create-spectacle CLI: Fix generated spectacle version, add custom types for MD build. (#1313)

* Fix generated Spectacle version in CLI, add custom types to MD output.

* Changeset

* Use require() for JSON import

* Update cli.test.ts

Author: carloskelly13

.changeset/perfect-pumpkins-develop.md

@@ -0,0 +1,5 @@
+---
+'create-spectacle': patch
+---
+
+Fix generated Spectacle version in CLI, add custom types to MD output.

packages/create-spectacle/src/cli.test.ts

@@ -77,6 +77,7 @@ describe('create-spectacle', () => {
       '.babelrc',
       '.gitignore',
       'README.md',
+      'custom.d.ts',
       'index.html',
       'index.tsx',
       'package.json',

packages/create-spectacle/src/cli.ts

@@ -14,9 +14,8 @@ import {
   writeOnePageHTMLFile,
   writeViteProjectFiles
 } from './templates/file-writers';
-// @ts-ignore
-import { devDependencies } from '../package.json';
 
+const spectaclePackage = require(`${__dirname}/../spectacle-package.json`);
 const argv = yargs(hideBin(process.argv)).argv;
 const cwd = process.cwd();
 
@@ -176,7 +175,7 @@ const main = async () => {
     lang,
     port,
     isVite: /vite$/.test(type),
-    spectacleVersion: devDependencies.spectacle
+    spectacleVersion: spectaclePackage.version
   };
 
   switch (type) {

packages/create-spectacle/src/templates/file-writers.ts

@@ -10,7 +10,7 @@ import { gitignoreTemplate } from './gitignore';
 import { readmeTemplate } from './readme';
 import { viteConfigTemplate } from './viteConfig';
 import { createOnePage } from '../generators/one-page';
-import { markdownTemplate } from './markdown';
+import { markdownCustomTypesTemplate, markdownTemplate } from './markdown';
 
 export type FileOptions = {
   snakeCaseName: string;
@@ -52,7 +52,10 @@ const prepForProjectWrite = async (fileOptions: FileOptions) => {
   await writeFile(pathFor('README.md'), readmeTemplate({ name, isVite }));
   await writeFile(pathFor('tsconfig.json'), tsconfigTemplate());
   fileOptions.useMarkdownSlides &&
-    (await writeFile(pathFor('slides.md'), markdownTemplate({ name })));
+    (await Promise.all([
+      writeFile(pathFor('custom.d.ts'), markdownCustomTypesTemplate()),
+      writeFile(pathFor('slides.md'), markdownTemplate({ name }))
+    ]));
 
   return { outPath, pathFor };
 };

packages/create-spectacle/src/templates/index.ts

@@ -3,28 +3,29 @@ type IndexTemplateOptions = {
   usesMarkdown: boolean;
 };
 
-const tsxImports = `
-import { Deck, DefaultTemplate, Slide, FlexBox, Heading, SpectacleLogo } from 'spectacle';
-`;
+const content = {
+  reactImports() {
+    return `
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Deck, DefaultTemplate, Slide, FlexBox, Heading, SpectacleLogo } from 'spectacle'
+    `;
+  },
 
-const mdImports = `
+  mdImports() {
+    return `
+import React from 'react';
+import { createRoot } from 'react-dom/client';
 import { Deck, DefaultTemplate, MarkdownSlideSet } from 'spectacle';
 import mdContent from './slides.md';
-`;
-
-export const indexTemplate = (options: IndexTemplateOptions) =>
-  `import React from 'react';
-import { createRoot } from 'react-dom/client';
-${(options.usesMarkdown ? mdImports : tsxImports).trim()}
+    `;
+  },
 
-const Presentation = () => (
-  <Deck template={() => <DefaultTemplate />}>
-    ${(options.usesMarkdown
-      ? `<MarkdownSlideSet>{mdContent}</MarkdownSlideSet>`
-      : `
+  reactBody(name: string) {
+    return `
     <Slide>
       <FlexBox height="100%">
-        <Heading>${options.name}</Heading>
+        <Heading>${name}</Heading>
       </FlexBox>
     </Slide>
     <Slide>
@@ -34,9 +35,38 @@ const Presentation = () => (
       </FlexBox>
     </Slide>
     `
-    ).trim()}
+      .substring(1)
+      .trim();
+  },
+
+  mdBody() {
+    return `
+    <MarkdownSlideSet>{mdContent}</MarkdownSlideSet>
+    `
+      .substring(1)
+      .trim();
+  }
+};
+
+export const indexTemplate = (options: IndexTemplateOptions) =>
+  `
+${(() => {
+  if (options.usesMarkdown) {
+    return content.mdImports();
+  }
+  return content.reactImports();
+})().trim()}
+
+const Presentation = () => (
+  <Deck template={() => <DefaultTemplate />}>
+    ${(() => {
+      if (options.usesMarkdown) {
+        return content.mdBody();
+      }
+      return content.reactBody(options.name);
+    })()}
   </Deck>
 );
 
 createRoot(document.getElementById('app')!).render(<Presentation />);
-`;
+`.trim();

packages/create-spectacle/src/templates/markdown.ts

@@ -10,3 +10,11 @@ export const markdownTemplate = (options: TemplateOptions) =>
 ---
 - Made with Spectacle
 `.trim();
+
+export const markdownCustomTypesTemplate = () =>
+  `
+declare module '*.md' {
+  const content: string;
+  export default content;
+}
+`.trim();