{"id":20020651,"url":"https://github.com/netcentric/component-loader","last_synced_at":"2025-05-05T01:30:42.362Z","repository":{"id":196500089,"uuid":"685504143","full_name":"Netcentric/component-loader","owner":"Netcentric","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-04T09:16:56.000Z","size":134,"stargazers_count":1,"open_issues_count":3,"forks_count":2,"subscribers_count":23,"default_branch":"main","last_synced_at":"2025-05-04T21:49:52.000Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Netcentric.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"docs/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-08-31T11:36:05.000Z","updated_at":"2025-04-04T09:16:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"e5763689-f70e-4d62-941c-9ae11bad7236","html_url":"https://github.com/Netcentric/component-loader","commit_stats":null,"previous_names":["netcentric/component-loader"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Netcentric%2Fcomponent-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Netcentric%2Fcomponent-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Netcentric%2Fcomponent-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Netcentric%2Fcomponent-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Netcentric","download_url":"https://codeload.github.com/Netcentric/component-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252422931,"owners_count":21745515,"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":[],"created_at":"2024-11-13T08:33:27.502Z","updated_at":"2025-05-05T01:30:42.356Z","avatar_url":"https://github.com/Netcentric.png","language":"JavaScript","readme":"# @netcentric/component-loader\n\nDescription\n\n[![Version](https://img.shields.io/npm/v/@netcentric/component-loader.svg)](https://npmjs.org/package/@netcentric/component-loader)\n[![Build Status](https://github.com/netcentric/component-loader/workflows/CI/badge.svg?branch=main)](https://github.com/netcentric/component-loader/actions)\n[![CodeQL Analysis](https://github.com/netcentric/component-loader/workflows/CodeQL/badge.svg?branch=main)](https://github.com/netcentric/component-loader/actions)\n[![semver: semantic-release](https://img.shields.io/badge/semver-semantic--release-blue.svg)](https://github.com/semantic-release/semantic-release)\n[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)\n\n## Installation\n\n```npm install @netcentric/component-loader```\n\n**important!**\n\nThis module is not transpiled. If your project is excluding `node_modules` you will have to update regex to include this module.\n\nEg:\n\n```javascript\n// webpack babel-loader config\nmodule.exports = {\n  exclude: /node_modules\\/(?!@netcentric)/,\n  loader: 'babel-loader',\n  ...\n};\n```\n\nHere we are excluding node_modules, except the ones under node_modules/@netcentric/*\n\n\n## Usage\n\n1. Register component:\n```javascript\nregister({ componentName: ComponentClass });\n```\n2. Initialize component\n```javascript\nrunComponent('componentName');\n```\nor initialize all components\n```javascript\nrun();\n```\n3. Bind component to DOM\n```html\n\u003cdiv data-nc=\"componentName\"\n     data-nc-params-componentName=\"{}\"\u003e\u003c/div\u003e\n```\n\n### Example\n\n#### in the component file you should register your component\n\n```javascript\nimport { register } from '@netcentric/component-loader';\n\nclass Text {\n  ...\n}\n// register your component to be loaded\nregister({ Text });\n```\n\n#### At your main entry file you should run all registered components\n\n```javascript\nimport {\n  observe,\n  run\n} from '@netcentric/component-loader';\n\n// Run all registered component\nrun();\n// Optional: Use observe to initialize new components which  are added to the DOM after initial run.\nobserve();\n```\n\n## API and examples\n\nThis version uses standalone functions to allow tree shaking and to only use necessary parts.\n\n\n### adding it to HTML\n\nAdding one component\n\n```\n\u003cdiv data-nc=\"Component1\"\n     data-nc-params-Component1=\"{}\"\u003e\u003c/div\u003e\n```\n\n\nAdding more than one component\n\n```\n\u003cdiv data-nc=\"Component1,Component2\"\n     data-nc-params-Component1=\"{}\"\n     data-nc-params-Component2=\"{}\"\u003e\u003c/div\u003e\n```\n\n\nDefering component instantiation until it enters the viewport\n\n```\n\u003cdiv data-nc=\"Component1\"\n     data-nc-loading=\"lazy\"\u003e\u003c/div\u003e\n```\n\n### register\n\nThis method will register components constructor in loaderComponents\nYou can register individual component, or list\n\n#### Parameters\n\n```\n/**\n * Constant with a object that contain collection of components classes.\n *\n * @param {object} newComponents - Components collection { name: definition }\n * @param {number} [level] - level of inheritance\n */\n  const register = (newComponents, level) =\u003e {}\n```\n\n#### Examples\n\n```javascript\n\nimport { register } from '@netcentric/component-loader';\nimport { title } from 'components/title';\nimport { text } from 'components/text';\n\n// Add 2 components named title, and text\nregister({ title, text });\n\n```\nOr you can register several components based on proper named exports\n\n```javascript\n\nimport { register } from '@netcentric/component-loader';\nimport * as components from 'components';\n\n// register all components exported as proper named exports on components/index.js\n\nregister({ components });\n\n```\n\nLevel is used in multilevel inheritance, eg if you have one base project with component HTML,\nand want to override just JS part in sub project\n\n1. Base project\n\n```javascript\nimport { register } from '@netcentric/component-loader';\n\nclass Title {\n  init() {\n    console.log('level 0 Title');\n  }\n}\n\nregister({ Title }, 0);\n```\n\n2. Sub project\n\n```javascript\nimport { register, components } from '@netcentric/component-loader';\n\nclass Title extends components[0].Title {\n  init() {\n    console.log('level 1 Title');\n  }\n}\n\nregister({ Title }, 1);\n```\n\n### run\n\nThis will run the loader on previously registered components.\n\n#### Parameters\n\n```\n/**\n *  Run the loader on a element to get all attributes that corresponds to a component\n *  @param {HTMLElement} [element] root element\n *  @param {string} [initAttr] attribut name\n */\n  const run = (element = window.document, initAttr = 'data-nc') =\u003e {}\n```\n\n#### Examples\n\n```javascript\n\nimport {\n  register,\n  run\n} from '@netcentric/component-loader';\n\n// eg components\nimport { title } from 'components/title';\nimport { text } from 'components/text';\n\n// Add 2 components named title, and text\nregister({ title, text });\n// then you run so it will create if any HTMLelement with a default attribute have any component to start\nrun();\n\n// Or load components only on a specific element and search a different attribute like `data-components`\nconst main = document.querySelector('main');\nrun(main, 'data-components');\n```\n\n### components\n\nHere is just a constant to store the available constructors (functions or classes) of components.\nWe store it on its own file so it can be imported into separated files and without having to import the other components logic.\n\nIf you want to access all components constructors you can just import it in any file like:\n\n```javascript\n\nimport { components } from '@netcentric/component-loader';\n\n```\n\n### instances\n\nThis object will store all instances of components separated by [className][instanceId].\nWe store it on its own file, so it can be imported into separated files and without having to import the other components logic.\n\nIf you want to access all the instances of components you can just import it in any file like:\n\n```javascript\n\nimport { instances } from '@netcentric/component-loader';\n\nconst howManyTitles = instances.title.length;\n\n// eg of querying title components by uuid\nconst getTitleByUUID = (uuid) =\u003e instances.title.filter(instance =\u003e instance.el.uuid === uuid);\nconst mytitle = getTitleByUUID('a8c405b5-1928-46ed-afa1-5a0a3f4dde6c');\n\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetcentric%2Fcomponent-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetcentric%2Fcomponent-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetcentric%2Fcomponent-loader/lists"}