# spa-engine

> A simple Single Page Application engine.

Latest version **1.0.0-alpha.1** (published 2017-03-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install spa-engine
pnpm add spa-engine
yarn add spa-engine
bun add spa-engine
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.1 |
| Published | 2017-03-14 |
| First published | 2017-03-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Erick Bogarin |
| Maintainers | erickbogarin |
| Keywords | spa, js, tdd, library |

## Links

- npm: https://www.npmjs.com/package/spa-engine
- npm.io page: https://npm.io/package/spa-engine

## Recent versions

- 1.0.0-alpha.1 (latest) — 2017-03-14

## README

# Single Page Application Exercise

> A simple Single Page Application engine.

- Download [source code](https://s3-sa-east-1.amazonaws.com/erickbogarin.com.br/exercice.zip)
- A demo app is hosted at https://demo-spa-engine.surge.sh/

## Features and advantages of this project
- Unit tests.
- History management using the History API
- ES6 syntax

## Am I missing some essential feature?
- Show a loading bar while the content is being loaded.
- Avoid SPA for links that have the "data-no-spa" data attribute.

## Getting Started

### Prerequisites

A **running server** is required for this library to work properly, it's really simple to create following the steps bellow:

1. Install http-server:
  ```
  $ npm install -g http-server
  ```
2. Run the server:
  ```
  $ http-serve
  ```

### Installing
NPM package:
```
$ npm install --save spa-engine@1.0.0-alpha.0
```
Yarn:
```
$ yarn add spa-engine@1.0.0-alpha.0
```
Otherwise with cdn:


- https://unpkg.com/spa-engine@1.0.0-alpha.0


### Usage

- The library can be imported as `import spa-engine from 'spa-engine'` or `require('spa-engine')`.
- Can be accessed through global variable Engine when included through script tag.

Example:
```
const engine = new Engine({
  routes: ['/', '*.html', '/site/*'],
  enabled: true,
});
```

## Running tests
- `npm test`: run your tests in a single-run mode.
- `npm run test:tdd`: run and keep watching your test files.
- `npm run test:coverage`: prints coverage.

## Linting
- `npm run lint`: lint all files searching for errors.

## Roadmap

A rough roadmap can be found on [Trello](https://trello.com/b/zNJEkIbJ/spa-engine)

## Library Architecture
The diagram bellow provides a general understanding of how the library is designed:
![LIbrary Architecture](/manual/asset/engine.png)

- **Engine** - the core interface of the library - decides if the page should refresh through the parameters sent.
- **RouteComparator** - a helper feature to compare the current URL of the web page
with the **routes** attribute.
- **RequestHandler**: cares about necessary behaviors when SPA is active like handling ajax calls and reloading.
- **HttpService**: a wrapper class to `XMLHttpRequest` to make use of ajax requests more easily.
- **PartialView**: responsible for the rendering of new contents after that a navigation was made.
- **HistoryManagement**:  uses `History API` to manage the state of the pages.

## Stack
- mocha
- chai
- sinon
- jsdom
- webpack

## Authors

- **Erick Bogarin** - *Initial work*

---
_Source: https://npm.io/package/spa-engine · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._