Fix CI script for version syncing

Author: Konstantine Kalbazov

.github/workflows/ci.yml

@@ -44,24 +44,28 @@ jobs:
           VERSION=$(cat package.json | jq -r .version)
           echo "Using version: $VERSION"
           # Update all workspace package versions to match root package.json
-          bun x workspaces-update-version $VERSION --force-publish --no-git-tag-version --no-push --yes
+          for pkg in packages/*/package.json; do
+            jq --arg version "$VERSION" '.version = $version' "$pkg" > tmp.$$.json && mv tmp.$$.json "$pkg"
+          done
 
       - name: Building for production
         env:
           NODE_ENV: production
           SKIP_PREFLIGHT_CHECK: 'true'
-        run: bun run build --if-present
+        run: |
+          bun run --cwd=packages/component build
+          bun run --cwd=packages/playground build
 
       - name: Copying documents
         run: |
           cp CHANGELOG.md packages/component
           cp LICENSE packages/component
           cp README.md packages/component
 
-      - name: Running bun pack
+      - name: Running npm pack
         run: |
           cd packages/component
-          bun pack
+          npm pack
 
       - name: Uploading npm-tarball
         uses: actions/upload-artifact@v4
@@ -73,7 +77,7 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: gh-pages
-          path: 'packages/playground/build/**/*'
+          path: 'packages/playground/dist/**/*'
 
   # "test" job will only run when not deploying, will build for instrumentation.
   test:
@@ -105,7 +109,9 @@ jobs:
           VERSION=$(cat package.json | jq -r .version)
           echo "Using version: $VERSION"
           # Update all workspace package versions to match root package.json
-          bun x workspaces-update-version $VERSION --force-publish --no-git-tag-version --no-push --yes
+          for pkg in packages/*/package.json; do
+            jq --arg version "$VERSION" '.version = $version' "$pkg" > tmp.$$.json && mv tmp.$$.json "$pkg"
+          done
 
       - name: Running static code analysis
         run: |
@@ -116,7 +122,7 @@ jobs:
         env:
           NODE_ENV: test
           SKIP_PREFLIGHT_CHECK: 'true'
-        run: bun run build --if-present
+        run: bun run --cwd=packages/component build:full
 
       - name: Starting Docker Compose
         run: bun run docker:up -- --detach
@@ -164,7 +170,7 @@ jobs:
       - name: Publishing ${{ steps.read-package-json.outputs.name }}@${{ steps.read-package-json.outputs.version }}
         run: |
           bun config set //registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}
-          bun publish *.tgz --tag main
+          bun publish *.tgz --tag main --access public
 
       - name: Tagging dist-tag ${{ steps.read-package-json.outputs.name }}@${{ steps.read-package-json.outputs.version }} latest
         if: ${{ startsWith(github.ref, 'refs/tags/') }}

.gitignore

@@ -3,3 +3,5 @@
 /coverage
 /lib
 node_modules/
+dist/
+packages/playground/dist/

README.md

@@ -27,7 +27,7 @@ Try out the demo at [https://compulim.github.io/react-scroll-to-bottom/](https:/
 
 ```jsx
 import { css } from 'emotion';
-import ScrollToBottom from 'react-scroll-to-bottom';
+import ScrollToBottom from '@koteus/react-scroll-to-bottom';
 
 const ROOT_CSS = css({
   height: 600,
@@ -184,7 +184,7 @@ The following sample code will put a button inside the content view only if the
 > Note: `useScrollToBottom` can only be called inside components hosted under `<ScrollToBottom>`.
 
 ```jsx
-import ScrollToBottom, { useScrollToBottom, useSticky } from 'react-scroll-to-bottom';
+import ScrollToBottom, { useScrollToBottom, useSticky } from '@koteus/react-scroll-to-bottom';
 
 const Content = () => {
   const scrollToBottom = useScrollToBottom();
@@ -331,7 +331,7 @@ This context contains state of the container.
 The following sample code will put a button inside the content view only if the view is not at the bottom. When the button is clicked, it will scroll the view to the bottom.
 
 ```jsx
-import ScrollToBottom from 'react-scroll-to-bottom';
+import ScrollToBottom from '@koteus/react-scroll-to-bottom';
 
 const Content = ({ scrollToBottom, sticky }) => {
   return (

bun.lock

@@ -1,12 +1,11 @@
 {
   "name": "root",
-  "version": "5.0.0-0",
+  "version": "5.0.0-beta",
   "description": "React container that will auto scroll to bottom",
   "private": true,
   "workspaces": ["packages/*"],
   "scripts": {
     "browser": "node packages/test-harness/src/host/dev/index.js http://localhost:5000/__tests__/",
-    "build:packages": "bun run --workspace=packages/component --workspace=packages/test-harness --workspace=packages/playground build",
     "docker": "concurrently \"bun run docker:up\" \"bun run docker:watch\"",
     "docker:down": "docker-compose down --rmi all",
     "docker:up": "docker-compose down && docker-compose build --parallel && docker-compose up --scale chromium=2",

package.json

@@ -1,3 +1,2 @@
-/dist
-/lib
-/node_modules
+build/
+node_modules/

packages/component/.gitignore

@@ -1,5 +1,5 @@
 {
-  "name": "react-scroll-to-bottom",
+  "name": "@koteus/react-scroll-to-bottom",
   "version": "0.0.0-0",
   "description": "React container that will auto scroll to bottom",
   "keywords": [
@@ -16,20 +16,28 @@
     "stick to top",
     "tail"
   ],
-  "main": "lib/index.js",
-  "module": "lib/esm/index.js",
+  "main": "build/index.js",
+  "module": "build/esm/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "import": "./build/esm/index.js",
+      "require": "./build/index.js"
+    },
+    "./style.css": "./build/style.css"
+  },
   "files": [
-    "lib/**/*"
+    "build/**/*"
   ],
   "scripts": {
-    "build": "vite build && BROWSER_BUILD=true vite build && bun run build:test-harness",
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "build:full": "vite build && bun run build:test-harness",
     "build:test-harness": "cp ../test-harness/dist/* dist/ || true",
-    "build:dev": "vite build --watch",
+    "start:test-harness": "nodemon --exec \"bun run build:test-harness\" --watch ../test-harness/dist",
     "eslint": "eslint src/**/*.js --ignore-pattern *.spec.js --ignore-pattern *.test.js",
-    "precommit": "eslint",
-    "start": "concurrently \"bun run start:*\"",
-    "start:vite": "vite build --watch",
-    "start:test-harness": "nodemon --exec \"bun run build:test-harness\" --watch ../test-harness/dist"
+    "precommit": "eslint"
   },
   "author": "William Wong <[email protected]> (http://compulim.info/)",
   "license": "MIT",

