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