@threlte/core - npm Package Compare versions

Comparing version 6.1.1 to 7.0.0

dist/Canvas.svelte.d.ts

@@ -0,3 +1,3 @@
+/// <reference types="bun-types" />
 import { SvelteComponentTyped } from "svelte";
-export declare const invalidateGlobally: (debugFrameloopMessage?: string) => void;
 import { type ColorSpace, type ShadowMapType, type ToneMapping, type WebGLRendererParameters } from 'three';
@@ -22,10 +22,7 @@ import type { Size } from './types';
         /**
-           * @default false
-           */ debugFrameloop?: boolean | undefined;
-        /**
            * @default window.devicePixelRatio
-           */ dpr?: number | undefined;
+           */ dpr?: any;
         /**
-           * @default 'demand'
-           */ frameloop?: "always" | "never" | "demand" | undefined;
+           * @default 'on-demand'
+           */ renderMode?: "always" | "on-demand" | "manual" | undefined;
         /**
@@ -44,8 +41,13 @@ * Parameters sent to the WebGLRenderer when created.
         /**
-           * @default false if greater than or equal to r155, true if less than 155
-           *
            * This property is not reactive and must be set at initialization.
            *
+           * @default false if greater than or equal to r155, true if less than 155
            * @see https://github.com/mrdoob/three.js/pull/26392
            */ useLegacyLights?: boolean | undefined;
+        /**
+           * By default, Threlte will automatically render the scene. To implement
+           * custom render pipelines, set this to `false`.
+           *
+           * @default true
+           */ autoRender?: boolean | undefined;
         ctx?: import("./lib/contexts").ThrelteContext | undefined;
@@ -52,0 +54,0 @@ };

dist/components/T/utils/useProps.js

@@ -37,5 +37,41 @@ import { useThrelte } from '../../../hooks/useThrelte';
 };
