Problem: one of Anacostia's core principles is to enable plugin developers to create their own frontends to display visualizations about their nodes. In order for Anacostia to do this, Anacostia distributes html templates to developers in the form of functions that render the html via string formatting (see the files in the components folder) rather than using a templating engine like Jinja2. This has several advantages:
Easier to send templates to other developers. Developers do not have to mount another template directory in FastAPI and inherit the blueprint.
Easier to provide an example of what the template looks like. By providing a example of the generated html snippet in the docstring, the docstring can then be displayed by the vs code hover window.
Easier input validation. These functions can also serve as a way to ensure the developer provides the template with the correct information. We can help make sure the developer provides the right information through type hints in the function definition as well as by writing some custom logic for validation.
Easier debugging. These functions are also easier to debug with a debugger because it is just python.
With all of that said, there are also several disadvantages:
Cross site scripting. Because we are not using a templating engine, we don't have access to auto-escape. With that said, it should be noted that jinja does not automatically enable auto-escaping either. See this easy way to prevent XSS by using auto-escaping.
No html syntax highlighting and autocomplete in vs code.
Proposed solutions:
Create a custom decorator @anacostia_html. Users will use this decorator to declare their html rendering functions. The decorator will ensure all code is subjected to auto-escape. There should be an auto-escaping library we can leverage, but we still need to create the decorator.
Build an LSP for vs code. The LSP recognizes the @anacostia_html decorator and provides html syntax highlighting and autocomplete for html elements in the decorated html rendering function.
[ ] Check for correctness of html snippets (e.g., check if html returned by node is trying to swap out #page_content div correctly; i.e., we wouldn't want to have two divs both with ID #page_content one inside another)
Problem: one of Anacostia's core principles is to enable plugin developers to create their own frontends to display visualizations about their nodes. In order for Anacostia to do this, Anacostia distributes html templates to developers in the form of functions that render the html via string formatting (see the files in the
componentsfolder) rather than using a templating engine like Jinja2. This has several advantages:With all of that said, there are also several disadvantages:
Proposed solutions:
@anacostia_html. Users will use this decorator to declare their html rendering functions. The decorator will ensure all code is subjected to auto-escape. There should be an auto-escaping library we can leverage, but we still need to create the decorator.@anacostia_htmldecorator and provides html syntax highlighting and autocomplete for html elements in the decorated html rendering function.