https://github.com/wavemaker/webcomponents-cli
A CLI to convert Wavemaker Prefabs to WebComponents
https://github.com/wavemaker/webcomponents-cli
cli prefabs wavemaker webcomponents
Last synced: 12 months ago
JSON representation
A CLI to convert Wavemaker Prefabs to WebComponents
- Host: GitHub
- URL: https://github.com/wavemaker/webcomponents-cli
- Owner: wavemaker
- Created: 2024-05-20T08:14:17.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-03T09:31:00.000Z (12 months ago)
- Last Synced: 2025-04-03T10:32:33.751Z (12 months ago)
- Topics: cli, prefabs, wavemaker, webcomponents
- Language: JavaScript
- Homepage:
- Size: 10.3 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# webcomponents-cli
A CLI to convert [**WaveMaker**](https://www.wavemakeronline.com/) Prefabs to [**WebComponents**](https://www.webcomponents.org/)
## Usage
The CLI requires & prompts the user for WaveMaker Prefab project path(Exported from WaveMaker).
The CLI can take them as paramaters,
* `-s | --prefab-project-path`
### **npx**
The CLI can be invoked directly without installation using `npx` &
will ensure it executes the latest version available.
```
npx @wavemaker/webcomponents-cli -s /path/to/prefab/project
```
# Web Component Usage Guide
## Accessing Properties, Methods, and Events
All properties, methods, and events are attached to the web component's DOM element. To interact with the component, you must first select the element in the DOM.
```
const webcomponent = .querySelector('webcomp-tagname');
```
### Accessing Properties
You can retrieve or modify properties using:
```
webcomponent.propname;
```
### Calling Methods
Invoke methods using:
```
webcomponent.methodname();
```
### Listening to Events
To handle events, use the standard addEventListener method:
```
webcomponent.addEventListener('eventname', callBackMethod);
```
### Ensuring Web Component Initialization
The web component may not be ready immediately. To ensure you access properties, methods and events only after initialization, listen for the 'init' event:
```
webcomponent.addEventListener('init', () => {
console.log('Web component initialized');
});
```
This ensures that your interactions with the web component happen at the right time.