Как использовать Swift для веб-разработки

Мир веб-разработки огромен, и легко потеряться в постоянном потоке новых технологий, появляющихся каждый день. Большинство этих новых технологий созданы с использованием JavaScript или TypeScript. Однако в этой статье я познакомлю вас с веб-разработкой с использованием родного Swift прямо в вашем браузере, и я уверен, что это вас впечатлит.

Как это возможно?

Чтобы Swift изначально работал на веб-странице, его необходимо сначала скомпилировать в байт-код WebAssembly, а затем JavaScript сможет загрузить этот код на страницу. Весь процесс компиляции немного сложен, так как нам нужно использовать специальную цепочку инструментов и создавать вспомогательные файлы, поэтому доступны вспомогательные CLI-инструменты: Carton и Webber.

Можно ли использовать сторонний набор инструментов?

Сообщество SwiftWasm проделало огромную работу, чтобы сделать возможным компиляцию Swift в WebAssembly путем исправления исходной цепочки инструментов Swift. Они обновляют цепочку инструментов, автоматически извлекая изменения из исходной цепочки инструментов каждый день и исправляя свою вилку, если тесты не пройдены. Их цель — стать частью официальной цепочки инструментов, и они надеются, что это произойдет в ближайшем будущем.

Картон или Веббер?

Carton создается сообществом SwiftWasm и может использоваться для проектов Tokamak, представляющих собой структуру, которая дает вам возможность создавать веб-сайты с помощью SwiftUI.

Webber создан для проектов SwifWeb. SwifWeb отличается тем, что включает в себя все стандарты HTML и CSS, а также все веб-API.

Хотя вы можете предпочесть писать веб-приложения с использованием SwiftUI для согласованности кода, я считаю, что это неправильный подход, поскольку веб-разработка по своей сути отличается и не может подходить так же, как SwiftUI.

Вот почему я создал SwifWeb, который дает вам возможность использовать всю мощь HTML, CSS и веб-API непосредственно из Swift, используя его красивый синтаксис с автозаполнением и документацией. И я создал инструмент Webber, потому что Carton не может правильно компилировать, отлаживать и развертывать приложения SwifWeb, потому что он не был создан для этого.

Меня зовут Михаил Исаев, и я автор SwifWeb. В этой статье я покажу вам, как начать создавать веб-сайт с помощью SwifWeb.

Необходимые инструменты

Быстро

У вас должен быть установлен Swift. Самый простой способ:

• в macOS необходимо установить Xcode
• в Linux или Windows (WSL2) следует использовать скрипт из swiftlang.xyz
.

В остальных случаях ознакомьтесь с инструкцией по установке на официальном сайте

Интернет-интерфейс Webber

Я создал Webber, чтобы помочь вам создавать, отлаживать и развертывать приложения.

В macOS его легко установить с помощью HomeBrew (установите его с их веб-сайта)

brew install swifweb/tap/webber

для обновления до последней версии просто запустите

brew upgrade webber

В Ubuntu или Windows (Ubuntu в WSL2) клонируйте и скомпилируйте Webber вручную

sudo apt-get install binaryen
curl https://get.wasmer.io -sSfL | sh
apt-get install npm
cd /opt
sudo git clone https://github.com/swifweb/webber
cd webber
sudo swift build -c release
sudo ln -s /opt/webber/.build/release/Webber /usr/local/bin/webber

обновить до последней версии позже

cd /opt/webber
sudo git pull
sudo swift build -c release

:::подсказка Ветка основная всегда содержит стабильный код, поэтому не стесняйтесь извлекать из нее обновления

:::

Создание нового проекта

Открыть терминал и выполнить

webber new

В интерактивном меню выберите pwa или spa и введите название проекта.

Измените каталог на только что созданный проект и выполните webber serve.

Эта команда скомпилирует ваш проект в WebAssembly, упакует все необходимые файлы в специальную папку .webber и начнет обслуживать ваш проект на всех интерфейсах, используя порт 8888 по умолчанию. .

Дополнительные аргументы для webber serve

• Тип приложения

-t pwa для прогрессивного веб-приложения

-t spa для одного веб-приложения * Имя цели сервисного работника (обычно называется Service в проекте PWA)

