All Projects → Hactar-js → Hactar

Hactar-js / Hactar

Licence: isc
The solution to JavaScript Fatigue. Zero config dev

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Hactar

Spa Starter Kit
📦 Quick starter kit for booting up a NodeJS container with React, webpack, babel/ES2015, Redux, and more.
Stars: ✭ 81 (-1.22%)
Mutual labels:  webpack, babel
React Boilerplate
Production-ready boilerplate for building universal web apps with React and Redux
Stars: ✭ 53 (-35.37%)
Mutual labels:  webpack, babel
React Es6 Padawan To Jedi Book
Uma introdução simples e completa para React usando ES6 e Babel.
Stars: ✭ 46 (-43.9%)
Mutual labels:  webpack, babel
Budgeting
Budgeting - React + Redux + Webpack (tree shaking) Sample App
Stars: ✭ 971 (+1084.15%)
Mutual labels:  webpack, babel
Vue
Stars: ✭ 65 (-20.73%)
Mutual labels:  webpack, babel
Tested
Angular Material in MEAN Stack Website Source
Stars: ✭ 35 (-57.32%)
Mutual labels:  webpack, babel
Mostly
They mostly come at night; mostly.
Stars: ✭ 78 (-4.88%)
Mutual labels:  webpack, babel
Google Apps Script Template
A starting point for google apps script projects for transpilation, editing and deployment
Stars: ✭ 20 (-75.61%)
Mutual labels:  webpack, babel
Astexplorer.app
https://astexplorer.net with ES Modules support and Hot Reloading
Stars: ✭ 65 (-20.73%)
Mutual labels:  webpack, babel
React Starter Kit
React Starter Kit - Fiercely quick front-end boilerplate and workflows, React.js, Babel, PostCSS, Webpack
Stars: ✭ 61 (-25.61%)
Mutual labels:  webpack, babel
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-60.98%)
Mutual labels:  webpack, babel
Vue Web Extension
🛠️ A Vue CLI 3+ preset (previously a Vue CLI 2 boilerplate) for quickly starting a web extension with Vue, Babel, ESLint and more!
Stars: ✭ 1,147 (+1298.78%)
Mutual labels:  webpack, babel
Skyvow.github.io
🐶 My resume - 个人简历
Stars: ✭ 27 (-67.07%)
Mutual labels:  webpack, babel
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+1139.02%)
Mutual labels:  webpack, babel
That React App You Want
That react app you always wanted: [email protected], [email protected], postCSS, purifycss, dll's and code splitting examples, bregh. Highly opinionated but you better like it.
Stars: ✭ 27 (-67.07%)
Mutual labels:  webpack, babel
Js Toolbox
CLI tool to simplify the development of JavaScript apps/libraries with little to no configuration. (WORK IN PROGRESS/PACKAGE NOT PUBLISHED).
Stars: ✭ 53 (-35.37%)
Mutual labels:  webpack, babel
Wordpress Starter
📦 A starter template for WordPress websites
Stars: ✭ 26 (-68.29%)
Mutual labels:  webpack, babel
Online Bling
Stars: ✭ 9 (-89.02%)
Mutual labels:  webpack, babel
Vue Dropload
vue下拉加载,简单路由,模态框组件等开发
Stars: ✭ 55 (-32.93%)
Mutual labels:  webpack, babel
Starter React Flux
Generate your React PWA project with TypeScript or JavaScript
Stars: ✭ 65 (-20.73%)
Mutual labels:  webpack, babel

Hactar

warning: Hactar is in the very early alpha stages and since it is a tool that modifies your code it is very important you run it against stuff that has backups. It likely wont make anything explode but you could lose work.

Hactar is the solution to JavaScript Fatigue. Hactar configures build tools, installs dependencies, adds imports, creates tests etc, all automatically. There are no boilerplates to clone, no generators to run, and no build tools to configure. To use Hactar you simply start writing code and Hactar figures out what you want to do and the best practices to make it happen. Start writing ES6 and it will add Babel, start writing sass and it will add node-sass, import an image and it will add Webpack etc

No more starting projects with configuration and boilerplate, Hactar let's you start writing code immediately.

Hactar can currently;

  • Automatically install dependencies
  • Detect ES6 and add Babel transpilation
  • Detect experimental ES6 features and configure Babel presets like stage-0
  • Automatically detect React and add babel-react plugins

Hactar does this all without any interaction from you. Hactar parses your code, figures out what you are coding, then installs, configures, and writes code to make it work. You start writing code and Hactar does the rest.

Here is a screencast for the visual learners among us

A typical Hactar workflow looks like this;

Run Hactar:

$ hactar -p hactar-babel
initiating npm
name: (testcats)
...
hactar is running

Now start coding:

$ touch src/index.js
$ atom .
import React from 'react';
import Button from 'react-toolbox/lib/button';

const CustomButton = () => (
  <Button label="Hello world" raised accent />
);

export default CustomButton;

Hactar will parse the code and detect the usage of ES6, React, and react-toolbox:

installing babel
configuring babel with es2015
installing react
installing react-toolbox

