chore: prepare for new version

* update frontend packages
* fix typescript issues
* split backend and frontend
* prepare zig based backend

backend/.gitignore

@@ -0,0 +1 @@
+/zig-*

backend/build.zig

@@ -0,0 +1,70 @@
+const std = @import("std");
+
+// Although this function looks imperative, note that its job is to
+// declaratively construct a build graph that will be executed by an external
+// runner.
+pub fn build(b: *std.Build) void {
+    // Standard target options allows the person running `zig build` to choose
+    // what target to build for. Here we do not override the defaults, which
+    // means any target is allowed, and the default is native. Other options
+    // for restricting supported target set are available.
+    const target = b.standardTargetOptions(.{});
+
+    // Standard optimization options allow the person running `zig build` to select
+    // between Debug, ReleaseSafe, ReleaseFast, and ReleaseSmall. Here we do not
+    // set a preferred release mode, allowing the user to decide how to optimize.
+    const optimize = b.standardOptimizeOption(.{});
+
+    const exe = b.addExecutable(.{
+        .name = "backend",
+        // In this case the main source file is merely a path, however, in more
+        // complicated build scripts, this could be a generated file.
+        .root_source_file = .{ .path = "src/main.zig" },
+        .target = target,
+        .optimize = optimize,
+    });
+
+    // This declares intent for the executable to be installed into the
+    // standard location when the user invokes the "install" step (the default
+    // step when running `zig build`).
+    b.installArtifact(exe);
+
+    // This *creates* a Run step in the build graph, to be executed when another
+    // step is evaluated that depends on it. The next line below will establish
+    // such a dependency.
+    const run_cmd = b.addRunArtifact(exe);
+
+    // By making the run step depend on the install step, it will be run from the
+    // installation directory rather than directly from within the cache directory.
+    // This is not necessary, however, if the application depends on other installed
+    // files, this ensures they will be present and in the expected location.
+    run_cmd.step.dependOn(b.getInstallStep());
+
+    // This allows the user to pass arguments to the application in the build
+    // command itself, like this: `zig build run -- arg1 arg2 etc`
+    if (b.args) |args| {
+        run_cmd.addArgs(args);
+    }
+
+    // This creates a build step. It will be visible in the `zig build --help` menu,
+    // and can be selected like this: `zig build run`
+    // This will evaluate the `run` step rather than the default, which is "install".
+    const run_step = b.step("run", "Run the app");
+    run_step.dependOn(&run_cmd.step);
+
+    // Creates a step for unit testing. This only builds the test executable
+    // but does not run it.
+    const unit_tests = b.addTest(.{
+        .root_source_file = .{ .path = "src/main.zig" },
+        .target = target,
+        .optimize = optimize,
+    });
+
+    const run_unit_tests = b.addRunArtifact(unit_tests);
+
+    // Similar to creating the run step earlier, this exposes a `test` step to
+    // the `zig build --help` menu, providing a way for the user to request
+    // running the unit tests.
+    const test_step = b.step("test", "Run unit tests");
+    test_step.dependOn(&run_unit_tests.step);
+}

backend/src/main.zig

@@ -0,0 +1,24 @@
+const std = @import("std");
+
+pub fn main() !void {
+    // Prints to stderr (it's a shortcut based on `std.io.getStdErr()`)
+    std.debug.print("All your {s} are belong to us.\n", .{"codebase"});
+
+    // stdout is for the actual output of your application, for example if you
+    // are implementing gzip, then only the compressed bytes should be sent to
+    // stdout, not any debugging messages.
+    const stdout_file = std.io.getStdOut().writer();
+    var bw = std.io.bufferedWriter(stdout_file);
+    const stdout = bw.writer();
+
+    try stdout.print("Run `zig build test` to run the tests.\n", .{});
+
+    try bw.flush(); // don't forget to flush!
+}
+
+test "simple test" {
+    var list = std.ArrayList(i32).init(std.testing.allocator);
+    defer list.deinit(); // try commenting this out and see if zig detects the memory leak!
+    try list.append(42);
+    try std.testing.expectEqual(@as(i32, 42), list.pop());
+}

frontend/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "raffle-me-that",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check build-only",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@vueuse/core": "^10.4.0",
+    "@vueuse/head": "^2.0.0",
+    "crypto-random-string": "^5.0.0",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.5.0",
+    "@types/node": "^20.7.0",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/tsconfig": "^0.4.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.50.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.0.0",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vue-tsc": "^1.8.15"
+  }
+}

