htmv 0.0.44 → 0.0.45

package/README.md

@@ -108,6 +108,55 @@ However, note that if you have changed the name of your folders HTMV will be una
 bunx htmv@latest gen view MyCoolView --path cool_stuff/my_custom_views_folder
 ```
 
+# Interpolation
+As mentioned briefly at the start of the docs. One of HTMV's main features is interpolation.
+
+What's that? Put simply, have a value on the backend you wish to show when rendering the view? Just use interpolation!
+
+Here's a simple example which lets you randomly show different strings on page load:
+```ts
+// index.ts route
+import { view } from 'htmv'
+
+export default () => {
+	const messages = ["Welcome back!", "How was your day?", "We're glad you're back."]
+
+	return view('example', {
+		message: getRandomValue(messages) // the message variable will get sent to the view for you to use freely.
+	})
+}
+
+function getRandomValue(arr: Array) {
+	return arr[Math.floor(Math.random() * arr.length)]
+}
+```
+```html
+<!-- example.html view -->
+<p>{message}</p> <!-- here we are accessing the message variable -->
+```
+
+# Attribute binding
+Although being able to interpolate values is nice, sometimes you need *just a bit* more than that.
+
+For example, let's say you have a task you wish to show if it's done or not:
+
+The first step would be to pass the `{task.done}` value to the view.
+
+After that, you should have an `<input type="checkbox">` element inside your view.
+
+Next to that, one would think *"I'll just add a checked={task.done} attribute to it!"*
+
+Like so: `<input type="checkbox" checked={task.done}>`
+
+However, on opening your web page you'll realize the input is always checked. No matter whether `task.done` is truthy or not. This is because for attributes like `checked`, HTML doesn't care if the value for the attribute is truthy or not. It only checks if the attribute is present or not. Therefore, it is impossible to solve this with simple interpolation.
+
+For this, you'll need attribute binding. And HTMV has got your back! Simply add a `:` before the attribute. That's it!
+
+`<input type="checkbox" :checked={task.done}>`
+
+This tells HTMV's compiler: *"Don't add the attribute AND value, just add the attribute alone IF the value is truthy!"* 
+
+
 # Hot reloading
 Having to restart the server every time you make a change can be quite tedious. HTMV takes care of this thanks to Bun. Just develop with `bun dev` and it should work out of the box! Note that this does not include hot reloading in the browser. As of now, you have to refresh the page to see new changes. It doesn't update in real time.
 

package/dist/cli/commands/new.js

@@ -65,6 +65,11 @@ export default async (_params: RouteParams) => {
     await runCommand(`npm pkg set scripts.start="bun index.ts"`, {
         cwd: fullPath,
     });
+    console.log("6. Rewriting tsconfig.json...");
+    const tsconfig = await fs.readFile(path.join(fullPath, "tsconfig.json"), "utf-8");
+    const tsconfigJson = JSON.parse(tsconfig);
+    tsconfigJson.exclude = ["public"];
+    fs.writeFile(path.join(fullPath, "tsconfig.json"), JSON.stringify(tsconfigJson, null, 2));
     console.log(`All done! Project ${name} created.`);
     console.log(`Now run cd ${name} and start building your next big project!`);
 };

package/dist/compiler/parser.js

@@ -79,12 +79,14 @@ export function parse(tokens) {
                     text: `<${tag} `,
                 });
                 let nextToken = tokens[i];
-                while (nextToken?.type === "arguments") {
-                    parseArgs(nextToken.value);
-                    i++;
-                    nextToken = tokens[i];
-                }
-                while (nextToken?.type === "attr-binding") {
+                while (nextToken?.type === "arguments" ||
+                    nextToken?.type === "attr-binding") {
+                    if (nextToken.type === "arguments") {
+                        parseArgs(nextToken.value);
+                        i++;
+                        nextToken = tokens[i];
+                        continue;
+                    }
                     nodes.push({
                         type: "attr-binding",
                         name: nextToken.name,

package/package.json

@@ -2,7 +2,7 @@
 	"name": "htmv",
 	"main": "dist/index.js",
 	"type": "module",
-	"version": "0.0.44",
+	"version": "0.0.45",
 	"devDependencies": {
 		"@biomejs/biome": "2.3.3",
 		"@types/bun": "latest"
@@ -21,7 +21,11 @@
 	"scripts": {
 		"build": "tsc",
 		"lint": "biome check",
-		"prepublishOnly": "npm run build"
+		"prepublishOnly": "bun run build",
+		"test": "bun test",
+		"test:gen:tokenizer": "bun run src/compiler/tests/tokenizer/gen.ts",
+		"test:gen:renderer": "bun run src/compiler/tests/renderer/gen.ts",
+		"test:gen:parser": "bun run src/compiler/tests/parser/gen.ts"
 	},
 	"repository": {
 		"type": "git",