Skip to content

Instantly share code, notes, and snippets.

@crutchcorn
Created June 4, 2023 16:07
Show Gist options
  • Save crutchcorn/fd8320891c8113b6f07d38b3c2f7472f to your computer and use it in GitHub Desktop.
Save crutchcorn/fd8320891c8113b6f07d38b3c2f7472f to your computer and use it in GitHub Desktop.
Weird framework idea
<button data-on-click="updateCount()">Count</button>
<p>Count: {{count.value}}</p>
<p>Double: {{double.value}}</p>
<p data-if="count.value % 2 === 0">{{count.value}} is even</p>
<p data-if="count.value % 2 !== 0">{{count.value}} is odd</p>
<Child/>
import {createState, Component, registerComponent} from "./framework.ts";
@Component({
selector: "App",
templateUrl: "./app.component.html",
imports: [
ChildComponent
]
})
function AppComponent() {
// Setup function only runs once
let count = createState(
0
);
effect(() => {
document.title = `Count: ${count.value}`;
})
const double = computed(() => count.value * 2);
function updateCount() {
count.value++;
}
return {
count,
double,
updateCount
}
}
registerComponent(AppComponent);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment