# Minima

Minima is a minimalistic frontend framework with reactive state, DI-container out of the box and swift DOM-updates by assigning URL-address for every node. The solution doesn't use Virtual DOM, doesn't need compilation shenanigans and outperforms React by 54% (1.87 React vs 1.02 Minima) in benchmarks (used js-framework-benchmark).

> **No React, Vue, Svelte or Solid.** Minima is written from scratch as an instrument for high-performance UI applications.

# Feautures
- **Swift performance**
  1 000 000 sync updates for about **7ms** on **cold start**
- **Minimal size**
  The whole solution is **770 LoC** compiled JavaScript (~3 KB gzip)
- **Component approach**  
  JSX-syntax, external state, but no effects (yet)
- **FIOI-scheduler**  
  Batching by `requestAnimationFrame` with philosophy "Flushing Independent of Instance" (FIOI)
- **Out the box DI-container**
  `Services` is the DI-container

## Swift start

```bash
npm i @minima-dev/minima-js
```

### Barebone tsconfig.json
```json

{
  "compilerOptions": {
    "jsx": "react",
    "outDir": "./dist",
    "noImplicitAny": false,
    "module": "esnext",
    "moduleResolution": "bundler",
    "rootDir": ".",
    "allowSyntheticDefaultImports": true
  },
  "include": [
    /* Include your project files */  
  ],
  "exclude": [
    "node_modules"
  ]
}

```js

import esbuild from 'esbuild'

const ctx = await esbuild.context({
  entryPoints: [/* Include your project files */],
  bundle: true,
  outfile: 'dist/index.js',
  format: 'esm',
  platform: 'browser',
  jsx: 'automatic',
  jsxFactory: 'jsx',
  target: 'esnext',
  loader: {
    '.tsx': 'tsx',
    '.ts': 'ts'
  }
})

try {
  ctx.watch()
} catch (e) {
  console.log(e)

  process.exit(1)
}

```

### Barebone package.json

```json

{
  "dependencies": {
    "@minima-dev/minima-js": "^0.1.17",
    "esbuild": "^0.28.1",
    "typescript": "^6.0.3"
  },
  "scripts": {
    "watch": "node esbuild.watch.config.js"
  },
  "type": "module"
}

```

## Custom component example

```jsx
import minima, { Abstract, jsx } from '@minima-dev/minima-js'

function Counter() {
  const counter = new minima.Singular(0)
  
  return (
    <div>
      <span m-text={() => `Count: ${counter.Value}`}></span>
      <button onclick={() => counter.Set(counter.Value + 1)}>+1</button>
    </div>
  )
}

const backend = new minima.DOM(document.body)

backend.Render(<Counter />)

```

## Backend/Interpretators

### DOM

```jsx
const backend = new minima.DOM(document.body)

backend.Render(<Counter />)
```

### Canvas
I am working on it, it will be released on version 1.0.0

## Contacts

I am 21 year old boy and I am working on this framework for about 7 days total. Didn't expect somebody will take an interest in my project. I hope your days will be better!