ngx-pm-editor v0.0.0-development

ngx-pm-editor - A customized editor based on ProseMirror, Angular, Material etc.

This project will generate Angular libraries that are AOT/JIT compatible and that use external SCSS-styles and HTML-templates.

This project also contains a demo application to test the usage of the generated library.

This project is seeded from angular-library-seed

Read more about architectural challenges and solutions used in the seed project from @trekhleb.

Documents

Official Documents

Purposes of the project

• A playground for different tools and techniques used in open source project
• Use this project as a seed project to split my own large project into small projects

Main Features

Module

• AOT/JIT compatible library build via Angular Compiler (ngc).
• UMD build via Webpack that allows you to use your library for browser builds.

Developement Workflow

Package

• Webpack
• NPM
• Yarn

Watch Mode

• Watch modes for building and testing procedures that makes developing process easier.

Lint

• Linting with TSLint and Codelyzer for static code analysis.

Testing

• Testing with Karma and Jasmine.
• Test coverage report via Istanbul.
• Code coverage badge via Codecov as a reminder to cover code with tests.

Debug

• Exploring your build via Sourcemap Explorer that shows you a treemap visualization to help you debug where all the code is coming from.

Continuous Integraton

• Continuous integration with Travis CI.

Documentation

• Documentation generation via Compodoc. Take a look at documentation example.
• Documentation hosting via GitHub Pages.

Quick Start

# Clone the repository
git clone https://github.com/johnking/ngx-pm-editor.git

# Go to repository folder
cd ngx-pm-editor

# Install all dependencies
yarn install

# Build the library
yarn build

File Structure

TODO: change it based on the latest version of the repository

ngx-pm-editor
  ├─ demo                         * Folder for demo applications (MAY BE DELETED if not required)
  |  ├─ esm                       * AOT/JIT demo project
  |  ├─ umd                       * UMD demo project
  |  └─ ...                       * More details about this folder may be found in demo folder README file.
  |
  ├─ src                          * Library sources home folder (THE PLACE FOR YOUR LIBRARY SOURCES)
  |  ├─ components                * Example of library components with tests
  |  ├─ services                  * Example of library services with tests
  |  ├─ index.ts                  * Library entry point that is used by builders
  |  └─ tick-tock.module.ts       * Example of library module
  |
  ├─ .editorconfig                * Common IDE configuration
  ├─ .gitignore	                  * List of files that are ignored while publishing to git repo
  ├─ .npmignore                   * List of files that are ignored while publishing to npm
  ├─ .travis.yml                  * Travic CI configuration
  ├─ LICENSE                      * License details
  ├─ README.md                    * README for you library
  ├─ gulpfile.js                  * Gulp helper scripts
  ├─ karma-test-entry.ts          * Entry script for Karma tests
  ├─ karma.conf.ts                * Karma configuration for our unit tests
  ├─ package.json                 * NPM dependencies, scripts and package configuration
  ├─ tsconfig-aot.json            * TypeScript configuration for AOT build
  ├─ tsconfig.json                * TypeScript configuration for UMD and Test builds
  ├─ tslint.json                  * TypeScript linting configuration
  ├─ webpack-test.config.ts       * Webpack configuration for building test version of the library
  ├─ webpack-umd.config.ts        * Webpack configuration for building UMD bundle
  └─ yarn.lock                    * Yarn lock file that locks dependency versions

Getting Started

Dependencies

Node/NPM

Install latest Node and NPM following the instructions. Make sure you have Node version ≥ 7.0 and NPM ≥ 4.

• brew install node for Mac.

Yarn

Yarn package manager is optional but highly recommended. If you prefer to work with npm directly you may ignore this step.

Yarn installs library dependencies faster and also locks theirs versions. It has more advantages but these two are already pretty attractive.

Install Yarn by following the instructions.

• brew install yarn for Mac.

Installing

• fork this repository.
• clone your fork to your local environment.
• yarn install to install required dependencies (or npm i).

Build the library

• yarn build for building the library once (both ESM and AOT versions).
• yarn build:watch for building the library (both ESM and AOT versions) and watch for file changes.

You may also build UMD bundle and ESM files separately:

• yarn build:esm - for building AOT/JIT compatible versions of files.
• yarn build:esm:watch - the same as previous command but in watch-mode.
• yarn build:umd - for building UMD bundle only.
• yarn build:umd:watch - the same as previous command but in watch-mode.

Other commands

Lint the code

• yarn lint for performing static code analysis.

Test the library

• yarn test for running all your *.spec.ts tests once. Generated code coverage report may be found in coverage folder.
• yarn test:watch for running all you *.spec.ts and watch for file changes.

Generate documentation

• yarn docs for generating documentation locally.
• yarn gh-pages for generating documentation and uploading it to GitHub Pages. Documentation example.

Explore the bundle

• yarn explorer to find out where all your code in bundle is coming from.

Bump library version

• npm version patch to increase library version. More on bumping.

preversion script in this case will automatically run project testing and linting in prior in order to check that the library is ready for publishing.

Publish library to NPM

• npm publish to publish your library sources on npmjs.com. Once the library is published it will be available for usage in npm packages.

prepublishOnly script in this case will automatically run project testing and linting in prior in order to check that the library is ready for publishing.

Cleaning

• yarn clean:tmp command will clean up all temporary files like docs, dist, coverage etc.
• yarn clean:all command will clean up all temporary files along with node_modules folder.