reload on package.json change, start docs on editing

apps/jscad-web/main.js

@@ -2,6 +2,7 @@ import {
   addToCache,
   clearFs,
   extractEntries,
+  analyzeProject,
   fileDropped,
   getFile,
   getFileContent,
@@ -80,8 +81,13 @@ async function initFs() {
   })
   sw.defProjectName = 'jscad'
   sw.onfileschange = files => {
-    workerApi.clearFileCache({ files })
-    editor.filesChanged(files)
+    console.log('files', files)
+    if(files.includes('/package.json')){
+      reloadProject()
+    }else{
+      workerApi.clearFileCache({ files })
+      editor.filesChanged(files)
+    }
     if (sw.fileToRun) runScript({ url: sw.fileToRun, base: sw.base })
   }
   sw.getFile = path => getFile(path, sw)
@@ -100,22 +106,30 @@ document.body.ondrop = async ev => {
     if (!sw) await initFs()
     showDrop(false)
     workerApi.clearTempCache()
-    saveMap = {}
-    const { alias, script } = await fileDropped(sw, files)
-    projectName = sw.projectName
-    if (alias.length) {
-      workerApi.init({ alias })
-    }
-    let url = sw.fileToRun
-    runScript({ url, base: sw.base })
-    editor.setSource(script, url)
-    editor.setFiles(sw.filesToCheck)
+
+    await fileDropped(sw, files)
+
+    reloadProject()
+
   } catch (error) {
     setError(error)
     console.error(error)
   }
 }
 
+async function reloadProject(){
+  saveMap = {}
+  const { alias, script } = await analyzeProject(sw)
+  projectName = sw.projectName
+  if (alias.length) {
+    workerApi.init({ alias })
+  }
+  let url = sw.fileToRun
+  runScript({ url, base: sw.base })
+  editor.setSource(script, url)
+  editor.setFiles(sw.filesToCheck)
+}
+
 document.body.ondragover = ev => {
   ev.preventDefault()
   showDrop(true)
@@ -176,7 +190,9 @@ const spinner = byId('spinner')
 let firstJobTimer
 
 function trackJobs(jobs) {
+  console.log('jobs', jobs)
   if (jobs === 1) {
+    clearTimeout(firstJobTimer)    
     // do not show spinner for fast renders
     firstJobTimer = setTimeout(() => {
       spinner.style.display = 'block'

apps/jscad-web/online.editor.md

@@ -0,0 +1,48 @@
+
+## Easy: edit online
+
+
+## Advanced: edit in your fav code editor
+
+Any text or code editor will work for this (vi, vim, neovim, notepad++, VSCodium , VSCode, Atom, SublimeText...).
+
+- create a file `someScript.js` 
+- copy exmaple code form jscad.app
+- save the file
+- drag&drop the file to jscad.app browser window
+- put your editor and jscad.app side by side
+- edit the file, save the changes, jscad.app will automatically re-run the script
+
+A chromium based browser is required, as other browser do not allow JS to see changes to the file.
+
+## Enthusiast: a multifile project
+
+## Expert: project with package.json and workspaces for internal libs
+
+
+Bonus: if you change `main` in package.json, project will be reloaded
+and that file will be the new starting point for the project without you needing
+D&D again. 
+
+https://github.com/hrgdavor/jscadui/assets/2480762/63821c2d-3b2c-45cb-816a-b99f2f0e24fe
+
+
+better option is to download a nice editor that can syntax highlight JS code
+edit with the said editor (you may try VScode if it works well on your computer)
+save the fil on yor drive, and keep the openjscad window open, then drag and drop the file there
+it will render the script, and check for changes, so you continue editing it the text editor on your computer
+as soon as you save it will pick-up the changes
+... another simpler option that was made available recently on https://jscad.app/ is to copy the script text from openjscad
+
+paste there, and then just use CTRL+S it will aks the first time permission to save the file, and further saving will save the file, and render changes
+jscad.app is not official yet, but works rather well
+I personally prefer to use VSCode and drag/drop my file onto jscad.app to see it rendered there, and export in the end for 3d printing
+
+
+any editor
+drag and dropping file to openjscad or jscad.app will cause it to be given to the browser with permission to read it.
+You must use Chrome for jscad to be able to check few times a second to see if it changed
+Only Chrome can get change info and read new content ... Firefox plays dumb and will indefinitely give the initial file version, even after it chanes on your drive
+
+
+

apps/jscad-web/src/editor.js

@@ -70,6 +70,9 @@ export const init = (defaultCode, fn, _saveFn, _getFileFn) => {
   document.getElementById('editor-hint').addEventListener('click', () => {
     compile(view.state.doc.toString(), currentFile)
   })
+  document.getElementById('editor-hint2').addEventListener('click', () => {
+    save(view.state.doc.toString(), currentFile)
+  })
 
   // Setup file selector
   editorFile.addEventListener('click', () => {

apps/jscad-web/static/index.html

@@ -70,6 +70,7 @@ <h1>JSCAD</h1>
           </nav>
           <div id="editor-container"></div>
           <a id="editor-hint">Shift-enter to update</a>
+          <a id="editor-hint2">CTRL+S to save and update</a>
         </div>
         <div id="editor-toggle"></div>
       </div>

apps/jscad-web/static/main.css

@@ -190,7 +190,7 @@ p {
   height: calc(100vh - 60px);
   flex: 1;
 }
-#editor-hint {
+#editor-hint, #editor-hint2 {
   position: absolute;
   bottom: 10px;
   right: calc(min(10px, 100% - 180px)); /* push right when editor is small */
@@ -199,6 +199,9 @@ p {
   font-size: 10pt;
   user-select: none;
 }
+#editor-hint {
+  bottom: 30px;
+}
 .dark #editor-hint {
   color: #dddddd88;
 }

packages/fs-provider/fs-provider.js

@@ -225,13 +225,12 @@ export const checkFiles = sw => {
 export async function fileDropped(sw, files) {
   sw.filesToCheck.length = 0
   sw.fileToRun = 'index.js'
-  let folderName
   clearFs(sw)
   let rootFiles = []
   if (files.length === 1) {
     const file = files[0]
     if (file.isDirectory) {
-      folderName = file.name
+      sw.folderName = file.name
       file.fsDir = '/'
       rootFiles = await readDir(file)
     } else {
@@ -243,16 +242,17 @@ export async function fileDropped(sw, files) {
   }
   rootFiles = rootFiles.map(e => fileToFsEntry(e, '/'))
   sw.roots.push(rootFiles)
+}
 
+export async function analyzeProject(sw){
   const alias = await getWorkspaceAliases(sw)
 
-  let time = Date.now()
   const preLoad = ['/' + sw.fileToRun, '/package.json']
   const loaded = await addPreLoadAll(sw, preLoad, true)
 
   sw.projectName = sw.defProjectName
   if (sw.fileToRun !== 'index.js') sw.projectName = sw.fileToRun.replace(/\.js$/, '')
-  if (folderName) sw.projectName = folderName
+  if (sw.folderName) sw.projectName = sw.folderName
 
   let script = ''
   if (sw.fileToRun) {
@@ -266,6 +266,7 @@ export async function fileDropped(sw, files) {
     }
   }
   return { alias, script }
+
 }
 
 /**
@@ -280,6 +281,7 @@ const getWorkspaceAliases = async sw => {
   let pkgFile = await findFileInRoots(sw.roots, 'package.json')
   if (pkgFile) {
     try {
+      sw.filesToCheck.push(pkgFile)
       const pack = JSON.parse(await readAsText(pkgFile))
       if (pack.main) sw.fileToRun = pack.main
       if (pack.workspaces)