Edit via CLI

The Afia CLI can be used to edit websites. It can create new pages, connect a component's output to another's input, modify values, and more.

Begin by creating a new workspace:

mkdir my-workspace
cd my-workspace
afia init

Create a new website:

afia website init websites/my-site
cd websites/my-site

Use afia page create to add a home page to the site:

afia page create --slug=home --route=/

The my-site website now contains one page.

afia page list

Next, we will create a hero component that we will use in the home page.

We will use handwritten WebAssembly, but we could just as well use a higher level language and then compile it to WebAssembly.

Create a my-hero.wat file with the following contents:

(module
    (@custom "AFIA_SCHEMA_VERSION" "\00")

    (import "afia_env" "Afia_Input_getText" (func $get_text_input (param i32) (result i64)))
    (import "afia_env" "Afia_Vdom_createElement" (func $create_element (param i32 i32) (result i64)))
    (import "afia_env" "Afia_Vdom_createText" (func $create_text_node (param i32 i32) (result i64)))
    (import "afia_env" "Afia_Vdom_appendChild" (func $append_child (param i64 i64)))
    (import "afia_env" "Afia_Vdom_setAttribute" (func $set_attribute (param i64 i32 i32 i32 i32) (result i32)))
    (import "afia_env" "Afia_Text_getLen" (func $get_text_len (param i64) (result i32)))
    (import "afia_env" "Afia_Text_copyBytes" (func $copy_text_bytes (param i64 i32 i32 i32)))
    (import "afia_env" "Afia_Text_free" (func $free_text_handle (param i64)))

    (memory (export "memory") 1 1)
    (data (i32.const 10) "div")
    (data (i32.const 20) "style")
    (data (i32.const 30) "background-color: red;")

    (func (export "Afia_initContext") (result i32) i32.const 12345)

    (@custom "AFIA_INPUT_TYPE_50" "text<1,100>")
    (@custom "AFIA_INPUT_SLUG_50" "my-text")

    (@custom "AFIA_OUTPUT_TYPE_100" "vdom")
    (@custom "AFIA_OUTPUT_SLUG_100" "hello-world-div")

    (func (export "Afia_Output_100") (param $context i32) (result i64)
        (local $div i64)
        (local $text_node i64)
        (local $text_handle i64)
        (local $text_len i32)

        (call $create_element (i32.const 10) (i32.const 3))
        (local.set $div)

        (call $set_attribute (local.get $div) (i32.const 20) (i32.const 5) (i32.const 30) (i32.const 22))
        i32.eqz (if (then nop) (else unreachable))

        (call $get_text_input (i32.const 50))
        (local.set $text_handle)

        (call $get_text_len (local.get $text_handle))
        (local.set $text_len)

        (call $copy_text_bytes (local.get $text_handle) (i32.const 0) (local.get $text_len) (i32.const 600))
        (call $free_text_handle (local.get $text_handle))

        (call $create_text_node (i32.const 600) (local.get $text_len))
        (local.set $text_node)

        (call $append_child (local.get $div) (local.get $text_node))

        local.get $div
    )
)

The above component has an output with ID 100 that creates the DOM element <div style="background-color: red;">{my-text}</div>, where {my-text} is the string retrieved from an input with ID 50.

Next we will add the component to the site's list of component dependencies.

afia compdep create --slug my-hero --path my-hero.wat

The site's component dependencies can be listed using:

afia compdep list

Next, create an instance of the component dependency:

afia compinst create --slug=homepage-hero --compdep=my-hero

To view the site's component instances:

afia compinst list

We now have an instance of the hero component. Next we will connect that instance to the home page.

First, create a new page section:

afia pagesec create --id=123 --page=home

Then, connect the homepage-hero component to the page section.

afia nodeconn create --start-compinst homepage-hero --start-compout 100 --end-pagesec 123

Afia has several built-in components. The built-in text component can output static text.

Create a built-in text instance:

afia compinst create --slug my-text --text "This text came from a text component"

Connect the text instance's output to the hero component's text input:

afia nodeconn create --start-compinst my-text --end-compinst homepage-hero --end-compinput 50

We now have a built-in text component, connected to a WebAssembly hero component, connected to a page section in the home page.

Serving the page should show the text with a red background:

afia website preview

You can edit built-in text components using the Afia CLI. Run the following to change the text:

afia compinst edit --compinst=my-text --text "This is the updated string"

After restarting the preview, the page should display the updated text:

afia website preview