-s Служба * Имя целевого приложения (по умолчанию App)

-приложение * Распечатать дополнительную информацию в консоли

-v * Порт для сервера Webber (по умолчанию 8888)

-p 8080

:::подсказка Используйте -p 443 для проверки подлинности SSL (с разрешенной настройкой самозаверяющего SSL)

:::

• Название целевого браузера для автоматического запуска

--browser Safari или --browser chrome * Дополнительный экземпляр браузера с разрешенной настройкой самозаверяющего SSL для отладки сервис-воркеров

--browser-self-signed * Дополнительный экземпляр браузера в режиме инкогнито

--браузер-инкогнито

Приложение

Приложение начинается с Sources/App/App.swift

import Web

@main
class App: WebApp {
    @AppBuilder
    override var app: Configuration {
        Lifecycle.didFinishLaunching { app in
            app.registerServiceWorker("service")
        }
        Routes {
            Page { IndexPage() }
            Page("login") { LoginPage() }
            Page("article/:id") { ArticlePage() }
            Page("**") { NotFoundPage() }
        }
        MainStyle()
    }
}

Жизненный цикл

Он работает аналогично iOS:

didFinishLaunching, когда приложение только что запустилось

willTerminate, когда приложение умрет

willResignActive, когда окно будет неактивным

didBecomeActive, когда окно активно

didEnterBackground, когда окно переходит в фоновый режим

willEnterForeground, когда окно выходит на передний план

Наиболее полезным методом здесь является didFinishLaunching, потому что это отличное место для настройки приложения. Вы видите, что это действительно похоже на приложение для iOS! :ухмыляясь:

Здесь app содержит полезные удобные методы:

registerServiceWorker("serviceName") вызов для регистрации сервисного работника PWA

addScript("path/to/script.js") вызов для добавления относительного или внешнего скрипта

addStylesheet("path/to/style.css") вызов для добавления относительного или внешнего стиля

addFont("path/to/font.woff", type:) вызов для добавления относительного или внешнего шрифта, при необходимости установить тип

addIcon("path/to/icon", type:color:) вызов для добавления значка, при необходимости задайте тип и цвет

Кроме того, это место для настройки дополнительных библиотек, таких как Autolayout, Bootstrap, Materialize и т. д.

Маршруты

Маршрутизация необходима для отображения соответствующей страницы на основе текущего URL-адреса.

Чтобы понять, как использовать маршрутизацию, вы должны понимать, что такое URL

:::подсказка https://website.com/hello/world — здесь /hello/world указан путь

:::

Как вы видели, вначале в классе App мы должны объявить все маршруты верхнего уровня.

Верхний уровень означает, что страницы, объявленные в этих маршрутах, будут занимать все пространство в окне.

Хорошо, например, корневой маршрут можно задать тремя способами

Page("/") { IndexPage() }
Page("") { IndexPage() }
Page { IndexPage() }

Я думаю, что последний самый красивый 🙂

Маршруты входа или регистрации могут быть установлены следующим образом

Page("login") { LoginPage() }
Page("registration") { RegistrationPage() }

Маршруты, связанные с параметрами

Page("article/:id") { ArticlePage() }

Идентификатор :id в приведенном выше примере является динамической частью маршрута. Мы можем получить этот идентификатор в классе ArticlePage, чтобы отобразить связанную с ним статью.

class ArticlePage: PageController {
    override func didLoad(with req: PageRequest) {
        if let articleId = req.parameters.get("id") {
            // Retrieve article here
        }
    }
}

:::подсказка В пути может быть более одного параметра. Получите их все одним и тем же способом.

:::

Запросы

Следующая интересная вещь на пути — это запрос, который также очень прост в использовании. Например, рассмотрим маршрут /search, который должен иметь параметры поиска text и age.

:::подсказка https://website.com/search**?text=Alex&age=19** — последняя часть — это запрос

:::

Просто объявите маршрут поиска

Page("search") { SearchPage() }

И получить данные запроса в классе SearchPage следующим образом

class SearchPage: PageController {
    struct Query: Decodable {
        let text: String?
        let age: Int?
    }

