apprun 3.33.1 → 3.33.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.
Files changed (24) hide show
  1. package/README.md +23 -13
  2. package/dist/apprun-code.js +2 -0
  3. package/dist/apprun-code.js.map +1 -0
  4. package/dist/apprun-html.esm.js +1 -1
  5. package/dist/apprun-html.esm.js.map +1 -1
  6. package/dist/apprun-html.js +1 -1
  7. package/dist/apprun-html.js.map +1 -1
  8. package/dist/apprun-play-html.esm.js +1 -1
  9. package/dist/apprun-play-html.esm.js.map +1 -1
  10. package/dist/apprun-play.js +1 -1
  11. package/dist/apprun-play.js.map +1 -1
  12. package/dist/apprun.esm.js +1 -1
  13. package/dist/apprun.esm.js.map +1 -1
  14. package/dist/apprun.js +1 -1
  15. package/dist/apprun.js.map +1 -1
  16. package/esm/apprun-code.js +129 -0
  17. package/esm/apprun-code.js.map +1 -0
  18. package/esm/web-component.js +1 -1
  19. package/esm/web-component.js.map +1 -1
  20. package/package.json +1 -1
  21. package/src/apprun-code.tsx +139 -0
  22. package/src/web-component.ts +1 -1
  23. package/webpack.config.cjs +1 -0
  24. package/src/apprun-play-html.tsx +0 -212
package/src/apprun-code.tsx ADDED
@@ -0,0 +1,139 @@
1
+ import { app, Component } from './apprun';
2
+
3
+ declare var CodeMirror;
4
+
5
+ const styles = `
6
+ .CodeMirror, .apprun-play iframe {
7
+ height: 100%;
8
+ border: dotted gray 1px;
9
+ }
10
+
11
+ .apprun-play {
12
+ height: 100%;
13
+ display: flex;
14
+ }
15
+
16
+ .apprun-play .col {
17
+ margin: 2px;
18
+ }
19
+
20
+ .apprun-play .editor, .apprun-play .preview {
21
+ width: 100%;
22
+ height: 100%;
23
+ }
24
+ `;
25
+
26
+ const code_html = code => `<!DOCTYPE html>
27
+ <html lang="en">
28
+ <head>
29
+ <meta charset="UTF-8">
30
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
31
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
32
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.1.2/custom-elements.min.js"></script>
33
+ <title>AppRun Playground</title>
34
+ <style>
35
+ body {
36
+ font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
37
+ margin: 2em;
38
+ }
39
+ </style>
40
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
41
+ <script src="https://unpkg.com/apprun/dist/apprun-html.js"></script>
42
+ </head>
43
+ <body>
44
+ <script>
45
+ Babel.registerPlugin("d", [Babel.availablePlugins["proposal-decorators"], {legacy: true}]);
46
+ Babel.registerPlugin("c", [Babel.availablePlugins["proposal-class-properties"], {loose: true}]);
47
+ Babel.registerPlugin("b", [Babel.availablePlugins["proposal-private-methods"], {loose: true}]);
48
+ </script>
49
+ <script type="text/babel" data-plugins="d, c, b">
50
+ ${code}
51
+ </script>
52
+ </body>
53
+ </html>`;
54
+
55
+
56
+ class Play extends Component {
57
+ view = ({ code, hide_code }) => {
58
+ return <>
59
+ <style>{styles}</style>
60
+ {hide_code ?
61
+ <div class="apprun-play">
62
+ <iframe class="preview" />
63
+ </div>
64
+ :
65
+ <div class="apprun-play">
66
+ <div class="col" style="width:75%" >
67
+ <textarea class="editor">{code}</textarea>
68
+ </div>
69
+ <div class="col" style="flex:1" >
70
+ <iframe class="preview" />
71
+ </div>
72
+ </div>}
73
+ </>;
74
+ }
75
+
76
+ mounted = props => {
77
+ const element = this['element'];
78
+ const code_id = props['code-id'];
79
+ const hide_code = props['hide-code'];
80
+ const code_width = props['code-width'];
81
+
82
+ let code_area;
83
+ if (code_id) {
84
+ code_area = document.getElementById(code_id);
85
+ } else {
86
+ code_area = element.previousElementSibling ||
87
+ element.parentElement.previousElementSibling;
88
+ }
89
+
90
+ const code = code_area?.innerText // from div
91
+ || code_area?.value // from textarea
92
+ || element.textContent // from child node
93
+
94
+ if (code_area) code_area.style.display = 'none';
95
+
96
+ return { code, hide_code, code_width };
97
+ }
98
+
99
+
100
+ rendered = ({ code, hide_code, code_width }) => {
101
+ const element = this['element'];
102
+
103
+ const textarea = element.querySelector(".apprun-play .editor") as any;
104
+ let iframe = element.querySelector('.apprun-play .preview');
105
+ if (!iframe || !textarea) return;
106
+
107
+ const run_code = code => {
108
+ const iframe_clone = iframe.cloneNode();
109
+ iframe.parentNode?.replaceChild(iframe_clone, iframe);
110
+ iframe = iframe_clone;
111
+ const doc = iframe.contentWindow?.document;
112
+ if (!doc) return;
113
+ doc.open();
114
+ if (code.indexOf('<html') >= 0)
115
+ doc.write(code);
116
+ else
117
+ doc.write(code_html(code));
118
+ doc.close();
119
+ }
120
+
121
+ if (code) run_code(code);
122
+ if (hide_code || !textarea) return;
123
+
124
+ if (code_width) textarea.parentElement.style.width = code_width;
125
+
126
+ if (typeof CodeMirror === 'undefined') {
127
+ textarea.onkeyup = () => run_code(textarea.value);
128
+ } else {
129
+ const editor = CodeMirror.fromTextArea(textarea, {
130
+ lineNumbers: true,
131
+ mode: 'jsx'
132
+ });
133
+ editor.setValue(code);
134
+ editor.on('change', (cm) => run_code(cm.getValue()));
135
+ }
136
+ }
137
+ }
138
+
139
+ app.webComponent('apprun-code', Play);
package/src/web-component.ts CHANGED
@@ -61,7 +61,7 @@ export const customElement = (componentClass, options: CustomElementOptions = {}
61
61
 
62
62
  requestAnimationFrame(() => {
63
63
  const children = this.children ? Array.from(this.children) : [];
64
- children.forEach(el => el.parentElement.removeChild(el));
64
+ // children.forEach(el => el.parentElement.removeChild(el));
65
65
  this._component = new componentClass({ ...props, children }).mount(this._shadowRoot, opts);
66
66
  // attach props to component
67
67
  this._component._props = props;
package/webpack.config.cjs CHANGED
@@ -3,6 +3,7 @@ const path = require('path');
3
3
  module.exports = {
4
4
  entry: {
5
5
  'dist/apprun': './src/apprun.ts',
6
+ 'dist/apprun-code': './src/apprun-code.tsx',
6
7
  'dist/apprun-play': './src/apprun-play.tsx',
7
8
  'dist/apprun-html': './src/apprun-html.ts',
8
9
  'dist/apprun-dev-tools': './src/apprun-dev-tools.tsx',
package/src/apprun-play-html.tsx DELETED
@@ -1,212 +0,0 @@
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')">&times;</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
-