update templates/react-counter & Refactor create-rooch (rooch-network#1743)

* Refactor create-rooch & update templates

* rm test val

Author: wow-sven

pnpm-lock.yaml

@@ -2,9 +2,9 @@ packages:
   - 'infra/dashboard/**'
   - 'infra/rooch-portal/**'
   - 'grow-rooch/**'
-  # TODO: sdk/** There is a compilation conflict with dashboard
   - 'sdk/typescript/build-scripts'
   - 'sdk/typescript/rooch-sdk'
   - 'sdk/typescript/rooch-sdk-kit'
   - 'sdk/typescript/templates/**'
+  - 'sdk/typescript/rooch-create'
   - 'docs/**'

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+// Copyright (c) RoochNetwork
+// SPDX-License-Identifier: Apache-2.0
+require('../dist/index.js');

sdk/typescript/rooch-create/bin/index.js

@@ -1,33 +1,39 @@
 {
   "name": "@roochnetwork/create-rooch",
-  "version": "0.0.6",
+  "version": "0.1.1",
   "description": "Create a new Rooch project",
   "license": "Apache-2.0",
   "author": "Rooch.network <[email protected]>",
   "bin": {
-    "rooch": "dist/index.js"
+    "rooch": "./bin/index.js"
   },
-  "files": ["dist"],
+  "files": ["dist", "bin"],
+  "type": "commonjs",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/cjs/index.d.ts",
   "scripts": {
     "build": "pnpm run build:js",
-    "build:js": "tsup && ./scripts/copy-templates.sh",
-    "clean": "pnpm run clean:js",
-    "clean:js": "rimraf dist",
-    "dev": "tsup --watch",
-    "prepublishOnly": "npm run clean && npm run build",
-    "test": "pnpm run test:react",
-    "test:ci": "pnpm run test",
-    "test:react": "dist/cli.js test-project --template react && rimraf test-project"
+    "build:js": "tsc --build && ./scripts/copy-templates.sh",
+    "clean": "rm -rf tsconfig.tsbuildinfo ./dist",
+    "prepublishOnly": "pnpm build",
+    "prettier:check": "prettier -c --ignore-unknown .",
+    "prettier:fix": "prettier -w --ignore-unknown .",
+    "eslint:check": "eslint --max-warnings=0 .",
+    "eslint:fix": "pnpm run eslint:check --fix",
+    "lint": "pnpm run eslint:check && pnpm run prettier:check",
+    "lint:fix": "pnpm run eslint:fix && pnpm run prettier:fix"
   },
   "dependencies": {
-    "create-create-app": "git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63"
+    "typescript": "^5.1.6",
+    "enquirer": "^2.4.1"
   },
   "devDependencies": {
-    "@types/node": "^18.15.13",
-    "tsup": "^6.7.0"
+    "@types/node": "^18.15.13"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
-  }
+  },
+  "sideEffects": false
 }

sdk/typescript/rooch-create/dist/index.js

@@ -2,20 +2,48 @@
 # Copyright (c) RoochNetwork
 # SPDX-License-Identifier: Apache-2.0
 
-#!/usr/bin/env bash
-# Copyright (c) RoochNetwork
-# SPDX-License-Identifier: Apache-2.0
-
 # Find git-aware template files (ignores things like node_modules, etc.)
 # and copy them to dist/templates
 git ls-files ../templates/ | rsync --files-from=- ../ dist
 
