tidy

build.js

@@ -18,10 +18,9 @@ async function copy (target) {
   await cp('src/preview.js', target)
   await cp('src/worker.js', target)
   await cp('icons/icon.png', target)
-  await cp('src/templates', target)
-  await cp('src/examples', target)
+  await cp('src/template', target)
   await cp('src/fonts', target)
-  await cp('src/vs', target)
+  await cp('src/lib', target)
   await cp('src/css', target)
 }
 

src/editor.js → src/components/editor.js

@@ -2,10 +2,10 @@ import fs from 'socket:fs'
 import path from 'socket:path'
 import { lookup } from 'socket:mime'
 
+import * as monaco from 'monaco-editor'
 import Tonic from '@socketsupply/tonic'
-import { resizePNG } from './icon/index.js'
 
-import * as monaco from 'monaco-editor'
+import { resizePNG } from '../lib/icon.js'
 
 function rgbaToHex (rgbaString) {
   const rgbaValues = rgbaString.match(/\d+/g)
@@ -27,22 +27,22 @@ function rgbaToHex (rgbaString) {
 globalThis.MonacoEnvironment = {
   getWorkerUrl: function (moduleId, label) {
     if (label === 'json') {
-      return 'vs/language/json/json.worker.js'
+      return 'lib/vs/language/json/json.worker.js'
     }
 
     if (label === 'css' || label === 'scss' || label === 'less') {
-      return 'vs/language/css/css.worker.js'
+      return 'lib/vs/language/css/css.worker.js'
     }
 
     if (label === 'html' || label === 'handlebars' || label === 'razor') {
-      return 'vs/language/html/html.worker.js'
+      return 'lib/vs/language/html/html.worker.js'
     }
 
     if (label === 'typescript' || label === 'javascript') {
-      return 'vs/language/typescript/ts.worker.js'
+      return 'lib/vs/language/typescript/ts.worker.js'
     }
 
-    return 'vs/editor/editor.worker.js'
+    return 'lib/vs/editor/editor.worker.js'
   }
 }
 
@@ -104,8 +104,6 @@ class AppEditor extends Tonic {
     const app = document.querySelector('app-view')
     const preview = document.querySelector('app-preview')
 
-    const zoom = this.props.parent.state.scaleFactor || '1'
-
     try {
       await fs.promises.writeFile(projectNode.id, data)
     } catch (err) {
@@ -148,6 +146,7 @@ class AppEditor extends Tonic {
 
     if (!projectNode.isDirectory && this.editor) {
       const ext = path.extname(projectNode.id)
+
       const mappings = parent.state.settings.extensionLanguageMappings
       const lang = mappings[ext] || ext.slice(1)
       monaco.editor.setModelLanguage(this.editor.getModel(), lang)

src/project.js → src/components/project.js

@@ -2,8 +2,8 @@ import application from 'socket:application'
 import fs from 'socket:fs'
 import path from 'socket:path'
 import { lookup } from 'socket:mime'
+
 import Tonic from '@socketsupply/tonic'
-import { convertToICO } from './icon/index.js'
 
 const EXPANDED_STATE = 1
 const CLOSED_STATE = 0
@@ -448,10 +448,34 @@ class AppProject extends Tonic {
     }
   }
 
+  getProjectNode (node) {
+    let parent = node
+
+    while (parent) {
+      if (parent.parent?.id === 'root') break
+      parent = parent.parent
+    }
+
+    return parent
+  }
+
   async onSelection (node, isToggle) {
     if (!isToggle) {
-      const editor = document.querySelector('app-editor')
-      editor.loadProjectNode(node)
+
+      const projectNode = this.getProjectNode(node)
+
+      if (this.state.currentProject !== projectNode.id) {
+        this.props.parent.state.currentProject = projectNode
+        this.props.parent.reloadPreviewWindows()
+
+        const coProperties = document.querySelector('app-properties')
+        coProperties.loadProjectNode(projectNode)
+      }
+
+      this.state.currentProject = projectNode.id
+
+      const coEditor = document.querySelector('app-editor')
+      coEditor.loadProjectNode(node)
     }
   }
 
@@ -551,14 +575,28 @@ class AppProject extends Tonic {
           selected: oldChild?.selected ?? 0,
           state: oldChild?.state ?? 0,
           isDirectory: entry.isDirectory(),
-          icon: entry.isDirectory() ? 'folder' : 'file',
           label: entry.name,
+          data: {},
           mime: await lookup(path.extname(entry.name)),
           children: []
         }
 
+        child.icon = entry.isDirectory() ? 'folder' : 'file'
+
+        if (parent.id === 'root' && entry.isDirectory()) {
+          if (!this.props.parent.currentProject) {
+            this.props.parent.currentProject = child
+          }
+
+          child.icon = 'package'
+        }
+
         parent.children.push(child)
 
+        //
+        // TODO could do this lazily so that it only reads a level at a time,
+        // which would be faster if the user has a huge number of files.
+        //
         if (entry.isDirectory()) {
           try {
             await readDir(fullPath, child)
@@ -572,7 +610,7 @@ class AppProject extends Tonic {
     const app = document.querySelector('app-view')
 
     try {
-      await readDir(app.state.cwd, tree)
+      await readDir(path.join(path.DATA, 'projects'), tree)
       this.state.tree = tree
     } catch (err) {
       console.error('Error initiating read directory operation:', err)
@@ -592,10 +630,6 @@ class AppProject extends Tonic {
       const child = node.children[i]
       const hasChildren = child.children && child.children.length
 
-      // if (hasChildren) {
-      //  children.push(this.renderNode(child.children))
-      // }
-
       const isSelected = child.selected
       const title = (typeof child.title) === 'string' ? child.title : ''
       let icon = child.icon

src/properties.js → src/components/properties.js

@@ -1,7 +1,8 @@
 import Tonic from '@socketsupply/tonic'
 import fs from 'socket:fs'
 import path from 'socket:path'
-import * as ini from './ini.js'
+
+import * as ini from '../lib/ini.js'
 
 function trim (string) {
   const lines = string.split(/\r?\n/)
@@ -171,15 +172,21 @@ class AppProperties extends Tonic {
     }
   }
 
-  async render () {
-    let data
-
-    if (!this.state.data) {
-      data = await fs.promises.readFile('templates/socket.ini', 'utf8')
-    } else {
-      data = this.state.data
+  async loadProjectNode (node) {
+    try {
+      const pathToConfig = path.join(node.id, 'socket.ini')
+      this.state.data = await fs.promises.readFile(pathToConfig, 'utf8')
+    } catch {
+      return false
     }
 
+    this.reRender()
+    return true
+  }
+
+  async render () {
+    let data = this.state.data || ''
+
     const settings = this.props.parent.state.settings
     const previewWindows = []
 
@@ -287,46 +294,6 @@ class AppProperties extends Tonic {
             <p>Allow/Disallow HotKey binding registration (desktop only)</p>
           </div>
         </tonic-accordion-section>
-        <tonic-accordion-section
-          name="bucket-test-4"
-          id="bucket-test-4"
-          label="Service Workers"
-        >
-          <div class="option">
-            <p>
-              Inserts a JavaScript snippet for building a Service Worker. A Service Worker is a seperate thread (aka a local-backend), that you can communicate with from a route like "/foo/bar/bazz".
-              <tonic-button
-                data-event="insert-service-worker"
-              >Insert</tonic-button>
-           </p>
-          </div>
-        </tonic-accordion-section>
-        <tonic-accordion-section
-          name="bucket-test-5"
-          id="bucket-test-5"
-          label="Native Extensions">
-          <div class="option">
-            <p>
-              Creates a file called 'extension.cc', and inserts JavaScript code into index.js that can be used to load it.
-              <tonic-button
-                data-event="insert-native-extension"
-              >Insert</tonic-button>
-            </p>
-          </div>
-        </tonic-accordion-section>
-        <tonic-accordion-section
-          name="bucket-test-6"
-          id="bucket-test-6"
-          label="WASM Extensions">
-          <div class="option">
-            <p>
-              An example of how to build a WASM extension.
-              <tonic-button
-                data-event="insert-wasm-extension"
-              >Insert</tonic-button>
-            </p>
-          </div>
-        </tonic-accordion-section>
       </tonic-accordion>
     `
   }