diff --git a/.circleci/config.yml b/.circleci/config.yml new file mode 100644 index 0000000..b088a80 --- /dev/null +++ b/.circleci/config.yml @@ -0,0 +1,95 @@ +# Javascript Node CircleCI 2.0 configuration file +# +# Check https://circleci.com/docs/2.0/language-javascript/ for more details +# +version: 2 +jobs: + build: + environment: + CC_TEST_REPORTER_ID: e124bacf0493b1f396545259279fd0a85656ad5441e862cd9630c4652a42af5b + docker: + - image: node:8.4 + working_directory: ~/react-chunk + steps: + - checkout + - run: + name: "~/.npmrc" + command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc + - run: + name: "Checking Versions" + command: | + node --version + npm --version + - restore_cache: + key: dependency-cache-{{ checksum "package.json" }} + - run: + name: "npm install" + command: npm install + - save_cache: + key: dependency-cache-{{ checksum "package.json" }} + paths: + - ./node_modules + - run: + command: | + mkdir -p ./.build + mkdir -p ./.build/lint + mkdir -p ./.build/coverage + mkdir -p ./.build/test + mkdir -p ./coverage + when: always + - run: + name: lint + command: npm run ci-lint + - run: + name: "install code climate" + command: | + curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter + chmod +x ./cc-test-reporter + - run: + name: test + command: | + # Prepare the test reporter + ./cc-test-reporter before-build + + # Run the tests + npm run ci-jest + COVERAGE_EXIT_CODE=$? + + # Copy the coverage file for reporting purposes + cp ./.build/coverage/lcov.info ./coverage + + # Prevent errors when re-building on the CI server (reports previously uploaded) + set +e + ./cc-test-reporter after-build -t lcov --exit-code $COVERAGE_EXIT_CODE + REPORTER_EXIT_CODE=$? + set -e + if [ "$REPORTER_EXIT_CODE" != "0" ] && [ "$REPORTER_EXIT_CODE" != "255" ]; then + exit $$REPORTER_EXIT_CODE + fi + - store_test_results: + path: ./.build/test/test-report.xml + - store_artifacts: + path: ./.build/test + prefix: "test" + - store_artifacts: + path: ./.build/lint + prefix: "lint" + - store_artifacts: + path: ./.build/coverage + prefix: "coverage" + - deploy: + name: Maybe Deploy + command: | + if [ "${CIRCLE_BRANCH}" == "master" ]; then + git config -l + git config user.email ci@circleci + git config user.name CircleCI + + # Build for release + npm run build + + # Tag the release, update package.json version and changelog, commit and push to github. + ./node_modules/.bin/standard-version --no-verify -m "chore(release): %s. [skip ci]" + git push --follow-tags origin master + npm publish + fi diff --git a/.codeclimate.yml b/.codeclimate.yml new file mode 100644 index 0000000..7de97e0 --- /dev/null +++ b/.codeclimate.yml @@ -0,0 +1,30 @@ + +engines: + + fixme: + enabled: true + + nodesecurity: + enabled: true + + eslint: + enabled: true + channel: "eslint-3" + + duplication: + enabled: true + config: + languages: + - javascript: + +ratings: + paths: + - "src/*.js" + +exclude_paths: +- "lib/**/*" +- "__tests__/**/*" +- "__fixtures__/**/*" +- "src/__tests__/*" +- "src/__tests__/**/*" +- "examples/**/*" diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..8a8aea2 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,24 @@ +# EditorConfig is awesome: http://EditorConfig.org + +# top-most EditorConfig file +root = true + +# Unix-style newlines with a newline ending every file +[*] +end_of_line = lf +insert_final_newline = true + +# Matches multiple files with brace expansion notation +# Set default charset +[*.js] +charset = utf-8 + +# Indentation override for all JS under src directory +[{src/**.js,example/*.js,example/components/*.js}] +indent_style = space +indent_size = 2 + +# Matches the exact files either package.json +[package.json] +indent_style = space +indent_size = 2 diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..8f5717b --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,27 @@ +{ + "parser": "babel-eslint", + "parserOptions": { + "ecmaVersion": 6, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true, + "experimentalObjectRestSpread": true + } + }, + "rules": { + "strict": 0, + "indent": ["error", 2] + }, + "env": { + "es6": true, + "browser": true, + "node": true, + "jest": true + }, + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:jest/recommended" + ], + "plugins": ["jest"] +} diff --git a/.gitignore b/.gitignore index 90c1111..0aad21a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .idea +.build node_modules *.log lib diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..8420579 --- /dev/null +++ b/.npmignore @@ -0,0 +1,19 @@ +node_modules/ +.babelrc +.eslintrc +.eslintrc.json +scripts +.idea +.circleci +docs/ +src/ +.build/ +coverage/ +examples/ +jest_*/ +.codeclimate.yml +npm-shrinkwrap.json +yarn.lock +cc-test-reporter +__tests__ +__fixtures__ \ No newline at end of file diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index e44b18a..0000000 --- a/.travis.yml +++ /dev/null @@ -1,7 +0,0 @@ -language: node_js -node_js: - - '4' - - '6' - - '8' -cache: yarn -script: yarn test -- --runInBand --coverage && yarn flow diff --git a/README.md b/README.md index a39f889..e2c7f4a 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,14 @@ _Code splitting with minimal boiler plate_ > A higher order component for loading components with dynamic imports. +[![npm](https://img.shields.io/npm/v/react-chunk.svg)](https://www.npmjs.com/package/react-chunk) +[![npm](https://img.shields.io/npm/dm/react-chunk.svg)](https://www.npmjs.com/package/react-chunk) +[![CircleCI branch](https://img.shields.io/circleci/project/github/adam-26/react-chunk/master.svg)](https://circleci.com/gh/adam-26/react-chunk/tree/master) +[![Code Climate](https://img.shields.io/codeclimate/coverage/github/adam-26/react-chunk.svg)](https://codeclimate.com/github/adam-26/react-chunk) +[![Code Climate](https://img.shields.io/codeclimate/github/adam-26/react-chunk.svg)](https://codeclimate.com/github/adam-26/react-chunk) +[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org) + + _This is a fork of [react-loadable](https://github.com/jamiebuilds/react-loadable), differences and new features include:_ * _A modified API to support new features_ * _Improved re-use of import components_ @@ -119,16 +127,25 @@ The **order** of plugins is important. #### Webpack -The webpack plugin will write the chunk module data to a file required for server-side rendering. +The react-chunk webpack plugin will write the chunk module data to a file required for server-side rendering. + +The webpack `CommonsChunkPlugin` is required to allow non entry point chunks to be pre-loaded on the client. -Add the plugin to your _client_ webpack plugins +Add the plugins to your _client_ webpack plugins ```js +import webpack from 'webpack'; import { ReactChunkPlugin } from 'react-chunk/webpack'; plugins: [ + new ReactChunkPlugin({ filename: path.join(__dirname, 'dist', 'react-chunk.json') + }), + + new webpack.optimize.CommonsChunkPlugin({ + name: 'manifest', + minChunks: Infinity }) ] @@ -341,7 +358,7 @@ For example, if you need to load a new component when a button gets pressed, you could start preloading the component when the user hovers over the button. The components created by `chunk` and `chunks` expose a -[static `preload` method](#loadablecomponentpreload) which does exactly this. +[static `preload` method](#chunkcomponentpreload) which does exactly this. ```js const BarChunk = chunk(() => import('./Bar'))(); @@ -507,7 +524,8 @@ export default { } ``` -Ensure the `manifest.js` is loaded before all other webpack scripts. +* Ensure the `manifest.js` is loaded **before** all other webpack scripts. +* Ensure the main entry point (in this example, `main.js`) is loaded **after** all other webpack scripts. ```js let resources = getBundles(chunkData, renderedChunks); @@ -525,10 +543,16 @@ res.send(`