Added file writers to complete JSX/TSX deck generation.

packages/cli/package.json

@@ -27,6 +27,7 @@
   },
   "peerDependencies": {},
   "devDependencies": {
+    "spectacle": "workspace:spectacle@*",
     "@types/node": "^18.0.3",
     "nodemon": "^2.0.18",
     "rimraf": "^3.0.2",

packages/cli/src/cli.ts

@@ -5,13 +5,17 @@ import { Command } from 'commander';
 import cliSpinners from 'cli-spinners';
 import logUpdate from 'log-update';
 import {
-  writeBaseWebpackProjectFiles,
+  FileOptions,
+  writeWebpackProjectFiles,
   writeOnePageHTMLFile
-} from './templates';
+} from './templates/file-writers';
+import { version as SPECTACLE_VERSION } from 'spectacle/package.json';
 
 type CLIOptions = {
   type: 'tsx' | 'jsx' | 'mdx' | 'onepage';
   name: string;
+  lang?: string;
+  port?: number;
 };
 
 let progressInterval: NodeJS.Timer;
@@ -41,11 +45,15 @@ const main = async () => {
       'deck source type (choices: "tsx", "jsx", "mdx", "onepage")'
     )
     .requiredOption('-n, --name [name]', 'name of presentation')
+    .option(
+      '-l, --lang [lang]',
+      'language code for generated HTML document, default: en'
+    )
+    .option('-p, --port [port]', 'port for webpack dev server, default: 3000')
     .parse(process.argv);
 
   let i = 0;
