feat: now versions doesn't lie

Author: lajbel

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Format: Major.Minor.Patch (D/M/Y)
 
+## [2.1.0] - 2025-01-15
+
+### Changed
+
+- Now version selector doesn't lie about the version!
+
 ## 2.0.1 (3/11/2024)
 
 - Renamed examples to demos

kaplay

@@ -3,6 +3,14 @@
 
 import fs from "fs";
 import path from "path";
+import type { Packument } from "query-registry";
+
+async function getPackageInfo(name: string): Promise<Packument> {
+    const endpoint = `https://registry.npmjs.org/${name}`;
+    const res = await fetch(endpoint);
+    const data = await res.json();
+    return data;
+}
 
 const defaultExamplesPath = path.join(
     import.meta.dirname,
@@ -13,6 +21,11 @@ const defaultExamplesPath = path.join(
 const distPath = path.join(import.meta.dirname, "..", "src", "data");
 
 export const generateExamples = async (examplesPath = defaultExamplesPath) => {
+    const defaultVersion = Object.keys(
+        (await getPackageInfo("kaplay")).versions,
+    ).reverse().find((v) => {
+        return v.startsWith("3001");
+    });
     let exampleCount = 0;
 
     const examples = fs.readdirSync(examplesPath).map((file) => {
@@ -22,7 +35,12 @@ export const generateExamples = async (examplesPath = defaultExamplesPath) => {
         const code = fs.readFileSync(filePath, "utf-8");
         const name = file.replace(".js", "");
 
-        return { name, code, index: (exampleCount++).toString() };
+        return {
+            name,
+            code,
+            index: (exampleCount++).toString(),
+            version: defaultVersion,
+        };
     });
 
     // Write a JSON file with the examples

scripts/examples.ts

@@ -37,7 +37,11 @@ export const ConfigProject = () => {
                 <select
                     id="version-selector"
                     className="select select-bordered"
+                    defaultValue={"none"}
                 >
+                    <option disabled value={"none"}>
+                        Select a version
+                    </option>
                     {packageInfo
                         && Object.keys(packageInfo.versions).reverse().map((
                             version,

src/components/Config/ConfigProject.tsx

@@ -4,4 +4,3 @@ export const VERSION = packageJson.version;
 export const CHANGELOG =
     "https://github.com/lajbel/kaplayground/blob/master/CHANGELOG.md";
 export const REPO = "https://github.com/kaplayjs/kaplayground";
-export const DEFAULT_KAPLAY_VERSION = "3001.0.2";

src/config/common.ts

@@ -1,4 +1,3 @@
-import { DEFAULT_KAPLAY_VERSION } from "../config/common";
 import examplesList from "./exampleList.json";
 
 export type Tag =
@@ -375,14 +374,16 @@ export const examplesMetaData: Record<string, Partial<Example>> = {
     },
     "platformBox": {
         formatedName: "Odd Uses of platformEffector()",
-        description: "How to allow the player to decide whether they want to push something.",
+        description:
+            "How to allow the player to decide whether they want to push something.",
         tags: ["physics"],
         difficulty: "medium",
         version: VERSION_4000,
     },
     "platformEffector": {
         formatedName: "Jump-Through Platforms",
-        description: "How to make platforms that the player can jump through going up and down at will.",
+        description:
+            "How to make platforms that the player can jump through going up and down at will.",
         tags: ["physics"],
         difficulty: "medium",
         version: VERSION_4000,
@@ -440,13 +441,15 @@ export const examplesMetaData: Record<string, Partial<Example>> = {
     },
     "raycastObject": {
         formatedName: "Raycasts objects",
-        description: "How to shoot a raycast and make it bounce off the bounding boxes of objects.",
+        description:
+            "How to shoot a raycast and make it bounce off the bounding boxes of objects.",
         tags: ["math"],
         difficulty: "medium",
     },
     "raycastShape": {
         formatedName: "Raycasts shapes",
-        description: "How to shoot a raycast and make it bounce off the actual shapes of objects.",
+        description:
+            "How to shoot a raycast and make it bounce off the actual shapes of objects.",
         tags: ["math"],
         difficulty: "medium",
     },
@@ -562,7 +565,8 @@ export const examplesMetaData: Record<string, Partial<Example>> = {
     },
     "weirdTextTags": {
         formatedName: "Weird text tags",
-        description: "How to insert text with brackets without messing up formatting.",
+        description:
+            "How to insert text with brackets without messing up formatting.",
         tags: ["testing"],
         difficulty: "easy",
     },
@@ -579,6 +583,6 @@ export const examples = examplesList.filter((example) =>
         tags: examplesMetaData[example.name]?.tags ?? [],
         difficulty: examplesMetaData[example.name]?.difficulty ?? "medium",
         version: examplesMetaData[example.name]?.version
-            ?? DEFAULT_KAPLAY_VERSION,
+            ?? example.version,
     };
 });

src/data/exampleList.json

@@ -1,8 +1,8 @@
 import type { KAPLAYOpt } from "kaplay";
 import { toast } from "react-toastify";
 import type { StateCreator } from "zustand";
-import { DEFAULT_KAPLAY_VERSION } from "../config/common";
 import { defaultExampleFile, defaultProject } from "../config/defaultProject";
+import examplesList from "../data/exampleList.json";
 import { examples } from "../data/examples";
 import { useConfig } from "../hooks/useConfig";
 import { useEditor } from "../hooks/useEditor";
@@ -56,7 +56,7 @@ export const createProjectSlice: StateCreator<
         assets: new Map(),
         kaplayConfig: {},
         mode: "pj",
-        kaplayVersion: DEFAULT_KAPLAY_VERSION,
+        kaplayVersion: examplesList[0].version,
         id: `upj-Untitled`,
     },
     getProject: () => {
@@ -75,7 +75,7 @@ export const createProjectSlice: StateCreator<
         const assets = new Map<string, Asset>();
         const lastVersion = get().project.kaplayVersion;
 
-        let version = DEFAULT_KAPLAY_VERSION;
+        let version = examplesList[0].version;
         let id = `u${filter}-Untitled`;
 
         if (filter === "pj") {
@@ -252,7 +252,7 @@ export const createProjectSlice: StateCreator<
             mode: "ex",
             id: "ex-shared",
             kaplayConfig: {},
-            kaplayVersion: DEFAULT_KAPLAY_VERSION,
+            kaplayVersion: examplesList[0].version,
             name: "Shared Example",
             version: "2.0.0",
             isDefault: false,