feat: extract konva to separate package (#60)

This PR extracts all Konva-related modules into their own package.

BREAKING CHANGE: change to import paths

See [the migration guide](https://motion-canvas.github.io/guides/migration/12.0.0) for more info.

commitlint.config.js

@@ -5,7 +5,7 @@ module.exports = {
     'scope-enum': [
       2,
       'always',
-      ['core', 'create', 'docs', 'ui', 'vite-plugin'],
+      ['core', 'create', 'docs', 'legacy', 'ui', 'vite-plugin'],
     ],
   },
 };

package-lock.json

@@ -4915,6 +4915,10 @@
       "resolved": "packages/docs",
       "link": true
     },
+    "node_modules/@motion-canvas/legacy": {
+      "resolved": "packages/legacy",
+      "link": true
+    },
     "node_modules/@motion-canvas/template": {
       "resolved": "packages/template",
       "link": true
@@ -22419,17 +22423,12 @@
     },
     "packages/core": {
       "name": "@motion-canvas/core",
-      "version": "10.2.0",
+      "version": "11.1.0",
       "license": "MIT",
       "dependencies": {
-        "@types/prismjs": "^1.26.0",
-        "@types/three": "^0.141.0",
         "colorjs.io": "^0.3.0",
-        "konva": "^8.3.9",
         "mix-color": "^1.1.2",
-        "mp4box": "^0.5.2",
-        "prismjs": "^1.28.0",
-        "three": "^0.141.0"
+        "mp4box": "^0.5.2"
       },
       "devDependencies": {
         "@types/dom-webcodecs": "^0.1.4",
@@ -22448,7 +22447,7 @@
     },
     "packages/create": {
       "name": "@motion-canvas/create",
-      "version": "10.2.0",
+      "version": "11.1.0",
       "license": "MIT",
       "dependencies": {
         "prompts": "^2.4.2"
@@ -22457,9 +22456,9 @@
         "create-motion-canvas": "index.js"
       },
       "devDependencies": {
-        "@motion-canvas/core": "^10.2.0",
-        "@motion-canvas/ui": "^10.2.0",
-        "@motion-canvas/vite-plugin": "^10.1.0"
+        "@motion-canvas/core": "^11.1.0",
+        "@motion-canvas/ui": "^11.1.0",
+        "@motion-canvas/vite-plugin": "^11.1.0"
       }
     },
     "packages/docs": {
@@ -22487,6 +22486,25 @@
         "node": ">=16.14"
       }
     },
