Initializers for samples (i.e. npm init sitecore-jss)

.vscode/settings.json

@@ -1,3 +1,11 @@
 {
     "editor.fontSize": 13,
+    "launch": {
+        "name": "Launch via npm",
+        "type": "node",
+        "request": "launch",
+        "cwd": "${workspaceFolder}/",
+        "runtimeArgs": ["run-script", "debug"],
+        at
+      }
 }

packages/create-sitecore-jss/.eslintrc

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "../../.eslintrc",
+    "../../eslint-configs/typescript"
+  ],
+  "ignorePatterns": [
+    "src/templates/**/*", 
+    "src/common/test-data/**/*"
+  ]
+}

packages/create-sitecore-jss/.gitignore

@@ -0,0 +1,2 @@
+types/
+package-lock.json

packages/create-sitecore-jss/.nycrc

@@ -0,0 +1,18 @@
+{
+  "extension": [
+    ".ts"
+  ],
+  "exclude": [
+    "**/*.d.ts",
+    "**/*.test.ts",
+    "src/templates/**/*",
+    "src/common/test-data",
+    "dist"
+  ],
+  "all": true,
+  "reporter": [
+    "json-summary",
+    "text"
+  ],
+  "require": ["ts-node/register"]
+}

packages/create-sitecore-jss/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "create-sitecore-jss",
+  "version": "20.0.0-canary.55",
+  "description": "Sitecore JSS initializer",
+  "bin": "./dist/index.js",
+  "scripts": {
+    "build": "npm run clean && tsc && ts-node ./scripts/build-templates.ts",
+    "clean": "npx rimraf -rf dist types",
+    "lint": "eslint --no-eslintrc -c .eslintrc ./src/**/*.ts",
+    "watch": "ts-node ./scripts/watch-templates.ts",
+    "test": "mocha --require ts-node/register \"./src/**/*.test.ts\"",
+    "coverage": "nyc npm test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Sitecore/jss.git",
+    "directory": "packages/create-sitecore-jss"
+  },
+  "homepage": "https://jss.sitecore.com",
+  "author": "Sitecore Corporation",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/Sitecore/jss/issues"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "cross-spawn": "^7.0.0",
+    "diff": "^5.0.0",
+    "ejs": "^3.1.6",
+    "fs-extra": "^10.0.0",
+    "glob": "^7.2.0",
+    "inquirer": "^8.2.0",
+    "minimist": "^1.2.5"
+  },
+  "devDependencies": {
+    "@types/chai": "^4.2.22",
+    "@types/cross-spawn": "^6.0.0",
+    "@types/diff": "^5.0.1",
+    "@types/ejs": "^3.1.0",
+    "@types/fs-extra": "^9.0.13",
+    "@types/glob": "^7.2.0",
+    "@types/inquirer": "^8.1.3",
+    "@types/minimist": "^1.2.2",
+    "@types/mocha": "^9.0.0",
+    "@types/node": "^16.11.7",
+    "@types/sinon": "^10.0.6",
+    "chai": "^4.3.4",
+    "chokidar": "^3.5.2",
+    "eslint": "^7.15.0",
+    "mocha": "^9.1.3",
+    "nyc": "^15.1.0",
+    "sinon": "^12.0.1",
+    "ts-node": "^10.4.0",
+    "typescript": "~4.3.5"
+  }
+}

packages/create-sitecore-jss/scripts/build-templates.ts

@@ -0,0 +1,12 @@
+import path from 'path';
+import fs from 'fs-extra';
+const templatesFolder = path.resolve(__dirname, '../src/templates');
+const distFolder = path.resolve(__dirname, '../dist/templates');
+
+// Copy templates to dist
+fs.copy(templatesFolder, distFolder, (err: Error) => {
+  if (err) {
+    console.log('An error occurred while copying the folder.');
+    throw err;
+  }
+});

packages/create-sitecore-jss/scripts/watch-templates.ts

@@ -0,0 +1,27 @@
+import chalk from 'chalk';
+import chokidar from 'chokidar';
+import path from 'path';
+import watch from '../watch.json';
+import { initRunner } from '../src/init-runner';
+
+chokidar
+  .watch(path.join(process.cwd(), '.\\src\\templates'), { ignoreInitial: true })
+  .on('ready', () => ready())
+  .on('all', (event, path) => callback(event, path));
+
+async function ready() {
+  console.log(chalk.green('Initializing app...'));
+  await initializeApps(false);
+  console.log(chalk.green('Initializing app complete. Watching for changes...'));
+}
+
+async function callback(event?: string, path?: string) {
+  const color = event === 'add' ? chalk.green : event === 'unlink' ? chalk.red : chalk.white;
+  console.table(color(`${event} ${path}`));
+  await initializeApps(true);
+}
+
+const initializeApps = async (noInstall: boolean) => {
+  const initializers = watch.initializers || [];
+  await initRunner(initializers, { ...watch.args, templates: initializers, noInstall });
+};

