Skip to content
No description, website, or topics provided.
Branch: develop
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
@types
app
static
test
.gitignore
.nycrc
README.md
chromedriverlog.txt
electron-builder.yml
electron-webpack.json
package.json
tsconfig.json
tslint.json
yarn-error.log
yarn.lock

README.md

Electric IRC

CircleCI Coverage Status Greenkeeper badge code style: prettier

Electric IRC leverages TypeScript, React, and Electron to create a native IRC client. Below, I'll write a few notes that relate to this project and to its technologies.

Yarn

This project uses the yarn package manager. Yarn has several benefits over NPM, the most relevant of which is a lockfile and easy dependency deletions/additions.

TypeScript

TypeScript is a statically-typed extension of JavaScript. It uses .ts extensions.

Often times, external modules will not have TypeScript definitions in place. In order to use these modules, you might:

  1. Find an external module definition through DefinitelyTyped and add the typing as a dependency, or
  2. Create your own typing in the @types folder in the root of this directory if necessary (this is incredibly not-fun and should probably be avoided).

React

React is a library for component-based UI design. It uses .jsx extensions normally, but when using TypeScript these are .tsx extensions. Most tutorials use the JavaScript version, but it should be relatively straightforward to translate into TypeScript.

Electron

Electron builds cross-platform, native applications using a web back-end. Visual Studio Code, Atom, Discord, and Slack are all built using it, to name a few.

SCSS

SCSS is a CSS extension that allows for some nifty things like variables. The styling is split up into multiple folders, which are all eventually imported into a single main SCSS file.

One SCSS file should be created per component, and each SCSS file should aim to use as few magic numbers/colors as possible, preferring to use and re-use variables across the entire application.

WebPack

This project uses WebPack behind the scenes. If the configuration needs to be edited, it will be a rough time, because WebPack is dense and awful. The configuration can be edited if we need to, but...it should be avoided if at all possible.

Electric IRC

To run this project in a development environment, use yarn start. This will open up Electron and load the app through a test server.

To package this app,use yarn dist. This compiles the application into a native executable, as well as generates an installer for the application.

Testing

This app uses Spectron along with Mocha, Chai, and Sinon (using Sinon-Chai). I haven't quite figured out the setup for Spectron yet - if you want to test electron integration (as opposed to React components/web logic) this will take some effort.

All test files should be placed within the test folder and have the extension *.spec.ts or *.spec.tsx.

Istanbul is used for code coverage. Running yarn test will go through all tests and generate a code coverage report. Note that this may include irrelevant JavaScript files - add these folders or files to the package.json in the nyc.exclude array.

Until we get Spectron figured out, I've removed all of our "main" files from Istanbul's code coverage metrics, as we can't effectively unit-test them.

You can’t perform that action at this time.