chore: get rid of vite

package.json

@@ -50,7 +50,8 @@
     "lint-staged": "^15.1.0",
     "prettier": "^3.1.0",
     "prettier-plugin-organize-imports": "^3.2.4",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "vitest": "^0.34.6"
   },
   "lint-staged": {
     "*.{ts,tsx}": "eslint --fix",

packages/2d/package.json

@@ -33,8 +33,7 @@
     "@revideo/ui": "0.5.9",
     "clsx": "^2.0.0",
     "jsdom": "^22.1.0",
-    "preact": "^10.19.2",
-    "vitest": "^0.34.6"
+    "preact": "^10.19.2"
   },
   "dependencies": {
     "@codemirror/language": "^6.10.1",

packages/2d/src/lib/components/Audio.ts

@@ -1,4 +1,4 @@
-import {DependencyContext, PlaybackState, viaProxy} from '@revideo/core';
+import {DependencyContext, PlaybackState} from '@revideo/core';
 import {computed, nodeName} from '../decorators';
 import {Media, MediaProps} from './Media';
 
@@ -24,7 +24,7 @@ export class Audio extends Media {
 
   @computed()
   protected audio(): HTMLAudioElement {
-    const src = viaProxy(this.fullSource());
+    const src = this.src();
     const key = `${this.key}/${src}`;
     let audio = Audio.pool[key];
     if (!audio) {

packages/2d/src/lib/components/Img.ts

@@ -9,13 +9,11 @@ import {
   SimpleSignal,
   Vector2,
   useLogger,
-  viaProxy,
 } from '@revideo/core';
 import {computed, initial, nodeName, signal} from '../decorators';
 import {DesiredLength} from '../partials';
 import {drawImage} from '../utils';
-import {Asset} from './Asset';
-import {RectProps} from './Rect';
+import {Rect, RectProps} from './Rect';
 import imageWithoutSource from './__logs__/image-without-source.md';
 
 export interface ImgProps extends RectProps {
@@ -67,7 +65,7 @@ export interface ImgProps extends RectProps {
  * ```
  */
 @nodeName('Img')
-export class Img extends Asset {
+export class Img extends Rect {
   private static pool: Record<string, HTMLImageElement> = {};
 
   static {
@@ -82,6 +80,24 @@ export class Img extends Asset {
     }
   }
 
+  /**
+   * The source of this image.
+   *
+   * @example
+   * Using a local image:
+   * ```tsx
+   * import image from './example.png';
+   * // ...
+   * view.add(<Img src={image} />)
+   * ```
+   * Loading an image from the internet:
+   * ```tsx
+   * view.add(<Img src="https://example.com/image.png" />)
+   * ```
+   */
+  @signal()
+  public declare readonly src: SimpleSignal<string, this>;
+
   /**
    * The alpha value of this image.
    *
@@ -132,39 +148,32 @@ export class Img extends Asset {
 
   @computed()
   protected image(): HTMLImageElement {
-    const rawSrc = this.fullSource();
-    let src = '';
-    let key = '';
-    if (rawSrc) {
-      key = viaProxy(rawSrc);
-      const url = new URL(key, window.location.origin);
-      if (url.origin === window.location.origin) {
-        const hash = this.view().assetHash();
-        url.searchParams.set('asset-hash', hash);
-      }
-      src = url.toString();
+    const src = this.src();
+    const url = new URL(src, window.location.origin);
+    if (url.origin === window.location.origin) {
+      const hash = this.view().assetHash();
+      url.searchParams.set('asset-hash', hash);
     }
 
-    let image = Img.pool[key];
+    let image = Img.pool[src];
     if (!image) {
       image = document.createElement('img');
       image.crossOrigin = 'anonymous';
       image.src = src;
-      Img.pool[key] = image;
+      Img.pool[src] = image;
     }
 
     if (!image.complete) {
       DependencyContext.collectPromise(
         new Promise((resolve, reject) => {
           image.addEventListener('load', resolve);
           image.addEventListener('error', () =>
+            // TODO: example for error handling inside DependencyContext (this shouldn't be UI specific)
             reject(
               new DetailedError({
                 message: `Failed to load an image`,
                 remarks: `\
 The <code>src</code> property was set to:
-<pre><code>${rawSrc}</code></pre>
-...which resolved to the following url:
 <pre><code>${src}</code></pre>
 Make sure that source is correct and that the image exists.<br/>
 <a target='_blank' href='https://motioncanvas.io/docs/media#images'>Learn more</a>

packages/2d/src/lib/components/Layout.ts

@@ -962,9 +962,9 @@ export class Layout extends Node {
 
   @computed()
   protected applyFont() {
-    const loadingFonts = Array.from(document.fonts).filter(
-      font => font.status === 'loading',
-    );
+    const loadingFonts = document.fonts
+      ? Array.from(document.fonts).filter(font => font.status === 'loading')
+      : [];
     if (loadingFonts.length > 0) {
       DependencyContext.collectPromise(
         (async () => {

packages/2d/src/lib/components/Media.ts

@@ -7,11 +7,9 @@ import {
   isReactive,
   useLogger,
   useThread,
-  viaProxy,
 } from '@revideo/core';
 import {computed, initial, nodeName, signal} from '../decorators';
-import {Asset} from './Asset';
-import {RectProps} from './Rect';
+import {Rect, RectProps} from './Rect';
 import reactivePlaybackRate from './__logs__/reactive-playback-rate.md';
 
 export interface MediaProps extends RectProps {
@@ -26,7 +24,10 @@ export interface MediaProps extends RectProps {
 }
 
 @nodeName('Media')
-export abstract class Media extends Asset {
+export abstract class Media extends Rect {
+  @signal()
+  public declare readonly src: SimpleSignal<string, this>;
+
   @initial(false)
   @signal()
   public declare readonly loop: SimpleSignal<boolean, this>;
@@ -161,7 +162,7 @@ export abstract class Media extends Asset {
 
   @computed()
   protected amplify(node: HTMLMediaElement, volume: number) {
-    const key = `${viaProxy(this.fullSource())}/${this.key}`;
+    const key = `${this.src()}/${this.key}`;
 
     if (Media.amplificationPool[key]) {
       Media.amplificationPool[key].gainNode.gain.value = volume;

packages/2d/src/lib/components/Rive.ts

@@ -1,10 +1,4 @@
-import {
-  BBox,
-  SignalValue,
-  SimpleSignal,
-  useThread,
-  viaProxy,
-} from '@revideo/core';
+import {BBox, SignalValue, SimpleSignal, useThread} from '@revideo/core';
 import RiveInitializer, {
   Artboard,
   File,
@@ -13,8 +7,7 @@ import RiveInitializer, {
   RiveCanvas,
 } from '@rive-app/canvas-advanced';
 import {computed, initial, nodeName, signal} from '../decorators';
-import {Asset} from './Asset';
-import {RectProps} from './Rect';
+import {Rect, RectProps} from './Rect';
 
 export interface RiveProps extends RectProps {
   src?: SignalValue<string>;
@@ -31,7 +24,10 @@ interface RiveInstance {
 }
 
 @nodeName('Rive')
-export class Rive extends Asset {
+export class Rive extends Rect {
+  @signal()
+  public declare readonly src: SimpleSignal<string, this>;
+
   @initial(0)
   @signal()
   public declare readonly artboardId: SimpleSignal<number | string, this>;
@@ -57,7 +53,7 @@ export class Rive extends Asset {
 
   @computed()
   private async rive(): Promise<RiveInstance> {
-    const src = viaProxy(this.fullSource());
+    const src = this.src();
     const rive = await RiveInitializer({
       locateFile: () => {
         return '/@rive-wasm';

packages/2d/src/lib/components/TxtLeaf.ts

@@ -15,7 +15,6 @@ import {
 } from '../decorators';
 import {Shape, ShapeProps} from './Shape';
 import {Txt} from './Txt';
-import {View2D} from './View2D';
 
 export interface TxtLeafProps extends ShapeProps {
   children?: string;
@@ -24,13 +23,6 @@ export interface TxtLeafProps extends ShapeProps {
 
 @nodeName('TxtLeaf')
 export class TxtLeaf extends Shape {
-  @lazy(() => {
-    const formatter = document.createElement('span');
-    View2D.shadowRoot.append(formatter);
-    return formatter;
-  })
-  protected static formatter: HTMLDivElement;
-
   @lazy(() => {
     try {
       return new (Intl as any).Segmenter(undefined, {

packages/2d/src/lib/components/Video.ts

@@ -5,7 +5,6 @@ import {
   SerializedVector2,
   SignalValue,
   SimpleSignal,
-  viaProxy,
 } from '@revideo/core';
 import Hls from 'hls.js';
 import {computed, initial, nodeName, signal} from '../decorators';
@@ -112,7 +111,7 @@ export class Video extends Media {
 
   @computed()
   private video(): HTMLVideoElement {
-    const src = viaProxy(this.fullSource());
+    const src = this.src();
     const key = `${this.key}/${src}`;
     let video = Video.pool[key];
     if (!video) {
@@ -336,7 +335,7 @@ export class Video extends Media {
   private detectFileType() {
     return DependencyContext.collectPromise(
       (async () => {
-        const src = this.fullSource();
+        const src = this.src();
         const extension = src.split('?')[0].split('.').pop()?.toLowerCase();
 
         if (

packages/2d/src/lib/components/View2D.ts

@@ -11,6 +11,7 @@ export interface View2DProps extends RectProps {
 
 @nodeName('View2D')
 export class View2D extends Rect {
+  // TODO: scope this to individual player
   @lazy(() => {
     const frameID = 'revideo-2d-frame';
     let frame = document.querySelector<HTMLDivElement>(`#${frameID}`);

packages/2d/src/lib/components/__tests__/mockScene2D.ts

@@ -3,14 +3,12 @@ import {
   PlaybackManager,
   PlaybackStatus,
   ThreadGeneratorFactory,
-  ValueDispatcher,
   Vector2,
   endPlayback,
   endScene,
   startPlayback,
   startScene,
 } from '@revideo/core';
-import {ReadOnlyTimeEvents} from '@revideo/core/lib/scenes/timeEvents';
 import {afterAll, beforeAll, beforeEach} from 'vitest';
 import {Scene2D, makeScene2D} from '../../scenes';
 import {View2D} from '../View2D';
@@ -26,16 +24,14 @@ export function mockScene2D() {
   const playback = new PlaybackManager();
   const status = new PlaybackStatus(playback);
   const description = {
-    ...makeScene2D(function* () {
+    ...makeScene2D('scene 1', function* () {
       // do nothing
     }),
     name: 'test',
     size: new Vector2(1920, 1080),
     resolutionScale: 1,
-    timeEventsClass: ReadOnlyTimeEvents,
     playback: status,
   } as unknown as FullSceneDescription<ThreadGeneratorFactory<View2D>>;
-  description.onReplaced = new ValueDispatcher(description);
   const scene = new Scene2D(description);
 
   beforeAll(() => {

packages/2d/src/lib/partials/Pattern.ts

@@ -9,7 +9,6 @@ export type CanvasRepetition =
   | 'repeat-y'
   | 'no-repeat';
 
-// TODO Support custom transformation matrices
 export interface PatternProps {
   image: CanvasImageSource;
   repetition?: CanvasRepetition;

packages/2d/src/lib/scenes/Scene2D.ts

@@ -170,7 +170,7 @@ export class Scene2D extends GeneratorScene<View2D> implements Inspectable {
       ...playingVideos.map(vid => ({
         key: vid.key,
         type: 'video' as const,
-        src: vid.getUrl(),
+        src: vid.src(),
         decoder: vid.decoder(),
         playbackRate:
           typeof vid.playbackRate === 'function'
@@ -186,7 +186,7 @@ export class Scene2D extends GeneratorScene<View2D> implements Inspectable {
       ...playingAudios.map(audio => ({
         key: audio.key,
         type: 'audio' as const,
-        src: audio.fullSource(),
+        src: audio.src(),
         playbackRate:
           typeof audio.playbackRate === 'function'
             ? audio.playbackRate()