Giter Club home page Giter Club logo

mhy's Introduction

mhy logo

Build Status Downloads code style: prettier Conventional Commits Version License

mhy

A zero-config, out-of-the-box, multi-purpose toolbox and development environment.

mhy.js.org


Summary

It's really hard to define what mhy (my) is, because it tries to create a unified developer experience for any stage of your project:

  • a pre-configured development environment to not waste time with the set-up when starting a new project or just need a quick playground.
  • a pre-configured production environment to help you reach production faster compiling/building your code without any necessary setup.
  • an ecosystem to be able to run different task together at once, connected together perfectly.
  • a toolbox help your work with the most common tasks.
  • a solution for littering your machine with the same npm package over and over again.
  • a config management tool to make necessary changes faster at a single place.
  • an interoperable environment to be shared across multiple projects and ensure they are being build on the same principles/stack.

mhy helps you to be able to focus on your code again rather then the tech behind it.

Using mhy you'll have

  • a zero-configuration environment out-of-the-box.
  • a portable codebase without any npm install.
  • simple customization if you don't favor the default settings.
  • package.json based customization for any configs value mhy provides.
  • boot templates for easy setup.
  • most common packages provided to your work.
  • less boilerplate.
  • configs/tools well-playing together (webpack+swc, jest+swc, storybook+swc, webpack+typescript, etc.).
  • pre-built and public Docker images for faster CI.

Note that mhy's focus is on client side currently, but server side features are about to come.

Setup

Install

npm install mhy -g

From [email protected] peer dependencies are automatically being installed. mhy uses some dependencies that are not prepared yet for this new mechanism. We cannot do anything, but wait for updates. You need to install mhy using the --legacy-peer-deps or --force flag.

npm install mhy -g --legacy-peer-deps

Start a new Webpack project

Create an empty project with a single index.js file that is being served using webpack-dev-server (wds) pre-configured with Babel, React and React Fast-Refresh.

mkdir src
echo "console.log('Hello mhy!')" > src/index.js
mhy wds

Compile library

Create a production ready library. From the src folder it creates a complied dist folder.

mhy babel --mhy-env=prod

Build bundle

Create a production ready bundle for you website/app using pre-configured Webpack. From the src folder it creates a build folder with your bundle ready to be served supporting many popular features/loaders.

mhy webpack --mhy-env=prod

Start the default ecosystem

It'll run Jest, Webpack Dev Server, TypeScript compiler, Storybook at once in a single Terminal UI (TUI).

mhy

That's not all

These are only a few examples from all the possibilities mhy provides. Start exploring on https://mhy.js.org

Supported packages

mhy is providing many common/popular packages. There are continuous adjustments being made to the includes to match the most common needs and being able to develop without the need of your own npm install command ever again. It's in plan to accurately list these on the site, for now the best is to check the dependencies of our package.json for the included packages, and I also advice you to check out our sources for more details.

Contributors โœจ


Andy1210

๐Ÿ› โš ๏ธ

Pablo Henrique

๐Ÿ“–

Eugen Guriev

๐Ÿ’ป

Fabian Lauer

๐Ÿ’ป

Thomas Winckell

๐Ÿ’ป ๐Ÿ“–

Steven Mitts

๐Ÿ“–

Zakhar

๐Ÿ’ป ๐Ÿ“–

Andor Polgar

๐Ÿ’ป

Andrei Bunulu

๐Ÿ’ป

Zakhar

๐Ÿ’ป ๐Ÿ“–

โค Thank you all! โค

Credits โค

I'm using Webpack's logo to build an M shape from multiple blocks. I'd like to say Thank You for their great logo.

I also would like to thank to every developer's hard work which I'm using as a dependency in mhy. It would be really hard to collect all those people, but in case you find your work in our package.json, please feel free to create a pull request and add your logo and link.


wintercounter

while(!credits.length)
console.log('Example')


๐ŸŒŸ PLEASE STAR THIS REPO IF YOU FOUND SOMETHING INTERESTING! ๐ŸŒŸ

mhy's People

Contributors

allcontributors[bot] avatar andormade avatar andy1210 avatar fabianlauer avatar pablohpsilva avatar theguriev avatar thomaswinckell avatar wintercounter avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mhy's Issues

Depth flag for config output

When running /mhy config typescript, I get the following output:

