build(release): 标准化发布流程

Author: zhaozhiwen

components/alert/index.mdx

@@ -8,19 +8,19 @@ import { HappyBox } from '../../doc-comps';
 import BasicDemo from './demo/1-demo-basic';
 import BasicDemoCode from '!raw-loader!./demo/1-demo-basic.tsx';
 
-# Alert 警告提示
+## Alert 警告提示
 
 警告提示，展现需要关注的信息。
 
-## 代码演示
+### 代码演示
 
-### 基本用法
+#### 基本用法
 
 <HappyBox code={BasicDemoCode} title="基本用法" desc="使用kind控制Alert类型">
   <BasicDemo />
 </HappyBox>
 
-## API
+### API
 
 | 属性 | 说明     | 类型                                         | 默认值 |
 | ---- | -------- | -------------------------------------------- | ------ |

package.json

@@ -5,6 +5,12 @@
   "typings": "types/index.d.ts",
   "main": "lib/index.js",
   "module": "esm/index.js",
+  "sideEffects": [
+    "dist/*",
+    "esm/**/style/*",
+    "lib/**/style/*",
+    "*.less"
+  ],
   "scripts": {
     "dev": "docz dev",
     "start": "npm run dev",
@@ -13,6 +19,7 @@
     "clean": "rimraf types lib esm dist",
     "build:types": "tsc -p tsconfig.build.json",
     "build": "npm run clean && npm run build:types && gulp",
+    "release": "ts-node ./scripts/release.ts",
     "commit": "git-cz",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -33,15 +40,9 @@
   },
   "homepage": "https://github.com/worldzhao/react-ui-library-tutorial#readme",
   "peerDependencies": {
-    "react": ">=16.0.0",
-    "react-dom": ">=16.0.0"
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   },
-  "sideEffects": [
-    "dist/*",
-    "esm/**/style/*",
-    "lib/**/style/*",
-    "*.less"
-  ],
   "devDependencies": {
     "@babel/core": "^7.7.7",
     "@babel/plugin-proposal-class-properties": "^7.7.4",
@@ -62,7 +63,7 @@
     "chalk": "^3.0.0",
     "commitizen": "^4.0.3",
     "cz-conventional-changelog": "^3.0.2",
-    "docz": "^2.2.0",
+    "docz": "^2.3.2-alpha.0",
     "gatsby-plugin-import": "^2.1.5",
     "gatsby-plugin-less": "^3.0.17",
     "gatsby-plugin-styled-components": "^3.3.0",
@@ -89,10 +90,12 @@
     "react-tooltip": "^4.2.5",
     "react-use": "^13.12.2",
     "rimraf": "^3.0.0",
+    "semver": "^7.3.2",
     "snapshot-diff": "^0.6.1",
     "styled-components": "^5.1.0",
     "through2": "^3.0.1",
     "ts-jest": "^24.2.0",
+    "ts-node": "^8.10.1",
     "typescript": "^3.7.3"
   },
   "lint-staged": {

scripts/release.ts

@@ -0,0 +1,147 @@
+/* eslint-disable  import/no-extraneous-dependencies,@typescript-eslint/camelcase, no-console */
+import inquirer from 'inquirer';
+import fs from 'fs';
+import path from 'path';
+import child_process from 'child_process';
+import util from 'util';
+import chalk from 'chalk';
+import semverInc from 'semver/functions/inc';
+import { ReleaseType } from 'semver';
+
+import pkg from '../package.json';
+
+const exec = util.promisify(child_process.exec);
+
+const run = async (command: string) => {
+  console.log(chalk.green(command));
+  await exec(command);
+};
+
+const currentVersion = pkg.version;
+
+const getNextVersions = (): { [key in ReleaseType]: string | null } => ({
+  major: semverInc(currentVersion, 'major'),
+  minor: semverInc(currentVersion, 'minor'),
+  patch: semverInc(currentVersion, 'patch'),
+  premajor: semverInc(currentVersion, 'premajor'),
+  preminor: semverInc(currentVersion, 'preminor'),
+  prepatch: semverInc(currentVersion, 'prepatch'),
+  prerelease: semverInc(currentVersion, 'prerelease'),
+});
+
+const timeLog = (logInfo: string, type: 'start' | 'end') => {
+  let info = '';
+  if (type === 'start') {
+    info = `=> 开始任务：${logInfo}`;
+  } else {
+    info = `✨ 结束任务：${logInfo}`;
+  }
+  const nowDate = new Date();
+  console.log(
+    `[${nowDate.toLocaleString()}.${nowDate
+      .getMilliseconds()
+      .toString()
+      .padStart(3, '0')}] ${info}
+    `,
+  );
+};
+
+/**
+ * 获取下一次版本号
+ */
+async function prompt(): Promise<string> {
+  const nextVersions = getNextVersions();
+  const { nextVersion } = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'nextVersion',
+      message: `请选择将要发布的版本 (当前版本 ${currentVersion})`,
+      choices: (Object.keys(nextVersions) as Array<ReleaseType>).map(level => ({
+        name: `${level} => ${nextVersions[level]}`,
+        value: nextVersions[level],
+      })),
+    },
+  ]);
+  return nextVersion;
+}
+
+/**
+ * 更新版本号
+ * @param nextVersion 新版本号
+ */
+async function updateVersion(nextVersion: string) {
+  pkg.version = nextVersion;
+  timeLog('修改package.json版本号', 'start');
+  await fs.writeFileSync(path.resolve(__dirname, './../package.json'), JSON.stringify(pkg));
+  await run('npx prettier package.json --write');
+  timeLog('修改package.json版本号', 'end');
+}
+
+async function generateChangelog() {
+  timeLog('生成CHANGELOG.md', 'start');
+  await run(' npx conventional-changelog -p angular -i CHANGELOG.md -s -r 0');
+  timeLog('生成CHANGELOG.md', 'end');
+}
+
+/**
+ * 将代码提交至git
+ */
+async function push(nextVersion: string) {
+  timeLog('推送代码至git仓库', 'start');
+  await run('git add package.json CHANGELOG.md');
+  await run(`git commit -m "v${nextVersion}" -n`);
+  await run('git push');
+  timeLog('推送代码至git仓库', 'end');
+}
+
+/**
+ * 组件库打包
+ */
+async function build() {
+  timeLog('组件库打包', 'start');
+  await run('npm run build');
+  timeLog('组件库打包', 'end');
+}
+
+/**
+ * 发布至npm
+ */
+async function publish() {
+  timeLog('发布组件库', 'start');
+  await run('npm publish');
+  timeLog('发布组件库', 'end');
+}
+
+/**
+ * 打tag提交至git
+ */
+async function tag(nextVersion: string) {
+  timeLog('打tag并推送至git', 'start');
+  await run(`git tag v${nextVersion}`);
+  await run(`git push origin tag v${nextVersion}`);
+  timeLog('打tag并推送至git', 'end');
+}
+
+async function main() {
+  try {
+    const nextVersion = await prompt();
+    const startTime = Date.now();
+    // =================== 更新版本号 ===================
+    await updateVersion(nextVersion);
+    // =================== 更新changelog ===================
+    await generateChangelog();
+    // =================== 代码推送git仓库 ===================
+    await push(nextVersion);
+    // =================== 组件库打包 ===================
+    await build();
+    // =================== 发布至npm ===================
+    await publish();
+    // =================== 打tag并推送至git ===================
+    await tag(nextVersion);
+    console.log(`✨ 发布流程结束 共耗时${((Date.now() - startTime) / 1000).toFixed(3)}s`);
+  } catch (error) {
+    console.log('💣 发布失败，失败原因：', error);
+  }
+}
+
+main();

