{"id":19176612,"url":"https://github.com/sulu/web-js","last_synced_at":"2025-05-07T19:24:16.712Z","repository":{"id":41831924,"uuid":"90908035","full_name":"sulu/web-js","owner":"sulu","description":"A js library for controlling your components from your templating engine like twig.","archived":false,"fork":false,"pushed_at":"2023-05-24T11:23:05.000Z","size":126,"stargazers_count":21,"open_issues_count":13,"forks_count":11,"subscribers_count":16,"default_branch":"main","last_synced_at":"2025-04-14T19:17:09.229Z","etag":null,"topics":["component","component-library","hacktoberfest","javascript"],"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/sulu.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-05-10T21:01:52.000Z","updated_at":"2023-11-30T15:54:11.000Z","dependencies_parsed_at":"2024-06-19T17:10:48.215Z","dependency_job_id":"52f0678b-5edc-452b-a376-3ef188e78bac","html_url":"https://github.com/sulu/web-js","commit_stats":{"total_commits":99,"total_committers":14,"mean_commits":7.071428571428571,"dds":0.4242424242424242,"last_synced_commit":"9bc47c3fb941d702e1a3ed356e3d46857599ae69"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sulu%2Fweb-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sulu%2Fweb-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sulu%2Fweb-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sulu%2Fweb-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sulu","download_url":"https://codeload.github.com/sulu/web-js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252942176,"owners_count":21829023,"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":["component","component-library","hacktoberfest","javascript"],"created_at":"2024-11-09T10:29:15.539Z","updated_at":"2025-05-07T19:24:16.691Z","avatar_url":"https://github.com/sulu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Github CI](https://img.shields.io/github/workflow/status/sulu/web-js/CI.svg?label=Tests)](https://github.com/sulu/web-js/actions)\n[![npm](https://img.shields.io/npm/v/@sulu/web.svg)](https://www.npmjs.com/package/@sulu/web)\n[![Size](https://img.shields.io/github/size/sulu/web-js/packages/core/core.js.svg)](https://github.com/sulu/web-js/blob/master/packages/core/core.js)\n[![Install Size](https://packagephobia.now.sh/badge?p=@sulu/web)](https://packagephobia.now.sh/result?p=@sulu/web)\n\n# Web JS\n\nThe web-js in connection with [web component twig extension](https://github.com/sulu/web-twig)\ngives you simple and efficient way to handle your javascript components over twig.\n\n## Installation\n\n**NPM**\n\n```bash\n# NPM:\nnpm install @sulu/web\n\n# Yarn\nyarn add @sulu/web\n\n# pnpm\npnpm add @sulu/web\n```\n\n## Usage\n\n### Create your first component\n\nA component can be created using different JS patterns:\n\n - [JS Class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)\n - [JS Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions)\n - [Revealing pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript)\n - [Prototype pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#prototypepatternjavascript)\n - and more which works with multiple instances\n\n**Class Component**\n\n```js\n// js/components/test-class.js\nexport default class Test {\n    constructor(el, options) {\n        this.text = options.text;\n        el.onclick = this.say;\n    }\n\n    say() {\n        alert(this.text);\n    }\n}\n```\n\n**Function Component**\n\n```js\n// js/components/test-function.js\nexport default function(el, options) {\n    el.onclick = function() {\n        alert(options.text);\n    };\n}\n```\n\n### Create your first service\n\nSometimes you want just run js code which is not binded to a dom element for this services where created.\nTypically usages are running tracking code functions.\n\n```js\n// js/services/log.js\n\nmodule.exports = {\n   log: function(text) {\n       console.log(text);\n   }\n};\n```\n\n### Initialize web.js and registering your components and services\n\n```js\nimport web from '@sulu/web';\nimport Test from './components/test-class'\nimport more from './components/test-function'\nimport Log from './services/log';\n\n// components\nweb.registerComponent('test', Test);\nweb.registerComponent('more', more, { defaultOption: 'defaultValue' });\n\n// services\nweb.registerService('logger', Log);\n```\n\n### Embedding in template\n\nFor efficient handling it's recommended to use it with a template engine like twig.\n\n#### Twig\n\nFor twig embedding see the [web component twig extension](https://github.com/sulu/web-twig).\n\n```twig\n\u003cbutton id=\"{{ prepare_component('test') }}\"\u003e\n    Say Hello\n\u003c/button\u003e\n\n\u003cbutton id=\"{{ prepare_component('test') }}\"\u003e\n    Say Bye\n\u003c/button\u003e\n\n{% do prepare_service('logger', 'log', ['Hello']) %}\n\n\u003cscript src=\"js/main.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    web.startComponents({{ get_components() }});\n    web.callServices({{ get_services() }});\n\u003c/script\u003e\n```\n\n#### HTML\n\nYou can also use without a template engine and by calling the startComponents and callServices.\n\n```html\n\u003cbutton id=\"test-1\"\u003e\n    Say Hello\n\u003c/button\u003e\n\n\u003cbutton id=\"test-2\"\u003e\n    Say Bye\n\u003c/button\u003e\n\n\u003cscript src=\"js/main.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    web.startComponents([\n        {name: 'test', id: 'test-1', { text: 'Hello' }}, \n        {name: 'test', id: 'test-2', { text: 'Bye' }},\n    ]);\n    \n    web.callServices([\n        {name: 'logger', func: 'log', args: ['Hello']},\n    ]);\n\u003c/script\u003e\n```\n\nThe `@sulu/web-js` provides some [`components`](packages/components)  and [`services`](packages/services)\nwhich can be registered in your container and be used.\n\n## Content Security Policy\n\nIf you want to work with CSP and avoid inline scripts you can just write the\ncomponents into a data attribute and read it from there. E.g.:\n\n```html\n\u003cscript id=\"app\" data-components=\"[\n        {name: 'test', id: 'test-1', { text: 'Hello' }}, \n        {name: 'test', id: 'test-2', { text: 'Bye' }},\n    ]\"\n\n    data-services=\"[\n        {name: 'logger', func: 'log', args: ['Hello']},\n    ]\"\n    \n    src=\"js/main.js\"\u003e\u003c/script\u003e\n```\n\nThen the data attribute can be read in the main.js and the components started there.\n\n## Web CSS\n\nBeside the `js` the `@sulu/web-js` is also shipped with some `scss` tools to make also creating css\neasier. They can be found in the [`scss`](packages/scss)  directory.\n\n## Version Update \u0026 Publish to NPM (docs for maintainers)\n\n### 1. Create release on github\n\nUpdate package.json version on master branch:\n\n```bash\ngit checkout master\ngit pull origin master\nnpm version [ major | minor | patch ] --no-git-tag-version\n# update version in changelog\ngit add .\ngit commit -m \"Release \u003cversion\u003e\"\ngit push origin master\n```\n\nGenerate changelog:\n\n```bash\ngithub_changelog_generator --future-release \u003cversion\u003e\n```\n\nCopy the text of the last release into github release description and create new release.\n\n### 2. Publish release\n\n```\ngit fetch --tags\ngit checkout \u003cversion\u003e\n# Test which files get packed by npm\nnpm pack --dry-run\n# Publish package\nnpm publish\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsulu%2Fweb-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsulu%2Fweb-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsulu%2Fweb-js/lists"}