    override func didLoad(with req: PageRequest) {
        do {
            let query = try req.query.decode(Query.self)
            // use optional query.text and query.age
            // to query search results
        } catch {
            print("Can't decode query: (error)")
        }
    }
}

Все

Вы также можете использовать * для объявления маршрута, который принимает что-либо в определенной части пути, как здесь

Page("foo", "*", "bar") { SearchPage() }

Приведенный выше маршрут будет принимать все значения между foo и bar, например /foo/aaa/bar, /foo/bbb/bar и т. д.

Универсальный

С помощью знака ** вы можете установить специальный универсальный маршрут, который будет обрабатывать все, что не было сопоставлено с другими маршрутами на определенном пути.

Используйте его, чтобы создать глобальный маршрут 404

Page("**") { NotFoundPage() }

или для определенного пути, например. когда пользователь не найден

Page("user", "**") { UserNotFoundPage() }

Проясним ситуации с объявленными выше маршрутами

/user/1 — если есть маршрут для /user/:id, он вернет UserPage. Иначе он попадет в…

UserNotFoundPage

/user/1/hello — если есть маршрут для /user/:id/hello, то он попадет в UserNotFoundPage

/something — если маршрута для /something нет, то он попадет в NotFoundPage

Вложенная маршрутизация

Мы можем не захотеть заменить весь контент на странице для следующего маршрута, а только определенные блоки. Вот здесь и пригодится FragmentRouter!

Предположим, что у нас есть вкладки на странице /user. Каждая вкладка является подмаршрутом, и мы хотим реагировать на изменения в подмаршруте с помощью FragmentRouter.

Объявите маршрут верхнего уровня в классе App

Page("user") { UserPage() }

И объявите FragmentRouter в классе UserPage

class UserPage: PageController {
    @DOM override var body: DOM.Content {
        // NavBar is from Materialize library :)
        Navbar()
            .item("Profile") { self.changePath(to: "/user/profile") }
            .item("Friends") { self.changePath(to: "/user/friends") }
        FragmentRouter(self)
            .routes {
                Page("profile") { UserProfilePage() }
                Page("friends") { UserFriendsPage() }
            }
    }
}

В приведенном выше примере FragmentRouter обрабатывает подмаршруты /user/profile и /user/friends и отображает их на панели навигации, поэтому страница никогда не перезагружает весь контент, а только определенные фрагменты.

Также может быть объявлено более одного фрагмента с одинаковыми или разными подмаршрутами, и все они будут работать вместе, как по волшебству!

Кстати, FragmentRouter — это Div, и вы можете настроить его, вызвав

FragmentRouter(self)
    .configure { div in
        // do anything you want with the div
    }

Таблицы стилей

Вы можете использовать традиционные файлы CSS, но у вас также есть новая волшебная возможность использовать таблицу стилей, написанную на Swift!

Основы

Чтобы объявить правило CSS с помощью Swift, у нас есть объект Rule.

Его можно построить декларативно, вызвав его методы

Rule(...selector...)
    .alignContent(.baseline)
    .color(.red) // or rgba/hex color
    .margin(v: 0, h: .auto)

или способ, подобный SwiftUI, с использованием @resultBuilder

Rule(...selector...) {
    AlignContent(.baseline)
    Color(.red)
    Margin(v: 0, h: .auto)
}

Оба способа равны, однако я предпочитаю первый из-за автодополнения сразу после ввода . 😀

:::подсказка Доступны все методы CSS, описанные в MDN.

Более того, он автоматически обрабатывает префиксы браузера!

:::

Однако в некоторых случаях вы можете установить таким образом пользовательское свойство

Rule(...selector...)
  .custom("customKey", "customValue")

Селектор

Чтобы установить, на какие элементы должно влиять правило, мы должны установить селектор. Я вижу селектор как запрос в базе данных, но части этого селекторного запроса я называю указателями.

Самый простой способ создать указатель — это инициализировать его с помощью необработанной строки

Pointer("a")

Но правильный быстрый способ — создать его, вызвав .pointer в нужном HTML-теге, подобном этому

H1.pointer // h1
A.pointer // a
Pointer.any // *
Class("myClass").pointer // .myClass
Id("myId").pointer // #myId

