@spcsn/taro-cli 0.1.6 → 1.0.0

package/src/create/project.ts

@@ -1,6 +1,5 @@
 import * as path from 'node:path';
 
-import { CompilerType, createProject, CSSType, FrameworkType, NpmType, PeriodType } from '@spcsn/taro-binding';
 import {
   chalk,
   DEFAULT_TEMPLATE_SRC,
@@ -12,17 +11,16 @@ import {
   TARO_CONFIG_FOLDER,
 } from '@spcsn/taro-helper';
 import { isArray } from '@spcsn/taro-shared';
-import axios from 'axios';
 import * as inquirer from 'inquirer';
 import ora from 'ora';
-import * as semver from 'semver';
 
 import { clearConsole, getPkgVersion, getRootPath } from '../util';
 import { TEMPLATE_CREATOR } from './constants';
 import Creator from './creator';
-import fetchTemplate from './fetchTemplate';
+import fetchTemplate from './fetch-template';
+import { CompilerType, createProject, CSSType, FrameworkType, NpmType, PeriodType } from './template-creator';
 
-import type { ITemplates } from './fetchTemplate';
+import type { ITemplates } from './fetch-template';
 
 export interface IProjectConf {
   projectName: string;
@@ -33,7 +31,6 @@ export interface IProjectConf {
   template: string;
   description?: string;
   typescript?: boolean;
-  buildEs5?: boolean;
   css: CSSType;
   date?: string;
   src?: string;
@@ -67,8 +64,8 @@ export default class Project extends Creator {
 
   constructor(options: IProjectConfOptions) {
     super(options.sourceRoot);
-    const unSupportedVer = semver.lt(process.version, 'v18.0.0');
-    if (unSupportedVer) {
+    const nodeMajorVersion = Number(process.versions.node.split('.')[0]);
+    if (nodeMajorVersion < 18) {
       throw new Error('Node.js 版本过低，推荐升级 Node.js 至 v18.0.0+');
     }
     this.rootPath = this._rootPath;
@@ -111,8 +108,6 @@ export default class Project extends Creator {
     this.askProjectName(conf, prompts);
     this.askDescription(conf, prompts);
     this.askTypescript(conf, prompts);
-    this.askBuildEs5(conf, prompts);
-    this.askCSS(conf, prompts);
     this.askNpm(conf, prompts);
     const answers = await inquirer.prompt<IProjectConf>(prompts);
 
@@ -205,54 +200,8 @@ export default class Project extends Creator {
       });
     }
   };
-
-  askBuildEs5: AskMethods = function (conf, prompts) {
-    if (typeof conf.buildEs5 !== 'boolean') {
-      prompts.push({
-        type: 'confirm',
-        name: 'buildEs5',
-        message: '是否需要编译为 ES5 ？',
-        default: false,
-      });
-    }
-  };
-
-  askCSS: AskMethods = function (conf, prompts) {
-    const cssChoices = [
-      {
-        name: 'Sass',
-        value: CSSType.Sass,
-      },
-      {
-        name: 'Less',
-        value: CSSType.Less,
-      },
-      {
-        name: 'Stylus',
-        value: CSSType.Stylus,
-      },
-      {
-        name: '无',
-        value: CSSType.None,
-      },
-    ];
-
-    if (typeof conf.css !== 'string') {
-      prompts.push({
-        type: 'list',
-        name: 'css',
-        message: '请选择 CSS 预处理器（Sass/Less/Stylus）',
-        choices: cssChoices,
-      });
-    }
-  };
-
   askCompiler: AskMethods = function (conf, prompts) {
     const compilerChoices = [
-      {
-        name: 'Webpack5',
-        value: CompilerType.Webpack5,
-      },
       {
         name: 'Vite',
         value: CompilerType.Vite,
@@ -486,12 +435,11 @@ export default class Project extends Creator {
         template,
         npm,
         framework,
-        css: this.conf.css || CSSType.None,
+        css: CSSType.None,
         autoInstall: autoInstall,
         templateRoot: getRootPath(),
         version: getPkgVersion(),
         typescript: this.conf.typescript,
-        buildEs5: this.conf.buildEs5,
         date: this.conf.date,
         description: this.conf.description,
         compiler: this.conf.compiler,
@@ -504,24 +452,29 @@ export default class Project extends Creator {
   }
 }
 
-function getOpenSourceTemplates(platform: string) {
-  return new Promise((resolve, reject) => {
-    const spinner = ora({ text: '正在拉取开源模板列表...', discardStdin: false }).start();
-    axios
-      .get('https://gitee.com/NervJS/awesome-taro/raw/next/index.json')
-      .then((response) => {
-        spinner.succeed(`${chalk.grey('拉取开源模板列表成功！')}`);
-        const collection = response.data;
-        switch (platform.toLowerCase()) {
-          case 'react':
-            return resolve(collection.react);
-          default:
-            return resolve([NONE_AVAILABLE_TEMPLATE]);
-        }
-      })
-      .catch((_error) => {
-        spinner.fail(chalk.red('拉取开源模板列表失败！'));
-        return reject(new Error());
-      });
-  });
+interface OpenSourceTemplateCollection {
+  react?: unknown;
+}
+
+async function getOpenSourceTemplates(platform: string) {
+  const spinner = ora({ text: '正在拉取开源模板列表...', discardStdin: false }).start();
+
+  try {
+    const response = await fetch('https://gitee.com/NervJS/awesome-taro/raw/next/index.json');
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status} ${response.statusText}`);
+    }
+
+    spinner.succeed(`${chalk.grey('拉取开源模板列表成功！')}`);
+    const collection = (await response.json()) as OpenSourceTemplateCollection;
+    switch (platform.toLowerCase()) {
+      case 'react':
+        return collection.react;
+      default:
+        return [NONE_AVAILABLE_TEMPLATE];
+    }
+  } catch {
+    spinner.fail(chalk.red('拉取开源模板列表失败！'));
+    throw new Error();
+  }
 }

package/src/create/template-creator.ts

@@ -0,0 +1,325 @@
+import { spawn } from 'node:child_process';
+import { copyFile, mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
+import * as path from 'node:path';
+
+import { chalk } from '@spcsn/taro-helper';
+
+export enum CompilerType {
+  Webpack4 = 'Webpack4',
+  Webpack5 = 'Webpack5',
+  Vite = 'Vite',
+}
+
+export enum CSSType {
+  None = 'None',
+  Sass = 'Sass',
+  Stylus = 'Stylus',
+  Less = 'Less',
+}
+
+export enum FrameworkType {
+  React = 'React',
+  Preact = 'Preact',
+  Vue3 = 'Vue3',
+  Solid = 'Solid',
+  None = 'None',
+}
+
+export enum NpmType {
+  Yarn = 'Yarn',
+  Cnpm = 'Cnpm',
+  Pnpm = 'Pnpm',
+  Npm = 'Npm',
+}
+
+export enum PeriodType {
+  CreateAPP = 'CreateAPP',
+  CreatePage = 'CreatePage',
+}
+
+export interface CreateOptions {
+  css?: CSSType;
+  cssExt?: string;
+  framework?: FrameworkType;
+  description?: string;
+  projectName: string;
+  version?: string;
+  date?: string;
+  typescript?: boolean;
+  buildEs5?: boolean;
+  template: string;
+  pageName?: string;
+  compiler?: CompilerType;
+  setPageName?: string;
+  subPkg?: string;
+  pageDir?: string;
+  setSubPkgPageName?: string;
+  changeExt?: boolean;
+  isCustomTemplate?: boolean;
+  pluginType?: string;
+}
+
+export interface ProjectConfig {
+  projectRoot: string;
+  projectName: string;
+  npm: NpmType;
+  description?: string;
+  typescript?: boolean;
+  buildEs5?: boolean;
+  template: string;
+  css: CSSType;
+  autoInstall?: boolean;
+  framework: FrameworkType;
+  templateRoot: string;
+  version: string;
+  date?: string;
+  compiler?: CompilerType;
+  period: PeriodType;
+}
+
+type TemplateHandlerResult = boolean | { setPageName?: string; setSubPkgName?: string; changeExt?: boolean };
+type TemplateHandler = (error: Error | null, options: CreateOptions) => TemplateHandlerResult;
+type TemplateHandlers = Record<string, TemplateHandler>;
+
+const TEMPLATE_CREATOR = 'template_creator.js';
+const FILE_FILTER = new Set([TEMPLATE_CREATOR, '.DS_Store', '.npmrc']);
+const MEDIA_FILE_PATTERN = /\.(png|jpe?g|gif|svg|webp|jar|keystore|tgz)$/i;
+const STYLE_EXTENSIONS: Record<CSSType, string> = {
+  [CSSType.None]: 'css',
+  [CSSType.Sass]: 'scss',
+  [CSSType.Stylus]: 'styl',
+  [CSSType.Less]: 'less',
+};
+const PACKAGE_MANAGERS: Record<NpmType, string> = {
+  [NpmType.Yarn]: 'yarn',
+  [NpmType.Cnpm]: 'cnpm',
+  [NpmType.Pnpm]: 'pnpm',
+  [NpmType.Npm]: 'npm',
+};
+
+export async function createProject(conf: ProjectConfig, handlers: TemplateHandlers): Promise<void> {
+  const projectPath = path.join(conf.projectRoot, conf.projectName);
+  const templatePath = path.join(conf.templateRoot, 'templates', conf.template);
+  const templateFiles = await collectTemplateFiles(templatePath);
+  const createOptions: CreateOptions = {
+    css: conf.css,
+    cssExt: STYLE_EXTENSIONS[conf.css],
+    framework: conf.framework,
+    description: conf.description,
+    projectName: conf.projectName,
+    version: conf.version,
+    date: conf.date,
+    typescript: conf.typescript,
+    buildEs5: conf.buildEs5,
+    template: conf.template,
+    pageName: 'index',
+    compiler: conf.compiler,
+  };
+
+  console.log();
+  console.log(`${chalk.green('✔')} ${chalk.rgb(102, 102, 102)(`创建项目: ${conf.projectName}`)}`);
+
+  for (const templateFile of templateFiles) {
+    await createTemplateFile({ templateFile, templatePath, projectPath, options: createOptions, handlers });
+  }
+
+  console.log();
+  await initGit(conf.projectName, projectPath);
+
+  if (conf.autoInstall ?? true) {
+    await installDeps(conf.npm, projectPath, () => printCreateSuccess(conf.projectName));
+    return;
+  }
+
+  printCreateSuccess(conf.projectName);
+}
+
+async function createTemplateFile(args: {
+  templateFile: string;
+  templatePath: string;
+  projectPath: string;
+  options: CreateOptions;
+  handlers: TemplateHandlers;
+}): Promise<void> {
+  const { templateFile, templatePath, projectPath, options, handlers } = args;
+  const relativeTemplatePath = normalizePath(templateFile.replace(templatePath, ''));
+  if (shouldSkipByFramework(relativeTemplatePath, options.framework)) return;
+
+  const handlerResult = handlers[relativeTemplatePath]?.(null, { ...options });
+  if (handlerResult === false) return;
+
+  const destinationRelativePath = resolveDestinationRelativePath(relativeTemplatePath, handlerResult, options);
+  const sourcePath = path.join(templatePath, relativeTemplatePath);
+  const destinationPath = normalizeTemplateDestination(path.join(projectPath, destinationRelativePath));
+
+  await writeTemplateFile(sourcePath, destinationPath, options);
+  console.log(`${chalk.green('✔')} ${chalk.rgb(102, 102, 102)(`创建文件: ${destinationPath}`)}`);
+}
+
+function shouldSkipByFramework(relativeTemplatePath: string, framework?: FrameworkType): boolean {
+  const isVueFramework = framework === FrameworkType.Vue3;
+  if (isVueFramework && relativeTemplatePath.endsWith('.jsx')) return true;
+  return !isVueFramework && relativeTemplatePath.endsWith('.vue');
+}
+
+function resolveDestinationRelativePath(
+  relativeTemplatePath: string,
+  handlerResult: TemplateHandlerResult | undefined,
+  options: CreateOptions,
+): string {
+  const handlerDestination = typeof handlerResult === 'object' ? handlerResult : undefined;
+  let destinationRelativePath = handlerDestination?.setPageName ?? relativeTemplatePath;
+
+  if (options.subPkg && handlerDestination?.setSubPkgName) {
+    destinationRelativePath = handlerDestination.setSubPkgName;
+  }
+
+  if (destinationRelativePath.startsWith('/')) {
+    destinationRelativePath = destinationRelativePath.slice(1);
+  }
+
+  const shouldChangeExt = handlerDestination?.changeExt ?? true;
+  if (options.typescript && shouldChangeExt && shouldConvertScriptExtension(destinationRelativePath)) {
+    destinationRelativePath = destinationRelativePath.replace(/\.jsx?$/, (extension) =>
+      extension === '.jsx' ? '.tsx' : '.ts',
+    );
+  }
+
+  if (shouldChangeExt && destinationRelativePath.endsWith('.css')) {
+    destinationRelativePath = destinationRelativePath.replace(/\.css$/, `.${options.cssExt ?? 'css'}`);
+  }
+
+  return destinationRelativePath;
+}
+
+function shouldConvertScriptExtension(filePath: string): boolean {
+  if (!(filePath.endsWith('.js') || filePath.endsWith('.jsx'))) return false;
+  return !(filePath.endsWith('babel.config.js') || filePath.endsWith('.eslintrc.js'));
+}
+
+async function writeTemplateFile(sourcePath: string, destinationPath: string, options: CreateOptions): Promise<void> {
+  await mkdir(path.dirname(destinationPath), { recursive: true });
+
+  if (MEDIA_FILE_PATTERN.test(sourcePath)) {
+    await copyFile(sourcePath, destinationPath);
+    return;
+  }
+
+  const templateContent = await readFile(sourcePath, 'utf8');
+  const renderedContent = renderTemplate(templateContent, options);
+  await writeFile(destinationPath, renderedContent);
+}
+
+function renderTemplate(templateContent: string, options: CreateOptions): string {
+  return templateContent
+    .replace(/{{#if \(eq css "Sass"\) }}([\s\S]*?){{\/if}}/g, options.css === CSSType.Sass ? '$1' : '')
+    .replace(/{{#if \(eq css "Less"\) }}([\s\S]*?){{\/if}}/g, options.css === CSSType.Less ? '$1' : '')
+    .replace(/{{#if \(eq css "Stylus"\) }}([\s\S]*?){{\/if}}/g, options.css === CSSType.Stylus ? '$1' : '')
+    .replace(/{{#if typescript }}([\s\S]*?){{\/if}}/g, options.typescript ? '$1' : '')
+    .replace(/{{\s*to_pascal_case\s+pageName\s*}}/g, toPascalCase(options.pageName ?? 'index'))
+    .replace(/{{\s*projectName\s*}}/g, options.projectName)
+    .replace(/{{\s*description\s*}}/g, options.description ?? '')
+    .replace(/{{\s*template\s*}}/g, options.template)
+    .replace(/{{\s*typescript\s*}}/g, String(Boolean(options.typescript)))
+    .replace(/{{\s*css\s*}}/g, options.css ?? CSSType.None)
+    .replace(/{{\s*framework\s*}}/g, options.framework ?? FrameworkType.React)
+    .replace(/{{\s*version\s*}}/g, options.version ?? '')
+    .replace(/{{\s*date\s*}}/g, options.date ?? '')
+    .replace(/{{\s*cssExt\s*}}/g, options.cssExt ?? 'css')
+    .replace(/{{\s*pageName\s*}}/g, options.pageName ?? 'index');
+}
+
+function toPascalCase(value: string): string {
+  return value
+    .split(/[^a-zA-Z0-9]+/)
+    .filter(Boolean)
+    .map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
+    .join('');
+}
+
+function normalizeTemplateDestination(destinationPath: string): string {
+  const parsedPath = path.parse(destinationPath);
+  let normalizedPath = destinationPath;
+
+  if (parsedPath.ext === '.tmpl') {
+    normalizedPath = path.join(parsedPath.dir, parsedPath.name);
+  }
+
+  const basename = path.basename(normalizedPath);
+  if (basename.startsWith('_')) {
+    normalizedPath = path.join(path.dirname(normalizedPath), basename.slice(1));
+  }
+
+  return normalizedPath;
+}
+
+async function collectTemplateFiles(templatePath: string): Promise<string[]> {
+  const entries = await readdir(templatePath, { withFileTypes: true });
+  const files = await Promise.all(
+    entries.map(async (entry) => {
+      const entryPath = path.join(templatePath, entry.name);
+      if (entry.isDirectory()) return collectTemplateFiles(entryPath);
+      if (FILE_FILTER.has(entry.name)) return [];
+      return [entryPath];
+    }),
+  );
+
+  return files.flat();
+}
+
+async function initGit(projectName: string, projectPath: string): Promise<void> {
+  console.log(`cd ${projectName}, 执行 ${chalk.cyan.bold('git init')}`);
+
+  try {
+    await executeCommand('git', ['init'], projectPath);
+    console.log(`${chalk.green('✔')} ${chalk.green('初始化 git 成功')}`);
+  } catch (error) {
+    console.log(`${chalk.red('✘')} ${chalk.red('初始化 git 失败')}`);
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      console.log('没有找到命令 git, 请检查！');
+      return;
+    }
+    console.log(error);
+  }
+}
+
+async function installDeps(npm: NpmType, projectPath: string, onSuccess: () => void): Promise<void> {
+  const command = PACKAGE_MANAGERS[npm];
+  if (!command) return;
+
+  console.log(`执行安装项目依赖 ${chalk.cyan.bold(`${command} install`)}, 需要一会儿...`);
+
+  try {
+    await executeCommand(command, ['install'], projectPath);
+    console.log(`${chalk.green('✔')} ${chalk.green('安装项目依赖成功')}`);
+    onSuccess();
+  } catch (error) {
+    console.log(`${chalk.red('✘')} ${chalk.red('安装项目依赖失败，请自行重新安装！')}`);
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      console.log(`没有找到命令 ${command}, 请检查！`);
+    }
+  }
+}
+
+function executeCommand(command: string, args: string[], cwd: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const childProcess = spawn(command, args, { cwd, stdio: 'inherit' });
+    childProcess.on('error', reject);
+    childProcess.on('close', (exitCode) => {
+      if (exitCode === 0) {
+        resolve();
+        return;
+      }
+      reject(new Error(`${command} ${args.join(' ')} failed with exit code ${exitCode}`));
+    });
+  });
+}
+
+function printCreateSuccess(projectName: string): void {
+  console.log(chalk.green(`创建项目 ${chalk.green.bold(projectName)} 成功！`));
+  console.log(chalk.green(`请进入项目目录 ${chalk.green.bold(projectName)} 开始工作吧！😝`));
+}
+
+function normalizePath(value: string): string {
+  return value.replace(/\\/g, '/').replace(/\/{2,}/g, '/');
+}

package/src/doctor/validators.js

@@ -0,0 +1 @@
+module.exports = require('./validators.ts');

package/src/doctor/validators.ts

@@ -1,9 +1,11 @@
-export enum MessageKind {
-  Error = 'error',
-  Warning = 'warning',
-  Success = 'success',
-  Manual = 'manual',
-}
+export const MessageKind = {
+  Error: 'error',
+  Warning: 'warning',
+  Success: 'success',
+  Manual: 'manual',
+} as const;
+
+export type MessageKind = (typeof MessageKind)[keyof typeof MessageKind];
 
 export interface ValidateMessage {
   kind: MessageKind;

package/src/platform-weapp/apis-list.ts

@@ -0,0 +1,33 @@
+export const needPromiseApis = new Set([
+  'addFileToFavorites',
+  'addVideoToFavorites',
+  'authPrivateMessage',
+  'checkIsAddedToMyMiniProgram',
+  'chooseContact',
+  'cropImage',
+  'disableAlertBeforeUnload',
+  'editImage',
+  'enableAlertBeforeUnload',
+  'getBackgroundFetchData',
+  'getChannelsLiveInfo',
+  'getChannelsLiveNoticeInfo',
+  'getFuzzyLocation',
+  'getGroupEnterInfo',
+  'getLocalIPAddress',
+  'getShareInfo',
+  'getUserProfile',
+  'getWeRunData',
+  'join1v1Chat',
+  'openChannelsActivity',
+  'openChannelsEvent',
+  'openChannelsLive',
+  'openChannelsUserProfile',
+  'openCustomerServiceChat',
+  'openVideoEditor',
+  'saveFileToDisk',
+  'scanItem',
+  'setEnable1v1Chat',
+  'setWindowSize',
+  'sendBizRedPacket',
+  'startFacialRecognitionVerify',
+]);

package/src/platform-weapp/apis.ts

@@ -0,0 +1,48 @@
+import { processApis } from '@spcsn/taro-shared';
+
+import { needPromiseApis } from './apis-list';
+
+interface WeappNativeApi {
+  cloud?: unknown;
+}
+
+interface TaroApiTarget {
+  cloud?: unknown;
+  getTabBar?: (pageCtx?: { getTabBar?: () => { $taroInstances?: unknown } }) => unknown;
+  getRenderer?: () => string;
+  getCurrentInstance?: () => { page?: { renderer?: string } };
+}
+
+declare const wx: WeappNativeApi;
+
+export function initNativeApi(taro: TaroApiTarget) {
+  processApis(taro, wx, {
+    needPromiseApis,
+    modifyApis(apis) {
+      // fix https://github.com/NervJS/taro/issues/9899
+      apis.delete('lanDebug');
+    },
+    transformMeta(api: string, options: Record<string, unknown>) {
+      if (api === 'showShareMenu') {
+        const showShareItems = Array.isArray(options.showShareItems) ? options.showShareItems : [];
+        options.menus = showShareItems.map((item) =>
+          item === 'wechatFriends' ? 'shareAppMessage' : item === 'wechatMoment' ? 'shareTimeline' : item,
+        );
+      }
+
+      return {
+        key: api,
+        options,
+      };
+    },
+  });
+  taro.cloud = wx.cloud;
+  taro.getTabBar = function (pageCtx) {
+    if (typeof pageCtx?.getTabBar === 'function') {
+      return pageCtx.getTabBar()?.$taroInstances;
+    }
+  };
+  taro.getRenderer = function () {
+    return taro.getCurrentInstance?.()?.page?.renderer ?? 'webview';
+  };
+}

package/src/platform-weapp/components-react.ts

@@ -0,0 +1,81 @@
+// For React.createElement's type
+export const View = 'view';
+export const Block = 'block';
+export const CustomWrapper = 'custom-wrapper';
+export const Slot = 'slot';
+export const NativeSlot = 'native-slot';
+export const Icon = 'icon';
+export const Progress = 'progress';
+export const RichText = 'rich-text';
+export const Text = 'text';
+export const Button = 'button';
+export const Checkbox = 'checkbox';
+export const CheckboxGroup = 'checkbox-group';
+export const Form = 'form';
+export const Input = 'input';
+export const Label = 'label';
+export const Picker = 'picker';
+export const PickerView = 'picker-view';
+export const PickerViewColumn = 'picker-view-column';
+export const Radio = 'radio';
+export const RadioGroup = 'radio-group';
+export const Slider = 'slider';
+export const Switch = 'switch';
+export const Textarea = 'textarea';
+export const CoverImage = 'cover-image';
+export const CoverView = 'cover-view';
+export const MovableArea = 'movable-area';
+export const MovableView = 'movable-view';
+export const ScrollView = 'scroll-view';
+export const Swiper = 'swiper';
+export const SwiperItem = 'swiper-item';
+export const Navigator = 'navigator';
+export const Editor = 'editor';
+export const MatchMedia = 'match-media';
+export const FunctionalPageNavigator = 'functional-page-navigator';
+export const Audio = 'audio';
+export const Camera = 'camera';
+export const Image = 'image';
+export const LivePlayer = 'live-player';
+export const LivePusher = 'live-pusher';
+export const Video = 'video';
+export const Canvas = 'canvas';
+export const Ad = 'ad';
+export const OfficialAccount = 'official-account';
+export const OpenData = 'open-data';
+export const WebView = 'web-view';
+export const Map = 'map';
+export const NavigationBar = 'navigation-bar';
+export const PageMeta = 'page-meta';
+export const VoipRoom = 'voip-room';
+export const AdCustom = 'ad-custom';
+export const PageContainer = 'page-container';
+export const ShareElement = 'share-element';
+export const KeyboardAccessory = 'keyboard-accessory';
+export const RootPortal = 'root-portal';
+export const ChannelLive = 'channel-live';
+export const ChannelVideo = 'channel-video';
+export const ListView = 'list-view';
+export const ListBuilder = 'list-builder';
+export const List = 'list';
+export const ListItem = 'list-item';
+export const GridView = 'grid-view';
+export const GridBuilder = 'grid-builder';
+export const StickyHeader = 'sticky-header';
+export const StickySection = 'sticky-section';
+export const NestedScrollHeader = 'nested-scroll-header';
+export const NestedScrollBody = 'nested-scroll-body';
+export const PullToRefresh = 'pull-to-refresh';
+export const Script = 'script';
+export const Snapshot = 'snapshot';
+export const Span = 'span';
+export const OpenContainer = 'open-container';
+export const DraggableSheet = 'draggable-sheet';
+export const DoubleTapGestureHandler = 'double-tap-gesture-handler';
+export const ForcePressGestureHandler = 'force-press-gesture-handler';
+export const HorizontalDragGestureHandler = 'horizontal-drag-gesture-handler';
+export const LongPressGestureHandler = 'long-press-gesture-handler';
+export const PanGestureHandler = 'pan-gesture-handler';
+export const ScaleGestureHandler = 'scale-gesture-handler';
+export const TapGestureHandler = 'tap-gesture-handler';
+export const VerticalDragGestureHandler = 'vertical-drag-gesture-handler';