-  const { type, name } = program.opts<CLIOptions>();
-  const snakeCaseName = name.toLowerCase().replace(/([^a-z0-9]+)/gi, '-');
+  const { type, name, lang = 'en', port = 3000 } = program.opts<CLIOptions>();
 
   progressInterval = setInterval(() => {
     const { frames } = cliSpinners.aesthetic;
@@ -57,24 +65,24 @@ const main = async () => {
 
   await sleep(750);
 
+  const fileOptions: FileOptions = {
+    snakeCaseName: name.toLowerCase().replace(/([^a-z0-9]+)/gi, '-'),
+    name,
+    lang,
+    port,
+    enableTypeScriptSupport: type === 'tsx',
+    spectacleVersion: SPECTACLE_VERSION
+  };
+
   switch (type) {
     case 'jsx':
-      await writeBaseWebpackProjectFiles({
-        snakeCaseName,
-        name
-      });
+      await writeWebpackProjectFiles(fileOptions);
       break;
     case 'tsx':
-      await writeBaseWebpackProjectFiles({
-        snakeCaseName,
-        name
-      });
+      await writeWebpackProjectFiles(fileOptions);
       break;
     case 'onepage':
-      await writeOnePageHTMLFile({
-        snakeCaseName,
-        name
-      });
+      await writeOnePageHTMLFile(fileOptions);
       break;
   }
 

packages/cli/src/templates/babel.ts

@@ -0,0 +1,25 @@
+type BabelTemplateOptions = {
+  enableTypeScriptSupport: boolean;
+};
+
+export const babelTemplate = (options: BabelTemplateOptions) =>
+  `{
+  "presets": [
+    ${options.enableTypeScriptSupport ? '"@babel/preset-typescript",' : ''}
+    ["@babel/preset-env", { "modules": false }],
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties"
+  ],
+  "env": {
+    "cjs": {
+      "presets": ["@babel/preset-env", "@babel/preset-react"]
+    },
+    "test": {
+      "presets": ["@babel/preset-env", "@babel/preset-react"]
+    }
+  }
+}
+`;

packages/cli/src/templates/file-writers.ts

@@ -0,0 +1,72 @@
+import path from 'path';
+import { existsSync } from 'fs';
+import { mkdir, writeFile, rm } from 'fs/promises';
+import { htmlTemplate } from './html';
+import { onePageTemplate } from './one-page';
+import { webpackTemplate } from './webpack';
+import { babelTemplate } from './babel';
+import { packageTemplate } from './package';
+import { indexTemplate } from './index';
+import { tsconfigTemplate } from './tsconfig';
+
+export type FileOptions = {
+  snakeCaseName: string;
+  name: string;
+  lang: string;
+  port: number;
+  enableTypeScriptSupport: boolean;
+  spectacleVersion: string;
+};
+
+export const writeWebpackProjectFiles = async ({
+  snakeCaseName,
+  name,
+  lang,
+  port,
+  enableTypeScriptSupport,
+  spectacleVersion
+}: FileOptions) => {
+  const outPath = path.resolve(process.cwd(), snakeCaseName);
+
+  await rm(outPath, { recursive: true, force: true });
+
+  if (existsSync(outPath)) {
+    throw new Error(`Directory named ${snakeCaseName} already exists.`);
+  }
+  await mkdir(outPath, { recursive: true });
+  await writeFile(`${snakeCaseName}/index.html`, htmlTemplate({ name, lang }));
+  await writeFile(
+    `${snakeCaseName}/webpack.config.js`,
+    webpackTemplate({ port, usesTypeScript: enableTypeScriptSupport })
+  );
+  await writeFile(
+    `${snakeCaseName}/.babelrc`,
+    babelTemplate({ enableTypeScriptSupport })
+  );
+  await writeFile(
+    `${snakeCaseName}/package.json`,
+    packageTemplate({
+      usesTypeScript: enableTypeScriptSupport,
+      name: snakeCaseName,
+      spectacleVersion
+    })
+  );
+  await writeFile(
+    `${snakeCaseName}/index.${enableTypeScriptSupport ? 'tsx' : 'jsx'}`,
+    indexTemplate({
+      usesTypeScript: enableTypeScriptSupport,
+      name
+    })
+  );
+
+  enableTypeScriptSupport &&
+    (await writeFile(`${snakeCaseName}/tsconfig.json`, tsconfigTemplate()));
+};
+
+export const writeOnePageHTMLFile = async ({
+  snakeCaseName,
+  name,
+  lang
+}: FileOptions) => {
+  await writeFile(`${snakeCaseName}.html`, onePageTemplate({ name, lang }));
+};

packages/cli/src/templates/html.ts

@@ -1,10 +1,11 @@
 type HTMLTemplateOptions = {
   name: string;
+  lang: string;
 };
 
 export const htmlTemplate = (options: HTMLTemplateOptions) => `
 <!DOCTYPE html>
-<html>
+<html lang="${options.lang}">
   <head>
     <title>${options.name}</title>
   </head>

packages/cli/src/templates/index.ts

@@ -1,29 +1,46 @@
-import path from 'path';
-import { existsSync } from 'fs';
-import { mkdir, writeFile } from 'fs/promises';
-import { htmlTemplate } from './html';
-import { onePageTemplate } from './one-page';
-
-type FileOptions = {
-  snakeCaseName: string;
+type IndexTemplateOptions = {
   name: string;
+  usesTypeScript: boolean;
 };
 
-export const writeBaseWebpackProjectFiles = async ({
-  snakeCaseName,
-  name
-}: FileOptions) => {
-  const outPath = path.resolve(process.cwd(), snakeCaseName);
-  if (existsSync(outPath)) {
-    throw new Error(`Directory named ${snakeCaseName} already exists.`);
-  }
-  await mkdir(outPath, { recursive: true });
-  await writeFile(`${snakeCaseName}/index.html`, htmlTemplate({ name }));
-};
+export const indexTemplate = (options: IndexTemplateOptions) =>
+  `import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Slide, Deck, FlexBox, Heading, SpectacleLogo, Box, FullScreen, AnimatedProgress } from 'spectacle';
 
-export const writeOnePageHTMLFile = async ({
-  snakeCaseName,
-  name
-}: FileOptions) => {
-  await writeFile(`${snakeCaseName}.html`, onePageTemplate({ name }));
-};
+const template = () => (
+  <FlexBox
+    justifyContent="space-between"
+    position="absolute"
+    bottom={0}
+    width={1}
+  >
+    <Box padding="0 1em">
+      <FullScreen />
+    </Box>
+    <Box padding="1em">
+      <AnimatedProgress />
+    </Box>
+  </FlexBox>
+);
+
+const Presentation = () => (
+  <Deck template={template}>
+    <Slide>
+      <FlexBox height="100%">
+        <Heading>${options.name}</Heading>
+      </FlexBox>
+    </Slide>
+    <Slide>
+      <FlexBox height="100%">
+        <Heading fontSize="h2">Made with</Heading>
+        <SpectacleLogo size={300} />
+      </FlexBox>
+    </Slide>
+  </Deck>
+);
+
+createRoot(document.getElementById('app')${
+    options.usesTypeScript ? '!' : ''
+  }).render(<Presentation />);
+`;

packages/cli/src/templates/one-page.ts

@@ -1,10 +1,11 @@
 type OnePageTemplateOptions = {
   name: string;
+  lang: string;
 };
 
-export const onePageTemplate = ({ name }: OnePageTemplateOptions) => `
+export const onePageTemplate = ({ name, lang }: OnePageTemplateOptions) => `
 <!DOCTYPE html>
-<html lang="en">
+<html lang="${lang}">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

packages/cli/src/templates/package.ts

@@ -0,0 +1,45 @@
+type PackageTemplateOptions = {
+  name: string;
+  spectacleVersion: string;
+  usesTypeScript: boolean;
+};
+
+export const packageTemplate = (options: PackageTemplateOptions) =>
+  `{
+  "name": "${options.name}",
+  "private": true,
+  "scripts": {
+    "start": "webpack-dev-server --hot --config ./webpack.config.js",
+    "clean": "rimraf dist",
+    "build": "webpack --config ./webpack.config.js --mode production"
+  },
+  "dependencies": {
+    "spectacle": "^${options.spectacleVersion}",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.2",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/preset-env": "^7.12.7",
+    "@babel/preset-react": "^7.16.7",
+    "babel-loader": "^8.0.6",
+    "html-webpack-plugin": "^5.3.1",
+    "style-loader": "^3.3.1",
+    "css-loader": "^5.1.3",
+    "file-loader": "^6.2.0",
+    "rimraf": "^3.0.0",
+    "webpack": "^5.68.0",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^4.7.4"${
+      options.usesTypeScript
+        ? ',\n    "typescript": "^4.5.2",' +
+          '\n    "@babel/preset-typescript": "^7.16.0",' +
+          '\n    "@types/react": "^18.0.12",' +
+          '\n    "@types/react-dom": "^18.0.5"'
+        : ''
+    }
+  }
+}
+  `;

packages/cli/src/templates/tsconfig.ts

@@ -0,0 +1,20 @@
+export const tsconfigTemplate = () =>
+  `{
+  "compilerOptions": {
+    "target": "ES6",
+    "lib": [
+      "DOM",
+      "ES2019"
+    ],
+    "jsx": "react-jsx",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "allowUmdGlobalAccess": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  }
+}
+`;

packages/cli/src/templates/webpack.ts

@@ -0,0 +1,32 @@
+type WebpackTemplateOptions = {
+  port: number;
+  usesTypeScript: boolean;
+};
+
+export const webpackTemplate = (options: WebpackTemplateOptions) =>
+  `const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  mode: 'development',
+  context: __dirname,
+  entry: './index.${options.usesTypeScript ? 'tsx' : 'jsx'}',
+  output: {
+    path: path.join(__dirname, '/dist'),
+    filename: 'app.bundle.js'
+  },
+  devServer: {
+    port: ${options.port}
+  },
+  module: {
+    rules: [
+      { test: /\\.[tj]sx?$/, use: ['babel-loader'] },
+      { test: /\\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+      { test: /\\.css$/, use: ['style-loader', 'css-loader'] }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({ template: './index.html' }),
+  ]
+};
+`;