Речь идет о базовых указателях, но они также имеют модификаторы, такие как :hover :first :first-child и т. д.

H1.pointer.first // h1:first
H1.pointer.firstChild // h1:first-child
H1.pointer.hover // h1:hover

Вы можете объявить любой существующий модификатор, все они доступны.

:::подсказка Если чего-то не хватает, не стесняйтесь сделать расширение, чтобы добавить это!

И не забудьте отправить запрос на включение на github, чтобы добавить его для всех.

:::

Вы также можете объединять указатели

H1.class(.myClass) // h1.myClass
H1.id(.myId) // h1#myId
H1.id(.myId).disabled // h1#myId:disabled
Div.pointer.inside(P.pointer) // div p
Div.pointer.parent(P.pointer) // div > p
Div.pointer.immediatedlyAfter(P.pointer) // Div + p
P.pointer.precededBy(Ul.pointer) // p ~ ul

Как использовать селектор в правиле

Rule(Pointer("a"))
// or
Rule(A.pointer)

Как использовать более одного селектора в правиле

Rule(A.pointer, H1.id(.myId), Div.pointer.parent(P.pointer))

Он создает следующий код CSS

a, h1#myId, div > p {

}

Реактивность

Давайте объявим темный и светлый стили для нашего приложения, и позже мы сможем легко переключаться между ними.

import Web

@main
class App: WebApp {
    enum Theme {
        case light, dark
    }

    @State var theme: Theme = .light

    @AppBuilder
    override var app: Configuration {
        // ... Lifecycle, Routes ...
        LightStyle().disabled($theme.map { $0 != .happy })
        DarkStyle().disabled($theme.map { $0 != .sad })
    }
}

:::подсказка LightStyle и DarkStyle могут быть объявлены в отдельных файлах или, например. в App.swift

:::

class LightStyle: Stylesheet {
    @Rules
    override var rules: Rules.Content {
        Rule(Body.pointer).backgroundColor(.white)
        Rule(H1.pointer).color(.black)
    }
}
class DarkStyle: Stylesheet {
    @Rules
    override var rules: Rules.Content {
        Rule(Body.pointer).backgroundColor(.black)
        Rule(H1.pointer).color(.white)
    }
}

А потом где-то в UI какой-то страницы просто вызвать

App.current.theme = .light // to switch to light theme
// or
App.current.theme = .dark // to switch to dark theme

И это активирует или деактивирует соответствующие таблицы стилей! Разве это не круто? 😎

import Web

@main
class App: WebApp {
    @State var reactiveColor = Color.cyan

    @AppBuilder
    override var app: Configuration {
        // ... Lifecycle, Routes ...
        MainStyle()
    }
}

extension Class {
    static var somethingCool: Class { "somethingCool" }
}

class MainStyle: Stylesheet {
    @Rules
    override var rules: Rules.Content {
        // for all elements with `somethingCool` class
        Rule(Class.hello.pointer)
            .color(App.current.$reactiveColor)
        // for H1 and H2 elements with `somethingCool` class
        Rule(H1.class(.hello), H2.class(.hello))
            .color(App.current.$reactiveColor)
    }
}

App.current.reactiveColor = .yellow // or any color you want

class MainStyle: Stylesheet {
    @Rules
    override var rules: Rules.Content {
        // for all elements with `somethingCool` class
        Rule(Class.hello.pointer)
            .color(App.current.$reactiveColor)
        // for H1 and H2 elements with `somethingCool` class
        Rule(H1.class(.hello), H2.class(.hello))
            .color(App.current.$reactiveColor)
        """
        /* Raw CSS goes here */
        body {
          margin: 0;
          padding: 0;
        }
        """
    }
}

class IndexPage: PageController {
    // MARK: - Lifecycle

    override func willLoad(with req: PageRequest) {
        super.willLoad(with: req)
    }

    override func didLoad(with req: PageRequest) {
        super.didLoad(with: req)
        // set page title and metaDescription
        self.title = "My Index Page"
        self.metaDescription = "..."
        // also parse query and hash here
    }

    override func willUnload() {
        super.willUnload()
    }

    override func didUnload() {
        super.didUnload()
    }

    // MARK: - UI

