Feat/vite

.github/workflows/release.yml

@@ -1,10 +1,12 @@
 name: Release
 
 on:
-  push:
-    branches:
-      - main
-      - dev
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version to release (e.g., 1.0.0)'
+        required: true
+        type: string
 
 jobs:
   release:
@@ -31,11 +33,39 @@ jobs:
       - name: Run Tests
         run: pnpm run lib:test
 
-      - name: Install dependencies
+      - name: Build
         run: pnpm run lib:build
 
-      - name: Semantic Release
+      - name: Copy README
+        run: cp README.md libs/react-plock/dist/
+
+      - name: Manual Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: pnpm run lib:release
+          VERSION: ${{ inputs.version }}
+        run: |
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "github-actions[bot]"
+          npm version $VERSION
+          pnpm --filter react-plock publish
+
+      - name: Generate Changelog
+        id: changelog
+        run: |
+          PREVIOUS_TAG=$(git describe --tags --abbrev=0 HEAD^)
+          CHANGELOG=$(git log --pretty=format:"- %s" ${PREVIOUS_TAG}..HEAD)
+          echo "CHANGELOG<<EOF" >> $GITHUB_ENV
+          echo "$CHANGELOG" >> $GITHUB_ENV
+          echo "EOF" >> $GITHUB_ENV
+
+      - name: Create GitHub Release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: v${{ inputs.version }}
+          release_name: v${{ inputs.version }}
+          body: ${{ env.CHANGELOG }}
+          draft: false
+          prerelease: false

.github/workflows/testing.yml

@@ -19,4 +19,4 @@ jobs:
           version: 8
 
       - run: pnpm install
-      - run: pnpm run lib:test
+      - run: pnpm run --filter react-plock test

examples/with-nextjs/tsconfig.json

@@ -20,7 +20,7 @@
     ],
     "paths": {
       "@/*": ["./src/*"],
-      "@local/lib": ["../../libs/react-plock/index"],
+      "@local/lib": ["../../libs/react-plock/src/index"],
       "@assets/*": ["../../assets/*"]
     }
   },

examples/with-vite/tsconfig.json

@@ -17,7 +17,7 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "paths": {
-      "@local/lib": ["../../libs/react-plock/index"],
+      "@local/lib": ["../../libs/react-plock/src/index"],
       "@assets/*": ["../../assets/*"]
     }
   },

libs/react-plock/package.json

@@ -1,6 +1,7 @@
 {
   "name": "react-plock",
   "version": "3.0.2",
+  "type": "module",
   "description": "The 1kB Masonry Grid for React",
   "author": "Renato Pozzi <[email protected]>",
   "homepage": "https://github.com/askides/react-plock#readme",
@@ -19,26 +20,15 @@
     "url": "git+https://github.com/askides/react-plock.git"
   },
   "scripts": {
-    "test": "jest",
-    "lib:bump": "changelogen --bump",
-    "lib:bump:dev": "changelogen --bump --prerelease dev",
-    "lib:publish": "changelogen --publish",
-    "lib:publish:dev": "npm publish react-plock --tag dev",
-    "lib:release": "semantic-release",
-    "build": "tsup index.ts --dts --minify"
+    "test": "vitest run",
+    "build": "vite build",
+    "lib:publish": "npm publish react-plock",
+    "lib:publish:dev": "npm publish react-plock --tag dev"
   },
   "bugs": {
     "url": "https://github.com/askides/react-plock/issues"
   },
   "peerDependencies": {
     "react": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/jest": "^29.4.0",
-    "@types/react": "^18.0.28",
-    "changelogen": "^0.5.5",
-    "jest": "^29.4.3",
-    "semantic-release": "^22.0.12",
-    "ts-jest": "^29.0.5"
   }
 }

libs/react-plock/src/index.spec.tsx

@@ -0,0 +1,78 @@
+import { describe, it, expect } from 'vitest';
+import { createChunks, createDataColumns } from '.';
+
+describe('Plock', () => {
+  it('should create chunks', () => {
+    const data = [1, 2, 3, 4, 5, 6, 7, 8];
+    const result = createChunks(data, 4);
+
+    expect(result).toEqual([
+      [1, 2, 3, 4],
+      [5, 6, 7, 8],
+    ]);
+  });
+
+  it('should create columns', () => {
+    const result = createDataColumns(
+      [
+        [1, 2, 3, 4],
+        [5, 6, 7, 8],
+      ],
+      4
+    );
+
+    expect(result).toEqual([
+      [1, 5],
+      [2, 6],
+      [3, 7],
+      [4, 8],
+    ]);
+  });
+
+  it('should create columns even with not equal values', () => {
+    const data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+    const chunks = createChunks(data, 4);
+    const result = createDataColumns(chunks, 4);
+
+    expect(result).toEqual([
+      [1, 5, 9],
+      [2, 6],
+      [3, 7],
+      [4, 8],
+    ]);
+  });
+
+  it('should create columns even with not equal values', () => {
+    const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
+    const chunks = createChunks(data, 4);
+    const result = createDataColumns(chunks, 4);
+
+    expect(result).toEqual([
+      [1, 5, 9, 13],
+      [2, 6, 10, 14],
+      [3, 7, 11, 15],
+      [4, 8, 12],
+    ]);
+  });
+
+  it('should create columns even with not equal values another', () => {
+    const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
+    const chunks = createChunks(data, 2);
+    const result = createDataColumns(chunks, 2);
+
+    expect(chunks).toEqual([
+      [1, 2],
+      [3, 4],
+      [5, 6],
+      [7, 8],
+      [9, 10],
+      [11, 12],
+      [13, 14],
+    ]);
+
+    expect(result).toEqual([
+      [1, 3, 5, 7, 9, 11, 13],
+      [2, 4, 6, 8, 10, 12, 14],
+    ]);
+  });
+});

libs/react-plock/tsconfig.json

@@ -1,8 +1,20 @@
 {
   "compilerOptions": {
-    "jsx": "react",
-    "esModuleInterop": true,
-    "outDir": "./dist"
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
   },
-  "include": ["./src", "index.ts"]
+  "include": ["src", "index.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

libs/react-plock/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

libs/react-plock/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  plugins: [react(), dts({ rollupTypes: true })],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.tsx'),
+      formats: ['es', 'cjs'],
+      fileName: (format) => `index.${format}.js`,
+    },
+    rollupOptions: {
+      external: [/^react($|\/.*)/, 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+});

libs/react-plock/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+  },
+});