tarsinzer / monoreact Goto Github PK

View Code? Open in Web Editor NEW

20.0 2.0 1.0 14.78 MB

📦 React workspaces implementation

License: MIT License

HTML 1.87% CSS 1.60% TypeScript 89.57% JavaScript 6.73% SCSS 0.23%

react workspace workspaces typescript yarn rollup cli create-react-app microfrontend react-applications

monoreact's Introduction

What is it

This is an advanced workspace implementation for React projects.

Monoreact includes the following features:

develop regular react apps
scaffold React projects
build JavaScript, TypeScript, React libraries
implement monorepos, workspaces, submodules
workspace, submodules management
efficient bundling (rollup)
workspace dependency awareness (topological sorting)

What problems does it solve

Motivation

The primary motivation was not to be tied to existing solutions of vendors, so as not to get into vendor lock.

Nevertheless, I recommend considering alternative solutions:

nx/react - a super powerful tool that can do everything, but turned out to be redundant for me because of vendor lock.
lerna - completely threw this idea away with existing yarn workspaces and git submodules scripts.
tsdx - a great solution but for narrow tasks.

What can it do now

scaffold and build React applications with create-react-app
bundle packages with rollup
use advanced CLI monoreact
save your time with typescript (with the option not to use it)
symlinking yarn workspaces
enjoy configured testing (jest), formatting (prettier), linting (eslint + stylelint), git hooks (husky + lint-staged)

Powerful CLI

Built-in documentation. Type in the console monoreact --help to see information about all possible commands and monoreact [command] --help their description.

The following options are now available:

Scaffolding

new. Creates a container/host/shell application. This is the initial scaffolding of the entire application.
generate a new package (submodule): basic, react. Monoreact creates a distribution of responsibility. Not all packages must deal with react components. Sometimes you want to build plain JavaScript/TypeScript libraries.
add a new feature (available options: docz, playground (run packages locally inside the package workspace)). Monoreact allows you to not generate components with all the things that may not necessarily need in each package.

Execution

build and watch your package with a modern rollup module bundler. Rollup is the best choice for building independent libraries due to efficient tree-shaking and fast compilation.
test and lint your package with Jest and eslint. These built-in packages are crucial for increasing and maintaining the quality of built libraries.
install dependencies. This option provides workspace dependency management. If you are running install inside some package, it'll add these dependencies as "peer" and add them to the root.

Submodules

It is quite challenging for managing git submodules. You have to perform many actions to make a simple task happen, and this is what scares people off from using submodules. In turn, Monoreact offers user-friendly control through commands, which increases understanding and speed of interaction with git submodules.

checkout
fetch
init
pull

Workspaces

Monoreact offers a much efficient alternative to the "yarn workspaces". It analyzes your dependencies between workspaces and runs them in the desired sequence and in parallel, when necessary and appropriate.

watch (parallel)
build (parallel)
test
lint

Migration

This section is responsible for scripts that will help to adapt the basic state of the package to the desired one.

detach. Detach your package from the workspace. Just in case you plan to use the package as a submodule to run it independently outside the host workspace.

Contributing

Check out contributing guideline to familiarize yourself with the general rules of the project, as well as to figure out how to bootstrap the project and make changes correctly.

License

This project is MIT licensed.

monoreact's People

Contributors

Stargazers

Watchers

Forkers

ranielmendonca

monoreact's Issues

e2e tool

integrate any e2e tool
it can be cypress

Yarn v3

Same as #647

we need to explore these tools in comparison to choose the best option

Add the ability to optionally add jest to the package

Jest is a part of any package template at the moment

Despite the fact that tests are always a good idea, I think it's better to have them without coercion.

Implementation:

add script
add jest config (?) or support jest config to extend the base configuration

Fix (configure) Jest (in CRA)

Currently, CRA doesn't provide the possibility to configure moduleDirectories.

It means when we run react-scripts test we will have this

moduleNameMapper doesn't look like a proper solution

It'd be nice to have an extendable solution where you don’t have to manage with your hands.

Next package manager

explore the subject area
decide whether to switch from Yarn to NPM

resources:
https://github.blog/2021-02-02-npm-7-is-now-generally-available/
https://github.blog/2020-10-13-presenting-v7-0-0-of-the-npm-cli/

Workspace scripts (package management)

Submodule scripts were implemented one weak ago.

It would be awesome to implement the same approach but for package management, namely:

build (grab from submodules)
serve (in parallel)
test
lint

Configure husky (git hooks) in submodules

Since it is a well-known issue, we need to come up with idea, how to make it work
typicode/husky#404

By the way, I do agree with this comment. This is not okay.
typicode/husky#404 (comment)

duplicated console error of NotFoundPackageError

Description of the problem

After particular action user receives duplicated error in the console of NotFoundPackageError

Steps To Reproduce

Run generate scripts outside the workspace root

Expected behavior

Concise error without duplication.

Support submodules

Add support git submodules by establishing core and helpful scripts.

The goal is to automate git management when using submodules.

Project scaffolding (generate application)

Project generation will help to make a full-scale project scaffolding.

At the moment, the main application was generated through the CRA, and many configs were added for the project.

What is being generated right now is the project packages (submodules).

Bundle CLI

make the library small and lightweight
run through a rollup
find other benefits

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

chore(deps): update dependency eslint-config-react-app to v7

Detected dependencies

github-actions

.github/workflows/default.yaml

actions/checkout v3

actions/setup-node v3

npm

cli/package.json

@ampproject/rollup-plugin-closure-compiler 0.27.0

@babel/cli 7.19.3

@babel/core 7.19.6

@babel/plugin-proposal-class-properties 7.18.6

@babel/plugin-transform-runtime 7.19.6

@babel/preset-env 7.19.4

