Skip to content

Commit

Permalink
feat(ast,readme): new todo and readme + cleaning
Browse files Browse the repository at this point in the history
  • Loading branch information
CWood-sdf committed Jul 23, 2024
1 parent ba3ff06 commit 1b7f02a
Show file tree
Hide file tree
Showing 20 changed files with 522 additions and 80 deletions.
81 changes: 81 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,88 @@

This plugin seeks to turn neovim into a hypermedia client through its own custom markup, styling, and scripting interface for extensions. It will also try to use the hypermedia controls similar to what htmx uses to make building extensions easier.

Banana is designed to make neovim uis absurdly easy by using html. For this, it has a custom html language offshoot and a custom css offshoot. The goal of banana is to have an lsp and also a devtools-esque debug window to make development easier.

> [!CAUTION]
>
> This project is still in early development.
> Expect breaking changes and bugs, and please report any issues you encounter.
The banana renderer takes a design architecture that allows it to be blazingly fast: rendering is done in _one_ pass. There will be no reflowing of any elements ever because later elements were rendered. This also means that complicated box trees and render trees (for example, I believe ladybird uses two trees to render) are _not_ allowed in the renderer. This allows the renderer to be very simple (and fast) while also supporting most of the features of modern html and css. This rendering architecture does make some things (particularly floats) more complicated, but it lets everything else be very fast. This simplification is required because banana is written in lua (slower than the c++ that modern browsers use).

Partial or complete implementations exist for the following elements:

- div
- title
- meta
- ul
- ol
- li
- span

Partial or complete implementations exist for the following css properties (for the most uptodate list check lua/banana/ncss/validations.lua):

- hl-\* properties for highlighting (use the same properties as nvim_set_hl)
- hl-underline
- hl-italic
- hl-bold
- hl-fg
- hl-bg
- hl-link
- hl-\_\_name
- list-style-type (very partial)
- width
- height
- display (currently just flex, inherit, initial, and none)
- flex-basis
- flex-shrink
- flex-grow
- flex-wrap
- text-align (missing justify)
- position (position: sticky is not possible to implement in neovim)
- z-index
- left
- right
- top
- bottom
- padding
- padding-left
- padding-right
- padding-top
- padding-bottom
- margin
- margin-left
- margin-right
- margin-top
- margin-bottom

Implementations for the following selectors exist:

- pseudo class (currently supporting :not, :last-child, :first-child. for uptodate list, see lua/banana/ncss/queryParser.lua)
- universal (\*)
- descendant (space)
- tag name
- child selector (>)
- class
- id

Currently the following css functions are implemented (for uptodate list see cssFunctions variable in lua/banana/ncss/valueParser.lua):

- rgb()
- hl-extract() (to get the values from a neovim highlight group)

The following units are implemented (for uptodate list see M.calcUnitNoMod in lua/banana/nml/ast.lua):

- ch
- fr
- %

## NEEDED DOCUMENTATION

- creating and opening instance
- instance/ast api
- scripting support
- banana path
- using remaps
- developing banana
- developing a banana plugin
154 changes: 151 additions & 3 deletions TODO.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,153 @@
# TODO

- list-style-type on ol
- start flexbox/grid
- Rework width passing in render flow
## 1.0 requirements

- Able to make actual uis with same level of difficulty as html
- Able to query any element on the page easily (with as much code as dom)
- As easy to write as html
- A proper framework for loading nml/ncss files (hopefully similar in usage to lua require)
- tests for pretty much every styling condition (uggh)
- impl all the styles not in the "Later styles section"
- dev tools

## Roadmap

### Upcoming big projects

- Float
- Grid
- Animations + Transitions
- List stuff

### Api

- [x] Easy to load nml files
- [x] Title tag sets title of buf
- [x] Meta tags set attributes (like maybe float...)
- [x] Nml width height sets win width/height
- [x] Nml left, right, top, bottom sets win position

### Markup Language

- [ ] Character Entity Support
- [x] Basic Renderer
- [x] Very Fast rendering
- [x] Attributes
- [x] Good attributes api
- [x] DOM Manipulation
- [ ] Hypermedia attributes
- [x] Basic templating (maybe just substitution of attribute values)
- [x] Read File

### Styling Language

- [x] Basic Styling
- [ ] Complex styling (animations, transitions)
- [x] Efficient style recalculation (not needed (hopefully) bc current application so fast)
- [x] Very Fast rendering
- [x] Few errors
- [x] Based on css
- [x] Have to do some inversions on the style treesitter tree

### Properties to implement

- [x] handles overflow
- [x] text-align (missing justify)
- [ ] aspect-ratio
- [ ] display: flex, grid, inline, inline-block, none, block
- [x] height/width
- [ ] list-style
- [x] list-style-type (needed for ol)
- [ ] max/min-\*size
- [ ] float: seems hard, do later

