use webgen's zod

deno.jsonc

@@ -1,9 +1,8 @@
 {
     "imports": {
-        "webgen/": "https://raw.githubusercontent.com/lucsoft/WebGen/0f7918a/",
+        "webgen/": "https://raw.githubusercontent.com/lucsoft/WebGen/e7cdd13/",
         // "webgen/": "../WebGen/",
         "std/": "https://deno.land/std@0.217.0/",
-        "zod/": "https://deno.land/x/zod@v3.22.4/",
         "shared/": "./pages/shared/"
     },
     "lock": false,

pages/_legacy/music/changeDrop.ts

@@ -1,7 +1,7 @@
 import { API } from "shared/mod.ts";
 import { stupidErrorAlert } from "shared/restSpec.ts";
 import { AdvancedImage, Box, Button, CenterV, DropAreaInput, DropDownInput, Empty, Grid, Horizontal, IconButton, Image, Label, MIcon, Spacer, TextInput, Validate, asState, createFilePicker, getErrorMessage } from "webgen/mod.ts";
-import zod, { ZodError } from "zod/index.ts";
+import { zod } from "webgen/zod.ts";
 import { templateArtwork } from "../../../assets/imports.ts";
 import genres from "../../../data/genres.json" with { type: "json" };
 import language from "../../../data/language.json" with { type: "json" };
@@ -11,9 +11,9 @@ import { uploadArtwork } from "./data.ts";
 
 export function ChangeDrop(drop: Drop) {
     const state = asState({
-        artworkClientData: <AdvancedImage | string | undefined>(drop.artwork ? <AdvancedImage>{ type: "direct", source: () => API.music.id(drop._id!).artwork().then(stupidErrorAlert) } : undefined),
+        artworkClientData: <AdvancedImage | undefined>(drop.artwork ? <AdvancedImage>{ type: "direct", source: () => API.music.id(drop._id!).artwork().then(stupidErrorAlert) } : undefined),
         loading: false,
-        validationState: <ZodError | undefined>undefined
+        validationState: <zod.ZodError | undefined>undefined
     });
 
     const { data, error, validate } = Validate(

pages/_legacy/music/changeSongs.ts

@@ -1,6 +1,6 @@
 import { API } from "shared/mod.ts";
 import { Box, Button, CenterV, Empty, Grid, Horizontal, Label, Spacer, Validate, asState, createFilePicker, getErrorMessage } from "webgen/mod.ts";
-import zod from "zod/index.ts";
+import { zod } from "webgen/zod.ts";
 import { Drop, song } from "../../../spec/music.ts";
 import { allowedAudioFormats } from "../helper.ts";
 import { uploadSongToDrop } from "./data.ts";

pages/_legacy/music/data.ts

@@ -58,7 +58,7 @@ export function uploadSongToDrop(state: StateHandler<{ songs: Song[]; artists: A
 }
 
 //is there a better way for those typings??
-export function uploadArtwork(id: string, file: File, artworkClientData: Reference<AdvancedImage | string | undefined>, loading: Reference<boolean>, artwork: Reference<string> | Reference<string | undefined>) {
+export function uploadArtwork(id: string, file: File, artworkClientData: Reference<AdvancedImage | undefined>, loading: Reference<boolean>, artwork: Reference<string> | Reference<string | undefined>) {
     const blobUrl = URL.createObjectURL(file);
     artworkClientData.setValue({ type: "uploading", filename: file.name, blobUrl, percentage: 0 });
     loading.setValue(true);
@@ -75,7 +75,7 @@ export function uploadArtwork(id: string, file: File, artworkClientData: Referen
             },
             credentials: () => API.getToken(),
             backendResponse: (id) => {
-                artworkClientData.setValue(blobUrl);
+                artworkClientData.setValue({ type: "direct", source: async () => await file });
                 artwork.setValue(id);
                 loading.setValue(false);
             },

pages/admin/dialog.ts

@@ -1,6 +1,6 @@
 import { API } from "shared/mod.ts";
 import { Box, Button, ButtonStyle, CenterV, Checkbox, Custom, Empty, Horizontal, Image, Label, SheetDialog, Spacer, Validate, Vertical, asState, createElement, css, getErrorMessage } from "webgen/mod.ts";
-import zod, { ZodError } from "zod/index.ts";
+import { zod } from "webgen/zod.ts";
 import reviewTexts from "../../data/reviewTexts.json" with { type: "json" };
 import { Drop, ReviewResponse } from "../../spec/music.ts";
 import { sheetStack } from "../_legacy/helper.ts";
@@ -49,7 +49,7 @@ const rejectReasons = [ ReviewResponse.DeclineCopyright ];
 export const dialogState = asState({
     drop: <Drop | undefined>undefined,
     responseText: "",
-    validationState: <ZodError | undefined>undefined,
+    validationState: <zod.ZodError | undefined>undefined,
 });
 export const ApproveDialog = SheetDialog(sheetStack, "Approve Drop",
     dialogState.$drop.map(drop =>

pages/admin/state.ts

@@ -23,6 +23,6 @@ export const state = asState({
 });
 
 export const reviewState = asState({
-    drop: <Drop | undefined>undefined,
+    drop: <Drop & { user: ProfileData; events: any[]; } | undefined>undefined,
     drops: <Drop[] | undefined>undefined,
 });

pages/hosting/views/wizard.ts

@@ -1,13 +1,13 @@
 import { API, LoadingSpinner, SliderInput, displayError } from "shared/mod.ts";
 import { format } from "std/fmt/bytes.ts";
 import { BasicLabel, Box, Button, CenterV, DropDownInput, Empty, Grid, Horizontal, Label, Spacer, TextInput, Validate, Vertical, asState, getErrorMessage, refMerge } from "webgen/mod.ts";
-import { ZodError } from "zod/mod.ts";
+import { zod } from "webgen/zod.ts";
 import locations from "../../../data/locations.json" with { type: "json" };
 import { ServerCreate, serverCreate } from "../../../spec/music.ts";
 import { MB, creationState, state } from "../data.ts";
 
 const vState = asState({
-    validationState: <ZodError | undefined>undefined
+    validationState: <zod.ZodError | undefined>undefined
 });
 
 export const creationView = () => creationState.$loading.map(loading => {

pages/music/newDrop.ts

@@ -33,13 +33,13 @@ API.music.id(dropId).get().then(stupidErrorAlert)
         creationState.title = drop.title;
         creationState.release = drop.release;
         creationState.language = drop.language;
-        creationState.artists = asState(drop.artists ?? []);
+        creationState.artists = asState(drop.artists ?? [ [ "", "", "PRIMARY" ] ]);
         creationState.primaryGenre = drop.primaryGenre;
         creationState.secondaryGenre = drop.secondaryGenre;
         creationState.compositionCopyright = drop.compositionCopyright;
         creationState.soundRecordingCopyright = drop.soundRecordingCopyright;
         creationState.artwork = drop.artwork;
-        creationState.artworkClientData = <AdvancedImage | string | undefined>(drop.artwork ? <AdvancedImage>{ type: "direct", source: () => API.music.id(dropId).artwork().then(stupidErrorAlert) } : undefined);
+        creationState.artworkClientData = <AdvancedImage | undefined>(drop.artwork ? <AdvancedImage>{ type: "direct", source: () => API.music.id(dropId).artwork().then(stupidErrorAlert) } : undefined);
         creationState.songs = asState(drop.songs ?? []);
         creationState.comments = drop.comments;
     })
@@ -207,7 +207,7 @@ const wizard = creationState.$page.map(page => {
             Spacer()
         ),
         Spacer(),
-        Horizontal(Button("Back").setJustifyContent("center").setStyle(ButtonStyle.Secondary).onClick(() => creationState.page--), Spacer(), Button("Submit").setJustifyContent("center").onClick(async () => {
+        Horizontal(Button("Back").setJustifyContent("center").setStyle(ButtonStyle.Secondary).onClick(() => creationState.page--), Spacer(), Button("Submit").setJustifyContent("center").onPromiseClick(async () => {
             creationState.loaded = false;
             await API.music.id(dropId).update(creationState);
 

pages/music/state.ts

@@ -1,5 +1,5 @@
 import { AdvancedImage, asState } from "webgen/mod.ts";
-import { ZodError } from "zod/mod.ts";
+import { zod } from "webgen/zod.ts";
 import { Artist, Drop, Payout, Song } from "../../spec/music.ts";
 
 export const state = asState({
@@ -23,11 +23,11 @@ export const creationState = asState({
     compositionCopyright: <string | undefined>undefined,
     soundRecordingCopyright: <string | undefined>undefined,
     artwork: <string | undefined>undefined,
-    artworkClientData: <AdvancedImage | string | undefined>undefined,
+    artworkClientData: <AdvancedImage | undefined>undefined,
     loading: false,
     uploadingSongs: <string[]>[],
     songs: <Song[]>[],
     comments: <string | undefined>undefined,
     page: 0,
-    validationState: <ZodError | undefined>undefined
+    validationState: <zod.ZodError | undefined>undefined
 });

pages/shared/Progress.ts

@@ -5,15 +5,14 @@ export function Progress(progress: Refable<number>) {
         Custom((() => {
             if (progress == -1) return Label("⚠️ Failed to upload!").addClass("error-message").setTextSize("sm").draw();
             const element = createElement("progress");
-            if (isRef(progress)) {
-                progress.listen((value) => {
-                    element.value = value;
-                });
+            if (isRef<number>(progress)) {
+                progress.listen(value => element.value = value);
                 element.max = 100;
             } else {
                 element.value = progress;
                 element.max = 110;
             }
             return element;
-        })()).addClass("low-level"));
+        })()).addClass("low-level")
+    );
 }

pages/shared/libs/canvasConfetti.ts

@@ -1,5 +1,5 @@
 // @deno-types="https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/canvas-confetti/index.d.ts"
-import confetti from "https://unpkg.com/canvas-confetti@1.9.0/src/confetti.js";
+import confetti from "https://unpkg.com/canvas-confetti@1.9.2/src/confetti.js";
 
 export function confettiFromElement(element: MouseEvent) {
     const { top, height, left, width, } = (<HTMLElement>element.target!).getBoundingClientRect();

pages/shared/navigation.ts

@@ -90,9 +90,9 @@ function getMenuNodeByPrefix(rootNode: RootNode, rootId: string): MenuNode {
 class MenuImpl extends Component {
     rootNode: RootNode;
     path: Reference<string>;
-    displayed = asRef([]) as Reference<RenderItem[]>;
-    #header: Reference<(data: this) => Component> = asRef(defaultHeader);
-    #footer: Reference<(data: this) => Component> = asRef(defaultFooter);
+    displayed = asRef<RenderItem[]>([]);
+    #header: Reference<(data: this) => Component> = asRef<(data: this) => Component>(defaultHeader);
+    #footer: Reference<(data: this) => Component> = asRef<(data: this) => Component>(defaultFooter);
 
     constructor(rootNode: RootNode) {
         super();
@@ -101,11 +101,11 @@ class MenuImpl extends Component {
         // Renderer
         this.wrapper.append(Vertical(
             this.#header.map(it => it(this)).asRefComponent().removeFromLayout(),
-            HeavyList(this.displayed, item => {
+            HeavyList<RenderItem>(this.displayed, item => {
                 if (item instanceof Component)
                     return item;
 
-                if (asRef(item.hidden).getValue())
+                if (asRef(item.hidden ?? false).getValue())
                     return Empty();
 
                 const entry = Entry(item.replacement ? asRef(item.replacement).getValue() : item).addClass(isMobile.map(mobile => mobile ? "small" : "desktop"));
@@ -128,7 +128,7 @@ class MenuImpl extends Component {
             const item = traverseToMenuNode(root, unprefixed);
 
             assert(item, "No Node found");
-            if (isRef(item.children)) {
+            if (isRef<RenderItem[]>(item.children)) {
                 item.children.listen((items) => {
                     if (val == this.path.getValue())
                         this.displayed.setValue(items);
@@ -187,7 +187,7 @@ function defaultFooter(menu: MenuImpl) {
 }
 
 export function createActionList(menu: MenuImpl) {
-    return asRef(menu.rootNode.actions).map(it => Grid(...(it ?? [])).addClass("action-list-bar")).asRefComponent().removeFromLayout();
+    return asRef(menu.rootNode.actions ?? []).map(it => Grid(...it).addClass("action-list-bar")).asRefComponent().removeFromLayout();
 }
 
 export function createTagList(menu: MenuImpl) {

pages/shared/restSpec.ts

@@ -286,7 +286,7 @@ export const API = {
             id: (id: string) => fetch(`${API.BASE_URL}admin/drops/${id}`, {
                 headers: headers(API.getToken())
             })
-                .then(json<Drop>())
+                .then(json<Drop & { user: ProfileData; events: any[]; }>())
                 .catch(reject),
             sync: () => fetch(`${API.BASE_URL}admin/sync_mapping`, {
                 method: "POST",

pages/user/settings.personal.ts

@@ -2,21 +2,20 @@ import { API, StreamingUploadHandler, stupidErrorAlert } from "shared/mod.ts";
 import { delay } from "std/async/mod.ts";
 import { AdvancedImage, Box, Button, CenterV, Empty, Grid, Horizontal, IconButton, Image, Label, MIcon, Spacer, TextInput, Validate, Vertical, asState, createFilePicker, getErrorMessage } from "webgen/mod.ts";
 import { zod } from "webgen/zod.ts";
-import { ZodError } from "zod/mod.ts";
 import { activeUser, allowedImageFormats, forceRefreshToken } from "../_legacy/helper.ts";
 
 export function ChangePersonal() {
     const state = asState({
         email: activeUser.email,
         name: activeUser.username,
         loading: false,
-        profilePicture: activeUser.avatar ? { type: "direct", source: async () => await API.user.picture(activeUser.id!).then(stupidErrorAlert) } : { type: "loading" } as AdvancedImage | undefined,
-        validationState: <ZodError | undefined>undefined,
+        profilePicture: activeUser.avatar ? { type: "direct", source: async () => await API.user.picture(activeUser.id!).then(stupidErrorAlert) } : { type: "loading" } as AdvancedImage,
+        validationState: <zod.ZodError | undefined>undefined,
     });
 
     return Vertical(
         Grid(
-            state.$profilePicture.map(profilePicture => Box(Image(profilePicture ?? { type: "loading" }, "Your Avatarimage"), IconButton(MIcon("edit"), "edit-icon")).addClass("upload-image").onClick(async () => {
+            state.$profilePicture.map(profilePicture => Box(Image(profilePicture, "Your Avatarimage"), IconButton(MIcon("edit"), "edit-icon")).addClass("upload-image").onClick(async () => {
                 const file = await createFilePicker(allowedImageFormats.join(","));
                 const blobUrl = URL.createObjectURL(file);
                 profilePicture = <AdvancedImage>{ type: "uploading", filename: file.name, blobUrl, percentage: 0 };

pages/user/settings.ts

@@ -1,6 +1,6 @@
 import { API, Navigation } from "shared/mod.ts";
 import { Body, Box, Button, CenterV, Empty, Grid, Horizontal, Label, Spacer, TextInput, Validate, Vertical, WebGen, asState, getErrorMessage, isMobile } from "webgen/mod.ts";
-import zod, { ZodError } from "zod/index.ts";
+import { zod } from "webgen/zod.ts";
 import '../../assets/css/main.css';
 import { DynaNavigation } from "../../components/nav.ts";
 import { RegisterAuthRefresh, logOut } from "../_legacy/helper.ts";
@@ -13,7 +13,7 @@ await RegisterAuthRefresh();
 const state = asState({
     newPassword: <string | undefined>undefined,
     verifyNewPassword: <string | undefined>undefined,
-    validationState: <ZodError | undefined>undefined,
+    validationState: <zod.ZodError | undefined>undefined,
 });
 
 const settingsMenu = Navigation({

pages/user/signin.ts

@@ -143,13 +143,7 @@ Body(Vertical(
 
                         Button("Login")
                             .setId("login-button")
-                            .onPromiseClick(async () => {
-                                try {
-                                    await loginUser();
-                                } catch (_) {
-                                    //
-                                }
-                            })
+                            .onPromiseClick(async () => await loginUser())
                             .setJustifyContent("center"),
 
                         ErrorMessage(),
@@ -225,8 +219,7 @@ Body(Vertical(
                 ).addClass("loading", "loader");
             }).asRefComponent(),
         )
-    )
-        .addClass("auth-area"),
+    ).addClass("auth-area"),
     Footer()
 ));
 

spec/music.ts

@@ -1,4 +1,4 @@
-import zod from "zod/index.ts";
+import { zod } from "webgen/zod.ts";
 
 export const DATE_PATTERN = /\d\d\d\d-\d\d-\d\d/;
 export const userString = zod.string().min(1).transform(x => x.trim());