Skip to content

Commit

Permalink
Run a typo hunt!
Browse files Browse the repository at this point in the history
  • Loading branch information
@AngelMunoz
AngelMunoz committed Jan 28, 2024
1 parent dfe9fb4 commit ef97ce2
Show file tree
Hide file tree
Showing 19 changed files with 86 additions and 83 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"dotnet.defaultSolution": "samples/Samples.sln"
}
12 changes: 6 additions & 6 deletions docs/about.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<html lang="en"><head><title>About Hox</title><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="Hox Documentation" property="og:site_name"><meta content="Hox was inspired by the JS ecosystem, here&#39;s a short text explaining the motivation behind Hox." name="og:description"><meta content="About Hox" property="og:title"><meta content="website" property="og:type"><style>:root {
<html lang="en"><head><title>About Hox</title><meta name="viewport" content="width=device-width,initial-scale=1"><meta property="og:site_name" content="Hox Documentation"><meta name="og:description" content="Hox was inspired by the JS ecosystem, here&#39;s a short text explaining the motivation behind Hox."><meta property="og:title" content="About Hox"><meta property="og:type" content="website"><style>:root {
--hox-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--hox-font-size: 16px;
Expand Down Expand Up @@ -36,7 +36,7 @@
--hox-card-box-shadow: 0 5px 5px 4px rgba(199, 156, 76, 0.5),
0 4px 4px 0 rgba(199, 156, 76, 0.4);
}
}</style><link rel="stylesheet" href="/assets/styles.css"><link rel="stylesheet" href="/assets/links.css"><base href="/"><script async="" src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" crossorigin="anonymouys"></script><script type="importmap">{
}</style><link href="/assets/styles.css" rel="stylesheet"><link href="/assets/links.css" rel="stylesheet"><base href="/"><script src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" crossorigin="anonymouys" async=""></script><script type="importmap">{
"imports": {
"hox": "/assets/script.js",
"highlight.js": "https://ga.jspm.io/npm:[email protected]/es/index.js",
Expand All @@ -47,13 +47,13 @@
"highlight.js/lib/languages/xml": "https://ga.jspm.io/npm:[email protected]/es/languages/xml.js",
"highlight.js/lib/languages/plaintext": "https://ga.jspm.io/npm:[email protected]/es/languages/plaintext.js"
}
}</script></head><body><nav><ul><li><a href="/">Home</a></li><li><a href="/about.html">About Hox</a></li><li><a href="/guides/general-usage.html">Documentation</a></li><li><a href="/reference/nodes.html">Reference</a></li></ul></nav><aside><ul><li><h4>Guide</h4><ul><li><a href="guides/general-usage.html">Usage</a></li><li><a href="guides/using-feliz.html">Using Feliz</a></li><li><a href="guides/declarative-shadow-dom.html">Declarative Shadow DOM</a></li><li><a href="guides/csharp-and-vb-usage.html">C# and VB.NET</a></li><li><a href="guides/write-your-own-dsl.html">Write Your Own DSL</a></li><li><a href="guides/render-other-dsls.html">Render Others With Hox</a></li></ul></li><li><h4>Reference</h4><ul><li><a href="reference/nodes.html">Nodes</a></li><li><a href="reference/rendering.html">Rendering</a></li></ul></li></ul></aside><main><template shadowrootmode="open"><link rel="stylesheet" href="/assets/main.css"><link rel="stylesheet" href="/assets/links.css"><link rel="stylesheet" href="/assets/index.css"><link rel="stylesheet" href="/assets/highlight.css"><p>This library was born out of the Javascript ecosystem where there are these concepts called &quot;islands&quot; in view libraries.</p>
}</script></head><body><nav><ul><li><a href="/">Home</a></li><li><a href="/about.html">About Hox</a></li><li><a href="/guides/general-usage.html">Documentation</a></li><li><a href="/reference/nodes.html">Reference</a></li></ul></nav><aside><ul><li><h4>Guide</h4><ul><li><a href="guides/general-usage.html">Usage</a></li><li><a href="guides/using-feliz.html">Using Feliz</a></li><li><a href="guides/declarative-shadow-dom.html">Declarative Shadow DOM</a></li><li><a href="guides/csharp-and-vb-usage.html">C# and VB.NET</a></li><li><a href="guides/write-your-own-dsl.html">Write Your Own DSL</a></li><li><a href="guides/render-other-dsls.html">Render Others With Hox</a></li></ul></li><li><h4>Reference</h4><ul><li><a href="reference/nodes.html">Nodes</a></li><li><a href="reference/rendering.html">Rendering</a></li></ul></li></ul></aside><main><template shadowrootmode="open"><link href="/assets/main.css" rel="stylesheet"><link href="/assets/links.css" rel="stylesheet"><link href="/assets/index.css" rel="stylesheet"><link href="/assets/highlight.css" rel="stylesheet"><p>This library was born out of the Javascript ecosystem where there are these concepts called &quot;islands&quot; in view libraries.</p>
<p>These islands are basically holes in your HTML where asynchronous components can perform work while the rest of the page is rendered synchronously, this of course requires scripting capabilities in the browser, because as soon as nodes start resolving, they are added to the DOM. In the server we don't have DOM, but we can still leverage the fact that we can place asynchronous work side-by-side with synchronous work.</p>
<p>In server environments, it improves the so called DX (developer experience) as you don't have to coordinate between asynchronous functions to render in a single final place while also improving user experience, as the page can be streamed to the client as soon as a rendered chunk is available, instead of waiting for the whole page to be rendered. Modern browsers support this out of the box.</p>
<p>The rendering process is also cancellable unlike previous approaches where you'd pass a token to each coordinated function to avoid overworking before having the data to render the document in a single pass.</p>
<p>In Hox, every asynchronous node node is backed by a <code>CancellableValueTask&lt;T&gt;</code> which is just an alias for <code>CancellationToken -&gt; ValueTask&lt;T&gt;</code>, this also means that every asynchronous node is aware of the main cancellation token, and when a rendering process is cancelled, rather than starting the asynchronous work, it will just return an empty node. The rest of the rendering process is stopped when processing the next node in the internal stack.</p>
<p>In Hox, every asynchronous node is backed by a <code>CancellableValueTask&lt;T&gt;</code> which is just an alias for <code>CancellationToken -&gt; ValueTask&lt;T&gt;</code>, this also means that every asynchronous node is aware of the main cancellation token, and when a rendering process is cancelled, rather than starting the asynchronous work, it will just return an empty node. The rest of the rendering process is stopped when processing the next node in the internal stack.</p>
<p>This also highlights the fact that Hox, more than a templating library is a rendering library, so you can build other kinds of templating/domain specific languages libraries on top of it, that's how we provide the Feliz API for example.</p>
<p>For cases where every node of the document is synchronous, the rendering process is backed by <code>ValueTask&lt;T&gt;</code> so synchronous work will be executed synchronously as usual.</p>
<p>For cases where every node of the document is synchronous, the rendering process is backed by <code>ValueTask&lt;T&gt;</code> so synchronous work will be executed as usual.</p>
<p>In any case, this is a small library that hopes to push the web dev ecosystem in F# forward and spark some ideas in the community.</p>
<h2 id="special-thanks">Special Thanks</h2>
<ul>
Expand All @@ -62,7 +62,7 @@ <h2 id="special-thanks">Special Thanks</h2>
<li><a href="https://github.com/fsprojects/FSharp.Control.TaskSeq">FSharp.Control.TaskSeq</a> - For allowing us to have <code>IAsyncEnumerable&lt;T&gt;</code> support.</li>
<li><a href="https://github.com/stephan-tolksdorf/fparsec">FParsec</a> - For the building blocks of the CSS selector parsing.</li>
</ul>
</template></main><footer><template shadowrootmode="open"><link rel="stylesheet" href="/assets/footer.css"><link rel="stylesheet" href="/assets/links.css"><p><a href="https://github.com/AngelMunoz/Hox">Hox</a> is an F# library for rendering HTML documents asynchronously.</p></template></footer><script>if (!HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode')) {
</template></main><footer><template shadowrootmode="open"><link href="/assets/footer.css" rel="stylesheet"><link href="/assets/links.css" rel="stylesheet"><p><a href="https://github.com/AngelMunoz/Hox">Hox</a> is an F# library for rendering HTML documents asynchronously.</p></template></footer><script>if (!HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode')) {
(function attachShadowRoots(root) {
root.querySelectorAll("template[shadowrootmode]").forEach(template => {
const mode = template.getAttribute("shadowrootmode");
Expand Down
10 changes: 5 additions & 5 deletions docs/guides/csharp-and-vb-usage.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<html lang="en"><head><title>C# and VB.NET</title><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="Hox Documentation" property="og:site_name"><meta content="Hox can be used from C# and VB.NET." name="og:description"><meta content="C# and VB.NET" property="og:title"><meta content="website" property="og:type"><style>:root {
<html lang="en"><head><title>C# and VB.NET</title><meta name="viewport" content="width=device-width,initial-scale=1"><meta property="og:site_name" content="Hox Documentation"><meta name="og:description" content="Hox can be used from C# and VB.NET."><meta property="og:title" content="C# and VB.NET"><meta property="og:type" content="website"><style>:root {
--hox-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--hox-font-size: 16px;
Expand Down Expand Up @@ -36,7 +36,7 @@
--hox-card-box-shadow: 0 5px 5px 4px rgba(199, 156, 76, 0.5),
0 4px 4px 0 rgba(199, 156, 76, 0.4);
}
}</style><link rel="stylesheet" href="/assets/styles.css"><link rel="stylesheet" href="/assets/links.css"><base href="/"><script async="" src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" crossorigin="anonymouys"></script><script type="importmap">{
}</style><link href="/assets/styles.css" rel="stylesheet"><link href="/assets/links.css" rel="stylesheet"><base href="/"><script src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" crossorigin="anonymouys" async=""></script><script type="importmap">{
"imports": {
"hox": "/assets/script.js",
"highlight.js": "https://ga.jspm.io/npm:[email protected]/es/index.js",
Expand All @@ -47,7 +47,7 @@
"highlight.js/lib/languages/xml": "https://ga.jspm.io/npm:[email protected]/es/languages/xml.js",
"highlight.js/lib/languages/plaintext": "https://ga.jspm.io/npm:[email protected]/es/languages/plaintext.js"
}
}</script></head><body><nav><ul><li><a href="/">Home</a></li><li><a href="/about.html">About Hox</a></li><li><a href="/guides/general-usage.html">Documentation</a></li><li><a href="/reference/nodes.html">Reference</a></li></ul></nav><aside><ul><li><h4>Guide</h4><ul><li><a href="guides/general-usage.html">Usage</a></li><li><a href="guides/using-feliz.html">Using Feliz</a></li><li><a href="guides/declarative-shadow-dom.html">Declarative Shadow DOM</a></li><li><a href="guides/csharp-and-vb-usage.html">C# and VB.NET</a></li><li><a href="guides/write-your-own-dsl.html">Write Your Own DSL</a></li><li><a href="guides/render-other-dsls.html">Render Others With Hox</a></li></ul></li><li><h4>Reference</h4><ul><li><a href="reference/nodes.html">Nodes</a></li><li><a href="reference/rendering.html">Rendering</a></li></ul></li></ul></aside><main><template shadowrootmode="open"><link rel="stylesheet" href="/assets/main.css"><link rel="stylesheet" href="/assets/links.css"><link rel="stylesheet" href="/assets/index.css"><link rel="stylesheet" href="/assets/highlight.css"><p>Hox can also be used in C# and VB.NET projects. Part of the side effect of looking for a simple and and easy DSL is that Hox can be used in any .NET language.</p>
}</script></head><body><nav><ul><li><a href="/">Home</a></li><li><a href="/about.html">About Hox</a></li><li><a href="/guides/general-usage.html">Documentation</a></li><li><a href="/reference/nodes.html">Reference</a></li></ul></nav><aside><ul><li><h4>Guide</h4><ul><li><a href="guides/general-usage.html">Usage</a></li><li><a href="guides/using-feliz.html">Using Feliz</a></li><li><a href="guides/declarative-shadow-dom.html">Declarative Shadow DOM</a></li><li><a href="guides/csharp-and-vb-usage.html">C# and VB.NET</a></li><li><a href="guides/write-your-own-dsl.html">Write Your Own DSL</a></li><li><a href="guides/render-other-dsls.html">Render Others With Hox</a></li></ul></li><li><h4>Reference</h4><ul><li><a href="reference/nodes.html">Nodes</a></li><li><a href="reference/rendering.html">Rendering</a></li></ul></li></ul></aside><main><template shadowrootmode="open"><link href="/assets/main.css" rel="stylesheet"><link href="/assets/links.css" rel="stylesheet"><link href="/assets/index.css" rel="stylesheet"><link href="/assets/highlight.css" rel="stylesheet"><p>Hox can also be used in C# and VB.NET projects. Part of the side effect of looking for a simple and easy DSL is that Hox can be used in any .NET language.</p>
<h2 id="c-usage">C# Usage</h2>
<p>Since Hox is written in F#, much of the API looks like a static class to C# code. This means you have to add <code>using static</code> references to the Hox namespace.</p>
<p>The following example shows how to use Hox in a C# project.</p>
Expand Down Expand Up @@ -100,8 +100,8 @@ <h2 id="vb.net-usage">VB.NET Usage</h2>
' do something with the html
End Sub
</code></pre>
<p>In general, both languages can use Hox up to the same extent as F# except by the Feliz API which uses specific F# types so, you can following the rest of the guides and reference will be useful for you as well.</p>
</template></main><footer><template shadowrootmode="open"><link rel="stylesheet" href="/assets/footer.css"><link rel="stylesheet" href="/assets/links.css"><p><a href="https://github.com/AngelMunoz/Hox">Hox</a> is an F# library for rendering HTML documents asynchronously.</p></template></footer><script>if (!HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode')) {
<p>In general, both languages can use Hox up to the same extent as F# except by the Feliz API which uses specific F# types so, you can follow the rest of the guides and reference will be useful for you as well.</p>
</template></main><footer><template shadowrootmode="open"><link href="/assets/footer.css" rel="stylesheet"><link href="/assets/links.css" rel="stylesheet"><p><a href="https://github.com/AngelMunoz/Hox">Hox</a> is an F# library for rendering HTML documents asynchronously.</p></template></footer><script>if (!HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode')) {
(function attachShadowRoots(root) {
root.querySelectorAll("template[shadowrootmode]").forEach(template => {
const mode = template.getAttribute("shadowrootmode");
Expand Down
Loading

0 comments on commit ef97ce2

Please sign in to comment.