-# Replace all Rooch package links with mustache placeholder used by create-create-app
-# that will be replaced with the latest Rooch version number when the template is used
+# Function to get the latest version from NPM
+get_latest_version() {
+  local package_name=$1
+  npm show "$package_name" version
+}
+
+# Find all package.json files
 find ./dist/templates/* -name "package.json" -type f | while read -r file; do
   echo "Before replacement in $file:"
   cat "$file"
-  perl -pi -e 's|"(?=@roochnetwork)([^"]+)":\s*"link:[^"]+"|"\1": "{{rooch-version}}"|g' "$file"
+
+  # Read the package.json content
+  content=$(cat "$file")
+
+  # Extract all @roochnetwork packages with link: or workspace: versions
+  packages=$(echo "$content" | jq -r '
+    .dependencies // {} | to_entries |
+    map(select(.key | test("^@roochnetwork/")) | select(.value | test("^link:|^workspace:"))) |
+    .[].key
+  ')
+
+  if [ -z "$packages" ]; then
+    echo "No @roochnetwork packages to update."
+    continue
+  fi
+
+  updated_content=$content
+
+  # Iterate over each package to update its version
+  for package in $packages; do
+    latest_version=$(get_latest_version "$package")
+    updated_content=$(echo "$updated_content" | jq --arg package "$package" --arg version "$latest_version" '
+      .dependencies[$package] = $version
+    ')
+  done
+
+  echo "$updated_content" > "$file"
+
   echo "After replacement in $file:"
   cat "$file"
   echo

sdk/typescript/rooch-create/dist/templates/react/package.json

@@ -2,32 +2,112 @@
 // Copyright (c) RoochNetwork
 // SPDX-License-Identifier: Apache-2.0
 
-import { create } from 'create-create-app'
-import { resolve } from 'path'
-import packageJson from '../package.json'
-
-const templateRoot = resolve(__dirname, '..', 'dist', 'templates')
-
-// See https://github.com/uetchy/create-create-app/blob/master/README.md for other options.
-
-create('create-rooch', {
-  templateRoot,
-  defaultTemplate: 'react',
-  // templates use pnpm workspaces, so default to that for now
-  // not sure if it's worth trying to support multiple kinds of package managers for monorepos, given the tooling is so different
-  defaultPackageManager: 'pnpm',
-  promptForDescription: false,
-  promptForAuthor: false,
-  promptForEmail: false,
-  promptForLicense: false,
-  promptForTemplate: true,
-  caveat: ({ answers, packageManager }) =>
-    `Done! Play in the rooch with \`cd ${answers.name}\` and \`${packageManager} run dev\``,
-  extra: {
-    'rooch-version': {
-      type: 'input',
-      describe: 'The version of Rooch packages to use, defaults to latest',
-      default: packageJson.version,
+import { existsSync, statSync } from 'fs';
+import { mkdir, readdir, readFile, writeFile } from 'fs/promises';
+import { relative, resolve } from 'path';
+import { parseArgs } from 'util';
+import { prompt } from 'enquirer';
+
+const { values: args } = parseArgs({
+  options: {
+    template: {
+      type: 'string',
+      default: '',
+      short: 't',
     },
   },
-})
+});
+
+async function main() {
+  const results = await prompt<{
+    template: string;
+    dAppName: string;
+  }>(
+    [
+      {
+        type: 'select',
+        name: 'template',
+        message: 'Which starter template would you like to use?',
+        choices: [
+          {
+            name: 'react-counter',
+            hint: 'React dApp with a move smart contract that implements a distributed counter',
+          },
+        ],
+      },
+      {
+        type: 'input',
+        name: 'dAppName',
+        message: 'What is the name of your dApp? (this will be used as the directory name)',
+        initial: 'my-first-dapp',
+      },
+    ].filter((question) => !args[question.name as 'template']),
+  );
+
+  const outDir = resolve(process.cwd(), results.dAppName);
+
+  if (existsSync(outDir)) {
+    throw new Error(`Directory ${outDir} already exists`);
+  }
+
+  const files = await collectFiles(results.template ?? args.template, results.dAppName);
+  await writeFiles(files, outDir);
+}
+
+main();
+
+async function collectFiles(template: string, dAppName: string) {
+  // const dependencies = await getDependencyVersions();
+  const templateDir = resolve(__dirname, '../dist/templates', template);
+  const files = new Array<{
+    path: string;
+    content: Buffer;
+  }>();
+
+  if (!statSync(templateDir).isDirectory()) {
+    throw new Error(`Template ${templateDir} could not be found`);
+  }
+
+  await addDir(templateDir);
+
+  return files;
+
+  async function addDir(dir: string) {
+    const entries = await readdir(dir);
+
+    for (const entry of entries) {
+      if (entry === 'node_modules') {
+        continue;
+      }
+      const entryPath = resolve(dir, entry);
+      const stat = statSync(entryPath);
+
+      if (stat.isDirectory()) {
+        await addDir(entryPath);
+      } else {
+        let content = await readFile(entryPath);
+
+        if (entry === 'package.json') {
+          const json = JSON.parse(content.toString());
+          json.name = dAppName;
+
+          content = Buffer.from(JSON.stringify(json, null, 2));
+        }
+
+        files.push({ path: relative(templateDir, entryPath), content });
+      }
+    }
+  }
+}
+
+async function writeFiles(files: Array<{ path: string; content: Buffer }>, outDir: string) {
+  for (const file of files) {
+    const filePath = resolve(outDir, file.path);
+    const dirPath = resolve(filePath, '..');
+    if (!existsSync(dirPath)) {
+      await mkdir(dirPath, { recursive: true });
+    }
+
+    await writeFile(filePath, file.content);
+  }
+}

sdk/typescript/rooch-create/package.json

@@ -1,13 +1,14 @@
 {
-  "exclude": ["dist"],
+  "extends": "../build-scripts/tsconfig.shared.json",
+  "include": ["src"],
   "compilerOptions": {
-    "target": "es2020",
-    "module": "commonjs",
-    "declaration": true,
-    "inlineSourceMap": true,
-    "outDir": "./dist",
-    "strict": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true
-  }
+    "target": "ES2020",
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "outDir": "dist",
+    "isolatedModules": true,
+    "rootDir": "src",
+    "emitDeclarationOnly": false
+  },
+  "references": [{ "path": "../rooch-sdk" }, { "path": "../rooch-sdk-kit" }]
 }

sdk/typescript/rooch-create/scripts/copy-templates.sh

@@ -0,0 +1,2 @@
+node_modules
+dist

sdk/typescript/rooch-create/src/index.ts

@@ -0,0 +1,41 @@
+# Rooch dApp Starter Template
+
+This dApp was created using `@roochnetwork/create-rooch` that sets up a simple React
+Client dApp using the following tools:
+
+- [React](https://react.dev/) as the UI framework
+- [TypeScript](https://www.typescriptlang.org/) for type checking
+- [Vite](https://vitejs.dev/) for build tooling
+- [Radix UI](https://www.radix-ui.com/) for pre-built UI components
+- [ESLint](https://eslint.org/) for linting
+- [@roochnetwork/rooch-sdk](https://www.npmjs.com/package/@roochnetwork/rooch-sdk) 
+- [@roochnetwork/rooch-sdk-kit](https://www.npmjs.com/package/@roochnetwork/rooch-sdk-kit) for connecting to
+  wallets and loading data
+- [pnpm](https://pnpm.io/) for package management
+
+We can ensure we have some Gss in our new wallet by requesting Gas from the [faucet doc](https://rooch.network/learn/portal) Receive Gas chapter
+
+## Install [rooch cli doc](https://rooch.network/zh-CN/build/getting-started/installation)
+## Publish [counter package doc](https://github.com/rooch-network/rooch/tree/main/examples/counter)
+
+## Starting your dApp
+
+To install dependencies you can run
+
+```bash
+pnpm install
+```
+
+To start your dApp in development mode run
+
+```bash
+pnpm dev
+```
+
+## Building
+
+To build your app for deployment you can run
+
+```bash
+pnpm build
+```