@epa-wg/custom-element-dist 0.0.24 → 0.0.26

package/src/custom-element/ide/web-types-xsl.json

@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.24",
+    "version": "0.0.26",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/src/custom-element/index.html

@@ -30,7 +30,9 @@
         <a href="./demo/local-storage.html"     >local-storage      </a> |
         <a href="./demo/http-request.html"      >http-request       </a> |
         <a href="./demo/location-element.html"  >location-element   </a> |
-        <a href="./demo/external-template.html" >external template  </a> <br/>
+        <a href="./demo/set-url.html"           >set-url            </a> |
+        <a href="./demo/external-template.html" >external template  </a> |
+        <a href="./demo/module-url.html"        >importmap          </a> <br/>
         <a href="./demo/hex-grid.html"          >hex grid lib       </a> |
         <a href="./demo/scoped-css.html"        >scoped CSS         </a> |
         <a href="./demo/parameters.html"        >attributes         </a> |

package/src/custom-element/location-element.js

@@ -16,6 +16,15 @@ function ensureTrackLocationChange()
         }
     });
 }
+const methods =
+{   'location.href'         : src => window.location.href = src
+,   'location.hash'         : src => window.location.hash = src
+,   'location.assign'       : src => window.location.assign( src )
+,   'location.replace'      : src => window.location.replace( src )
+,   'history.pushState'     : src => window.history.pushState( {}, "", src )
+,   'history.replaceState'  : src => window.history.replaceState( {}, "", src )
+};
+
 
 export class LocationElement extends HTMLElement
 {
@@ -25,6 +34,8 @@ export class LocationElement extends HTMLElement
             ,   'href'  // url to be parsed. When omitted window.location is used.
             ,   'type' // `text|json`, defaults to text, other types are compatible with INPUT field
             ,   'live' // monitors history change, applicable only when href is omitted.
+            ,   'src' // sets the URL
+            ,   'method' // when defined, changes URL by one of predefined methods.
             ];
 
     constructor()
