add package aliases

tsconfig.json

@@ -13,7 +13,13 @@
     "skipLibCheck": true,
     "noUnusedLocals": false,
     "lib": ["DOM", "DOM.Iterable", "ESNext", "WebWorker"],
-    "types": ["@webgpu/types", "@types/node", "bun-types"]
+    "types": ["@webgpu/types", "@types/node", "bun-types"],
+    "baseUrl": ".",
+    "paths": {
+      "@lib/*": ["lib/*"],
+      "@labs/*": ["labs/*"],
+      "@propagators/*": ["propagators/*"]
+    }
   },
   "include": ["lib/**/*.ts", "website/**/*.ts", "vite.config.ts"]
 }

vite.config.ts

@@ -2,7 +2,7 @@ import { resolve } from 'node:path';
 import { readdirSync } from 'node:fs';
 import { defineConfig, IndexHtmlTransformContext, Plugin } from 'vite';
 
-const canvasWebsiteDir = resolve(__dirname, 'website/canvas');
+const canvasWebsiteDir = resolve(__dirname, './website/canvas');
 
 function getCanvasFiles() {
   return readdirSync(canvasWebsiteDir).filter((file) => file.endsWith('.html'));
@@ -65,12 +65,19 @@ const linkGenerator = (): Plugin => {
 
 export default defineConfig({
   root: 'website',
+  resolve: {
+    alias: {
+      '@lib': resolve(__dirname, './lib'),
+      '@labs': resolve(__dirname, './labs'),
+      '@propagators': resolve(__dirname, './labs'),
+    },
+  },
   plugins: [linkGenerator()],
   build: {
     target: 'esnext',
     rollupOptions: {
       input: {
-        index: resolve(__dirname, 'website/index.html'),
+        index: resolve(__dirname, './website/index.html'),
         ...getCanvasFiles().reduce((acc, file) => {
           acc[`canvas/${file.replace('.html', '')}`] = resolve(canvasWebsiteDir, file);
           return acc;

website/canvas/src/folk-metronome.ts

@@ -1,4 +1,4 @@
-import { FolkElement } from '../../../lib/common/folk-element';
+import { FolkElement } from '@lib/common/folk-element';
 
 declare global {
   interface HTMLElementTagNameMap {

website/canvas/src/folk-timer.ts

@@ -1,4 +1,4 @@
-import { FolkElement } from '../../../lib/common/folk-element';
+import { FolkElement } from '@lib/common/folk-element';
 
 declare global {
   interface HTMLElementTagNameMap {

website/canvas/src/folk-weather.ts

@@ -1,4 +1,4 @@
-import { html } from '../../../lib/common/tags';
+import { html } from '@lib/common/tags';
 
 interface Weather {
   temperature: string;

website/canvas/src/record-player.ts

@@ -1,5 +1,5 @@
 // Ported from https://github.com/bitu467/record-player
-import { css, html } from '../../../lib/common/tags';
+import { css, html } from '@lib/common/tags';
 
 const styles = css`
   ::slotted(*) {