apprun 3.28.3 → 3.28.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.
Files changed (51) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/README.md +21 -8
  3. package/WHATSNEW.md +7 -5
  4. package/apprun-cli.js +93 -29
  5. package/cli-templates/_build.js +27 -0
  6. package/cli-templates/_eslintrc.js +40 -0
  7. package/cli-templates/index.html +1 -1
  8. package/cli-templates/spa_index.html +1 -1
  9. package/cli-templates/webpack.config.js +3 -2
  10. package/dist/apprun-dev-tools.js +1 -2
  11. package/dist/apprun-dev-tools.js.map +1 -1
  12. package/dist/apprun-html.esm.js +10 -112
  13. package/dist/apprun-html.esm.js.map +1 -1
  14. package/dist/apprun-html.js +1 -1
  15. package/dist/apprun-html.js.LICENSE.txt +2 -24
  16. package/dist/apprun-html.js.map +1 -1
  17. package/dist/apprun-play.js +2 -0
  18. package/dist/apprun-play.js.map +1 -0
  19. package/dist/apprun.esm.js +1 -1
  20. package/dist/apprun.esm.js.map +1 -1
  21. package/dist/apprun.js +1 -1
  22. package/dist/apprun.js.map +1 -1
  23. package/error.log +0 -0
  24. package/esm/app.js +1 -1
  25. package/esm/apprun-dev-tools.js +2 -1
  26. package/esm/apprun-dev-tools.js.map +1 -1
  27. package/esm/apprun-play.js +209 -0
  28. package/esm/apprun-play.js.map +1 -0
  29. package/esm/apprun.js +1 -1
  30. package/esm/apprun.js.map +1 -1
  31. package/esm/component.js +1 -1
  32. package/esm/component.js.map +1 -1
  33. package/esm/vdom-html.js +2 -0
  34. package/esm/vdom-html.js.map +1 -1
  35. package/esm/vdom-lit-html.js +40 -21
  36. package/esm/vdom-lit-html.js.map +1 -1
  37. package/esm/vdom-to-html.js +1 -2
  38. package/esm/vdom-to-html.js.map +1 -1
  39. package/index-apprun-play.html +46 -0
  40. package/index.html +2 -2
  41. package/package.json +18 -16
  42. package/react.js +13 -0
  43. package/src/app.ts +1 -1
  44. package/src/apprun-play.tsx +212 -0
  45. package/src/apprun.ts +1 -1
  46. package/src/component.ts +1 -1
  47. package/src/vdom-html.ts_ +1 -0
  48. package/src/vdom-lit-html.ts +42 -20
  49. package/src/vdom-to-html.tsx +2 -2
  50. package/webpack.config.js +3 -1
  51. package/index-wc.html +0 -36
package/src/vdom-lit-html.ts CHANGED
@@ -1,38 +1,60 @@
1
1
  import { createElement, updateElement, Fragment } from './vdom-my';
2
- import { html, render, TemplateResult, svg, directive, EventPart, parts } from 'lit-html';
3
- import { unsafeHTML } from "lit-html/directives/unsafe-html";
2
+
3
+
4
+ import { render, svg, html, noChange, nothing } from 'lit-html';
5
+ import { directive, Directive, Part, PartInfo, PartType, EventPart } from 'lit-html/directive.js';
6
+ import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
4
7
 
5
8
  function _render(element, vdom, parent?) {
9
+ if (!vdom) return;
6
10
  if (typeof vdom === 'string') {
7
11
  render(html`${unsafeHTML(vdom)}`, element);
8
- } else if (vdom instanceof TemplateResult) {
12
+ } else if ('_$litType$' in vdom) {
13
+ if (!element['_$litPart$']) element.replaceChildren();
9
14
  render(vdom, element);
10
15
  } else {
11
16
  updateElement(element, vdom, parent);
12
- parts.delete(element);
17
+ element['_$litPart$'] = undefined;
13
18
  }
14
19
  }
15
20
 
