feat: update build process and examples

Author: Arman19941113

.browserslistrc

@@ -24,12 +24,12 @@ jobs:
       - name: Set up pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 7
+          version: 9
 
       - name: Set up node
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -38,16 +38,16 @@ jobs:
       - name: Run test
         run: pnpm run test
 
-      - name: Build assets
+      - name: Build lib
         run: pnpm run build
 
-      - name: Copy public
-        run: cp public/** dist
+      - name: Build example
+        run: cd examples/basic && pnpm run build
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          path: 'dist'
+          path: 'examples/basic/dist'
 
       - name: Deploy to GitHub Pages
         id: deployment

.eslintrc.js

@@ -0,0 +1,22 @@
+import { execSync } from 'child_process'
+import fs from 'fs-extra'
+import path from 'path'
+
+const run = command => execSync(command, { stdio: 'inherit' })
+const resolve = file => path.join(import.meta.dirname, '../packages/html-diff', file)
+const p = resolve('tsconfig.json')
+const outDir = resolve('dist-ts')
+const c = path.join(import.meta.dirname, 'rollup.config.mjs')
+const distDir = resolve('dist')
+
+await fs.remove(distDir)
+run(`tsc -p ${p} --outDir ${outDir} -d --emitDeclarationOnly`)
+run(`rollup -c ${c}`)
+await fs.remove(outDir)
+
+process.on('exit', exitCode => {
+  if (exitCode === 1) {
+    fs.removeSync(distDir)
+    fs.removeSync(outDir)
+  }
+})

.github/workflows/github-ci.yml

@@ -0,0 +1,119 @@
+import chalk from 'chalk'
+import { execSync } from 'child_process'
+import enquirer from 'enquirer'
+import fs from 'fs'
+import path from 'path'
+import semver from 'semver'
+
+const { prompt } = enquirer
+const run = command => execSync(command, { stdio: 'inherit' })
+const stepLog = msg => console.log(chalk.cyan(msg))
+const errorLog = msg => console.log(chalk.red(`\nError: ${msg}`))
+const successLog = msg => console.log(chalk.green(msg))
+
+// ensure no staged files before commit
+if (execSync('git diff --staged').length) {
+  errorLog('There has some changes to be committed')
+  process.exit(1)
+}
+
+const resolve = file => path.join(import.meta.dirname, '../packages/html-diff', file)
+const pkgPath = resolve('package.json')
+const pkgJson = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
+const { name: pkgName, version: currentVersion } = pkgJson
+let targetVersion
+
+const { level } = await prompt({
+  type: 'select',
+  name: 'level',
+  message: 'Select release level',
+  choices: ['prerelease', 'patch', 'prepatch', 'minor', 'preminor', 'major', 'premajor']
+    .map(level => {
+      const options = undefined
+      // prerelease level use beta identifier default
+      const identifier = level.startsWith('pre') ? 'beta' : undefined
+      return `${level} (${semver.inc(currentVersion, level, options, identifier)})`
+    })
+    .concat(['custom']),
+})
+
+if (level === 'custom') {
+  targetVersion = (
+    await prompt({
+      type: 'input',
+      name: 'version',
+      message: 'Input custom version',
+      initial: currentVersion,
+    })
+  ).version
+} else {
+  targetVersion = level.match(/\(([^)]*)\)/)[1]
+}
+
+if (!semver.valid(targetVersion)) {
+  errorLog(`Invalid target version: ${targetVersion}`)
+  process.exit(1)
+}
+
+const { tag } = await prompt({
+  type: 'select',
+  name: 'tag',
+  message: 'Select npm dist-tag type',
+  choices: ['latest', 'beta', 'next'],
+})
+
+const { yes: tagOk } = await prompt({
+  type: 'confirm',
+  name: 'yes',
+  message: `Releasing v${targetVersion} with the "${tag}" tag. Confirm?`,
+})
+
+if (!tagOk) {
+  process.exit()
+}
+
+// check targetVersion (should be larger than current released version)
+const viewCmd = `npm v ${pkgName} dist-tags.${tag}`
+try {
+  const curVersion = execSync(viewCmd, {
+    stdio: ['pipe', 'pipe', 'inherit'],
+  })
+    .toString()
+    .trim()
+  if (targetVersion === curVersion || semver.lt(targetVersion, curVersion)) {
+    errorLog(`The target version ${targetVersion} must be larger than ${curVersion}.`)
+    process.exit(1)
+  }
+} catch (e) {
+  // Maybe 404 not found, should publish manually at 1st time
+  // npm publish . --access public --tag latest
+  errorLog(e.message)
+  process.exit(1)
+}
+
+// run tests before release
+stepLog('\nRunning tests...')
+run('pnpm run test')
+
+// Build the package.
+stepLog('\nBuilding the package...')
+run('pnpm run build')
+
+// Publish the package.
+stepLog('\nPublishing the package...')
+pkgJson.version = targetVersion
+fs.writeFileSync(pkgPath, JSON.stringify(pkgJson, null, 2) + '\n')
+run(`cd packages/html-diff && npm publish . --access public --tag ${tag}`)
+
+// Commit changes to the Git.
+stepLog('\nCommitting changes...')
+run('git add packages/html-diff/package.json')
+run(`git commit -m "release: v${targetVersion}"`)
+
+// Push to GitHub.
+stepLog('\nPushing to GitHub...')
+run(`git tag v${targetVersion}`)
+run(`git push origin refs/tags/v${targetVersion}`)
+
+successLog(`\nReleased successfully at v${targetVersion}`)
+process.exit()

.husky/pre-commit

@@ -0,0 +1,55 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import typescript from '@rollup/plugin-typescript'
+import path from 'path'
+import postcssNested from 'postcss-nested'
+import postcssPresetEnv from 'postcss-preset-env'
+import { dts } from 'rollup-plugin-dts'
+import rollupPostcss from 'rollup-plugin-postcss'
+
+const resolve = file => path.join(import.meta.dirname, '../packages/html-diff', file)
+
+const dtsTask = {
+  input: resolve('dist-ts/index.d.ts'),
+  output: {
+    file: resolve('dist/index.d.ts'),
+    format: 'es',
+  },
+  plugins: [dts()],
+}
+
+const mjsTask = {
+  input: resolve('src/index.ts'),
+  output: {
+    file: resolve('dist/index.mjs'),
+    format: 'es',
+  },
+  plugins: [
+    typescript({
+      tsconfig: resolve('tsconfig.json'),
+    }),
+    nodeResolve(),
+  ],
+}
+
+const cssTask = {
+  input: resolve('src/index.css'),
+  output: {
+    file: resolve('dist/index.css'),
+    format: 'es',
+  },
+  plugins: [
+    rollupPostcss({
+      extract: true,
+      plugins: [
+        postcssNested,
+        postcssPresetEnv({
+          stage: 2,
+          enableClientSidePolyfills: true,
+          browsers: '> 0.5%, last 2 versions, not dead',
+        }),
+      ],
+    }),
+  ],
+}
+
+export default [dtsTask, mjsTask, cssTask]

api-extractor.json

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

build/build.mjs

@@ -0,0 +1,28 @@
+{
+  "name": "basic",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@armantang/html-diff": "workspace:*",
+    "clsx": "^2.1.1",
+    "github-markdown-css": "^5.7.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
+    "daisyui": "^4.12.14",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.14",
+    "vite": "^5.4.10"
+  }
+}

build/release.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}