### Flex box

- [x] flex-grow
- [ ] flex-direction
- [x] flex-wrap
- [x] flex-basis
- [x] fr units
- [x] flex-shrink

### Abs/float position

- [x] left/right/top/bottom
- [x] z-index
- [x] position: cant do fixed or sticky (unfortunate)

#### Later stuff

- [ ] outline?
- [ ] content? seems hard, do it later
- [ ] direction? seems easy but not extremely useful for now
- [ ] hyphenate-character (needs hyphenation)

#### Table stuff

- [ ] gap: more table stuff, do later
- [ ] row-gap: req table
- [ ] empty-cells: later

### Styler

- [x] Should take in a page AST, and the styling AST, then apply all the rules
- [x] Needs to be really fast

### Style/Markup interface

- [x] Follow [this](https://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css)
- [ ] Need maybe some caching, and some sort of trigger mechanism that lives on each element so that (for example) a class change can just retrigger only the needed selectors (might not be necessary bc it pretty fast)
- [x] Needs a good way of applying declarations to elements

### Renderer Goals

- [ ] Should have a target that it can give the rendered lines to (this target could like render to a part of a buffer, or be a whole buffer renderer...)
- [x] Should take in AST and return Word[][]
- [ ] Render caching?
- [x] Need to actually compute width/height restrictions and follow them
- [ ] Flexbox?
- [x] Respect the styling
- [ ] Robust (aka styling still works if win really small)

### Events

- [x] Good event interface (just using autocmd lol)

### Cleaner

- [x] Follow the html [block formatting spec](hhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_contextthttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_contexttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_context) and [inline formatting spec](https://developer.mozilla.org/en-US/docs/Web/CSS/Inline_formatting_context)

### Rendering pipeline

1. Parse nml
2. Parse styling
3. Apply styling
4. Execute Scripting? (js runs while the html is parsed(I think?)? should do this with lua? kinda feels like unneccessary added complexity (esp bc we have to apply styling while parsing) but im not sure)
5. Clean AST
6. Renderer
7. Pipe rendered words into the renderer target
8. Scripting now?

### Lua Scripting Interface

- [x] Basic Lua Scripting
- [x] Events (just using autocmd)
- [x] DOM Manipulation (very basic)

## Much later roadmap

### LSP

- [ ] Markup Language Server
- [ ] Styling
- [ ] Lua Scripting

### Tree-sitter

- [x] Markup Language
- [x] Styling

### Rewrite in rust (or zig)

Rewrite into rust or zig using nvim-oxi or ffi and stuff so that it can be much faster. Maybe rewrite just core rendering stuff (ast.lua/tags.lua and leave remaps and stuff in lua)
8 changes: 4 additions & 4 deletions banana/asdf.nml
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@ nml {
}
#one {
hl-bg: #ff0000;
position: absolute;
left: 1ch;
top: 1ch;
/* position: absolute; */
/* left: 1ch; */
/* top: 1ch; */
width: 3ch;
height: 3ch;
z-index: 1;

}
#two {
hl-bg: #00ff00;
position: absolute;
/* position: absolute; */
left: 2ch;
top: 2ch;
width: 3ch;
Expand Down
13 changes: 8 additions & 5 deletions banana/test.nml
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
}

nml {
width: 80%;
height: 80%;

}

Expand Down Expand Up @@ -58,17 +60,18 @@
}
ul.plugin-loaded {
list-style-type: '● ';
list-base-width: 4ch;
}
ul:not(.plugin-loaded) {
list-style-type: '○ ';
list-base-width: 4ch;
}
ul {
padding-left: 2ch;
}
ul > * {
hl-fg: hl-extract(fg, Normal);
}
#plugin-template {
display: hidden;
display: none;
}

.widthyeet {
Expand Down Expand Up @@ -103,11 +106,11 @@
<span class="header">Loaded: </span><span class="comment"> (44)</span>
</div>

<div style="display: hidden;" id="plugin-template">
<div style="display: none;" id="plugin-template">
<ul> <li> </li> </ul>
</div>

<script src="asdf">
<script src="banana.test.asdf">

</script>
</body>
Expand Down
5 changes: 3 additions & 2 deletions lua/banana/init.lua
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@ local render = require('banana.lazyRequire')('banana.instance')

M.yeet = function()
if instance == nil then
instance = render.newInstance("asdf", "asdf")
instance = render.newInstance("test", "asdf")
-- instance.DEBUG = true
end
instance.showPerf = true
instance.DEBUG_showPerf = true
instance.DEBUG_stressTest = true
-- local filename = os.getenv("HOME") .. '/projects/banana.nvim/test.nml'
instance:open()

Expand Down
Loading

0 comments on commit 1b7f02a

Please sign in to comment.