+    "packages/legacy": {
+      "name": "@motion-canvas/legacy",
+      "version": "11.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@types/prismjs": "^1.26.0",
+        "@types/three": "^0.141.0",
+        "konva": "^8.3.9",
+        "prismjs": "^1.28.0",
+        "three": "^0.141.0"
+      },
+      "devDependencies": {
+        "@motion-canvas/core": "*",
+        "typescript": "^4.7.4"
+      },
+      "peerDependencies": {
+        "@motion-canvas/core": "*"
+      }
+    },
     "packages/template": {
       "name": "@motion-canvas/template",
       "version": "0.0.0",
@@ -22502,10 +22520,10 @@
     },
     "packages/ui": {
       "name": "@motion-canvas/ui",
-      "version": "10.2.0",
+      "version": "11.1.0",
       "license": "MIT",
       "devDependencies": {
-        "@motion-canvas/core": "^10.2.0",
+        "@motion-canvas/core": "^11.1.0",
         "@preact/preset-vite": "^2.3.0",
         "preact": "10.7.3",
         "typescript": "^4.6.4",
@@ -22527,7 +22545,7 @@
     },
     "packages/vite-plugin": {
       "name": "@motion-canvas/vite-plugin",
-      "version": "10.1.0",
+      "version": "11.1.0",
       "license": "MIT",
       "dependencies": {
         "mime-types": "^2.1.35"
@@ -26271,18 +26289,13 @@
       "requires": {
         "@types/dom-webcodecs": "^0.1.4",
         "@types/jest": "^28.1.4",
-        "@types/prismjs": "^1.26.0",
-        "@types/three": "^0.141.0",
         "canvas-5-polyfill": "^0.1.5",
         "colorjs.io": "^0.3.0",
         "jest": "^28.1.2",
         "jest-canvas-mock": "^2.4.0",
         "jest-environment-jsdom": "^28.1.2",
-        "konva": "^8.3.9",
         "mix-color": "^1.1.2",
         "mp4box": "^0.5.2",
-        "prismjs": "^1.28.0",
-        "three": "^0.141.0",
         "ts-jest": "^28.0.5",
         "typescript": "^4.7.4",
         "vite": "^3.0.5"
@@ -26291,9 +26304,9 @@
     "@motion-canvas/create": {
       "version": "file:packages/create",
       "requires": {
-        "@motion-canvas/core": "^10.2.0",
-        "@motion-canvas/ui": "^10.2.0",
-        "@motion-canvas/vite-plugin": "^10.1.0",
+        "@motion-canvas/core": "^11.1.0",
+        "@motion-canvas/ui": "^11.1.0",
+        "@motion-canvas/vite-plugin": "^11.1.0",
         "prompts": "^2.4.2"
       }
     },
@@ -26316,6 +26329,18 @@
         "typescript": "^4.7.4"
       }
     },
+    "@motion-canvas/legacy": {
+      "version": "file:packages/legacy",
+      "requires": {
+        "@motion-canvas/core": "*",
+        "@types/prismjs": "^1.26.0",
+        "@types/three": "^0.141.0",
+        "konva": "^8.3.9",
+        "prismjs": "^1.28.0",
+        "three": "^0.141.0",
+        "typescript": "^4.7.4"
+      }
+    },
     "@motion-canvas/template": {
       "version": "file:packages/template",
       "requires": {
@@ -26328,7 +26353,7 @@
     "@motion-canvas/ui": {
       "version": "file:packages/ui",
       "requires": {
-        "@motion-canvas/core": "^10.2.0",
+        "@motion-canvas/core": "^11.1.0",
         "@preact/preset-vite": "^2.3.0",
         "preact": "10.7.3",
         "typescript": "^4.6.4",

packages/core/package.json

@@ -26,14 +26,9 @@
     "vite": "^3.0.5"
   },
   "dependencies": {
-    "@types/prismjs": "^1.26.0",
-    "@types/three": "^0.141.0",
     "colorjs.io": "^0.3.0",
-    "konva": "^8.3.9",
     "mix-color": "^1.1.2",
-    "mp4box": "^0.5.2",
-    "prismjs": "^1.28.0",
-    "three": "^0.141.0"
+    "mp4box": "^0.5.2"
   },
   "devDependencies": {
     "@types/dom-webcodecs": "^0.1.4",

packages/core/project.d.ts

@@ -1,9 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars,@typescript-eslint/no-namespace */
 /// <reference types="vite/client" />
-/// <reference types="@motion-canvas/core/lib/patches/Factory" />
-/// <reference types="@motion-canvas/core/lib/patches/Node" />
-/// <reference types="@motion-canvas/core/lib/patches/Shape" />
-/// <reference types="@motion-canvas/core/lib/patches/Container" />
 
 declare module '*?img' {
   const value: Promise<HTMLImageElement>;
@@ -30,13 +26,6 @@ declare module '*?scene' {
   export = value;
 }
 
-declare namespace JSX {
-  type ElementClass = import('konva/lib/Node').Node;
-  interface ElementChildrenAttribute {
-    children: unknown;
-  }
-}
-
 declare module 'colorjs.io' {
   const noTypesYet: any;
   export default noTypesYet;

packages/core/src/decorators/index.ts

@@ -1,4 +1,2 @@
-export * from './cached';
 export * from './decorate';
-export * from './KonvaNode';
 export * from './threadable';

packages/core/src/globals.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-unused-vars,@typescript-eslint/no-namespace */
+
+declare type Callback = (...args: unknown[]) => void;
+
+declare module 'colorjs.io' {
+  const noTypesYet: any;
+  export default noTypesYet;
+}

packages/core/src/helpers/index.ts

@@ -1,2 +1 @@
-export * from './CanvasHelper';
 export * from './GeneratorHelper';

packages/core/src/scenes/index.ts

@@ -1,6 +1,5 @@
 export * from './GeneratorScene';
 export * from './Inspectable';
-export * from './KonvaScene';
 export * from './Scene';
 export * from './SceneState';
 export * from './Threadable';

packages/core/src/utils/index.ts

@@ -1,4 +1,3 @@
-export * from './slide';
 export * from './useAnimator';
 export * from './useProject';
 export * from './useRef';

packages/core/tsconfig.project.json

@@ -10,7 +10,5 @@
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
-    "jsx": "react-jsx",
-    "jsxImportSource": "@motion-canvas/core/lib"
   }
 }

packages/create/template-konva-js/package.json

@@ -7,7 +7,8 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@motion-canvas/core": "*"
+    "@motion-canvas/core": "*",
+    "@motion-canvas/legacy": "*"
   },
   "devDependencies": {
     "@motion-canvas/ui": "*",

packages/create/template-konva-js/src/scenes/example.jsx

@@ -1,4 +1,4 @@
-import {makeKonvaScene} from '@motion-canvas/core/lib/scenes';
+import {makeKonvaScene} from '@motion-canvas/legacy/lib/scenes';
 import {waitFor} from '@motion-canvas/core/lib/flow';
 
 export default makeKonvaScene(function* (view) {

packages/create/template-konva-js/vite.config.js

@@ -1,10 +1,12 @@
 import {defineConfig} from 'vite';
 import motionCanvas from '@motion-canvas/vite-plugin';
+import legacyRenderer from '@motion-canvas/legacy/vite';
 
 export default defineConfig({
   plugins: [
     motionCanvas({
       project: './src/project.js',
     }),
+    legacyRenderer(),
   ],
 });

packages/create/template-konva-ts/package.json

@@ -7,7 +7,8 @@
     "build": "tsc && vite build"
   },
   "dependencies": {
-    "@motion-canvas/core": "*"
+    "@motion-canvas/core": "*",
+    "@motion-canvas/legacy": "*"
   },
   "devDependencies": {
     "@motion-canvas/ui": "*",

packages/create/template-konva-ts/src/motion-canvas.d.ts

@@ -1 +1 @@
-/// <reference types="@motion-canvas/core/project" />
+/// <reference types="@motion-canvas/legacy/project" />

packages/create/template-konva-ts/src/scenes/example.tsx

@@ -1,4 +1,4 @@
-import {makeKonvaScene} from '@motion-canvas/core/lib/scenes';
+import {makeKonvaScene} from '@motion-canvas/legacy/lib/scenes';
 import {waitFor} from '@motion-canvas/core/lib/flow';
 
 export default makeKonvaScene(function* (view) {

packages/create/template-konva-ts/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@motion-canvas/core/tsconfig.project.json",
+  "extends": "@motion-canvas/legacy/tsconfig.project.json",
   "compilerOptions": {
     "baseUrl": "src"
   },

packages/create/template-konva-ts/vite.config.ts

@@ -1,6 +1,7 @@
 import {defineConfig} from 'vite';
 import motionCanvas from '@motion-canvas/vite-plugin';
+import legacyRenderer from '@motion-canvas/legacy/vite';
 
 export default defineConfig({
-  plugins: [motionCanvas()],
+  plugins: [motionCanvas(), legacyRenderer()],
 });

packages/docs/.gitignore

@@ -7,7 +7,8 @@
 # Generated files
 .docusaurus
 .cache-loader
-docs/api
+docs/core-api
+docs/legacy-api
 
 # Misc
 .DS_Store

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

@@ -56,7 +56,7 @@ animations. Open `example.tsx` in a text editor, and replace all code in
 the file with the following snippet.
 
 ```tsx title="src/scenes/example.tsx"
-import {makeKonvaScene} from '@motion-canvas/core/lib/scenes';
+import {makeKonvaScene} from '@motion-canvas/legacy/lib/scenes';
 import {Circle} from 'konva/lib/shapes/Circle';
 import {useRef} from '@motion-canvas/core/lib/utils';
 
@@ -96,7 +96,7 @@ function.
 
 ```tsx
 // highlight-next-line
-import {makeKonvaScene} from '@motion-canvas/core/lib/scenes';
+import {makeKonvaScene} from '@motion-canvas/legacy/lib/scenes';
 
 // highlight-next-line
 export default makeKonvaScene(function* (view) {
@@ -118,7 +118,7 @@ In order to create an animation, we needed something to animate. For that, we
 used the Konva Circle component.
 
 ```tsx
-import {makeKonvaScene} from '@motion-canvas/core/lib/scenes';
+import {makeKonvaScene} from '@motion-canvas/legacy/lib/scenes';
 // highlight-next-line
 import {Circle} from 'konva/lib/shapes/Circle';
 
@@ -143,7 +143,7 @@ To animate the circle, we needed to store a reference to it. This is the purpose
 of the `useRef` call.
 
 ```tsx
-import {makeKonvaScene} from '@motion-canvas/core/lib/scenes';
+import {makeKonvaScene} from '@motion-canvas/legacy/lib/scenes';
 import {Circle} from 'konva/lib/shapes/Circle';
 // highlight-next-line
 import {useRef} from '@motion-canvas/core/lib/utils';
@@ -209,7 +209,7 @@ In our example, we used `yield*` so that the scene wouldn't end until the
 animation was completed.
 
 ```tsx
-import {makeKonvaScene} from '@motion-canvas/core/lib/scenes';
+import {makeKonvaScene} from '@motion-canvas/legacy/lib/scenes';
 import {Circle} from 'konva/lib/shapes/Circle';
 import {useRef} from '@motion-canvas/core/lib/utils';
 

packages/docs/docs/guides/migration/12.0.0.md

@@ -0,0 +1,106 @@
+---
+title: v12.0.0
+---
+
+# Migrating to version 12.0.0
+
+:::tip
+
+If you're starting a new project, you can quickly scaffold it using:
+
+```bash
+npm init @motion-canvas
+```
+
+:::
+
+## Install the new version
+
+Upgrade the versions of all motion-canvas packages in your `package.json` file:
+
+```diff
+- "@motion-canvas/core": "^11.0.0",
+- "@motion-canvas/ui": "^11.0.0",
+- "@motion-canvas/vite-plugin": "^11.0.0",
++ "@motion-canvas/core": "^12.0.0",
++ "@motion-canvas/ui": "^12.0.0",
++ "@motion-canvas/vite-plugin": "^12.0.0",
+```
+
+To apply the changes, run:
+
+```bash
+npm install
+```
+
+## Install the legacy package
+
+Since version 12, the Konva-based renderer has been moved to a separate package called
+`@motion-canvas/legacy`. To continue using it, it needs to be installed separately:
+
+```bash
+npm install @motion-canvas/legacy
+```
+
+## Configure Vite
+
+Add the following plugin in your Vite configuration:
+
+```diff title="vite.config.ts"
+  import {defineConfig} from 'vite';
+  import motionCanvas from '@motion-canvas/vite-plugin';
++ import legacyRenderer from '@motion-canvas/legacy/vite';
+
+  export default defineConfig({
+-   plugins: [motionCanvas()],
++   plugins: [motionCanvas(), legacyRenderer()],
+  });
+```
+
+## Update imports
+
+Change the necessary imports to use the legacy package:
+
+```diff title="src/scenes/example.tsx"
+- import {makeKonvaScene} from '@motion-canvas/core/lib/scenes';
++ import {makeKonvaScene} from '@motion-canvas/legacy/lib/scenes';
+```
+
+**Not all imports should be changed.** Only the following modules have been moved
+to the legacy package and must be updated:
+
+```ts
+// all exports from the following modules are now in the legacy package:
+import * from '@motion-canvas/core/lib/animations';
+import * from '@motion-canvas/core/lib/components';
+import * from '@motion-canvas/core/lib/styles';
+import * from '@motion-canvas/core/lib/themes';
+
+// only the listed exports from the following modules are now in the legacy package:
+import {slide} from '@motion-canvas/core/lib/utils';
+import {cached, getset, KonvaNode} from '@motion-canvas/core/lib/decorators';
+import {CanvasHelper} from '@motion-canvas/core/lib/helpers';
+import {makeKonvaScene, KonvaScene} from '@motion-canvas/core/lib/scenes';
+```
+
+## Configure TypeScript
+
+Change your `tsconfig.json` to extend the legacy package instead of core:
+
+```diff title="tsconfig.json"
+  {
+-   "extends": "@motion-canvas/core/tsconfig.project.json",
++   "extends": "@motion-canvas/legacy/tsconfig.project.json",
+    "compilerOptions": {
+      "baseUrl": "src"
+    },
+    "include": ["src"]
+  }
+```
+
+Similarly, change your types reference in `motion-canvas.d.ts`:
+
+```diff title="src/motion-canvas.d.ts"
+- /// <reference types="@motion-canvas/core/project" />
++ /// <reference types="@motion-canvas/legacy/project" />
+```

packages/docs/docusaurus.config.js

@@ -114,7 +114,7 @@ const config = {
       {
         routeBasePath: '/',
         sidebarPath: 'sidebars.js',
-        exclude: ['**/api/*.md'],
+        exclude: ['**/core-api/*.md', '**/legacy-api/*.md'],
         editUrl: ({versionDocsDirPath, docPath}) =>
           `https://github.com/motion-canvas/motion-canvas/blob/main/${versionDocsDirPath}/${docPath}`,
       },
@@ -133,11 +133,11 @@ const config = {
     [
       'docusaurus-plugin-typedoc',
       {
+        id: 'core',
+        out: 'core-api',
         excludeExternals: true,
         entryPoints: [
           '../core/src',
-          '../core/src/animations',
-          '../core/src/components',
           '../core/src/decorators',
           '../core/src/events',
           '../core/src/flow',
@@ -145,8 +145,6 @@ const config = {
           '../core/src/media',
           '../core/src/player',
           '../core/src/scenes',
-          '../core/src/styles',
-          '../core/src/themes',
           '../core/src/threading',
           '../core/src/transitions',
           '../core/src/tweening',
@@ -156,6 +154,25 @@ const config = {
         tsconfig: '../core/tsconfig.build.json',
       },
     ],
+    [
+      'docusaurus-plugin-typedoc',
+      {
+        id: 'legacy',
+        out: 'legacy-api',
+        excludeExternals: true,
+        entryPoints: [
+          '../legacy/src/animations',
+          '../legacy/src/components',
+          '../legacy/src/decorators',
+          '../legacy/src/helpers',
+          '../legacy/src/scenes',
+          '../legacy/src/styles',
+          '../legacy/src/themes',
+          '../legacy/src/utils',
+        ],
+        tsconfig: '../legacy/tsconfig.json',
+      },
+    ],
   ],
 };
 

packages/docs/sidebars.js

@@ -1,45 +1,60 @@
 // @ts-check
 
+function createApiSidebar(name) {
+  return [
+    {
+      type: 'category',
+      label: 'Modules',
+      collapsed: false,
+      link: {
+        type: 'generated-index',
+        slug: name,
+      },
+      items: [{type: 'autogenerated', dirName: `${name}/modules`}],
+    },
+    {
+      type: 'category',
+      label: 'Classes',
+      link: {
+        type: 'generated-index',
+        slug: `${name}/classes`,
+      },
+      items: [{type: 'autogenerated', dirName: `${name}/classes`}],
+    },
+    {
+      type: 'category',
+      label: 'Enumerations',
+      link: {
+        type: 'generated-index',
+        slug: `${name}/enums`,
+      },
+      items: [{type: 'autogenerated', dirName: `${name}/enums`}],
+    },
+    {
+      type: 'category',
+      label: 'Interfaces',
+      link: {
+        type: 'generated-index',
+        slug: `${name}/interfaces`,
+      },
+      items: [{type: 'autogenerated', dirName: `${name}/interfaces`}],
+    },
+  ];
+}
+
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
   guides: [{type: 'autogenerated', dirName: 'guides'}],
   api: [
     {
       type: 'category',
-      label: 'Modules',
-      collapsed: false,
-      link: {
-        type: 'generated-index',
-        slug: 'api',
-      },
-      items: [{type: 'autogenerated', dirName: 'api/modules'}],
+      label: 'Core',
+      items: createApiSidebar('core-api'),
     },
     {
       type: 'category',
-      label: 'Classes',
-      link: {
-        type: 'generated-index',
-        slug: 'api/classes',
-      },
-      items: [{type: 'autogenerated', dirName: 'api/classes'}],
-    },
-    {
-      type: 'category',
-      label: 'Enumerations',
-      link: {
-        type: 'generated-index',
-        slug: 'api/enums',
-      },
-      items: [{type: 'autogenerated', dirName: 'api/enums'}],
-    },
-    {
-      type: 'category',
-      label: 'Interfaces',
-      link: {
-        type: 'generated-index',
-        slug: 'api/interfaces',
-      },
-      items: [{type: 'autogenerated', dirName: 'api/interfaces'}],
+      label: 'Legacy',
+      items: createApiSidebar('legacy-api'),
     },
   ],
 };

packages/legacy/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@motion-canvas/legacy",
+  "version": "11.1.0",
+  "description": "The legacy Motion Canvas renderer based on the Konva library",
+  "main": "lib/scenes/index.js",
+  "author": "motion-canvas",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc -w"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/motion-canvas"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/motion-canvas/motion-canvas.git"
+  },
+  "files": [
+    "lib"
+  ],
+  "peerDependencies": {
+    "@motion-canvas/core": "*",
+    "vite": "3.x"
+  },
+  "dependencies": {
+    "@types/prismjs": "^1.26.0",
+    "@types/three": "^0.141.0",
+    "colorjs.io": "^0.3.0",
+    "konva": "^8.3.9",
+    "prismjs": "^1.28.0",
+    "three": "^0.141.0"
+  },
+  "devDependencies": {
+    "@motion-canvas/core": "*",
+    "typescript": "^4.7.4",
+    "vite": "^3.0.9"
+  }
+}

packages/legacy/project.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-unused-vars,@typescript-eslint/no-namespace */
+/// <reference types="@motion-canvas/core/project" />
+/// <reference types="@motion-canvas/legacy/lib/patches/Factory" />
+/// <reference types="@motion-canvas/legacy/lib/patches/Node" />
+/// <reference types="@motion-canvas/legacy/lib/patches/Shape" />
+/// <reference types="@motion-canvas/legacy/lib/patches/Container" />
+
+declare namespace JSX {
+  type ElementClass = import('konva/lib/Node').Node;
+  interface ElementChildrenAttribute {
+    children: unknown;
+  }
+}

packages/legacy/src/animations/show.ts

@@ -1,7 +1,7 @@
 import type {Node} from 'konva/lib/Node';
 import {Surface} from '../components';
-import {Origin, originPosition} from '../types';
-import {all} from '../flow';
+import {Origin, originPosition} from '@motion-canvas/core/lib/types';
+import {all} from '@motion-canvas/core/lib/flow';
 import {Vector2d} from 'konva/lib/types';
 import {
   easeInOutCubic,
@@ -9,9 +9,9 @@ import {
   easeOutExpo,
   map,
   tween,
-} from '../tweening';
-import {decorate, threadable} from '../decorators';
-import {ThreadGenerator} from '../threading';
+} from '@motion-canvas/core/lib/tweening';
+import {decorate, threadable} from '@motion-canvas/core/lib/decorators';
+import {ThreadGenerator} from '@motion-canvas/core/lib/threading';
 
 decorate(showTop, threadable());
 /**

packages/legacy/src/animations/surfaceFrom.ts

@@ -1,5 +1,5 @@
 import type {Vector2d} from 'konva/lib/types';
-import type {ThreadGenerator} from '../threading';
+import type {ThreadGenerator} from '@motion-canvas/core/lib/threading';
 import type {Surface, SurfaceMask} from '../components';
 import {
   calculateRatio,
@@ -8,8 +8,8 @@ import {
   easeInOutQuint,
   rectArcTween,
   tween,
-} from '../tweening';
-import {decorate, threadable} from '../decorators';
+} from '@motion-canvas/core/lib/tweening';
+import {decorate, threadable} from '@motion-canvas/core/lib/decorators';
 
 /**
  * Configuration for {@link surfaceFrom}.

packages/legacy/src/animations/surfaceTransition.ts

@@ -7,9 +7,9 @@ import {
   easeInOutQuint,
   rectArcTween,
   tween,
-} from '../tweening';
-import {decorate, threadable} from '../decorators';
-import {ThreadGenerator} from '../threading';
+} from '@motion-canvas/core/lib/tweening';
+import {decorate, threadable} from '@motion-canvas/core/lib/decorators';
+import {ThreadGenerator} from '@motion-canvas/core/lib/threading';
 
 /**
  * Configuration for {@link surfaceTransition}.

packages/legacy/src/components/Align.tsx

@@ -1,6 +1,6 @@
 import type {Node} from 'konva/lib/Node';
-import {getOriginDelta, Origin} from '../types';
-import {useScene} from '../utils';
+import {getOriginDelta, Origin} from '@motion-canvas/core/lib/types';
+import {useScene} from '@motion-canvas/core/lib/utils';
 
 interface AlignConfig {
   origin?: Origin;

packages/legacy/src/components/AnimationClip.ts

@@ -1,12 +1,11 @@
-import {KonvaNode} from '../decorators';
-import {getset} from '../decorators/getset';
+import {KonvaNode, getset} from '../decorators';
 import {Sprite} from './Sprite';
 import {GetSet} from 'konva/lib/types';
 import {LinearLayout} from './LinearLayout';
-import {Center} from '../types';
+import {Center} from '@motion-canvas/core/lib/types';
 import {Surface, SurfaceConfig} from './Surface';
 import {getStyle, Style} from '../styles';
-import {ImageDataSource} from '../media';
+import {ImageDataSource} from '@motion-canvas/core/lib/media';
 
 export interface AnimationClipConfig extends SurfaceConfig {
   animation: ImageDataSource[];

packages/legacy/src/components/Arrow.ts

@@ -3,8 +3,7 @@ import {Shape, ShapeConfig} from 'konva/lib/Shape';
 import {Context} from 'konva/lib/Context';
 import {GetSet, Vector2d} from 'konva/lib/types';
 import {clamp} from 'three/src/math/MathUtils';
-import {KonvaNode} from '../decorators';
-import {getset} from '../decorators/getset';
+import {KonvaNode, getset} from '../decorators';
 
 export interface ArrowConfig extends ShapeConfig {
   radius?: number;

packages/legacy/src/components/ColorPicker.tsx

@@ -1,15 +1,14 @@
 import {LinearLayout, LinearLayoutConfig} from './LinearLayout';
 import {Rect} from 'konva/lib/shapes/Rect';
 import {Range, RangeConfig} from './Range';
-import {KonvaNode} from '../decorators';
-import {getset} from '../decorators/getset';
+import {KonvaNode, getset} from '../decorators';
 import {parseColor} from 'mix-color';
 import {Surface} from './Surface';
-import {Origin} from '../types';
+import {Origin} from '@motion-canvas/core/lib/types';
 import {Style} from '../styles';
 import {GetSet} from 'konva/lib/types';
-import {clampRemap} from '../tweening';
-import {makeRef} from '../utils';
+import {clampRemap} from '@motion-canvas/core/lib/tweening';
+import {makeRef} from '@motion-canvas/core/lib/utils';
 
 export interface ColorPickerConfig extends LinearLayoutConfig {
   previewColor?: string;

packages/legacy/src/components/Connection.ts

@@ -1,11 +1,11 @@
 import {Node} from 'konva/lib/Node';
-import {Center} from '../types';
+import {Center} from '@motion-canvas/core/lib/types';
 import {KonvaNode} from '../decorators';
 import {Pin} from './Pin';
 import {Group} from 'konva/lib/Group';
 import {ContainerConfig} from 'konva/lib/Container';
 import {Arrow} from './Arrow';
-import {map} from '../tweening';
+import {map} from '@motion-canvas/core/lib/tweening';
 import {useKonvaView} from '../scenes';
 
 export interface ConnectionConfig extends ContainerConfig {

packages/legacy/src/components/Grid.ts

@@ -1,7 +1,6 @@
 import {Context} from 'konva/lib/Context';
 import {GetSet} from 'konva/lib/types';
-import {KonvaNode} from '../decorators';
-import {getset} from '../decorators/getset';
+import {KonvaNode, getset} from '../decorators';
 import {CanvasHelper} from '../helpers';
 import {Shape, ShapeConfig} from 'konva/lib/Shape';
 

packages/legacy/src/components/LayeredLayout.ts

@@ -1,4 +1,4 @@
-import {Size} from '../types';
+import {Size} from '@motion-canvas/core/lib/types';
 import {Group} from 'konva/lib/Group';
 
 export class LayeredLayout extends Group {

packages/legacy/src/components/LayoutText.ts

@@ -1,10 +1,20 @@
 import {Text, TextConfig} from 'konva/lib/shapes/Text';
 import {GetSet, IRect, Vector2d} from 'konva/lib/types';
 import {ShapeGetClientRectConfig} from 'konva/lib/Shape';
-import {Origin, Size, Spacing, getOriginOffset} from '../types';
-import {Animator, tween, textTween, InterpolationFunction} from '../tweening';
-import {threadable} from '../decorators';
-import {getset} from '../decorators/getset';
+import {
+  Origin,
+  Size,
+  Spacing,
+  getOriginOffset,
+} from '@motion-canvas/core/lib/types';
+import {
+  Animator,
+  tween,
+  textTween,
+  InterpolationFunction,
+} from '@motion-canvas/core/lib/tweening';
+import {threadable} from '@motion-canvas/core/lib/decorators';
+import {getset} from '../decorators';
 
 export interface LayoutTextConfig extends TextConfig {
   minWidth?: number;

packages/legacy/src/components/LinearLayout.ts

@@ -1,10 +1,14 @@
 import {Group} from 'konva/lib/Group';
 import {GetSet} from 'konva/lib/types';
 import {Shape} from 'konva/lib/Shape';
-import {Center, getOriginOffset, Origin, Size} from '../types';
+import {
+  Center,
+  getOriginOffset,
+  Origin,
+  Size,
+} from '@motion-canvas/core/lib/types';
 import {ContainerConfig} from 'konva/lib/Container';
-import {KonvaNode} from '../decorators';
-import {getset} from '../decorators/getset';
+import {KonvaNode, getset} from '../decorators';
 import {Node} from 'konva/lib/Node';
 
 export interface LinearLayoutConfig extends ContainerConfig {

packages/legacy/src/components/Pin.ts

@@ -1,9 +1,13 @@
 import {Group} from 'konva/lib/Group';
 import {Container, ContainerConfig} from 'konva/lib/Container';
-import {Center, flipOrigin, getOriginDelta, Origin} from '../types';
+import {
+  Center,
+  flipOrigin,
+  getOriginDelta,
+  Origin,
+} from '@motion-canvas/core/lib/types';
 import {GetSet, IRect} from 'konva/lib/types';
-import {KonvaNode} from '../decorators';
-import {getset} from '../decorators/getset';
+import {KonvaNode, getset} from '../decorators';
 import {Node} from 'konva/lib/Node';
 import {useKonvaView} from '../scenes';
 

packages/legacy/src/components/PinnedLabel.tsx

@@ -1,8 +1,8 @@
-import {Reference, useRef} from '../utils';
+import {Reference, useRef} from '@motion-canvas/core/lib/utils';
 import {Node} from 'konva/lib/Node';
 import {LayoutText, LayoutTextConfig} from './LayoutText';
 import {Pin} from './Pin';
-import {Center, Origin} from '../types';
+import {Center, Origin} from '@motion-canvas/core/lib/types';
 
 interface PinnedLabelConfig extends LayoutTextConfig {
   children: string;

packages/legacy/src/components/Range.ts

@@ -1,10 +1,9 @@
 import {Context} from 'konva/lib/Context';
-import {KonvaNode} from '../decorators';
-import {getset} from '../decorators/getset';
+import {KonvaNode, getset} from '../decorators';
 import {CanvasHelper} from '../helpers';
 import {GetSet} from 'konva/lib/types';
 import {getFontColor, getStyle, Style} from '../styles';
-import {remap} from '../tweening';
+import {remap} from '@motion-canvas/core/lib/tweening';
 import {Shape, ShapeConfig} from 'konva/lib/Shape';
 
 export interface RangeConfig extends ShapeConfig {

packages/legacy/src/components/Sprite.ts

@@ -1,14 +1,18 @@
 import {Context} from 'konva/lib/Context';
 import {GetSet, Vector2d} from 'konva/lib/types';
-import {waitFor} from '../flow';
-import {cached, KonvaNode, threadable} from '../decorators';
-import {getset} from '../decorators/getset';
-import {GeneratorHelper} from '../helpers';
-import {InterpolationFunction, map, tween} from '../tweening';
-import {cancel, ThreadGenerator} from '../threading';
+import {waitFor} from '@motion-canvas/core/lib/flow';
+import {threadable} from '@motion-canvas/core/lib/decorators';
+import {cached, KonvaNode, getset} from '../decorators';
+import {GeneratorHelper} from '@motion-canvas/core/lib/helpers';
+import {
+  InterpolationFunction,
+  map,
+  tween,
+} from '@motion-canvas/core/lib/tweening';
+import {cancel, ThreadGenerator} from '@motion-canvas/core/lib/threading';
 import {parseColor} from 'mix-color';
 import {Shape, ShapeConfig} from 'konva/lib/Shape';
-import {getImageData, ImageDataSource} from '../media';
+import {getImageData, ImageDataSource} from '@motion-canvas/core/lib/media';
 
 export const SPRITE_CHANGE_EVENT = 'spriteChange';
 

packages/legacy/src/components/Surface.ts

@@ -1,12 +1,12 @@
 import {ContainerConfig} from 'konva/lib/Container';
-import {getOriginDelta, Origin, Size} from '../types';
+import {getOriginDelta, Origin, Size} from '@motion-canvas/core/lib/types';
 import {CanvasHelper} from '../helpers';
-import {easeOutExpo, linear, tween} from '../tweening';
+import {easeOutExpo, linear, tween} from '@motion-canvas/core/lib/tweening';
 import {GetSet} from 'konva/lib/types';
-import {KonvaNode, threadable} from '../decorators';
-import {getset} from '../decorators/getset';
+import {threadable} from '@motion-canvas/core/lib/decorators';
+import {KonvaNode, getset} from '../decorators';
 import {Node} from 'konva/lib/Node';
-import {Reference} from '../utils';
+import {Reference} from '@motion-canvas/core/lib/utils';
 import {Group} from 'konva/lib/Group';
 import {Shape} from 'konva/lib/Shape';
 import {Canvas} from 'konva/lib/Canvas';

packages/legacy/src/components/ThreeView.ts

@@ -1,11 +1,10 @@
-import {PossibleSpacing, Size} from '../types';
+import {PossibleSpacing, Size} from '@motion-canvas/core/lib/types';
 import {Util} from 'konva/lib/Util';
 import {Context} from 'konva/lib/Context';
 import * as THREE from 'three';
 import {CanvasHelper} from '../helpers';
 import {GetSet} from 'konva/lib/types';
-import {KonvaNode} from '../decorators';
-import {getset} from '../decorators/getset';
+import {KonvaNode, getset} from '../decorators';
 import {Shape, ShapeConfig} from 'konva/lib/Shape';
 
 export interface ThreeViewConfig extends ShapeConfig {

packages/legacy/src/components/Video.tsx

@@ -1,11 +1,12 @@
 import {Shape, ShapeConfig} from 'konva/lib/Shape';
-import {threadable} from '../decorators';
-import {getset} from '../decorators/getset';
+import {threadable} from '@motion-canvas/core/lib/decorators';
+import {getset} from '../decorators';
 import {Context} from 'konva/lib/Context';
 import {GetSet} from 'konva/lib/types';
-import {cancel, ThreadGenerator} from '../threading';
-import {waitFor} from '../flow';
-import {CanvasHelper, GeneratorHelper} from '../helpers';
+import {cancel, ThreadGenerator} from '@motion-canvas/core/lib/threading';
+import {waitFor} from '@motion-canvas/core/lib/flow';
+import {GeneratorHelper} from '@motion-canvas/core/lib/helpers';
+import {CanvasHelper} from '../helpers';
 
 interface VideoConfig extends ShapeConfig {
   frames: ImageBitmap[];

packages/legacy/src/components/code/Code.tsx

@@ -1,14 +1,14 @@
-import {cached, KonvaNode, threadable} from '../../decorators';
-import {getset} from '../../decorators/getset';
+import {cached, KonvaNode, getset} from '../../decorators';
 import {GetSet} from 'konva/lib/types';
 import PrismJS from 'prismjs';
 import {Context} from 'konva/lib/Context';
 import {Text, TextConfig} from 'konva/lib/shapes/Text';
 import {Util} from 'konva/lib/Util';
-import {easeInExpo, easeOutExpo, tween} from '../../tweening';
+import {easeInExpo, easeOutExpo, tween} from '@motion-canvas/core/lib/tweening';
 import {CodeTheme, CodeTokens} from './CodeTheme';
 import {JS_CODE_THEME} from '../../themes';
-import {ThreadGenerator} from '../../threading';
+import {ThreadGenerator} from '@motion-canvas/core/lib/threading';
+import {threadable} from '@motion-canvas/core/lib/decorators';
 
 type CodePoint = [number, number];
 type CodeRange = [CodePoint, CodePoint];

packages/legacy/src/decorators/getset.ts

@@ -1,5 +1,5 @@
 import {Factory} from 'konva/lib/Factory';
-import {TweenProvider} from '../tweening';
+import {TweenProvider} from '@motion-canvas/core/lib/tweening';
 
 export function getset<T = unknown>(
   defaultValue?: T,

packages/legacy/src/decorators/index.ts

@@ -0,0 +1,3 @@
+export * from './cached';
+export * from './getset';
+export * from './KonvaNode';

packages/legacy/src/globals.d.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars,@typescript-eslint/no-namespace */
+/// <reference types="@motion-canvas/core/project" />
 
 declare namespace JSX {
   type ElementClass = import('konva/lib/Node').Node;
@@ -6,12 +7,3 @@ declare namespace JSX {
     children: unknown;
   }
 }
-
-declare type Callback = (...args: unknown[]) => void;
-
-declare const PROJECT_FILE_NAME: string;
-
-declare module 'colorjs.io' {
-  const noTypesYet: any;
-  export default noTypesYet;
-}

packages/legacy/src/helpers/CanvasHelper.ts

@@ -1,5 +1,5 @@
 import type {Context} from 'konva/lib/Context';
-import {PossibleSpacing, Spacing} from '../types';
+import {PossibleSpacing, Spacing} from '@motion-canvas/core/lib/types';
 
 export const CanvasHelper = {
   roundRect<T extends CanvasRenderingContext2D | Context>(

packages/legacy/src/helpers/index.ts

@@ -0,0 +1 @@
+export * from './CanvasHelper';

packages/legacy/src/jsx-runtime.ts

@@ -1,6 +1,6 @@
 import type {NodeConfig} from 'konva/lib/Node';
 import type {Shape} from 'konva/lib/Shape';
-import type {Reference} from './utils';
+import type {Reference} from '@motion-canvas/core/lib/utils';
 import {Container} from 'konva/lib/Container';
 import {Surface} from './components';
 

packages/legacy/src/patches/Factory.ts

@@ -1,13 +1,13 @@
 import type {Node} from 'konva/lib/Node';
 import {Factory} from 'konva/lib/Factory';
-import {ANIMATE} from '../symbols';
+import {ANIMATE} from '@motion-canvas/core/lib';
 import {
   Animator,
   InterpolationFunction,
   TweenFunction,
   TweenProvider,
-} from '../tweening';
-import {ThreadGenerator} from '../threading';
+} from '@motion-canvas/core/lib/tweening';
+import {ThreadGenerator} from '@motion-canvas/core/lib/threading';
 import {Vector2d} from 'konva/lib/types';
 
 declare module 'konva/lib/Factory' {

packages/legacy/src/patches/Node.ts

@@ -1,11 +1,17 @@
 import type {Style} from '../styles';
 import {Node, NodeConfig} from 'konva/lib/Node';
-import {Origin, PossibleSpacing, Size, Spacing, getOriginDelta} from '../types';
+import {
+  Origin,
+  PossibleSpacing,
+  Size,
+  Spacing,
+  getOriginDelta,
+} from '@motion-canvas/core/lib/types';
 import {GetSet, IRect, Vector2d} from 'konva/lib/types';
 import {Factory} from 'konva/lib/Factory';
 import {Container} from 'konva/lib/Container';
-import {NODE_ID} from '../symbols';
-import {useScene} from '../utils';
+import {NODE_ID} from '@motion-canvas/core/lib';
+import {useScene} from '@motion-canvas/core/lib/utils';
 
 declare module 'konva/lib/Node' {
   export interface Node {

packages/legacy/src/scenes/KonvaScene.ts

@@ -1,20 +1,23 @@
 import {Container} from 'konva/lib/Container';
-import {Scene, SceneDescription, SceneRenderEvent} from './Scene';
-import {HitCanvas, SceneCanvas} from 'konva/lib/Canvas';
-import {Shape, shapes} from 'konva/lib/Shape';
-import {Group} from 'konva/lib/Group';
-import {GeneratorScene, ThreadGeneratorFactory} from './GeneratorScene';
-import {useScene} from '../utils';
 import {
+  GeneratorScene,
   Inspectable,
   InspectedElement,
   InspectedAttributes,
   InspectedSize,
-} from './Inspectable';
+  Scene,
+  SceneDescription,
+  SceneRenderEvent,
+  ThreadGeneratorFactory,
+} from '@motion-canvas/core/lib/scenes';
+import {HitCanvas, SceneCanvas} from 'konva/lib/Canvas';
+import {Shape, shapes} from 'konva/lib/Shape';
+import {Group} from 'konva/lib/Group';
+import {useScene} from '@motion-canvas/core/lib/utils';
 import {Util} from 'konva/lib/Util';
 import {Node} from 'konva/lib/Node';
 import {Konva} from 'konva/lib/Global';
-import {NODE_ID} from '../symbols';
+import {NODE_ID} from '@motion-canvas/core/lib';
 
 Konva.autoDrawEnabled = false;
 

packages/legacy/src/scenes/index.ts

@@ -0,0 +1 @@
+export * from './KonvaScene';

packages/legacy/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './slide';

packages/legacy/src/utils/slide.ts

@@ -1,5 +1,5 @@
 import type {Container} from 'konva/lib/Container';
-import type {Vector2} from '../types';
+import type {Vector2} from '@motion-canvas/core/lib/types';
 
 export function slide(container: Container, offset: Vector2): void;
 export function slide(container: Container, x: number, y?: number): void;

packages/legacy/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "outDir": "lib",
+    "inlineSourceMap": true,
+    "noImplicitAny": true,
+    "module": "esnext",
+    "target": "es2020",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@motion-canvas/legacy/lib",
+    "paths": {
+      "@motion-canvas/legacy/lib/jsx-runtime": ["jsx-runtime.ts"]
+    },
+    "types": ["node", "prismjs", "three"]
+  },
+  "include": ["src"]
+}

packages/legacy/tsconfig.project.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@motion-canvas/core/tsconfig.project.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@motion-canvas/legacy/lib"
+  }
+}

packages/legacy/vite/index.d.ts

@@ -0,0 +1,3 @@
+import type {Plugin} from 'vite';
+declare const _default: () => Plugin;
+export default _default;

packages/legacy/vite/index.js

@@ -0,0 +1,22 @@
+module.exports = () => ({
+  name: 'motion-canvas:legacy',
+  transform(code, id) {
+    if (id.endsWith('?project')) {
+      return (
+        `import '@motion-canvas/legacy/lib/patches/Factory';` +
+        `import '@motion-canvas/legacy/lib/patches/Node';` +
+        `import '@motion-canvas/legacy/lib/patches/Shape';` +
+        `import '@motion-canvas/legacy/lib/patches/Container';` +
+        code
+      );
+    }
+  },
+  config() {
+    return {
+      esbuild: {
+        jsx: 'automatic',
+        jsxImportSource: '@motion-canvas/legacy/lib',
+      },
+    };
+  },
+});

packages/template/package.json

@@ -11,7 +11,8 @@
     "build": "tsc && vite build"
   },
   "dependencies": {
-    "@motion-canvas/core": "*"
+    "@motion-canvas/core": "*",
+    "@motion-canvas/legacy": "*"
   },
   "devDependencies": {
     "@motion-canvas/ui": "*",

packages/template/src/motion-canvas.d.ts

@@ -1 +1 @@
-/// <reference types="@motion-canvas/core/project" />
+/// <reference types="@motion-canvas/legacy/project" />

packages/template/src/scenes/example.meta

@@ -1,4 +1,9 @@
 {
   "version": 1,
-  "timeEvents": []
+  "timeEvents": [
+    {
+      "name": "circle",
+      "targetTime": 3
+    }
+  ]
 }

packages/template/src/scenes/example.tsx

@@ -1,8 +1,17 @@
-import {makeKonvaScene} from '@motion-canvas/core/lib/scenes';
-import {waitFor} from '@motion-canvas/core/lib/flow';
+import {makeKonvaScene} from '@motion-canvas/legacy/lib/scenes';
+import {waitFor, waitUntil} from '@motion-canvas/core/lib/flow';
+import {useRef} from '@motion-canvas/core/lib/utils';
+import {Circle} from 'konva/lib/shapes/Circle';
 
 export default makeKonvaScene(function* (view) {
-  // Create your animations here
+  const circle = useRef<Circle>();
+
+  view.add(
+    <Circle ref={circle} width={320} height={320} fill={'lightseagreen'} />,
+  );
+
+  yield* waitUntil('circle');
+  yield* circle.value.scale({x: 2, y: 2}, 2);
 
   yield* waitFor(5);
 });

packages/template/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@motion-canvas/core/tsconfig.project.json",
+  "extends": "@motion-canvas/legacy/tsconfig.project.json",
   "compilerOptions": {
     "baseUrl": "src",
     "types": ["node", "prismjs", "three", "dom-webcodecs"]

packages/template/vite.config.ts

@@ -1,6 +1,7 @@
 import {defineConfig} from 'vite';
 import motionCanvas from '@motion-canvas/vite-plugin';
+import legacyRenderer from '@motion-canvas/legacy/vite';
 
 export default defineConfig({
-  plugins: [motionCanvas()],
+  plugins: [motionCanvas(), legacyRenderer()],
 });

packages/vite-plugin/package.json

@@ -25,7 +25,7 @@
   "devDependencies": {
     "@types/mime-types": "^2.1.1",
     "typescript": "^4.7.4",
-    "vite": "^3.0.5"
+    "vite": "^3.0.9"
   },
   "dependencies": {
     "mime-types": "^2.1.35"

packages/vite-plugin/src/main.ts

@@ -183,10 +183,6 @@ export default ({
           await createMeta(path.join(dir, metaFile));
 
           return source(
-            `import '@motion-canvas/core/lib/patches/Factory';`,
-            `import '@motion-canvas/core/lib/patches/Node';`,
-            `import '@motion-canvas/core/lib/patches/Shape';`,
-            `import '@motion-canvas/core/lib/patches/Container';`,
             `import meta from './${metaFile}';`,
             `import project from './${name}';`,
             `project.meta = meta`,
@@ -329,10 +325,6 @@ export default ({
     },
     config() {
       return {
-        esbuild: {
-          jsx: 'automatic',
-          jsxImportSource: '@motion-canvas/core/lib',
-        },
         build: {
           assetsDir: './',
           rollupOptions: {