@@ -53,6 +64,17 @@ export class LocationElement extends HTMLElement
         };
         this.sliceInit = s =>
         {
+            if( this.hasAttribute('method') )
+            {
+                const method = this.getAttribute('method');
+                const src = this.getAttribute('src');
+                if( method && src )
+                    if( method === 'location.hash' )
+                    {   if( src !== window.location.hash )
+                            methods[ method ]?.( src );
+                    }else if( window.location.href !== new URL(src, window.location).href )
+                        methods[method]?.(src);
+            }
             if( !state.listener && this.hasAttribute('live') )
             {   state.listener = 1;
                 window.navigation?.addEventListener("navigate", listener );
@@ -74,8 +96,9 @@ export class LocationElement extends HTMLElement
     }
     attributeChangedCallback(name, oldValue, newValue)
     {
-        if('href'!== name)
-            return;
+        if('href'!== name && 'method' !== name && 'src' )
+            if( !['method','src','href'].includes(name) )
+                return;
         this.sliceInit && this.sliceInit();
     }
 

package/src/custom-element/module-url.js

@@ -0,0 +1,33 @@
+const attr = ( el, attr )=> el.getAttribute( attr );
+
+
+export class ModuleUrl extends HTMLElement
+{
+    static observedAttributes=
+            [   'slice'
+            ,   'src' // module path, relative or absolute URL
+            ];
+
+    sliceInit()
+    {   let path = attr(this,'src');
+        try
+        {   const url =  '.' === path.charAt(0)
+                ? new URL(path, this.closest('[base]')?.getAttribute('base') ).href
+                : import.meta.resolve(path);
+            this.setAttribute('value',this.value = url );
+        }catch( er )
+        {   this.setAttribute('error', er.message);
+            this.setAttribute('value', path);
+            console.error(er.message ?? er, path);
+        }
+        this.dispatchEvent( new Event('change') );
+    }
+    attributeChangedCallback( name, oldValue, newValue )
+    {
+        if( 'src'=== name )
+            this.sliceInit();
+    }
+}
+
+window.customElements.define( 'module-url', ModuleUrl );
+export default ModuleUrl;

package/src/custom-element.test.ts

@@ -1,26 +1,26 @@
-import {expect, test}                  from 'vitest'
-import {deepEqual, xml2dom, xmlString, obj2node } from './custom-element/custom-element.js'
-
-test('deepEqual', () =>
-{
-    expect(deepEqual(1, 1)).toBe(true);
-    expect(deepEqual({}, null)).toBe(false);
-    expect(deepEqual({a: 1}, {a: 1, b: 2})).toBe(false);
-    expect(deepEqual({a: 1}, {a: 2})).toBe(false);
-    expect(deepEqual({a: 1}, {a: 1})).toBe(true);
-})
-test('xml2dom', () =>
-{
-    const dom = xml2dom('<a/>');
-    expect(dom.documentElement.localName).to.equal('a');
-    expect(dom.documentElement.childNodes.length).to.equal(0);
-    const xStr = xmlString(dom);
-    expect(xStr).to.include('<a');
-})
-test('obj2node', () =>
-{
-    expect(obj2node(()=>{}      , 'f',document).outerHTML).to.equal('<f></f>'       );
-    expect(obj2node(9           , 'a',document).outerHTML).to.equal('<a>9</a>'      );
-    expect(obj2node('abc'       , 's',document).outerHTML).to.equal('<s>abc</s>'    );
-    expect(obj2node({a:1,b:{c:'abc'}}       , 's',document).outerHTML).to.equal('<s a="1"><b c="abc"></b></s>');
-})
+import {expect, test}                  from 'vitest'
+import {deepEqual, xml2dom, xmlString, obj2node } from './custom-element/custom-element.js'
+
+test('deepEqual', () =>
+{
+    expect(deepEqual(1, 1)).toBe(true);
+    expect(deepEqual({}, null)).toBe(false);
+    expect(deepEqual({a: 1}, {a: 1, b: 2})).toBe(false);
+    expect(deepEqual({a: 1}, {a: 2})).toBe(false);
+    expect(deepEqual({a: 1}, {a: 1})).toBe(true);
+})
+test('xml2dom', () =>
+{
+    const dom = xml2dom('<a/>');
+    expect(dom.documentElement.localName).to.equal('a');
+    expect(dom.documentElement.childNodes.length).to.equal(0);
+    const xStr = xmlString(dom);
+    expect(xStr).to.include('<a');
+})
+test('obj2node', () =>
+{
+    expect(obj2node(()=>{}      , 'f',document).outerHTML).to.equal('<f></f>'       );
+    expect(obj2node(9           , 'a',document).outerHTML).to.equal('<a>9</a>'      );
+    expect(obj2node('abc'       , 's',document).outerHTML).to.equal('<s>abc</s>'    );
+    expect(obj2node({a:1,b:{c:'abc'}}       , 's',document).outerHTML).to.equal('<s a="1"><b c="abc"></b></s>');
+})

package/src/mocks/handlers.ts

@@ -1,6 +1,7 @@
 import {delay, http, HttpResponse} from 'msw'
 
 import pokemonsMock from './pokemons.mock.ts';
+import versions from './versions.mock.ts';
 
 export const handlers =
 [   http.get('/pokemon', ({ request }) =>
@@ -25,5 +26,13 @@ export const handlers =
     })
 ,   http.get('/404', () =>
     {
-        return new HttpResponse(null, {status: 404, statusText: 'not found'})   })
+        return new HttpResponse(null, {status: 404, statusText: 'not found'})
+    })
+,
 ];
+// only for local
+if( !window.location.pathname.startsWith('@epa-wg/custom-element-dist'))
+    handlers.push(http.get('https://registry.npmjs.org/@epa-wg/custom-element-dist', async () =>
+    {
+        return HttpResponse.json(versions);
+    }))