Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: rename @init to @let #16

Merged
merged 1 commit into from
Apr 12, 2024
Merged

refactor: rename @init to @let #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions dist/kasper.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/kasper.min.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions live/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,14 @@
</div>
<div class="flex-grow bg-gray-700 p-6">
<div @if="post.value && user.value">
<kvoid @init="u = user.value">
<kvoid @let="u = user.value">
<div class="text-lg">Author</div>
<div class="flex flex-col pb-4">
<div class="text-lg font-bold">{{u.name}}</div>
<div class="text-sm text-gray-400">{{u.email}}</div>
</div>
</kvoid>
<kvoid @init="p = post.value">
<kvoid @let="p = post.value">
<div class="text-2xl font-bold">{{p.title}}</div>
<div class="text-sm text-gray-400">{{p.body}}</div>
</kvoid>
Expand Down
6 changes: 3 additions & 3 deletions live/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ <h4>Hobbies ({{person.hobbies.length}}):</h4>
</div>

<!-- evaluating code on element creation -->
<div @init="student = {name: person.name, degree: 'Masters'}; console.log(student.name)">
<div @let="student = {name: person.name, degree: 'Masters'}; console.log(student.name)">
{{student.name}}
</div>

Expand All @@ -67,15 +67,15 @@ <h4>Hobbies ({{person.hobbies.length}}):</h4>
</span>

<!-- while loop -->
<span @init="index = 0">
<span @let="index = 0">
<span @while="index < 3">
{{index = index + 1}},
</span>
</span>

<!-- void elements -->
<div>
<kvoid @init="index = 0">
<kvoid @let="index = 0">
<kvoid @while="index < 3">
{{index = index + 1}}
</kvoid>
Expand Down
33 changes: 31 additions & 2 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,35 @@ The template language should be cohesive and clean, ideally with no compromises
- html parser
- javascript like syntax parser and interpreter
- template renderer
- re-render on state update

## Getting started

To use kasper you will need to:

- Include the `kasper.js`.
- Add a `<template>` element
- Add a class that extends from `KasperApp`
- Render the app by calling `Kasper`

```
<html>
<head>
<script src="kasper.min.js"></script>
</head>
<body>
<template>
<div>{{myAppName}}</div>
</template>
<script>
class MyApp extends KasperApp {
myAppName = "MyAppName"
}
Kasper(MyApp);
</script>
</body>
</html>
```

## Conditional expression

Expand All @@ -41,12 +70,12 @@ The template language should be cohesive and clean, ideally with no compromises
</ul>
```

## Init expression
## Let expression

Evaluated during element creation

```
<div @init="student = {name: person.name, degree: 'Masters'}; console.log(student.name)">
<div @let="student = {name: person.name, degree: 'Masters'}; console.log(student.name)">
{{student.name}}
</div>
```
Expand Down
8 changes: 4 additions & 4 deletions src/transpiler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ export class Transpiler implements KNode.KNodeVisitor<void> {
this.interpreter.scope = originalScope;
}

private doInit(init: KNode.Attribute, node: KNode.Element, parent: Node) {
private doLet(init: KNode.Attribute, node: KNode.Element, parent: Node) {
const originalScope = this.interpreter.scope;
this.interpreter.scope = new Scope(originalScope);
this.execute(init.value);
Expand Down Expand Up @@ -210,9 +210,9 @@ export class Transpiler implements KNode.KNodeVisitor<void> {
continue;
}

const $init = this.findAttr(node as KNode.Element, ["@init"]);
if ($init) {
this.doInit($init, node as KNode.Element, parent);
const $let = this.findAttr(node as KNode.Element, ["@let"]);
if ($let) {
this.doLet($let, node as KNode.Element, parent);
continue;
}
}
Expand Down
Loading