Developer Tools Page

[bdonnahue]

Similar to Excel I would like to be able to write/add custom functions and macros.

Ideally I would like an IDE (maybe the chrome developer tools is enough) which allows me to view and write functions, edit them, step through them.

Would it be possible to add custom functions in the simplest implementation?

[eddyparkinson]

Happy to support this if you are able to add it.

Example of adding a function:

https://github.com/marcelklehr/socialcalc/commit/71216c0437e78838b0567ecd7a7607c3a27b44b4

Files

The function code is here: https://github.com/marcelklehr/socialcalc/blob/master/js/formula1.js

Help Text https://github.com/marcelklehr/socialcalc/blob/master/js/socialcalcconstants.js

Auto generated SocialCalc.js

[bdonnahue]

Nice, thanks @eddyparkinson! I am still working on this, it has been on the back burner but I will be picking it up again soon.

[bdonnahue]

Hey @eddyparkinson I started messing around in the raw source and realized... I have no idea how to debug this codebase etc. Ideally I would like to be able to run the app.js from VS Code. I tried doing that on the installed version of the code in node_modules but it looks like it has been minified and transformed by the build process and now lives in static/ethercalc.js.map. Could you provide any docs for how I might go about debugging this project etc?

[eddyparkinson]

Debug

In chrome: To debug the client, I just use chrome and add breakpoints. It lets you expand minified code.

In the console type: window.spreadsheet.sheet.cells["C2"]

Server Side

The server side is much harder to debug. Adding log statements works.

It should be possible to debug server side nodejs with chrome, but I did not get it working. I have very little server side code, so I used logs.

Stack trace

Add a breakpoint in chome in method SocialCalc.ScheduleSheetCommands. Change the spreadsheet. Look at the stacktrace to see the flow of code. e.g.

------ Stacktrace of reload sheet with recalc & redisplay ----------- SocialCalc.ScheduleSheetCommands (ethercalc.js:formatted:1427) SocialCalc.ScheduleSheetCommands (broadcast.js:88) SocialCalc.Sheet.ScheduleSheetCommands (broadcast.js:64) SocialCalc.EditorScheduleSheetCommands (ethercalc.js:formatted:4370) SocialCalc.TableEditor.EditorScheduleSheetCommands (ethercalc.js:formatted:3978) SocialCalc.SpreadsheetControlExecuteCommand (ethercalc.js:formatted:13116) SocialCalc.SpreadsheetControl.ExecuteCommand (ethercalc.js:formatted:12446) onLoad (main.js:465) onReady (main.js:378)

Flow of ExecuteCommand

Flow of calls for an ExecuteCommand statement

• Edit cell

  • SocialCalcTableEditor.js (client)

    • SocialCalc.ProcessKeyDown = function(e) {
    • SocialCalc.ProcessKey = function (ch, e) {
    • SocialCalc.EditorProcessKey = function(editor, ch, e) {
    • SocialCalc.EditorSaveEdit = function(editor, text) {
    • SocialCalc.EditorScheduleSheetCommands = function(editor, cmdstr, saveundo, ignorebusy) {

  • player-broadcast.ls (client & server)

    • SocialCalc.ScheduleSheetCommands = (sheet, cmdstr, saveundo, isRemote) ->
    • SocialCalc.Callbacks.broadcast? \execute { cmdstr, saveundo, room:sheet._room }
      • sends message to server

  • player.ls (client) (shows as main.ls in browser)

    • SocialCalc.Callbacks.broadcast = (type, data={}) ~>
    • emit = (data) ~> @emit {data}

  • zapper.js (client)

  • main.ls (server)

    • @on data: !->
    • | \execute

  • sc.ls (server)

    • w.ExecuteCommand = (command) -> @postMessage { type: \cmd, command }
    • self.onmessage = ({ data: { type, ref, snapshot, command, room, log=[] } }) ->
    • | \cmd

• Re-calc after cell edit

  • SocialCalc-3.js
    • SocialCalc.RecalcTimerRoutine = function() {
  • formula1.js
    • SocialCalc.Formula.evaluate_parsed_formula = function(parseinfo, sheet, allowrangereturn) {
    • SocialCalc.Formula.EvaluatePolish = function(parseinfo, revpolish, sheet, allowrangereturn) {
    • SocialCalc.Formula.CalculateFunction = function(fname, operand, sheet, coord) {
    • SocialCalc.Formula.StoreIoEventFormula = function(function_name, coord, operand_reverse, sheet, io_parameters) {