shoplazza-cli 1.0.7 → 1.0.8

package/README.md

@@ -56,9 +56,9 @@ You  can use Shoplazza CLI  to develop checkout, customized checkout page as you
 #### Step 1: 创建一个项目模板
 
 创建过程会要求你输入店铺地址和token，token可以在后台中应用->管理私有应用->创建应用 获得。创建过程还要求你输入一个extension名字，一个项目下支持存在多个extension，这是为了方便管理，它们互不影响。
-```
+```bash
 shoplazza checkout create
-// 安装依赖
+# 安装依赖
 npm i
 ```
 
@@ -164,6 +164,87 @@ $ shoplazza theme list
 
 > You might want to use a theme's ID to pull, push, publish, or delete a theme using Shoplazza CLI.
 
+
+
+## Theme Extension Develop
+
+### Overview
+
+Theme Extension is a method provided by Shoplazza for extending and customizing themes. Developers can use Theme Extensions to enhance and tailor theme pages.
+
+### Create an Extension
+
+```bash
+shoplazza te create  
+```
+
+When creating a new Theme Extension, you will be prompted to choose between two types: **Basic Extension** and **Embed Extension**.
+
+- **Basic Extension**: Allows modifying insertion positions via the theme editor.
+- **Embed Extension**: Insertion positions are hard-coded within the Extension.
+
+### Start Development
+
+```bash
+cd your-project  # Navigate to the project directory
+shoplazza te serve  
+```
+
+Since the Extension is displayed on theme pages, so you need to select a theme for preview. A preview link will be provided after selection.
+
+- **First link**: Redirects to the theme editor. You can add the Extension to theme pages here. After adding, save the changes to preview on the client side.
+- **Second link**: Redirects to the storefront preview page. After adding the Extension via the editor, any local code updates will take effect upon refreshing the storefront page.
+
+### Build for Production
+
+```bash
+shoplazza te build  
+```
+
+Generates a deployable production build from the current project code. Multiple builds can be created, and one can be selected during deployment.
+
+### Deploy an Extension
+
+To deploy an Extension to your store:
+
+```bash
+shoplazza te deploy  
+```
+
+Once deployed, the Extension will be live in the store.
+
+### Connect Extension to an APP
+
+An APP is the primary extension method of Shoplazza platform. A Theme Extension is part of an APP, and one APP can connect multiple Theme Extensions. To conect your Extension to an APP:
+
+```bash
+shoplazza te connect
+```
+
+You will be prompted to enter the APP's `client_id` and `client_secret`, which can be obtained from the Shoplazza Partner Dashboard.
+
+### Release an Extension
+To update the Extension version connected to your app, run the release command:
+
+```bash
+shoplazza te release  
+```
+
+The release will be based on the current production version of your store. Once published, the changes will take effect for **all stores that have installed your app**.
+
+### CLI Command Guide
+
+|                Command                |                  Description                   |
+| :-----------------------------------: | :--------------------------------------------: |
+|         `shoplazza te create`         |      Create a new Theme Extension project      |
+|         `shoplazza te serve`          |        Start a local development server        |
+|         `shoplazza te build`          |  Build a production version of the Extension   |
+|        `shoplazza te versions`        |  View production version list of an Extension  |
+|          `shoplazza te list`          |      List private Extensions in the store      |
+|         `shoplazza te deploy`         | Deploy a production build to the current store |
+| `shoplazza te connect <extension-id>` |          Bind an Extension to an APP           |
+|        `shoplazza te release`         |     Publish an Extension to its bound APP      |
+
 ## Core commands
 
 ### help

package/bin/shoplazza

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
 process.noDeprecation = true; // 全局禁用废弃警告
+require('../lib/check');
 const { program } = require('commander');
 const updateNotifier = require('update-notifier');
 const Sentry = require('@sentry/node');
@@ -10,8 +11,8 @@ const report = require('../lib/report');
 require('../lib/tracing');
 
 const { makeCheckoutCommand } = require('../lib/checkout');
-
-const { generateExtension, deployExtension, publishExtension, buildExtension, retry } = require('../lib/app');
+const { initThemeAppCommand } = require('../lib/app');
+const { makeFunctionCommand } = require('../lib/function');
 
 Sentry.init({
   dsn: 'https://89964605acaf4db8839f2d5237396d6c@sentry.shoplazza.com/730',
@@ -30,6 +31,7 @@ updateNotifier({ pkg }).notify({
   isGlobal: true
 });
 program.usage('[command] [options]');
+program.option('--debug <ent>', 'debug mode')
 
 program.command('version').description('Welcome to the Shoplazza CLI').action(require('../lib/commands/version'));
 program.description('Welcome to the Shoplazza CLI').option('-v --version').action(require('../lib/commands/version'));
@@ -113,21 +115,12 @@ theme
   .option('-t, --theme <theme>', 'The ID of the theme that you want to delete.')
   .action(require('../lib/commands/theme/delete'));
 
-const app = program.command('app').description('Shoplazza app extensions cli');
-
-app.command('generate').command('extension').description('Generate your extension').action(generateExtension);
-app.command('deploy').command('extension').description('Deploy your extension to cdn').action(deployExtension);
-app.command('publish').command('extension').description('Publish your extension').action(publishExtension);
-app.command('build').description('Build your extension').action(buildExtension);
-app
-  .command('retry')
-  .description('Retry to do some tasks.')
-  .option('-p, --partner', 'Retry get and choose your partner list.')
-  .option('-a, --app', 'Retry get and choose your app list.')
-  .action(retry);
-
 // checkout cli
 makeCheckoutCommand(program);
+// theme app cli
+initThemeAppCommand(program);
+// function cli
+makeFunctionCommand(program);
 
 program.parse(process.argv);
 !program.args.length && program.help();

package/lib/app/api/index.js

@@ -0,0 +1,96 @@
+const instance = require('../../openAPI/index');
+const request = require('../../partner-api/axios');
+
+/**
+ * 获取主题列表
+ */
+async function getThemeList() {
+  return instance.get('/themes');
+}
+
+/**
+ * 获取店铺私有主题插件列表
+ * @returns
+ */
+async function getThemeAppList() {
+  return instance.get('/theme-extensions');
+}
+
+/**
+ * 创建主题插件 or 更新主题插件信息
+ */
+async function toCreateThemeApp(data) {
+  return instance.put('/theme-extensions', data);
+}
+
+/**
+ * 上传主题插件
+ */
+async function toUploadThemeApp(extension_id, data) {
+  return instance.patch(`/theme-extensions/${extension_id}/dev-doctree`, data);
+}
+
+/**
+ * 新增文件
+ */
+async function toCreateFile(extension_id, data) {
+  return instance.post(`/theme-extensions/${extension_id}/dev-doc`, data);
+}
+
+/**
+ * 更新文件
+ */
+async function toUpdateFile(extension_id, data) {
+  return instance.patch(`/theme-extensions/${extension_id}/dev-doc`, data);
+}
+
+/**
+ * 删除文件
+ */
+async function toDeleteFile(extension_id, params) {
+  return instance.delete(`/theme-extensions/${extension_id}/dev-doc`, {
+    params
+  });
+}
+
+/**
+ * 获取任务状态
+ */
+async function getTaskStatus(data) {
+  return instance.get(`/theme-extensions/version-tasks/${data.taskId}`);
+}
+
+/**
+ * 获取主题插件版本列表
+ */
+async function getThemeAppVersionList(extension_id) {
+  return instance.get(`/theme-extensions/${extension_id}/versions`);
+}
+
+/**
+ * 创建主题插件版本
+ */
+async function toCreateThemeAppVersion(data) {
+  return instance.post(`/theme-extensions/version-tasks`, data);
+}
+
+/**
+ * 部署主题插件
+ */
+async function toDeployThemeApp(data) {
+  return instance.post(`/theme-extensions/publications`, data);
+}
+
+module.exports = {
+  getThemeList,
+  getThemeAppList,
+  toCreateThemeApp,
+  toCreateFile,
+  toUpdateFile,
+  toDeleteFile,
+  toUploadThemeApp,
+  getThemeAppVersionList,
+  toCreateThemeAppVersion,
+  toDeployThemeApp,
+  getTaskStatus,
+};

package/lib/app/commands/build.js

@@ -1,66 +1,114 @@
 const chalk = require('chalk');
+const inquirer = require('inquirer');
 const ora = require('ora');
-const fs = require('fs-extra');
-const path = require('path');
+const fsExtra = require('fs-extra');
+const { getThemeExtensionConfig, compareVersions, compress } = require('../utils');
+const { THEME_APP_DIR_PATH, EXCHANGE_TOKEN, STORE_DOMAIN } = require('../utils/config');
+const { getThemeAppVersionList, toCreateThemeAppVersion, getTaskStatus } = require('../api');
+const { useOss } = require('../../oss');
 
-const { zipTheme } = require('../../utils');
-const { line, done } = require('../log');
-const { buildThemeAssets } = require('../extensions/theme-app');
+async function createNewVersion(extensionId, version, description) {
+  const spinner = ora('Start building a new version...').start();
+  const { zipPath, zipName } = await compress(THEME_APP_DIR_PATH);
+  const { uploadOss } = useOss(
+    EXCHANGE_TOKEN,
+    STORE_DOMAIN,
+    `✗ No store found. Please run ${chalk.cyan('shoplazza login')} to login to a specific store.`
+  );
+  const zipOssUrl = await uploadOss(zipPath, zipName);
+  // 上传完成删除压缩包
+  fsExtra.removeSync(zipPath);
+  const res = await toCreateThemeAppVersion({
+    extension_id: extensionId,
+    version,
+    exts: description,
+    resource_url: zipOssUrl
+  });
+  const taskId = res.data?.task_id;
 
-const isFileExist = (path) => {
-  return fs.existsSync(path);
-};
-
-const clearManifest = async () => {
-  try {
-    if (isFileExist('./assets-manifest.json') && isFileExist('./assets')) {
-      const mainfest = JSON.parse(fs.readFileSync('./assets-manifest.json', { encoding: 'utf-8' }));
-      await Promise.all(
-        Object.values(mainfest).map((path) => {
-          if (isFileExist(path)) {
-            return fs.unlink(path);
-          }
-          return Promise.resolve(true);
-        })
-      );
-      await fs.unlink('./assets-manifest.json');
-    }
-    return true;
-  } catch (e) {
-    console.log(e);
+  if (!taskId) {
+    spinner.fail(chalk.red(`Failed to build a new version!`));
+    throw new Error('taskId is required');
   }
-};
+  return new Promise((resolve, reject) => {
+    const timer = setInterval(async () => {
+      const res = await getTaskStatus({ taskId });
+      if (res.data?.state === 1) {
+        clearInterval(timer);
+        spinner.succeed(chalk.green(`Successfully build a new version(v${version})!`));
+        resolve();
+      } else if (res.data?.state === 2) {
+        clearInterval(timer);
+        spinner.fail(chalk.red(`Failed to build a new version!`));
+        reject(new Error(res.data?.message));
+      } else {
+        spinner.text = chalk.blue(`[WAITING] Building a new version...`);
+      }
+    }, 1000);
+  });
+}
 
-const getZipName = () => {
-  return path.basename(process.cwd());
-};
+/**
+ * 交互式命令行
+ */
+async function usePrompt(extensionId) {
+  const res = await getThemeAppVersionList(extensionId);
 
-const generateZip = async (name) => {
-  const zipPath = `${process.cwd()}/${name}.zip`;
-  isFileExist(zipPath) && (await fs.unlink(zipPath));
-  zipTheme(process.cwd(), name);
-};
+  const latestVersion = res.data?.data?.[0];
 
-const zipApp = async () => {
-  const spinner = ora(chalk.cyan('Building your app and generate zip package ...')).start();
-  try {
-    const zipName = getZipName();
-    await generateZip(zipName);
-    spinner.succeed(chalk.cyan(`Success to build your app and generate zip package: ${chalk.green(`${zipName}.zip`)}`));
-    return true;
-  } catch (e) {
-    spinner.fail(e.message);
+  if (latestVersion) {
+    console.log(
+      chalk.cyanBright(`\n🔍 Latest version: `) +
+        chalk.yellow(`${latestVersion.version} `) +
+        chalk.white(`(${latestVersion.exts})`) +
+        chalk.gray(` [Released on: ${latestVersion.created_at}]`)
+    );
   }
-};
 
-const build = async () => {
-  line();
-  (await clearManifest()) && (await buildThemeAssets('./assets')) && (await zipApp());
-  done();
-  line();
-};
+  return inquirer.prompt([
+    {
+      type: 'input',
+      name: 'newVersion',
+      message: 'Enter the new version number(e.g., 1.0.0):',
+      validate: (newVersion) => {
+        if (!/^[0-9]+\.[0-9]+\.[0-9]+$/.test(newVersion)) {
+          return chalk.red('❌ Version must follow the format X.Y.Z (e.g., 1.0.0).');
+        }
+        if (latestVersion) {
+          if (compareVersions(newVersion, latestVersion.version) !== 1) {
+            return chalk.red('❌ Version must be greater than the latest version.');
+          }
+        }
+        return true;
+      }
+    },
+    {
+      type: 'input',
+      name: 'description',
+      message: 'Enter the description for this version:',
+      validate: (description) => {
+        if (!description.trim()) {
+          return chalk.red('❌ Description cannot be empty.');
+        }
+        return true;
+      }
+    }
+  ]);
+}
+
+async function build() {
+  try {
+    const { extensionId } = await getThemeExtensionConfig();
+    if (!extensionId) {
+      throw new Error('ExtensionId is empty, please use `serve` command first.');
+    }
+    const { newVersion, description } = await usePrompt(extensionId);
+    await createNewVersion(extensionId, newVersion, description);
+  } catch (error) {
+    console.error(chalk.red(`[ERROR IN BUILD] ${error.message}`));
+  }
+}
 
 module.exports = {
-  build,
-  getZipName
+  build
 };

package/lib/app/commands/connect.js

@@ -0,0 +1,73 @@
+const chalk = require('chalk');
+const inquirer = require('inquirer');
+const { getThemeExtensionConfig, setThemeExtensionConfig } = require('../utils');
+const { toConnectApp } = require('../../partner-api/index');
+
+/**
+ * 交互式命令行
+ */
+async function usePrompt() {
+  return await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'clientId',
+      message: 'Please enter the shoplazza app Client ID:',
+      prefix: '*',
+      validate: (clientId) => {
+        if (!clientId.trim()) {
+          return 'Client ID cannot be empty';
+        }
+        return true;
+      }
+    },
+    {
+      type: 'input',
+      name: 'clientSecret',
+      message: 'Please enter the shoplazza app Client Secret:',
+      prefix: '*',
+      validate: (clientSecret) => {
+        if (!clientSecret.trim()) {
+          return 'Client Secret cannot be empty';
+        }
+        return true;
+      }
+    }
+  ]);
+}
+
+async function connectToApp() {
+  try {
+    let { extensionId, appId, accessToken } = await getThemeExtensionConfig();
+    if (!extensionId) {
+      throw new Error('ExtensionId is empty, please use `serve` command first.');
+    }
+
+    if (!accessToken) {
+      const result = await usePrompt();
+      appId = result.clientId;
+      appSecret = result.clientSecret;
+      await setThemeExtensionConfig({
+        appId,
+        appSecret
+      });
+    }
+
+    const res = await toConnectApp({
+      extensionId,
+      appId
+    });
+
+    if (+res.data?.code === 200) {
+      console.log(chalk.green('Connected to the Shoplazza app successfully!'));
+      console.log(chalk.cyan('You can use the `release` command to release a specific version to the Shoplazza app.'));
+    } else if (+res.data?.code === 400) {
+      console.log(chalk.green(res.data?.message));
+    }
+  } catch (error) {
+    console.error(chalk.red(`[ERROR IN CONNECT] ${error.message}`));
+  }
+}
+
+module.exports = {
+  connect: connectToApp
+};

package/lib/app/commands/create.js

@@ -0,0 +1,105 @@
+const inquirer = require('inquirer');
+const path = require('path');
+const fsExtra = require('fs-extra');
+const chalk = require('chalk');
+const { WORKSPACE_PATH, THEME_APP_TYPE } = require('../utils/config');
+const { replacePlaceholders, renameFile } = require('../utils');
+
+/**
+ * 交互式命令行
+ */
+async function usePrompt() {
+  return await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'themeAppType',
+      message: 'Select theme extension type:',
+      choices: [THEME_APP_TYPE.BASIC_APP.description, THEME_APP_TYPE.EMBEDS_APP.description],
+      prefix: '*'
+    },
+    {
+      type: 'input',
+      name: 'projectName',
+      message: 'Please enter the theme extension project name:',
+      prefix: '*',
+      validate: (projectName) => {
+        if (!projectName.trim()) {
+          return 'Project name cannot be empty';
+        }
+        // 禁止包含空格
+        if (projectName.includes(' ')) {
+          return 'Project name cannot contain spaces';
+        }
+        return true;
+      }
+    }
+  ]);
+}
+
+/**
+ * 初始化项目
+ */
+async function initProj(projectPath, projectName, isBasicApp = false) {
+  // 替换占位符 key文件相对路径 value替换的内容
+  const replacementConfig = {
+    'package.json': { projectName },
+    'theme-app/blocks/index.liquid': { projectName },
+    'extension.config.json': { projectName }
+  };
+  for (const [filePath, replacements] of Object.entries(replacementConfig)) {
+    const fullPath = path.resolve(projectPath, filePath);
+    await replacePlaceholders(fullPath, replacements);
+  }
+
+  // 重命名文件
+  const filesToRename = [
+    isBasicApp ? 'assets/index.css' : 'snippets/index_css.liquid',
+    'blocks/index.liquid',
+    'snippets/index.liquid'
+  ];
+  for (const file of filesToRename) {
+    const filePath = path.resolve(projectPath, 'theme-app', file);
+    await renameFile(filePath, `${projectName}${filePath.includes('_css') ? '_css' : ''}`);
+  }
+}
+
+/**
+ * 控制台提示信息
+ */
+function consoleTips(projectName) {
+  console.log(chalk.green(`Theme extension project "${projectName}" has been successfully created.`));
+  console.log(chalk.bold(`To get started:\n`));
+  console.log(`  ${chalk.cyan(`cd ${projectName}`)}`);
+  console.log(`  ${chalk.cyan(`npm start`)}\n`);
+  console.log(chalk.greenBright(`Happy coding! 🎉🎉🎉`));
+}
+
+/**
+ * 创建项目
+ */
+async function _create(themeAppDescription, projectName) {
+  const projectPath = path.resolve(WORKSPACE_PATH, projectName);
+
+  if (fsExtra.pathExistsSync(projectPath)) {
+    throw new Error(`Project directory "${projectName}" already exists.`);
+  }
+  await fsExtra.ensureDir(projectPath);
+  const isBasicApp = themeAppDescription === THEME_APP_TYPE.BASIC_APP.description;
+  const templatePath = isBasicApp ? THEME_APP_TYPE.BASIC_APP.templatePath : THEME_APP_TYPE.EMBEDS_APP.templatePath;
+  await fsExtra.copy(templatePath, projectPath);
+  await initProj(projectPath, projectName, isBasicApp);
+  consoleTips(projectName);
+}
+
+async function create() {
+  try {
+    const { themeAppType, projectName } = await usePrompt();
+    await _create(themeAppType, projectName);
+  } catch (error) {
+    console.error(chalk.red(`[ERROR IN CREATE] ${error.message}`));
+  }
+}
+
+module.exports = {
+  create
+};