src/gatsby-theme-docz/components/Layout/index.js

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import { useRef, useState } from 'react';
+import { useCurrentDoc } from 'docz';
+import { jsx, Layout as BaseLayout, Main } from 'theme-ui';
+import { Global } from '@emotion/core';
+
+import global from 'gatsby-theme-docz/src/theme/global';
+import { Header } from 'gatsby-theme-docz/src/components/Header';
+import { MainContainer } from 'gatsby-theme-docz/src/components/MainContainer';
+import { Sidebar } from '../Sidebar';
+import * as styles from './styles';
+
+export const Layout = ({ children }) => {
+  const [open, setOpen] = useState(false);
+  const nav = useRef();
+  const current = useCurrentDoc();
+
+  if (current.fullpage) return children;
+
+  return (
+    <BaseLayout sx={{ '& > div': { flex: '1 1 auto' } }} data-testid="layout">
+      <Global styles={global} />
+      <Main sx={styles.main}>
+        <Header onOpen={() => setOpen(s => !s)} />
+        <div sx={styles.wrapper}>
+          <Sidebar
+            ref={nav}
+            open={open}
+            onFocus={() => setOpen(true)}
+            onBlur={() => setOpen(false)}
+            onClick={() => setOpen(false)}
+          />
+          <MainContainer data-testid="main-container">{children}</MainContainer>
+        </div>
+      </Main>
+    </BaseLayout>
+  );
+};

