Change the way sources are fetched during the project generation. (#662)

Author: shimkiv

.eslintignore

@@ -1,3 +1,4 @@
 node_modules
 build
 reports
+coverage

.npmignore

@@ -3,3 +3,29 @@
 
 # System
 .DS_Store
+
+# Ignore the following only in the root directory
+/.git
+/.github
+/.husky
+/playwright.config.ts
+/jest.config.js
+/.prettierrc
+/.prettierignore
+/.npmignore
+/.gitignore
+/.gitattributes
+/.eslintrc
+/.eslintignore
+/tsconfig.json
+/src/lib/**/*.test.js
+/src/lib/**/*.test.ts
+/update-changelog.sh
+
+# Allow everything within the templates/project-ts
+!/templates/project-ts/**
+
+# Ignore the following globally
+node_modules
+coverage
+tests

CHANGELOG.md

@@ -17,7 +17,14 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## Unreleased
 
-## [0.21.4](https://github.com/o1-labs/zkapp-cli/compare/0.21.3...0.21.4) - 2024-05-21
+## [0.21.5](https://github.com/o1-labs/zkapp-cli/compare/0.21.4...0.21.5) - 2024-06-06
+
+### Changed
+
+- Improved the NPM packaging and changed the way sources are fetched during the project generation. [#662](https://github.com/o1-labs/zkapp-cli/pull/662)
+  - Generic project and example templates are now fetched from the locally installed `zkapp-cli` package path (local file system copy).
+
+## [0.21.4](https://github.com/o1-labs/zkapp-cli/compare/0.21.3...0.21.4) - 2024-06-06
 
 ### Fixed
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "zkapp-cli",
-  "version": "0.21.4",
+  "version": "0.21.5",
   "description": "CLI to create zkApps (zero-knowledge apps) for Mina Protocol",
   "homepage": "https://github.com/o1-labs/zkapp-cli/",
   "keywords": [
@@ -60,7 +60,6 @@
     "fast-glob": "^3.3.2",
     "find-npm-prefix": "^1.0.2",
     "fs-extra": "^11.2.0",
-    "gittar": "^0.1.1",
     "mina-signer": "^3.0.7",
     "o1js": "^1.*",
     "opener": "^1.5.2",

package.json

@@ -1,12 +1,16 @@
 import chalk from 'chalk';
 import enquirer from 'enquirer';
 import fs from 'fs-extra';
-import gittar from 'gittar';
+import url from 'node:url';
 import ora from 'ora';
 import path from 'path';
 import shell from 'shelljs';
 import util from 'util';
 import Constants from './constants.js';
+import { setupProject } from './helpers.js';
+
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const shellExec = util.promisify(shell.exec);
 
@@ -18,6 +22,11 @@ const shellExec = util.promisify(shell.exec);
  * @return {Promise<void>}
  */
 export async function example(example) {
+  if (!shell.which('git')) {
+    console.error(chalk.red('Please ensure Git is installed, then try again.'));
+    shell.exit(1);
+  }
+
   if (!example) {
     const res = await enquirer.prompt({
       type: 'select',
@@ -44,20 +53,18 @@ export async function example(example) {
   }
 
   const dir = findUniqueDir(example);
-  const lang = 'ts';
   const isWindows = process.platform === 'win32';
 
-  if (!(await fetchProjectTemplate(dir, lang))) shell.exit(1);
-  if (!(await extractExample(example, dir, lang))) shell.exit(1);
+  if (!(await setupProject(path.join(shell.pwd().toString(), dir)))) {
+    shell.exit(1);
+  }
+  if (!(await updateExampleSources(example, dir))) {
+    shell.exit(1);
+  }
 
   // Set dir for shell commands. Doesn't change user's dir in their CLI.
   shell.cd(dir);
 
-  if (!shell.which('git')) {
-    console.error(chalk.red('Please ensure Git is installed, then try again.'));
-    shell.exit(1);
-  }
-
   await step('Initialize Git repo', 'git init -q');
 
   await step(
@@ -90,48 +97,6 @@ export async function example(example) {
   process.exit(0);
 }
 
-/**
- * Fetch project template.
- * @param {string} example     Name of the destination dir.
- * @param {string} lang        ts or js
- * @returns {Promise<boolean>} True if successful; false if not.
- */
-async function fetchProjectTemplate(name, lang) {
-  const projectName = lang === 'ts' ? 'project-ts' : 'project';
-  const step = 'Fetch project template';
-  const spin = ora(`${step}...`).start();
-
-  try {
-    const TEMP = '.temp-dir';
-    const templatePath = `templates/${projectName}`;
-
-    if (process.env.CI) {
-      shell.mkdir('-p', path.join(TEMP, templatePath));
-      shell.cp('-r', `${templatePath}/.`, path.join(TEMP, templatePath));
-    } else {
-      const src = 'github:o1-labs/zkapp-cli#main';
-      await gittar.fetch(src, { force: true });
-
-      // Note: Extract will overwrite any existing dir's contents. But we're
-      // using an always-unique name.
-      await gittar.extract(src, TEMP, {
-        filter(path) {
-          return path.includes(templatePath);
-        },
-      });
-    }
-
-    shell.mv(path.join(TEMP, templatePath), name);
-    shell.rm('-r', TEMP);
-    spin.succeed(chalk.green(step));
-    return true;
-  } catch (err) {
-    spin.fail(step);
-    console.error(err);
-    return false;
-  }
-}
-
 /**
  * Helper for any steps that need to call a shell command.
  * @param {string} step Name of step to show user
@@ -210,46 +175,40 @@ export function kebabCase(str) {
 }
 
 /**
- * Fetch an example & place in the `src` directory.
- * @param {string} example     Name of the example, as found in our GitHub repo.
+ * Updates the example sources.
+ * @param {string} example     Name of the example.
  * @param {string} name        Destination dir name.
- * @param {string} lang        ts or js
+ * @param {string} lang        ts (default) or js
  * @returns {Promise<boolean>} True if successful; false if not.
  */
-export async function extractExample(example, name, lang) {
-  const step = 'Extract example';
+export async function updateExampleSources(example, name, lang = 'ts') {
+  const step = 'Update example sources';
   const spin = ora(`${step}...`).start();
 
   try {
-    const TEMP = '.temp-dir';
-    const examplePath = `examples/${example}/${lang}/src`;
-
-    if (process.env.CI) {
-      shell.mkdir('-p', path.join(TEMP, examplePath));
-      shell.cp('-r', `${examplePath}/.`, path.join(TEMP, examplePath));
-    } else {
-      const src = 'github:o1-labs/zkapp-cli#main';
-
-      // Note: Extract will overwrite any existing dir's contents. That's ok here.
-      await gittar.extract(src, TEMP, {
-        filter(path) {
-          return path.includes(examplePath);
-        },
-      });
-    }
+    const examplePath = path.resolve(
+      __dirname,
+      '..',
+      '..',
+      'examples',
+      example,
+      lang,
+      'src'
+    );
 
     // Example not found. Delete the project template & temp dir to clean up.
-    if (isEmpty(TEMP)) {
+    if (isEmpty(examplePath)) {
       spin.fail(step);
       console.error(chalk.red('Example not found'));
-      shell.rm('-r', `${process.cwd()}/${name}`, TEMP);
       return false;
     }
 
     // Delete the project template's `src` & use the example's `src` instead.
-    shell.rm('-r', `${name}/src`);
-    shell.mv(`${TEMP}/${examplePath}`, `${name}/src`);
-    shell.rm('-r', TEMP);
+    const srcPath = path.resolve(name, 'src');
+    shell.rm('-r', srcPath);
+    // `node:fs.cpSync` instead of the `shell.cp` because `ShellJS` does not implement `cp -a`
+    // https://github.com/shelljs/shelljs/issues/79#issuecomment-30821277
+    fs.cpSync(`${examplePath}/`, `${srcPath}/`, { recursive: true });
     spin.succeed(chalk.green(step));
     return true;
   } catch (err) {