feat: Adopt new vite-plugin changes

[dawsontoth]

This consumes HarperFast/vite-plugin#10

[dawsontoth]

All the failures are expected -- I haven't published the vite-plugin for it yet, though I've tested things locally and with a beta tag.

[gemini-code-assist]

Code Review

This pull request introduces server-side rendering (SSR) templates for React and Vue in both JavaScript and TypeScript variants, updating framework constants, help messages, tests, and shared template scripts. It also simplifies the deployment process for existing React templates. The review feedback highlights a critical runtime issue where __dirname is used in ES modules within the Vite configurations, which should be replaced with import.meta.dirname. Additionally, the non-TypeScript React and Vue SSR templates should be cleaned up to remove accidental TypeScript references, such as logos, documentation links, and headings.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

In ES modules ("type": "module"), __dirname is not defined and will throw a ReferenceError at runtime. Since this project targets Node.js 20.11.0+ (as per engines field and Node 24 .nvmrc), we should use import.meta.dirname instead of __dirname for robust path resolution, matching how it is done in the Vue templates.

Suggested change

	resolve: {
	alias: {
	'@': path.resolve(__dirname, './src'),
	},
	},
	resolve: {
	alias: {
	'@': path.resolve(import.meta.dirname, './src'),
	},
	},

[gemini-code-assist]

In ES modules ("type": "module"), __dirname is not defined and will throw a ReferenceError at runtime. Since this project targets Node.js 20.11.0+ (as per engines field and Node 24 .nvmrc), we should use import.meta.dirname instead of __dirname for robust path resolution, matching how it is done in the Vue templates.

Suggested change

	resolve: {
	alias: {
	'@': path.resolve(__dirname, './src'),
	},
	},
	resolve: {
	alias: {
	'@': path.resolve(import.meta.dirname, './src'),
	},
	},

[gemini-code-assist]

This is the non-TypeScript React SSR template, but it imports the TypeScript logo, links to TypeScript documentation, and displays 'Vite + TypeScript + React' in the heading. Let's clean this up to only reference React and Vite.

import reactLogo from '/react.svg';
import viteLogo from '/vite.svg';
import { useCallback, useState } from 'react';
import { increment } from './counter.js';

export function App() {
	const [counter, setCounter] = useState(0);
	const countUp = useCallback(() => {
		setCounter(counter => increment(counter));
	}, []);

	return (
		<>
			<div>
				<a href="https://vite.dev" target="_blank" rel="noopener noreferrer">
					<img src={viteLogo} className="logo" alt="Vite logo" />
				</a>
				<a href="https://react.dev/" target="_blank" rel="noopener noreferrer">
					<img src={reactLogo} className="logo react" alt="React logo" />
				</a>
				<h1>Vite + React</h1>
				<p>Wow, look at this!</p>
				<div className="card">
					<button id="counter" type="button" onClick={countUp}>
						count is {counter}
					</button>
				</div>
			</div>
		</>
	);
}

[gemini-code-assist]

This is the non-TypeScript Vue SSR template, but it imports the TypeScript logo, links to TypeScript documentation, and displays 'Vite + TypeScript + Vue' in the heading. Let's clean this up to only reference Vue and Vite.

<script setup>
import viteLogo from '/vite.svg';
import vueLogo from '/vue.svg';
import { ref } from 'vue';
import { increment } from './counter.js';

const counter = ref(0);
const countUp = () => {
	counter.value = increment(counter.value);
};
</script>

<template>
  <div>
    <a href="https://vite.dev" target="_blank" rel="noopener noreferrer">
      <img :src="viteLogo" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">
      <img :src="vueLogo" class="logo vue" alt="Vue logo" />
    </a>
    <h1>Vite + Vue</h1>
    <p>Wow, look at this!</p>
    <div class="card">
      <button id="counter" type="button" @click="countUp">
        count is {{ counter }}
      </button>
    </div>
  </div>
</template>