mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-21 05:25:03 +00:00
feat: add publishing pipeline
This commit is contained in:
Shivam Mishra
244
scripts/publish-react-components.js
Normal file
244
scripts/publish-react-components.js
Normal file
@@ -0,0 +1,244 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const { execSync } = require('child_process');
|
||||
|
||||
console.log('🚀 Building Chatwoot React Components for NPM...');
|
||||
|
||||
async function publishReactComponents() {
|
||||
try {
|
||||
// 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 = [
|
||||
{ src: 'public/packs/react-components.es.js', dest: 'index.js' }, // ES module (main)
|
||||
{ src: 'public/packs/react-components.cjs.js', dest: 'index.cjs' }, // CommonJS
|
||||
{ src: 'public/packs/style.css', dest: 'style.css' }, // CSS styles
|
||||
];
|
||||
|
||||
files.forEach(({ src, dest }) => {
|
||||
if (fs.existsSync(src)) {
|
||||
fs.copyFileSync(src, path.join(packageDir, dest));
|
||||
console.log(` ✓ Copied ${dest}`);
|
||||
} else {
|
||||
console.warn(` ⚠️ Warning: ${src} not found`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function generatePackageJson(packageDir) {
|
||||
// Read version from main package.json
|
||||
const mainPackage = JSON.parse(fs.readFileSync('package.json', 'utf8'));
|
||||
|
||||
const packageJson = {
|
||||
name: '@chatwoot/react-components',
|
||||
version: `${mainPackage.version}-beta.1`, // Use main version + beta suffix
|
||||
description:
|
||||
'React components for Chatwoot messaging interface with Vue Web Components',
|
||||
|
||||
// Entry points for different module systems
|
||||
main: 'index.cjs', // CommonJS entry point for Node.js
|
||||
module: 'index.js', // ES module entry point for bundlers
|
||||
exports: {
|
||||
'.': {
|
||||
import: './index.js', // ES modules
|
||||
require: './index.cjs', // CommonJS
|
||||
},
|
||||
'./style.css': './style.css',
|
||||
},
|
||||
|
||||
// Peer dependencies - what the consuming app must provide
|
||||
peerDependencies: {
|
||||
react: '>=16.8.0', // Hooks support
|
||||
'react-dom': '>=16.8.0',
|
||||
},
|
||||
|
||||
// Package metadata
|
||||
keywords: [
|
||||
'chatwoot',
|
||||
'react',
|
||||
'vue',
|
||||
'webcomponents',
|
||||
'chat',
|
||||
'messaging',
|
||||
'customer-support',
|
||||
'ui-components',
|
||||
],
|
||||
author: 'Chatwoot',
|
||||
license: 'MIT',
|
||||
repository: {
|
||||
type: 'git',
|
||||
url: 'https://github.com/chatwoot/chatwoot.git',
|
||||
directory: 'app/javascript/react-components',
|
||||
},
|
||||
homepage: 'https://chatwoot.com',
|
||||
bugs: {
|
||||
url: 'https://github.com/chatwoot/chatwoot/issues',
|
||||
},
|
||||
|
||||
// npm publish configuration
|
||||
files: ['index.js', 'index.cjs', 'style.css', 'README.md', 'package.json'],
|
||||
|
||||
// Engine requirements
|
||||
engines: {
|
||||
node: '>=16.0.0',
|
||||
},
|
||||
};
|
||||
|
||||
fs.writeFileSync(
|
||||
path.join(packageDir, 'package.json'),
|
||||
JSON.stringify(packageJson, null, 2)
|
||||
);
|
||||
console.log(' ✓ Generated package.json');
|
||||
}
|
||||
|
||||
function copyDocumentation(packageDir) {
|
||||
// Create a comprehensive README for the package
|
||||
const readme = `# Chatwoot React Components
|
||||
|
||||
React components for embedding Chatwoot messaging interface with Vue Web Components under the hood.
|
||||
|
||||
## Installation
|
||||
|
||||
\`\`\`bash
|
||||
npm install @chatwoot/react-components
|
||||
# or
|
||||
yarn add @chatwoot/react-components
|
||||
# or
|
||||
pnpm add @chatwoot/react-components
|
||||
\`\`\`
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Hello World
|
||||
|
||||
\`\`\`jsx
|
||||
import React from 'react';
|
||||
import { HelloWorld } from '@chatwoot/react-components';
|
||||
import '@chatwoot/react-components/style.css';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<HelloWorld />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
### Vue Web Component Integration
|
||||
|
||||
\`\`\`jsx
|
||||
import React from 'react';
|
||||
import { VueWebComponentWrapper } from '@chatwoot/react-components';
|
||||
import '@chatwoot/react-components/style.css';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<VueWebComponentWrapper
|
||||
initialCount={10}
|
||||
title="Custom Title"
|
||||
color="#ff6b6b"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
## Components
|
||||
|
||||
### HelloWorld
|
||||
|
||||
A simple React component with counter functionality.
|
||||
|
||||
**Props:** None
|
||||
|
||||
### VueWebComponentWrapper
|
||||
|
||||
A React wrapper for Vue components converted to Web Components.
|
||||
|
||||
**Props:**
|
||||
- \`initialCount\` (number): Starting count value (default: 0)
|
||||
- \`title\` (string): Display title (default: "Hello from Vue in React!")
|
||||
- \`color\` (string): Button color (default: "#42b883")
|
||||
|
||||
## Architecture
|
||||
|
||||
This package demonstrates:
|
||||
- 🔄 **Vue → Web Components**: Using Vue 3's \`defineCustomElement\`
|
||||
- ⚛️ **React Integration**: Wrapping Web Components in React components
|
||||
- 📦 **Dual Build**: ES modules + CommonJS for maximum compatibility
|
||||
- 🎨 **CSS Isolation**: Scoped styles via Shadow DOM
|
||||
|
||||
## Requirements
|
||||
|
||||
- React 16.8+ (hooks support)
|
||||
- Modern browsers with Web Components support
|
||||
|
||||
## Development
|
||||
|
||||
This package is part of the [Chatwoot](https://chatwoot.com) project.
|
||||
|
||||
## License
|
||||
|
||||
MIT © [Chatwoot](https://chatwoot.com)
|
||||
`;
|
||||
|
||||
fs.writeFileSync(path.join(packageDir, 'README.md'), readme);
|
||||
console.log(' ✓ Generated README.md');
|
||||
}
|
||||
|
||||
// Run the script
|
||||
publishReactComponents();
|
||||
Reference in New Issue
Block a user