Proposal for a New JSX Programatic Directive: `<for>`

[allangomes]

I would like to propose the addition of a new JSX directive, <for>, which is inspired by Vue's v-for directive and designed to simplify iteration in JSX. Currently, JSX lacks a straightforward way to achieve looping and iteration similar to Vue's directives, such as v-for and v-if. This proposal aims to improve the developer experience by introducing a new directive for easy iteration in JSX.

Usage Example:

<for (item, key) of items>
  <div>{item.description}</div>
</for>

Transpilation:

The code above could be transpiled to something similar to the following JavaScript code:

items.map((item, key) => (
  <div>{item.description}</div>
))

Benefits:

• Simplifies and streamlines iteration in JSX, making it more expressive and readable.
• Reduces the need for additional code, improving developer productivity.
• Aligns with the user-friendly approach of Vue's directives.

Implementation Details:

This feature could be implemented by extending the JSX transpiler to recognize the <for> directive and generate the appropriate JavaScript code for iteration. The transpilation process would transform the JSX code into standard JavaScript, maintaining compatibility with the existing JSX ecosystem.

Community Feedback:

I would appreciate feedback from the community and contributors on whether they see value in adding this new directive to JSX. Any suggestions, concerns, or alternative approaches are welcome.

Thank you for considering this proposal. I look forward to discussing the potential inclusion of the <for> directive in JSX.

[allangomes]

the same could work to if, swich, etc.

if

const type = true
return (
  <if condition == "credit">
    // show when credit
  <if-else condition == "debit'>
    // show when debit
  <else>
    // show default
  <if>
)

swich

<swich condition>
  <case "credit">
     // show when credit
  </case>
  <case "debit">
     // show when debit
  </case>
  <default>
     // show default    
  </default>
</swich>

[Jacob-Lockwood]

This repo has nothing to do with the JSX syntax used by React, Solid, etc.

[allangomes]

wow, I think I got confused. Thanks @jacobofbrooklyn!

[sarf13]

/**

• v0 by Vercel.
• @see https://v0.dev/t/4siYXQ4GotD
• Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app */ import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea"

export default function Component() { return (

Portfolio

Home About Projects Contact

Toggle navigation

Hi, I'm John Doe

I'm a full-stack developer with a passion for creating beautiful and functional web applications.

Get in Touch

About Me

I'm a full-stack developer with over 5 years of experience in the industry. I specialize in building modern, responsive web applications using the latest technologies and best practices.

Skills

• React
• Node.js
• TypeScript
• SQL

Experience

• Full-stack Developer, Acme Inc. (2018 - present)
• Front-end Developer, Widgets Co. (2015 - 2018)

My Projects

Check out some of the projects I've worked on.

Project 1

A modern web application built with React and Node.js.

Project 2

A responsive e-commerce website built with Next.js.

Project 3

A mobile-first web application built with React Native.

Get in Touch

Have a project in mind? Let's chat!

<Button type="submit" className="w-full"> Submit </Button> </form> </div> </section> </main> <footer className="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t"> <p className="text-xs text-muted-foreground">© 2024 John Doe. All rights reserved.</p> <nav className="sm:ml-auto flex gap-4 sm:gap-6"> <Link href="#" className="text-xs hover:underline underline-offset-4" prefetch={false}> Privacy </Link> <Link href="#" className="text-xs hover:underline underline-offset-4" prefetch={false}> Terms </Link> </nav> </footer> </div> <p>) }</p> <p>function BriefcaseIcon(props) { return ( <svg {...props} xmlns="<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"</p> <blockquote> <path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" /> <rect width="20" height="14" x="2" y="6" rx="2" /> <p></svg> ) }</p> </blockquote> <p>function MenuIcon(props) { return ( <svg {...props} xmlns="<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"</p> <blockquote> <line x1="4" x2="20" y1="12" y2="12" /> <line x1="4" x2="20" y1="6" y2="6" /> <line x1="4" x2="20" y1="18" y2="18" /> <p></svg> ) }</p> </blockquote> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>