    override func buildUI() {
        super.buildUI()
        // access any properties of the page's div here
        // e.g.
        self.backgroundcolor(.lightGrey)
        // optionally call body method here to add child HTML elements
        body {
            P("Hello world")
        }
        // or alternatively
        self.appendChild(P("Hello world"))
    }

    // the best place to declare any child HTML elements
    @DOM override var body: DOM.Content {
        H1("Hello world")
        P("Text under title")
        Button("Click me") {
            self.alert("Click!")
            print("button clicked")
        }
    }
}

PageController { page in
    H1("Hello world")
    P("Text under title")
    Button("Click me") {
        page.alert("Click!")
        print("button clicked")
    }
}
.backgroundcolor(.lightGrey)
.onWillLoad { page in }
.onDidLoad { page in }
.onWillUnload { page in }
.onDidUnload { page in }

Div()

Div().class(.myDivs) // <div class="myDivs">
     .id(.myDiv) // <div id="myDiv">
     .backgroundColor(.green) // <div style="background-color: green;">
     .onClick { // adds `onClick` listener directly to the DOM element
         print("Clicked on div")
     }
     .attribute("key", "value") // <div key="value">
     .attribute("boolKey", true, .trueFalse) // <div boolKey="true">
     .attribute("boolKey", true, .yesNo) // <div boolKey="yes">
     .attribute("checked", true, .keyAsValue) // <div checked="checked">
     .attribute("muted", true, .keyWithoutValue) // <div muted>
     .custom("border", "2px solid red") // <div style="border: 2px solid red;">

public class Divider: Div {
    // it is very important to override the name
    // because otherwise it will be <divider> in HTML
    open class override var name: String { "(Div.self)".lowercased() }

    required public init() {
        super.init()
    }

    // this method executes immediately after any init method
    public override func postInit() {
        super.postInit()
        // here we are adding `divider` class
        self.class(.divider)
    }
}

Div {
    H1("Title")
    P("Subtitle")
    Div {
        Ul {
            Li("One")
            Li("Two")
        }
    }
}

lazy var myDiv1 = Div()
lazy var myDiv2 = Div()

Div {
    myDiv1
    myDiv2
}

lazy var myDiv = Div()

Div {
    myDiv
}

// somewhere later
myDiv.remove()

Div().superview?.backgroundColor(.red)

lazy var myDiv1 = Div()
lazy var myDiv2 = Div()
lazy var myDiv3 = Div()
var myDiv4: Div?

var showDiv2 = true

Div {
    myDiv1
    if showDiv2 {
        myDiv2
    } else {
        myDiv3
    }
    if let myDiv4 = myDiv4 {
        myDiv4
    } else {
        P("Div 4 was nil")
    }
}

lazy var myDiv1 = Div()
lazy var myDiv2 = Div()
lazy var myDiv3 = Div()

@State var showDiv2 = true

Div {
    myDiv1
    myDiv2.hidden($showDiv2.map { !$0 }) // shows myDiv2 if showDiv2 == true
    myDiv3.hidden($showDiv2.map { $0 }) // shows myDiv3 if showDiv2 == false
}

Div {
    """
    <a href="https://google.com">Go to Google</a>
    """
}

let names = ["Bob", "John", "Annie"]

Div {
    ForEach(names) { name in
        Div(name)
    }

    // or

    ForEach(names) { index, name in
        Div("(index). (name)")
    }

    // or with range

    ForEach(1...20) { index in
        Div()
    }

    // and even like this

    20.times {
        Div().class(.shootingStar)
    }
}

@State var names = ["Bob", "John", "Annie"]

Div {
    ForEach($names) { name in
        Div(name)
    }

    // or with index

    ForEach($names) { index, name in
        Div("(index). (name)")
    }
}

Button("Change 1").onClick {
    // this will append new Div with name automatically
    self.names.append("George")
}

Button("Change 2").onClick {
    // this will replace and update Divs with names automatically
    self.names = ["Bob", "Peppa", "George"]
}

Stylesheet {
    ForEach(1...20) { index in
        CSSRule(Div.pointer.nthChild("(index)"))
            // set rule properties depending on index
    }
    20.times { index in
        CSSRule(Div.pointer.nthChild("(index)"))
            // set rule properties depending on index
    }
}

