apprun 3.28.15 → 3.30.0
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/CHANGELOG.md +11 -0
- package/LICENSE +1 -1
- package/README.md +84 -27
- package/WHATSNEW.md +16 -6
- package/dist/apprun-dev-tools.js +1 -1
- package/dist/apprun-dev-tools.js.map +1 -1
- package/dist/apprun-html.esm.js +3 -3
- package/dist/apprun-html.esm.js.map +1 -1
- package/dist/apprun-html.js +1 -1
- package/dist/apprun-html.js.map +1 -1
- package/dist/apprun-play-html.esm.js +19 -0
- package/dist/apprun-play-html.esm.js.map +1 -0
- package/dist/apprun-play.js +1 -1
- package/dist/apprun-play.js.map +1 -1
- package/dist/apprun.esm.js +1 -1
- package/dist/apprun.esm.js.map +1 -1
- package/dist/apprun.js +1 -1
- package/dist/apprun.js.map +1 -1
- package/esm/apprun-html.js +1 -0
- package/esm/apprun-html.js.map +1 -1
- package/esm/apprun-play-html.js +210 -0
- package/esm/apprun-play-html.js.map +1 -0
- package/esm/apprun-play.js +2 -2
- package/esm/apprun.js +4 -3
- package/esm/apprun.js.map +1 -1
- package/esm/component.js +18 -19
- package/esm/component.js.map +1 -1
- package/esm/web-component.js +2 -2
- package/esm/web-component.js.map +1 -1
- package/index.html +1 -2
- package/package.json +1 -2
- package/rollup.config.js +8 -0
- package/src/apprun-html.ts +1 -0
- package/src/apprun-play-html.tsx +212 -0
- package/src/apprun-play.tsx +2 -2
- package/src/apprun.ts +6 -4
- package/src/component.ts +19 -18
- package/src/web-component.ts +2 -2
package/esm/component.js
CHANGED
|
@@ -2,7 +2,8 @@ import app, { App } from './app';
|
|
|
2
2
|
import { Reflect } from './decorator';
|
|
3
3
|
import directive from './directive';
|
|
4
4
|
const componentCache = new Map();
|
|
5
|
-
app.
|
|
5
|
+
if (!app.find('get-components'))
|
|
6
|
+
app.on('get-components', o => o.components = componentCache);
|
|
6
7
|
const REFRESH = state => state;
|
|
7
8
|
export class Component {
|
|
8
9
|
constructor(state, view, update, options) {
|
|
@@ -87,15 +88,10 @@ export class Component {
|
|
|
87
88
|
if (state instanceof Promise) {
|
|
88
89
|
// Promise will not be saved or rendered
|
|
89
90
|
// state will be saved and rendered when promise is resolved
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
this.setState(v[0]);
|
|
94
|
-
}).catch(err => {
|
|
95
|
-
console.error(err);
|
|
96
|
-
throw err;
|
|
91
|
+
Promise.resolve(state).then(v => {
|
|
92
|
+
this.setState(v, options);
|
|
93
|
+
this._state = state;
|
|
97
94
|
});
|
|
98
|
-
this._state = state;
|
|
99
95
|
}
|
|
100
96
|
else {
|
|
101
97
|
this._state = state;
|
|
@@ -132,12 +128,7 @@ export class Component {
|
|
|
132
128
|
this.state = (_b = (_a = this.state) !== null && _a !== void 0 ? _a : this['model']) !== null && _b !== void 0 ? _b : {};
|
|
133
129
|
if (typeof this.state === 'function')
|
|
134
130
|
this.state = this.state();
|
|
135
|
-
|
|
136
|
-
this.setState(this.state, { render: true, history: true });
|
|
137
|
-
}
|
|
138
|
-
else {
|
|
139
|
-
this.setState(this.state, { render: false, history: true });
|
|
140
|
-
}
|
|
131
|
+
this.setState(this.state, { render: !!options.render, history: true });
|
|
141
132
|
if (app['debug']) {
|
|
142
133
|
if (componentCache.get(element)) {
|
|
143
134
|
componentCache.get(element).push(this);
|
|
@@ -215,10 +206,18 @@ export class Component {
|
|
|
215
206
|
});
|
|
216
207
|
}
|
|
217
208
|
run(event, ...args) {
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
209
|
+
if (this.state instanceof Promise) {
|
|
210
|
+
return Promise.resolve(this.state).then(state => {
|
|
211
|
+
this.state = state;
|
|
212
|
+
this.run(event, ...args);
|
|
213
|
+
});
|
|
214
|
+
}
|
|
215
|
+
else {
|
|
216
|
+
const name = event.toString();
|
|
217
|
+
return this.is_global_event(name) ?
|
|
218
|
+
app.run(name, ...args) :
|
|
219
|
+
this._app.run(name, ...args);
|
|
220
|
+
}
|
|
222
221
|
}
|
|
223
222
|
on(event, fn, options) {
|
|
224
223
|
const name = event.toString();
|
package/esm/component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AACA,OAAO,GAAG,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAErC,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,MAAM,cAAc,GAAG,IAAI,GAAG,EAAE,CAAC;AACjC,GAAG,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,GAAG,cAAc,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"component.js","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"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"}
|
package/esm/web-component.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export const customElement = (componentClass, options = {}) => class CustomElement extends
|
|
1
|
+
export const customElement = (componentClass, options = {}) => class CustomElement extends HTMLDivElement {
|
|
2
2
|
constructor() {
|
|
3
3
|
super();
|
|
4
4
|
}
|
|
@@ -82,6 +82,6 @@ export const customElement = (componentClass, options = {}) => class CustomEleme
|
|
|
82
82
|
}
|
|
83
83
|
};
|
|
84
84
|
export default (name, componentClass, options) => {
|
|
85
|
-
(typeof customElements !== 'undefined') && customElements.define(name, customElement(componentClass, options));
|
|
85
|
+
(typeof customElements !== 'undefined') && customElements.define(name, customElement(componentClass, options), { extends: 'div' });
|
|
86
86
|
};
|
|
87
87
|
//# sourceMappingURL=web-component.js.map
|
package/esm/web-component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"web-component.js","sourceRoot":"","sources":["../src/web-component.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,cAAc,EAAE,UAAgC,EAAE,EAAE,EAAE,CAAC,MAAM,aAAc,SAAQ,
|
|
1
|
+
{"version":3,"file":"web-component.js","sourceRoot":"","sources":["../src/web-component.ts"],"names":[],"mappings":"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"}
|
package/index.html
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
<script src="demo/mode/jsx/jsx.js"></script>
|
|
15
15
|
<link rel="stylesheet" type="text/css" href="demo/styles.css">
|
|
16
16
|
</head>
|
|
17
|
-
<body
|
|
17
|
+
<body>
|
|
18
18
|
<!-- navbar -->
|
|
19
19
|
<nav class="navbar navbar-default">
|
|
20
20
|
<div class="container">
|
|
@@ -82,7 +82,6 @@
|
|
|
82
82
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
|
|
83
83
|
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
|
84
84
|
|
|
85
|
-
<script src="dist/apprun-dev-tools.js"></script>
|
|
86
85
|
<script src="demo/app.js"></script>
|
|
87
86
|
</body>
|
|
88
87
|
</html>
|
package/package.json
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "apprun",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.30.0",
|
|
4
4
|
"description": "JavaScript library that has Elm inspired architecture, event pub-sub and components",
|
|
5
5
|
"main": "dist/apprun.js",
|
|
6
6
|
"module": "dist/apprun.esm.js",
|
|
7
7
|
"types": "apprun.d.ts",
|
|
8
|
-
"type": "module",
|
|
9
8
|
"bin": {
|
|
10
9
|
"apprun": "apprun-cli.js"
|
|
11
10
|
},
|
package/rollup.config.js
CHANGED
package/src/apprun-html.ts
CHANGED
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
import { app, Component } from './apprun-html';
|
|
2
|
+
|
|
3
|
+
const popup_div = `<div id="play-popup" class="overlay">
|
|
4
|
+
<style id="apprun-play-style">
|
|
5
|
+
.apprun-play .col {
|
|
6
|
+
height: 100%;
|
|
7
|
+
flex: 1;
|
|
8
|
+
}
|
|
9
|
+
.apprun-preview {
|
|
10
|
+
width: 100%
|
|
11
|
+
}
|
|
12
|
+
.apprun-play .editor, .apprun-play .preview {
|
|
13
|
+
display: inline-block;
|
|
14
|
+
width: calc(100% - 20px);
|
|
15
|
+
height: calc(100% - 10px);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
a.button {
|
|
19
|
+
font-size: .8em;
|
|
20
|
+
padding: 10px;
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
color: var(--md-primary-bg-color);
|
|
23
|
+
background: var(--md-primary-fg-color)
|
|
24
|
+
}
|
|
25
|
+
a.button:hover {
|
|
26
|
+
color: var(--md-primary-fg-color);
|
|
27
|
+
background: var(--md-primary-bg-color)
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.overlay {
|
|
31
|
+
position: fixed;
|
|
32
|
+
top: 0;
|
|
33
|
+
bottom: 0;
|
|
34
|
+
left: 0;
|
|
35
|
+
right: 0;
|
|
36
|
+
background: rgba(0, 0, 0, 0.7);
|
|
37
|
+
visibility: hidden;
|
|
38
|
+
opacity: 0;
|
|
39
|
+
z-index: 999;
|
|
40
|
+
}
|
|
41
|
+
.overlay.show {
|
|
42
|
+
visibility: visible;
|
|
43
|
+
opacity: 1;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.popup {
|
|
47
|
+
margin: 80px auto;
|
|
48
|
+
padding: 20px;
|
|
49
|
+
background: #fff;
|
|
50
|
+
border-radius: 3px;
|
|
51
|
+
position: relative;
|
|
52
|
+
width: 90%;
|
|
53
|
+
height: calc(100% - 150px);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.popup .close {
|
|
57
|
+
position: absolute;
|
|
58
|
+
top: 10px;
|
|
59
|
+
right: 20px;
|
|
60
|
+
font-size: 20px;
|
|
61
|
+
font-weight: bold;
|
|
62
|
+
text-decoration: none;
|
|
63
|
+
color: #333;
|
|
64
|
+
}
|
|
65
|
+
.popup .close:hover {
|
|
66
|
+
color: #06D85F;
|
|
67
|
+
}
|
|
68
|
+
.popup .content {
|
|
69
|
+
height: 100%;
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
display: flex;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.cm-s-default {
|
|
75
|
+
height: 100%;
|
|
76
|
+
font-size: small;
|
|
77
|
+
line-height: 1.5em;
|
|
78
|
+
z-index: 0;
|
|
79
|
+
}
|
|
80
|
+
</style>
|
|
81
|
+
|
|
82
|
+
<div class="popup apprun-play">
|
|
83
|
+
<a class="close" href="javascript:app.run('@close-popup')">×</a>
|
|
84
|
+
<div class="content">
|
|
85
|
+
<div class="col">
|
|
86
|
+
<textarea class="editor"></textarea>
|
|
87
|
+
</div>
|
|
88
|
+
<div class="col">
|
|
89
|
+
<iframe class="preview"/>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</div>`;
|
|
94
|
+
|
|
95
|
+
const code_html = code => `<!DOCTYPE html>
|
|
96
|
+
<html lang="en">
|
|
97
|
+
<head>
|
|
98
|
+
<meta charset="UTF-8">
|
|
99
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
100
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
101
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.1.2/custom-elements.min.js"></script>
|
|
102
|
+
<title>AppRun Playground</title>
|
|
103
|
+
<style>
|
|
104
|
+
body {
|
|
105
|
+
font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
|
|
106
|
+
margin: 2em;
|
|
107
|
+
}
|
|
108
|
+
</style>
|
|
109
|
+
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
|
110
|
+
<script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
|
|
111
|
+
</head>
|
|
112
|
+
<body>
|
|
113
|
+
<script>
|
|
114
|
+
Babel.registerPlugin("d", [Babel.availablePlugins["proposal-decorators"], {legacy: true}]);
|
|
115
|
+
Babel.registerPlugin("c", [Babel.availablePlugins["proposal-class-properties"], {loose: true}]);
|
|
116
|
+
Babel.registerPlugin("b", [Babel.availablePlugins["proposal-private-methods"], {loose: true}]);
|
|
117
|
+
</script>
|
|
118
|
+
<script type="text/babel" data-plugins="d, c, b">
|
|
119
|
+
${code}
|
|
120
|
+
</script>
|
|
121
|
+
</body>
|
|
122
|
+
</html>`;
|
|
123
|
+
|
|
124
|
+
declare var CodeMirror;
|
|
125
|
+
|
|
126
|
+
const setup_editor = (textarea, iframe, code, hide_src) => {
|
|
127
|
+
|
|
128
|
+
if (!iframe || !code) return;
|
|
129
|
+
|
|
130
|
+
const run_code = code => {
|
|
131
|
+
const iframe_clone = iframe.cloneNode();
|
|
132
|
+
iframe.parentNode?.replaceChild(iframe_clone, iframe);
|
|
133
|
+
iframe = iframe_clone;
|
|
134
|
+
const doc = iframe.contentWindow?.document;
|
|
135
|
+
if (!doc) return;
|
|
136
|
+
doc.open();
|
|
137
|
+
if (code.indexOf('<html') >= 0)
|
|
138
|
+
doc.write(code);
|
|
139
|
+
else
|
|
140
|
+
doc.write(code_html(code));
|
|
141
|
+
doc.close();
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
run_code(code);
|
|
145
|
+
|
|
146
|
+
if (hide_src || !textarea || textarea.nodeName !== 'TEXTAREA') return;
|
|
147
|
+
if (typeof CodeMirror === 'undefined') {
|
|
148
|
+
textarea.onkeyup = () => run_code(textarea.value);
|
|
149
|
+
} else {
|
|
150
|
+
if (!textarea.editor) {
|
|
151
|
+
textarea.editor = CodeMirror.fromTextArea(textarea, {
|
|
152
|
+
lineNumbers: true,
|
|
153
|
+
mode: 'jsx'
|
|
154
|
+
});
|
|
155
|
+
textarea.editor.on('change', (cm) => run_code(cm.getValue()));
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
class Play extends Component {
|
|
161
|
+
view = (state) => {
|
|
162
|
+
const code_element = state['code-element'];
|
|
163
|
+
const element = this.element;
|
|
164
|
+
let code_area, code;
|
|
165
|
+
if (code_element) {
|
|
166
|
+
code_area = document.querySelector(code_element);
|
|
167
|
+
} else {
|
|
168
|
+
code_area = element.previousElementSibling ||
|
|
169
|
+
element.parentElement.previousElementSibling;
|
|
170
|
+
}
|
|
171
|
+
code = code_area?.innerText // from div-code
|
|
172
|
+
|| code_area?.value // from textarea
|
|
173
|
+
|| state['code']; // from code attr
|
|
174
|
+
|
|
175
|
+
this.state.code_area = code_area;
|
|
176
|
+
this.state.code = code;
|
|
177
|
+
|
|
178
|
+
return code ? `<div class="toolbox">
|
|
179
|
+
${!state.hide_button && '<a class="button" onclick="app.run("@show-popup")" >Try the Code</a>'}
|
|
180
|
+
</div>`
|
|
181
|
+
: '<div>AppRun Play cannot find code to run, please set code-element selector.</div>'
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
rendered = ({ style, hide_src, code_area, code }) => {
|
|
185
|
+
if (!code) return;
|
|
186
|
+
if (!document.getElementById('play-popup')) {
|
|
187
|
+
document.body.insertAdjacentHTML('beforeend', popup_div);
|
|
188
|
+
const textarea = document.querySelector(".apprun-play .editor") as any;
|
|
189
|
+
const iframe = document.querySelector('.apprun-play .preview');
|
|
190
|
+
textarea.value = code;
|
|
191
|
+
setup_editor(textarea, iframe, code, false);
|
|
192
|
+
}
|
|
193
|
+
const iframe = document.createElement('iframe');
|
|
194
|
+
iframe.classList.add('apprun-preview');
|
|
195
|
+
iframe.style.cssText = style;
|
|
196
|
+
this.element.before(iframe);
|
|
197
|
+
if (hide_src) code_area.style.display = 'none';
|
|
198
|
+
setup_editor(code_area, iframe, code, hide_src);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
update = {
|
|
202
|
+
'@show-popup': ({ code }) => {
|
|
203
|
+
const textarea = document.querySelector(".apprun-play .editor") as any;
|
|
204
|
+
textarea.editor?.setValue(code);
|
|
205
|
+
document.getElementById('play-popup').classList.add('show');
|
|
206
|
+
},
|
|
207
|
+
'@close-popup': () => { document.getElementById('play-popup').classList.remove('show') },
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
app.webComponent('apprun-play', Play);
|
|
212
|
+
|
package/src/apprun-play.tsx
CHANGED
|
@@ -3,9 +3,8 @@ import { app, Component } from './apprun';
|
|
|
3
3
|
const popup_div = `<div id="play-popup" class="overlay">
|
|
4
4
|
<style id="apprun-play-style">
|
|
5
5
|
.apprun-play .col {
|
|
6
|
-
display: inline-block;
|
|
7
|
-
width: calc(50% - 3px);
|
|
8
6
|
height: 100%;
|
|
7
|
+
flex: 1;
|
|
9
8
|
}
|
|
10
9
|
.apprun-preview {
|
|
11
10
|
width: 100%
|
|
@@ -69,6 +68,7 @@ a.button:hover {
|
|
|
69
68
|
.popup .content {
|
|
70
69
|
height: 100%;
|
|
71
70
|
overflow: hidden;
|
|
71
|
+
display: flex;
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
.cm-s-default {
|
package/src/apprun.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import app from './app';
|
|
2
|
-
import { createElement, render, Fragment,safeHTML } from './vdom';
|
|
1
|
+
import app, { App } from './app';
|
|
2
|
+
import { createElement, render, Fragment, safeHTML } from './vdom';
|
|
3
3
|
import { Component } from './component';
|
|
4
4
|
import { VNode, View, Action, Update, EventOptions, ActionOptions, MountOptions, AppStartOptions } from './types';
|
|
5
5
|
import { on, update, customElement } from './decorator';
|
|
@@ -12,6 +12,7 @@ export interface IApp {
|
|
|
12
12
|
on(name: string, fn: (...args: any[]) => void, options?: any): void;
|
|
13
13
|
off(name: string, fn: (...args: any[]) => void): void;
|
|
14
14
|
run(name: string, ...args: any[]): number;
|
|
15
|
+
find(name: string): any | any[];
|
|
15
16
|
h(tag: string | Function, props, ...children): VNode | VNode[];
|
|
16
17
|
createElement(tag: string | Function, props, ...children): VNode | VNode[];
|
|
17
18
|
render(element: Element | string, node: VNode): void;
|
|
@@ -48,12 +49,12 @@ if (typeof document === 'object') {
|
|
|
48
49
|
document.addEventListener("DOMContentLoaded", () => {
|
|
49
50
|
if (app['route'] === route) {
|
|
50
51
|
window.onpopstate = () => route(location.hash);
|
|
51
|
-
if (!document.body.hasAttribute('apprun-no-init')) route(location.hash);
|
|
52
|
+
if (!document.body.hasAttribute('apprun-no-init') || !app['no-init-route']) route(location.hash);
|
|
52
53
|
}
|
|
53
54
|
});
|
|
54
55
|
}
|
|
55
56
|
export type StatelessComponent<T = {}> = (args: T) => string | VNode | void;
|
|
56
|
-
export { app, Component, View, Action, Update, on, update, EventOptions, ActionOptions, MountOptions, Fragment, safeHTML }
|
|
57
|
+
export { App, app, Component, View, Action, Update, on, update, EventOptions, ActionOptions, MountOptions, Fragment, safeHTML }
|
|
57
58
|
export { update as event };
|
|
58
59
|
export { ROUTER_EVENT, ROUTER_404_EVENT };
|
|
59
60
|
export { customElement, CustomElementOptions, AppStartOptions };
|
|
@@ -61,6 +62,7 @@ export default app as IApp;
|
|
|
61
62
|
|
|
62
63
|
if (typeof window === 'object') {
|
|
63
64
|
window['Component'] = Component;
|
|
65
|
+
window['_React'] = window['React'];
|
|
64
66
|
window['React'] = app;
|
|
65
67
|
window['on'] = on;
|
|
66
68
|
window['customElement'] = customElement;
|
package/src/component.ts
CHANGED
|
@@ -5,7 +5,7 @@ import { View, Update, ActionDef, ActionOptions, MountOptions } from './types';
|
|
|
5
5
|
import directive from './directive';
|
|
6
6
|
|
|
7
7
|
const componentCache = new Map();
|
|
8
|
-
app.on('get-components', o => o.components = componentCache);
|
|
8
|
+
if (!app.find('get-components')) app.on('get-components', o => o.components = componentCache);
|
|
9
9
|
|
|
10
10
|
const REFRESH = state => state;
|
|
11
11
|
|
|
@@ -78,14 +78,10 @@ export class Component<T = any, E = any> {
|
|
|
78
78
|
if (state instanceof Promise) {
|
|
79
79
|
// Promise will not be saved or rendered
|
|
80
80
|
// state will be saved and rendered when promise is resolved
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
}).catch(err => {
|
|
85
|
-
console.error(err);
|
|
86
|
-
throw err;
|
|
81
|
+
Promise.resolve(state).then(v => {
|
|
82
|
+
this.setState(v, options);
|
|
83
|
+
this._state = state;
|
|
87
84
|
});
|
|
88
|
-
this._state = state;
|
|
89
85
|
} else {
|
|
90
86
|
this._state = state;
|
|
91
87
|
if (state == null) return;
|
|
@@ -150,14 +146,12 @@ export class Component<T = any, E = any> {
|
|
|
150
146
|
this.add_actions();
|
|
151
147
|
this.state = this.state ?? this['model'] ?? {};
|
|
152
148
|
if (typeof this.state === 'function') this.state = this.state();
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
this.setState(this.state, { render: false, history: true });
|
|
157
|
-
}
|
|
149
|
+
|
|
150
|
+
this.setState(this.state, { render: !!options.render, history: true });
|
|
151
|
+
|
|
158
152
|
if (app['debug']) {
|
|
159
153
|
if (componentCache.get(element)) { componentCache.get(element).push(this) }
|
|
160
|
-
else { componentCache.set(element, [this])}
|
|
154
|
+
else { componentCache.set(element, [this]) }
|
|
161
155
|
}
|
|
162
156
|
return this;
|
|
163
157
|
}
|
|
@@ -234,10 +228,17 @@ export class Component<T = any, E = any> {
|
|
|
234
228
|
}
|
|
235
229
|
|
|
236
230
|
public run(event: E, ...args) {
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
231
|
+
if (this.state instanceof Promise) {
|
|
232
|
+
return Promise.resolve(this.state).then(state => {
|
|
233
|
+
this.state = state;
|
|
234
|
+
this.run(event, ...args)
|
|
235
|
+
});
|
|
236
|
+
} else {
|
|
237
|
+
const name = event.toString();
|
|
238
|
+
return this.is_global_event(name) ?
|
|
239
|
+
app.run(name, ...args) :
|
|
240
|
+
this._app.run(name, ...args);
|
|
241
|
+
}
|
|
241
242
|
}
|
|
242
243
|
|
|
243
244
|
public on(event: E, fn: (...args) => void, options?: any) {
|
package/src/web-component.ts
CHANGED
|
@@ -8,7 +8,7 @@ export type CustomElementOptions = {
|
|
|
8
8
|
observedAttributes?: string[];
|
|
9
9
|
};
|
|
10
10
|
|
|
11
|
-
export const customElement = (componentClass, options: CustomElementOptions = {}) => class CustomElement extends
|
|
11
|
+
export const customElement = (componentClass, options: CustomElementOptions = {}) => class CustomElement extends HTMLDivElement {
|
|
12
12
|
private _shadowRoot;
|
|
13
13
|
private _component;
|
|
14
14
|
private _attrMap: (arg0: string) => string;
|
|
@@ -103,5 +103,5 @@ export const customElement = (componentClass, options: CustomElementOptions = {}
|
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
export default (name: string, componentClass, options?: CustomElementOptions) => {
|
|
106
|
-
(typeof customElements !== 'undefined') && customElements.define(name, customElement(componentClass, options))
|
|
106
|
+
(typeof customElements !== 'undefined') && customElements.define(name, customElement(componentClass, options), { extends: 'div' })
|
|
107
107
|
}
|