https://github.com/kode-team/salang
SaLang : WebComponent Transpiler using HTML, JS, CSS
https://github.com/kode-team/salang
Last synced: over 1 year ago
JSON representation
SaLang : WebComponent Transpiler using HTML, JS, CSS
- Host: GitHub
- URL: https://github.com/kode-team/salang
- Owner: kode-team
- License: mit
- Created: 2023-12-19T04:41:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-08T01:18:47.000Z (over 2 years ago)
- Last Synced: 2025-02-14T18:54:04.643Z (over 1 year ago)
- Language: JavaScript
- Size: 91.8 KB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SaLang Programming Language
## Introduction
SaLang is a new programming language with unique syntax and features, specifically focused on simplifying the development and management of web components.
## Features
- Component-based architecture
- Concise and clear syntax
- Optimized for web development
## Installation
Instructions to install SaLang language.
```bash
```
## Usage
Basic usage of the SaLang language.
### Basic Structure
#### Components
```css
@component MyComponent {
// Contents of the component
}
```
#### State Management
```css
@state {
counter: 0;
isvisible: true;
}
```
#### Defining Attributes
```css
@attribute title: "Interactive Component";
```
#### Styling Components
```css
@style {
.my-class {
color: var(primaryColor);
}
}
```
#### Event Handling
```css
@event click on .my-button {
@js {
// Event handling logic
}
}
```
#### Templating
```css
@template {
div.my-component {
"Hello, world!"
}
}
```
#### Full Example
```css
@component ComplexComponent {
@state {
items: [];
selectedItem: null;
}
@attribute defaultColor: "blue";
@style {
.item {
color: var(defaultColor);
padding: 10px;
border: 1px solid black;
}
.selected {
background-color: yellow;
}
}
@function selectItem(itemId) {
@js {
this.selectedItem = this.items.find(item => item.id === itemId);
}
}
@event click on .item {
@js {
selectItem(var(itemId));
}
}
@template {
ul {
@repeat item in var(items) {
li.item(id: "item-" var(item.id)) {
"Item: " var(item.name)
}
}
}
}
}
```
## Contributing
Contributions to SaLang are welcome! Please read our [CONTRIBUTING.md](CONTRIBUTING.md) for details on how to contribute.
## License
This project is licensed under the [MIT License](LICENSE).