Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor SelectorParser.fs to support parsing child selectors #3

Merged
merged 5 commits into from
Feb 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 0 additions & 9 deletions markdown/assets/footer.css

This file was deleted.

176 changes: 0 additions & 176 deletions markdown/assets/highlight.css

This file was deleted.

6 changes: 0 additions & 6 deletions markdown/assets/index.css

This file was deleted.

20 changes: 0 additions & 20 deletions markdown/assets/links.css

This file was deleted.

33 changes: 0 additions & 33 deletions markdown/assets/main.css

This file was deleted.

24 changes: 0 additions & 24 deletions markdown/assets/script.js

This file was deleted.

76 changes: 0 additions & 76 deletions markdown/assets/styles.css

This file was deleted.

17 changes: 16 additions & 1 deletion markdown/guides/general-usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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
Expand Down
Loading
Loading