Merge pull request #36 from Flow-Works:master

Merge 'master' into thin-dev-branch

README.md

@@ -4,7 +4,7 @@
   # FlowOS Next
 
   <img src="https://cdn.rawgit.com/standard/standard/master/badge.svg" height="50">
-  <img src="./src/assets/badge.png" height="50">
+  <a href="https://discord.gg/axUqK8CN2n"><img src="./src/assets/badge.png" height="50"></a><br/>
 
   <img src="https://img.shields.io/github/stars/flow-works/flowos-2.0?style=for-the-badge" />
   <img src="https://img.shields.io/github/issues-pr/flow-works/flowos-2.0?style=for-the-badge" />

package-lock.json

@@ -12,11 +12,11 @@
         "@ptkdev/logger": "^1.8.0",
         "eruda": "^3.0.1",
         "filer": "^1.4.1",
-        "prism-code-editor": "^1.2.2",
+        "prism-code-editor": "^2.0.1",
-        "prismjs": "^1.29.0",
         "uuid": "^9.0.1"
       },
       "devDependencies": {
+        "@types/node": "^20.8.7",
         "@types/uuid": "^9.0.5",
         "@types/web": "^0.0.117",
         "ts-standard": "^12.0.2",
@@ -729,20 +729,18 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.8.4",
+      "version": "20.8.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.4.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.7.tgz",
-      "integrity": "sha512-ZVPnqU58giiCjSxjVUESDtdPk4QR5WQhhINbc9UBrKLU68MX5BF6kbQzTrkwbolyr0X8ChBpXfavr5mZFKZQ5A==",
+      "integrity": "sha512-21TKHHh3eUHIi2MloeptJWALuCu5H7HQTdTrWIFReA8ad+aggoX+lRes3ex7/FtpC+sVUpFMQ+QTfYr74mruiQ==",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "undici-types": "~5.25.1"
       }
     },
     "node_modules/@types/prismjs": {
-      "version": "1.26.1",
+      "version": "1.26.2",
-      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.1.tgz",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.2.tgz",
-      "integrity": "sha512-Q7jDsRbzcNHIQje15CS/piKhu6lMLb9jwjxSfEIi4KcFKXW23GoJMkwQiJ8VObyfx+VmUaDcJxXaWN+cTCjVog=="
+      "integrity": "sha512-/r7Cp7iUIk7gts26mHXD66geUC+2Fo26TZYjQK6Nr4LDfi6lmdRmMqM0oPwfiMhUwoBAOFe8GstKi2pf6hZvwA=="
     },
     "node_modules/@types/semver": {
       "version": "7.5.3",
@@ -4768,19 +4766,11 @@
       }
     },
     "node_modules/prism-code-editor": {
-      "version": "1.2.2",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/prism-code-editor/-/prism-code-editor-1.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/prism-code-editor/-/prism-code-editor-2.0.1.tgz",
-      "integrity": "sha512-jmVlSNCp40BWauhzjv3GGFmXVaZkXcuVa7G/5RWV+iSPAugYfL1gQlOkXxC+E2gd/Z3/wbQIEr5RC1kyoohqlg==",
+      "integrity": "sha512-93APxLnz6ow6TU8Mw2MC16d/Xb4k2FdjfrzIqb1finFPB/X4ejQyngEF1NkHKpggrIvR33QodW638KeN/gXEfA==",
       "dependencies": {
-        "@types/prismjs": "^1.26.0"
+        "@types/prismjs": "^1.26.2"
-      }
-    },
-    "node_modules/prismjs": {
-      "version": "1.29.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
-      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
-      "engines": {
-        "node": ">=6"
       }
     },
     "node_modules/process": {
@@ -5807,9 +5797,7 @@
       "version": "5.25.3",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.25.3.tgz",
       "integrity": "sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==",
-      "dev": true,
+      "dev": true
-      "optional": true,
-      "peer": true
     },
     "node_modules/universalify": {
       "version": "2.0.0",

package.json

@@ -14,6 +14,7 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "@types/node": "^20.8.7",
     "@types/uuid": "^9.0.5",
     "@types/web": "^0.0.117",
     "ts-standard": "^12.0.2",
@@ -26,8 +27,7 @@
     "@ptkdev/logger": "^1.8.0",
     "eruda": "^3.0.1",
     "filer": "^1.4.1",
-    "prism-code-editor": "^1.2.2",
+    "prism-code-editor": "^2.0.1",
-    "prismjs": "^1.29.0",
     "uuid": "^9.0.1"
   }
 }

src/apps/editor.ts

@@ -2,15 +2,11 @@ import icon from '../assets/icons/editor.png'
 import { App } from '../types.ts'
 
 import { fullEditor } from 'prism-code-editor/setups'
-import Prism from 'prism-code-editor/prism-core'
+// this will also import markup, clike, javascript, typescript and jsx
-import 'prismjs/components/prism-markup.js'
+import 'prism-code-editor/grammars/tsx'
-import 'prismjs/components/prism-clike.js'
+import 'prism-code-editor/grammars/css-extras'
-import 'prismjs/components/prism-javascript.js'
+import 'prism-code-editor/grammars/markdown'
-import 'prismjs/components/prism-typescript.js'
+import 'prism-code-editor/grammars/python'
-import 'prismjs/components/prism-jsx.js'
-import 'prismjs/components/prism-tsx.js'
-import 'prism-code-editor/languages'
-import 'prism-code-editor/prism-markdown'
 
 import { FlowWindow } from '../wm.ts'
 
@@ -18,6 +14,26 @@ interface EditorConfig {
   path: string
 }
 
