Modernize & Modularize Development Environment

[swashata]

The first thing we need to focus on is modernize the environment for development. Currently, the build process is manual and code is intermingled.

Phase 1: Modernize environment

• [x] Initialize an npm package.json with devDependencies gulp, jest, babel, eslint, stylelint and needed plugins/config.
• [x] Create editorconfig for consistency with coding.
• [x] Setup linter for JS eslint
• [x] Setup linter for CSS stylelint.

Phase 2: Modularize code

• [x] Separate Plugin from jQuery wrapper and use UMD within the build process. We can concat.
• [x] Further breakdown the Plugin class into separate smaller methods so that we can unit test.
• [x] Refactor CSS with SCSS and separate layout and theming.
• [x] Create JS build process with Rollup, Babel and UglifyJS.
• [x] Create CSS build process with node-sass.

All built code should go under ./dist which should be in .gitignore. All source code will go under ./src which will be under .npmignore.

Phase 3: Setup Testing

• [x] Fix all eslint errors on our own scripts. Mostly is due to spacing and can be fixed automatically.
• [x] Setup test using jest or qunit or karma. Assess what options can be easily used in CI like travis.
• [x] Lint all files in the CI. Use gulp to lint .js and .scss files.

Phase 4: Setup CI

• [x] Use travis-ci for continuous integration. Steps are

General Testing

1. Lint all files.
2. Run jest tests.

Tagged Releases

1. Build distribution.
2. Publish on NPM.
3. Upload artifacts to github release as .zip.

Phase 5: Document procedure

1. [x] Document npm and setup.
2. [x] Document available gulp tasks.
3. [x] Document lint and test process approval for PRs.

References:

Saving some references which I might need in future.

1. https://babeljs.io/docs/plugins/transform-es2015-modules-umd/
2. https://stackoverflow.com/questions/48818400/how-to-transpile-ecma6-import-of-jquery-to-a-umd-wrapper-with-babel
3. https://stackoverflow.com/questions/35061900/converting-a-jquery-plugin-to-an-es6-module
4. https://stackoverflow.com/questions/35136874/extend-es6-plugin-to-jquery-prototype
5. https://medium.com/@tarkus/how-to-build-and-publish-es6-modules-today-with-babel-and-rollup-4426d9c7ca71

[swashata]

@micc83 refactoring the code has been mainly done. I will see how much more I can modularize the plugin code and also fix all eslint errors.

Take a look if you get a chance. The setup process is

npm install
npm run serve

This will open up the demo with browsersync. All files are now inside src and build files are ignored. It is created with gulp build or npm run build. Files will go inside dist. While tagging, I have plans to release through npm and upload release artifacts from travis ci.

[micc83]

Hello @swashata, obviously you don't need my approval but I must say you did an amazing job modernizing the environment. Then, I've almost fainted when checked the result of gulp lint 😄 . I can't believe we used to live without linters! So I guess next step should be resolve all those lint issues and eventually start to test. Also, not sure if we should keep tracking dist files, as twitter bootstrap does (for those who like to live on the edge 😄 ).

[swashata]

Fortunately most of the lint errors are spacing related. 😀 And for the build files, I think it is better if we do not track it. For every tags it will be available on npm and GitHub release (the dist files). I will proceed like this and if we find a good reason for tracking build files we will do it in future.

[micc83]

Sure, from a theoretical point of view I completely agree with you on this. My point was that sometime I found myself needing the latest version (master/dev) of a given package because of an hotfix or else. Having the dist folder being built at runtime (only on tags/releases) would not allow for that. However, as I told you before I completely thrust your hard work so let's take this way and in case, we'll reconsider.

[swashata]

Very well. Now I will concentrate on fixing lint errors and creating test cases with jest and jsdom.

[micc83]

This issue was moved to fontIconPicker/fontIconPicker#2