➕

package.json

@@ -9,6 +9,7 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@astropub/config-to-alias": "^1.0.1",
     "@unocss/preset-attributify": "^0.58.3",
     "@unocss/reset": "^0.58.3",
     "sass": "^1.70.0",

src/App.tsx

@@ -1,8 +1,8 @@
-import ABCPlayer from './components/Player';
-import CustomMenu from './components/Menu';
-import ThemeToggle from './components/ThemeToggle';
-import { ListFile, MusicFile } from './type';
-import { useFetch } from './hooks/useFetch';
+import ABCPlayer from '𝄞/components/Player';
+import CustomMenu from '𝄞/components/Menu';
+import ThemeToggle from '𝄞/components/ThemeToggle';
+import { ListFile, MusicFile } from '𝄞/type';
+import { useFetch } from '𝄞/hooks/useFetch';
 import { Show } from 'solid-js';
 
 const App = () => {

src/components/Menu/index.tsx

@@ -1,5 +1,5 @@
 import { Show, For, createSignal } from "solid-js";
-import { ListFile } from "../../type";
+import { ListFile } from "𝄞/type";
 
 const getFileName = (path: string) => path.match(/\/(.*?).abc$/)?.at(-1);
 const [getCurrentName, setCurrentName] = createSignal<string>("index");

src/components/Message/index.ts

@@ -1,4 +1,4 @@
-import { sleep } from "./../../utils";
+import { sleep } from "𝄞/utils";
 
 export class Launcher {
   private queue: HTMLDivElement;

src/components/Player/index.tsx

@@ -1,9 +1,9 @@
 import { Accessor, createEffect, on, createSignal } from "solid-js";
-import message from "./../Message";
+import message from "𝄞/components/Message";
 import abcjs from "abcjs";
 import CursorControl from "./cursorControl";
 import SynthController from "./synthController";
-import { name, key } from "./../../utils";
+import { name, key } from "𝄞/utils";
 import "./index.scss";
 
 const ABCPlayer = (props: { getMusicData: Accessor<string> }) => {

src/components/ThemeToggle/index.tsx

@@ -1,6 +1,6 @@
 import type { Component } from "solid-js";
-import moon from "./../../assets/moon.svg?raw";
-import sun from "./../../assets/sun.svg?raw";
+import moon from "𝄞/assets/moon.svg?raw";
+import sun from "𝄞/assets/sun.svg?raw";
 import "./index.scss";
 
 const themeTuple = ["dark", "light"] as const;

src/main.tsx

@@ -1,10 +1,10 @@
 /* @refresh reload */
 import { render } from "solid-js/web";
 import "abcjs/abcjs-audio.css";
-import App from "./App";
+import App from "𝄞/App";
 import "@unocss/reset/normalize.css";
 import "uno.css";
-import "./index.scss";
+import "𝄞/index.scss";
 
 const root = document.getElementById("root");
 

tsconfig.json

@@ -5,6 +5,10 @@
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
+    "baseUrl": ".",
+    "paths": {
+      "𝄞/*": ["src/*"]
+    },
     "jsx": "preserve",
     "jsxImportSource": "solid-js",
     "types": ["vite/client"],

vite.config.ts

@@ -1,7 +1,8 @@
-import { defineConfig } from 'vite';
-import solid from 'vite-plugin-solid';
+import { defineConfig } from "vite";
+import solid from "vite-plugin-solid";
 import uno from "unocss/vite";
+import alias from '@astropub/config-to-alias/vite';
 
 export default defineConfig({
-  plugins: [uno(), solid()],
+  plugins: [uno(), solid(), alias()],
 });