Klectr/KDesktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add vite and use it instead for serving and bundling files

Browse Source
This commit is contained in:
Triston Armstrong 2024-06-19 18:41:27 -05:00
parent 2654a25c31
commit 81181ffe40
No known key found for this signature in database
GPG Key ID: FADE6AC6F956FC52
24 changed files with 219 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

16
index.html
View File

@ -1,16 +1,14 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./index.css" />
<title>KlectrDesktop</title> <title>KlectrDesktop</title>
<link href="./index.css" rel="stylesheet">
</head> </head>
<body> <body>
<noscript>You need to have javascript enbaled for this shit!</noscript> <div id="app"></div>
<script type="module" src="./index"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

14
package.json
View File

@ -1,15 +1,15 @@
{ {
"name": "klectrdesktop", "name": "klectrdesktop",
"module": "index.ts", "private": true,
"version": "0.0.1",
"type": "module", "type": "module",
"main": "dist/index.js",
"scripts": { "scripts": {
"start": "bun index.ts" "dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
}, },
"devDependencies": { "devDependencies": {
"@types/bun": "^1.1.4" "typescript": "^5.2.2",
}, "vite": "^5.2.0"
"peerDependencies": {
"typescript": "^5.0.0"
} }
} }

1
public/vite.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

11
src/index.js
View File

@ -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()

11
src/main.ts Normal file
View File

@ -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();

13
src/os/applications.js
View File

@ -1,13 +0,0 @@
export default class Applications {
constructor() {
this.applications = []
}
addApplication(application) {
this.applications.push(application)
}
getApplications() {
return this.applications
}
}

14
src/os/applications.ts Normal file
View File

@ -0,0 +1,14 @@
export default class Applications {
applications: unknown[];
constructor() {
this.applications = [];
}
addApplication(application: unknown) {
this.applications.push(application);
}
getApplications() {
return this.applications;
}
}

10
src/os/cursor.js
View File

@ -1,10 +0,0 @@
export default class Cursor {
constructor() {
document.addEventListener('mousemove', this.start.bind(this))
}
/** @param {MouseEvent} e */
start(e) {
// console.log(e)
}
}

9
src/os/cursor.ts Normal file
View File

@ -0,0 +1,9 @@
export default class Cursor {
constructor() {
document.addEventListener("mousemove", this.start.bind(this));
}
start(e: MouseEvent) {
console.log(e);
}
}

25
src/os/filesystem.js
View File

@ -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
}
}

23
src/os/filesystem.ts Normal file
View File

@ -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;
}
}

26
src/os/index.js
View File

@ -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
}
}

26
src/os/index.ts Normal file
View File

@ -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;
}
}

15
src/ui/component.js
View File

@ -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
}
}

11
src/ui/component.ts Normal file
View File

@ -0,0 +1,11 @@
export default class Component {
element: HTMLDivElement = document.createElement("div");
addChild(child: HTMLDivElement) {
this.element.appendChild(child);
}
start() {
return this.element;
}
}

34
src/ui/desktop.js
View File

@ -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
}
}

35
src/ui/desktop.ts Normal file
View File

@ -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;
}
}

47
src/ui/index.js
View File

@ -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
}
}

46
src/ui/index.ts Normal file
View File

@ -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;
}
}

0
src/ui/nav.js → src/ui/nav.ts
View File

0
src/ui/topbar.js → src/ui/topbar.ts
View File

1
src/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

23
tsconfig.json Normal file
View File

@ -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"]
}