ForEach(1...20) { index in
    BuilderFunction(9999.asRandomMax()) { delay in
        CSSRule(Pointer(".shooting_star").nthChild("(index)"))
            .custom("top", "calc(50% - ((400.asRandomMax() - 200)px))")
            .custom("left", "calc(50% - ((300.asRandomMax() + 300)px))")
            .animationDelay(delay.ms)
        CSSRule(Pointer(".shooting_star").nthChild("(index)").before)
            .animationDelay(delay.ms)
        CSSRule(Pointer(".shooting_star").nthChild("(index)").after)
            .animationDelay(delay.ms)
    }
}

BuilderFunction(calculate) { calculatedValue in
    // CSS rule or DOM element
}

func calculate() -> Int {
    return 1 + 1
}

enum Countries {
  case usa, australia, mexico
}

@State var selectedCounty: Countries = .usa

$selectedCounty.listen {
    print("country changed")
}
$selectedCounty.listen { newValue in
    print("country changed to (newValue)")
}
$selectedCounty.listen { oldValue, newValue in
    print("country changed from (oldValue) to (newValue)")
}

@State var text = "Hello world!"

H1($text) // whenever text changes it updates inner-text in H1
InputText($text) // while user is typing text it updates $text which updates H1

@State var height = 20.px

Div().height($height) // whenever height var changes it updates height of the Div

@State var hidden = false

Div().hidden($hidden) // whenever hidden changes it updates visibility of the Div

@State var isItCold = true

H1($isItCold.map { $0 ? "It is cold 🥶" : "It is not cold 😌" })

@State var one = true
@State var two = true

Div().display($one.and($two).map { one, two in
    // returns .block if both one and two are true
    one && two ? .block : .none
})

@State var one = true
@State var two = true
@State var three = 15

Div().display($one.and($two).map { one, two in
    // returns true if both one and two are true
    one && two
}.and($three).map { oneTwo, three in // here oneTwo is a result of the previous mapping
    // returns .block if oneTwo is true and three is 15
    oneTwo && three == 15 ? .block : .none
})

extension Div {
    func makeItBeautiful() {}
}

extension BaseElement {
    func doSomething() {}
}

extension Color {
    var myColor1: Color { .hex(0xf1f1f1) } // which is 0xF1F1F1
    var myColor2: Color { .hsl(60, 60, 60) } // which is hsl(60, 60, 60)
    var myColor3: Color { .hsla(60, 60, 60, 0.8) } // which is hsla(60, 60, 60, 0.8)
    var myColor4: Color { .rgb(60, 60, 60) } // which is rgb(60, 60, 60)
    var myColor5: Color { .rgba(60, 60, 60, 0.8) } // which is rgba(60, 60, 60, 0.8)
}

extension Class {
    var my: Class { "my" }
}

extension Id {
    var myId: Id { "my" }
}

App.current.window.$isInForeground.listen { isInForeground in
    // foreground flag changed
}

if App.current.window.isInForeground {
    // do somethign
}

Div().backgroundColor(App.current.window.$isInForeground.map { $0 ? .grey : .white })

App.current.window.$history.listen { history in
    // read history properties
}

History.shared.length // size of the history stack
History.shared.back() // to go back in history stack
History.shared.forward() // to go forward in history stack
History.shared.go(offset:) // going to specific index in history stack

App.current.window.$location.listen { location in
    // read location properties
}

Location.shared.href // also $href
Location.shared.host // also $host
Location.shared.port // also $port
Location.shared.pathname // also $pathname
Location.shared.search // also $search
Location.shared.hash // also $hash

// You can save any value that can be represented in JavaScript
LocalStorage.shared.set("key", "value") // saves String
LocalStorage.shared.set("key", 123) // saves Int
LocalStorage.shared.set("key", 0.8) // saves Double
LocalStorage.shared.set("key", ["key":"value"]) // saves Dictionary
LocalStorage.shared.set("key", ["v1", "v2"]) // saves Array

// Getting values back
LocalStorage.shared.string(forKey: "key") // returns String?
LocalStorage.shared.integer(forKey: "key") // returns Int?
LocalStorage.shared.string(forKey: "key") // returns String?
LocalStorage.shared.value(forKey: "key") // returns JSValue?

