feat: package separation

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "@aarthificial/motion-canvas",
+  "name": "@motion-canvas/core",
   "version": "1.2.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "@aarthificial/motion-canvas",
+      "name": "@motion-canvas/core",
       "version": "1.2.0",
       "license": "ISC",
       "dependencies": {
@@ -14,6 +14,7 @@
         "image-size": "^1.0.1",
         "konva": "^8.3.2",
         "mix-color": "^1.1.2",
+        "preact": "^10.7.1",
         "strongly-typed-events": "^3.0.1",
         "three": "^0.138.3",
         "ts-loader": "^9.2.6",
@@ -2870,6 +2871,15 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/preact": {
+      "version": "10.7.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.7.1.tgz",
+      "integrity": "sha512-MufnRFz39aIhs9AMFisonjzTud1PK1bY+jcJLo6m2T9Uh8AqjD77w11eAAawmjUogoGOnipECq7e/1RClIKsxg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/prettier": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
@@ -6455,6 +6465,11 @@
         }
       }
     },
+    "preact": {
+      "version": "10.7.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.7.1.tgz",
+      "integrity": "sha512-MufnRFz39aIhs9AMFisonjzTud1PK1bY+jcJLo6m2T9Uh8AqjD77w11eAAawmjUogoGOnipECq7e/1RClIKsxg=="
+    },
     "prettier": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",

package.json

@@ -1,21 +1,22 @@
 {
-  "name": "@aarthificial/motion-canvas",
+  "name": "@motion-canvas/core",
   "version": "1.2.0",
   "description": "Canvas-based tool for creating motion graphics",
   "main": "index.js",
   "author": "aarthificial",
   "license": "ISC",
   "scripts": {
-    "prepare": "npm run build",
     "build": "tsc",
-    "test:serve": "node ./tools/serve.mjs ./test/player.ts"
+    "watch": "tsc -w"
   },
+  "types": "dist/global.d.ts",
   "dependencies": {
     "@types/wicg-file-system-access": "^2020.9.5",
     "canvas": "^2.9.1",
     "image-size": "^1.0.1",
     "konva": "^8.3.2",
     "mix-color": "^1.1.2",
+    "preact": "^10.7.1",
     "strongly-typed-events": "^3.0.1",
     "three": "^0.138.3",
     "ts-loader": "^9.2.6",

tools/serve.mjs

@@ -7,7 +7,6 @@ import WebpackDevServer from 'webpack-dev-server';
 
 const projectFile = path.resolve(process.cwd(), process.argv[2]);
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const isLinked = !__dirname.includes('node_modules');
 
 const compiler = webpack({
   entry: projectFile,
@@ -18,10 +17,6 @@ const compiler = webpack({
       {
         test: /\.tsx?$/,
         loader: 'ts-loader',
-        exclude: /node_modules([\\]+|\/)+(?!@aarthificial)/,
-        options: {
-          allowTsInNodeModules: true,
-        }
       },
       {
         test: /\.glsl$/i,
@@ -54,30 +49,30 @@ const compiler = webpack({
     ],
   },
   resolveLoader: {
-    modules: ['node_modules', path.resolve(__dirname, './loaders')]
+    modules: [
+      'node_modules',
+      path.resolve(__dirname, '../node_modules'),
+      path.resolve(__dirname, './loaders'),
+    ],
   },
   resolve: {
+    modules: ['node_modules', path.resolve(__dirname, '../node_modules')],
     extensions: ['.js', '.ts', '.tsx'],
     alias: {
-      MC: path.resolve(__dirname, isLinked ? '../src' : '../dist'),
+      MC: path.resolve(__dirname, '../dist'),
+      '@motion-canvas/core': path.resolve(__dirname, '../dist'),
+      '@motion-canvas/ui': path.resolve(__dirname, '../../ui/dist'),
     },
   },
   output: {
     filename: `index.js`,
     path: __dirname,
   },
-  watchOptions: {
-    ignored: /node_modules([\\]+|\/)+(?!@aarthificial)/,
-  },
-  devServer: {
-    static: path.resolve(__dirname, '../public'),
-    compress: true,
-    port: 9000,
-  },
   experiments: {
     topLevelAwait: true,
-  }
+  },
 });
+
 const server = new WebpackDevServer(
   {
     static: path.resolve(__dirname, '../public'),

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
-    "baseUrl": "src",
+    "rootDir": "./src",
+    "baseUrl": "./src",
     "outDir": "./dist/",
     "sourceMap": true,
     "noImplicitAny": true,
@@ -8,13 +9,14 @@
     "target": "es2017",
     "moduleResolution": "node",
     "resolveJsonModule": true,
+    "declaration": true,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
     "jsx": "react-jsx",
-    "jsxImportSource": "MC",
+    "jsxImportSource": "@motion-canvas/core",
     "paths": {
-      "MC/*": [
-        "../src/*",
+      "@motion-canvas/core/jsx-runtime*": [
+        "jsx-runtime.ts"
       ]
     }
   }

tsconfig.project.json

@@ -1,19 +1,21 @@
 {
   "compilerOptions": {
-    "baseUrl": "src",
-    "outDir": "./dist/",
     "sourceMap": true,
     "noImplicitAny": true,
     "module": "esnext",
-    "target": "es6",
+    "target": "es2017",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@motion-canvas/core",
     "paths": {
-      "MC/*": [
-        "../src/*",
-        "../dist/*"
-      ]
+      "MC/*": ["../../core/dist/*"],
+      "@motion-canvas/core/*": ["../../core/dist/*"],
+      "@motion-canvas/ui": ["../../ui/dist"],
+      "@motion-canvas/ui/*": ["../../ui/dist/*"],
+      "*": ["../../core/node_modules/*", "../../core/node_modules/@types/*"]
     }
   }
 }