@mirai/core 0.1.11 → 0.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +103 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,104 @@
|
|
|
1
1
|
# @mirai/core
|
|
2
|
+
|
|
3
|
+
# 1. Installation
|
|
4
|
+
|
|
5
|
+
The installation of the new mirai's core is very simple. You will simply have to add 2 files inside your html page.
|
|
6
|
+
|
|
7
|
+
## 1.1 Requirements
|
|
8
|
+
|
|
9
|
+
The first one will be our styles file for the default theme. This file only contains css variable assignments, so it will never conflict with any other css files you have. Here you have an example of how you should instantiate it:
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<head>
|
|
13
|
+
<link rel="stylesheet" href="https://static.mirai.com/core/theme.css" rel="preload" defer />
|
|
14
|
+
...
|
|
15
|
+
</head>
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
The next file we need is our component repository file. This JavaScript file provides an asynchronous loading system for components, so it will not influence the overall loading of your html page much. Here you have an example of how you should instantiate it:
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
...
|
|
22
|
+
<script type="module" defer src="https://static.mirai.com/core/index.js"></script>
|
|
23
|
+
</body>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## 1.2 Creating a data repository instance
|
|
27
|
+
|
|
28
|
+
Once the two main files of our new core are instantiated, we need to indicate which data repository we want to load. For this we will use an html element within our html page:
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<body>
|
|
32
|
+
<div data-mirai-id="501404" hidden></div>
|
|
33
|
+
...
|
|
34
|
+
</body>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
The attributes that we can set in this instance are:
|
|
38
|
+
|
|
39
|
+
- `data-mirai-id`: the hotel or chain identifier.
|
|
40
|
+
- `data-type`: `hotel` or `chain` instance type (default is `hotel`)
|
|
41
|
+
- `data-locale`: in case we want to set a different language locale than the default.
|
|
42
|
+
- `data-currency`: in case we want to set a currency than the default.
|
|
43
|
+
|
|
44
|
+
Here you have an complete example using all these attributes:
|
|
45
|
+
|
|
46
|
+
```html
|
|
47
|
+
<body>
|
|
48
|
+
<div data-mirai-id="500255" data-type="chain" data-currency="JPY" data-locale="ja-JA" hidden></div>
|
|
49
|
+
...
|
|
50
|
+
</body>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## 1.3 Environments
|
|
54
|
+
|
|
55
|
+
Our new core has different execution environments. These differ for the most part in the way they have been compiled.
|
|
56
|
+
|
|
57
|
+
- `production` (https://static.mirai.com) the bundle has been generated by minifying and obfuscating the largest code base possible.
|
|
58
|
+
- `development` (https://static-pre.mirai.com) the bundle has been generated in development mode with _sourceMaps_ as well as the access to the services is also in development mode.
|
|
59
|
+
|
|
60
|
+
# 2. Components
|
|
61
|
+
|
|
62
|
+
To instantiate any component from the core repository we have to take into account these properties common to all components:
|
|
63
|
+
|
|
64
|
+
- `data-mirai-component:string`: ndicates the name of the component to instantiate
|
|
65
|
+
- `data-mobile:bool`: if you only want to instantiate the component in a mobile environment.
|
|
66
|
+
- `data-desktop:bool`: if you only want to instantiate the component in a non mobile environment.
|
|
67
|
+
|
|
68
|
+
Here you have an example of how you should instantiate it:
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<div data-mirai-component="finder" data-mobile="true"></div>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
It should also be noted that some components may offer the _ghosting_ system. This means that that component can receive different html markup than the default component provides. Let's see a naive example:
|
|
75
|
+
|
|
76
|
+
```html
|
|
77
|
+
<div data-mirai-component="session">
|
|
78
|
+
<button>Login here</button>
|
|
79
|
+
</div>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
> In this example we replace the html markup with a `<button>` with the content `Login Here`
|
|
83
|
+
|
|
84
|
+
## 2.1 `<BookingQuery>`
|
|
85
|
+
|
|
86
|
+
This component shows a modal in which it asks the user for the `bookingId` and `pinCode` if both fields are correct, it redirects to the page to manage the reservation.
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<div data-mirai-component="bookingQuery"></div>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## 2.2 `<Deals>`
|
|
93
|
+
|
|
94
|
+
This component displays a form to be able to search for rooms with a certain offer. This form contains 3 fields:
|
|
95
|
+
|
|
96
|
+
- `calendar` (check-in & check-out)
|
|
97
|
+
- `occupation`
|
|
98
|
+
- `promocode`
|
|
99
|
+
|
|
100
|
+
```html
|
|
101
|
+
<div data-mirai-component="deals" data-id="293842"></div>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
This component needs a `data-id` property that will contain the `id` of the offer to display.
|