@govela/create 0.0.0-stage → 0.7.0

package/templates/ssr/js/src/Counter.vela

@@ -0,0 +1,23 @@
+<script>
+  export let step = 1;
+
+  let count = $state(0);
+
+  function increment() {
+    count += step;
+    $$dispatch('change', count);
+  }
+</script>
+
+<template>
+  <button @click={increment}>
+    <slot>Count</slot>: {count}
+  </button>
+</template>
+
+<style>
+  button {
+    font: inherit;
+    padding: 0.5rem 1rem;
+  }
+</style>

package/templates/ssr/js/src/client.js

@@ -0,0 +1,5 @@
+// Hydrates the HTML the Go server rendered.
+import { hydrate } from '@govela/runtime/hydrate';
+import App from './App.vela';
+
+hydrate(App, document.getElementById('app'));

package/templates/ssr/ts/eslint.config.js

@@ -0,0 +1,14 @@
+import { defineConfig } from 'eslint/config';
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import vela from '@govela/eslint-plugin';
+
+export default defineConfig(
+  { ignores: ['dist/', 'out/', 'build/', 'src/_app/'] },
+  js.configs.recommended,
+  tseslint.configs.recommended,
+  vela.configs.recommended,
+  { files: ['src/**/*.ts', '**/*.vela/*.ts'], languageOptions: { globals: globals.browser } },
+  { files: ['*.config.js'], languageOptions: { globals: globals.node } },
+);

package/templates/ssr/ts/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "__NAME__",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev:vela": "vela --watch",
+    "dev:server": "go run ./cmd/server -dev http://localhost:5173",
+    "check": "vela check --project src --types --ssr",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "build": "vela && vite build && go build -o build/server ./cmd/server",
+    "start": "./build/server"
+  },
+  "dependencies": {
+    "@govela/runtime": "__VERSION__"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@govela/compiler": "__VERSION__",
+    "@govela/eslint-plugin": "__VERSION__",
+    "@govela/testing": "__VERSION__",
+    "@govela/unplugin": "__VERSION__",
+    "eslint": "^10.14.0",
+    "globals": "^17.0.0",
+    "happy-dom": "^21.0.4",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.72.1",
+    "vite": "^8.3.5",
+    "vitest": "^5.1.0"
+  }
+}

package/templates/ssr/ts/src/App.vela

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import Counter from './Counter.vela';
+
+  export let title: string = 'Vela';
+
+  let total = $state(0);
+
+  function changed(event: CustomEvent<number>): void {
+    total = event.detail;
+  }
+</script>
+
+<template>
+  <main>
+    <h1>{title}</h1>
+    <Counter :step={1} @on:change={changed}>Clicks</Counter>
+    <p class="total">Total: {total}</p>
+  </main>
+</template>
+
+<style>
+  main {
+    font-family: system-ui, sans-serif;
+    max-width: 32rem;
+    margin: 4rem auto;
+  }
+</style>

package/templates/ssr/ts/src/Counter.test.ts

@@ -0,0 +1,20 @@
+import { expect, test } from 'vitest';
+import { fireEvent, render } from '@govela/testing';
+import Counter from './Counter.vela';
+
+test('counts by its step and reports the count', async () => {
+  const counts: number[] = [];
+  const { container } = render(Counter, {
+    props: { step: 2 },
+    slots: { default: 'Clicks' },
+    events: { change: (event) => counts.push(event.detail) },
+  });
+  const button = container.querySelector('button')!;
+  expect(button.textContent).toBe('Clicks: 0');
+
+  await fireEvent.click(button);
+  await fireEvent.click(button);
+
+  expect(button.textContent).toBe('Clicks: 4');
+  expect(counts).toEqual([2, 4]);
+});

package/templates/ssr/ts/src/Counter.vela

@@ -0,0 +1,27 @@
+<script lang="ts">
+  interface $$Events {
+    change: number;
+  }
+
+  export let step: number = 1;
+
+  let count = $state(0);
+
+  function increment(): void {
+    count += step;
+    $$dispatch('change', count);
+  }
+</script>
+
+<template>
+  <button @click={increment}>
+    <slot>Count</slot>: {count}
+  </button>
+</template>
+
+<style>
+  button {
+    font: inherit;
+    padding: 0.5rem 1rem;
+  }
+</style>

package/templates/ssr/ts/src/client.ts

@@ -0,0 +1,5 @@
+// Hydrates the HTML the Go server rendered.
+import { hydrate } from '@govela/runtime/hydrate';
+import App from './App.vela';
+
+hydrate(App, document.getElementById('app')!);

package/templates/ssr/ts/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "erasableSyntaxOnly": true,
+    "allowImportingTsExtensions": true,
+    "useDefineForClassFields": true,
+    "skipLibCheck": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["@govela/runtime/ambient"]
+  },
+  "include": ["src"]
+}