akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: update package scripts

Browse Source
This commit is contained in:
Shivam Mishra
2025-06-12 14:26:04 +05:30
parent 0990e33860
commit 8f47496373
3 changed files with 46 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -16,7 +16,7 @@
"build:ui": "BUILD_MODE=ui vite build",
"build:react": "BUILD_MODE=react-components vite build",
"dev:react": "BUILD_MODE=react-components vite build --watch",
"package:react": "node scripts/publish-react-components.js",
"package:react": "node scripts/package-react-components.js",
"prepare": "husky install",
"size": "size-limit",
"story:dev": "histoire dev",
scripts/publish-react-components.js → scripts/package-react-components.js
+45 -126
View File
@@ -13,63 +13,6 @@ if (isCopyMode) {
console.log('🚀 Building Chatwoot React Components for NPM...');
}
async function publishReactComponents() {
try {
if (!isCopyMode) {
// Step 1: Clean previous builds
console.log('📦 Cleaning previous builds...');
if (fs.existsSync('dist')) {
fs.rmSync('dist', { recursive: true, force: true });
}
// Clean previous React component builds
const reactFiles = [
'public/packs/react-components.es.js',
'public/packs/react-components.cjs.js',
'public/packs/style.css',
];
reactFiles.forEach(file => {
if (fs.existsSync(file)) {
fs.unlinkSync(file);
console.log(` 🗑️ Removed ${file}`);
}
});
// Step 2: Build the React components library
console.log('🔨 Building React components...');
execSync('pnpm build:react', { stdio: 'inherit' });
}
// Step 3: Create package directory
console.log('📁 Creating package directory...');
const packageDir = 'dist/react-components';
fs.mkdirSync(packageDir, { recursive: true });
// Step 4: Copy built files
console.log('📋 Copying built files...');
copyBuildFiles(packageDir);
// Step 5: Generate package.json
console.log('📄 Generating package.json...');
generatePackageJson(packageDir);
// Step 6: Copy additional files (README, etc.)
console.log('📚 Copying documentation...');
copyDocumentation(packageDir);
console.log('✅ Package ready in dist/react-components/');
console.log('');
console.log('📦 Publishing options:');
console.log(' • npm publish: cd dist/react-components && npm publish');
console.log(' • yalc publish: pnpm package:react:yalc-publish');
console.log(' • local test: cd dist/react-components && npm pack');
} catch (error) {
console.error('❌ Build failed:', error.message);
process.exit(1);
}
}
function copyBuildFiles(packageDir) {
// Copy main build outputs
const files = [
@@ -161,7 +104,7 @@ function generatePackageJson(packageDir) {
},
// npm publish configuration
files: ['index.js', 'index.cjs', 'style.css', 'README.md', 'package.json'],
files: ['index.js', 'index.cjs', 'style.css', 'package.json'],
// Engine requirements
engines: {
@@ -176,81 +119,57 @@ function generatePackageJson(packageDir) {
console.log(' ✓ Generated package.json');
}
function copyDocumentation(packageDir) {
// Create a comprehensive README for the package
const readme = `# Chatwoot React Components
async function publishReactComponents() {
try {
if (!isCopyMode) {
// Step 1: Clean previous builds
console.log('📦 Cleaning previous builds...');
if (fs.existsSync('dist')) {
fs.rmSync('dist', { recursive: true, force: true });
}
React components for embedding Chatwoot messaging interface with Vue Web Components under the hood.
// Clean previous React component builds
const reactFiles = [
'public/packs/react-components.es.js',
'public/packs/react-components.cjs.js',
'public/packs/style.css',
];
## Installation
reactFiles.forEach(file => {
if (fs.existsSync(file)) {
fs.unlinkSync(file);
console.log(` 🗑️ Removed ${file}`);
}
});
\`\`\`bash
npm install @chatwoot/agent-react-components
# or
yarn add @chatwoot/agent-react-components
# or
pnpm add @chatwoot/agent-react-components
\`\`\`
// Step 2: Build the React components library
console.log('🔨 Building React components...');
execSync('pnpm build:react', { stdio: 'inherit' });
}
## Usage
// Step 3: Create package directory
console.log('📁 Creating package directory...');
const packageDir = 'dist/react-components';
fs.mkdirSync(packageDir, { recursive: true });
### Basic MessageList Integration
// Step 4: Copy built files
console.log('📋 Copying built files...');
copyBuildFiles(packageDir);
\`\`\`jsx
import React from 'react';
import { ChatwootProvider, ChatwootConversation } from '@chatwoot/agent-react-components';
import '@chatwoot/agent-react-components/style.css';
// Step 5: Generate package.json
console.log('📄 Generating package.json...');
generatePackageJson(packageDir);
function App() {
return (
<ChatwootProvider
baseURL="https://your-chatwoot-instance.com"
accountId="123"
conversationId={123}
userToken="your-auth-token"
websocketURL="wss://your-chatwoot-instance.com"
pubsubToken="your-pubsub-token"
>
<ChatwootConversation />
</ChatwootProvider>
);
}
\`\`\`
## Components
### ChatwootProvider
Root provider component that manages global configuration and initialization.
**Props:**
- \`baseURL\` (string, required): Your Chatwoot instance URL
- \`accountId\` (string|number, required): account identifier
- \`userToken\` (string, required): Authentication token
- \`conversationId\` (number, required): ID of the conversation to display
- \`websocketURL\` (string, optional): WebSocket endpoint, defaults to baseURL/cable
- \`pubsubToken\` (string, optional): PubSub token, defaults to userToken
### ChatwootConversation
Component that renders a specific conversation interface.
### useChatwoot
Hook to access the Chatwoot configuration within a ChatwootProvider.
\`\`\`jsx
import { useChatwoot } from '@chatwoot/agent-react-components';
function MyComponent() {
const { baseURL, userId, userToken } = useChatwoot();
// Use configuration as needed
}
\`\`\`
`;
fs.writeFileSync(path.join(packageDir, 'README.md'), readme);
console.log(' ✓ Generated README.md');
console.log('✅ Package ready in dist/react-components/');
console.log('');
console.log('📦 Publishing options:');
console.log(' • npm publish: cd dist/react-components && npm publish');
console.log(' • yalc publish: pnpm package:react:yalc-publish');
console.log(' • local test: cd dist/react-components && npm pack');
} catch (error) {
console.error('❌ Build failed:', error.message);
process.exit(1);
}
}
// Run the script
scripts/yalc-publish-react.js
-50
View File
@@ -1,50 +0,0 @@
const { execSync } = require('child_process');
const fs = require('fs');
console.log('🔗 Publishing Chatwoot React Components via Yalc...');
function yalcPublish() {
try {
// Check if yalc is installed
try {
execSync('yalc --version', { stdio: 'pipe' });
} catch (error) {
console.error('❌ Yalc is not installed globally.');
console.log('💡 Install yalc: npm install -g yalc');
process.exit(1);
}
// Check if package exists
const packageDir = 'dist/react-components';
if (!fs.existsSync(packageDir)) {
console.log('📦 Package not found. Building first...');
execSync('node scripts/publish-react-components.js', {
stdio: 'inherit',
});
}
// Publish with yalc
console.log('🚀 Publishing to yalc store...');
execSync('yalc publish', {
cwd: packageDir,
stdio: 'inherit',
});
console.log('');
console.log('✅ Published to yalc store!');
console.log('');
console.log('📖 Next steps in your test project:');
console.log(' 1. yalc add @chatwoot/agent-react-components');
console.log(' 2. npm install');
console.log(' 3. Import and use the components');
console.log('');
console.log('🔄 To update after changes:');
console.log(' 1. pnpm package:react:yalc-publish (in this repo)');
console.log(' 2. yalc update (in test project)');
} catch (error) {
console.error('❌ Yalc publish failed:', error.message);
process.exit(1);
}
}
yalcPublish();