Ivy Demo Project Showcasing Handlebars.Net (JSON & HTML Mapping Examples)

[chaudhryharoon83]

This PR introduces a demo project built with Ivy to showcase the usage of Handlebars.Net for template mapping.
The project includes two sample applications:

1. JSON Template Mapping App

• Accepts a JSON template and a values object in JSON format.
• Maps the values into the template and renders the output.

2. HTML Template with Product Model

• Uses a custom Product model (Title, Category, Price).
• Takes input from the user and maps it into an HTML template.
• Generates and displays a list of products using the mapped templates.

[Copilot]

Pull Request Overview

This PR introduces a demo project showcasing Handlebars.Net integration with the Ivy framework. The demo includes two main applications: a JSON template mapping tool for dynamic template rendering with JSON data, and an HTML-based product list manager that demonstrates CRUD operations with Handlebars templates.

Key changes:

• Complete Ivy-based demo project setup with Handlebars.Net integration
• Two sample applications demonstrating different Handlebars.Net use cases
• Standard ASP.NET Core web project structure with necessary dependencies

Reviewed Changes

Copilot reviewed 16 out of 73 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
Ivy-HandleBars.csproj	Project configuration with Handlebars.Net and Ivy framework dependencies
Program.cs	Application entry point with Ivy server configuration and Chrome settings
Apps/JsonValueMappingApp.cs	JSON template mapping application with real-time rendering
Apps/ProductListApp.cs	Product list management with HTML template rendering
Apps/HelloApp.cs	Welcome application with basic Ivy framework demonstration
GlobalUsings.cs	Global using statements for Ivy framework components

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[rorychatt]

for code, recomendation is not to use regulat text inputs, use code input

@chaudhryharoon83

[rorychatt]

83k dif lines due to a lot of FE code. is this needed to be provided?

[chaudhryharoon83]

@rorychatt I updated the the code to use buit-in "ToCodeInput()" and "ToInput()" where needed.

But I could not understand what you meant in the above comment "83k dif lines due to a lot of FE code. is this needed to be provided?" can you please elaborate on that and give me the class reference that you are talking about.

[rorychatt]

Here are my concerns

[rorychatt]

@chaudhryharoon83

[chaudhryharoon83]

@rorychatt I removed those unused files

[rorychatt]

Hey.

You do not need to push ivy hello app example.
Only the project you had worked on.
Also I highly encourage you to check out the folder structure, right now it seems you have 1 unneccesary folder where you put everything. Compare it to other merged PR-s as inspiration

[Copilot]

Pull Request Overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The HTML template contains excessive blank lines that add no value and make the template harder to read. Consider removing the unnecessary empty lines to improve maintainability.

Suggested change

	{{#each products}}
	<div style='border: 1px solid #ccc; padding: 1rem; border-radius: 0.5rem; background-color: #f9f9f9;'>
	<h3 style='font-size: 1.25rem; font-weight: bold;'>{{Name}}</h3>
	<p style='color: #666;'>Category: {{Category}}</p>
	<p style='font-size: 1.1rem; color: #000;'>Price: ${{Price}}</p>
	</div>
	{{/each}}
	";
	{{#each products}}
	<div style='border: 1px solid #ccc; padding: 1rem; border-radius: 0.5rem; background-color: #f9f9f9;'>
	<h3 style='font-size: 1.25rem; font-weight: bold;'>{{Name}}</h3>
	<p style='color: #666;'>Category: {{Category}}</p>
	<p style='font-size: 1.1rem; color: #000;'>Price: ${{Price}}</p>
	</div>
	{{/each}}
	";

[rorychatt]

It is not idiomatic to inject HTML code like this. Use Ivy Widgets instead

[rorychatt]

Try not to inject HTML code for divs. Use Ivy Widgets instead

[chaudhryharoon83]

@rorychatt

1. I removed HTML template and replaced the it with Ivy Card() to show the product card.
2. To still showcase use of handlebars I used helpers to format price and map product created time

[rorychatt]

Final note from me is that you have an unneccessary folder

-> structure should be, like in all other folders

./project-name/project-files, not ./project-name/project-name/project-files

[chaudhryharoon83]

@rorychatt as per your last comment, I moved the project files from the sub-folder "Ivy-Handlebars" to root level.