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.

Sign up for GitHub

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

Fixing custom components error for dev docs #555

Merged
merged 1 commit into from
Sep 6, 2024
Merged

Fixing custom components error for dev docs #555

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
70 changes: 36 additions & 34 deletions docs/framework/custom-components.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ It's possible to extend Framework with custom component templates.
They're developed using Vue 3 and TypeScript. Once transpiled, they can be used by copying them to the `extensions/` folder of any project.

<Note>
Custom components behave exactly like built-in ones. They are just as
performant, can contain other components, and offer the same the Builder
experience. They only differ from built-in components in the way that they're
bundled and imported.
Custom components behave exactly like built-in ones. They are just as
performant, can contain other components, and offer the same the Builder
experience. They only differ from built-in components in the way that they're
bundled and imported.
</Note>

## Architecture
Expand Down Expand Up @@ -101,39 +101,41 @@ The code above will make Bubble Message available in the Builder.
### Run a local server

<Steps>
<Step title="Clone the Framework Repository">
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`. ```sh cd ui npm install # "custom.dev" links templates in
"custom_components/" # "dev" runs the server without them npm run custom.dev
```
</Step>
<Step title="Start the Back-End Server">
The command `npm run custom.dev` starts a front-end server, which requires a
back-end to function fully. Start Framework via command line, specifying the
option `--port 5000`, to provide a back-end on that port. It's recommended
to create a new app for testing the template you're developing. ```sh writer
create customtester writer edit customtester --port 5000 ```
</Step>
<Step title="Access Framework and Test Custom Component">
You should now be able to access Framework via the URL provided by Vite,
e.g. `http://localhost:5174`. In the Builder's _Toolkit_, you should see the
sample component, _Balloon Message_. Add it to your tester application.
</Step>
<Step title="Clone the Framework Repository">
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`.

```sh cd ui npm install # "custom.dev" links templates in
"custom_components/" # "dev" runs the server without them npm run custom.dev
```
</Step>
<Step title="Start the Back-End Server">
The command `npm run custom.dev` starts a front-end server, which requires a
back-end to function fully. Start Framework via command line, specifying the
option `--port 5000`, to provide a back-end on that port. It's recommended
to create a new app for testing the template you're developing. ```sh writer
create customtester writer edit customtester --port 5000 ```
</Step>
<Step title="Access Framework and Test Custom Component">
You should now be able to access Framework via the URL provided by Vite,
e.g. `http://localhost:5174`. In the Builder's _Toolkit_, you should see the
sample component, _Balloon Message_. Add it to your tester application.
</Step>
</Steps>

### Create a new component

<Tip>
You can also have a look at the built-in component templates, since their
syntax is equivalent. They can be found in the `ui/src/components/` folder.
You can also have a look at the built-in component templates, since their
syntax is equivalent. They can be found in the `ui/src/components/` folder.
</Tip>
Go to `ui/src/custom_components/` and open the Vue single-file components, i.e. the
`.vue` files. These files contain comments that will help you get started. Try editing
Expand All @@ -154,8 +156,8 @@ import BubbleMessageAdvanced from "./BubbleMessageAdvanced.vue";
// Export an object with the ids and the templates as default

export default {
bubblemessage: BubbleMessage,
bubblemessageadvanced: BubbleMessageAdvanced,
bubblemessage: BubbleMessage,
bubblemessageadvanced: BubbleMessageAdvanced,
};
```

Expand Down
Loading