@studiometa/js-toolkit 2.0.0-alpha.7 → 2.0.0-alpha.8
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 +10 -68
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,29 +15,19 @@ Install the latest version via NPM:
|
|
|
15
15
|
npm install @studiometa/js-toolkit
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
-
The package can be used directly with the [Skypack CDN](https://www.skypack.dev) as follow:
|
|
19
|
-
|
|
20
|
-
```html
|
|
21
|
-
<script type="module">
|
|
22
|
-
// Import the Base class
|
|
23
|
-
import Base from 'https://cdn.skypack.dev/@studiometa/js-toolkit/';
|
|
24
|
-
// Import the full toolkit
|
|
25
|
-
import * as components from 'https://cdn.skypack.dev/@studiometa/js-toolkit/components';
|
|
26
|
-
import * as decorators from 'https://cdn.skypack.dev/@studiometa/js-toolkit/decorators';
|
|
27
|
-
import * as services from 'https://cdn.skypack.dev/@studiometa/js-toolkit/services';
|
|
28
|
-
import * as utils from 'https://cdn.skypack.dev/@studiometa/js-toolkit/utils';
|
|
29
|
-
</script>
|
|
30
|
-
```
|
|
31
|
-
|
|
32
18
|
## Usage
|
|
33
19
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
Import the `Base` class to create your components from your `node_modules`:
|
|
20
|
+
Import the `Base` class and extend it to create your components:
|
|
37
21
|
|
|
38
22
|
```js
|
|
39
|
-
import Base from '@studiometa/js-toolkit';
|
|
40
|
-
import Modal from '@studiometa/
|
|
23
|
+
import { Base } from '@studiometa/js-toolkit';
|
|
24
|
+
import Modal from '@studiometa/ui/Modal';
|
|
25
|
+
|
|
26
|
+
class Component {
|
|
27
|
+
static config = {
|
|
28
|
+
name: 'Component',
|
|
29
|
+
}
|
|
30
|
+
}
|
|
41
31
|
|
|
42
32
|
class App extends Base {
|
|
43
33
|
static config = {
|
|
@@ -46,6 +36,7 @@ class App extends Base {
|
|
|
46
36
|
debug: true,
|
|
47
37
|
components: {
|
|
48
38
|
Modal,
|
|
39
|
+
Component,
|
|
49
40
|
},
|
|
50
41
|
refs: ['btn', 'items[]'],
|
|
51
42
|
options: {
|
|
@@ -90,53 +81,4 @@ export default new App(document.querySelector('#app'));
|
|
|
90
81
|
|
|
91
82
|
Read the [documentation](https://js-toolkit.meta.fr/) to learn more.
|
|
92
83
|
|
|
93
|
-
### Modern JS in browser
|
|
94
|
-
|
|
95
|
-
Two modern builds are provided for prototyping purpose, they can be used as follow:
|
|
96
84
|
|
|
97
|
-
```html
|
|
98
|
-
<script type="module">
|
|
99
|
-
// Import the Base class
|
|
100
|
-
import Base from 'https://cdn.skypack.dev/@studiometa/js-toolkit/';
|
|
101
|
-
// Import the full toolkit
|
|
102
|
-
import Modal from 'https://cdn.skypack.dev/@studiometa/js-toolkit/components/Modal';
|
|
103
|
-
</script>
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
### Legacy JS
|
|
107
|
-
|
|
108
|
-
Two UMD builds are also provided to be used in legacy projects.
|
|
109
|
-
|
|
110
|
-
```html
|
|
111
|
-
<div id="app">
|
|
112
|
-
<button data-ref="btn">Add more</button>
|
|
113
|
-
<input data-ref="input" value="0" readonly />
|
|
114
|
-
<div data-component="Component"></div>
|
|
115
|
-
</div>
|
|
116
|
-
<script src="https://unpkg.com/@studiometa/js-toolkit/index.umd.js"></script>
|
|
117
|
-
<script>
|
|
118
|
-
var Component = Base.defineComponent({
|
|
119
|
-
config: {
|
|
120
|
-
name: 'Component',
|
|
121
|
-
},
|
|
122
|
-
});
|
|
123
|
-
|
|
124
|
-
Base.createBase(document.querySelector('#app'), {
|
|
125
|
-
config: {
|
|
126
|
-
name: 'App',
|
|
127
|
-
log: true,
|
|
128
|
-
components: {
|
|
129
|
-
Component: Component,
|
|
130
|
-
},
|
|
131
|
-
},
|
|
132
|
-
mounted: function() {
|
|
133
|
-
this.$log('mounted');
|
|
134
|
-
},
|
|
135
|
-
methods: {
|
|
136
|
-
onBtnClick: function() {
|
|
137
|
-
this.$refs.input.value = Number(this.$refs.input.value) + 1;
|
|
138
|
-
},
|
|
139
|
-
},
|
|
140
|
-
});
|
|
141
|
-
</script>
|
|
142
|
-
```
|