https://github.com/sulu/web-js
A js library for controlling your components from your templating engine like twig.
https://github.com/sulu/web-js
component component-library hacktoberfest javascript
Last synced: about 1 year ago
JSON representation
A js library for controlling your components from your templating engine like twig.
- Host: GitHub
- URL: https://github.com/sulu/web-js
- Owner: sulu
- License: mit
- Created: 2017-05-10T21:01:52.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2023-05-24T11:23:05.000Z (about 3 years ago)
- Last Synced: 2025-04-14T19:17:09.229Z (about 1 year ago)
- Topics: component, component-library, hacktoberfest, javascript
- Language: JavaScript
- Homepage:
- Size: 123 KB
- Stars: 21
- Watchers: 16
- Forks: 11
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/sulu/web-js/actions)
[](https://www.npmjs.com/package/@sulu/web)
[](https://github.com/sulu/web-js/blob/master/packages/core/core.js)
[](https://packagephobia.now.sh/result?p=@sulu/web)
# Web JS
The web-js in connection with [web component twig extension](https://github.com/sulu/web-twig)
gives you simple and efficient way to handle your javascript components over twig.
## Installation
**NPM**
```bash
# NPM:
npm install @sulu/web
# Yarn
yarn add @sulu/web
# pnpm
pnpm add @sulu/web
```
## Usage
### Create your first component
A component can be created using different JS patterns:
- [JS Class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
- [JS Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions)
- [Revealing pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript)
- [Prototype pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#prototypepatternjavascript)
- and more which works with multiple instances
**Class Component**
```js
// js/components/test-class.js
export default class Test {
constructor(el, options) {
this.text = options.text;
el.onclick = this.say;
}
say() {
alert(this.text);
}
}
```
**Function Component**
```js
// js/components/test-function.js
export default function(el, options) {
el.onclick = function() {
alert(options.text);
};
}
```
### Create your first service
Sometimes you want just run js code which is not binded to a dom element for this services where created.
Typically usages are running tracking code functions.
```js
// js/services/log.js
module.exports = {
log: function(text) {
console.log(text);
}
};
```
### Initialize web.js and registering your components and services
```js
import web from '@sulu/web';
import Test from './components/test-class'
import more from './components/test-function'
import Log from './services/log';
// components
web.registerComponent('test', Test);
web.registerComponent('more', more, { defaultOption: 'defaultValue' });
// services
web.registerService('logger', Log);
```
### Embedding in template
For efficient handling it's recommended to use it with a template engine like twig.
#### Twig
For twig embedding see the [web component twig extension](https://github.com/sulu/web-twig).
```twig
Say Hello
Say Bye
{% do prepare_service('logger', 'log', ['Hello']) %}
web.startComponents({{ get_components() }});
web.callServices({{ get_services() }});
```
#### HTML
You can also use without a template engine and by calling the startComponents and callServices.
```html
Say Hello
Say Bye
web.startComponents([
{name: 'test', id: 'test-1', { text: 'Hello' }},
{name: 'test', id: 'test-2', { text: 'Bye' }},
]);
web.callServices([
{name: 'logger', func: 'log', args: ['Hello']},
]);
```
The `@sulu/web-js` provides some [`components`](packages/components) and [`services`](packages/services)
which can be registered in your container and be used.
## Content Security Policy
If you want to work with CSP and avoid inline scripts you can just write the
components into a data attribute and read it from there. E.g.:
```html
```
Then the data attribute can be read in the main.js and the components started there.
## Web CSS
Beside the `js` the `@sulu/web-js` is also shipped with some `scss` tools to make also creating css
easier. They can be found in the [`scss`](packages/scss) directory.
## Version Update & Publish to NPM (docs for maintainers)
### 1. Create release on github
Update package.json version on master branch:
```bash
git checkout master
git pull origin master
npm version [ major | minor | patch ] --no-git-tag-version
# update version in changelog
git add .
git commit -m "Release "
git push origin master
```
Generate changelog:
```bash
github_changelog_generator --future-release
```
Copy the text of the last release into github release description and create new release.
### 2. Publish release
```
git fetch --tags
git checkout
# Test which files get packed by npm
npm pack --dry-run
# Publish package
npm publish
```