Skip to content

Commit

Permalink
docs: mvui -> Mvui casing
Browse files Browse the repository at this point in the history
  • Loading branch information
dominiksta committed Aug 4, 2024
1 parent a64ab7c commit a3889d9
Show file tree
Hide file tree
Showing 6 changed files with 18 additions and 18 deletions.
2 changes: 1 addition & 1 deletion packages/docs/content/docs/components/00-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ bookToC: false

# Overview

This chapter will cover the component model of mvui. We will discuss component definition,
This chapter will cover the component model of Mvui. We will discuss component definition,
rendering lifecycle, props, attributes, styling, events and slots.

We will also discuss the very basics of reactivity to get you started, but since this is a
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ bookToC: false

# Vanilla JS Web Components

An mvui component is fundamentally a standard web component. It is therefore necessary to
understand the basic concepts of web components to use mvui effectively. If you have
An Mvui component is fundamentally a standard web component. It is therefore necessary to
understand the basic concepts of web components to use Mvui effectively. If you have
already used web components, you can skip this section.

## What?
Expand Down Expand Up @@ -48,7 +48,7 @@ any context:
- Content Management Systems (CMS) may support manual editing of HTML or just putting HTML
in markdown. Convincing a CMS to use components from say React can be challenging, while
Web Components are pretty much just work. In fact, the live code sandbox that is used in
this documentation is an mvui web component that can be used directly from markdown with
this documentation is an Mvui web component that can be used directly from markdown with
the Hugo static site generator.

## Why Not?
Expand All @@ -59,7 +59,7 @@ example, there is no concept of reactivity and "templating" is done by just usin
strings. In general, most will consider the API not very pleasant to work with in
comparison to modern frontend frameworks.

This is where frameworks like mvui, [LitElement](https://lit.dev),
This is where frameworks like Mvui, [LitElement](https://lit.dev),
[SlimJS](https://slimjs.com/#/welcome) or [Fast
Element](https://www.fast.design/docs/fast-element/defining-elements) come in: They
provide relatively small abstractions to significantly improve experience of working with
Expand Down
10 changes: 5 additions & 5 deletions packages/docs/content/docs/components/02-defining.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ bookToC: false

# Defining

All web components, including mvui components, must be registered to the "custom elements
All web components, including Mvui components, must be registered to the "custom elements
registry". This assigns them a fixed, unique tag name (like `<my-component>`).

You *could* go the default `customElements.define('my-component', MyComponent)` way, but
mvui provides some convenience features which will make life easier.
Mvui provides some convenience features which will make life easier.

```typescript
import { Component, h } from "@mvuijs/core";
Expand All @@ -28,7 +28,7 @@ export default class MyComponent extends Component {
MyComponent.register();
```

But wait, where did we specify the tag name? In this case, we didn't, and mvui will assume
But wait, where did we specify the tag name? In this case, we didn't, and Mvui will assume
that what you wanted was `'<app-my-component>'`. You can customize the tag name by
specifying both a *prefix* and a *suffix*:

Expand All @@ -54,10 +54,10 @@ classnames.

You may have noticed that the property we used to specify the prefix was not called
`tagNamePrefix` but `tagNameLibrary`. The reason is that you can change the tag name
prefixes of other mvui libraries to avoid naming conflicts.
prefixes of other Mvui libraries to avoid naming conflicts.

Let's pretend you have are writing library called `toaster`, which you use to control your
actual toaster. But you want to use an mvui component library also called `toaster`, that
actual toaster. But you want to use an Mvui component library also called `toaster`, that
displays toast notifications on screen. You can avoid conflicts in your tag names like so:

```typescript
Expand Down
4 changes: 2 additions & 2 deletions packages/docs/content/docs/components/07-lifecycle.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ The `render()` method of a component will be called *every time the component is
to the DOM. This is generally speaking a good place to declare component local
state. There are cases where you might need to run code *after* the component is done
rendering (code you write in the render method will run just *before* rendering) or when
it is unmounted. For these situations, mvui provides two lifecycle hooks:
it is unmounted. For these situations, Mvui provides two lifecycle hooks:

- `this.onRemoved(<callback>)` will run the callback on unmount
- `this.onRendered(<callback>)` will run the callback after the component is
rendered. Recall that components in mvui will only render once when mounted and
rendered. Recall that components in Mvui will only render once when mounted and
subsequent state changes will only update the relevant DOM.

{{<hint info>}}
Expand Down
4 changes: 2 additions & 2 deletions packages/docs/content/docs/components/10-why-class-syntax.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ function OtherComponent() {

Libraries like Solid and React can get around this problem by simply not using events in
their component system and instead relying on passing callbacks. This is not an option for
mvui as it is supposed to be a web components first library.
Mvui as it is supposed to be a web components first library.

We could possibly come up with a different syntax like this:

Expand Down Expand Up @@ -122,5 +122,5 @@ class UserComp extends Component {
```

This is a generic component that uses its generic type in its custom events. With a
functional syntax, this would not be possible for mvui, at least not to our current
functional syntax, this would not be possible for Mvui, at least not to our current
knowledge.
8 changes: 4 additions & 4 deletions packages/docs/content/docs/ui5.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ bookToC: false

## Why

The mvui team endeavours to provide enterprise ready solutions, empowering developers with
The Mvui team endeavours to provide enterprise ready solutions, empowering developers with
a state-of-the-art framework to facilitate rapid iteration. Our continuing mission is and
has always been to help businesses navigate the complex space of modern technology like
Artificial Intelligence (AI) and Blockchain more effectively with standardized tooling. We
Expand All @@ -20,7 +20,7 @@ library. They will also probably stick around for a long time because SAP is adv
them to enterprise customers, which usually expect stability and long term support.

Are they the prettiest components in the world? Arguably no. But they fit the intended use
case of mvui very well: Projects that are specifically built to require minimal long term
case of Mvui very well: Projects that are specifically built to require minimal long term
maintenance. They are also much more feature complete than most component libraries: They
have dark mode support, high contrast themes for accesibility, right-to-left language
support, many responsive components (like a menu that looks like a right-click menu on
Expand All @@ -29,8 +29,8 @@ components like wizards, calendars that support different calendar types or tree
custom nested components.

Fundamentally, there is nothing stopping you from using any web component library in
mvui. To provide type-safety for events and slots however, creating wrappers is
necessary. Because of this, mvui provides wrappers to all UI5 Web Components in the
Mvui. To provide type-safety for events and slots however, creating wrappers is
necessary. Because of this, Mvui provides wrappers to all UI5 Web Components in the
`@mvuijs/ui5` package. Also, the package bundles the required fonts so that you can use
the package for offline applications (with something like electron). You can read about
available components, their arguments, events, etc. in the [official
Expand Down

0 comments on commit a3889d9

Please sign in to comment.