You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: readme.md
+60-42
Original file line number
Diff line number
Diff line change
@@ -1,39 +1,51 @@
1
1
# Kasper-js 1.0.1
2
2
3
-
This is a work in progress of a javascript html template parser and renderer
3
+
**Kasper-js** is a work-in-progress JavaScript HTML template parser and renderer designed to help create and learn core mechanics of modern JavaScript frameworks.
4
4
5
5
## > [Try it out in playground!](https://eugenioenko.github.io/kasper-js/live/)
6
6
7
7
Here you can find a small demo of Kanban board done with kasper-js
Kasper-js aims to bridge the gap between simple templating engines and full-fledged JavaScript frameworks by providing a lightweight, extensible solution that emphasizes performance and developer experience. As web applications continue to evolve, the need for flexible and efficient frameworks has never been greater.
14
+
15
+
## Project Goals
16
+
The primary goal of Kasper-js is to create a comprehensive modern JavaScript framework. This includes:
17
+
18
+
- Developing a JavaScript HTML template parser and view renderer engine.
19
+
- Establishing a base for a full JavaScript framework, including components, dependency injection, and build tools.
20
+
- Gaining insights into the complexities of framework development through research and practical implementation.
14
21
15
-
Realistic goal is to write a javascript template parser and use it later to create a base for a javascript framework (components, dependency injection, build, etc..) and learn, research and understand the complexity of the task.
16
22
17
23
## Template syntax goals
18
24
19
-
Kasper's template syntax should always be a valid html syntax. Any html editor should work correctly with it.
20
-
The template language should be cohesive and clean, ideally with no compromises
25
+
Kasper's template syntax aims to maintain valid HTML syntax, ensuring compatibility with any HTML editor. The syntax is designed to be:
26
+
27
+
- Cohesive and clean.
28
+
- Intuitive with minimal compromises.
21
29
22
-
## Implemented so far
30
+
## Best Practices
23
31
24
-
- html parser
25
-
- javascript like syntax parser and interpreter
26
-
- template renderer
27
-
- re-render on state update
32
+
The framework adheres to the following best practices:
33
+
-**Modular Design**: Each component is encapsulated, promoting reusability.
34
+
-**Separation of Concerns**: Logic is separated from presentation, enhancing readability and maintainability.
28
35
29
-
## Getting started
36
+
## Features Implemented So Far
30
37
31
-
To use kasper you will need to:
38
+
- HTML parser
39
+
- JavaScript-like syntax parser and interpreter
40
+
- Template renderer
41
+
- Re-rendering on state updates
32
42
33
-
- Include the `kasper.js`.
34
-
- Add a `<template>` element
35
-
- Add a class that extends from `KasperApp`
36
-
- Render the app by calling `Kasper`
43
+
To use Kasper, follow these steps:
44
+
45
+
1. Include the `kasper.js` script in your HTML file.
46
+
2. Create a `<template>` element for your UI.
47
+
3. Extend the `KasperApp` class to create your application.
48
+
4. Render the app by calling `Kasper`.
37
49
38
50
```
39
51
<html>
@@ -54,6 +66,7 @@ To use kasper you will need to:
54
66
</html>
55
67
```
56
68
69
+
57
70
## Conditional expression
58
71
59
72
```
@@ -106,40 +119,45 @@ Evaluates the expression to string and inserts it into the dom as a TextNode
The **Kasper** expression interpreter is designed to emulate basic JavaScript expressions, providing a versatile framework for template rendering and dynamic content management. It allows developers to use familiar JavaScript syntax and constructs, enhancing the functionality and flexibility of the templates.
116
125
117
-
`identifier [operator] expression;`
118
-
Valid operators are: `= += -= *= /=`
119
126
120
-
```
121
-
number = 22;
122
-
list = [1, 2, "hello"];
123
-
dict = {"green": "#00FF00 };
124
-
text += "Hello World";
125
-
```
127
+
## Supported JavaScript Expressions
126
128
127
-
## Binary expression
129
+
Currently, the interpreter supports the following expressions:
-**Variable**: Represents a variable that can store values.
152
+
-**Void**: Represents an expression that does not return a value.
131
153
132
-
```
133
-
text + list[0] * dict.value;
134
-
```
154
+
### Future Enhancements
135
155
136
-
## Function call expression
156
+
Future updates will focus on expanding the capabilities of the expression interpreter, incorporating additional expressions and features to enhance the framework's power and usability.
137
157
138
-
`identifier(arg*);`
158
+
## Testing
139
159
140
-
```
141
-
console.log('something');
142
-
```
160
+
Kasper-js employs **Jasmine** for unit testing to ensure code reliability and maintainability. The tests are organized in the `/specs` folder, allowing for easy navigation and management of test cases. However, the current test coverage needs improvement, and additional tests are encouraged to enhance the robustness of the framework.
0 commit comments