@shopware-ag/dive 1.18.0 → 1.18.2
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 +80 -17
- package/build/dive.cjs +1 -1
- package/build/dive.cjs.map +1 -1
- package/build/dive.js +1 -1
- package/build/dive.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -21,9 +21,22 @@ You can find the template in ci/readme/template/TEMPLATE_README.md
|
|
|
21
21
|
<a href="#badge">
|
|
22
22
|
<img alt="dive: types" src="https://img.shields.io/npm/types/%40shopware-ag%2Fdive">
|
|
23
23
|
</a>
|
|
24
|
+
<a href="#badge">
|
|
25
|
+
<img alt="dive: types" src="https://img.shields.io/codecov/c/github/shopware/dive">
|
|
26
|
+
</a>
|
|
24
27
|
</p>
|
|
25
28
|
|
|
26
|
-
|
|
29
|
+
## Table of Contents
|
|
30
|
+
|
|
31
|
+
1. [About](#about)
|
|
32
|
+
2. [Installation](#installation)
|
|
33
|
+
3. [Local development](#local-development)
|
|
34
|
+
4. [Setup in Shopware](#setup-in-shopware)
|
|
35
|
+
5. [Usage](#usage)
|
|
36
|
+
6. [Unit Tests](#unit-tests)
|
|
37
|
+
7. [Formatting](#formatting)
|
|
38
|
+
|
|
39
|
+
## About
|
|
27
40
|
|
|
28
41
|
DIVE is a spatial framework made by and optimized for Shopware. It can be used
|
|
29
42
|
directly integrated in a Shopware frontend such as Storefront or in any other
|
|
@@ -33,23 +46,73 @@ DIVE supplies your frontend application with all needed tooling to set up a
|
|
|
33
46
|
basic 3D application with event-based controls called "Actions". For further
|
|
34
47
|
information, see [Getting started](#getting-started).
|
|
35
48
|
|
|
36
|
-
|
|
49
|
+
## Installation
|
|
37
50
|
|
|
38
|
-
|
|
51
|
+
The `@shopware-ag/dive` package can be installed via
|
|
39
52
|
|
|
40
|
-
```
|
|
53
|
+
```bash
|
|
41
54
|
npm install @shopware-ag/dive
|
|
55
|
+
|
|
56
|
+
or
|
|
57
|
+
|
|
58
|
+
yarn add @shopware-ag/dive
|
|
42
59
|
```
|
|
43
60
|
|
|
44
|
-
|
|
61
|
+
## Local development
|
|
45
62
|
|
|
63
|
+
### with devenv
|
|
64
|
+
|
|
65
|
+
If you are using `devenv`, you have to make sure that you are in the correct shell while linking. `nix` (what `devenv` is
|
|
66
|
+
based on) uses it's own instances of `npm` so we need to make sure that the `npm link` get's executed within the correct `devenv` environment a.k.a `nix/store`.
|
|
67
|
+
To make sure you are using the correct instance of `npm` you have to browse to your `devenv` project:
|
|
68
|
+
|
|
69
|
+
```bash
|
|
70
|
+
cd path/to/your/devenv.nix
|
|
46
71
|
```
|
|
47
|
-
|
|
72
|
+
|
|
73
|
+
#### with direnv
|
|
74
|
+
|
|
75
|
+
If you use `direnv` you should be launched into the correct shell automatically.
|
|
76
|
+
|
|
77
|
+
#### without direnv
|
|
78
|
+
|
|
79
|
+
If you don't use `direnv` you can start the correct shell manually by running
|
|
80
|
+
|
|
81
|
+
```bash
|
|
82
|
+
devenv shell
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Within the `devenv shell` you have to browse to your DIVE folder
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
cd path/to/@shopware-ag/dive
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### without devenv
|
|
92
|
+
|
|
93
|
+
You don't have to do anything special if you don't use `devenv`.
|
|
94
|
+
|
|
95
|
+
### npm link
|
|
96
|
+
|
|
97
|
+
If you want to link DIVE package locally after checking out, you can to that in the package's project folder:
|
|
98
|
+
|
|
99
|
+
```bash
|
|
100
|
+
cd path/to/@shopware-ag/dive
|
|
101
|
+
npm link
|
|
48
102
|
```
|
|
49
103
|
|
|
50
|
-
|
|
104
|
+
After registering the package in npm, you can use the sym-link in your project:
|
|
105
|
+
|
|
106
|
+
```bash
|
|
107
|
+
cd path/to/your/package.json
|
|
108
|
+
npm link @shopware-ag/dive
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
After successfully linking DIVE into your project you will find the according sym-link in your `node_modules`.
|
|
112
|
+
|
|
113
|
+
## Setup in Shopware
|
|
51
114
|
|
|
52
|
-
Don't forget to include DIVE in your webpack.config.js
|
|
115
|
+
Don't forget to include DIVE in your `webpack.config.js`:
|
|
53
116
|
|
|
54
117
|
```js
|
|
55
118
|
const path = require('path');
|
|
@@ -100,9 +163,9 @@ module.exports = () => {
|
|
|
100
163
|
};
|
|
101
164
|
```
|
|
102
165
|
|
|
103
|
-
|
|
166
|
+
## Usage
|
|
104
167
|
|
|
105
|
-
|
|
168
|
+
### Quick View
|
|
106
169
|
|
|
107
170
|
QuickView is used to quickly display your assets with as few lines of code as
|
|
108
171
|
possible. Simply call the static `QuickView()` method, with your data URI as a
|
|
@@ -132,15 +195,15 @@ try {
|
|
|
132
195
|
}
|
|
133
196
|
```
|
|
134
197
|
|
|
135
|
-
|
|
198
|
+
### Getting started
|
|
136
199
|
|
|
137
|
-
|
|
200
|
+
#### Import:
|
|
138
201
|
|
|
139
202
|
```ts
|
|
140
203
|
import { DIVE } from '@shopware-ag/dive'; // <-- import DIVE
|
|
141
204
|
```
|
|
142
205
|
|
|
143
|
-
|
|
206
|
+
#### Instantiate:
|
|
144
207
|
|
|
145
208
|
```ts
|
|
146
209
|
import { DIVE } from '@shopware-ag/dive';
|
|
@@ -177,7 +240,7 @@ com.PerformAction('SET_CAMERA_TRANSFORM', {
|
|
|
177
240
|
});
|
|
178
241
|
```
|
|
179
242
|
|
|
180
|
-
|
|
243
|
+
### Actions
|
|
181
244
|
|
|
182
245
|
Actions symbolize the communication between frontend and 3D space. All actions
|
|
183
246
|
can be performed anywhere, no matter if you are in frontend or 3D.
|
|
@@ -228,7 +291,7 @@ com.PerformAction('SET_CAMERA_TRANSFORM', {
|
|
|
228
291
|
unsubscribe(); // <-- execute unsubscribe callback when done
|
|
229
292
|
```
|
|
230
293
|
|
|
231
|
-
|
|
294
|
+
#### Actions List
|
|
232
295
|
|
|
233
296
|
In the following you find a list of all available actions to perform on
|
|
234
297
|
DIVECommunication class via
|
|
@@ -457,7 +520,7 @@ DIVECommunication class via
|
|
|
457
520
|
</tr>
|
|
458
521
|
</table>
|
|
459
522
|
|
|
460
|
-
|
|
523
|
+
## Unit Tests
|
|
461
524
|
|
|
462
525
|
All relevant files are covered by Jest tests. If you find any file that has not been covered yet, feel free to add unit tests accordingly.
|
|
463
526
|
|
|
@@ -465,6 +528,6 @@ If there are any modules that have to be mocked (like `three`) you can create a
|
|
|
465
528
|
|
|
466
529
|
If you have any other things from a module to import, you can simply create a folder structure and place the mock file at the end of your structure. To understand better please take a look at the `__mocks__` folder for yourself.
|
|
467
530
|
|
|
468
|
-
|
|
531
|
+
## Formatting
|
|
469
532
|
|
|
470
533
|
DIVE uses Prettier as a preconfigured formatter.
|
package/build/dive.cjs
CHANGED