+const createSetter = (target, key, value) => {
+    if (!Array.isArray(value) &&
+        typeof value === 'number' &&
+        typeof target[key]?.setScalar === 'function' &&
+        // colors do have a setScalar function, but we don't want to use it, because
+        // the hex notation (i.e. 0xff0000) is very popular and matches the number
+        // type. So we exclude colors here.
+        !target[key]?.isColor) {
+        // edge case of setScalar setters
+        return (target, key, value) => {
+            target[key].setScalar(value);
+        };
+    }
+    else {
+        if (typeof target[key]?.set === 'function') {
+            // if the property has a "set" function, we can use it
+            if (Array.isArray(value)) {
+                return (target, key, value) => {
+                    target[key].set(...value);
+                };
+            }
+            else {
+                return (target, key, value) => {
+                    target[key].set(value);
+                };
+            }
+        }
+        else {
+            // otherwise, we just set the value
+            return (target, key, value) => {
+                target[key] = value;
+            };
+        }
+    }
+};
 export const useProps = () => {
     const { invalidate } = useThrelte();
     const memoizedProps = new Map();
+    const memoizedSetters = new Map();
     const setProp = (instance, propertyPath, value, options) => {
@@ -53,29 +89,22 @@ if (memoizeProp(value)) {
         const { key, target } = resolvePropertyPath(instance, propertyPath);
-        if (!Array.isArray(value) &&
-            typeof value === 'number' &&
-            typeof target[key]?.setScalar === 'function') {
-            // edge case of setScalar setters
-            target[key].setScalar(value);
-        }
-        else {
-            if (typeof target[key]?.set === 'function') {
-                // if the property has a "set" function, we can use it
-                if (Array.isArray(value)) {
-                    target[key].set(...value);
-                }
-                else {
-                    target[key].set(value);
-                }
+        if (value !== undefined && value !== null) {
+            const memoizedSetter = memoizedSetters.get(propertyPath);
+            if (memoizedSetter) {
+                memoizedSetter(target, key, value);
             }
             else {
-                // otherwise, we just set the value
-                target[key] = value;
-                if (options.manualCamera)
-                    return;
-                if (updateProjectionMatrixKeys.has(key) &&
-                    (target.isPerspectiveCamera || target.isOrthographicCamera)) {
-                    target.updateProjectionMatrix();
-                }
+                const setter = createSetter(target, key, value);
+                memoizedSetters.set(propertyPath, setter);
+                setter(target, key, value);
             }
         }
+        else {
+            createSetter(target, key, value)(target, key, value);
+        }
+        if (options.manualCamera)
+            return;
+        if (updateProjectionMatrixKeys.has(key) &&
+            (target.isPerspectiveCamera || target.isOrthographicCamera)) {
+            target.updateProjectionMatrix();
+        }
     };
@@ -82,0 +111,0 @@ const updateProps = (instance, props, options) => {

dist/index.d.ts

@@ -10,6 +10,9 @@ export { default as Canvas } from './Canvas.svelte';
 export type { Plugin, NamedPlugin, PluginProps } from './plugins/types';
-export { useFrame, type ThrelteUseFrameOptions } from './hooks/useFrame';
-export { useRender } from './hooks/useRender';
+export { useTask, type ThrelteUseTask, type ThrelteUseTaskOptions } from './hooks/useTask';
+export { useStage } from './hooks/useStage';
 export { useThrelte } from './hooks/useThrelte';
 export { useThrelteUserContext } from './hooks/useThrelteUserContext';
+export type { Key, Stage, Task, Scheduler, Schedule, TaskCallback } from './frame-scheduling';
+export { useFrame, type ThrelteUseFrameOptions } from './hooks/legacy/useFrame';
+export { useRender } from './hooks/legacy/useRender';
 export { useLoader, type UseLoaderOptions, type UseLoaderLoadInput, type UseLoaderLoadResult } from './hooks/useLoader';
@@ -16,0 +19,0 @@ export { useParent } from './hooks/useParent';

dist/index.js

@@ -13,6 +13,10 @@ // canvas component
 // hooks
-export { useFrame } from './hooks/useFrame';
-export { useRender } from './hooks/useRender';
+export { useTask } from './hooks/useTask';
+export { useStage } from './hooks/useStage';
 export { useThrelte } from './hooks/useThrelte';
 export { useThrelteUserContext } from './hooks/useThrelteUserContext';
+// legacy hooks
+// TODO: remove in Threlte 7
+export { useFrame } from './hooks/legacy/useFrame';
+export { useRender } from './hooks/legacy/useRender';
 // useLoader
@@ -19,0 +23,0 @@ export { useLoader } from './hooks/useLoader';

dist/lib/contexts.d.ts

 import { type Readable, type Writable } from 'svelte/store';
-import { Clock, Scene, type Camera, type ColorSpace, type ShadowMapType, type ToneMapping, type WebGLRenderer } from 'three';
-import type { ThrelteFrameHandler } from '../hooks/useFrame';
-import type { ThrelteRenderHandler } from '../hooks/useRender';
+import { Scene, type Camera, type ColorSpace, type ShadowMapType, type ToneMapping, type WebGLRenderer } from 'three';
+import type { Scheduler, Stage, Task } from '../frame-scheduling';
 import type { DisposableThreeObject, Size } from '../types';
@@ -15,3 +14,2 @@ import { type CurrentWritable } from './storeUtils';
     size: Readable<Size>;
-    clock: Clock;
     camera: CurrentWritable<Camera>;
@@ -22,11 +20,37 @@ scene: Scene;
     renderer: WebGLRenderer;
-    frameloop: CurrentWritable<'always' | 'demand' | 'never'>;
     /**
-     * Invalidates the current frame when frameloop === 'demand'
+     * If set to 'on-demand', the scene will only be rendered when the current frame is invalidated
+     * If set to 'manual', the scene will only be rendered when advance() is called
+     * If set to 'always', the scene will be rendered every frame
      */
-    invalidate: (debugFrameloopMessage?: string) => void;
+    renderMode: CurrentWritable<'always' | 'on-demand' | 'manual'>;
     /**
-     * Advance one frame when frameloop === 'never'
+     * By default, Threlte will automatically render the scene when necessary.
+     * If you want to implement a custom render pipeline, you can set this to
+     * false.
      */
+    autoRender: CurrentWritable<boolean>;
+    /**
+     * Invalidates the current frame when renderMode === 'on-demand'
+     */
+    invalidate: () => void;
+    /**
+     * Advance one frame when renderMode === 'manual'
+     */
     advance: () => void;
+    /** The scheduler used by this Threlte app */
+    scheduler: Scheduler;
+    /** The stage which useTask defaults to */
+    mainStage: Stage;
+    /**
+     * The default render stage. Tasks in this stage are ran according to
+     * on-demand rendering.
+     */
+    renderStage: Stage;
+    autoRenderTask: Task;
+    /**
+     * Function to determine if a rendering should happen according to on-demand
+     * rendering, resets frame invalidations and advancements
+     */
+    shouldRender: () => boolean;
     colorManagementEnabled: CurrentWritable<boolean>;
@@ -38,24 +62,13 @@ colorSpace: CurrentWritable<ColorSpace>;
 /**
- * The internal context is used to store the state of the
- * frameloop and the disposal methods. It is not exposed
- * to the user.
+ * The internal context is used to store the state of the task scheduling system and
+ * the disposal methods. It is not exposed to the user.
  */
 export type ThrelteInternalContext = {
-    /**
-     * Render context
-     */
-    debugFrameloop: boolean;
     frameInvalidated: boolean;
-    frame: number;
-    invalidations: Record<string, number>;
-    manualFrameHandlers: Set<ThrelteFrameHandler>;
-    autoFrameHandlers: Set<ThrelteFrameHandler>;
-    allFrameHandlers: Set<ThrelteFrameHandler>;
-    allFrameHandlersNeedSortCheck: boolean;
-    renderHandlers: Set<ThrelteRenderHandler>;
-    renderHandlersNeedSortCheck: boolean;
     advance: boolean;
     /**
-     * Disposal context
+     * If anything is in this set, the frame will be considered invalidated and
+     * the next frame will be rendered.
      */
+    autoInvalidations: Set<any>;
     /**
@@ -92,3 +105,3 @@ * Disposes all disposable objects from disposableObjects
 };
-export type ThrelteUserContext = CurrentWritable<Record<string, any>>;
+export type ThrelteUserContext = CurrentWritable<Record<string | symbol, any>>;
 /**
@@ -106,4 +119,4 @@ * ### `createContexts`
     parentSize: Writable<Size>;
-    debugFrameloop: boolean;
-    frameloop: 'always' | 'demand' | 'never';
+    renderMode: 'always' | 'on-demand' | 'manual';
+    autoRender: boolean;
     shadows: boolean | ShadowMapType;
@@ -110,0 +123,0 @@ colorManagementEnabled: boolean;

dist/lib/contexts.js

@@ -14,12 +14,3 @@ import { setContext, tick } from 'svelte';
     const internalCtx = {
-        debugFrameloop: options.debugFrameloop,
-        frame: 0,
         frameInvalidated: true,
-        invalidations: {},
-        manualFrameHandlers: new Set(),
-        autoFrameHandlers: new Set(),
-        allFrameHandlers: new Set(),
-        allFrameHandlersNeedSortCheck: false,
-        renderHandlers: new Set(),
-        renderHandlersNeedSortCheck: false,
         advance: false,
@@ -81,3 +72,4 @@ dispose: async (force = false) => {
         disposableObjects: new Map(),
-        shouldDispose: false
+        shouldDispose: false,
+        autoInvalidations: new Set()
     };
@@ -88,13 +80,7 @@ const ctx = {
         }),
-        clock: new Clock(),
         camera: currentWritable(createDefaultCamera()),
         scene: new Scene(),
         renderer: undefined,
-        invalidate: (debugFrameloopMessage) => {
+        invalidate: () => {
             internalCtx.frameInvalidated = true;
-            if (internalCtx.debugFrameloop && debugFrameloopMessage) {
-                internalCtx.invalidations[debugFrameloopMessage] = internalCtx.invalidations[debugFrameloopMessage]
-                    ? internalCtx.invalidations[debugFrameloopMessage] + 1
-                    : 1;
-            }
         },
@@ -110,3 +96,19 @@ advance: () => {
         colorManagementEnabled: currentWritable(options.colorManagementEnabled),
-        frameloop: currentWritable(options.frameloop)
+        renderMode: currentWritable(options.renderMode),
+        autoRender: currentWritable(options.autoRender),
+        scheduler: undefined,
+        mainStage: undefined,
+        renderStage: undefined,
+        autoRenderTask: undefined,
+        shouldRender: () => {
+            const shouldRender = ctx.renderMode.current === 'always' ||
+                (ctx.renderMode.current === 'on-demand' &&
+                    (internalCtx.frameInvalidated || internalCtx.autoInvalidations.size > 0)) ||
+                (ctx.renderMode.current === 'manual' && internalCtx.advance);
+            // reset the advance flag
+            internalCtx.advance = false;
+            // reset the frameInvalidated flag
+            internalCtx.frameInvalidated = false;
+            return shouldRender;
+        }
     };
@@ -113,0 +115,0 @@ const userCtx = currentWritable({});

dist/lib/createRawEventDispatcher.d.ts

@@ -28,3 +28,3 @@ type Dispatcher<EventMap extends Record<string, unknown>> = <Type extends keyof EventMap>(type: Type, payload?: EventMap[Type]) => void;
  */
-export declare const createRawEventDispatcher: <EventMap extends Record<string, unknown> = any>() => RawEventDispatcher<EventMap>;
+export declare const createRawEventDispatcher: <EventMap_1 extends Record<string, unknown> = any>() => RawEventDispatcher<EventMap_1>;
 export {};

dist/lib/defaultCamera.js

@@ -19,3 +19,3 @@ import { get } from 'svelte/store';
                 cam.updateProjectionMatrix();
-                ctx.invalidate('Default camera: aspect ratio changed');
+                ctx.invalidate();
                 return cam;
@@ -22,0 +22,0 @@ });

dist/lib/useRenderer.js

@@ -9,4 +9,6 @@ import { writable } from 'svelte/store';
  * property `encoding`. As a fallback for older three versions, we need to map
- * the new `colorSpace` to the old `encoding`.
+ * the new `colorSpace` to the old `encoding`. We're expecting a TS error because P3 wasn't
+ * supported in older versions of three.
  */
+// @ts-expect-error
 const colorSpaceToEncoding = {
@@ -52,2 +54,3 @@ srgb: sRGBEncoding,
         else {
+            ;
             ColorManagement.legacyMode = !colorManagementEnabled;
@@ -70,2 +73,3 @@ }
             else {
+                ;
                 renderer.outputEncoding = encoding;
@@ -106,2 +110,3 @@ }
         else if (revision < 150) {
+            ;
             renderer.physicallyCorrectLights = !useLegacyLights;
@@ -108,0 +113,0 @@ }

package.json

 {
   "name": "@threlte/core",
-  "version": "6.1.1",
+  "version": "7.0.0",
   "author": "Grischa Erbe <[e-mail]> (https://legrisch.com)",
@@ -11,6 +11,7 @@ "license": "MIT",
     "@types/node": "^18.0.3",
-    "@types/three": "^0.155.1",
+    "@types/three": "^0.158.3",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "@yushijinhun/three-minifier-rollup": "^0.3.1",
+    "bun-types": "^1.0.14",
     "eslint": "^8.28.0",
@@ -27,3 +28,3 @@ "eslint-config-prettier": "^8.5.0",
     "svelte2tsx": "^0.6.19",
-    "three": "^0.155.0",
+    "three": "^0.158.0",
     "tslib": "^2.4.1",
@@ -30,0 +31,0 @@ "type-fest": "^2.13.0",

No alert changes

Improved metrics

Total package byte prevSize

292820

14.83%

Number of package files

108

18.68%

Lines of code

6293

17.36%

Worsened metrics

Dev dependency count

25

4.17%

No dependency changes