packages/create-sitecore-jss/src/InitializerFactory.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+import chalk from 'chalk';
+import { Initializer } from './common/Initializer';
+
+export class InitializerFactory {
+  async create(name: string): Promise<Initializer> {
+    try {
+      const { default: Initializer } = await import(
+        path.resolve(__dirname, 'initializers', name, 'index')
+      );
+      return new Initializer();
+    } catch (error) {
+      console.error(chalk.red(`Unsupported template '${name}'`));
+      throw error;
+    }
+  }
+}

packages/create-sitecore-jss/src/common/Initializer.ts

@@ -0,0 +1,12 @@
+import { BaseArgs } from './args/base';
+
+export interface InitializerResults {
+  appName: string;
+  initializers?: string[];
+  nextSteps?: string[];
+  yes?: boolean;
+}
+export interface Initializer {
+  isBase: boolean;
+  init: (args: BaseArgs) => Promise<InitializerResults>;
+}

packages/create-sitecore-jss/src/common/args/base.ts

@@ -0,0 +1,18 @@
+import { ClientAppAnswer } from '../prompts/base';
+
+type Arg = string | number | boolean;
+
+export interface BaseArgs {
+  [key: string]: Arg | Arg[] | undefined;
+  templates: string[];
+  destination: string;
+  silent?: boolean;
+  force?: boolean;
+  yes?: boolean;
+}
+
+export interface ClientAppArgs extends BaseArgs, Partial<ClientAppAnswer> {
+  appPrefix?: boolean;
+}
+
+export type NodeAppArgs = BaseArgs;

packages/create-sitecore-jss/src/common/args/styleguide.ts

@@ -0,0 +1,4 @@
+import { StyleguideAnswer } from '../prompts/styleguide';
+import { ClientAppArgs } from './base';
+
+export interface StyleguideArgs extends ClientAppArgs, Partial<StyleguideAnswer> {}

packages/create-sitecore-jss/src/common/prompts/base.ts

@@ -0,0 +1,49 @@
+import chalk from 'chalk';
+import { DistinctQuestion } from 'inquirer';
+
+export enum FetchWith {
+  GraphQL = 'GraphQL',
+  REST = 'REST',
+}
+
+export interface ClientAppAnswer {
+  appName: string;
+  fetchWith: FetchWith;
+  hostName: string;
+}
+
+export const clientAppPrompts: DistinctQuestion[] = [
+  {
+    type: 'input',
+    name: 'appName',
+    message: 'What is the name of your app?',
+    default: 'sitecore-jss-app',
+    validate: (input: string): boolean => {
+      if (!/^[a-z\-_.]+$/.test(input)) {
+        console.error(
+          chalk.red(
+            `${input} is not a valid name; you may use lowercase letters, hyphens, and underscores only.`
+          )
+        );
+        return false;
+      }
+      return true;
+    },
+  },
+  {
+    type: 'list',
+    name: 'fetchWith',
+    message: 'How would you like to fetch Layout and Dictionary data?',
+    choices: Object.values(FetchWith),
+    default: FetchWith.GraphQL,
+  },
+  {
+    type: 'input',
+    name: 'hostName',
+    message: 'What is your Sitecore hostname?',
+    default: 'https://cm.jss.localhost',
+  },
+];
+
+// node-headless-proxy, headless-ssr-exp-edge
+export const nodeAppPrompts: { [key: string]: unknown }[] = [];

packages/create-sitecore-jss/src/common/prompts/styleguide.ts

@@ -0,0 +1,31 @@
+import { Answers, DistinctQuestion } from 'inquirer';
+import chalk from 'chalk';
+
+export interface StyleguideAnswer extends Answers {
+  language?: string;
+}
+
+const LANGUAGE_REGEXP = /^(([a-z]{2}-[A-Z]{2})|([a-z]{2}))$/;
+
+export const styleguidePrompts: DistinctQuestion<StyleguideAnswer>[] = [
+  {
+    type: 'input',
+    name: 'language',
+    message:
+      'Which additional language do you want to support (en is default and required)? Leave empty if not needed',
+    validate: (input: string): boolean => {
+      if (!input) return true;
+
+      if (!LANGUAGE_REGEXP.test(input)) {
+        console.error(
+          chalk.red(
+            `${input} is not a valid code; you may use language identifier, for example 'en',\nor you can add country code, for example 'US'. The language code is then 'en-US'.`
+          )
+        );
+        return false;
+      }
+
+      return true;
+    },
+  },
+];

packages/create-sitecore-jss/src/common/steps/index.ts

@@ -0,0 +1,3 @@
+export { installPackages, lintFix } from './install';
+export { nextSteps } from './next';
+export { diffFiles, merge, transform, transformFilename } from './transform';

packages/create-sitecore-jss/src/common/steps/install.ts

