refactor: simplify create js script dApp with existing tools (#246)

* refactor: js script dApp with existing tools

* chore: update readme

Author: RetricSu

README.md

@@ -17,32 +17,6 @@ CKB local development network for your first try.
 
 There are BREAKING CHANGES between v0.3.x and v0.4.x, make sure to read the [migration guide](/docs/migration.md) before upgrading.
 
-## Table of Contents
-
-- [OffCKB](#offckb)
-- [Table of Contents](#table-of-contents)
-- [Install](#install)
-- [Usage](#usage)
-- [Get started](#get-started)
-  - [Running CKB](#running-ckb)
-  - [List scripts info](#list-scripts-info)
-  - [Tweak Devnet Config](#tweak-devnet-config)
-  - [Create a full-stack Project](#create-a-full-stack-project)
-  - [Create a script-only Project](#create-a-script-only-project)
-  - [Create a dApp-only Project](#create-a-dapp-only-project)
-  - [Build and Deploy a script](#build-and-deploy-a-script)
-  - [Start the frontend project](#start-the-frontend-project)
-  - [Debug a transaction](#debug-a-transaction)
-- [Config Setting](#config-setting)
-  - [List All Settings](#list-all-settings)
-  - [Set CKB version](#set-ckb-version)
-  - [Set Network Proxy](#set-network-proxy)
-- [Built-in scripts](#built-in-scripts)
-- [Accounts](#accounts)
-- [About CCC](#about-ccc)
-- [FAQ](#faq)
-- [Contributing](#contributing)
-
 ## Install
 
 ```sh
@@ -199,7 +173,7 @@ You can create a new script project without a frontend. This is useful when you
 offckb create <your-project-name> --script
 ```
 
-Note: you need to have rust/cargo/cargo-generate/clang 16+ installed in your environment to use this command. offckb doesn't do anything really, it just call [ckb-script-template](https://github.com/cryptape/ckb-script-templates) to do all the magic.
+Note: you need to have pnpm installed in your environment to use this command. offckb doesn't do anything really, it just call [create-js-vm-app](https://github.com/nervosnetwork/ckb-js-vm/tree/main/packages/create-app) to do all the magic.
 
 ### Create a dApp-only Project
 

src/cli.ts

@@ -11,7 +11,7 @@ import { DeployOptions, deploy } from './cmd/deploy';
 import { syncScripts } from './cmd/sync-scripts';
 import { TransferOptions, transfer } from './cmd/transfer';
 import { BalanceOption, balanceOf } from './cmd/balance';
-import { create, selectBareTemplate, CreateOption, createScriptProject, createDappProject } from './cmd/create';
+import { create, CreateOption, createScriptProject, createDAppProject } from './cmd/create';
 import { printMyScripts, DeployedScriptOption } from './cmd/my-scripts';
 import { Config, ConfigItem } from './cmd/config';
 import { debugSingleScript, debugTransaction, parseSingleScriptOption } from './cmd/debug';
@@ -40,11 +40,10 @@ program
     }
 
     if (option.dapp) {
-      return await createDappProject(name);
+      return await createDAppProject(name);
     }
 
-    const template = await selectBareTemplate();
-    return create(name, template);
+    return create(name);
   });
 
 program

src/cmd/create.ts

@@ -1,12 +1,9 @@
 import path from 'path';
 import { findFileInFolder } from '../util/fs';
-import { gitCloneAndDownloadFolderSync } from '../util/git';
 import { injectConfig } from './inject-config';
-import { select, confirm } from '@inquirer/prompts';
+import { confirm } from '@inquirer/prompts';
 import { execSync } from 'child_process';
 import { genMyScriptsJsonFile, genSystemScriptsJsonFile } from '../scripts/gen';
-import { readSettings } from '../cfg/setting';
-import { BareTemplateOption, loadBareTemplateOpts } from '../template/option';
 import { OffCKBConfigFile } from '../template/offckb-config';
 const version = require('../../package.json').version;
 
@@ -23,15 +20,15 @@ export type DappOnly = {
 export type CreateOption = ScriptOnly | DappOnly;
 
 export function createScriptProject(name: string) {
-  const cmd = `cargo generate gh:cryptape/ckb-script-templates workspace --name ${name}`;
+  const cmd = `pnpm create ckb-js-vm-app ${name}`;
   try {
     execSync(cmd, { encoding: 'utf-8', stdio: 'inherit' });
   } catch (error: unknown) {
     console.error('create script project failed, ', (error as Error).message);
   }
 }
 
-export async function createDappProject(name: string) {
+export async function createDAppProject(name: string) {
   const cmd = `npx create-ccc-app@latest ${name} --ts --}`;
   try {
     execSync(cmd, { encoding: 'utf-8', stdio: 'inherit' });
@@ -42,20 +39,26 @@ export async function createDappProject(name: string) {
   }
 }
 
-export async function create(name: string, template: BareTemplateOption) {
-  const targetPath = path.resolve(process.cwd(), name);
-  const settings = readSettings();
-  const dappTemplateFolderPath = `${settings.dappTemplate.gitFolder}/${template.value}`;
-  gitCloneAndDownloadFolderSync(
-    settings.dappTemplate.gitRepoUrl,
-    settings.dappTemplate.gitBranch,
-    dappTemplateFolderPath,
-    targetPath,
-  );
+export async function createFullstackProject(name: string) {
+  createScriptProject(name);
+  console.log("Now let's create the dapp part..");
+  const cmd = `pnpm create create-ccc-app@latest ${name}/packages/dapp --ts --}`;
+  try {
+    execSync(cmd, { encoding: 'utf-8', stdio: 'inherit' });
+    const dappFolderPath = path.resolve(process.cwd(), name, 'packages', 'dapp');
+    await askForInjectOffckbConfig(dappFolderPath);
+    return dappFolderPath;
+  } catch (error: unknown) {
+    console.error('create fullstack appp project failed, ', (error as Error).message);
+    process.exit(1);
+  }
+}
+
+export async function create(name: string) {
+  const dappFolderPath = await createFullstackProject(name);
 
   // update the version
-  const projectFolder = path.resolve(process.cwd(), name);
-  const targetConfigPath = findFileInFolder(projectFolder, 'offckb.config.ts');
+  const targetConfigPath = findFileInFolder(dappFolderPath, 'offckb.config.ts');
   if (targetConfigPath) {
     OffCKBConfigFile.updateVersion(version, targetConfigPath);
     const contractInfoFolder = OffCKBConfigFile.readContractInfoFolder(targetConfigPath);
@@ -73,23 +76,6 @@ export async function create(name: string, template: BareTemplateOption) {
   }
 }
 
-export async function selectBareTemplate() {
-  const opts = await loadBareTemplateOpts();
-
-  const answer = await select({
-    message: 'Select a bare template',
-    choices: opts.map((opt) => {
-      return {
-        name: opt.name,
-        value: opt.value,
-        description: `${opt.description}, \n[${opt.tag.toString()}]`,
-      };
-    }),
-  });
-
-  return opts.find((opt) => opt.value === answer)!;
-}
-
 export async function askForInjectOffckbConfig(dappFolderPath: string) {
   const answer = await confirm({
     message: 'Do you want to inject offckb configs in your project  so that it can work with local blockchain info?',