firefly-compiler 0.4.77 → 0.4.78

package/core/Json.ff

@@ -184,7 +184,7 @@ extend self: Json {
 
     index(key: Int): Json
         target js sync """
-            return typeof self_ === 'array' ? self_[key] ?? null : null;
+            return Array.isArray(self_) ? self_[key] ?? null : null;
         """
 
     hasField(key: String): Bool
@@ -200,7 +200,7 @@ extend self: Json {
 
     getIndex(key: Int): Option[Json]
         target js sync """
-            return typeof self_ === 'array' ? ff_core_Option.Some(self_[key_] ?? null) : ff_core_Option.None();
+            return Array.isArray(self_) ? ff_core_Option.Some(self_[key_] ?? null) : ff_core_Option.None();
         """
         
     getFields(): Option[List[String]]

package/core/String.ff

@@ -206,6 +206,22 @@ extend self: String {
             return true;
         """
 
+    filter(body: Char => Bool): String
+        target js sync """
+            const result = [];
+            for(let i = 0; i < self_.length; i++) {
+                if(body_(self_.charCodeAt(i))) result.push(self_.charAt(i));
+            }
+            return result.join("");
+        """
+        target js async """
+            const result = [];
+            for(let i = 0; i < self_.length; i++) {
+                if(await body_(self_.charCodeAt(i))) result.push(self_.charAt(i));
+            }
+            return result.join("");
+        """
+
     toBuffer(): Buffer
         target js sync """
             const encoded = new TextEncoder().encode(self_)

package/fireflysite/.firefly/package.ff

@@ -0,0 +1,4 @@
+package ff:fireflysite:0.0.0
+dependency ff:webserver:0.0.0
+dependency ff:lux:0.0.0
+dependency ff:compiler:0.0.0

package/fireflysite/CommunityOverview.ff

@@ -0,0 +1,20 @@
+import Guide
+import CountingButtonDemo
+import MatchingPasswordsDemo
+
+new(): Document {
+    Document([
+        Section("Community", [
+            Paragraph([
+                Text("The developers of Firefly hang out in")
+                Code("#firefly")
+                Text("on the")
+                Link("r/ProgrammingLanguages", "https://discord.gg/yQ9mSk7CJ5")
+                Text("Discord.")
+            ])
+            Paragraph([
+                Text("If you're interested in Firefly, that's the best way to be part of the community for now.")
+            ])
+        ])
+    ])
+}

package/fireflysite/CountingButtonDemo.ff

@@ -0,0 +1,58 @@
+import Guide
+import Lux from ff:lux
+import LuxEvent from ff:lux
+
+name = "Counting button"
+
+new(): Demo {
+    Demo(
+        name
+        {render(_)}
+    )
+}
+
+render(lux: Lux): Unit {
+    lux.div {
+        lux.useState(0): count, setCount => 
+        lux.button {
+            lux.text("Clicked " + count + " times")
+            lux.onClick {event =>
+                event.preventDefault()
+                setCount(count + 1)
+            }
+        }
+    }
+}
+
+newDocument(): Document {
+    Document([
+        Section(name, [
+            Paragraph([Text("A button that counts how many times it's been clicked.")])
+        ])
+        Section("Demo", [
+            LuxDemo(name)
+        ])
+        Section("Code", [
+            Paragraph([
+                Text("This example uses the Lux frontend framework.")
+                Text("In Lux, state lives in the DOM, and the")
+                Code("useState")
+                Text("method lets you maintain state in the parent node.")
+            ])
+            CodeBlock("""
+                render(lux: Lux): Unit {
+                    lux.div {
+                        lux.useState(0): count, setCount => 
+                        lux.button {
+                            lux.text("Clicked " + count + " times")
+                            lux.onClick {event =>
+                                event.preventDefault()
+                                setCount(count + 1)
+                            }
+                        }
+                    }
+                }
+            """, firefly = True)
+        ])
+    ])
+}

package/fireflysite/ExamplesOverview.ff

@@ -0,0 +1,31 @@
+import Guide
+import CountingButtonDemo
+import MatchingPasswordsDemo
+
+mock(): List[Document] {
+    [
+        new()
+        CountingButtonDemo.newDocument()
+        MatchingPasswordsDemo.newDocument()
+    ]
+}
+
+new(): Document {
+    Document([
+        Section("Overview", [
+            Paragraph([
+                Text("Here you'll find examples that demonstrate what you can do with Firefly.")
+                Text("In fact, you're looking at an example right now - this site is") 
+                Link("written in Firefly", "https://github.com/Ahnfelt/firefly-boot/tree/master/fireflysite")
+                Text("and so is the")
+                Link("Firefly compiler", "https://github.com/Ahnfelt/firefly-boot/tree/master/compiler")
+                Text("and")
+                Link("language server", "https://github.com/Ahnfelt/firefly-boot/tree/master/lsp")
+                Text(".")
+            ])
+            Paragraph([
+                Text("Check the list here for examples and demos.")
+            ])
+        ])
+    ])
+}

package/fireflysite/Guide.ff

@@ -0,0 +1,308 @@
+import Lux from ff:lux
+import Css from ff:lux
+import Tokenizer from ff:compiler
+import Token from ff:compiler
+import Styles
+
+data Guide(
+    documents: List[Document]
+)
+
+data Document(
+    sections: List[Section]
+)
+
+data Section(
+    heading: String
+    blocks: List[Block]
+)
+
+data Block {
+    Paragraph(inlines: List[Inline])
+    Bullets(items: List[List[Inline]])
+    CodeBlock(code: String, firefly: Bool = False)
+    Image(url: String)
+    Video(url: String)
+    LuxDemo(demo: String)
+}
+
+data Inline {
+    Text(text: String)
+    Bold(text: String)
+    Italic(text: String)
+    Code(code: String, firefly: Bool = False)
+    Link(text: String, url: String)
+    Anchor(heading: String, title: Option[String] = None)
+}
+
+capability Demo(
+    name: String
+    render: Lux => Unit
+)
+
+render(lux: Lux, prefix: String, kebab: String, guide: Guide, demos: List[Demo]) {
+    let document = guide.documents.find {
+        _.sections.first().any {kebabCase(_.heading) == kebab}
+    }.else {guide.documents.grabFirst()}
+    lux.add("div") {
+        lux.cssClass(Styles.pageCss)
+        renderTopbar(lux, prefix)
+        lux.add("div") {
+            lux.cssClass(Styles.guideCss)
+            renderSidebar(lux, prefix, guide, document.sections.first().map {_.heading}.else {""})
+            lux.add("main") {
+                lux.cssClass(Styles.guideMainCss)
+                renderDocument(lux, document, demos)
+            }
+        }
+    }
+}
+
+renderSoleDocument(lux: Lux, prefix: String, document: Document, demos: List[Demo]) {
+    lux.add("div") {
+        lux.cssClass(Styles.pageCss)
+        renderTopbar(lux, prefix)
+        lux.add("main") {
+            lux.cssClass(Styles.guideSoleDocumentCss)
+            renderDocument(lux, document, demos)
+        }
+    }
+}
+
+renderTopbar(lux: Lux, prefix: String) {
+    lux.add("header") {
+        lux.add("nav") {
+            lux.cssClass(Styles.topbarCss)
+            lux.add("a") {
+                lux.cssClass(Styles.whiteLinkCss)
+                lux.cssClass(Styles.topbarFireflyCss)
+                if(prefix == "/") {lux.set("aria-current", "page")}
+                lux.set("href", "/")
+                lux.text("Firefly")
+            }
+            lux.add("a") {
+                lux.cssClass(Styles.whiteLinkCss)
+                if(prefix == "/guide/") {lux.set("aria-current", "page")}
+                lux.set("href", "/guide/")
+                lux.text("Guide")
+            }
+            lux.add("a") {
+                lux.cssClass(Styles.whiteLinkCss)
+                if(prefix == "/examples/") {lux.set("aria-current", "page")}
+                lux.set("href", "/examples/")
+                lux.text("Examples")
+            }
+            lux.add("a") {
+                lux.cssClass(Styles.whiteLinkCss)
+                if(prefix == "/packages/") {lux.set("aria-current", "page")}
+                lux.set("href", "/packages/")
+                lux.text("Packages")
+            }
+            lux.add("a") {
+                lux.cssClass(Styles.whiteLinkCss)
+                if(prefix == "/community/") {lux.set("aria-current", "page")}
+                lux.set("href", "/community/")
+                lux.text("Community")
+            }
+        }
+    }
+}
+
+renderSidebar(lux: Lux, prefix: String, guide: Guide, selectedHeading: String) {
+    lux.add("nav") {
+        lux.cssClass(Styles.guideSidebarCss)
+        lux.add("form") {
+            lux.set("role", "search")
+            lux.add("input") {
+                lux.set("aria-label", "Search")
+                lux.cssClass(Styles.searchInputCss)
+                lux.set("placeholder", "Search...")
+            }
+        }
+        lux.add("ul") {
+            lux.cssClass(Styles.guideSidebarUlCss)
+            mutable first = True
+            guide.documents.each {document =>
+                lux.add("li") {
+                    lux.cssClass(Styles.guideSidebarLiCss)
+                    lux.add("a") {
+                        let heading = document.sections.grabFirst().heading
+                        lux.cssClass(Styles.whiteLinkCss)
+                        if(heading == selectedHeading) {lux.set("aria-current", "page")}
+                        lux.set("href", if(first) {prefix} else {prefix + kebabCase(heading)})
+                        lux.text(heading)
+                    }
+                }
+                first = False
+            }
+        }
+    }
+}
+
+renderDocument(lux: Lux, document: Document, demos: List[Demo]) {
+    lux.add("article") {
+        lux.cssClass(Styles.guideDocumentCss)
+        document.sections.pairs().each {| Pair(index, section) => 
+            renderSection(lux, index == 0, section, demos)
+        }
+    }
+}
+
+renderSection(lux: Lux, first: Bool, section: Section, demos: List[Demo]) {
+    lux.add(if(first) {"h1"} else {"h2"}) {
+        lux.cssClass(if(first) {Styles.guideH1Css} else {Styles.guideH2Css})
+        lux.text(section.heading)
+    }
+    section.blocks.each {renderBlock(lux, _, demos)}
+}
+
+renderBlock(lux: Lux, block: Block, demos: List[Demo]) {
+    block.{
+        | Paragraph(inlines) => renderParagraph(lux, inlines)
+        | CodeBlock(code, firefly) => renderCodeBlock(lux, code, firefly)
+        | Bullets(items) => renderBullets(lux, items)
+        | Image(url) => renderImage(lux, url)
+        | Video(url) => renderVideo(lux, url)
+        | LuxDemo(name) => renderLuxDemo(lux, name, demos)
+    }
+}
+
+renderParagraph(lux: Lux, inlines: List[Inline]) {
+    lux.add("p") {
+        renderInlines(lux, inlines)
+    }
+}
+
+renderCodeBlock(lux: Lux, code: String, firefly: Bool) {
+    let lines = code.lines().dropWhile {_.all {_ == ' '}}.reverse().dropWhile {_.all {_ == ' '}}.reverse()
+    let indentation = lines.first().map {_.takeWhile {_ == ' '}.size()}.else {0}
+    lux.add("pre") {
+        lux.cssClass(Styles.guideCodeBlockCss)
+        lux.add("code") {
+            lux.cssClass(Styles.guideCodeCss)
+            let unindentedCode = lines.map {_.dropFirst(indentation)}.join("\n")
+            if(firefly) {
+                renderHighlightedCode(lux, unindentedCode)
+            } else {
+                lux.text(unindentedCode)
+            }
+        }
+    }
+}
+
+renderBullets(lux: Lux, items: List[List[Inline]]) {
+    lux.add("ul") {
+        items.each {inlines =>
+            lux.add("li") {
+                renderInlines(lux, inlines)
+            }
+        }
+    }
+}
+
+renderImage(lux: Lux, url: String) {
+    lux.add("img") {
+        lux.set("src", url)
+        lux.css(Css.maxWidth("100%"))
+    }
+}
+
+renderVideo(lux: Lux, url: String) {
+    lux.add("video") {
+        lux.set("src", url)
+        lux.css(Css.maxWidth("100%"))
+    }
+}
+
+renderLuxDemo(lux: Lux, name: String, demos: List[Demo]) {
+    demos.find {_.name == name}.map {_.render(lux)}.else {lux.text("Demo not found")}
+}
+
+renderInlines(lux: Lux, inlines: List[Inline]) {
+    inlines.separate([Text(" ")]).each {renderInline(lux, _)}
+}
+
+renderInline(lux: Lux, inline: Inline) {
+    inline.{
+        | Anchor(heading, title) => 
+            lux.add("a") {
+                let url = title.map {"/guide/" + kebabCase(_)}.else {""} + "#" + kebabCase(heading)
+                lux.cssClass(Styles.guideLinkCss)
+                lux.set("href", url)
+                lux.text(title.map {_ + ": "}.else {""} + heading)
+            }
+        | Bold(text) => 
+            lux.add("b") {
+                lux.text(text)
+            }
+        | Code(code, firefly) => 
+            lux.add("code") {
+                lux.cssClass(Styles.guideCodeCss)
+                if(firefly) {
+                    renderHighlightedCode(lux, code)
+                } else {
+                    lux.text(code)
+                }
+            }
+        | Italic(text) => 
+            lux.add("i") {
+                lux.text(text)
+            }
+        | Link(text, url) => 
+            lux.add("a") {
+                lux.cssClass(Styles.guideLinkCss)
+                lux.set("href", url)
+                lux.text(text)
+            }
+        | Text(text) => 
+            lux.text(text)
+    }
+}
+
+renderHighlightedCode(lux: Lux, code: String) {
+    let tokens = Tokenizer.tokenize("<example>", code, None, False)
+    mutable offset = 0
+    mutable index = 0
+    tokens.each {token =>
+        if(token.startOffset > offset) {
+            lux.span {
+                lux.cssClass(Styles.codeCommentCss)
+                lux.text(code.slice(offset, token.startOffset))
+            }
+        }
+        if(token.kind != LEnd) {
+            let css = token.kind.{
+                | LChar => Styles.codeStringCss
+                | LFloat => Styles.codeNumberCss
+                | LInt => Styles.codeNumberCss
+                | LKeyword => Styles.codeKeywordCss
+                | LNamespace => Styles.codeTypeCss
+                | LString => Styles.codeStringCss
+                | LUpper => Styles.codeTypeCss
+                | LWildcard => Styles.codeVariableCss
+                | LLower {tokens.get(index - 1).any {t => 
+                    t.kind == LBracketRight || t.kind == LDot
+                }} => Styles.codeCallCss
+                | LLower {tokens.grab(index + 1).kind == LBracketLeft} => Styles.codeCallCss
+                | LLower => Styles.codeVariableCss
+                | _ => Styles.codeOtherCss
+            }
+            lux.span {
+                lux.cssClass(css)
+                lux.text(code.slice(token.startOffset, token.stopOffset))
+            }
+            offset = token.stopOffset
+        }
+        index += 1
+    }
+}
+
+kebabCase(text: String): String {
+    mutable result = text.trim().lower().filter {c => c.isAsciiLetterOrDigit() || c == ' '}
+    doWhile {
+        let before = result
+        result = result.replace("  ", "")
+        result != before
+    }
+    result.replace(" ", "-")
+}

package/fireflysite/GuideIntroduction.ff

@@ -0,0 +1,69 @@
+import Guide
+
+mock(): List[Document] {
+    [
+        new()
+        Document([Section("Control flow", [])])
+        Document([Section("Base types", [])])
+        Document([Section("Collections", [])])
+        Document([Section("Custom types", [])])
+        Document([Section("Async I/O", [])])
+        Document([Section("Structured concurrency", [])])
+        Document([Section("Applications", [])])
+        Document([Section("Packages and modules", [])])
+        Document([Section("Functions and methods", [])])
+        Document([Section("Traits and instances", [])])
+        Document([Section("JavaScript interop", [])])
+    ]
+}
+
+new(): Document {
+    Document([
+        Section("Introduction", [
+            Paragraph([
+                Text("In this guide you will learn to use Firefly.")
+                Text("Firefly is a programming language that compiles to JavaScript.")
+                Text("It runs in the browser and on the server, and lets you develop webapps with a minimum of hassle.")
+            ])
+        ])
+        Section("Getting started", [
+            Paragraph([
+                Text("Firefly comes with a compiler, a build system and a package manager.")
+            ])
+            Paragraph([
+                Text("Install Firefly:")
+            ])
+            CodeBlock("npm install -g firefly-compiler")
+            Paragraph([
+                Text("Save this code as")
+                Code("Hello.ff")
+                Text(":")
+            ])
+            CodeBlock("""
+                nodeMain(system: NodeSystem) {
+                    system.writeLine("Hello, World!")
+                }
+            """, firefly = True)
+            Paragraph([
+                Text("And run it:")
+            ])
+            CodeBlock("firefly Hello.ff")
+            Paragraph([
+                Text("You now know how to run Firefly code!")
+            ])
+        ])
+        Section("Editor support", [
+            Paragraph([
+                Text("Install the")
+                Link("Firefly Language VSCode extension", "https://marketplace.visualstudio.com/items?itemName=firefly-team.firefly-lang")
+                Text(" to get autocompletion, renaming, go to definition, highlighting, etc. You can find it under Extensions in VSCode.")
+            ])
+            Paragraph([
+                Text("The Firefly code highlighting on this site matches the Dark Modern theme in VSCode.")
+            ])
+            Paragraph([
+                Text("If you'd like to make an extension for a different editor, the language server is available, as well as the source code for the VSCode extension.")
+            ])
+        ])
+    ])
+}

package/fireflysite/Main.ff

@@ -1,15 +1,92 @@
-dependency ff:webserver:0.0.0
 import WebServer from ff:webserver
+import Lux from ff:lux
+import Guide
+import GuideIntroduction
+import ExamplesOverview
+import PackagesOverview
+import CommunityOverview
+import Styles
+import CountingButtonDemo
+import MatchingPasswordsDemo
 
 nodeMain(system: NodeSystem): Unit {
     let host = system.arguments().grab(0)
     let port = system.arguments().grab(1).grabInt()
     WebServer.new(system, host, port).listen {request =>
-        let parameters = if(request.readRawQueryString().size() == 0) {""} else {
-            "?" + request.readRawQueryString()
+        let path = request.readPath()
+        if(path.startsWith("/guide/")) {
+            serveGuideHtml("Firefly Guide", request)
+        } elseIf {path.startsWith("/examples/")} {
+            serveGuideHtml("Firefly Examples", request)
+        } elseIf {path.startsWith("/packages/")} {
+            serveGuideHtml("Firefly Packages", request)
+        } elseIf {path.startsWith("/community/")} {
+            serveGuideHtml("Firefly Community", request)
+        } elseIf {path.startsWith("/js/") && !path.contains("..")} {
+            request.writeHeader("Content-Type", "text/javascript; charset=UTF-8")
+            let asset = if(path == "/js/ff/fireflysite/Main.mjs" && system.assets().exists("/js/Main.bundle.js")) {
+                "/js/Main.bundle.js"
+            } else {
+                path
+            }
+            request.writeText(system.assets().readText(asset))
+        } elseIf {path.startsWith("/favicon.ico")} {
+            request.writeHeader("Content-Type", "image/png")
+            request.writeStream(system.assets().readStream("/images/firefly-logo-notext.png"))
+        } else {
+            let parameters = if(request.readRawQueryString().size() == 0) {""} else {
+                "?" + request.readRawQueryString()
+            }
+            request.writeHeader("Location", "https://www.firefly-lang.org" + path + parameters)
+            request.writeStatus("302 Found")
         }
-        request.writeHeader("Location", "https://www.firefly-lang.org" + request.readPath() + parameters)
-        request.writeStatus("302 Found")
     }
 }
 
+browserMain(system: BrowserSystem): Unit {
+    if(system.urlPath().startsWith("/guide/")) {
+        let kebab = system.urlPath().dropFirst("/guide/".size())
+        Lux.renderById(system, "main") {lux => 
+            Guide.render(lux, "/guide/", kebab, Guide(GuideIntroduction.mock()), [])
+        }
+    } elseIf {system.urlPath().startsWith("/examples/")} {
+        let kebab = system.urlPath().dropFirst("/examples/".size())
+        let demos = [CountingButtonDemo.new(), MatchingPasswordsDemo.new()]
+        Lux.renderById(system, "main") {lux => 
+            Guide.render(lux, "/examples/", kebab, Guide(ExamplesOverview.mock()), demos)
+        }
+    } elseIf {system.urlPath().startsWith("/packages/")} {
+        let kebab = system.urlPath().dropFirst("/packages/".size())
+        Lux.renderById(system, "main") {lux => 
+            Guide.renderSoleDocument(lux, "/packages/", PackagesOverview.new(), [])
+        }
+    } else {
+        let kebab = system.urlPath().dropFirst("/community/".size())
+        Lux.renderById(system, "main") {lux => 
+            Guide.renderSoleDocument(lux, "/community/", CommunityOverview.new(), [])
+        }
+    }
+}
+
+buildMain(system: BuildSystem) {
+    let browser = system.compileForBrowser("Main.ff")
+    let assets = AssetSystem.create()
+        .addAssets("/js/", browser.assets())
+        .addAssets("/images/", system.packageAssets().asset("/firefly-logo-notext.png"))
+    system.setAssets(assets)
+}
+
+serveGuideHtml(title: String, request: WebRequest[WebResponse]): Unit {
+    request.writeHeader("Content-Type", "text/html; charset=UTF-8")
+    request.writeText("<!doctype html>")
+    request.writeText("<html lang='en' style='background-color: #303236; color: #dadada; width: 100%; height: 100%; color-scheme: dark;'>")
+    request.writeText("<head>")
+    request.writeText("<title>" + title + "</title>")
+    request.writeText("<meta name='viewport' content='width=device-width, initial-scale=1.0'>")
+    request.writeText("</head>")
+    request.writeText("<body style='margin: 0; padding: 0; width: 100%; height: 100%'>")
+    request.writeText("<div id='main'></div>")
+    request.writeText("<script type='module' src='/js/ff/fireflysite/Main.mjs'></script>")
+    request.writeText("</body>")
+    request.writeText("</html>")
+}

package/fireflysite/MatchingPasswordsDemo.ff

@@ -0,0 +1,86 @@
+import Guide
+import Lux from ff:lux
+import LuxEvent from ff:lux
+
+name = "Matching passwords"
+
+new(): Demo {
+    Demo(
+        name
+        {render(_)}
+    )
+}
+
+render(lux: Lux): Unit {
+    function passwordInput(password: String, setPassword: String => Unit) {
+        lux.div {
+            lux.input {
+                lux.set("type", "password")
+                lux.set("autocomplete", "new-password")
+                lux.setValue(password)
+                lux.onInput {event =>
+                    setPassword(event.text())
+                }
+            }
+        }
+    }
+    lux.form {
+        lux.useState(""): password1, setPassword1 => 
+        lux.useState(""): password2, setPassword2 => 
+        passwordInput(password1, setPassword1)
+        passwordInput(password2, setPassword2)
+        if(password2.size() != 0) {
+            lux.text(
+                if(password1 == password2) {
+                    "Passwords match!"
+                } else {
+                    "Passwords don't match."
+                }
+            )
+        }
+    }
+}
+
+newDocument(): Document {
+    Document([
+        Section(name, [
+            Paragraph([Text("Two passwords fields and a check that they match.")])
+        ])
+        Section("Demo", [
+            LuxDemo(name)
+        ])
+        Section("Code", [
+            CodeBlock("""
+                render(lux: Lux): Unit {
+                    function passwordInput(password: String, setPassword: String => Unit) {
+                        lux.div {
+                            lux.input {
+                                lux.set("type", "password")
+                                lux.set("autocomplete", "new-password")
+                                lux.setValue(password)
+                                lux.onInput {event =>
+                                    setPassword(event.text())
+                                }
+                            }
+                        }
+                    }
+                    lux.form {
+                        lux.useState(""): password1, setPassword1 => 
+                        lux.useState(""): password2, setPassword2 => 
+                        passwordInput(password1, setPassword1)
+                        passwordInput(password2, setPassword2)
+                        if(password2.size() != 0) {
+                            lux.text(
+                                if(password1 == password2) {
+                                    "Passwords match!"
+                                } else {
+                                    "Passwords don't match."
+                                }
+                            )
+                        }
+                    }
+                }
+            """, firefly = True)
+        ])
+    ])
+}

package/fireflysite/PackagesOverview.ff

@@ -0,0 +1,49 @@
+import Guide
+import CountingButtonDemo
+import MatchingPasswordsDemo
+
+new(): Document {
+    Document([
+        Section("Packages", [
+            Paragraph([
+                Text("Here you'll eventually find the package index.")
+                Text("For now, here's a short list of essential packages.") 
+            ])
+        ])
+        Section("ff:core", [
+            Paragraph([
+                Text("The standard library of Firefly.")
+            ])
+        ])
+        Section("ff:webserver", [
+            Paragraph([
+                Text("A webserver package. Has HTTPS and WebSocket support.")
+            ])
+        ])
+        Section("ff:websocket", [
+            Paragraph([
+                Text("A package for making websocket connections.")
+            ])
+        ])
+        Section("ff:postgresql", [
+            Paragraph([
+                Text("A package for connecting to PostgreSQL. Has connection pool support.")
+            ])
+        ])
+        Section("ff:lux", [
+            Paragraph([
+                Text("A package for building interactive web interfaces.")
+            ])
+        ])
+        Section("ff:rpc", [
+            Paragraph([
+                Text("A package for type safe remote procedure calls.")
+            ])
+        ])
+        Section("ff:unsafejs", [
+            Paragraph([
+                Text("A FFI package for JavaScript.")
+            ])
+        ])
+    ])
+}

package/fireflysite/Styles.ff

@@ -0,0 +1,306 @@
+import Css from ff:lux
+
+mobileMediaQuery = "@media only screen and (max-width: 600px)"
+desktopMediaQuery = "@media only screen and (min-width: 1500px)"
+
+pageCss: CssClass = CssClass(
+    [
+        Css.display("flex")
+        Css.flexDirection("column")
+        Css.minHeight("100vh")
+        Css.fontFamily("'Helvetica Neue', Helvetica, Arial, sans-serif")
+        Css.textRendering("optimizeLegibility")
+    ]
+    [
+        CssNest("*:focus-visible", [
+            Css.outline("2px solid #4fc1ff")
+            Css.outlineOffset("2px")
+        ], [])
+    ]
+    []
+)
+
+whiteLinkCss: CssClass = CssClass(
+    [
+        Css.color("#dadada")
+        Css.textDecoration("none")
+    ]
+    [
+        CssNest("&:hover", [Css.textDecoration("underline")], [])
+        CssNest("&[aria-current='page']", [Css.color("#4ec9b0")], [])
+    ]
+    []
+)
+
+greenLinkCss: CssClass = CssClass(
+    [
+        Css.color("#4ec9b0")
+        Css.textDecoration("none")
+    ]
+    [
+        CssNest("&:hover", [Css.textDecoration("underline")], [])
+    ]
+    []
+)
+
+topbarCss: CssClass = CssClass(
+    [
+        Css.display("flex")
+        Css.gap("30px")
+        Css.paddingLeft("20px")
+        Css.paddingRight("30px")
+        Css.lineHeight("49px")
+        Css.fontSize("17px")
+        Css.backgroundColor("#34373d")
+        Css.borderBottom("1px solid #2b2d30")
+        Css.boxSizing("border-box")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.paddingLeft("20px")
+            Css.paddingRight("20px")
+            Css.gap("10px")
+            Css.fontSize("15px")
+            Css.overflowX("auto")
+            Css.justifyContent("space-between")
+        ], [])
+    ]
+    []
+)
+
+topbarFireflyCss: CssClass = CssClass(
+    [
+        Css.marginRight("auto")
+        Css.fontSize("19px")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.fontSize("15px")
+        ], [])
+    ]
+    []
+)
+
+searchInputCss: CssClass = CssClass(
+    [
+        Css.appearance("none")
+        Css.boxSizing("border-box")
+        Css.marginLeft("15px")
+        Css.marginRight("25px")
+        Css.width("calc(100% - 15px - 25px)")
+        Css.display("flex")
+        Css.border("none")
+        Css.backgroundColor("#34373d")
+        Css.color("#dadada")
+        Css.height("34px")
+        Css.fontSize("15px")
+        Css.borderRadius("17px")
+        Css.paddingLeft("15px")
+        Css.paddingRight("15px")
+        Css.paddingTop("0")
+        Css.paddingBottom("0")
+        Css.marginBottom("20px")
+    ]
+    [
+        CssNest("&::placeholder", [
+            Css.color("#dadada")
+            Css.opacity("0.7")
+        ], [])
+    ]
+    []
+)
+
+guideCss: CssClass = CssClass(
+    [
+        Css.display("flex")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.flexDirection("column")
+        ], [])
+    ]
+    []
+)
+
+guideSidebarCss: CssClass = CssClass(
+    [
+        Css.width("300px")
+        Css.minHeight("calc(100vh - 50px)")
+        Css.paddingTop("20px")
+        Css.backgroundColor("#2b2d30")
+        Css.boxSizing("border-box")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.order("2")
+            Css.width("100%")
+            Css.height("auto")
+            Css.paddingTop("20px")
+            Css.paddingBottom("20px")
+        ], [])
+    ]
+    []
+)
+
+guideSidebarUlCss: CssClass = CssClass(
+    [
+        Css.display("flex")
+        Css.flexDirection("column")
+        Css.gap("25px")
+        Css.listStyle("none")
+        Css.margin("0px")
+        Css.padding("20px")
+    ]
+    []
+    []
+)
+
+guideSidebarLiCss: CssClass = CssClass(
+    [
+        Css.listStyle("none")
+    ]
+    []
+    []
+)
+
+guideMainCss: CssClass = CssClass(
+    [
+        Css.flex("1")
+        Css.display("flex")
+        Css.justifyContent("center")
+        Css.padding("20px")
+        Css.paddingTop("70px")
+        Css.position("relative")
+        Css.boxSizing("content-box")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.paddingTop("30px")
+        ], [])
+        CssNest(desktopMediaQuery, [
+            Css.paddingRight("200px")
+        ], [])
+    ]
+    []
+)
+
+guideSoleDocumentCss: CssClass = CssClass(
+    [
+        Css.flex("1")
+        Css.display("flex")
+        Css.justifyContent("center")
+        Css.padding("20px")
+        Css.paddingTop("70px")
+        Css.position("relative")
+        Css.boxSizing("content-box")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.paddingTop("30px")
+        ], [])
+    ]
+    []
+)
+
+guideDocumentCss: CssClass = CssClass(
+    [
+        Css.maxWidth("800px")
+        Css.width("100%")
+        Css.fontSize("17px")
+        Css.lineHeight("1.7")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.fontSize("16px")
+            Css.lineHeight("1.6")
+        ], [])
+    ]
+    []
+)
+
+guideH1Css: CssClass = CssClass(
+    [
+        Css.fontSize("32px")
+        Css.marginTop("0px")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.fontSize("30px")
+        ], [])
+    ]
+    []
+)
+
+guideH2Css: CssClass = CssClass(
+    [
+        Css.fontSize("28px")
+        Css.marginTop("40px")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.fontSize("25px")
+        ], [])
+    ]
+    []
+)
+
+guideCodeCss: CssClass = CssClass(
+    [
+        Css.fontFamily("Consolas, 'Liberation Mono', Menlo, Courier, monospace")
+        Css.fontSize("17px")
+        Css.lineHeight("1.4")
+        Css.color("#4ec9b0")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.fontSize("16px")
+        ], [])
+    ]
+    []
+)
+
+guideCodeBlockCss: CssClass = CssClass(
+    [
+        Css.lineHeight("1.4")
+        Css.backgroundColor("#2b2d30")
+        Css.padding("12px 18px")
+        Css.paddingBottom("14px")
+        Css.border("1px solid #232323")
+        Css.borderRadius("5px")
+        Css.boxSizing("border-box")
+        Css.overflowX("auto")
+        Css.maxWidth("100%")
+    ]
+    [
+        CssNest(mobileMediaQuery, [
+            Css.maxWidth("calc(100% + 40px)")
+            Css.marginLeft("-20px")
+            Css.marginRight("-20px")
+            Css.borderRadius("0")
+            Css.borderLeft("none")
+            Css.borderRight("none")
+            Css.padding("12px 20px")
+        ], [])
+    ]
+    []
+)
+
+guideLinkCss: CssClass = CssClass(
+    [
+        Css.color("#4fc1ff")
+        Css.textDecoration("none")
+    ]
+    [
+        CssNest("&:hover", [Css.textDecoration("underline")], [])
+    ]
+    []
+)
+
+codeCommentCss: CssClass = CssClass([Css.color("#6a9955")], [], [])
+codeStringCss: CssClass = CssClass([Css.color("#ce9178")], [], [])
+codeNumberCss: CssClass = CssClass([Css.color("#b5cea8")], [], [])
+codeKeywordCss: CssClass = CssClass([Css.color("#569cd6")], [], [])
+codeTypeCss: CssClass = CssClass([Css.color("#4ec9b0")], [], [])
+codeVariableCss: CssClass = CssClass([Css.color("#9cdcfe")], [], [])
+codeCallCss: CssClass = CssClass([Css.color("#dcdcaa")], [], [])
+codeOtherCss: CssClass = CssClass([Css.color("#cccccc")], [], [])

