Migrating from npm to CLI

Step-by-step guide to migrate from old npm packages to the new CLI-based components.

Why Migrate?

The new CLI approach offers:

✅ Full source code ownership
✅ Unlimited customization
✅ No styleCallbacks complexity
✅ Direct code editing
✅ Better version control
✅ No black-box abstractions

Migration Steps

Install CLI Components (Side-by-Side)

First, install the CLI version alongside your existing npm package for testing:

npx @replyke/cli init
npx @replyke/cli add comments-threaded
# or
npx @replyke/cli add comments-social

This creates components at src/components/comments-threaded/ without removing your npm package.

Update Imports

Change your import statements:Before (npm package):

import { ThreadedCommentSection } from '@replyke/comments-threaded-react-js';

After (CLI component):

import { ThreadedCommentSection } from './components/comments-threaded';

Remove styleCallbacks Prop

The CLI components don’t use styleCallbacks. Remove that prop:Before:

<ThreadedCommentSection
  entityId="post_123"
  styleCallbacks={{
    commentContainer: (theme) => ({ backgroundColor: '#F3F4F6' }),
    authorName: (theme) => ({ color: '#2563EB', fontWeight: 'bold' }),
    // ... 50 more callbacks
  }}
/>

After:

<ThreadedCommentSection entityId="post_123" />

Apply Customizations in Source Files

Instead of styleCallbacks, edit the source files directly.Example: If you had authorName styling, edit single-comment.tsx:

// File: src/components/comments-threaded/components/single-comment/single-comment.tsx

<span style={{
  color: '#2563EB',      // Your custom color
  fontWeight: 'bold'     // Your custom weight
}}>
  {author.name}
</span>

See Mapping Guide for all callback-to-file mappings.

Test Thoroughly

Test the CLI version alongside the npm version to ensure feature parity.

// Temporarily switch between versions for testing
const useNewVersion = true;

{useNewVersion ? (
  <ThreadedCommentSection entityId="post_123" />  // CLI version
) : (
  <OldThreadedCommentSection entityId="post_123" styleCallbacks={...} />  // npm version
)}

Uninstall Old Package

Once you’re confident, uninstall the npm package:

npm uninstall @replyke/comments-threaded-react-js
# or
npm uninstall @replyke/comments-social-react-js

Complete Example

Before (npm package)

import { ThreadedCommentSection } from '@replyke/comments-threaded-react-js';

function BlogPost({ post }) {
  return (
    <>
      <article>{post.content}</article>

      <ThreadedCommentSection
        foreignId={post.id}
        styleCallbacks={{
          commentContainer: (theme) => ({
            backgroundColor: theme === 'dark' ? '#1F2937' : '#FFFFFF',
            padding: '12px',
            borderRadius: '8px'
          }),
          authorName: (theme) => ({
            color: theme === 'dark' ? '#60A5FA' : '#2563EB',
            fontWeight: 'bold'
          }),
          // ... dozens more callbacks
        }}
      />
    </>
  );
}

After (CLI component)

import { ThreadedCommentSection } from './components/comments-threaded';

function BlogPost({ post }) {
  const [isDark, setIsDark] = useState(false);

  return (
    <>
      <article>{post.content}</article>

      <ThreadedCommentSection
        foreignId={post.id}
        theme={isDark ? 'dark' : 'light'}  // Only for inline styles variant
      />
    </>
  );
}

Then customize by editing source files:

// File: src/components/comments-threaded/components/single-comment/single-comment.tsx

<div style={{
  backgroundColor: theme === 'dark' ? '#1F2937' : '#FFFFFF',
  padding: '12px',
  borderRadius: '8px'
}}>
  <span style={{
    color: theme === 'dark' ? '#60A5FA' : '#2563EB',
    fontWeight: 'bold'
  }}>
    {author.name}
  </span>
  {/* ... */}
</div>

Benefits After Migration

Before (npm)	After (CLI)
Complex `styleCallbacks` object	Simple `theme` prop
Limited to exposed surfaces	Customize anything
Hidden in node_modules	Visible in your repo
Can’t modify layout	Edit JSX directly
Package updates may break	You control updates

Common Issues

Missing customizations after migration

You need to manually apply your styleCallbacks customizations to the source files.Use the Mapping Guide to find where each callback maps to.

Different styling approach

If you used Tailwind before but CLI installed inline styles (or vice versa), reconfigure:

rm -rf src/components/comments-threaded
# Edit replyke.json: change "style"
npx @replyke/cli add comments-threaded

Breaking changes in core SDK

The CLI components use the same core SDK (@replyke/react-js). No breaking changes there.Only the component API changed (removed styleCallbacks).

Next Steps

Mapping Guide

Map styleCallbacks to source files

Migration FAQ

Common migration questions

Customization

Customize your new components

Legacy Docs

View old npm package docs

Overview

Installation

Component Types

Threaded Comments

Social Comments

Notification Control

Customization

Migration

Legacy (Deprecated)

Migration Guide

Migrating from npm to CLI

Why Migrate?

Migration Steps

Complete Example

Before (npm package)

After (CLI component)

Benefits After Migration

Common Issues

Next Steps

Mapping Guide

Migration FAQ

Customization

Legacy Docs

​Migrating from npm to CLI

​Why Migrate?

​Migration Steps

​Complete Example

​Before (npm package)

​After (CLI component)

​Benefits After Migration

​Common Issues

​Next Steps

Mapping Guide

Migration FAQ

Customization

Legacy Docs

Migrating from npm to CLI

Why Migrate?

Migration Steps

Complete Example

Before (npm package)

After (CLI component)

Benefits After Migration

Common Issues

Next Steps