Merge pull request #3 from AngelMunoz/parse-child-elements

Refactor SelectorParser.fs to support parsing child selectors
AngelMunoz · Feb 12, 2024 · c87464b · c87464b
2 parents 4294958 + 114e7a3
commit c87464b
Show file tree

Hide file tree

Showing 15 changed files with 379 additions and 453 deletions.
diff --git a/markdown/assets/footer.css b/markdown/assets/footer.css
diff --git a/markdown/assets/highlight.css b/markdown/assets/highlight.css
diff --git a/markdown/assets/index.css b/markdown/assets/index.css
diff --git a/markdown/assets/links.css b/markdown/assets/links.css
diff --git a/markdown/assets/main.css b/markdown/assets/main.css
diff --git a/markdown/assets/script.js b/markdown/assets/script.js
diff --git a/markdown/assets/styles.css b/markdown/assets/styles.css
diff --git a/markdown/guides/general-usage.md b/markdown/guides/general-usage.md
@@ -117,14 +117,15 @@ let combined = h("div#main.is-primary[data-name=main]", h("span", "Hello World")
 
 The syntax is as follows:
 
-`<element-name><#id><.class><[attribute=value]>...`
+`<element-name><#id><.class><[attribute=value]>'> <element-definition>'...`
 
 Where:
 
 - `element-name` is the name of the element, element names should follow the HTML spec to define tag names.
 - `#id` is specified with a `#` followed by the value of said id, if more than one id attribute is present only the first one will be picked up.
 - `.class` is specified with a `.` followed by the value of said class.
 - `[attribute=value]` is specified with a `[` followed by the name of the attribute, followed by a required `=` even for no-value atributes (like `checked`), after te `=` symbol anything will be taken as the string until a `]` is found, even break line characters.
+- `> <element-definition>` child element definition
 
 You can specify attributes in any order or with spaces and break lines in between the attribute declarations, example:
 
@@ -137,6 +138,20 @@ Those examples above are equivalent and will produce the following structure
 <div id="main" class="is-primary"></div>
 ```
 
+For the case of children:
+
+- `div#main.is-primary > button.is-danger > span.is-large`
+
+Will produce the following structure
+
+```html
+<div id="main" class="is-primary">
+  <button class="is-danger">
+    <span class="is-large"></span>
+  </button>
+</div>
+```
+
 Attributes will always render in the following order "id", "class" and the rest in the order they were specified, as an example:
 
 ```fsharp