apprun 3.29.0 → 3.30.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/CHANGELOG.md +8 -0
- package/README.md +6 -4
- 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 +2 -2
- package/esm/apprun.js.map +1 -1
- package/index.html +1 -1
- 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 +2 -1
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
|
@@ -49,7 +49,7 @@ if (typeof document === 'object') {
|
|
|
49
49
|
document.addEventListener("DOMContentLoaded", () => {
|
|
50
50
|
if (app['route'] === route) {
|
|
51
51
|
window.onpopstate = () => route(location.hash);
|
|
52
|
-
|
|
52
|
+
document.body.hasAttribute('apprun-no-init') || app['no-init-route'] || route(location.hash);
|
|
53
53
|
}
|
|
54
54
|
});
|
|
55
55
|
}
|
|
@@ -62,6 +62,7 @@ export default app as IApp;
|
|
|
62
62
|
|
|
63
63
|
if (typeof window === 'object') {
|
|
64
64
|
window['Component'] = Component;
|
|
65
|
+
window['_React'] = window['React'];
|
|
65
66
|
window['React'] = app;
|
|
66
67
|
window['on'] = on;
|
|
67
68
|
window['customElement'] = customElement;
|