frontend/src/components/FormInput.vue

@@ -21,7 +21,7 @@ const emit = defineEmits<{
       class="border-2 border-indigo-500 bg-slate-900"
       :id="id"
       :value="modelValue"
-      @input="emit('update:modelValue', $event.target.value)"
+      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
     />
     <slot></slot>
   </label>

frontend/src/pages/Raffle.vue

@@ -31,33 +31,41 @@ function roll() {
 </script>
 
 <template>
-  <div class="w-full h-full">
-    <div class="flex flex-col justify-between items-center w-1/2 h-full">
-      <header>
-        <h1 class="my-8 text-2xl">{{ raffle.title }}</h1>
-      </header>
-      <button @click="roll" class="text-4xl">{{ rollRot === 0 ? 'Roll!' : 'Reset' }}</button>
-      <footer>
-        <p class="my-4">Some raffle description</p>
-      </footer>
+  <template v-if="raffle">
+    <div class="w-full h-full">
+      <div class="flex flex-col justify-between items-center w-1/2 h-full">
+        <header>
+          <h1 class="my-8 text-2xl">{{ raffle.title }}</h1>
+        </header>
+        <button @click="roll" class="text-4xl">{{ rollRot === 0 ? 'Roll!' : 'Reset' }}</button>
+        <footer>
+          <p class="my-4">Some raffle description</p>
+        </footer>
+      </div>
     </div>
-  </div>
-  <ol
-    class="pie w-96 h-96 border-2 border-black rounded-full bg-white/10 overflow-hidden transition-transform"
-    :style="`transition-duration: ${rollRot ? 30 : 1}s`"
-  >
-    <li v-for="item,i in items"
-      class="slice"
-      :style="`transform: rotate(${sliceRot * i}deg) skewY(${sliceSkew}deg)`"
+    <ol
+      class="pie w-96 h-96 border-2 border-black rounded-full bg-white/10 overflow-hidden transition-transform"
+      :style="`transition-duration: ${rollRot ? 30 : 1}s`"
     >
-    </li>
-    <li v-for="item,i in items"
-      class="label"
-      :style="`transform: rotate(${sliceRot * i + labelShift}deg)`"
-    >
-      {{ item }}
-    </li>
-  </ol>
+      <li v-for="item,i in items"
+        class="slice"
+        :style="`transform: rotate(${sliceRot * i}deg) skewY(${sliceSkew}deg)`"
+      >
+      </li>
+      <li v-for="item,i in items"
+        class="label"
+        :style="`transform: rotate(${sliceRot * i + labelShift}deg)`"
+      >
+        {{ item }}
+      </li>
+    </ol>
+  </template>
+  <template v-else>
+    <div class="flex flex-col justify-center items-center">
+      <strong>Sorry, I cannot find this raffle.</strong>
+      <router-link to="/">go back</router-link>
+    </div>
+  </template>
 </template>
 
 <style scoped>

frontend/src/types.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="vue/macros-global" />
+
 declare global {
   type Raffle = {
     id: string

frontend/tsconfig.config.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "extends": "@vue/tsconfig/tsconfig.json",
   "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
   "compilerOptions": {
     "composite": true,

frontend/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "compilerOptions": {
     "baseUrl": ".",

package.json

@@ -1,37 +0,0 @@
-{
-  "name": "raffle-me-that",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "dev": "vite",
-    "build": "run-p type-check build-only",
-    "preview": "vite preview",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
-  },
-  "dependencies": {
-    "@vueuse/core": "^9.9.0",
-    "@vueuse/head": "^1.0.22",
-    "crypto-random-string": "^5.0.0",
-    "vue": "^3.2.45",
-    "vue-router": "^4.1.6"
-  },
-  "devDependencies": {
-    "@rushstack/eslint-patch": "^1.1.4",
-    "@types/node": "^18.11.12",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^11.0.0",
-    "@vue/tsconfig": "^0.1.3",
-    "autoprefixer": "^10.4.13",
-    "eslint": "^8.22.0",
-    "eslint-plugin-vue": "^9.3.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
-    "tailwindcss": "^3.2.4",
-    "typescript": "~4.7.4",
-    "vite": "^4.0.0",
-    "vue-tsc": "^1.0.12"
-  }
-}