{"id":19306676,"url":"https://github.com/itsmaheshkariya/a1","last_synced_at":"2026-04-13T01:05:11.899Z","repository":{"id":62420932,"uuid":"265856539","full_name":"itsmaheshkariya/a1","owner":"itsmaheshkariya","description":"A1 Is Javascript Micro framework for rapid API Development","archived":false,"fork":false,"pushed_at":"2020-05-31T17:33:49.000Z","size":71,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-29T23:17:05.240Z","etag":null,"topics":["deno","framework","rest-api","server","typescript","web-components","web-elements"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/itsmaheshkariya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-21T13:32:11.000Z","updated_at":"2020-05-31T17:24:06.000Z","dependencies_parsed_at":"2022-11-01T17:30:59.482Z","dependency_job_id":null,"html_url":"https://github.com/itsmaheshkariya/a1","commit_stats":null,"previous_names":["maheshkareeya/a1"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmaheshkariya%2Fa1","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmaheshkariya%2Fa1/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmaheshkariya%2Fa1/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmaheshkariya%2Fa1/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsmaheshkariya","download_url":"https://codeload.github.com/itsmaheshkariya/a1/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240408339,"owners_count":19796671,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["deno","framework","rest-api","server","typescript","web-components","web-elements"],"created_at":"2024-11-10T00:07:19.852Z","updated_at":"2026-04-09T16:09:52.541Z","avatar_url":"https://github.com/itsmaheshkariya.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A1 \u003cspan style=\"color:blue\"\u003eMicro Framework\u003c/span\u003e.\n###  For Rapid API and Application Development in Deno ༼ つ ◕_◕ ༽つ. \n\n`By Mahesh Kariya.`\n\n[![GitHub license](https://img.shields.io/github/license/maheshkareeya/a1?color=blue\u0026logo=qcom\u0026logoColor=blue\u0026style=plastic)](https://github.com/maheshkareeya/a1/blob/master/LICENSE.txt)\n[![tag](https://img.shields.io/badge/deno-\u003e=1.0.0-green.svg?color=blue\u0026logo=qcom\u0026logoColor=blue\u0026style=plastic)](https://github.com/denoland/deno)\n[![tag](https://img.shields.io/badge/std-0.53.0-green.svg?color=blue\u0026logo=qcom\u0026logoColor=blue\u0026style=plastic)](https://github.com/denoland/deno)\n\n`index.ts`\n```ts\nimport $,{render} from 'https://deno.land/x/a1/server.ts'\nconst client = await render('./index.html')\n$({\n   port:8080,\n   rest:{\n            '/':{\n                    method:'GET',\n                    code:async(req:any)=\u003e{\n                        return {body:client}\n                        }\n                }\n        }\n})\n```\n\n`index.html`\n```html\n\u003cbody\u003e\n  \u003cqcom-hello-world\u003e\u003c/qcom-hello-world\u003e\n  \u003cscript type=\"module\"\u003e\n    import $ from 'https://deno.land/x/a1/client.js'\n    $({\n        name:'QcomHelloWorld',\n        template:()=\u003eh1('Hello World')\n    })\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n`Run`\n```\ndeno run -A index.ts\n```\n\n`Example - Dynamic Links`\n```ts\nimport $,{render} from 'https://deno.land/x/a1/server.ts'\nconst client = await render('./index.html')\n$({\n   port:8080,\n   rest:{\n            '/:id':{\n                    method:'GET', // GET , POST , PUT , DELETE\n                    code:async(req:any)=\u003e{\n                            console.log(req.body, req.headers, req.params)\n                            return {body:req.params.id}\n                    }\n            },\n            '/register':{\n                    method:'POST', // GET , POST , PUT , DELETE\n                    code:async(req:any)=\u003e{\n                            return {body:req.body}\n                    }\n            }\n        }\n})\n```\n\n\n## Rules \n`HTML`\n```html \n\u003ch1 class=\"head\"  style = \"color:red;  background-color:  yellow\"    id=\"heading\" \u003e I am H1 \u003c/h1\u003e\n```\n`Qcom`\n```js\nh1({class:'head', style:{ color:'red', backgroundColor : 'Yellow' }, id:'heading' }, 'I am H1' )\n```\n\n#### Functions\n```html\n\u003cbody\u003e\n    \u003cqcom-functions\u003e\u003c/qcom-functions\u003e\n    \u003cscript type=\"module\"\u003e\n    import $ from 'https://deno.land/x/a1/client.js'\n    $({\n        name:'QcomFunctions',\n        template:()=\u003ediv(h1({click:'QcomFunctions.log()'},'Click Here')),\n        code:{\n            log:()=\u003e{\n                //Do something here\n                alert('clicked')\n            }\n            //Create your own functions here like log()\n        }\n    })\n    \u003c/script\u003e\n\u003c/body\u003e\n```\n\n\n#### Data Management\n```html\n\u003cbody\u003e\n    \u003cqcom-data\u003e\u003c/qcom-data\u003e\n    \u003cscript type=\"module\"\u003e\n    import $ from 'https://deno.land/x/a1/client.js'\n    $({\n        name:'QcomData',\n        data:{\n            counter:0\n        },\n        template:()=\u003ediv( /* div must be here to wrap all internal tags*/\n                            h1(this.data.counter),\n                            button({click:'QcomData.add()'},'+'),\n                            button({click:'QcomData.sub()'},'-')\n                        ),\n        code:{\n                add:()=\u003e{\n                        this.data.counter +=  1\n                        this.render()\n                },\n                sub:()=\u003e{\n                        this.data.counter -=  1\n                        this.render()\n                }\n        }\n    })\n    \u003c/script\u003e\n\u003c/body\u003e\n```\n\n#### Loop\n```html\n\u003cbody\u003e\n\u003cqcom-loop\u003e\u003c/qcom-loop\u003e\n\u003cscript type=\"module\"\u003e\n  import $ from 'https://deno.land/x/a1/client.js'\n  $({\n      name:'QcomLoop',\n      data:{\n          items:[{id:1,name:'Abigail',age:21},\n                {id:2,name:'max',age:29},\n                {id:3,name:'Alison',age:17},\n                {id:4,name:'bob',age:32},\n                {id:5,name:'brad',age:36}]\n      },\n      template:()=\u003ediv(\n                    table(\n                        tr(\n                            td('Index'),\n                            td('Name'),\n                            td('Age')\n                        ),\n            ()=\u003ethis.data.items.map(item =\u003e\n                    tr(\n                        td(item.id),\n                        td(item.name),\n                        td(item.age))\n                        )\n                    )\n                )\n  })\n\u003c/script\u003e\n\u003c/body\u003e\n```\n\n#### Get Api\n```html\n\u003cbody\u003e\n\u003cqcom-get\u003e\u003c/qcom-get\u003e\n\u003cscript type=\"module\"\u003e\nimport $ from 'https://deno.land/x/a1/client.js'\n$({\n    name:'QcomGet',\n    data:{\n        items:[]\n    },\n    template:()=\u003ediv(\n        table(\n            tr(\n                td('Id'),\n                td('Title'),\n                td('completed')\n            ),\n            ()=\u003ethis.data.items.map(item =\u003e\n                    tr(\n                        td(item.id),\n                        td(item.title),\n                        td(item.completed))\n                        )\n        )\n    ),\n    code:{\n        onload:async ()=\u003e{\n            this.data.items = await qcom.get('https://jsonplaceholder.typicode.com/todos/')\n            this.render()\n        }\n    }\n})\n\u003c/script\u003e\n\u003c/body\u003e\n```\n\n#### Styling (camelCase is required while using style)\n```html\n\u003cbody\u003e\n\u003cqcom-css-example\u003e\u003c/qcom-css-example\u003e\n\u003cscript type=\"module\"\u003e\n  import $,{color} from 'https://deno.land/x/a1/client.js'\n  $({\n      name:'QcomCssExample',\n      globalcss:{ /* Global CSS*/\n          '*':{\n              margin:'50px',\n              padding:'50px'\n          }\n      },\n      css:{ /* Internal CSS*/\n          h1:{\n              color:color.red,\n              cursor:'pointer',\n              backgroundColor:color.yellow\n          },\n          '.mt':{\n              marginTop:'5px'\n          }\n      },\n      template:()=\u003ediv(\n                        h1({class:'mt',style:{ /* Inline CSS*/\n                            border:'2px solid red'\n                        }},'Inline Internal and global Style')\n                    )\n  })\n\n\u003c/script\u003e\n\u003c/body\u003e\n```\n#### Qcom Router\n```html\n\u003cbody\u003e\n\u003cqcom-main\u003e\u003c/qcom-main\u003e\n\u003cscript type=\"module\"\u003e\nimport $ from 'https://deno.land/x/a1/client.js'\n    let QcomOne = {\n        name:'QcomOne',\n        data:{\n            items:[\n                {name:'mahesh'},{name:'dipak'}\n            ]\n        },\n        template:()=\u003ediv(h1('Page One'),\n                ()=\u003ethis.data.items.map(item =\u003e\n                        div(item.name)))\n    }\n    let QcomTwo ={\n        name:'QcomTwo',\n        data:{\n            items:[]\n        },\n        template:()=\u003erow(\n            col(form(\n                material(\n                    h1('Registration'),\n                    input({id:'name',class:'mb6',placeholder:'Name'}),\n                    input({id:'email',class:'mb6',placeholder:'Email'}),\n                    input({id:'password',class:'mb6',placeholder:'Password'}),\n                    right(btn({click:'QcomTwo.post()',is:'md'},'Submit')))\n            )),\n            col(table(\n                tr(\n                    td('Name'),\n                    td('Email'),\n                    td('Password')\n                ),\n                ()=\u003ethis.data.items.map(item =\u003e\n                        tr(td(item.name),\n                            td(item.email),\n                            td(item.password)))\n            ))\n        ),\n        code:{\n            post:()=\u003e{\n                this.data.items.push({\n                    name:getval('name'),\n                    email:getval('email'),\n                    password:getval('password')\n                })\n                this.render()\n            }\n        }\n    }\n    let QcomError = {\n        name:'QcomError',template:()=\u003ediv(\n            h1('404 Page')\n        )\n    }\n    $({\n        name:'QcomMain',\n        template:()=\u003ediv(\n                appbar(\n                    btn({route:'/QcomOne',is:'link', class:'ml12'},'One'),\n                    btn({route:'/QcomTwo',is:'link', class:'ml12'},'Two'),\n                    btn({route:'/QcomError',is:'link', class:'ml12'},'404')\n                ),\n                div({class:'mt12', id:'root'})\n            ),\n       include:[QcomOne,QcomTwo,QcomError],\n            router:{\n                root:'QcomOne',\n                view:'root',\n                error:$('QcomError')(),\n                links:['QcomOne','QcomTwo']\n            }\n    })\n\u003c/script\u003e\n\u003c/body\u003e\n```\n\n### Demo\n![demoofqcom](https://unpkg.com/@qcom.io/qcom@1.0.36/result.png)\n\n\n\n**Grammar:**\n\n```\n                                        function\n ┌─────────-───────────────────────────────┴────────────────────────────────────────────────────────┐\n │                            separators                                                            |\n │                   ┌────────────┴───┬────────────────┬───────────────────────────┐                |\n |                   ↓                ↓                ↓                           ↓                |\np(  { to:'firstname' ,   class:'mt12' , id:'firstname' , style: {color:color.red} }, 'Hello World'  )\n        └───┬───┘          └───┬───┘     └────┬───┘       └────┬────────┘                 |\n            ┴───────────┬──────┴─────-──-─────┘-──-─────-─────-┘                          |\n                   attributes                                                           Text\n```\n\n## Configuration\n\n\n\u003cdetails\u003e\n\u003csummary\u003eUse \u003ccode\u003ecolor\u003c/code\u003e : For color coding \u003c/summary\u003e\n\u003cpre\u003e\u003ccode\u003e\nimport $,{color} from 'https://deno.land/x/a1/client.js'\n$({\n    theme:{\n        color:color.red,\n        background:color.yellow\n    }\n})\n\u003c/code\u003e\u003c/pre\u003e\n\u003c/details\u003e\n\u003cbr\u003e\n\u003cdetails\u003e\n\u003csummary\u003eUse \u003ccode\u003eto\u003c/code\u003e : For Two way data binding\u003c/summary\u003e\n\u003cpre\u003e\u003ccode\u003e\n        input({to:'email'}),\n            p({to:'email'},'')\n\u003c/code\u003e\u003c/pre\u003e\n\u003c/details\u003e\n\u003cbr\u003e\n\u003cdetails\u003e\n\u003csummary\u003eUse \u003ccode\u003erouter\u003c/code\u003e : For static and dynamic routing\u003c/summary\u003e\n\u003cpre\u003e\u003ccode\u003e\n    template:()=\u003ediv(\n            appbar(\n                btn({route:'/QcomOne',is:'link', class:'ml12'},'One'),\n                btn({route:'/QcomTwo',is:'link', class:'ml12'},'Two'),\n            ),\n            div({class:'mt12', id:'root'})\n        ),\n        include:[QcomOne,QcomTwo,QcomError],\n        router:{\n            root:'QcomOne',\n            view:'root', // id of div\n            error:$('QcomError')(),\n            links:['QcomOne','QcomTwo']\n        }\n\u003c/code\u003e\u003c/pre\u003e\n\u003c/details\u003e\n\n\n\n### Colors \n![color00](https://unpkg.com/@qcom.io/qcom@1.0.36/raw/color00.png)\n![color0](https://unpkg.com/@qcom.io/qcom@1.0.36/raw/color0.png)\n![color1](https://unpkg.com/@qcom.io/qcom@1.0.36/raw/color1.png)\n![color2](https://unpkg.com/@qcom.io/qcom@1.0.36/raw/color2.png)\n![color3](https://unpkg.com/@qcom.io/qcom@1.0.36/raw/color3.png)\n![color4](https://unpkg.com/@qcom.io/qcom@1.0.36/raw/color4.png)\n![color5](https://unpkg.com/@qcom.io/qcom@1.0.36/raw/color5.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsmaheshkariya%2Fa1","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsmaheshkariya%2Fa1","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsmaheshkariya%2Fa1/lists"}