{"id":20213769,"url":"https://github.com/3s-217/coreweb-js","last_synced_at":"2026-05-12T09:40:59.579Z","repository":{"id":262177072,"uuid":"886426271","full_name":"3s-217/coreWeb-js","owner":"3s-217","description":"A JavaScript library for manipulating the HTML DOM, offering multiple build types for flexible integration.","archived":false,"fork":false,"pushed_at":"2025-03-02T11:05:57.000Z","size":93,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T11:24:07.506Z","etag":null,"topics":["dom","dom-manipulation","flexible","frontend","html","javascript","javascript-library","js","library","ui"],"latest_commit_sha":null,"homepage":"","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/3s-217.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":"2024-11-11T00:15:24.000Z","updated_at":"2025-03-02T11:06:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"4444f152-b175-402c-b18e-a1e723ca6c4c","html_url":"https://github.com/3s-217/coreWeb-js","commit_stats":null,"previous_names":["3s-217/coreweb-js"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3s-217%2FcoreWeb-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3s-217%2FcoreWeb-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3s-217%2FcoreWeb-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3s-217%2FcoreWeb-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/3s-217","download_url":"https://codeload.github.com/3s-217/coreWeb-js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241652946,"owners_count":19997575,"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":["dom","dom-manipulation","flexible","frontend","html","javascript","javascript-library","js","library","ui"],"created_at":"2024-11-14T06:11:32.380Z","updated_at":"2026-05-12T09:40:59.573Z","avatar_url":"https://github.com/3s-217.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# coreWeb\n\nversion: ```0.13.7```\n\nA JavaScript library for manipulating the HTML DOM, offering multiple build types for flexible integration.\n\n## Build Types\n\nCoreWeb is available in three build types to accommodate different use cases:\n\n- CJS (CommonJS): For use with Node.js and other CommonJS environments.\n- ESM (ES Modules): For use with modern browsers and ES module-aware build systems.\n- IIFE (Immediately Invoked Function Expression): For use with older browsers and environments that don't support ES modules.\n\n## Using coreWeb\n\nTo use coreWeb, you can download the prebuilt files from the GitHub releases page. The library is not available on npm.\n\n___\n\n### Installing Locally\n\nFor local installation and using a bundler, you have access to submodules:\n\n```bash\nnpm install https://github.com/3s-217/coreweb-js/releases/latest/download/coreweb-js.tar.gz\n```\n\nCJS with Bundlers:\n\n```js\nconst { __o, _c } = require('coreweb'); \nnew __o(arg) || _c(arg) // returns __o instance\n```\n\nESM with Bundlers\n\n```js\nimport { __o, _c } from 'coreweb'; \nnew __o(arg) || _c(arg) // returns __o instance\n```\n\n___\n\n### Using with Web\n\nFor web usage, you can include the script directly:\n\nGlobal (window):\n\n```html\n\u003cscript src=\"https://github.com/3s-217/coreweb-js/releases/latest/download/core-min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    new __o(arg) || _c(arg) // returns __o instance\n\u003c/script\u003e\n```\n\nesm:\n\n```html\n\u003cscript type=\"module\"\u003e\n    import { __o, _c } from \"https://github.com/3s-217/coreweb-js/releases/latest/download/core.es-min.js\"\n    new __o(arg) || _c(arg) // returns __o instance\n\u003c/script\u003e\n```\n\n#### Chaining Example (inst __o)\n\nHere's a detailed example demonstrating some of the capabilities of coreWeb, with comments explaining each method and how different arguments are used:\n\n```html\n\u003cscript src=\"https://github.com/3s-217/coreweb-js/releases/latest/download/core-min.js\"\u003e\u003c/script\u003e\n\n\u003cdiv id=\"root\" remove\u003e\n    \u003ch1\u003e\u003c/h1\u003e\n    \u003cp\u003e\u003c/p\u003e\n\u003c/div\u003e\n\u003cscript\u003e\n  var el=  new __o(\"#root h1\");// you can use _c too \n  el.attr('style',\"color:red\")\n  .attr({\n    // it use css js api\n    style:{backgroundColor:\"darkblue\"},\n    //! use { text or html } dont use both\n    text:\"Added as innerText\",\n    html:\"\u003ci\u003eAdded as innerHTML\u003c/i\u003e\"\n  }) \n  //remove attribute 2nd arg is ignored\n  .attr('remove','','r')\n  // html class editing single action\n  .class(\"add\"||\"remove\"||\"toggle\",\"icon\",\"more\")\n   // html class editing multi action\n  .class({add:\"\"||[],toggle:\"\"||[],remove:\"\"|[]})\n  // on(name,cb,opt)\n  .on('click', e =\u003e {\n      const target=_c(e.target);\n      alert(`${target.gt.TagName}-textContent :${target.txt()}`)\n    },\n    {}// event listerner options (optional)\n    )\n  // change element\n    ._(\"#root p\")\n  //  on(obj,opt)\n  // options common for all event listerner (optional)\n  .on(\n    {\n      click(e){\n        const target=_c(e.target);\n        alert(`${target.gt.TagName}-textContent :${target.txt()}`)\n      },\n      keydown(e){\n        const target=_c(e.target);\n        alert(`${target.gt.TagName}-textContent :${target.txt()}`)\n      }\n    },\n    {\n         passive: true\n    }\n    )\n    //single value use css js api names\n    .css(\"color\",\"green\")\n    // multi value setter\n    .css({\n        backgroundColor:\"black\",\n        borderRadius:\"25px\"\n    })\n\n\u003c/script\u003e\n```\n\n___\n\n#### __Getter Methods Example__\n\nHere's a separate example to demonstrate the getter methods:\n\n```html\n\u003cscript src=\"https://github.com/3s-217/coreweb-js/releases/latest/download/core-min.js\"\u003e\u003c/script\u003e \n\u003cdiv id=\"root\" remove\u003e \n    \u003ch1 class=\"header\"\u003eHello\u003c/h1\u003e\n    \u003cp id=\"paragraph\"\u003eWorld\u003c/p\u003e\n\u003c/div\u003e\n\u003cscript\u003e\nvar el = new __o(\"#root h1\"); // You can use _c too \n// Getting class list \nvar classList = el.class(); \nconsole.log(classList); // Output: [\"header\"] \n// Getting an attribute by name \nvar attrValue = el.attr('class'); \nconsole.log(attrValue); // Output: \"header\" \n// Getting all attributes \nvar attributes = el.attr(); \nconsole.log(attributes); // Output: NamedNodeMap {0: class, class: class, length: 1}\n\u003c/script\u003e\n```\n\n___\n\n#### Create Element\n\n```js\nlet el=_c('a').mk({ class:\"link\" })\n_c('#root').append(el);\n\n// or\n\n_c(\"#root\").append(\"a\", { class:\"link\" })\n\n```\n\n#### Create Node\n\n```js\nconst { mkEl:e,mknode:mk}=__o;\n\nlet el= e('div',{}\n    e('a.link#sub1',{\n        // you can use onClick too (camel case for events)\n         onclick(e){} \n        // class||className both work + if type arg has a .class all will be combined\n         class:\"color-red\"\n        // if id is declared in both type and attr it will use the attr.id's values\n      },\n      e('.link.text',{},'subNode-1.1')\n    ),\n    e('a.link#sub2',{},'subNode-2')\n)\n_c(\"#root\").append(mknode(el))\n```\n\n#### Use diffing algorithm to update, comparing real DOM node to virtual DOM\n\n\u003ci style=\"color:red\"\u003eThis is new\u003c/i\u003e not all edge case have been tested\n\n```js\nconst { mkEl:e, vdom }=__o;\n\n// e(type, {attrs}, {str|another node} )\n// type: can be a query string structure. \n// if only .class \u0026| #id exist the default type defaults to div \n// vdom use mknode to create the element\n\nlet vel= e('div',{}\n    e('a.link#sub1',{\n        // you can use onClick too (camel case for events)\n         onclick(e){} \n        // class||className both work\n         class:\"color-red\"\n        // if id is declared in both type and attr it will use the attr.id's values\n      },\n      e('.link.text',{},'subNode-1.1')\n    ),\n    e('a.link#sub2',{},'subNode-2')\n)\n// query str | el inst of __o | actual dom element\nconst root=\"#root\";\n// renders and rerenders are manual calls\n// can pass a 3 arg with {dbg} it will log the steps\nvdom(root , vel);\n```\n\n## Submodules and Plugins\n\nCoreWeb includes submodules and plugins that can be used to extend its functionality. These are prebuilt and included in the prebuilt folder ```build/parts/```. To use them, simply import the desired submodule or plugin in your code.\n\n- ws ```coreweb/ws``` ```_WS```\n  \n  esm:\n\n  ```js\n    import { _ws } from \"coreweb/ws\"\n  ```\n\n  cjs:\n\n  ```js\n    const _ws = require(\"coreweb/ws\") \n  ```\n\n  ___\n\n  Browser\n  ___\n\n  Global (window):\n\n  ```html\n   \u003cscript src=\"https://github.com/3s-217/coreweb-js/releases/latest/download/ws-min.js\"\u003e\u003c/script\u003e \n  ```\n  \n  esm:\n\n  ```js\n    import { _ws } from \"https://github.com/3s-217/coreweb-js/releases/latest/download/ws.es-min.js\"\n  ```\n\n  ___\n\n  Usage:\n\n  ```js\n  _ws(\"example.com\"|\"ws://example.com\")\n  _ws({li: \"example.com\"|\"ws://example.com\"})\n  _ws({li: \"example.com\", p: \"ws\",ex: {}})\n  ```\n\n  ```js\n  // _ws is just a simplifier class the web api websocket obj can be accessed inst property _ws._w\n  // url if ws/wss not defined it will use the page's protocal (http-ws)|(https-wss)\n  let ws= new _ws(url);\n  ws.on(\"open\"||\"opn\",() =\u003e {\n          if(ws.state==1)\n            console.log(\"connection open\")\n    })\n    .on(\"cl\"|\"close\",() =\u003e {\n          if(ws.state==2)\n            console.log(\"connection closing\")\n         else if(ws.state==3)\n            console.log(\"connection closed\")\n    })\n    .on(\"err\"|\"error\", err =\u003e console.log(err))\n    .on(\"mgs\"|\"msg\"|\"message\",evt =\u003e {\n       console.log(evt.data)\n    });\n  ```\n\n  ___\n\n- webaudio ```coreweb/wa``` ```_WA```\n\n### Prebuilt Folder\n\nThe prebuilt folder contains prebuilt versions of the lib and it submodules. These files can be used with a build system or imported directly in your code.\n\n## Changelogs\n\n___\n[5/04/2025]\n\n- Version change\n  - ```0.13.6``` \u003e\u003e ```0.13.7```\n- Json\n  - add error to update all json usage from __o inst to static ```__o.json(type,data,...extra)```\n\n[2/03/2025]\n\n- Version change\n  - ```0.13.3``` \u003e\u003e ```0.13.6```\n  \n- fixed vdoms' comp errors\n\n## License\n\ncoreWeb is licensed under MIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3s-217%2Fcoreweb-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F3s-217%2Fcoreweb-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3s-217%2Fcoreweb-js/lists"}