+const fileLanguageMap: {
+  [key: string]: string
+} = {
+  c: 'clike',
+  cpp: 'clike',
+  java: 'clike',
+  cs: 'clike',
+  ts: 'typescript',
+  js: 'javascript',
+  mjs: 'javascript',
+  cjs: 'javascript',
+  jsx: 'jsx',
+  tsx: 'tsx',
+  html: 'html',
+  md: 'markdown',
+  css: 'css',
+  xml: 'xml',
+  py: 'python'
+}
+
 export default class EditorApp implements App {
   meta = {
     name: 'Editor',
@@ -58,7 +74,7 @@ export default class EditorApp implements App {
             </a>
           </div>
         </div>
-        <div class="editor" style="flex:1;"></div>
+        <div class="editor" style="flex:1;display:grid;overflow:scroll;"></div>
         <style>
         .dropdown {
           position: absolute;
@@ -127,74 +143,12 @@ export default class EditorApp implements App {
         }
       })
 
-      let language
+      const fileExtension = data.path.split('.').pop()?.toLowerCase() as string
-
+      const language = fileLanguageMap[fileExtension] ?? 'text'
-      switch (data.path.split('.').at(-1)?.toLowerCase()) {
-        case 'c':
-        case 'cs':
-        case 'cpp':
-        case 'java': {
-          language = 'clike'
-          break
-        }
-
-        case 'ts': {
-          language = 'typescript'
-          break
-        }
-
-        case 'js':
-        case 'mjs':
-        case 'cjs': {
-          language = 'javascript'
-          break
-        }
-
-        case 'jsx': {
-          language = 'jsx'
-          break
-        }
-
-        case 'tsx': {
-          language = 'tsx'
-          break
-        }
-
-        case 'html': {
-          language = 'html'
-          break
-        }
-
-        case 'md': {
-          language = 'md'
-          break
-        }
-
-        case 'css': {
-          language = 'css'
-          break
-        }
-
-        case 'xml': {
-          language = 'xml'
-          break
-        }
-
-        case 'py': {
-          language = 'python'
-          break
-        }
-
-        default: {
-          language = 'text'
-          break
-        }
-      }
 
       const value = (await window.fs.promises.readFile(data.path)).toString()
       const editor = fullEditor(
-        Prism,
+        win.content.querySelector('.editor') as HTMLElement,
-        win.content.querySelector('.editor'),
         {
           language,
           theme: 'github-dark',
@@ -203,11 +157,11 @@ export default class EditorApp implements App {
       )
 
       const style = document.createElement('style')
-      style.innerHTML = `
+      style.textContent = `
-      .prism-editor {
+      .prism-code-editor {
         border-radius: 10px 10px 0 0;
         caret-color: var(--text);
-        font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+        font-weight: 400;
         --editor__bg: var(--base);
         --widget__border: var(--mantle);
         --widget__bg: var(--crust);
@@ -225,11 +179,8 @@ export default class EditorApp implements App {
         --editor__bg-selection-match: var(--surface-1)40;
         --editor__line-number: #636e7b;
         --editor__line-number-active: #adbac7;
-        --editor__bg-scrollbar: 210, 10%, 35%;
-        --editor__bg-fold: #768390;
         --bg-guide-indent: var(--surface-0);
-        color-scheme: dark;
+        overflow: visible;
-        height: 100%;
       }
       .prism-search * {
         font-family: 'Satoshi', sans-serif;
@@ -237,7 +188,7 @@ export default class EditorApp implements App {
       `
       editor.scrollContainer.appendChild(style);
       (win.content.querySelector('#find') as HTMLElement).onclick = () => {
-        editor.extensions.searchWidget.open()
+        editor.extensions.searchWidget?.open()
       }
       (win.content.querySelector('#save') as HTMLElement).onclick = async () => {
         await window.fs.promises.writeFile(data.path, editor.value)

src/files.d.ts

@@ -1,5 +0,0 @@
-declare module '*.png' {
-  const image: string
-  export = image
-}
-declare module '*.json'

src/plugins/apps.ts

@@ -12,7 +12,7 @@ export const run = (element: HTMLDivElement): void => {
   element.style.alignItems = 'center'
   element.style.gap = '5px'
   element.style.flex = '1'
-  // @ts-expect-error
+
   window.addEventListener('app_opened', (e: AppOpenedEvent): void => {
     const appIcon = document.createElement('app')
     const app = e.detail.app
@@ -20,7 +20,7 @@ export const run = (element: HTMLDivElement): void => {
     appIcon.style.background = 'var(--surface-0)'
     appIcon.style.padding = '5px 7.5px'
     appIcon.style.borderRadius = '5px'
-    appIcon.innerHTML = `<img data-id="${win.id}" src="${app.meta.id as string}"/> ${app.meta.name}`
+    appIcon.innerHTML = `<img data-id="${win.id}" src="${app.meta.icon}"/> ${app.meta.name}`
     appIcon.onclick = async () => {
       const win = await e.detail.win
       win.focus()
@@ -28,7 +28,7 @@ export const run = (element: HTMLDivElement): void => {
     }
     element.appendChild(appIcon)
   })
-  // @ts-expect-error
+
   window.addEventListener('app_closed', (e: AppClosedEvent): void => {
     const win = e.detail.win
     element.querySelector(`img[data-id="${win.id}"]`)?.parentElement?.remove()

src/prism-code-editor.d.ts

@@ -1,3 +0,0 @@
-declare module 'prism-code-editor';
-declare module 'prism-code-editor/setups';
-declare module 'prism-code-editor/prism-core';

tsconfig.json

@@ -9,11 +9,14 @@
     "jsx": "react",
     "jsxFactory": "h",
     "allowJs": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "declaration": true,
     "emitDeclarationOnly": true,
     "allowImportingTsExtensions": true,
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "types": ["vite/client", "node"]
   }
 }