Skip to content

Commit

Permalink
improve documentation to use writer instead of streamsync
Browse files Browse the repository at this point in the history
  • Loading branch information
FabienArcellier committed Jun 27, 2024
1 parent 20fe6ab commit e28d88b
Show file tree
Hide file tree
Showing 10 changed files with 27 additions and 27 deletions.
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

0 comments on commit e28d88b

Please sign in to comment.