Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itsmaheshkariya/a1
A1 Is Javascript Micro framework for rapid API Development
https://github.com/itsmaheshkariya/a1
deno framework rest-api server typescript web-components web-elements
Last synced: about 2 months ago
JSON representation
A1 Is Javascript Micro framework for rapid API Development
- Host: GitHub
- URL: https://github.com/itsmaheshkariya/a1
- Owner: itsmaheshkariya
- License: mit
- Created: 2020-05-21T13:32:11.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-05-31T17:33:49.000Z (over 4 years ago)
- Last Synced: 2024-10-28T12:15:23.953Z (2 months ago)
- Topics: deno, framework, rest-api, server, typescript, web-components, web-elements
- Language: JavaScript
- Size: 69.3 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# A1 Micro Framework.
### For Rapid API and Application Development in Deno ༼ つ ◕_◕ ༽つ.
`By Mahesh Kariya.`
[](https://github.com/maheshkareeya/a1/blob/master/LICENSE.txt)
[](https://github.com/denoland/deno)
[](https://github.com/denoland/deno)
`index.ts`
```ts
import $,{render} from 'https://deno.land/x/a1/server.ts'
const client = await render('./index.html')
$({
port:8080,
rest:{
'/':{
method:'GET',
code:async(req:any)=>{
return {body:client}
}
}
}
})
```
`index.html`
```html
import $ from 'https://deno.land/x/a1/client.js'
$({
name:'QcomHelloWorld',
template:()=>h1('Hello World')
})
```
`Run`
```
deno run -A index.ts
```
`Example - Dynamic Links`
```ts
import $,{render} from 'https://deno.land/x/a1/server.ts'
const client = await render('./index.html')
$({
port:8080,
rest:{
'/:id':{
method:'GET', // GET , POST , PUT , DELETE
code:async(req:any)=>{
console.log(req.body, req.headers, req.params)
return {body:req.params.id}
}
},
'/register':{
method:'POST', // GET , POST , PUT , DELETE
code:async(req:any)=>{
return {body:req.body}
}
}
}
})
```
## Rules
`HTML`
```html
I am H1
```
`Qcom`
```js
h1({class:'head', style:{ color:'red', backgroundColor : 'Yellow' }, id:'heading' }, 'I am H1' )
```
#### Functions
```html
import $ from 'https://deno.land/x/a1/client.js'
$({
name:'QcomFunctions',
template:()=>div(h1({click:'QcomFunctions.log()'},'Click Here')),
code:{
log:()=>{
//Do something here
alert('clicked')
}
//Create your own functions here like log()
}
})
```
#### Data Management
```html
import $ from 'https://deno.land/x/a1/client.js'
$({
name:'QcomData',
data:{
counter:0
},
template:()=>div( /* div must be here to wrap all internal tags*/
h1(this.data.counter),
button({click:'QcomData.add()'},'+'),
button({click:'QcomData.sub()'},'-')
),
code:{
add:()=>{
this.data.counter += 1
this.render()
},
sub:()=>{
this.data.counter -= 1
this.render()
}
}
})
```
#### Loop
```html
import $ from 'https://deno.land/x/a1/client.js'
$({
name:'QcomLoop',
data:{
items:[{id:1,name:'Abigail',age:21},
{id:2,name:'max',age:29},
{id:3,name:'Alison',age:17},
{id:4,name:'bob',age:32},
{id:5,name:'brad',age:36}]
},
template:()=>div(
table(
tr(
td('Index'),
td('Name'),
td('Age')
),
()=>this.data.items.map(item =>
tr(
td(item.id),
td(item.name),
td(item.age))
)
)
)
})
```
#### Get Api
```html
import $ from 'https://deno.land/x/a1/client.js'
$({
name:'QcomGet',
data:{
items:[]
},
template:()=>div(
table(
tr(
td('Id'),
td('Title'),
td('completed')
),
()=>this.data.items.map(item =>
tr(
td(item.id),
td(item.title),
td(item.completed))
)
)
),
code:{
onload:async ()=>{
this.data.items = await qcom.get('https://jsonplaceholder.typicode.com/todos/')
this.render()
}
}
})
```
#### Styling (camelCase is required while using style)
```html
import $,{color} from 'https://deno.land/x/a1/client.js'
$({
name:'QcomCssExample',
globalcss:{ /* Global CSS*/
'*':{
margin:'50px',
padding:'50px'
}
},
css:{ /* Internal CSS*/
h1:{
color:color.red,
cursor:'pointer',
backgroundColor:color.yellow
},
'.mt':{
marginTop:'5px'
}
},
template:()=>div(
h1({class:'mt',style:{ /* Inline CSS*/
border:'2px solid red'
}},'Inline Internal and global Style')
)
})
```
#### Qcom Router
```html
import $ from 'https://deno.land/x/a1/client.js'
let QcomOne = {
name:'QcomOne',
data:{
items:[
{name:'mahesh'},{name:'dipak'}
]
},
template:()=>div(h1('Page One'),
()=>this.data.items.map(item =>
div(item.name)))
}
let QcomTwo ={
name:'QcomTwo',
data:{
items:[]
},
template:()=>row(
col(form(
material(
h1('Registration'),
input({id:'name',class:'mb6',placeholder:'Name'}),
input({id:'email',class:'mb6',placeholder:'Email'}),
input({id:'password',class:'mb6',placeholder:'Password'}),
right(btn({click:'QcomTwo.post()',is:'md'},'Submit')))
)),
col(table(
tr(
td('Name'),
td('Email'),
td('Password')
),
()=>this.data.items.map(item =>
tr(td(item.name),
td(item.email),
td(item.password)))
))
),
code:{
post:()=>{
this.data.items.push({
name:getval('name'),
email:getval('email'),
password:getval('password')
})
this.render()
}
}
}
let QcomError = {
name:'QcomError',template:()=>div(
h1('404 Page')
)
}
$({
name:'QcomMain',
template:()=>div(
appbar(
btn({route:'/QcomOne',is:'link', class:'ml12'},'One'),
btn({route:'/QcomTwo',is:'link', class:'ml12'},'Two'),
btn({route:'/QcomError',is:'link', class:'ml12'},'404')
),
div({class:'mt12', id:'root'})
),
include:[QcomOne,QcomTwo,QcomError],
router:{
root:'QcomOne',
view:'root',
error:$('QcomError')(),
links:['QcomOne','QcomTwo']
}
})
```
### Demo
**Grammar:**
```
function
┌─────────-───────────────────────────────┴────────────────────────────────────────────────────────┐
│ separators |
│ ┌────────────┴───┬────────────────┬───────────────────────────┐ |
| ↓ ↓ ↓ ↓ |
p( { to:'firstname' , class:'mt12' , id:'firstname' , style: {color:color.red} }, 'Hello World' )
└───┬───┘ └───┬───┘ └────┬───┘ └────┬────────┘ |
┴───────────┬──────┴─────-──-─────┘-──-─────-─────-┘ |
attributes Text
```
## Configuration
Use color : For color coding
import $,{color} from 'https://deno.land/x/a1/client.js'
$({
theme:{
color:color.red,
background:color.yellow
}
})
Use to : For Two way data binding
input({to:'email'}),
p({to:'email'},'')
Use router : For static and dynamic routing
template:()=>div(
appbar(
btn({route:'/QcomOne',is:'link', class:'ml12'},'One'),
btn({route:'/QcomTwo',is:'link', class:'ml12'},'Two'),
),
div({class:'mt12', id:'root'})
),
include:[QcomOne,QcomTwo,QcomError],
router:{
root:'QcomOne',
view:'root', // id of div
error:$('QcomError')(),
links:['QcomOne','QcomTwo']
}
### Colors
