shoplazza-cli 0.0.9 → 0.1.8

package/lib/checkout/build/plugin/vite-plugin-transform-extension-html.js

@@ -0,0 +1,207 @@
+const fs = require('fs');
+const path = require('path');
+const j = require('jscodeshift');
+
+const EXTENSION_RENDER_FN_NAME = 'extend';
+const HTML_FILE_PATH_KEY = 'component';
+const ASTNodeType = {
+  RETURN_STATMENT: 'ReturnStatement',
+  CALL_EXPRESSION: 'CallExpression',
+  OBJECT_EXPRESSION: 'ObjectExpression',
+  IDENTIFIER: 'Identifier',
+  IMPORT_DEFAULT_SPECIFIER: 'ImportDefaultSpecifier',
+  IMPORT_DECLARATION: 'ImportDeclaration'
+};
+const findRenderFnList = (code) => {
+  const renderFnList = [];
+
+  j(code)
+    .find(j.CallExpression)
+    .forEach((astNode) => {
+      if (astNode?.value?.callee?.name === EXTENSION_RENDER_FN_NAME) {
+        const objectExpressionNode = astNode?.value?.arguments?.find(
+          (args) => args.type === ASTNodeType.OBJECT_EXPRESSION
+        );
+        if (objectExpressionNode) {
+          const componentProp = objectExpressionNode?.properties?.find(
+            (prop) => prop?.key?.name === HTML_FILE_PATH_KEY
+          );
+
+          const name = componentProp?.value?.callee?.name;
+          name && renderFnList.push(name);
+        }
+      }
+    });
+
+  return renderFnList;
+};
+
+const findImportDeclareStatementNodeList = (code) => {
+  const importDeclareStatementList = [];
+
+  j(code)
+    .find(j.ImportDeclaration)
+    .forEach((importStatementNode) => {
+      const importDefaultSpecifier = importStatementNode?.value?.specifiers?.find(
+        (specifierNode) => specifierNode?.type === ASTNodeType.IMPORT_DEFAULT_SPECIFIER
+      )?.local?.name;
+      const importPath = importStatementNode?.value?.source?.value;
+
+      importDefaultSpecifier &&
+        importPath &&
+        typeof importPath === 'string' &&
+        importDeclareStatementList.push({ importDefaultSpecifier, importPath });
+    });
+
+  return importDeclareStatementList;
+};
+
+const readFile = (path) => {
+  const supportedExt = ['html'];
+
+  const ext = path.split('.').pop()?.toLowerCase() || '';
+  if (supportedExt.includes(ext)) {
+    return fs.readFileSync(path, {
+      encoding: 'utf8'
+    });
+  }
+
+  return '';
+};
+
+const removeBodyMark = (code) => {
+  return code.replaceAll(/\<body\>/g, '').replaceAll(/\<\/body\>/g, '');
+};
+
+const addExtensionApiPrefix = (code) => {
+  const EXTENSION_API_CALL_EXPRESSION = '__EXTENSION_UI__.extensionApi.';
+  return code.replaceAll(/extensionApi\./g, EXTENSION_API_CALL_EXPRESSION);
+};
+
+let cachedHtmlStr = {};
+
+const handleHtmlDeps = (htmlStr, curPath) => {
+  let str = htmlStr;
+  // eg. import "./index.html" import './index.html'
+  const importReg = /import\s*(?:(?:\"([\.\/\w]+)\")|(?:'([\.\/\w]+)'))/;
+
+  let result = importReg.exec(str);
+  while (result) {
+    const importedHtmlPath = result[1] || result[2];
+    if (importedHtmlPath) {
+      try {
+        const importedHtmlAbsolutePath = path.resolve(path.dirname(curPath), importedHtmlPath);
+        if (!Object.prototype.hasOwnProperty.call(cachedHtmlStr, importedHtmlAbsolutePath)) {
+          cachedHtmlStr[importedHtmlAbsolutePath] = '';
+
+          const importedHtmlStr = readFile(importedHtmlAbsolutePath);
+
+          cachedHtmlStr[importedHtmlAbsolutePath] = handleHtmlDeps(importedHtmlStr, curPath);
+        }
+
+        str = str.replace(importReg, cachedHtmlStr[importedHtmlAbsolutePath]);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    result = importReg.exec(str);
+  }
+
+  str = removeBodyMark(str);
+
+  return str;
+};
+
+const strMinify = (code) => code.split('\n').filter(Boolean).join('');
+
+const createTemplateLiteral = (code) => j.stringLiteral(code);
+
+const removeImportDeclareStatment = (code, specifiers) => {
+  return j(code)
+    .find(j.Program)
+    .forEach((program) => {
+      const body = program?.value?.body || [];
+      if (body.length > 0) {
+        const index = body.findIndex(
+          (node) =>
+            node?.type === ASTNodeType.IMPORT_DECLARATION &&
+            !!node?.specifiers?.find(
+              (specifier) =>
+                specifier?.type === ASTNodeType.IMPORT_DEFAULT_SPECIFIER &&
+                specifiers.includes(specifier?.local?.name || '')
+            )
+        );
+        if (index > -1) program.value.body.splice(index, 1);
+      }
+    })
+    .toSource();
+};
+module.exports = {
+  vitePluginTransformExtensionHtml: () => {
+    return {
+      name: 'vitePluginTransformExtensionHtml',
+      enforce: 'pre',
+      apply: 'build',
+      transform(code, srcPath) {
+        if (!srcPath.endsWith('.js')) {
+          return code;
+        }
+
+        const renderFnList = findRenderFnList(code);
+        const importDeclareStatementList = findImportDeclareStatementNodeList(code);
+
+        const removedImportSpecifiers = [];
+
+        const returnStatementChangedCode = j(code)
+          .find(j.FunctionDeclaration)
+          .forEach((functionDeclareNode) => {
+            const fnName = functionDeclareNode?.value?.id?.name || '';
+            if (!renderFnList.includes(fnName)) return;
+
+            const returnStatment = functionDeclareNode?.value?.body?.body?.find(
+              (node) => node.type === ASTNodeType.RETURN_STATMENT
+            );
+
+            const isIdentifierReturnType = returnStatment?.argument?.type === ASTNodeType.IDENTIFIER;
+            if (!isIdentifierReturnType) return;
+
+            const identifierName = returnStatment?.argument?.name;
+            const htmlFilePathNode = importDeclareStatementList.find(
+              (stat) => stat.importDefaultSpecifier === identifierName
+            );
+
+            if (htmlFilePathNode) {
+              try {
+                const absolutePath = path.resolve(path.dirname(srcPath), htmlFilePathNode.importPath);
+                cachedHtmlStr[absolutePath] = '';
+                const htmlStr = readFile(absolutePath);
+
+                let result = handleHtmlDeps(htmlStr, srcPath);
+                cachedHtmlStr = {};
+
+                result = strMinify(result);
+                result = addExtensionApiPrefix(result);
+                const templateLiteral = createTemplateLiteral(result);
+
+                returnStatment.argument = templateLiteral;
+
+                removedImportSpecifiers.push(identifierName);
+              } catch (e) {
+                console.error(e);
+              }
+            }
+          })
+          .toSource();
+
+        const importStatementRemovedCode = removeImportDeclareStatment(
+          returnStatementChangedCode,
+          removedImportSpecifiers
+        );
+        return importStatementRemovedCode;
+      },
+      buildEnd: () => {
+        console.log('transform html end');
+      }
+    };
+  }
+};

package/lib/checkout/build/vite.config.js

@@ -0,0 +1,34 @@
+const { cwd } = require('process');
+const { vitePluginAddExtensionId } = require('./plugin/vite-plugin-add-extension-id');
+const { vitePluginTransformExtensionHtml } = require('./plugin/vite-plugin-transform-extension-html');
+const { getDistPath } = require('../util');
+
+// https://vitejs.dev/config/
+module.exports = {
+  viteConfig: (pageEntry) => {
+    return {
+      plugins: [vitePluginTransformExtensionHtml(), vitePluginAddExtensionId()],
+      base: '/',
+      root: cwd(),
+      build: {
+        minify: false,
+        emptyOutDir: false,
+        copyPublicDir: false,
+        rollupOptions: {
+          input: pageEntry,
+          output: {
+            entryFileNames: '[name].[hash].js',
+            chunkFileNames: '[name].[hash].js',
+            assetFileNames: '[name].[hash].[ext]',
+            compact: true,
+            inlineDynamicImports: false,
+            dir: getDistPath()
+          },
+          watch: {
+            include: './extensions'
+          }
+        }
+      }
+    };
+  }
+};

package/lib/checkout/build.js

@@ -0,0 +1,39 @@
+const { consoleError, consoleBlue } = require('./console');
+const { build } = require('vite');
+const { viteConfig } = require('./build/vite.config');
+const { getExtensionInfo, getDistPath } = require('./util');
+const path = require('path');
+const fs = require('fs');
+
+async function viteBuild(command) {
+  try {
+    require('./version');
+    const { id, path: extensionPath } = getExtensionInfo(command.id);
+    const pageEntry = {
+      [id]: path.join(extensionPath, 'src', 'index.js')
+    };
+    if (!fs.existsSync(getDistPath())) {
+      fs.mkdirSync(getDistPath());
+    }
+    fs.readdirSync(getDistPath()).forEach((fname) => {
+      if (fname.includes(id)) {
+        fs.rmSync(path.join(getDistPath(), fname));
+      }
+    });
+    await build(viteConfig(pageEntry));
+  } catch (err) {
+    consoleError('build error: ', err);
+    throw 'build_error';
+  }
+}
+
+async function cliBuild(command) {
+  try {
+    await viteBuild(command);
+  } catch (err) {}
+}
+
+module.exports = {
+  cliBuild,
+  viteBuild
+};

package/lib/checkout/config.js

@@ -0,0 +1,97 @@
+module.exports = {
+  cwd: process.cwd(),
+  openAipVersion: '/openapi',
+  defaultExtensionDir: 'extensions',
+  configFile: 'extension.json',
+  buildDir: 'dist',
+  package: 'package.json',
+  questions: commands => {
+    const { store, token, theme } = commands;
+    return require('inquirer').prompt([
+      {
+        name: 'store',
+        type: 'input',
+        default: store,
+        message: 'Please enter your store（Eg: https://developer.myshoplaza.com）',
+        when: () => {
+          if (!store) return true;
+          try {
+            new URL(store);
+          } catch (e) {
+            return 'Incorrect store'
+          }
+          return false;
+        },
+        validate: text => {
+          if (!text) return false;
+          try {
+            new URL(text);
+          } catch (e) {
+            return 'Incorrect store'
+          }
+          return true;
+        }
+      },
+      {
+        name: 'token',
+        type: 'input',
+        default: token,
+        when: !token,
+        message: 'Please enter your token（Private app token）',
+        validate: text => !!text
+      }
+    ]);
+  },
+  pullQuestion: () => {
+    return require('inquirer').prompt([
+      {
+        type: 'list',
+        name: 'pullType',
+        message: 'Choose pull type: ',
+        default: 'extension',
+        prefix: '*',
+        choices: [
+          {
+            name: 'Extension',
+            value: 'extension'
+          },
+          {
+            name: 'Fields',
+            value: 'fields',
+          },
+          // TODO:
+          // {
+          //   name: 'Source',
+          //   value: 'source'
+          // }
+        ]
+      }
+    ]);
+  },
+  outputDirPathQuestion: (commands = {}) => {
+    const outputDirPath = process.env.OUTPUT_DIR_PATH || commands.outputDirPath;
+    return require('inquirer').prompt([
+      {
+        type: 'input',
+        name: 'outputDirPath',
+        message: 'Please enter extension output directory relative path(Eg: ./src/xxx ): ',
+        default: outputDirPath || './dist/chick-extension',
+        when: !outputDirPath,
+        validate: text => !!text
+      }
+    ]);
+  },
+  dirPathQuestion: (commands = {}) => {
+    const dirPath = process.env.DIR_PATH || commands.dirPath;
+    return require('inquirer').prompt([
+      {
+        type: 'input',
+        name: 'dirPath',
+        message: 'Please enter extension directory relative path(Eg: ./src/xxx ): ',
+        default: dirPath || './extensions',
+        when: !dirPath,
+        validate: text => !!text
+      }
+    ]);
+  }
+};

package/lib/checkout/console.js

@@ -0,0 +1,32 @@
+const colors = require('colors');
+
+function isDebug() {
+  return ~process.argv.indexOf('--debug');
+}
+
+function consoleError(...args) {
+  if (isDebug()) {
+    console.trace(args);
+  }
+  console.log(colors.red(args.join(' ')));
+}
+
+function consoleBlue(...args) {
+  console.log(colors.blue(args.join(' ')));
+}
+
+function consoleSuccess(...args) {
+  console.log(colors.green(args.join(' ')));
+}
+
+function consoleWarn(...args) {
+  console.log(colors.yellow(args.join(' ')));
+}
+
+module.exports = {
+  isDebug,
+  consoleError,
+  consoleSuccess,
+  consoleBlue,
+  consoleWarn
+};

package/lib/checkout/create.js

@@ -0,0 +1,132 @@
+const { consoleError, consoleSuccess } = require('./console');
+const path = require('path');
+const fs = require('fs');
+const inquirer = require('inquirer');
+const { copy } = require('./util');
+
+const cwd = process.cwd();
+
+const templateDir = path.resolve(__dirname, './template');
+
+const renameFiles = {
+  _gitignore: '.gitignore'
+};
+
+const extensionNamePromptConfig = {
+  type: 'input',
+  name: 'extensionName',
+  message: 'Enter the extension name:',
+  prefix: '*'
+};
+
+async function promptWhenAddExtension(before = []) {
+  return inquirer.prompt([
+    ...before,
+    {
+      type: 'input',
+      name: 'store',
+      message: 'Enter your store URL(example: https://xxx.myshoplaza.com/):',
+      prefix: '*'
+    },
+    {
+      type: 'input',
+      name: 'token',
+      message: 'Enter the store\'s token:',
+      prefix: '*'
+    },
+    extensionNamePromptConfig
+  ]);
+}
+
+/**
+ * 使用cli创建一个项目
+ * @param {} command 项目名
+ * @returns
+ */
+async function createProject(command) {
+  const { projectName, extensionName, store, token } = await promptWhenAddExtension([
+    {
+      type: 'input',
+      name: 'projectName',
+      message: 'Please input your project name:',
+      prefix: '*'
+    }
+  ]);
+  const projectDir = projectName.replace(/\/+$/g, '');
+  const root = path.join(cwd, projectDir);
+  if (fs.existsSync(root)) {
+    consoleError(`the directory '${projectDir}' is exist.`);
+    return;
+  }
+  if (!extensionName.trim()) {
+    consoleError('extension id is required');
+    return;
+  }
+  fs.mkdirSync(root, { recursive: true });
+
+  const write = (file, content) => {
+    const targetPath = path.join(root, renameFiles[file] ?? file);
+    if (content) {
+      fs.writeFileSync(targetPath, content);
+    } else {
+      copy(path.join(templateDir, file), targetPath);
+    }
+  };
+
+  const files = fs.readdirSync(templateDir);
+  for (const file of files.filter((f) => !['package.json'].includes(f))) {
+    write(file);
+  }
+
+  let projectConfigContent = fs.readFileSync(path.join(templateDir, 'extension.config.js'), 'utf-8');
+  projectConfigContent = projectConfigContent.replace('{store}', store).replace('{token}', token);
+  write('extension.config.js', projectConfigContent);
+
+  const pkg = JSON.parse(fs.readFileSync(path.join(templateDir, `package.json`), 'utf-8'));
+  pkg.name = projectDir;
+  write('package.json', JSON.stringify(pkg, null, 2) + '\n');
+
+  fs.renameSync(path.join(root, 'extensions/extension-template'), path.join(root, `extensions/${extensionName}`));
+
+  const extensionConfig = JSON.parse(
+    fs.readFileSync(path.join(path.resolve(root, `extensions/${extensionName}`), `extension.json`), 'utf-8')
+  );
+  extensionConfig.extensionName = extensionName;
+  write(`extensions/${extensionName}/extension.json`, JSON.stringify(extensionConfig, null, 2) + '\n');
+  consoleSuccess(`Successfully created extension project '${projectName}'.`);
+}
+
+/**
+ * 使用cli在现有项目中新增一个 extension
+ */
+async function createExtension(command) {
+  const { extensionName } = await inquirer.prompt([extensionNamePromptConfig]);
+  const extensionsDir = path.join(cwd, 'extensions');
+  if (!fs.existsSync(extensionsDir)) {
+    consoleError('Please check current dir is a extension project');
+    return;
+  }
+
+  const targetDir = path.join(extensionsDir, extensionName);
+  if (fs.existsSync(targetDir)) {
+    consoleError(`This '${extensionName}' extension already exists.`);
+    return;
+  }
+  fs.mkdirSync(targetDir);
+
+  const extensionTemplateDir = path.join(templateDir, 'extensions', 'extension-template');
+  const files = fs.readdirSync(extensionTemplateDir);
+  for (const file of files.filter((f) => f !== 'extension.json')) {
+    copy(path.join(extensionTemplateDir, file), path.join(targetDir, file));
+  }
+
+  const extensionConfig = JSON.parse(fs.readFileSync(path.join(extensionTemplateDir, `extension.json`), 'utf-8'));
+  extensionConfig.extensionName = extensionName;
+  fs.writeFileSync(path.join(targetDir, 'extension.json'), JSON.stringify(extensionConfig, null, 2) + '\n');
+  consoleSuccess(`Successfully created extension '${extensionName}'.`);
+}
+
+module.exports = {
+  createProject,
+  createExtension
+};

package/lib/checkout/delete.js

@@ -0,0 +1,26 @@
+const api = require('./api');
+const loading = require('loading-cli');
+const { verifyConfig } = require('./verify');
+const { getExtensionInfo, getExtensionConfig } = require('./util');
+
+module.exports = async (commands = {}) => {
+  await verifyConfig(commands);
+  const info = getExtensionInfo(commands.id);
+  const config = getExtensionConfig(commands.id);
+  const deleteLoading = loading(`Delete the extension '${info.id}'.`).start();
+  await Promise.all([
+    api.deleteExtension({
+      extension_id: info.id,
+      version: config.version
+    })
+  ])
+    .then(() => {
+      deleteLoading.succeed(`Delete the extension '${info.id}' succeed.`);
+    })
+    .catch(() => {
+      deleteLoading.fail(`Delete the extension '${info.id}' failed.`).fail();
+    })
+    .finally(() => {
+      deleteLoading.stop();
+    });
+};

package/lib/checkout/deploy.js

@@ -0,0 +1,59 @@
+const api = require('./api');
+const { verifyConfig } = require('./verify');
+const { useSelectExtensionMode } = require('./util');
+const inquirer = require('inquirer');
+const { consoleSuccess, consoleError, consoleBlue } = require('./console');
+
+module.exports = async () => {
+  try {
+    await verifyConfig();
+    const extensionInfo = await initSelectedExtensionInfo();
+    await deployExtension(extensionInfo);
+  } catch (error) {
+    error.response ? consoleError(`Error: ${error.response.status}-${error.response.config.url}`) : consoleError(error);
+  }
+};
+
+async function initSelectedExtensionInfo() {
+  const res = await api.getExtensionList();
+  const extensionList = res.data?.data?.extensions || [];
+  return useSelectExtensionMode(extensionList, 'deploy');
+}
+
+async function deployExtension(extensionInfo) {
+  const res = await api.getVersionList({
+    extension_id: extensionInfo.extension_id
+  });
+  const versionList = res.data?.data?.extensions || [];
+  const choices = versionList.map((item) => ({
+    name: `v${item.version}${item.publish_status === 'published' ? '(Published)' : ''}`,
+    value: item.id
+  }));
+  const { versionId, confirm } = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'versionId',
+      message: `Please select a version`,
+      prefix: '*',
+      loop: false,
+      choices
+    },
+    {
+      type: 'confirm',
+      name: 'confirm',
+      message: 'Are you sure you want to deploy?',
+      default: false
+    }
+  ]);
+
+  if (confirm) {
+    const versionInfo = versionList.find((item) => item.id === versionId);
+    await api.deployExtension({
+      extension_id: versionInfo.extension_id,
+      id: versionInfo.id
+    });
+    consoleSuccess(`Successfully deployed the extension '${versionInfo.name}(v${versionInfo.version})'.`);
+  } else {
+    consoleBlue('Deploy cancelled');
+  }
+}

package/lib/checkout/dev/client.js

@@ -0,0 +1,73 @@
+function setupWebSocket() {
+  const socket = new WebSocket(`ws://localhost:8888`, 'checkout-hmr');
+  let isOpened = false;
+
+  socket.addEventListener(
+    'open',
+    () => {
+      isOpened = true;
+    },
+    { once: true }
+  );
+
+  socket.addEventListener('message', async ({ data }) => {
+    data = JSON.parse(data);
+    console.log('%c[Extension Development] Receive Data:', 'color:green;', data);
+    switch (data.event) {
+      case 'init':
+        CheckoutAPI.extension.DEV_addExtensions(data.data);
+        break;
+      case 'update':
+        CheckoutAPI.extension.DEV_updateExtension(data.data);
+        break;
+    }
+  });
+
+  socket.addEventListener('close', async ({ wasClean }) => {
+    if (wasClean) return;
+    console.debug('noClose');
+  });
+
+  return socket;
+}
+
+function initDevModeIcon() {
+  const icon = Object.assign(document.createElement('div'), {
+    className: 'checkout-extension-dev-icon',
+    textContent: 'Close Dev Mode',
+    style: `
+      position: fixed;
+      bottom: 45px;
+      right: 30px;
+      z-index: 99999;
+      color: #fff;
+      background: linear-gradient(135deg, #007bff, #0056b3);
+      border-radius: 20px;
+      font-size: 14px;
+      cursor: pointer;
+      padding: 10px;
+      text-align: center;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+    `
+  });
+
+  icon.addEventListener('mouseenter', () => {
+    icon.style.transform = 'scale(1.1)';
+    icon.style.boxShadow = '0 6px 12px rgba(0, 0, 0, 0.3)';
+  });
+  icon.addEventListener('mouseleave', () => {
+    icon.style.transform = 'scale(1)';
+    icon.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
+  });
+  icon.addEventListener('click', () => {
+    CheckoutAPI.extension.DEV_switchDevMode();
+  },{
+    once: true,
+  });
+  document.body.appendChild(icon);
+}
+
+
+setupWebSocket();
+initDevModeIcon();