apprun 3.29.0 → 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.
@@ -1 +1 @@
1
- {"version":3,"file":"web-component.js","sourceRoot":"","sources":["../src/web-component.ts"],"names":[],"mappings":"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"}
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 apprun-no-init>
17
+ <body>
18
18
  <!-- navbar -->
19
19
  <nav class="navbar navbar-default">
20
20
  <div class="container">
package/package.json CHANGED
@@ -1,11 +1,10 @@
1
1
  {
2
2
  "name": "apprun",
3
- "version": "3.29.0",
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
@@ -34,4 +34,12 @@ export default [{
34
34
  sourcemap: true
35
35
  },
36
36
  plugins
37
+ }, {
38
+ input: 'esm/apprun-play-html.js',
39
+ output: {
40
+ file: 'dist/apprun-play-html.esm.js',
41
+ format: 'esm',
42
+ sourcemap: true
43
+ },
44
+ plugins
37
45
  }]
@@ -14,6 +14,7 @@ app.Fragment = Fragment;
14
14
  export default app;
15
15
 
16
16
  if (typeof window === 'object') {
17
+ window['React'] = window['_React'] || app;
17
18
  window['html'] = html;
18
19
  window['svg'] = svg;
19
20
  window['run'] = run;
@@ -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')">&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
+
@@ -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
- 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);
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;
@@ -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 HTMLElement {
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
  }