# eltonpp

> Elton++ NodeJS framework to create desktop applications using HTML with components and directives

Latest version **0.2.1** (published 2021-10-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install eltonpp
pnpm add eltonpp
yarn add eltonpp
bun add eltonpp
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2021-10-17 |
| First published | 2021-10-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 (+51 in 1 direct dependencies) |
| Install scripts | no |
| Author | Maciej Debowski |
| Maintainers | xfacio |
| Keywords | nodejs, js, javascript, ts, typescript, css, html, desktop, apps |

## Links

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

## Dependencies (3)

- [jsdom](https://npm.io/package/jsdom.md) ^18.0.0
- [electron](https://npm.io/package/electron.md) ^15.2.0
- [local-storage](https://npm.io/package/local-storage.md) ^2.0.0

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.2.1 (latest) — 2021-10-17
- 0.2.0 — 2021-10-16
- 0.1.0 — 2021-10-16
- 0.0.4 — 2021-10-16
- 0.0.3 — 2021-10-16
- 0.0.2 — 2021-10-16
- 0.0.1 — 2021-10-16

## README

<h1>This is beta version so many bugs can appear!</h1>
<h2>better documentation comming soon!</h2>

Example app:
files:

index.js
src/ <br>
	index.html <br>
	topbar.js
	
index.js:
```
const Elton = require("eltonpp")
const elton = new Elton({
    template: "./src/index.html",
    components: [require("./src/topbar.js")],
	addons: {
        googleFont: ['FontName', 'sans-serif'],
        bootstrap5: true,
        jQuery: true
    }
})

elton.run()
```

index.html:
```
<Data>
    {
        "text": "Hello world!",
        "manyIterations": 10
    }
</Data>
<Topbar />

<h2>{text}</h2>

<ul>
    <li loop='i of ["Cat", "Dog"]'>{i}</li>
</ul>

<ul>
    <li loop="i in {manyIterations}">{i}</li>
</ul>

```

topbar.js:
```
const Elton = require("eltonpp")

class Topbar extends Elton.component {

    name = 'Topbar'

    render(element) {
        return 'Hello Topbar'
    }
}

module.exports = Topbar
```

After running `node index.js` your application will be ready and showed!

Fast documentation
```const elton = new Elton({
    template: "./src/index.html", // <- this is the path to index.html file
    components: [require("./src/topbar.js")], // <- this is the array with all components
	addons: {
        googleFont: ['FontName', 'sans-serif'], // first index is name of font that will be imported from fonts.goole.com (font-family: 'FIRST_INDEX', SECOND_INDEX;)
        bootstrap5: true, // do import bootstrap?
        jQuery: true // do import jQuery?
    }
})
```

```
<Data> // <- this is component which will use it's content (JSON object below) as data for application.
    {
        "text": "Hello world!", // each of this "variables" you can use in your application by typing {variablename}
        "manyIterations": 10
    }
</Data>
<Topbar /> // <- using component

<h2>{text}</h2> // <- showing text variable from Data component 

<ul>
    <li loop='i of ["Cat", "Dog"]'>{i}</li> // array foreach
</ul>

<ul>
    <li loop="i in {manyIterations}">{i}</li> // simple for loop
</ul>
```

```
const Elton = require("eltonpp") // imports elton++

class Topbar extends Elton.component { // creating class topbar that extends Elton.component

    name = 'Topbar' // Name of component (this what we using e.g. here: <Topbar />)

    render(element) { // function render with 1 parameter (element is "caller" e.g. <Topbar test="a" />)
        return 'Hello Topbar' // return html to render
    }
}

module.exports = Topbar // exporting class
```

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