package/lux/Main2.ff

@@ -92,9 +92,8 @@ rhymeComponent(lux: Lux, system: BrowserSystem) {
 
 
 rhyme(system: BrowserSystem, text: String): String {
-    let result = system.httpClient().get("https://api.datamuse.com/words?rel_rhy=" + text, [])
-    let json = system.js().parseJson(result.readText())
-    if(json.get(0).isNullOrUndefined()) {"?"} else {json.get(0).get("word").grabString()}
+    let json = system.httpClient().get("https://api.datamuse.com/words?rel_rhy=" + text, []) {_.readJson()}
+    json.index(0).field("word").getString().else {"?"}
 }
 
 browserMain(system: BrowserSystem): Unit {

package/output/js/ff/core/Json.mjs

@@ -452,7 +452,7 @@ export function Json_field(self_, key_) {
 
 export function Json_index(self_, key_) {
 
-            return typeof self_ === 'array' ? self_[key] ?? null : null;
+            return Array.isArray(self_) ? self_[key] ?? null : null;
         
 }
 
@@ -471,7 +471,7 @@ export function Json_getField(self_, key_) {
 
 export function Json_getIndex(self_, key_) {
 
-            return typeof self_ === 'array' ? ff_core_Option.Some(self_[key_] ?? null) : ff_core_Option.None();
+            return Array.isArray(self_) ? ff_core_Option.Some(self_[key_] ?? null) : ff_core_Option.None();
         
 }
 

package/output/js/ff/core/String.mjs

@@ -329,6 +329,16 @@ export function String_all(self_, body_) {
         
 }
 
+export function String_filter(self_, body_) {
+
+            const result = [];
+            for(let i = 0; i < self_.length; i++) {
+                if(body_(self_.charCodeAt(i))) result.push(self_.charAt(i));
+            }
+            return result.join("");
+        
+}
+
 export function String_toBuffer(self_) {
 
             const encoded = new TextEncoder().encode(self_)
@@ -510,6 +520,16 @@ export async function String_all$(self_, body_, $task) {
         
 }
 
+export async function String_filter$(self_, body_, $task) {
+
+            const result = [];
+            for(let i = 0; i < self_.length; i++) {
+                if(await body_(self_.charCodeAt(i))) result.push(self_.charAt(i));
+            }
+            return result.join("");
+        
+}
+
 export async function String_toBuffer$(self_, $task) {
 throw new Error('Function String_toBuffer is missing on this target in async context.');
 }

package/package.json

@@ -4,7 +4,7 @@
     "description": "Firefly compiler",
     "author": "Firefly team",
     "license": "MIT",
-    "version": "0.4.77",
+    "version": "0.4.78",
     "repository": {
         "type": "git",
         "url": "https://github.com/Ahnfelt/firefly-boot"

package/vscode/package.json

@@ -4,7 +4,7 @@
     "description": "Firefly language support",
     "author": "Firefly team",
     "license": "MIT",
-    "version": "0.4.77",
+    "version": "0.4.78",
     "repository": {
         "type": "git",
         "url": "https://github.com/Ahnfelt/firefly-boot"