@webqit/oohtml 3.1.8 → 3.1.9

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 (32) hide show
  1. package/README.md +132 -32
  2. package/dist/bindings-api.js +1 -1
  3. package/dist/bindings-api.js.map +3 -3
  4. package/dist/context-api.js +1 -1
  5. package/dist/context-api.js.map +3 -3
  6. package/dist/data-binding.js +4 -4
  7. package/dist/data-binding.js.map +3 -3
  8. package/dist/html-imports.js +1 -1
  9. package/dist/html-imports.js.map +3 -3
  10. package/dist/main.js +13 -13
  11. package/dist/main.js.map +3 -3
  12. package/dist/main.lite.js +12 -12
  13. package/dist/main.lite.js.map +3 -3
  14. package/dist/namespaced-html.js +1 -1
  15. package/dist/namespaced-html.js.map +3 -3
  16. package/dist/scoped-css.js +3 -3
  17. package/dist/scoped-css.js.map +3 -3
  18. package/dist/scoped-js.js +1 -1
  19. package/dist/scoped-js.js.map +3 -3
  20. package/package.json +2 -2
  21. package/src/bindings-api/index.js +4 -4
  22. package/src/data-binding/index.js +3 -5
  23. package/src/html-imports/HTMLImportsContext.js +3 -3
  24. package/src/html-imports/HTMLModule.js +20 -20
  25. package/src/html-imports/_HTMLImportElement.js +10 -10
  26. package/src/html-imports/index.js +26 -27
  27. package/src/namespaced-html/index.js +15 -17
  28. package/src/util.js +22 -4
  29. package/test/imports.test.js +31 -31
  30. package/test/index.js +5 -0
  31. package/test/modules.test.js +33 -33
  32. package/test/namespace-api.test.js +1 -2
package/test/index.js CHANGED
@@ -17,11 +17,16 @@ export function delay( duration, callback = undefined ) {
17
17
  }
18
18
 