16
- const run = directive((event, ...args) => (part) => {
17
- if (!(part instanceof EventPart)) {
18
- throw new Error('${run} can only be used in event handlers');
21
+ export class RunDirective extends Directive {
22
+ // State stored in class field
23
+ value: number | undefined;
24
+ constructor(partInfo: PartInfo) {
25
+ super(partInfo);
26
+ // When necessary, validate part in constructor using `part.type`
27
+ if (partInfo.type !== PartType.EVENT) {
28
+ throw new Error('${run} can only be used in event handlers');
29
+ }
19
30
  }
20
- let { element, eventName } = part;
21
- const getComponent = () => {
22
- let component = element['_component'];
23
- while (!component && element) {
24
- element = element.parentElement;
25
- component = element && element['_component'];
31
+ // Optional: override update to perform any direct DOM manipulation
32
+ update(part: Part, params) {
33
+ /* Any imperative updates to DOM/parts would go here */
34
+
35
+ let { element, name } = part as EventPart;
36
+ const getComponent = () => {
37
+ let component = element['_component'];
38
+ while (!component && element) {
39
+ element = element.parentElement;
40
+ component = element && element['_component'];
41
+ }
42
+ console.assert(!!component, 'Component not found.');
43
+ return component;
44
+ }
45
+ const [event, ...args] = params;
46
+ if (typeof event === 'string') {
47
+ element[`on${name}`] = e => getComponent().run(event, ...args, e);
48
+ } else if (typeof event === 'function') {
49
+ element[`on${name}`] = e => getComponent().setState(event(getComponent().state, ...args, e));
26
50
  }
27
- console.assert(!!component, 'Component not found.');
28
- return component;
51
+ return this.render();
29
52
  }
30
- if (typeof event === 'string') {
31
- element[`on${eventName}`] = e => getComponent().run(event, ...args, e);
32
- } else if (typeof event === 'function') {
33
- element[`on${eventName}`] = e => getComponent().setState(event(getComponent().state, ...args, e));
53
+ render() {
54
+ return noChange;
34
55
  }
35
- });
56
+ }
36
57
 
58
+ const run = directive(RunDirective) as any;
37
59
  export { createElement, Fragment, html, svg, _render as render, run };
38
60
 
package/src/vdom-to-html.tsx CHANGED
@@ -29,9 +29,9 @@ function clean(obj) {
29
29
  }
30
30
  }
31
31
 
32
- function toHTML (vdom: VDOM) {
32
+ function toHTML (vdom) {
33
33
  if (!vdom) return '';
34
- if (vdom instanceof TemplateResult) {
34
+ if ('_$litType$' in vdom) {
35
35
  return vdom.toString();
36
36
  }
37
37
  clean(vdom);
package/webpack.config.js 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-play': './src/apprun-play.tsx',
6
7
  'dist/apprun-html': './src/apprun-html.ts',
7
8
  'dist/apprun-dev-tools': './src/apprun-dev-tools.tsx',
8
9
  'demo/app': './demo/main.ts'
@@ -23,7 +24,8 @@ module.exports = {
23
24
  ]
24
25
  },
25
26
  devServer: {
26
- open: true
27
+ open: true,
28
+ static: path.join(__dirname),
27
29
  },
28
30
  devtool: 'source-map'
29
31
  }
package/index-wc.html DELETED
@@ -1,36 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <title>Counter web component</title>
6
- <style>
7
- body {
8
- font-family: Lato;
9
- }
10
- </style>
11
- </head>
12
- <body>
13
- <h1>AppRun component as the web component. </h1>
14
- <my-app id="counter"></my-app>
15
- <script src="https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.1.2/custom-elements.min.js"></script>
16
- <script src="dist/apprun-html.js"></script>
17
- <script>
18
- class Counter extends Component {
19
- constructor() {
20
- super();
21
- this.state = 0;
22
- this.view = state => `<div>
23
- <h1>${state}</h1>
24
- <button onclick='counter.run("-1")'>-1</button>
25
- <button onclick='counter.run("+1")'>+1</button>
26
- </div>`;
27
- this.update = {
28
- '+1': state => state + 1,
29
- '-1': state => state - 1
30
- };
31
- }
32
- }
33
- app.webComponent('my-app', Counter, {shadow: true});
34
- </script>
35
- </body>
36
- </html>