https://github.com/Gregoor/tofu

Experiment in structural code editing
https://github.com/Gregoor/tofu

code-editor projection-editor structured-editing

Last synced: about 2 months ago
JSON representation

Experiment in structural code editing

• Host: GitHub
• URL: https://github.com/Gregoor/tofu
• Owner: Gregoor
• Created: 2018-12-03T02:32:52.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-03-08T00:52:37.000Z (4 months ago)
• Last Synced: 2024-05-02T06:01:36.840Z (2 months ago)
• Topics: code-editor, projection-editor, structured-editing
• Homepage: https://marketplace.visualstudio.com/items?itemName=watware.tofu-vscode
• Size: 879 KB
• Stars: 98
• Watchers: 5
• Forks: 4
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Funding: FUNDING.yml

Lists

• awesome-structure-editors - Tofu
• awesome-stars - tofu

README

        
# Tofu: [post-stone age coding](https://dflate.io/state-of-tofu)

Tofu is an experimental [VSCode](https://code.visualstudio.com/) extension for **structured-yet-fluid** code writing with JavaScript and TypeScript.

Its goal is to provide more semantically meaningful code transformations while also offering escape hatches for direct literal code editing. A secondary goal is to minimize moments of broken syntax.

## Caveats

Given my limited resources of time, I sacrifice efficiency at the altar of iterating on the idea. Tofu re-parses the whole file on every edit, using [Babel](http://babel.io/) and formats it with [Prettier](https://prettier.io/) after most actions. This is not incremental, and costly for large files. In the short-term I make it work by not having large file, which I tend to favor anyway.\

In the longer term, I'd love for Tofu to use an incremental parser like [TreeSitter](https://tree-sitter.github.io/tree-sitter/) instead.

In terms of experience, depending on where you are coming from, this might be a radical change to how you usually code. Forget thinking about code style or managing syntax and slide into the world of literal structural editing.

## Actions

The **keymap** is designed to be familiar and literal. These are the basic actions which are usable in most contexts:

Action | Key(s)

--- | ---

**Cursor** |

Move | ← 
 ↑ 
 → 
 ↓

Jump | ⌥ Alt ← 
 ⌥ Alt →

**Selection** | ⇧ Shift +

Extend  | + ↑

Shrink | + ↓

Neighbors | + ← 
 + →

**Add new line** | ⏎ Enter (below) 
 ⇧ Shift ⏎ Enter (above)

**Wrap**  | ⌥ Alt ↓ (Select) 
 ( (Parenthesize) 
 { (Object) 
 [ (Array) 
 > (Function) 
 < (JSX)

**Unwrap**  | ⌥ Alt ↑

**Move Node**  | ⇧ Shift ⌥ Alt ← 
 ⇧ Shift ⌥ Alt →

**Toggle Tofu (Escape hatch)** | Esc

  

On top of this there are around 50 contextual actions (and counting). A few examples:

- `e` at the end of an `if`-block will add an `else` branch, placing the cursor within the new block

- `l` at the start of a variable declaration will replace the kind (e.g. `const`) with `let`

- many are small in nature such as `[` at the end of an expression inserting `[0]` instead to minimize broken syntactical states

  

I am sure there are many I have not thought of, so contributions in the forms of [new issues](https://github.com/Gregoor/tofu/issues) describing your expectations and wishes are greatly appreciated.

  

The opposite is also true, Tofu makes assumptions about what the right action is in which context. Please [let me know](https://github.com/Gregoor/tofu/issues) where I have baked in assumptions which do not jive with your style.

I will stop thinking of Tofu as an experiment once I and other users deem it a clear workflow improvement and the project has found a path towards monetary sustainability.