@babel/preset-react 7.18.6

@babel/runtime 7.19.4

@rollup/plugin-babel 6.0.4

@rollup/plugin-beep 1.0.3

@rollup/plugin-commonjs 23.0.7

@rollup/plugin-image 3.0.3

@rollup/plugin-json 5.0.2

@rollup/plugin-node-resolve 15.1.0

@rollup/plugin-url 8.0.2

@typescript-eslint/eslint-plugin 5.42.0

@typescript-eslint/parser 5.42.0

autoprefixer 10.4.16

babel-jest 27.5.1

cssnano 5.1.15

enquirer 2.3.6

eslint 8.51.0

eslint-config-prettier 8.5.0

eslint-config-react-app 6.0.0

eslint-import-resolver-typescript 3.5.5

eslint-plugin-compat 4.0.2

eslint-plugin-flowtype 8.0.3

eslint-plugin-import 2.26.0

eslint-plugin-jsx-a11y 6.6.0

eslint-plugin-prettier 4.2.1

eslint-plugin-react 7.32.2

eslint-plugin-react-hooks 4.6.0

execa 5.1.1

fs-extra 10.1.0

identity-obj-proxy 3.0.0

jest 27.5.1

node-sass 7.0.3

ora 5.4.1

picocolors 1.0.0

postcss 8.4.31

postcss-nested 6.0.1

postcss-simple-vars 7.0.1

ramda 0.29.0

react 18.2.0

react-dom 18.2.0

rollup 2.79.1

rollup-plugin-analyzer 4.0.0

rollup-plugin-eslint 7.0.0

rollup-plugin-filesize 9.1.2

rollup-plugin-postcss 4.0.2

rollup-plugin-progress 1.1.2

rollup-plugin-size-snapshot 0.12.0

rollup-plugin-strip-code 0.2.7

rollup-plugin-typescript2 0.32.1

rollup-plugin-visualizer 5.8.3

sade 1.8.1

shelljs 0.8.5

ts-jest 27.1.5

tslib 2.4.1

typescript 4.8.4

@types/eslint 8.44.4

@types/fs-extra 9.0.13

@types/jest 27.5.2

@types/node 18.18.4

@types/ramda 0.29.0

@types/react 18.2.28

@types/sade 1.7.5

@types/shelljs 0.8.13

esbuild 0.19.4

rollup-plugin-esbuild 4.10.3

rollup-plugin-node-builtins 2.1.2

rollup-plugin-node-globals 1.4.0

rollup-plugin-preserve-shebangs 0.2.0

yarn 1.22.19

cli/templates/add/playground/package.json

@types/react 18.2.28

@types/react-dom 18.2.13

parcel 2.7.0

typescript 4.8.4

example-app/package.json

@monoreact/package-example *

classnames 2.3.2

dayjs 1.11.9

grommet 2.27.0

grommet-icons 4.8.0

lodash.times 4.3.2

react 18.2.0

react-dom 18.2.0

react-router-dom 6.4.2

react-scripts 5.0.1

styled-components 5.3.11

@testing-library/dom 6.16.0

@testing-library/jest-dom 4.2.4

@testing-library/react 9.5.0

@testing-library/user-event 7.2.1

@types/classnames 2.3.0

@types/node 18.18.4

@types/react 18.2.28

@types/react-dom 18.2.13

@types/react-router-dom 5.3.3

@typescript-eslint/eslint-plugin 5.42.0

@typescript-eslint/parser 5.42.0

eslint-config-prettier 8.5.0

eslint-config-react-app 6.0.0

eslint-plugin-import 2.26.0

eslint-plugin-jsx-a11y 6.6.0

eslint-plugin-prettier 4.2.1

eslint-plugin-promise 6.1.1

eslint-plugin-react 7.32.2

eslint-plugin-react-hooks 4.6.0

eslint-plugin-sonarjs 0.16.0

husky 4.3.8

jscpd 3.5.10

lint-staged 13.0.3

prettier 2.7.1

prop-types 15.8.1

stylelint 15.10.3

stylelint-config-recommended 9.0.0

tslib 2.4.1

typescript 4.8.4

yarn 1.22.19

example-app/packages/datepicker/package.json

@babel/plugin-proposal-class-properties *

dayjs ^1.9.6

lodash.times ^4.3.2

prop-types ^15.7.2

react *

example-app/packages/datepicker/playground/package.json

@parcel/transformer-sass 2.7.0

@types/react 18.2.28

@types/react-dom 18.2.13

parcel 2.7.0

typescript 4.8.4

example-app/packages/example-2/package.json

react *

@monoreact/package-example *

package.json

@typescript-eslint/eslint-plugin 5.42.0

@typescript-eslint/parser 5.42.0

eslint 8.51.0

eslint-config-prettier 8.5.0

eslint-config-react-app 6.0.0

eslint-plugin-prettier 4.2.1

eslint-plugin-promise 6.1.1

eslint-plugin-sonarjs 0.16.0

husky 4.3.8

jscpd 3.5.10

lint-staged 13.0.3

prettier 2.7.1

yarn 1.22.19

tslib 2.4.1

Check this box to trigger a request for Renovate to run again on this repository

pnpm?

Rollup filesize

I doubt that the problem is in the library itself rollup-plugin-filesize
seems like some kind of nasty regression of integration with another package

unfortunately found out too late after updating yarn.lock from scratch

Screen.Recording.2022-01-10.at.08.51.51.mov

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

`monoreact new .` scaffolds a project with `.` name

It should read and assign dirname.

Get rid of commonjs output

can make it when jestjs/jest#9430 resolved

Node v16 support

(node:28027) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/maxtarsis/personal/monoreact/node_modules/rollup-plugin-typescript2/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use node --trace-deprecation ... to show where the warning was created)

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.