@novely/core 0.22.2 → 0.23.0

package/dist/index.d.ts

@@ -214,6 +214,7 @@ interface CharacterHandle {
     emotion: (emotion: string, render: boolean) => void;
     append: (className?: string, style?: string, restoring?: boolean) => void;
     remove: (className?: string, style?: string, duration?: number, restoring?: boolean) => Promise<void>;
+    animate: (timeout: number, classes: string[]) => void;
     emotions: Record<string, HTMLImageElement[]>;
 }
 type AudioHandle = {
@@ -223,23 +224,23 @@ type AudioHandle = {
 };
 type Renderer = {
     misc: {
-        /**
-         * Function to preload images async and await for all images to load or fail
-         * @param images Set of images to load
-         */
-        preloadImagesBlocking: (images: Set<string>) => Promise<PromiseSettledResult<unknown>[]>;
         /**
          * Function to preload image sync
          * @param image Image URL
          * @returns Image URL
          */
         preloadImage: <T extends string>(image: T) => T;
+        /**
+         * Function to preload image async
+         * @param image Image URL
+         * @returns Promise
+         */
+        preloadImageBlocking: (image: string) => Promise<void>;
         /**
          * Function to preload audio
-         * @param type kind of audio
          * @param source <url> pointing to the audio
          */
-        preloadAudioBlocking: (type: 'music', source: string) => Promise<void>;
+        preloadAudioBlocking: (source: string) => Promise<void>;
     };
     ui: {
         /**
@@ -308,7 +309,6 @@ type Renderer = {
         };
         store: unknown;
         setStore: unknown;
-        getCharacter: (character: string) => CharacterHandle | undefined;
     };
     removeContext: (context: string) => void;
 };
@@ -418,6 +418,11 @@ interface NovelyInit<Languages extends string, Characters extends Record<string,
      * @default 799
      */
     throttleTimeout?: number;
+    /**
+     * Limits how many assets can be downloaded parallelly
+     * @default 15
+     */
+    parallelAssetsDownloadLimit?: number;
     /**
      * Custom language detector
      * @param languages Supported languages aka `languages: []` in the config
@@ -445,8 +450,12 @@ interface NovelyInit<Languages extends string, Characters extends Record<string,
      * @default "lazy"
      */
     preloadAssets?: 'lazy' | 'blocking';
+    /**
+     * Fetching function
+     */
+    fetch?: typeof fetch;
 }
-declare const novely: <Languages extends string, Characters extends Record<string, Character<Languages>>, StateScheme extends State, DataScheme extends Data>({ characters, storage, storageDelay, renderer: createRenderer, initialScreen, translation, languages, state: defaultState, data: defaultData, autosaves, migrations, throttleTimeout, getLanguage, overrideLanguage, askBeforeExit, preloadAssets, }: NovelyInit<Languages, Characters, StateScheme, DataScheme>) => {
+declare const novely: <Languages extends string, Characters extends Record<string, Character<Languages>>, StateScheme extends State, DataScheme extends Data>({ characters, storage, storageDelay, renderer: createRenderer, initialScreen, translation, languages, state: defaultState, data: defaultData, autosaves, migrations, throttleTimeout, getLanguage, overrideLanguage, askBeforeExit, preloadAssets, parallelAssetsDownloadLimit, fetch: request }: NovelyInit<Languages, Characters, StateScheme, DataScheme>) => {
     /**
      * Function to set game script
      */
@@ -472,7 +481,7 @@ declare const novely: <Languages extends string, Characters extends Record<strin
     /**
      * Unwraps translatable content to a string value
      */
-    unwrap(content: string | (() => string) | Record<Languages, string> | Exclude<Record<Languages, string | (() => string)>, Record<string, string>>): string;
+    unwrap(content: string | (() => string) | Exclude<Record<Languages, string | (() => string)>, Record<string, string>> | Record<Languages, string>): string;
     /**
      * Cancel data loading, hide UI, ignore page change events
      * Data updates still will work in case Novely already was loaded

package/dist/index.global.js

@@ -174,11 +174,45 @@ var Novely = (() => {
   ]);
   var EMPTY_SET = /* @__PURE__ */ new Set();
   var DEFAULT_TYPEWRITER_SPEED = "Medium";
+  var HOWLER_SUPPORTED_FILE_FORMATS = /* @__PURE__ */ new Set([
+    "mp3",
+    "mpeg",
+    "opus",
+    "ogg",
+    "oga",
+    "wav",
+    "aac",
+    "caf",
+    "m4a",
+    "m4b",
+    "mp4",
+    "weba",
+    "webm",
+    "dolby",
+    "flac"
+  ]);
+  var SUPPORTED_IMAGE_FILE_FORMATS = /* @__PURE__ */ new Set([
+    "apng",
+    "avif",
+    "gif",
+    "jpg",
+    "jpeg",
+    "jfif",
+    "pjpeg",
+    "pjp",
+    "png",
+    "svg",
+    "webp",
+    "bmp"
+  ]);
   var MAIN_CONTEXT_KEY = "$MAIN";
 
   // src/shared.ts
   var STACK_MAP = /* @__PURE__ */ new Map();
 
+  // ../../node_modules/.pnpm/esm-env@1.0.0/node_modules/esm-env/prod-ssr.js
+  var DEV = false;
+
   // src/utils.ts
   var matchAction = ({ getContext, push, forward }, values) => {
     return (action, props, { ctx, data }) => {
@@ -187,9 +221,13 @@ var Novely = (() => {
         ctx: context,
         data,
         push() {
+          if (context.meta.preview)
+            return;
           push(context);
         },
         forward() {
+          if (context.meta.preview)
+            return;
           forward(context);
         }
       }, props);
@@ -298,6 +336,9 @@ var Novely = (() => {
   var isSkippedDuringRestore = (item) => {
     return SKIPPED_DURING_RESTORE.has(item);
   };
+  var isAudioAction = (action) => {
+    return AUDIO_ACTIONS.has(action);
+  };
   var noop = () => {
   };
   var isAction = (element) => {
@@ -520,6 +561,53 @@ var Novely = (() => {
     };
     return useStack;
   };
+  var mapSet = (set, fn) => {
+    return [...set].map(fn);
+  };
+  var isImageAsset = (asset) => {
+    return isString(asset) && isCSSImage(asset);
+  };
+  var getUrlFileExtension = (address) => {
+    try {
+      const { pathname } = new URL(address, location.href);
+      return pathname.split(".").at(-1).split("!")[0].split(":")[0];
+    } catch (error) {
+      if (DEV) {
+        console.error(new Error(`Could not construct URL "${address}".`, { cause: error }));
+      }
+      return "";
+    }
+  };
+  var fetchContentType = async (request, url) => {
+    try {
+      const response = await request(url, {
+        method: "HEAD"
+      });
+      return response.headers.get("Content-Type") || "";
+    } catch (error) {
+      if (DEV) {
+        console.error(new Error(`Failed to fetch file at "${url}"`, { cause: error }));
+      }
+      return "";
+    }
+  };
+  var getResourseType = async (request, url) => {
+    const extension = getUrlFileExtension(url);
+    if (HOWLER_SUPPORTED_FILE_FORMATS.has(extension)) {
+      return "audio";
+    }
+    if (SUPPORTED_IMAGE_FILE_FORMATS.has(extension)) {
+      return "image";
+    }
+    const contentType = await fetchContentType(request, url);
+    if (contentType.includes("audio")) {
+      return "audio";
+    }
+    if (contentType.includes("image")) {
+      return "image";
+    }
+    return "other";
+  };
 
   // src/global.ts
   var PRELOADED_ASSETS = /* @__PURE__ */ new Set();
@@ -715,11 +803,6 @@ var Novely = (() => {
 
   // src/novely.ts
   var import_p_limit = __toESM(require_p_limit(), 1);
-
-  // ../../node_modules/.pnpm/esm-env@1.0.0/node_modules/esm-env/prod-ssr.js
-  var DEV = false;
-
-  // src/novely.ts
   var novely = ({
     characters,
     storage = localStorageStorage({ key: "novely-game-storage" }),
@@ -736,9 +819,12 @@ var Novely = (() => {
     getLanguage: getLanguage2 = getLanguage,
     overrideLanguage = false,
     askBeforeExit = true,
-    preloadAssets = "lazy"
+    preloadAssets = "lazy",
+    parallelAssetsDownloadLimit = 15,
+    fetch: request = fetch
   }) => {
     const limitScript = (0, import_p_limit.default)(1);
+    const limitAssetsDownload = (0, import_p_limit.default)(parallelAssetsDownloadLimit);
     const story = {};
     const times = /* @__PURE__ */ new Set();
     const ASSETS_TO_PRELOAD = /* @__PURE__ */ new Set();
@@ -754,7 +840,23 @@ var Novely = (() => {
       Object.assign(story, flattenStory(part));
       if (preloadAssets === "blocking" && ASSETS_TO_PRELOAD.size > 0) {
         renderer.ui.showScreen("loading");
-        await renderer.misc.preloadImagesBlocking(ASSETS_TO_PRELOAD);
+        const { preloadAudioBlocking, preloadImageBlocking } = renderer.misc;
+        const list = mapSet(ASSETS_TO_PRELOAD, (asset) => {
+          return limitAssetsDownload(async () => {
+            const type = await getResourseType(request, asset);
+            switch (type) {
+              case "audio": {
+                await preloadAudioBlocking(asset);
+                break;
+              }
+              case "image": {
+                await preloadImageBlocking(asset);
+                break;
+              }
+            }
+          });
+        });
+        await Promise.allSettled(list);
       }
       const screen = renderer.ui.getScreen();
       const nextScreen = scriptCalled ? screen : initialScreen;
@@ -775,13 +877,25 @@ var Novely = (() => {
       return limitScript(() => scriptBase(part));
     };
     const action = new Proxy({}, {
-      get(_, prop) {
+      get(_, action2) {
         return (...props) => {
           if (preloadAssets === "blocking") {
-            if (prop === "showBackground" && typeof props[0] === "string" && isCSSImage(props[0])) {
+            if (action2 === "showBackground") {
+              if (isImageAsset(props[0])) {
+                ASSETS_TO_PRELOAD.add(props[0]);
+              }
+              if (props[0] && typeof props[0] === "object") {
+                for (const value of Object.values(props[0])) {
+                  if (!isImageAsset(value))
+                    continue;
+                  ASSETS_TO_PRELOAD.add(value);
+                }
+              }
+            }
+            if (isAudioAction(action2) && isString(props[0])) {
               ASSETS_TO_PRELOAD.add(props[0]);
             }
-            if (prop === "showCharacter" && typeof props[0] === "string" && typeof props[1] === "string") {
+            if (action2 === "showCharacter" && isString(props[0]) && isString(props[1])) {
               const images = characters[props[0]].emotions[props[1]];
               if (Array.isArray(images)) {
                 for (const asset of images) {
@@ -792,7 +906,7 @@ var Novely = (() => {
               }
             }
           }
-          return [prop, ...props];
+          return [action2, ...props];
         };
       }
     });
@@ -912,12 +1026,11 @@ var Novely = (() => {
         return;
       let latest = save2 || $.get().saves.at(-1);
       if (!latest) {
-        $.set({
-          saves: [initial],
-          data: klona(defaultData),
-          meta: [getLanguageWithoutParameters(), DEFAULT_TYPEWRITER_SPEED, 1, 1, 1]
-        });
         latest = klona(initial);
+        $.update((prev) => {
+          prev.saves.push(latest);
+          return prev;
+        });
       }
       const context = renderer.getContext(MAIN_CONTEXT_KEY);
       const stack = useStack(context);
@@ -1021,7 +1134,7 @@ var Novely = (() => {
       ctx.meta.preview = true;
       const processor = createQueueProcessor(queue);
       await processor.run((action2, props) => {
-        if (AUDIO_ACTIONS.has(action2))
+        if (isAudioAction(action2))
           return;
         if (action2 === "vibrate")
           return;
@@ -1272,10 +1385,10 @@ var Novely = (() => {
         ctx.vibrate(pattern);
         push();
       },
-      next({ ctx, push }) {
+      next({ push }) {
         push();
       },
-      animateCharacter({ ctx, data: data2 }, [character, timeout, ...classes]) {
+      animateCharacter({ ctx, push }, [character, timeout, ...classes]) {
         if (DEV && classes.length === 0) {
           throw new Error("Attempt to use AnimateCharacter without classes. Classes should be provided [https://novely.pages.dev/guide/actions/animateCharacter.html]");
         }
@@ -1284,30 +1397,8 @@ var Novely = (() => {
         }
         if (ctx.meta.preview)
           return;
-        const handler = ({ get }) => {
-          const { clear } = get(false);
-          const char = ctx.getCharacter(character);
-          if (!char)
-            return;
-          const target = char.canvas;
-          if (!target)
-            return;
-          const classNames = classes.filter((className) => !target.classList.contains(className));
-          target.classList.add(...classNames);
-          const removeClassNames = () => {
-            target.classList.remove(...classNames);
-          };
-          const timeoutId = setTimeout(removeClassNames, timeout);
-          clear(() => {
-            removeClassNames();
-            clearTimeout(timeoutId);
-          });
-        };
-        handler.key = "@@internal-animate-character";
-        match("custom", [handler], {
-          ctx,
-          data: data2
-        });
+        ctx.character(character).animate(timeout, classes);
+        push();
       },
       text({ ctx, data: data2, forward }, text) {
         const string = text.map((content) => unwrap2(content, data2)).join(" ");