https://github.com/ccmjs/hello
Minimal ccmjs component example that renders a configurable greeting.
https://github.com/ccmjs/hello
ccmjs component example javascript web-components
Last synced: 2 days ago
JSON representation
Minimal ccmjs component example that renders a configurable greeting.
- Host: GitHub
- URL: https://github.com/ccmjs/hello
- Owner: ccmjs
- License: mit
- Created: 2025-12-28T16:45:29.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-03-22T11:44:24.000Z (12 days ago)
- Last Synced: 2026-03-22T12:00:11.210Z (12 days ago)
- Topics: ccmjs, component, example, javascript, web-components
- Language: JavaScript
- Homepage: https://ccmjs.github.io/hello/
- Size: 47.9 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ccmjs Hello Component
A minimal example component for the **ccmjs framework**.
This component renders a simple greeting using a configurable name.
## 🚀 Quick Start
Include ccmjs and start the component:
```html
ccm.start("./ccm.hello.mjs", {
name: "Mika"
}, document.body);
```
## 💡 Example Output
```
Hello Mika
```
## ⚙️ Configuration
Configuration is defined directly in the component source code.
Open `ccm.hello.mjs` to see all available configuration options and their descriptions.
This follows the ccmjs principle of **code transparency**:
all configuration is documented where it is defined.
## 📦 Usage with CDN (versioned)
```html
ccm.start("https://cdn.jsdelivr.net/gh/ccmjs/hello@v1.0.1/ccm.hello-1.0.1.min.mjs", { name: "Mika" }, document.body);
```
## 🧩 Component Structure
A ccmjs component exports a `component` object:
```js
export const component = {
name: "hello",
ccm: "https://ccmjs.github.io/framework/ccm.js",
config: {
name: "World"
},
Instance: function () {
this.start = async () => {
this.element.innerHTML = "Hello " + this.name;
};
}
};
```
## 🔍 Code Transparency
Each ccmjs component is a standalone file that can be inspected at runtime.
There is no build step, bundling, or hidden abstraction layer.
You can always:
- read the original source code
- understand how the component works
- inspect it directly in the browser (via source maps)
## 📚 Learn More
- ccmjs Framework: https://github.com/ccmjs/framework
- Documentation: https://github.com/ccmjs/framework/wiki
## 📄 License
MIT License