another_javascript_framework/README.md

html&javascript in one place

# another\_javascript\_framework

a little framework that lets you use html in javascript

## pros and cons

### pros
* it's just 1kb (es5.min version, no shorthands)
* an easy to use component system(similar to ReactJS's way)
* the framework works with strings
* a light "virtual dom"(not kinda a virtual dom)

### cons
* it's not reactive(see ReactJS, PreactJS or VueJS for a reactive framework)
* it's not ready for production environment
* updates for the framework will come slow (not all of them)

## installing

### method 1

do:
```bash
npm i another_javascript_framework -S
```

then add these script tags:

```html
<script src="./node_modules/another_javascript_framework/dist/a_js_f.es5.min.js"></script>
<!-- the next is optional but recomended -->
<script src="./node_modules/another_javascript_framework/dist/a_js_f.shorthands.es5.min.js"></script>
```

### method 2

add these script tags to your html page:
```html
<script src="https://cdn.jsdelivr.net/npm/another_javascript_framework/dist/a_js_f.es5.min.js"></script>
<!-- the next is optional but recomended -->
<script src="https://cdn.jsdelivr.net/npm/another_javascript_framework/dist/a_js_f.shorthands.es5.min.js"></script>
```

## examples

### <example 1>

html:
```html
<div id="app"></div>
```

javascript:
```javascript
const App = () => (
    div(
        h1('Hello world')
    )
)

render({
    template: App(),
    element: 'app'
})
```
output: 
```html
<div id="app">
    <div>
        <h1>Hello world</h1>
    </div>
</div>
```

### </example 1>

### <example 2>

html:
```html
<div id="app"></div>
```

javascript:
```javascript
const App = () => (
    div({
        class: 'center big red',
        id: 'loool',
        render: (
            h1({
                class: 'blue-text',
                render: 'Hello world'
            })+
            br()+
            ul(
                li('Hy man')+
                li('how are you?')
            )
        )
    })
)

render({
    template: App(),
    element: 'app'
})
```
output: 
```html
<div id="app">
    <div class="center big red" id="loool">
        <h1 class="blue-text">Hello world</h1>
        <br />
        <ul>
            <li>Hy man</li>
            <li>How are you?</li>
        </ul>
    </div>
</div>
```

### </example 2>

### <example 3>
html:
```html
<div id="app"></div>
```

```javascript
const HelloWorld = number => 'Hello World no.' + number

const AnotherComponent = props => (
    h1('Hy ' + props.name)+
    br()+
    h5(`My friend told me you like the color ${props.favoriteColor}.`)
)

const App = () => (
    div(
        HelloWorld(1)+
        br()+
        HelloWorld(2)
    )+
    AnotherComponent({
        name: 'Bob',
        favoriteColor: 'red'
    })
)

render({
    template: App(),
    element: 'app'
})
```
output:
```html
<div id="app">
    <div>
        Hello World no.1
        <br />
        Hello World no.2
    </div>
    <h1>Hy Bob</h1>
    <br />
    <h5>My friend told me you like the color red.</h5>
</div>
```

### </example 3>

### <example 4 no-shorthands>


html:
```html
<div id="app"></div>
```

javascript:
```javascript
const App = () => (
    a_js_f._('div', (
        a_js_f._('h1', 'Hello world')
    ))
)

a_js_f.$({
    template: App(),
    element: 'app'
})
```
output: 
```html
<div id="app">
    <div>
        <h1>Hello world</h1>
    </div>
</div>
```

### </example 4>

### <example 5 no-shorthands>


html:
```html
<div id="app"></div>
```

javascript:
```javascript
const App = () => (
    createElement('div', (
        createElement('h1', 'Hello world')
    ))
)

render({
    template: App(),
    element: 'app'
})
```
output: 
```html
<div id="app">
    <div>
        <h1>Hello world</h1>
    </div>
</div>
```

### </example 5>

## comparison with other frameworks

all other frameworks are more complex and better than mine, easy.

## contact

contact me at mixerandr3w001@gmail.com for anything related to the framework

_sorry everyone for the email typo, the last 0 from my email needed to be a 1_

## author(s)

* **me (duh)**

## license

just the default npm licence (I need to make some research on that)

## more info:

### global variables: 
* createElement
* render
* a\_js\_f

### global variables if you use the shorthands:
* h1
* div
* and all html element...

### exceptions for html elements:
* var() -> is now Var()

## common errors:

### Uncaught ReferenceError: --insert here html element name-- is not defined
#### solution:
try to do like I did on examples 4 and 5 for that element or mail me the error