• Stars
    star
    126
  • Rank 275,211 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Command-line tool to migrate React to Preact

bye-react

Made by @vriad

Migrate your project from React to Preact with a single command. More specifically, this tool switches the project over to preact-compat, the "compatibility layer that makes React-based modules work with Preact, without any code changes". After running the command below, no code changes should be necessary for your project to run successfully.

Disclaimers

  1. Requires usage of Webpack, Browserify, or the Babel React preset (or any combination thereof). If you don’t use any of these, this won't work. Also you should probably be using one of these.
  2. Not guaranteed to work in all cases. You should be using a version of React that is compatible with the current stable release (@15.6.1). May interact in interesting and unfortunate ways with non-standard build pipelines (e.g. if you dynamically generate .babelrc or package.json, etc).
  3. Will delete comments inside package.json and .babelrc files. These files contain JSON-compliant data. To add the aliases, bye-react reads in the JSON, modifies it, and writes it back to disk. Comments are lost en route. If these are important to you then don't use bye-react.

Usage

Install

npm install -g bye-react

or

yarn global add bye-react

Usage

cd ~/your/react/project

bye-react

Undoing

When you first run bye-react backups are made of all config files modified by this tool. Running these undo commands restores these files to their original state. It also uninstalls preact and reinstalls react and react-dom. bye-react -u

or

bye-react --undo

How It Works

  1. Uninstalls react and react-dom.
  2. Installs preact and preact-compat (obviously) via npm (or yarn, if a Yarn lockfile is detected)
  3. Checks for usage of Webpack. If detected, an alias is added to webpack.config.js. Specifically these lines are appended to the end of the file.
  4. Checks for usage of Babel’s React preset. If detected, babel-plugin-module-resolver is installed and used to create an alias in .babelrc
  5. Checks for usage of Browserify. If detected, aliasify is installed and used to create an alias in package.json.

More Repositories

1

zod

TypeScript-first schema validation with static type inference
TypeScript
29,632
star
2

devii

A developer blog starter for 2021 (Next.js + React + TypeScript + Markdown + syntax highlighting)
TypeScript
496
star
3

next-firebase-ssr

An Next.js example repo for building authenticated pages with Firebase Authentication, cookies, and getServerSideProps
TypeScript
419
star
4

tozod

TypeScript
140
star
5

nextjs-react-router

A demonstration of how to use React Router inside Next.js
TypeScript
132
star
6

typejest

Test your types
TypeScript
26
star
7

normi

A zero-config normalized cache for MobX
TypeScript
20
star
8

zod-deno

TypeScript-first schema validation for Deno
TypeScript
16
star
9

trailhead

Find paths through your data in a type-safe way
TypeScript
12
star
10

nxtk

A TypeScript toolkit for Next.js
TypeScript
12
star
11

skee

Fluent schema modeling and migrations
TypeScript
8
star
12

npm-ts-starter

A project template for TypeScript npm packages
TypeScript
8
star
13

bun-workspaces

TypeScript
4
star
14

gwen

Utility-first CSS-in-JS styling library for maniacs
TypeScript
4
star
15

typesafe-api-no-graphql

A typesafe API β€” no GraphQL required
TypeScript
4
star
16

zod-locales

Localized error maps for Zod
3
star
17

DougNotes

Graphical dynamic knowledge repository platform
JavaScript
3
star
18

edgedb-movies

TypeScript
2
star
19

edgedb-nextjs-blog

TypeScript
2
star
20

kickdata

A scraper deployed to the Google App Engine that scrapes all soon-to-end Kickstarter projects every 10 minutes and stores relevant data in a Parse database.
Python
1
star
21

pensiv

Realtime Thoughtstreaming app with Meteor and Ionic
JavaScript
1
star
22

edgedb-remix-test-2

JavaScript
1
star
23

colinhacks

1
star
24

onepotpony

TypeScript
1
star
25

repros

TypeScript
1
star