TODO

Bugs:
- Adding a style element in Additional Head HTML renders it in the body of the HTML preview, which causes an error to be shown:
  Element “style” not allowed as child of element “body” in this context. (Suppressing further errors from this subtree.)
- The "name" field should be required for all components / parts, to make sure the generated javascript will actually compile.
- deletePage dataApi throws deleteComponent message

=====
TODO:
=====
[Gather feedback]
- Validate naming scheme of what we call things with other developers. 
  Should we rename the current 'components' to something more appropriate - Main components? App components? Modules? Plugins? 
  These are things that are not part of the base.

[New features]
- Add an option for adding assets? in base components?
- Have a way to reorganize code (sorting within a module, moving code from one module to another).
- Do we want a deeper layered data structure, to accomodate orgs and projects?
  so www/api/data/{organization}/{project}/base-components etc;
  Or will a project have a UUID as a 'key' for it?

[Code improvements]
- Fix styling for tests within tabs
- Have a way to generate style.css and extra.css

[Tests]
- Add a place to add tests next to the code.
- Add QUnit validator to transformers, routes?

====================================
Misc backlogged ideas in categories:
====================================
[Automated tests]
- Have a way to add tests for a component/part
  Should run directly in the browser. 
  Run this whenever a component/part changes to keep the feedback loop short.

  Backstopjs-like comparison of visual changes?
  QUnit for tests?
- How would a CI/CD, GitHub actions look for a Simply Code project?

[Preview mode and manual tests]
[v] Add a preview mode for a component preview:
  [v] shows HTML + CSS of the current component/page;
  - add buttons to show commands, transformers, data sources
    - with an option to show a specific one, or a subset;
    - show a different color for commands that have no code?
  
	[data-simply-command=deleteEntry]::before {
	  content: attr(data-simply-command);
	  position: absolute;
	  border: 2px dotted steelblue;
	  background-color: #f4f4bf;
	  padding: 4px;
	  margin-top: -34px;
	  margin-left: -7px;
	}

	- In preview mode: add data-simply-commands that navigate to the command code instead of executing that code;
- Is reusing sample data from components doable?
- Do we want/need sample data in full app preview? Where does it come from? Can we reuse pages/components?

[Developer experience]
- Add full screen view to edit a specific part.
- Add an app overview page with statistics about the code, lines of code spent.
- Keyboard shortcuts?
- Can we reorganize the code/api on disk so that editing files directly is feasable?
- Detect duplicates in commands/actions/routes etc.
- Detect unimplemented commands/actions/api methods
- Add a way to browse and edit the code by topic (routes, commands, actions) instead of modules. 
  Tags for browsing/selecting code bits?
  Overall improvements in code navigation
- Documentation, sample applications
- Set focus to the name input of a newly added part after adding a command/action/etc

[Developer collaboration]
- How can we do git and/or versioning?
- Can we make the Simply Code environment, previews and the like work multi-player? For instance with hyperhyperspace to connect different nodes/browsers?
- Can we 'mount' other Simply Code APIs to import components/base components/pages from? How would we build that - do we need to import all the CSS but only a subset of HTML?

[Unorganized]
- Design system, where does it fit in? Do we have the features of simplyDesign(v1) covered with what we have now?
- Can we reuse bootstrap to create components, and how would that work?
- Markdown support for descriptions?
- Comments, documentation about components?
- Search
- Raw API: split out methods and properties
- Includes for commands/actions/etc from other components, to make it clear that it is referenced (deleteEntry)
- fix styling for mobile view (hamburger menu, overflows etc)

Done:
[v] Add syntax highlighting for HTML, HTML mixed mode etc.
[v] Add a page CSS entry
[v] CSS syntax highlighting
[v] reorder to frontend-first ordering, so start with html/css instead of the data api.
[v] Add a Base components thing to get to feature complete for the server-provisioning example.
    This is where the RawAPI, Header can go.
    Also where head/foot HTML things go? And asset files? Bootstrap? CodeMirror scripts? Reusable templates?
[v] Add an option for Header and Footer? in base components? -> can be done using bodyHtml and footHtml;
[v] Add an option for commands/actions in base components?
[v] Add counters to parts to visually see which ones have content
[v] Rework codemirror integration so that it can be a standalone module;
  It requires code in other modules/page templates at the moment, would be a lot nicer if that was not the case. It should be more a plugin type thing.
[v] Preview/app structure:
	<!doctype html>
	<html>
	<head>
		--> simply-design stylesheets
		--> simplyDataApi, RawAPI, routes, commands, actions
		--> clone, updateDataSource functions;
		--> headHtml
	</head>
	<body>
		--> bodyHtml
		>> data-simply-field="page"
		--> footHtml

		>> simply-edit + simplyview
		>> datasources
		>> transformers
		>> sorters
	</body>
	</html>
[v] Fix HTML preview indentation;
[v] Replace the table structure in de componentAction etc with a grid or flexbox structure
[v] Move QUnit tests editor to an own component
[v] Integrate QUnit for commands
[v] Integrate QUnit for actions
[v] Fix QUnit iframe height to follow the iframe content height;
[v] Integrate validator.w3.org for HTML
[v] Add html validator to pageHtml, bodyHtml etc;
[v] Add tabs for editors so we can have more of them: specs, tests, sample data, preview? etc;
[v] Improve styling: at least for the buttons and navigation.
[v] Fix styling for 'publish' button
[v] Fix styling for 'add page' forms
[v] Fix styling for description
[v] Fix styling for component overview
[v] Fix styling for toasts
[v] Add a compile/build/pack step to bundle everything and create a working app;
[v] Brainstorm about what this thing should be called. Simply Code.
[v] issue with codemirror width being weird. We need to lock down the widths to get this working properly;
[v] Where do sorters go? Add them to page components at least? -> there were dataSources are;
[v] Add sorter editors
[v] Add a 'sample data' part for components to show in preview (like the json tab in http://simplystyle.se.yvo.muze.nl/woonmatch/)
[v] Add sample data to pages
[v] Sample app that is not simply-code
[v] Add option to setup the page frame, so the app doesn't have to have a header/nav part
[v] Compile in datasources
[v] Update css and other components on change for previews;
[v] prettify JSON that is written to the API
[v] Compile in sorters

Bugs fixed:
[v] running codemirror twice on the same textarea causes it to go wonky
[v] after deleting a part, codemirror needs to reinitialize;
[v] chrome doesn't render the simply-components
[v] preview now renders the foot html, which causes a 'simplyApp not found' error in the component preview (moved to body html instead)
[v] iframes have grey background, should default to white
[v] Route ordering should be be weight;

Won't fix:
[x] Replace count items with CSS counters - Won't fix: turns out not to be a trivial fix. 
[x] Should HTML preview be a highlighted look (using static codemirror view) instead? - Won't fix: now previewing the app instead of the HTML;