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

docs: improve documentation to use writer instead of streamsync #474

Merged
merged 1 commit into from
Jul 29, 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
2 changes: 1 addition & 1 deletion docs/components/component_page.mdx.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -71,4 +71,4 @@ A function, in this example `handle_event`, should be implemented in your code t

## Reference

* <a href="https://github.com/streamsync-cloud/streamsync/blob/dev/src/ui/{{fileRef}}" target="_blank" >Explore this component's source code on GitHub</a>
* <a href="https://github.com/writer/writer-framework/blob/dev/src/ui/{{fileRef}}" target="_blank" >Explore this component's source code on GitHub</a>
2 changes: 1 addition & 1 deletion docs/framework/authentication.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ The default authentication error page look like this:

<img src="/framework/images/auth_unauthorized_default.png" />

_streamsync.auth.Unauthorized_
_writer.auth.Unauthorized_

| Parameter | Description |
| ----------- | ---------------------- |
Expand Down
10 changes: 5 additions & 5 deletions docs/framework/backend-driven-ui.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ with ui.find(container):

### Component methods

UI manager contains methods linked to each front-end component. For example, in previous code snippets we provide a `ui.Text` method, which is used for creating [Text components](https://www.streamsync.cloud/component-list.html#text).
UI manager contains methods linked to each front-end component. For example, in previous code snippets we provide a `ui.Text` method, which is used for creating [Text components](https://dev.writer.com/components/text).

This method expects `content: dict` as first argument, which enables you to set the field properties of the component, through corresponding keys:
```python
Expand Down Expand Up @@ -147,7 +147,7 @@ In addition to `content`, a set of fields which is specific to the component typ
</Note>
- **`position: int`**: Determines the display order of the component in relation to its siblings.
Position `0` means that the component is the first child of its parent.
Position `-2` is used for components – such as [sidebars](https://www.streamsync.cloud/component-list.html#sidebar) – that have a specific reserved position not related to their siblings.
Position `-2` is used for components – such as [sidebars](https://dev.writer.com/components/sidebar) – that have a specific reserved position not related to their siblings.
```python
ui.Text(
{"text": "Hello Parent, I'm your first child!"},
Expand All @@ -170,7 +170,7 @@ In addition to `content`, a set of fields which is specific to the component typ

ui.Text({"text": "My visibility depends on the @{my_var}!"}, visible="my_var")
```
- **`handlers: dict[str, callable]`**: Attaches [event handlers](https://www.streamsync.cloud/event-handlers.html) to the component. Each dictionary key represents an event, and its value is the corresponding handler.:
- **`handlers: dict[str, callable]`**: Attaches [event handlers](https://dev.writer.com/framework/event-handlersl) to the component. Each dictionary key represents an event, and its value is the corresponding handler.:
```python
def increment(state):
state["counter"] += 1
Expand All @@ -190,7 +190,7 @@ In addition to `content`, a set of fields which is specific to the component typ
# Both approaches yield the same outcome.
```
*A component can be linked to multiple event handlers.*
- **`binding: dict[str, str]`**: Links the component to a state variable via [binding](https://www.streamsync.cloud/builder-basics.html#binding). The dictionary key is the bindable event, and the value is the state variable's name:
- **`binding: dict[str, str]`**: Links the component to a state variable via [binding](https://dev.writer.com/framework/builder-basics#binding). The dictionary key is the bindable event, and the value is the state variable's name:
```python
initial_state = wf.init_state({
"header_text": "Default Text"
Expand Down Expand Up @@ -269,4 +269,4 @@ with ui.refresh_with(id="cmc-column-1"):
{"text": 'To Hello World, or not to Hello World?'},
id="hello-world-new"
)
```
```
6 changes: 3 additions & 3 deletions docs/framework/custom-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export default {
};
</script>
<script setup lang="ts">
import { FieldType } from "../streamsyncTypes";
import { FieldType } from "../writerTypes";
import injectionKeys from "../injectionKeys";
import { inject } from "vue";

Expand All @@ -100,7 +100,7 @@ The code above will make Bubble Message available in the Builder.

<Steps>
<Step title="Clone the Framework Repository">
To get started, clone the [Framework repository](https://github.com/streamsync-cloud/streamsync) from GitHub.
To get started, clone the [Framework repository](https://github.com/writer/writer-framework) from GitHub.
</Step>
<Step title="Set Up the Development Environment">
To develop custom templates in a developer-friendly way, ensure you have a front-end development server with instant reload capabilities. The front-end code for Framework is located in the `ui` folder. With Node and npm installed on your system, run `npm install` to install dependencies. Then, start the server with support for custom component templates using `npm run custom.dev`.
Expand Down Expand Up @@ -165,4 +165,4 @@ Execute `npm run custom.build`, this will generate the output `.js` and `.css` f
npm run custom.build
```

Collect the files from `ui/custom_components_dist` and pack them in a folder such as `my_custom_bubbles`. The folder containing the generated files, e.g. `my_custom_bubbles`, can now be placed in the `extensions/` folder of any Framework project. It'll be automatically detected during server startup.
Collect the files from `ui/custom_components_dist` and pack them in a folder such as `my_custom_bubbles`. The folder containing the generated files, e.g. `my_custom_bubbles`, can now be placed in the `extensions/` folder of any Framework project. It'll be automatically detected during server startup.
10 changes: 5 additions & 5 deletions docs/framework/deploy-with-docker.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ If you're a Docker expert, feel free to work on your own `Dockerfile`. Framework
To build the image, use `docker build . -t ` followed by an image tag, which you're free to choose and will locally identify your image.

```sh
docker build . -t my_streamsync_app
docker build . -t my_writer_app
```

<Warning>
Expand All @@ -67,16 +67,16 @@ You can push your image using the following commands.
docker login

# Push the image
# Replace "my_streamsync_app" for the tag you've previously chosen
# Replace "my_writer_app" for the tag you've previously chosen
# Replace "my_user" for your user on Docker Hub
docker tag my_streamsync_app:latest my_user/my_streamsync_app:latest
docker push my_user/my_streamsync_app:latest
docker tag my_writer_app:latest my_user/my_writer_app:latest
docker push my_user/my_writer_app:latest
```

If your image is public, anyone can now run the following command and start the app. It's important to bind the port to a port in the host machine. The command below binds port 8080 in the Docker image to port 8080 in the host.

```sh
docker run -p 8080:8080 my_user/my_streamsync_app
docker run -p 8080:8080 my_user/my_writer_app
```

Go on your browser to [http://localhost:8080](http://localhost:8080) to check everything is working as expected.
Expand Down
2 changes: 1 addition & 1 deletion docs/framework/event-handlers.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ Note that for this "chain" to work, you need to import the final module in the s

## Mutating state

In most cases, event handlers will modify the application state. State can be accessed by including the `state` argument in the handler, which will provide you with a `StreamsyncState` object for the session that invoked the handler.
In most cases, event handlers will modify the application state. State can be accessed by including the `state` argument in the handler, which will provide you with a `WriterState` object for the session that invoked the handler.

Elements of state can be reached using the square brackets syntax `state["my_element"]`. Accessing keys that don't exist will return `None`.

Expand Down
2 changes: 1 addition & 1 deletion docs/framework/frontend-scripts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ initial_state.import_script("lodash", "https://cdnjs.cloudflare.com/ajax/libs/lo
## Frontend core

<Warning>
Effectively using Framework's core can be challenging and will likely entail reading its [source code](https://github.com/streamsync-cloud/streamsync/blob/master/ui/src/core/index.ts). Furthermore, it's considered an internal capability rather than a public API, so it may unexpectedly change between releases.
Effectively using Framework's core can be challenging and will likely entail reading its [source code](https://github.com/writer/writer-framework/blob/master/ui/src/core/index.ts). Furthermore, it's considered an internal capability rather than a public API, so it may unexpectedly change between releases.
</Warning>

You can access Framework's front-end core via `globalThis.core`, unlocking all sorts of functionality. Notably, you can use `getUserState()` to get values from state.
Expand Down
6 changes: 3 additions & 3 deletions docs/framework/quickstart-tutorial.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ In this tutorial, we'll guide you through creating a logistic regression visuali
First, make sure you have Framework installed. You can install it via pip:

```bash
pip install "streamsync[ds]"
pip install "writer"
```

Now, let's get started with creating our logistic regression visualisation tool. We'll break down the process into the following steps:
Expand All @@ -24,7 +24,7 @@ So, without further ado, let's jump into it.
To create our project, we will use the following commands:

```bash
streamsync create logistic_regression
writer create logistic_regression
cd logistic_regression
```
Commands will create basic template of app project with initial file structure.
Expand All @@ -44,7 +44,7 @@ pip install -r requirements.txt
Once this is done, we can finally run the Framework editor using the command:

```bash
streamsync edit .
writer edit .
```

This will run our Framework instance. Runtime logs can be observed in the terminal, and the app is available at http://localhost:3006.
Expand Down
8 changes: 4 additions & 4 deletions docs/framework/state-schema.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ scenarios, while also allowing your IDE and toolchains to provide autocomplete a
```python
import writer as wf

class AppSchema(wf.StreamsyncState):
class AppSchema(wf.WriterState):
counter: int

initial_state = wf.init_state({
Expand Down Expand Up @@ -50,7 +50,7 @@ Schema composition allows you to model a complex Application state.
class MyappSchema(wf.State):
title: str

class AppSchema(wf.StreamsyncState):
class AppSchema(wf.WriterState):
my_app: MyappSchema
counter: int

Expand All @@ -70,7 +70,7 @@ A schema allows you to specify that an attribute which contains a dictionary
must be treated as a dictionary, rather than as a group of state.

```python
class AppSchema(wf.StreamsyncState):
class AppSchema(wf.WriterState):
vegas_graph: dict

# Without schema, this handler is execute only once
Expand Down Expand Up @@ -112,7 +112,7 @@ Here is the code, can you spot the error ?
```python
import writer as wf

class AppSchema(wf.StreamsyncState):
class AppSchema(wf.WriterState):
counter: int

def increment(state: AppSchema):
Expand Down
6 changes: 3 additions & 3 deletions docs/framework/testing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ To get started, import your app's entry point, `main`. This will initialise stat

### Creating states

For testing purposes, you can create your own state using the `StreamsyncState` class in `writer.core`. Pass a dictionary when constructing it.
For testing purposes, you can create your own state using the `WriterState` class in `writer.core`. Pass a dictionary when constructing it.

```py
from writer.core import StreamsyncState
from writer.core import WriterState

artificial_state = StreamsyncState({
artificial_state = WriterState({
"a": 3,
"b": 6
})
Expand Down
Loading