19
19
  export function createDocument( head = '', body = '', callback = null, ) {
20
+ return createDocumentPrefixed( '', ...arguments );
21
+ }
22
+
23
+ export function createDocumentPrefixed( prefix, head = '', body = '', callback = null, ) {
20
24
  const skeletonDoc = `
21
25
  <!DOCTYPE html>
22
26
  <html>
23
27
  <head>
24
28
  <meta name="$q-compiler-url" content="../quantum-js/dist/compiler.js">
29
+ ${ prefix ? `<meta name="webqit" content="prefix=${ prefix };">` : `` }
25
30
  <script ssr src="/dist/main.lite.js"></script>
26
31
  ${ head }
27
32
  </head>
package/test/modules.test.js CHANGED
@@ -4,13 +4,13 @@
4
4
  */
5
5
  import { expect } from 'chai';
6
6
  import { createDocument, mockRemoteFetch, delay } from './index.js';
7
- const getQueryPath = str => str.split( '/' ).join( '/exports/' ).split( '/' );
7
+ const getQueryPath = str => str.split( '/' ).join( '/defs/' ).split( '/' );
8
8
 
9
9
  describe(`HTML Modules`, function() {
10
10
 
11
11
  describe( `APIs...`, function() {
12
12
 
13
- it ( `The document object and <template> elements should expose a "exports" property...`, async function() {
13
+ it ( `The document object and <template> elements should expose a "defs" property...`, async function() {
14
14
 
15
15
  const head = `
16
16
  <template def="temp0">
@@ -27,18 +27,18 @@ describe(`HTML Modules`, function() {
27
27
  // -------
28
28
  expect( document ).to.have.property( 'import' );
29
29
  document.import( 'temp0', temp0 => {
30
- expect( temp0 ).to.have.property( 'exports' );
30
+ expect( temp0 ).to.have.property( 'defs' );
31
31
  expect( temp0.def ).to.eq( 'temp0' );
32
32
  } );
33
33
  // -------
34
34
  expect( document.body ).to.have.property( 'import' );
35
35
  document.body.import( 'temp1', temp1 => {
36
- expect( temp1 ).to.have.property( 'exports' );
36
+ expect( temp1 ).to.have.property( 'defs' );
37
37
  expect( temp1.def ).to.eq( 'temp1' );
38
38
  } );
39
39
  } );
40
40
 
41
- it ( `The document object and <template> elements should expose a "exports" property...`, async function() {
41
+ it ( `The document object and <template> elements should expose a "defs" property...`, async function() {
42
42
 
43
43
  const body = '', head = `
44
44
  <template def="temp0">
@@ -55,16 +55,16 @@ describe(`HTML Modules`, function() {
55
55
  const { webqit: { Observer } } = window;
56
56
  // -------
57
57
  document.import( 'temp0', temp0 => {
58
- expect( temp0 ).to.have.property( 'exports' );
59
- expect( temp0.exports[ '#' ] ).to.have.length( 2 );
60
- const temp2 = Observer.reduce( temp0.exports, getQueryPath( 'temp2' ), Observer.get );
61
- expect( temp2 ).to.have.property( 'exports' );
58
+ expect( temp0 ).to.have.property( 'defs' );
59
+ expect( temp0.defs[ '#' ] ).to.have.length( 2 );
60
+ const temp2 = Observer.reduce( temp0.defs, getQueryPath( 'temp2' ), Observer.get );
61
+ expect( temp2 ).to.have.property( 'defs' );
62
62
  // -------
63
- const temp1Inherited = Observer.reduce( temp0.exports, getQueryPath( 'temp2/temp1' ), Observer.get );
64
- expect( temp1Inherited ).to.have.property( 'exports' );
63
+ const temp1Inherited = Observer.reduce( temp0.defs, getQueryPath( 'temp2/temp1' ), Observer.get );
64
+ expect( temp1Inherited ).to.have.property( 'defs' );
65
65
  // -------
66
66
  const temp3Observed = [];
67
- Observer.reduce( temp0.exports, getQueryPath( 'temp2/temp3' ), Observer.observe, record => {
67
+ Observer.reduce( temp0.defs, getQueryPath( 'temp2/temp3' ), Observer.observe, record => {
68
68
  temp3Observed.push( record.value );
69
69
  } );
70
70
  // -------
@@ -73,10 +73,10 @@ describe(`HTML Modules`, function() {
73
73
  temp0.content.appendChild( temp3 );
74
74
  // -------
75
75
  expect( temp3Observed ).to.be.an( 'array' ).with.length( 1 );
76
- expect( temp3Observed[ 0 ] ).to.have.property( 'exports' );
76
+ expect( temp3Observed[ 0 ] ).to.have.property( 'defs' );
77
77
  // -------
78
- const temp3Inherited = Observer.reduce( temp0.exports, getQueryPath( 'temp2/temp3' ), Observer.get );
79
- expect( temp3Inherited ).to.have.property( 'exports' );
78
+ const temp3Inherited = Observer.reduce( temp0.defs, getQueryPath( 'temp2/temp3' ), Observer.get );
79
+ expect( temp3Inherited ).to.have.property( 'defs' );
80
80
  // -------
81
81
  } );
82
82
  } );
@@ -114,25 +114,25 @@ describe(`HTML Modules`, function() {
114
114
  // -------
115
115
  // Add the import element to with a view to waiting for the remote module
116
116
  document.import( 'temp0', async temp0 => {
117
- expect( temp0 ).to.have.property( 'exports' );
117
+ expect( temp0 ).to.have.property( 'defs' );
118
118
  await delay( 2100 );
119
119
  // temp1 shouldn't have been automatically loaded still
120
- const hasTemp1 = Observer.reduce( temp0.exports, getQueryPath( 'temp1' ), Observer.has );
120
+ const hasTemp1 = Observer.reduce( temp0.defs, getQueryPath( 'temp1' ), Observer.has );
121
121
  expect( hasTemp1 ).to.be.false;
122
122
  // Try access temp1 to trigger loading and await
123
- const _temp1 = await Observer.reduce( temp0.exports, getQueryPath( 'temp1' ), Observer.get );
124
- expect( _temp1 ).to.have.property( 'exports' );
123
+ const _temp1 = await Observer.reduce( temp0.defs, getQueryPath( 'temp1' ), Observer.get );
124
+ expect( _temp1 ).to.have.property( 'defs' );
125
125
  // -------
126
126
  // Receive updates
127
127
  const temp3Observed = [];
128
- Observer.reduce( temp0.exports, getQueryPath( 'temp1/temp2/temp3' ), Observer.observe, ( record, lifecycle ) => {
128
+ Observer.reduce( temp0.defs, getQueryPath( 'temp1/temp2/temp3' ), Observer.observe, ( record, lifecycle ) => {
129
129
  temp3Observed.push( record.value );
130
130
  } );
131
131
  await delay( 2100 );
132
132
  // -------
133
133
  // temp2 should be loaded by now
134
134
  expect( temp3Observed ).to.be.an( 'array' ).with.length( 1 );
135
- expect( temp3Observed[ 0 ] ).to.have.property( 'exports' );
135
+ expect( temp3Observed[ 0 ] ).to.have.property( 'defs' );
136
136
  expect( temp3Observed[ 0 ].getAttribute( 'def' ) ).to.eq( 'temp3' );
137
137
  } );
138
138
  } );
@@ -171,33 +171,33 @@ describe(`HTML Modules`, function() {
171
171
  return el.dispatchEvent( event );
172
172
  };
173
173
  // -------
174
- await 'For some reason, the <template> element in the head needs to show up in the document exportsObj';
175
- const exportsObjs = [], div = document.querySelector( 'div' );
174
+ await 'For some reason, the <template> element in the head needs to show up in the document defsObj';
175
+ const defsObjs = [], div = document.querySelector( 'div' );
176
176
  // -------
177
177
  contextRequest( div, { detail: '/temp0', diff: false }, response => {
178
- exportsObjs.push( response );
178
+ defsObjs.push( response );
179
179
  } );
180
- expect( exportsObjs ).to.have.length( 1 );
181
- expect( exportsObjs[ 0 ] ).to.have.property( 'scoped', false );
180
+ expect( defsObjs ).to.have.length( 1 );
181
+ expect( defsObjs[ 0 ] ).to.have.property( 'scoped', false );
182
182
  // -------
183
183
  const scoped = addScopedModules();
184
- expect( exportsObjs ).to.have.length( 2 );
185
- expect( exportsObjs[ 1 ] ).to.have.property( 'scoped', true );
184
+ expect( defsObjs ).to.have.length( 2 );
185
+ expect( defsObjs[ 1 ] ).to.have.property( 'scoped', true );
186
186
  // -------
187
187
  scoped.remove();
188
- expect( exportsObjs ).to.have.length( 3 );
189
- expect( exportsObjs[ 2 ] ).to.have.property( 'scoped', false );
188
+ expect( defsObjs ).to.have.length( 3 );
189
+ expect( defsObjs[ 2 ] ).to.have.property( 'scoped', false );
190
190
  // -------
191
191
  document.body.appendChild( scoped );
192
- expect( exportsObjs ).to.have.length( 4 );
193
- expect( exportsObjs[ 3 ] ).to.have.property( 'scoped', true );
192
+ expect( defsObjs ).to.have.length( 4 );
193
+ expect( defsObjs[ 3 ] ).to.have.property( 'scoped', true );
194
194
  // -------
195
195
  document.import( 'temp0', temp0 => {
196
196
  const unscoped = temp0;
197
197
  unscoped.remove();
198
198
  document.head.appendChild( unscoped );
199
199
  document.body.remove();
200
- expect( exportsObjs ).to.have.length( 4 );
200
+ expect( defsObjs ).to.have.length( 4 );
201
201
  } );
202
202
  } );
203
203
  } );
package/test/namespace-api.test.js CHANGED
@@ -9,8 +9,7 @@ describe(`Namespaced HTML`, function() {
9
9
 
10
10
  describe( `Basic...`, async function() {
11
11
 
12
- const head = `
13
- <meta name="oohtml" content="attr.id=id" />`;
12
+ const head = ``;
14
13
  const body = `
15
14
  <div id="main" namespace>
16
15
  <div id="child"></div>