@@ -0,0 +1,51 @@
+import path from 'path';
+import chalk from 'chalk';
+import { run } from '../utils/cmd';
+import { isDevEnvironment, openPackageJson } from '../utils/helpers';
+
+/**
+ * @param {string} projectFolder
+ * @param {boolean} [silent]
+ */
+export const installPackages = (projectFolder: string, silent?: boolean) => {
+  silent || console.log(chalk.cyan('Installing packages...'));
+
+  if (isDevEnvironment(projectFolder)) {
+    silent || console.log(chalk.yellow('Detected development environment.'));
+
+    run(
+      'yarn',
+      ['install'],
+      {
+        cwd: projectFolder,
+        encoding: 'utf8',
+      },
+      silent
+    );
+  } else {
+    run(
+      'npm',
+      ['install'],
+      {
+        cwd: projectFolder,
+        encoding: 'utf8',
+      },
+      silent
+    );
+  }
+};
+
+/**
+ * @param {string} projectFolder
+ * @param {boolean} [silent]
+ */
+export const lintFix = (projectFolder: string, silent?: boolean) => {
+  const packagePath = path.join(projectFolder, 'package.json');
+  const pkg = openPackageJson(packagePath);
+  if (!pkg?.scripts?.lint) {
+    return;
+  }
+
+  silent || console.log(chalk.cyan('Linting app...'));
+  run('npm', ['run', 'lint', '--', '--fix'], { cwd: projectFolder, encoding: 'utf8' });
+};

packages/create-sitecore-jss/src/common/steps/next.ts

@@ -0,0 +1,45 @@
+import chalk from 'chalk';
+
+export const nextSteps = async (appName: string, nextStepsArr: string[]) => {
+  console.log(chalk.red('                 -/oyhdmNNNNmdhyo/-                '));
+  console.log(chalk.red('             :sdMMMMMMMMMMMMMMMMMMMMds:            '));
+  console.log(chalk.red('          :yNMMMMMMMMMMMMMMMMMMMMMMMMMMNy:         '));
+  console.log(chalk.red('        /mMMMMMMMMMNdyo+//://+shmMMMMMMMMMm/       '));
+  console.log(chalk.red('      :mMMMMMMMMh+.              `:smMMMMMMMm:     '));
+  console.log(chalk.red('    `yMMMMMMMm+`                     :yMMMMMMMs`   '));
+  console.log(chalk.red('   `dMMMMMMN/                          .hMMMMMMd`  '));
+  console.log(chalk.red('  `mMMMMMMh`                          -s/+MMMMMMd` '));
+  console.log(chalk.red('  yMMMMMMh                        `:yNMMMs/MMMMMMy '));
+  console.log(chalk.red(' :MMMMMMm`                       `hMMMMMMMsoMMMMMM-'));
+  console.log(chalk.red(' yMMMMMM/                          dMMMMMMM:mMMMMMy'));
+  console.log(chalk.red(' NMMMMMN`                          oMyossss:sMMMMMm'));
+  console.log(chalk.red(' MMMMMMN                           yM:NMMMMyoMMMMMN'));
+  console.log(chalk.red(' mMMMMMM`                         :Md+MMMMMoyMMMMMm'));
+  console.log(chalk.red(' yMMMMMM+                        :NN+NMMMMM-NMMMMMy'));
+  console.log(chalk.red(' :MMMMMMN:-                    `sMdyMNymMMosMMMMMM-'));
+  console.log(chalk.red('  yMMMMMMd/o`                .oNdhmMhhMmh++MMMMMMy '));
+  console.log(chalk.red('  `dMMMMMMm+do.-         ./oyhhhNNhyNMMNosMMMMMMd` '));
+  console.log(chalk.red('   `dMMMMMMMssNdhsoo+/+oyyyydMmhhhMMMNs+mMMMMMMd`  '));
+  console.log(chalk.red('    `yMMMMMMMNyydMNddddddddddhmMMMMho+dMMMMMMMy`   '));
+  console.log(chalk.red('      :mMMMMMMMMmhhhdNMMMMMMMMmhssohMMMMMMMMm:     '));
+  console.log(chalk.red('        /mMMMMMMMMMMNdhyyyyyyyhmMMMMMMMMMMm/       '));
+  console.log(chalk.red('          :yNMMMMMMMMMMMMMMMMMMMMMMMMMMNy:         '));
+  console.log(chalk.red('             :sdMMMMMMMMMMMMMMMMMMMMds:            '));
+  console.log(chalk.red('                `-/oyhdmNNNNmdhyo/-                '));
+  console.log();
+  console.log(chalk.white('                      __________'));
+  console.log(chalk.white('                  __ / / __/ __/'));
+  console.log(chalk.white('                 / // /\\ \\_\\ \\  '));
+  console.log(chalk.white('                 \\___/___/___/'));
+  console.log();
+  console.log(`JSS application ${chalk.green(appName)} is ready!`);
+  console.log();
+  console.log(chalk.yellow('Next steps:'));
+  nextStepsArr.forEach((step) => {
+    console.log(step);
+  });
+  console.log('* Enable source control (i.e. git init) (optional)');
+  console.log('* Check out the JSS documentation at https://jss.sitecore.com');
+  console.log();
+  console.log(chalk.green('Enjoy!'));
+};