ddm-js

Intended for reusable node packages (react and regular old js things) that we have traditionally just copied and pasted across projects. Stop it now!

Developing locally

To install modules in this repo from this repo run lerna add module --scope=moduleToInstallTo from the root directory.

To install from this repo locally run npm install /path/to/local/package and npm should install it.

About

This repo relies on the lerna package to manage all of the node packages in the packages folder.

Linting

This project is taking a no nonsense approach to code standards. We are using standardjs to do all of the linting and to make the code consistent. If you don't like it you can petition to use something different and the collective "we" will discuss changing it, but I was here first so this is what we are doing. There is a precommit hook that will run the linter and fix any issues that it can, but you may have to fix some yourself. If you can't, then you don't get to commit. It's as easy as that.

Testing

This is a big question mark. I feel like the code here should be tested, but nothing is currently set up for that. If you have ideas please try them out and we can standardize them and ensure better code quality with our shared code.

Example Project

Please use the example project to test your code to ensure that it is independent from anything else. Your packages should not rely on the code in your project to run and be displayed properly. If there is an npm dependency that is included in your project, such as react or react-dom use the peerDependencies in the package.json file to declare that they are needed.

NOTE:

If a package needs to be scoped this needs to be added to the package.json file, because we don't have a private npm registry.

"publishConfig": {
  "access": "public"
}

React component notes:

• Include a .npmignore file
• Make sure react and react-dom are peer dependencies in package.json and webpack.config.js, not dependencies
• Include a pre-publish script that builds your component (run before publishing)
• File examples:

package.json (partial file): 
  "main": "dist/component-name.js",
  "scripts": {
    "prepublish": "rm -rf ./dist && npm run build",
    "build": "webpack"
  },
  "peerDependencies": {
    "react": "15.x",
    "react-dom": "15.x"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0"
  }
  
-----------------------------------
webpack.config.js (full file)

const path = require("path");

module.exports = env => {
  return {
    entry: "./index.js",
    output: {
      path: path.join(__dirname, './dist'),
        filename: 'component-name.js',
        libraryTarget: 'umd',
        publicPath: '/dist/',
        umdNamedDefine: true
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)?$/,
          loader: "babel-loader",
          exclude: /node_modules/,
          query: {
            presets: ["react", "stage-2", "env"]
          }
        }
      ]
    },
    resolve: {
      alias: {
        'react': path.resolve(__dirname, './node_modules/react'),
        'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
      }
    },
    externals: {
      // Don't bundle react or react-dom
      react: {
        commonjs: "react",
        commonjs2: "react",
        amd: "React",
        root: "React"
      },
      "react-dom": {
        commonjs: "react-dom",
        commonjs2: "react-dom",
        amd: "ReactDOM",
        root: "ReactDOM"
      }
    }
  };
};