Table of Contents

Installation

Install globally using:

$ npm install -g hactar

Usage

Hactar is designed to have almost no interaction. There are no generators you can execute nor things to configure. To use Hactar, you simply run the hactar command. The only option available to you is --plugins, which you can use to install various Hactar plugins:

$ hactar --plugins plugin-name,plugin-name

You can also install a plugin simply by adding it to your dependencies (which is what the --plugins argument does)

$ npm install --save-dev hactar-babel

The Principles of Hactar

1. Stay out of your way

Hactar is not a boilerplate and it is not a scaffolder. You don't have to run Hactar every time you need to create a new thing with a new thing. If something is gonna need tests, Hactar will figure it out through parsing, no need for you to tell it. And when conventions change, Hactar will automatically refactor your code using codemods; no interaction from you.

2. Be massively hackable

Hactar plugins are simple ES6 generator functions so you already know how to write them. There are no unfamiliar models like streams, transforms, pipes etc to learn. Writing Hactar plugins feels as productive as writing shell scripts but better. You can code plugins for Hactar while you work on your projects -- building solutions to fatigues as they occur.

3. Do not be a dependency

There are many solutions to JavaScript Fatigue but most require you to adopt them and without them your code becomes useless, unable to be used without the solution. And if you want someone else to contribute to the code, they now need to learn the tool and its ecosystem.

When your solution to fatigue is a dependency the solution can become the fatigue.

Because Hactar simply writes code, your code is not dependent on it. Nothing Hactar does is dependent on Hactar to work. No one contributing to your code even need know Hactar exists. Hactar is transparent and designed to fade into the background. It is just another coder on your team -- one you pay with CPU. If Hactar stops being useful you can simply fire it.

4. Lots of small wins

Hactar is immediately beneficial today. Hactar is oriented towards tiny plugins that do one thing well (like for example, adding babel support). You don't need a ton of plugins for it to come together and work for you. It has a ton of little things that make your life better now. Too many solutions to fatigue are "all or nothing" propositions that require huge wins before the little wins. How many have set out to solve their fatigue only to realize 6 months later things that the ecosystem has changed too much making it useless, or that it was too ambitious, so they give up and return to what works good enough. Hactar is not like that, it comes with little wins today and can be grown to be so much more. Hactar evolves fast and is designed to be changeable and hackable, even while you work on your projects. Every plugin is designed to improve your coding experience in some tiny way; whether it is extracting tests from comments or automatically adding a preset to babel. It is always useful now not later.

Plugins

Hactar currently has the following plugins;

  • hactar-auto-install A plugin that parses your imports and automatically installs missing dependencies.
  • hactar-babel Provides all the babel plugins that do things like configure ES62105 preset, detect stage-0 features, react etc.

You can find all the existing Hactar plugins by searching for hactar on npm

How Hactar Works

There are four parts to Hactar;

  1. A filesystem watcher (uses chokidar)
  2. A CSP like Flux dispatcher + Redux store
  3. Generator functions and reducers, which make up the plugins.
  4. Parsers and codemods. Most plugins in Hactar make use of a JS parser such as Espree and codemod tools like jscodeshift

Every plugin in Hactar receives all the actions and can dispatch actions to all other plugins via a channel. Plugins are split into two parts;

  1. Reducers which can be used to store state
  2. Sagas that can be used to dispatch actions and make asynchronous modifications to the codebase

Sagas are generator functions that run on a loop for as long as Hactar is running.

A plugin that adds a index.js file when Hactar is loaded would look like this:

import { put } from 'js-csp'

function* saga(action, ch) {
  if(action.type == 'INITIALIZE') {
    // Dispatch an ADD_FILE action for an addFile plugin to pick up
    yield put(ch, {type: 'ADD_FILE', name: 'index.js', contents: `console.log('Hello World!')`})
  }
}

export { saga }

And we could handle storing state and getting state by doing the following

import { put } from 'js-csp'

const reducer = (state, action) => {
  switch (action.type) {
    case 'DOGS_R_AWESOME':
      return {
        ...state,
        dogs: 'Are Awesome'
      }
    default:
      return state
  }
}

function* saga(action, ch, getState) {
  if(getState().hasDogs) {
    yield put(ch, {type: 'DOGS_R_AWESOME'})
  }
}

export { reducer, saga }

Hactar is designed to be insanely easy to make plugins for. The hope is that this will encourage you to solve fatigues when you experience them and not later when you can get around to it. If something annoys you and you feel it could be automated away it shouldn't take learning a new ecosystem to write a solution, it should just be a matter of coding a solution. If you can write ES6 code you can write a Hactar plugin. I feel very strongly that the process for automating something should be write code and not install x, configure y, read the docs on z, and cuss at...

See the documentation for more examples

Documentation

More documentation coming soon!

License

ISC

Support

If you found this repo useful please consider supporting me on Gratipay, sending me some bitcoin 1csGsaDCFLRPPqugYjX93PEzaStuqXVMu, or giving me lunch money via Cash.me/$k2052 or paypal.me/k2052

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].