From 81181ffe403525d3e756eca04c591a66fdc9c004 Mon Sep 17 00:00:00 2001 From: Triston Date: Wed, 19 Jun 2024 18:41:27 -0500 Subject: [PATCH] add vite and use it instead for serving and bundling files --- bun.lockb | Bin 3137 -> 20080 bytes index.html | 26 ++++++++---------- package.json | 14 +++++----- public/vite.svg | 1 + src/index.js | 11 -------- src/main.ts | 11 ++++++++ src/os/applications.js | 13 --------- src/os/applications.ts | 14 ++++++++++ src/os/cursor.js | 10 ------- src/os/cursor.ts | 9 ++++++ src/os/filesystem.js | 25 ----------------- src/os/filesystem.ts | 23 ++++++++++++++++ src/os/index.js | 26 ------------------ src/os/index.ts | 26 ++++++++++++++++++ src/ui/component.js | 15 ---------- src/ui/component.ts | 11 ++++++++ src/ui/desktop.js | 34 ----------------------- src/ui/desktop.ts | 35 ++++++++++++++++++++++++ src/ui/index.js | 47 -------------------------------- src/ui/index.ts | 46 +++++++++++++++++++++++++++++++ src/ui/{nav.js => nav.ts} | 0 src/ui/{topbar.js => topbar.ts} | 0 src/vite-env.d.ts | 1 + tsconfig.json | 23 ++++++++++++++++ 24 files changed, 219 insertions(+), 202 deletions(-) create mode 100644 public/vite.svg delete mode 100644 src/index.js create mode 100644 src/main.ts delete mode 100644 src/os/applications.js create mode 100644 src/os/applications.ts delete mode 100644 src/os/cursor.js create mode 100644 src/os/cursor.ts delete mode 100644 src/os/filesystem.js create mode 100644 src/os/filesystem.ts delete mode 100644 src/os/index.js create mode 100644 src/os/index.ts delete mode 100644 src/ui/component.js create mode 100644 src/ui/component.ts delete mode 100644 src/ui/desktop.js create mode 100644 src/ui/desktop.ts delete mode 100644 src/ui/index.js create mode 100644 src/ui/index.ts rename src/ui/{nav.js => nav.ts} (100%) rename src/ui/{topbar.js => topbar.ts} (100%) create mode 100644 src/vite-env.d.ts create mode 100644 tsconfig.json diff --git a/bun.lockb b/bun.lockb index d8dead72f840d179270549cb51a0e730d4dd2121..25c74d40f7feabe4af256325ad8ae9e77b445672 100755 GIT binary patch literal 20080 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 L<__(S|KZ=C>6u32 diff --git a/index.html b/index.html index 3ddb60f..fb6f04e 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,14 @@ - + - - - - - KlectrDesktop - - - - - - - - + + + + + + KlectrDesktop + + +
+ + diff --git a/package.json b/package.json index a1feedf..7b181a7 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,15 @@ { "name": "klectrdesktop", - "module": "index.ts", + "private": true, + "version": "0.0.1", "type": "module", - "main": "dist/index.js", "scripts": { - "start": "bun index.ts" + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" }, "devDependencies": { - "@types/bun": "^1.1.4" - }, - "peerDependencies": { - "typescript": "^5.0.0" + "typescript": "^5.2.2", + "vite": "^5.2.0" } } diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.js b/src/index.js deleted file mode 100644 index af79c39..0000000 --- a/src/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import OS from "./os/index"; -import UI from "./ui/index"; - -const os = new OS() -const ui = new UI() - -os.addUi(ui) -ui.addOs(os) - -os.start() -ui.start() diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..fb99293 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,11 @@ +import OS from "./os/index.js"; +import UI from "./ui/index.js"; + +const os = new OS(); +const ui = new UI(); + +os.addUi(ui); +ui.addOs(os); + +os.start(); +ui.start(); diff --git a/src/os/applications.js b/src/os/applications.js deleted file mode 100644 index bc20fbd..0000000 --- a/src/os/applications.js +++ /dev/null @@ -1,13 +0,0 @@ -export default class Applications { - constructor() { - this.applications = [] - } - - addApplication(application) { - this.applications.push(application) - } - - getApplications() { - return this.applications - } -} diff --git a/src/os/applications.ts b/src/os/applications.ts new file mode 100644 index 0000000..71c8f88 --- /dev/null +++ b/src/os/applications.ts @@ -0,0 +1,14 @@ +export default class Applications { + applications: unknown[]; + constructor() { + this.applications = []; + } + + addApplication(application: unknown) { + this.applications.push(application); + } + + getApplications() { + return this.applications; + } +} diff --git a/src/os/cursor.js b/src/os/cursor.js deleted file mode 100644 index 15cd134..0000000 --- a/src/os/cursor.js +++ /dev/null @@ -1,10 +0,0 @@ -export default class Cursor { - constructor() { - document.addEventListener('mousemove', this.start.bind(this)) - } - - /** @param {MouseEvent} e */ - start(e) { - // console.log(e) - } -} diff --git a/src/os/cursor.ts b/src/os/cursor.ts new file mode 100644 index 0000000..db625ea --- /dev/null +++ b/src/os/cursor.ts @@ -0,0 +1,9 @@ +export default class Cursor { + constructor() { + document.addEventListener("mousemove", this.start.bind(this)); + } + + start(e: MouseEvent) { + console.log(e); + } +} diff --git a/src/os/filesystem.js b/src/os/filesystem.js deleted file mode 100644 index 532023e..0000000 --- a/src/os/filesystem.js +++ /dev/null @@ -1,25 +0,0 @@ -export default class Filesystem { - constructor() { - this.files = [] - } - - /** @param {string} path */ - addFile(path) { - this.files.push(path) - } - - /** @param {string} path */ - removeFile(path) { - this.files = this.files.filter(file => file !== path) - } - - /** @param {string} path */ - getFile(path) { - return this.files.find(file => file === path) - } - - /** @param {string} path */ - getFiles() { - return this.files - } -} diff --git a/src/os/filesystem.ts b/src/os/filesystem.ts new file mode 100644 index 0000000..b3d86a1 --- /dev/null +++ b/src/os/filesystem.ts @@ -0,0 +1,23 @@ +export default class Filesystem { + files: unknown[]; + + constructor() { + this.files = []; + } + + addFile(path: string) { + this.files.push(path); + } + + removeFile(path: string) { + this.files = this.files.filter((file) => file !== path); + } + + getFile(path: string) { + return this.files.find((file) => file === path); + } + + getFiles() { + return this.files; + } +} diff --git a/src/os/index.js b/src/os/index.js deleted file mode 100644 index 9e4fd9c..0000000 --- a/src/os/index.js +++ /dev/null @@ -1,26 +0,0 @@ -import Cursor from "./cursor" -import Filesystem from "./filesystem" -import Applications from "./applications" - -export default class OS { - ui - cursor - filesystem - applications - - constructor() { - this.cursor = new Cursor() - this.filesystem = new Filesystem() - this.applications = new Applications() - } - - /** @param {UI} ui */ - addUi(ui) { - this.ui = ui - } - - start() { - console.log('start os') - return this - } -} diff --git a/src/os/index.ts b/src/os/index.ts new file mode 100644 index 0000000..d1eafc8 --- /dev/null +++ b/src/os/index.ts @@ -0,0 +1,26 @@ +import Cursor from "./cursor"; +import Filesystem from "./filesystem"; +import Applications from "./applications"; +import UI from "../ui"; + +export default class OS { + ui: UI | undefined; + cursor: Cursor; + filesystem: Filesystem; + applications: Applications; + + constructor() { + this.cursor = new Cursor(); + this.filesystem = new Filesystem(); + this.applications = new Applications(); + } + + addUi(ui: UI) { + this.ui = ui; + } + + start() { + console.log("start os"); + return this; + } +} diff --git a/src/ui/component.js b/src/ui/component.js deleted file mode 100644 index 4c5c60a..0000000 --- a/src/ui/component.js +++ /dev/null @@ -1,15 +0,0 @@ -export default class Component { - /** @type {HTMLDivElement}*/ - element = document.createElement("div") - - - /** @param {HTMLElement} child*/ - addChild(child) { - this.element.appendChild(child) - } - - start() { - return this.element - } - -} diff --git a/src/ui/component.ts b/src/ui/component.ts new file mode 100644 index 0000000..9ec9942 --- /dev/null +++ b/src/ui/component.ts @@ -0,0 +1,11 @@ +export default class Component { + element: HTMLDivElement = document.createElement("div"); + + addChild(child: HTMLDivElement) { + this.element.appendChild(child); + } + + start() { + return this.element; + } +} diff --git a/src/ui/desktop.js b/src/ui/desktop.js deleted file mode 100644 index 63840e2..0000000 --- a/src/ui/desktop.js +++ /dev/null @@ -1,34 +0,0 @@ -import Component from "./component" - -export default class Desktop extends Component { - - constructor() { - super() - this.element.id = 'desktop' - this.element.style.height = '100%' - this.element.style.width = '100%' - this.element.style.display = 'grid' - this.element.style.gap = '10px' - - this.element.style.display = 'grid' - this.element.style.gridAutoFlow = 'column' - - this.element.style.gridTemplateColumns = 'repeat(auto-fill, minmax(80px, 1fr))' - this.element.style.gridTemplateRows = 'repeat(auto-fill, minmax(80px, 1fr))' - - for (let i = 0; i < 50; i++) { - const component = new Component() - component.element.innerText = i - component.element.style.border = '1px solid white' - } - } - - addApplicationIcon() { - // reaches into the OS and adds an icon to the desktop - // this is a placeholder for now - } - - start() { - return this.element - } -} diff --git a/src/ui/desktop.ts b/src/ui/desktop.ts new file mode 100644 index 0000000..1c3d41d --- /dev/null +++ b/src/ui/desktop.ts @@ -0,0 +1,35 @@ +import Component from "./component"; + +export default class Desktop extends Component { + constructor() { + super(); + this.element.id = "desktop"; + this.element.style.height = "100%"; + this.element.style.width = "100%"; + this.element.style.display = "grid"; + this.element.style.gap = "10px"; + + this.element.style.display = "grid"; + this.element.style.gridAutoFlow = "column"; + + this.element.style.gridTemplateColumns = + "repeat(auto-fill, minmax(80px, 1fr))"; + this.element.style.gridTemplateRows = + "repeat(auto-fill, minmax(80px, 1fr))"; + + for (let i = 0; i < 50; i++) { + const component = new Component(); + component.element.innerText = String(i); + component.element.style.border = "1px solid white"; + } + } + + addApplicationIcon() { + // reaches into the OS and adds an icon to the desktop + // this is a placeholder for now + } + + start() { + return this.element; + } +} diff --git a/src/ui/index.js b/src/ui/index.js deleted file mode 100644 index ad21f62..0000000 --- a/src/ui/index.js +++ /dev/null @@ -1,47 +0,0 @@ -import OS from "../os/index" -import Component from "./component"; -import NavBar from "./nav"; -import TopBar from "./topbar"; -import Desktop from "./desktop"; - -export default class UI extends Component { - os - topbar - navbar - desktop - - constructor() { - super() - - this.element.style.height = '100vh' - this.element.style.width = '100vw' - } - - /** @param {OS} os */ - addOs(os) { - this.os = os - } - - start() { - console.log("start ui") - this.element.id = 'ui' - document.body.appendChild(this.element) - - this.topbar = new TopBar() - this.addChild(this.topbar.start()) - - this.navbar = new NavBar() - this.desktop = new Desktop() - - const desktop_container = document.createElement('div') - desktop_container.id = 'desktop_container' - desktop_container.style.display = 'flex' - desktop_container.style.height = `calc(100vh - ${this.topbar.element.clientHeight}px)` - this.addChild(desktop_container) - - desktop_container.appendChild(this.navbar.start()) - desktop_container.appendChild(this.desktop.start()) - - return this.element - } -} diff --git a/src/ui/index.ts b/src/ui/index.ts new file mode 100644 index 0000000..0682e17 --- /dev/null +++ b/src/ui/index.ts @@ -0,0 +1,46 @@ +import OS from "../os/index"; +import Component from "./component"; +import NavBar from "./nav"; +import TopBar from "./topbar"; +import Desktop from "./desktop"; + +export default class UI extends Component { + os?: OS; + topbar?: TopBar; + navbar?: NavBar; + desktop?: Desktop; + + constructor() { + super(); + + this.element.style.height = "100vh"; + this.element.style.width = "100vw"; + } + + addOs(os: OS) { + this.os = os; + } + + start() { + console.log("start ui"); + this.element.id = "ui"; + document.body.appendChild(this.element); + + this.topbar = new TopBar(); + this.addChild(this.topbar.start()); + + this.navbar = new NavBar(); + this.desktop = new Desktop(); + + const desktop_container = document.createElement("div"); + desktop_container.id = "desktop_container"; + desktop_container.style.display = "flex"; + desktop_container.style.height = `calc(100vh - ${this.topbar.element.clientHeight}px)`; + this.addChild(desktop_container); + + desktop_container.appendChild(this.navbar.start()); + desktop_container.appendChild(this.desktop.start()); + + return this.element; + } +} diff --git a/src/ui/nav.js b/src/ui/nav.ts similarity index 100% rename from src/ui/nav.js rename to src/ui/nav.ts diff --git a/src/ui/topbar.js b/src/ui/topbar.ts similarity index 100% rename from src/ui/topbar.js rename to src/ui/topbar.ts diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..75abdef --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] +}