// Removing item
LocalStorage.shared.removeItem(forKey: "key")

// Removing all items
LocalStorage.shared.clear()

LocalStorage.onChange { key, oldValue, newValue in
    print("LocalStorage: key (key) has been updated")
}

LocalStorage.onClear { print("LocalStorage: all items has been removed") }

App.current.window.document.title // also $title
App.current.window.document.metaDescription // also $metaDescription
App.current.window.document.head // <head> element
App.current.window.document.body // <body> element
App.current.window.documentquerySelector("#my") // returns BaseElement?
App.current.window.document.querySelectorAll(".my") // returns [BaseElement]

H1(String(
    .en("Hello"),
    .fr("Bonjour"),
    .ru("Привет"),
    .es("Hola"),
    .zh_Hans("你好"),
    .ja("こんにちは")))

Localization.current = .es

Lifecycle.didFinishLaunching {
    Localization.current = .es
}

H1(LString(
    .en("Hello"),
    .fr("Bonjour"),
    .ru("Привет"),
    .es("Hola"),
    .zh_Hans("你好"),
    .ja("こんにちは")))

H1(Localization.currentState.map { "Curent language: ($0.rawValue)" })
H2(LString(.en("English string"), .es("Hilo Español")))
Button("change lang").onClick {
    Localization.current = Localization.current.rawValue.contains("en") ? .es : .en
}

import FetchAPI

Fetch("https://jsonplaceholder.typicode.com/todos/1") {
    switch $0 {
    case .failure:
        break
    case .success(let response):
        print("response.code: (response.status)")
        print("response.statusText: (response.statusText)")
        print("response.ok: (response.ok)")
        print("response.redirected: (response.redirected)")
        print("response.headers: (response.headers.dictionary)")
        struct Todo: Decodable {
            let id, userId: Int
            let title: String
            let completed: Bool
        }
        response.json(as: Todo.self) {
            switch $0 {
            case .failure(let error):
                break
            case .success(let todo):
                print("decoded todo: (todo)")
            }
        }
    }
}

import XMLHttpRequest

XMLHttpRequest()
    .open(method: "GET", url: "https://jsonplaceholder.typicode.com/todos/1")
    .onAbort {
        print("XHR onAbort")
    }.onLoad {
        print("XHR onLoad")
    }.onError {
        print("XHR onError")
    }.onTimeout {
        print("XHR onTimeout")
    }.onProgress{ progress in
        print("XHR onProgress")
    }.onLoadEnd {
        print("XHR onLoadEnd")
    }.onLoadStart {
        print("XHR onLoadStart")
    }.onReadyStateChange { readyState in
        print("XHR onReadyStateChange")
    }
    .send()

import WebSocket

let webSocket = WebSocket("wss://echo.websocket.org").onOpen {
    print("ws connected")
}.onClose { (closeEvent: CloseEvent) in
    print("ws disconnected code: (closeEvent.code) reason: (closeEvent.reason)")
}.onError {
    print("ws error")
}.onMessage { message in
    print("ws message: (message)")
    switch message.data {
    case .arrayBuffer(let arrayBuffer): break
    case .blob(let blob): break
    case .text(let text): break
    case .unknown(let jsValue): break
    }
}
Dispatch.asyncAfter(2) {
    // send as simple string
    webSocket.send("Hello from SwifWeb")
    // send as Blob
    webSocket.send(Blob("Hello from SwifWeb"))
}

Console.dir(...)
Console.error(...)
Console.warning(...)
Console.clear()

class IndexPage: PageController {}

class Welcome_Preview: WebPreview {
    @Preview override class var content: Preview.Content {
        Language.en
        Title("Initial page")
        Size(640, 480)
        // add here as many elements as needed
        IndexPage()
    }
}

.executableTarget(name: "App", dependencies: [
    .product(name: "Web", package: "web")
], resources: [
    .copy("css/*.css"),
    .copy("css"),
    .copy("images/*.jpg"),
    .copy("images/*.png"),
    .copy("images/*.svg"),
    .copy("images"),
    .copy("fonts/*.woff2"),
    .copy("fonts")
]),