{"id":19306680,"url":"https://github.com/itsmaheshkariya/cli","last_synced_at":"2025-11-17T02:01:37.924Z","repository":{"id":38050021,"uuid":"256096271","full_name":"itsmaheshkariya/cli","owner":"itsmaheshkariya","description":"Qcom CLI is a comfortable environment for learning Qcom, and is the best way to start building a new single-page application in Qcom.","archived":false,"fork":false,"pushed_at":"2024-09-11T10:59:58.000Z","size":695,"stargazers_count":1,"open_issues_count":26,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-24T02:44:23.273Z","etag":null,"topics":["es2020","framework","htmlelement","javascript","javascript-framework","javascript-library","library","modular-javascript","qcom","qcom-cli","qcomjs","webcomponents"],"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","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-16T03:10:06.000Z","updated_at":"2020-05-17T00:47:17.000Z","dependencies_parsed_at":"2024-09-11T14:21:27.197Z","dependency_job_id":"6d679de0-af9e-4b62-aa8e-2ae75e1db67b","html_url":"https://github.com/itsmaheshkariya/cli","commit_stats":null,"previous_names":["maheshkareeya/cli"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/itsmaheshkariya/cli","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmaheshkariya%2Fcli","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmaheshkariya%2Fcli/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmaheshkariya%2Fcli/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmaheshkariya%2Fcli/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsmaheshkariya","download_url":"https://codeload.github.com/itsmaheshkariya/cli/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmaheshkariya%2Fcli/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284807785,"owners_count":27066464,"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","status":"online","status_checked_at":"2025-11-17T02:00:06.431Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["es2020","framework","htmlelement","javascript","javascript-framework","javascript-library","library","modular-javascript","qcom","qcom-cli","qcomjs","webcomponents"],"created_at":"2024-11-10T00:07:22.800Z","updated_at":"2025-11-17T02:01:37.903Z","avatar_url":"https://github.com/itsmaheshkariya.png","language":"JavaScript","readme":"# QcomJs CLI\n[![Dependency Status](https://david-dm.org/maheshkareeya/cli.svg)](https://david-dm.org/maheshkareeya/cli)\n[![devDependency Status](https://david-dm.org/maheshkareeya/cli/dev-status.svg)](https://david-dm.org/maheshkareeya/cli#info=devDependencies)\n[![NPM version](https://badge.fury.io/js/@qcom.io%2Fqcom-cli.svg)](https://www.npmjs.com/package/@qcom.io/qcom-cli)\n![Downloads](https://img.shields.io/npm/dm/%40qcom.io%2Fqcom-cli.svg?style=flat)\n\u003c!-- [![Coverage Status](https://coveralls.io/repos/github/maheshkareeya/cli/badge.svg?branch=master)](https://coveralls.io/github/maheshkareeya/cli?branch=master) --\u003e\n\u003c!-- [![Build Status](https://travis-ci.org/@qcom.io/qcom-cli.svg?branch=master)](https://travis-ci.org/@qcom.io/qcom-cli) --\u003e\n![demoofqcom](https://unpkg.com/@qcom.io/qcom@1.0.36/qcom.png)\n\n### Javascript Framework\nQcom CLI is a comfortable environment for learning QcomJS, and is the best way to start building a new single-page application in Qcom by Creating Custom web elements wth Qcom and manage Web components with generating functions in Modern Javascript.\n\n\n#### CLI Installation for Quick Start\n```bash\nnpx @qcom.io/qcom-cli\nnpm start\n```\n### check url\nhttp://localhost:8080\n\n#### Or\n\n```bash\nnpm install @qcom.io/qcom --save\n```\n\n#### Or Use following code to your html file\n\n```html\n\u003cscript type=\"module\"\u003e\n  import $ from 'https://unpkg.com/@qcom.io/qcom'\n  // Or import $ from './node_modules/@qcom.io/qcom/index.js'\n  $() // Now check your Inspector of Browser He will guide you for further steps\n\u003c/script\u003e\n```\n#### index.html\n```html\n\u003cqcom-hello-world\u003e\u003c/qcom-hello-world\u003e\n\n\u003cscript type=\"module\"\u003e\n  import $ from 'https://unpkg.com/@qcom.io/qcom'\n  // Or import $ from './node_modules/@qcom.io/qcom/index.js'\n  $({\n      name:'QcomHelloWorld',\n      template:()=\u003eh1('Hello World')\n  })\n\u003c/script\u003e\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\u003cqcom-functions\u003e\u003c/qcom-functions\u003e\n\n\u003cscript type=\"module\"\u003e\n  import $ from 'https://unpkg.com/@qcom.io/qcom'\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```\n\n\n#### Data Management\n```html\n\u003cqcom-data\u003e\u003c/qcom-data\u003e\n\n\u003cscript type=\"module\"\u003e\n  import $ from 'https://unpkg.com/@qcom.io/qcom'\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```\n\n#### Loop\n```html\n\u003cqcom-loop\u003e\u003c/qcom-loop\u003e\n\n\u003cscript type=\"module\"\u003e\n  import $ from 'https://unpkg.com/@qcom.io/qcom'\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```\n\n#### Get Api\n```html\n\u003cqcom-get\u003e\u003c/qcom-get\u003e\n\n\u003cscript type=\"module\"\u003e\nimport $ from 'https://unpkg.com/@qcom.io/qcom'\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\n\u003c/script\u003e\n```\n\n#### Styling (camelCase is required while using style)\n```html\n\u003cqcom-css-example\u003e\u003c/qcom-css-example\u003e\n\n\u003cscript type=\"module\"\u003e\n  import $,{color} from 'https://unpkg.com/@qcom.io/qcom'\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```\n#### Qcom Router\n```html\n\u003cqcom-main\u003e\u003c/qcom-main\u003e\n\u003cscript type=\"module\"\u003e\nimport $ from 'https://unpkg.com/@qcom.io/qcom'\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\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://unpkg.com/@qcom.io/qcom'\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'})    //\u003c-|\n        ),                                   //   |\n        include:[QcomOne,QcomTwo,QcomError],//    |\n        router:{                           //     |\n            root:'QcomOne',               //      |\n            view:'root', // id of div \u003c-----------|\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\n\n\n\n## License\n\n[MIT](LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsmaheshkariya%2Fcli","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsmaheshkariya%2Fcli","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsmaheshkariya%2Fcli/lists"}