# raccoon-js-framework

> Raccoon-js An experimental js framework inspired by Vue

Latest version **1.0.8** (published 2023-03-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install raccoon-js-framework
pnpm add raccoon-js-framework
yarn add raccoon-js-framework
bun add raccoon-js-framework
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2023-03-10 |
| First published | 2023-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 43 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Rickard Dahlstrom |
| Maintainers | rickii |
| Keywords | framework, experimental |

## Links

- npm: https://www.npmjs.com/package/raccoon-js-framework
- Repository: https://github.com/rickardd/reactivity.git#master
- Homepage: https://master--racccoon-docs.netlify.app/
- Issues: https://github.com/rickardd/reactivity/issues
- npm.io page: https://npm.io/package/raccoon-js-framework

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2023-03-10
- 1.0.7 — 2023-03-07
- 1.0.6 — 2023-03-07
- 1.0.5 — 2023-03-06
- 1.0.4 — 2023-03-06
- 1.0.3 — 2023-03-05
- 1.0.2 — 2023-03-03
- 1.0.1 — 2023-03-03
- 1.0.0 — 2023-03-03

## README

# Raccoon JS

This is an experimental JS framework inspired by Vue.js. It's created for personal learning and exploration. 
Play around with it but don't use it for any production work. 

Raccoon is a reactive - component based framework with basic functionality such as, reactivity, template engine, computed functions, dom-events, etc.

[Documentation](https://master--racccoon-docs.netlify.app/)

## Setup

Install Raccoon and a simple dev server.

You can use any dev server or bundler, we're using http-server for this example.

```bash
npm install raccoon-js-framework
npm install http-server --save-dev # Or what ever server you like
```

```json
{
  "scripts": {
    "start": "http-server . -o"
  }
}
```

```bash
npm run start
```

```html
<!-- Add in the header -->
<script src="app.js" type="module"></script>
```

```js
// Import Raccoon
import { Raccoon } from "raccoon-js-framework";

// Without bundler (Webpack, Vite etc), use relative path.
import { Raccoon } from "./node_modules/raccoon-js-framework/source/index.js";
```

Write some javascript

```js
import { Raccoon } from "raccoon-js-framework";

const componentEl = document.getElementById("demo-component-2");

// The Raccoon object returns 3 object
// 1. proxy, a reactive object. Changes to properties will be reflected on the page.
// 2. compute, a method that which returned value will be updated on the page when any proxy property updates.
// 3. funcs, an object to hold functions. This keeps the template clean and declarative. Good to handle e.g on-click logic.
const { proxy, compute, funcs } = new Raccoon(componentEl); 

proxy.price = 1;
proxy.quantity = 15;
proxy.tax = 0.01;
proxy.names = ["Lisa", "Frank", "Steve"];

compute.sum = () => (proxy.price * proxy.quantity) + (100 * proxy.tax);
compute.taxHuman = () => `${100 * proxy.tax}%`

funcs.addOnePercentTax = () => proxy.tax += 0.01
```

Create a component

```html
<div id="demo-component-2">
  <button @click="proxy.price += 10">Increase price</button>
  <button @click="proxy.quantity += 1">Increase quantity</button>
  <button @click="funcs.addOnePercentTax()">Add 1% tax</button>

  <div>Price: {{price}}</div>
  <div>Quantity: {{quantity}}</div>
  <div>Tax: {{taxHuman}}</div>
  <div>Sum (inc tax): {{sum}}</div>

  <div r-for="name of names">
    {{ name }}
  </div>
</div>
```

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