{ compilerOptions:
   { module: 'esNext',
     target: 'esnext',
     moduleResolution: 'node',
     allowJs: false,
     emitDeclarationOnly: true,
     strict: true,
     jsx: 'preserve',
     resolveJsonModule: true,
     esModuleInterop: true,
     noImplicitAny: false,
     declaration: true,
     baseUrl: '/path/redacted',
     skipLibCheck: true,
     incremental: true,
     outDir: 'src',
     paths:
      { '*': [Array],
        '@': [Array],
        '@/*': [Array],
        '@/mhy': [Array],
        '@/mhy/*': [Array] },
     typeRoots:
      [ '/path/redacted/node_modules/mhy/node_modules/@types',
        '/path/redacted/node_modules/@types' ] },
  include:
   [ '/path/redacted/src/**/*' ],
  files:
   [ '/path/redacted/node_modules/mhy/dist/configs/typescript/mhy.d.ts' ] }

Notice how the paths contain [Array] only.

Not sure if this is by design, but IMHO there could be a depth flag similar to node's util.inspect(). For example --depth 0 or just no depth flag should print the full object (this would change the default behaviour of the command though).

WDYT?

How you're using mhy?

I'm curioius for what purpuse your using mhy, how you use it and what is your overall experience with it?

Continuous TODO list

Done (keeping them just because it looks cool)

  • Refact the code to make it easier for other maintainers start on it easily
  • Typescript support -> config
  • Create documentation
  • Official website
  • Add command registering interface instead of implementing all commands in mhy
  • Add CI for dist (along with sub-packages) + Docker image
  • Update dependencies (being done continously)
  • Remove postcss-cssnext in the favor of postcss-preset-env
  • Rename @mhy/mhy to mhy
  • Prettier refakt: detach from Babel, use Process
  • Add Prettier to all available extensions it is supporting
  • Add *Storm configuration docs
  • Add VSCode configuration docs
  • Make folders configurable (like src)
  • Add mhy config, single source for stuffs like extensions, directories, etc.
  • Implement a solution for correct array manipulation from package.json
  • Add webpack-bundle-analyzer process
  • Add tslint process
  • Deprecate other mhy repositories and packages
  • Appriciation option for contributors and dependency developers
  • Add standalone storybook support
  • Pass flags to WDS
  • Make console functions allowed by eslint using development NODE_ENV
  • Measure babel-loader cache options if compilation can be speed up
  • Add jimp process (cancelled)

Next

  • Create more examples
  • More CLI ouput tests
  • Create repository with test projects
  • Add missing community profile pages
  • Use svgr-loader instead of react-svg-loader (also investigate the removal of svgx extension)
  • Add GraphQL toys (with GraphQL Codegen)
  • Add backend toys for servers, API testing tools, OpenAPI mock server, etc.
  • Add VueJS support
  • Add Angluar support
  • Introduce multiple sub folders instead of a single src (like ui, server, etc.)
  • Rewrite whole codebase in TS
  • Add svgo process
  • Implement support for presets
  • Add support for react-docgen-typescript-loader
  • Add more verbose loggin
  • Add more debug info
  • Create unit tests
  • Add out-of-the-box support for translations using Babel macros
  • Add parcel support
  • Add rollup support
  • Add babel-plugin-redux-saga (only macro maybe?)
  • Add support for locked mhy versions
  • Optimize UI: speed
  • Refact UI: Draggable, resizable, full mouse support
  • Add https://github.com/pikapkg/web support
  • Add https://github.com/okonet/lint-staged support
  • Node 12 support for Docker image
  • Setup a monorepo approach, use @mhy namespace again and refact codebase into smaller packages again.
  • Add support for monorepo tools (eg. Lerna)
  • Add support for dependecy presets (npm i mhy will still have everything together but there can be a choice to use @mhy/core only and install @mhy/preset-react separately for example.
  • Auto update mhyDependencies?
  • Run tests on deployments
  • Add storybook-addon-react-live-edit
  • Add support for command auto-complete (#20)
  • Add new process for https://github.com/kefranabg/readme-md-generator
  • Add new process for as-script
  • Add new process for TypeDoc
  • Add new process for serve
  • Add process for https://github.com/urish/typewiz

Rewrite name and bin key

Where is name and bin key?
What do you mean by rewrite?
What do you mean by link?

Are you using cmd on Windows? PowerShell? Other?

Capture531

How can we improve mhy?

I'm thinking about using mhy for myself, but i don't like few things:

  • the list of dependencies is huge, and beside babel, ts, webpack and react i don't need others (so i would love to have something like search with autocomplete here) or some presets with checkboxes, i see what https://www.npmjs.com/package/inquirer has good menu constructors with autocomplete.

  • i don't think what it's a good idea to update packages.json all the time when the new version of some package is updated, i guess it should just fetch the latest versions with npm install if we not specifying the special one

  • when the port is busy i recommend to search for free one with something like this https://www.npmjs.com/package/get-port

@wintercounter what do you think about this?

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.