packages/component/package.json

@@ -4,64 +4,43 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import dts from 'vite-plugin-dts';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const __dirname = dirname(fileURLToPath(import.meta.url));
 const pkgVersion = process.env.npm_package_version || '0.0.0';
 
-// Check if we're building the browser bundle
-const isBrowserBuild = process.env.BROWSER_BUILD === 'true';
-
 export default defineConfig({
   plugins: [
     react({
       // Include .js files that contain JSX
       include: /\.(jsx|js)$/
     }),
-    !isBrowserBuild && dts({
+    dts({
       include: ['src/**/*.js'],
-      beforeWriteFile: (filePath, content) => {
-        return {
-          filePath: filePath.replace('.d.ts', '.d.ts'),
-          content
-        };
-      }
+      beforeWriteFile: (filePath, content) => ({
+        filePath: filePath.replace('.d.ts', '.d.ts'),
+        content
+      })
     })
   ],
   define: {
     'process.env.VITE_APP_VERSION': JSON.stringify(pkgVersion)
   },
-  build: isBrowserBuild ? {
-    outDir: 'dist',
+  build: {
+    outDir: 'build',
     lib: {
-      entry: resolve(__dirname, 'src/browser.js'),
+      entry: resolve(__dirname, 'src/index.js'),
       name: 'ReactScrollToBottom',
-      formats: ['umd'],
-      fileName: () => 'react-scroll-to-bottom.development.js'
-    },
-    rollupOptions: {
-      external: ['react', 'react-dom'],
-      output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM'
+      formats: ['es', 'cjs', 'umd'],
+      fileName: (format) => {
+        switch (format) {
+          case 'es':
+            return `esm/index.js`;
+          case 'cjs':
+            return `index.js`;
+          case 'umd':
+            return `dist/react-scroll-to-bottom.development.js`;
         }
       }
     },
-    sourcemap: true,
-    minify: false
-  } : {
-    lib: {
-      entry: {
-        index: resolve(__dirname, 'src/index.js'),
-        browser: resolve(__dirname, 'src/browser.js')
-      },
-      formats: ['es', 'cjs'],
-      fileName: (format, entryName) => {
-        return format === 'es'
-          ? `esm/${entryName}.js`
-          : `${entryName}.js`;
-      }
-    },
     rollupOptions: {
       external: ['react', 'react-dom', 'classnames', 'math-random', 'simple-update-in'],
       output: {
@@ -75,8 +54,6 @@ export default defineConfig({
         exports: 'named'
       }
     },
-    target: 'es2020',
-    outDir: 'lib',
     sourcemap: true,
     minify: false
   },

packages/component/vite.config.mjs

@@ -10,6 +10,7 @@
 
 # production
 /build
+dist/
 
 # misc
 .DS_Store