src/gatsby-theme-docz/components/Layout/styles.js

@@ -0,0 +1,18 @@
+import { media } from 'gatsby-theme-docz/src/theme/breakpoints';
+
+export const main = {
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: '100vh',
+};
+
+export const wrapper = {
+  py: 0,
+  flex: 1,
+  display: 'grid',
+  gridTemplateColumns: '250px minmax(0, 1fr)',
+  minHeight: '100vh',
+  [media.tablet]: {
+    display: 'block',
+  },
+};

src/gatsby-theme-docz/components/NavLink/index.js

@@ -0,0 +1,52 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from 'theme-ui';
+import { Link } from 'gatsby';
+import { useDocs, useCurrentDoc } from 'docz';
+import { get } from 'lodash/fp';
+
+import * as styles from './styles';
+
+const getHeadings = (route, docs) => {
+  const doc = docs.find(doc => doc.route === route);
+  const headings = get('headings', doc);
+  return headings ? headings.filter(heading => heading.depth === 4) : [];
+};
+
+const getCurrentHash = () => {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+  return window.location ? decodeURI(window.location.hash) : '';
+};
+
+export const NavLink = React.forwardRef(({ item, ...props }, ref) => {
+  const docs = useDocs();
+  const current = useCurrentDoc();
+
+  if (item.hidden) {
+    return null;
+  }
+
+  const to = item.route;
+  const headings = docs && getHeadings(to, docs);
+  const isCurrent = item.route === current.route;
+  const showHeadings = isCurrent && headings && headings.length > 0;
+  const currentHash = getCurrentHash();
+  return (
+    <React.Fragment>
+      <Link {...props} to={to} sx={styles.link} activeClassName="active" ref={ref} />
+      {showHeadings &&
+        headings.map(heading => (
+          <Link
+            key={heading.slug}
+            to={`${to}#${heading.slug}`}
+            sx={styles.smallLink}
+            className={currentHash === `#${heading.slug}` ? 'active' : ''}
+          >
+            {heading.value}
+          </Link>
+        ))}
+    </React.Fragment>
+  );
+});

src/gatsby-theme-docz/components/NavLink/styles.js

@@ -0,0 +1,33 @@
+export const link = {
+  my: 2,
+  display: 'block',
+  color: 'sidebar.navGroup',
+  textDecoration: 'none',
+  fontSize: 2,
+  '&.active': {
+    color: 'sidebar.navLinkActive',
+  },
+}
+
+export const smallLink = {
+  ...link,
+  ml: 3,
+  fontSize: 1,
+  position: 'relative',
+  color: 'sidebar.tocLink',
+  '&.active': {
+    color: 'sidebar.tocLinkActive',
+  },
+  '&.active::before': {
+    content: '""',
+    position: 'absolute',
+    display: 'block',
+    top: '2px',
+    left: -2,
+    height: '1rem',
+    backgroundColor: 'primary',
+    transition: 'width 200ms ease 0s',
+    width: '2px',
+    borderRadius: 1,
+  },
+}