decue 1.0.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.
Files changed (15) hide show
  1. package/.forgejo/workflows/publish.yaml +18 -0
  2. package/LICENSE +21 -0
  3. package/README.md +95 -0
  4. package/dist/decue.js +332 -0
  5. package/dist/decue.min.js +1 -0
  6. package/examples.html +278 -0
  7. package/external.html +3 -0
  8. package/npm.sh +4 -0
  9. package/package.json +25 -0
  10. package/serve.sh +4 -0
  11. package/src/decue.js +332 -0
  12. package/test/decue-tests.js +84 -0
  13. package/test/index.html +65 -0
  14. package/test/util/util.js +17 -0
  15. package/tsconfig.json +16 -0
package/test/decue-tests.js ADDED
@@ -0,0 +1,84 @@
1
+ var assert = chai.assert;
2
+
3
+ describe("decue", function() {
4
+ beforeEach(function () {
5
+ clearWorkArea();
6
+ });
7
+
8
+ ['none', 'open', 'closed'].forEach(shadow => {
9
+ describe("shadowmode: " + shadow, function() {
10
+ it('shadowroot', function () {
11
+ make(`<my-element shadow="${shadow}"></my-element>`)
12
+ if (shadow === 'open') {
13
+ assert.isNotNull(document.querySelector('my-element').shadowRoot);
14
+ } else {
15
+ assert.isNull(document.querySelector('my-element').shadowRoot);
16
+ }
17
+ });
18
+
19
+ it('no-attributes', function () {
20
+ make(`<my-element></my-element>`)
21
+ assert.isDefined(document.querySelector('my-element'));
22
+ });
23
+
24
+ it('unknown attribute placeholder is not replaced', function () {
25
+ make(`<my-element></my-element>`)
26
+ assert.equal('Target: {target}', document.querySelector('my-element span').getAttribute('data-target'));
27
+ });
28
+
29
+ it('attribute placeholder is replaced', function () {
30
+ make(`<my-element target="World"></my-element>`)
31
+ assert.equal('Target: World', document.querySelector('my-element span').getAttribute('data-target'));
32
+ });
33
+
34
+ it('attribute with placeholder and functions updates asynchronously', function (done) {
35
+ make(`<my-element target="World"></my-element>`)
36
+ assert.equal('WORLD', document.querySelector('my-element span').getAttribute('data-method'));
37
+ document.querySelector('my-element').setAttribute('target', 'Universe');
38
+ setTimeout(() => {
39
+ assert.equal('UNIVERSE', document.querySelector('my-element span').getAttribute('data-method'));
40
+ done();
41
+ });
42
+ });
43
+
44
+ it('attribute with functions', function () {
45
+ });
46
+
47
+ it('attribute with method', function () {
48
+ });
49
+
50
+ it('text content placeholder is replaced', function () {
51
+ make(`<my-element target="World"></my-element>`)
52
+ assert.equal('Hello World', document.querySelector('my-element span').innerText);
53
+ });
54
+
55
+ it('text content updates synchronously for predefined elements', function () {
56
+ make(`<my-predefined-element target="World"></my-predefined-element>`)
57
+ assert.equal('Hello World', document.querySelector('my-predefined-element span').innerText);
58
+ document.querySelector('my-predefined-element').setAttribute('target', 'Universe');
59
+ assert.equal('Hello Universe', document.querySelector('my-predefined-element span').innerText);
60
+ });
61
+
62
+ it('named slot with default value', function () {
63
+ });
64
+
65
+ it('named slot with given value', function () {
66
+ });
67
+
68
+ it('default slot with default value', function () {
69
+ });
70
+
71
+ it('default slot with given value', function () {
72
+ });
73
+
74
+ it('multiple named slots', function () {
75
+ });
76
+
77
+ it('multiple default slots', function () {
78
+ });
79
+
80
+ it('some form tests...?', function () {
81
+ });
82
+ });
83
+ });
84
+ });
package/test/index.html ADDED
@@ -0,0 +1,65 @@
1
+ <html lang="en">
2
+ <head>
3
+ <meta charset="utf-8" />
4
+ <title>Mocha Tests</title>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
7
+ <meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
8
+ <meta http-equiv="cache-control" content="max-age=0" />
9
+ <meta http-equiv="expires" content="0" />
10
+ <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
11
+ <meta http-equiv="pragma" content="no-cache" />
12
+ </head>
13
+ <body style="padding:20px;font-family: sans-serif">
14
+
15
+ <h1 style="margin-top: 40px">decue test suite</h1>
16
+
17
+ <h2>Mocha Test Suite</h2>
18
+ <a href="/test/">[ALL]</a>
19
+
20
+ <script src="../node_modules/chai/chai.js"></script>
21
+ <script src="../node_modules/mocha/mocha.js"></script>
22
+ <script class="mocha-init">
23
+ mocha.setup('bdd');
24
+ mocha.checkLeaks();
25
+ </script>
26
+
27
+ <script src="util/util.js"></script>
28
+
29
+ <script>
30
+ function toLower(str) {
31
+ str.toLowerCase();
32
+ }
33
+ </script>
34
+
35
+ <script src="../src/decue.js" elements="my-predefined-element my-predefined-element-with-attributes[target]"></script>
36
+ <script src="decue-tests.js"></script>
37
+
38
+ <div id="mocha"></div>
39
+
40
+ <script class="mocha-exec">
41
+ mocha.run();
42
+ </script>
43
+ <em>Work Area</em>
44
+ <hr/>
45
+ <div id="work-area">
46
+ </div>
47
+
48
+ <template decue="nested-element">
49
+ nested
50
+ </template>
51
+ <template decue="my-element">
52
+ <span data-target="Target: {target}" data-method="{target|.toUpperCase}" data-function="{target|toLower}" data-piped="{target|.toUpperCase|toLower}">Hello {target}</span>
53
+ <slot name="slot1">slot1</slot>
54
+ <slot>default slot</slot>
55
+ <nested-element></nested-element>
56
+ </template>
57
+ <template decue="my-predefined-element">
58
+ <span>Hello {target}</span>
59
+ </template>
60
+ <template decue="my-predefined-element-with-attributes">
61
+ <span>Hello {target}</span>
62
+ </template>
63
+
64
+ </body>
65
+ </html>
package/test/util/util.js ADDED
@@ -0,0 +1,17 @@
1
+
2
+ function make(htmlStr) {
3
+ var range = document.createRange();
4
+ var fragment = range.createContextualFragment(htmlStr);
5
+ var wa = document.getElementById("work-area");
6
+ var child = null;
7
+ var children = fragment.children || fragment.childNodes; // IE
8
+ while(children.length > 0) {
9
+ child = children[0];
10
+ wa.appendChild(child);
11
+ }
12
+ return child;
13
+ }
14
+
15
+ function clearWorkArea() {
16
+ document.getElementById("work-area").innerHTML = "";
17
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,16 @@
1
+ {
2
+ "compilerOptions": {
3
+ "module": "commonjs",
4
+ "allowJs": true,
5
+ "target": "ES2023",
6
+ "noImplicitAny": true,
7
+ "noImplicitReturns": true,
8
+ "noUnusedParameters": true,
9
+ "strictFunctionTypes": true,
10
+ //"strictNullChecks": true
11
+ },
12
+ "exclude": [
13
+ "node_modules",
14
+ "dist"
15
+ ],
16
+ }