makeScene2D anywhere

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

@@ -1,19 +1,24 @@
 import {
   createSceneMetadata,
-  DescriptionOf,
+  FullSceneDescription,
   ThreadGeneratorFactory,
 } from '@revideo/core';
 import type {View2D} from '../components';
 import {Scene2D} from './Scene2D';
 
-export function makeScene2D(
-  runner: ThreadGeneratorFactory<View2D>,
-): DescriptionOf<Scene2D> {
+export function makeScene2D(runner: ThreadGeneratorFactory<View2D>) {
   return {
     klass: Scene2D,
     config: runner,
     stack: new Error().stack,
     meta: createSceneMetadata(),
     plugins: ['@revideo/2d/editor'],
-  };
+
+    /**
+     * We need to cast this to `FullSceneDescription` because all makeScene2D calls
+     * are transformed into `FullSceneDescription` by one of the vite plugins.
+     *
+     * This transformation happens inside of `/packages/vite-plugin/src/partials/scenes.ts`.
+     */
+  } as unknown as FullSceneDescription;
 }

packages/core/project.d.ts

@@ -21,9 +21,4 @@ declare module '*.glsl' {
   export = value;
 }
 
-declare module '*?scene' {
-  const value: import('./lib/scenes/Scene').FullSceneDescription;
-  export = value;
-}
-
 declare type Callback = (...args: any[]) => void;

packages/core/src/app/Project.ts

@@ -13,13 +13,9 @@ export interface ProjectSettings {
   /**
    * A list of scene descriptions that make up the project.
    *
-   * @remarks
-   * A full scene description can be obtained by loading a scene module with a
-   * `?scene` query parameter.
-   *
    * @example
    * ```ts
-   * import exampleScene from './example?scene';
+   * import exampleScene from './example';
    *
    * export default makeProject({
    *   scenes: [exampleScene],

packages/create/template-2d-js/src/project.js

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import example from './scenes/example?scene';
+import example from './scenes/example';
 
 export default makeProject({
   scenes: [example],

packages/create/template-2d-ts/src/project.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import example from './scenes/example?scene';
+import example from './scenes/example';
 
 export default makeProject({
   scenes: [example],

packages/docs/docs/advanced/custom-font.mdx

@@ -30,7 +30,7 @@ Then, in `project.ts`, import the css file.
 ```ts
 import {makeProject} from '@revideo/core';
 
-import example from './scenes/example?scene';
+import example from './scenes/example';
 
 import './global.css'; // <- import the css
 

packages/docs/docs/getting-started/quickstart.mdx

@@ -114,7 +114,7 @@ our example, this configuration is declared in `src/project.ts`:
 ```ts title="src/project.ts"
 import {makeProject} from '@revideo/core';
 
-import example from './scenes/example?scene';
+import example from './scenes/example';
 
 export default makeProject({
   scenes: [example],

packages/e2e/tests/project.ts

@@ -1,7 +1,7 @@
 import {makeProject} from '@revideo/core';
 
-import circle from './scenes/circle?scene';
-import rect from './scenes/rect?scene';
+import circle from './scenes/circle';
+import rect from './scenes/rect';
 
 export default makeProject({
   scenes: [circle, rect],

packages/examples/src/code-block.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/code-block?scene';
+import scene from './scenes/code-block';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/components.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/components?scene';
+import scene from './scenes/components';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/layout-group.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/layout-group?scene';
+import scene from './scenes/layout-group';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/layout.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import layout from './scenes/layout?scene';
+import layout from './scenes/layout';
 
 export default makeProject({
   scenes: [layout],

packages/examples/src/logging.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/logging?scene';
+import scene from './scenes/logging';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/media-image.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/media-image?scene';
+import scene from './scenes/media-image';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/media-video.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/media-video?scene';
+import scene from './scenes/media-video';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/node-signal.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/node-signal?scene';
+import scene from './scenes/node-signal';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/positioning.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import node from './scenes/positioning?scene';
+import node from './scenes/positioning';
 
 export default makeProject({
   scenes: [node],

packages/examples/src/presentation.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/presentation?scene';
+import scene from './scenes/presentation';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/quickstart.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/quickstart?scene';
+import scene from './scenes/quickstart';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/random.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/random?scene';
+import scene from './scenes/random';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/tex.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/tex?scene';
+import scene from './scenes/tex';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/transitions.ts

@@ -1,7 +1,7 @@
 import {makeProject} from '@revideo/core';
 
-import first from './scenes/transitions-first?scene';
-import second from './scenes/transitions-second?scene';
+import first from './scenes/transitions-first';
+import second from './scenes/transitions-second';
 
 export default makeProject({
   scenes: [first, second],

packages/examples/src/tweening-color.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/tweening-color?scene';
+import scene from './scenes/tweening-color';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/tweening-cubic.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/tweening-cubic?scene';
+import scene from './scenes/tweening-cubic';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/tweening-linear.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/tweening-linear?scene';
+import scene from './scenes/tweening-linear';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/tweening-save-restore.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/tweening-save-restore?scene';
+import scene from './scenes/tweening-save-restore';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/tweening-spring.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/tweening-spring?scene';
+import scene from './scenes/tweening-spring';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/tweening-vector.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/tweening-vector?scene';
+import scene from './scenes/tweening-vector';
 
 export default makeProject({
   scenes: [scene],

packages/examples/src/tweening-visualiser.ts

@@ -1,6 +1,6 @@
 import {makeProject} from '@revideo/core';
 
-import scene from './scenes/tweening-visualiser?scene';
+import scene from './scenes/tweening-visualiser';
 
 export default makeProject({
   scenes: [scene],

packages/template/src/project.meta

@@ -21,7 +21,7 @@
     "resolutionScale": 1,
     "colorSpace": "srgb",
     "exporter": {
-      "name": "@motion-canvas/ffmpeg",
+      "name": "@revideo/ffmpeg",
       "options": {
         "fastStart": true,
         "includeAudio": true

packages/template/src/project.ts

@@ -1,8 +1,7 @@
 import {makeProject} from '@revideo/core';
-
-import example from './scenes/example?scene';
+import {scene, scene2} from './scene';
 
 export default makeProject({
   experimentalFeatures: true,
-  scenes: [example],
+  scenes: [scene, scene2],
 });

packages/template/src/scenes/example.meta → packages/template/src/scene.meta

@@ -3,7 +3,7 @@
   "timeEvents": [
     {
       "name": "rect",
-      "targetTime": 0.6792665726375177
+      "targetTime": 0.9156612868172298
     }
   ],
   "seed": 3073416149

packages/template/src/scenes/example.tsx → packages/template/src/scene.tsx

@@ -8,7 +8,22 @@ import {
   waitUntil,
 } from '@revideo/core';
 
-export default makeScene2D(function* (view) {
+export const scene = makeScene2D(function* (view) {
+  const rect = createRef<Rect>();
+
+  view.add(
+    <Rect ref={rect} size={320} radius={80} smoothCorners fill={'#f3303f'} />,
+  );
+
+  yield* waitUntil('rect');
+  yield* rect().scale(2, 1, easeInOutExpo).to(1, 0.6, easeInExpo);
+  rect().fill('#ffa56d');
+  yield* all(rect().ripple(1));
+  yield* waitFor(0.3);
+});
+
+/* meta=./scene2.meta */
+export const scene2 = makeScene2D(function* (view) {
   const rect = createRef<Rect>();
 
   view.add(

packages/template/src/scene2.meta

@@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "timeEvents": [
+    {
+      "name": "rect",
+      "targetTime": 0.9792357585408316
+    }
+  ],
+  "seed": 3073416149
+}