VanJS – A no-JSX framework based on vanilla JavaScript

Post by pekim » Thu, Dec 21, 2023, 12:41 PM UTC

satvikpendem wrote: post #141

simonw wrote: post #106

Earlier quoted context omitted.

Not needing to use a transpiler is genuinely the thing that excites me most about VanJS. If you're not a daily JavaScript developer, any form of transpiler / build mechanism seems almost guaranteed to break in the gaps between when you are working on a specific project. The projects I have that are transpiler/build free are SO MUCH more pleasant for me to intermittently hack on!

I use TypeScript exclusively over Javascript so being pure JS is a con not a pro to me.

Post by taoxin » Thu, Dec 21, 2023, 3:01 PM UTC

seanlaff wrote: post #160

This is cool, though I think a table-stakes example that is missing is how to do a network request. I see the stargazers example but that entire component is awaited, which doesn't mirror the common case of async fetch in response to user input, in which the response is fed to sub-components. The stargazer example leaves me with questions like- are components both async and non-async? What if the component re-renders…

Post by seanlaff » Thu, Dec 21, 2023, 7:03 PM UTC

taoxin wrote: post #163

seanlaff wrote: post #160

This is cool, though I think a table-stakes example that is missing is how to do a network request. I see the stargazers example but that entire component is awaited, which doesn't mirror the common case of async fetch in response to user input, in which the response is fed to sub-components. The stargazer example leaves me with questions like- are components both async and non-async? What if the component re-renders…

Is this is what you are looking for? https://vanjs.org/vanui#await

    import { useEffect, useState } from "react";

    const GithubUser = ({ login, avatar_url, html_url }) => (
      
        
        {login}
      
    );

    export function App() {
      const [stargazerResp, setStargazerResp] = useState([]);
      const [repo, setRepo] = useState("vanjs-org/van");

      useEffect(() => {
        fetch(`https://api.github.com/repos/${repo}/stargazers?per_page=5`)
          .then((r) => r.json())
          .then((r) => Array.isArray(r) ? setStargazerResp(r) : setStargazerResp([]));
      }, [repo]);

      return (
        
           setRepo(e.target.value)} />
          
            {stargazerResp.map((s) => (
              
                
              
            ))}
            
        
      );
    }

Post by seanlaff » Thu, Dec 21, 2023, 9:22 PM UTC

taoxin wrote: post #166

seanlaff wrote: post #165

Earlier quoted context omitted.

Hmm, maybe! Is that the idiomatic way to do async? I was thinking something along the lines of this, which react devs will have written a variation of plenty of times :) import { useEffect, useState } from "react"; const GithubUser = ({ login, avatar_url, html_url }) => ( {login} ); export function App() { const [stargazerResp, setStargazerResp] = useState([]); const [repo, setRepo] = useState("vanjs-org/van"); useEf…

You can do with VanJS in this way as well. `set...` functions in React map to `....val = ...` in VanJS (which I think is more intuitive). But the `Await` component is a good abstraction so that you can specify what to show when the resources are being fetched and what to show when there are errors while fetching the resources.

    const Stargazers = () => {
      const stargazers = van.state([]);
      fetch(`https://api.github.com/repos/vanjs-org/van/stargazers?per_page=5`)
        .then((r) => r.json())
        .then((r) => stargazers.val = r);
      
      return ul(
        stargazers.val.map((s) => li(s.login))
      );
    };

Post by taoxin » Thu, Dec 21, 2023, 9:54 PM UTC

seanlaff wrote: post #167

taoxin wrote: post #166

Earlier quoted context omitted.

You can do with VanJS in this way as well. `set...` functions in React map to `....val = ...` in VanJS (which I think is more intuitive). But the `Await` component is a good abstraction so that you can specify what to show when the resources are being fetched and what to show when there are errors while fetching the resources.

Would we expect the list to re-render once the fetch finishes? This may just be years of react poisoning my brain const Stargazers = () => { const stargazers = van.state([]); fetch(`https://api.github.com/repos/vanjs-org/van/stargazers?per_page=5`) .then((r) => r.json()) .then((r) => stargazers.val = r); return ul( stargazers.val.map((s) => li(s.login)) ); };