From d2621a7124cf31515452337660b959419bbd5b22 Mon Sep 17 00:00:00 2001 From: Carlos Kelly Date: Fri, 29 Dec 2023 10:39:25 -0600 Subject: [PATCH] `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 --- .changeset/perfect-pumpkins-develop.md | 5 ++ packages/create-spectacle/src/cli.test.ts | 1 + packages/create-spectacle/src/cli.ts | 5 +- .../src/templates/file-writers.ts | 7 +- .../create-spectacle/src/templates/index.ts | 66 ++++++++++++++----- .../src/templates/markdown.ts | 8 +++ 6 files changed, 69 insertions(+), 23 deletions(-) create mode 100644 .changeset/perfect-pumpkins-develop.md diff --git a/.changeset/perfect-pumpkins-develop.md b/.changeset/perfect-pumpkins-develop.md new file mode 100644 index 000000000..774bad657 --- /dev/null +++ b/.changeset/perfect-pumpkins-develop.md @@ -0,0 +1,5 @@ +--- +'create-spectacle': patch +--- + +Fix generated Spectacle version in CLI, add custom types to MD output. diff --git a/packages/create-spectacle/src/cli.test.ts b/packages/create-spectacle/src/cli.test.ts index 2ffb5e688..5ae9ef104 100644 --- a/packages/create-spectacle/src/cli.test.ts +++ b/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', diff --git a/packages/create-spectacle/src/cli.ts b/packages/create-spectacle/src/cli.ts index b28faa30e..2a76c9153 100644 --- a/packages/create-spectacle/src/cli.ts +++ b/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) { diff --git a/packages/create-spectacle/src/templates/file-writers.ts b/packages/create-spectacle/src/templates/file-writers.ts index 6a15773fd..fef38a32b 100644 --- a/packages/create-spectacle/src/templates/file-writers.ts +++ b/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 }; }; diff --git a/packages/create-spectacle/src/templates/index.ts b/packages/create-spectacle/src/templates/index.ts index 3fa7aed13..54016333e 100644 --- a/packages/create-spectacle/src/templates/index.ts +++ b/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 = () => ( - }> - ${(options.usesMarkdown - ? `{mdContent}` - : ` + reactBody(name: string) { + return ` - ${options.name} + ${name} @@ -34,9 +35,38 @@ const Presentation = () => ( ` - ).trim()} + .substring(1) + .trim(); + }, + + mdBody() { + return ` + {mdContent} + ` + .substring(1) + .trim(); + } +}; + +export const indexTemplate = (options: IndexTemplateOptions) => + ` +${(() => { + if (options.usesMarkdown) { + return content.mdImports(); + } + return content.reactImports(); +})().trim()} + +const Presentation = () => ( + }> + ${(() => { + if (options.usesMarkdown) { + return content.mdBody(); + } + return content.reactBody(options.name); + })()} ); createRoot(document.getElementById('app')!).render(); -`; +`.trim(); diff --git a/packages/create-spectacle/src/templates/markdown.ts b/packages/create-spectacle/src/templates/markdown.ts index 4e8cf4207..6b0912900 100644 --- a/packages/create-spectacle/src/templates/markdown.ts +++ b/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();