https://github.com/hudson-newey/2.js
A library to bring reactive state to JavaScript with minimal assumptions, and overhead
https://github.com/hudson-newey/2.js
framework framwork-javascript javascript javascript-library js library ts typescript web
Last synced: 6 months ago
JSON representation
A library to bring reactive state to JavaScript with minimal assumptions, and overhead
- Host: GitHub
- URL: https://github.com/hudson-newey/2.js
- Owner: hudson-newey
- License: mit
- Created: 2023-11-11T01:57:11.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-01T11:34:38.000Z (over 1 year ago)
- Last Synced: 2025-01-05T23:50:46.698Z (about 1 year ago)
- Topics: framework, framwork-javascript, javascript, javascript-library, js, library, ts, typescript, web
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@hudson-newey/2.js
- Size: 365 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 2.js
A highly efficient library to bring reactive state to JavaScript with minimal overhead and bundle size that can be imported via HTML `` tags.
### Minimal Increment-Decrement Counter
```html
<p>Count: <span id="count-output"></span></p>
<button onclick="page['#count-output']++">Increment</button>
<button onclick="page['#count-output']--">Decrement</button>
<script>
const page = new Component({
"#count-output": 0,
});
```
OR
```html
Count:
Increment
Decrement
const page = new Component({
count: 0,
});
```
### Collapsable Elements
```html
Click Me
const app = new Component({
collapsableElement: null,
toggleElement: () =>
(app.collapsableElement = app.collapsableElement
? null
: "<h1>Hello World</h1>"),
});
```
### For Loops
```html
My Shopping List
const shoppingItems = [
"bread",
"milk",
"eggs",
"cheese",
"butter",
"chicken",
];
const app = new Component({
shoppingListTemplate: `
<ul>
${map(shoppingItems, (item) => `<li>${item}</li>`)}
</ul>
`,
});
```
### Single Page Application (SPA)
```html
Home
About
const homePage = {
name: "Home",
description: "This is the home page",
};
const aboutPage = {
name: "About",
description: "About this company",
};
const app = new Component({
name: homePage.name,
description: homePage.description,
setPage: (value) => {
app.name = value.name;
app.description = value.description;
},
});
```
### Simple Todo App
```html
Add Todo Item
Add Todo Item
Todo Items
const app = new Component({
todoItems: [],
addTodoItem: () => {
if (!taskNameInput.value) return;
app.todoItems.push(taskNameInput.value);
// in the regular DOM model, whenever an element on the document is created with an id
// a variable is created in the global scope with the same name as the id
// this variable can be used to access the element directly without document.getElementById()
app.todoListTemplate = app.todoItems;
taskNameInput.value = "";
},
// this value has an "operator function"
// that means that any values assigned to it will be passed through the function first
// because this is technically a value, it can have DOM bindings
todoListTemplate: (incomingTodoItems) => `
<ul>
${map(app.todoItems, (item) => `<li>${item}</li>`)}
</ul>
`,
});
```