Skip to content

Commit

Permalink
Merge pull request #8 from EPA-WG/develop
Browse files Browse the repository at this point in the history
0.0.28
  • Loading branch information
sashafirsov authored Nov 7, 2024
2 parents ee44da1 + 89573f3 commit 4192859
Show file tree
Hide file tree
Showing 32 changed files with 2,905 additions and 1,841 deletions.
4 changes: 2 additions & 2 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ const config: StorybookConfig = {
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
// "@chromatic-com/storybook",
// "@chromatic-com/storybook", // breaks SB UI
'@storybook/addon-interactions',
// "@storybook/addon-mdx-gfm"
// "@storybook/addon-mdx-gfm" // not used
],
framework: {
name: "@storybook/web-components-vite",
Expand Down
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ CDN version of StoryBook.
[github-image]: https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
[npm-image]: https://img.shields.io/npm/v/@epa-wg/custom-element-dist.svg
[npm-url]: https://npmjs.org/package/@epa-wg/custom-element-dist
[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.27/coverage/src/custom-element/coverage.svg
[coverage-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.27/coverage/src/custom-element/index.html
[sb-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.27/storybook-static/index.html
[bundle-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.27/dist/custom-element-bundle.js
[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.28/coverage/src/custom-element/coverage.svg
[coverage-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.28/coverage/src/custom-element/index.html
[sb-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.28/storybook-static/index.html
[bundle-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.28/dist/custom-element-bundle.js
26 changes: 13 additions & 13 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@epa-wg/custom-element-dist",
"version": "0.0.27",
"version": "0.0.28",
"type": "module",
"scripts": {
"dev": "vite",
Expand All @@ -19,29 +19,29 @@
"tf": "node ./node_modules/vitest/vitest.mjs --no-file-parallelism --browser.name=firefox --watch --browser.headless=false src/stories/module-url.test.stories.ts"
},
"dependencies": {
"@epa-wg/custom-element": "0.0.27"
"@epa-wg/custom-element": "0.0.28"
},
"devDependencies": {
"@chromatic-com/storybook": "2.0.0",
"@storybook/addon-essentials": "8.2.9",
"@storybook/addon-interactions": "8.2.9",
"@storybook/addon-links": "8.2.9",
"@storybook/addon-mdx-gfm": "8.2.9",
"@storybook/blocks": "8.2.9",
"@storybook/test": "8.2.9",
"@chromatic-com/storybook": "2.0.2",
"@storybook/addon-essentials": "8.3.3",
"@storybook/addon-interactions": "8.3.3",
"@storybook/addon-links": "8.3.3",
"@storybook/addon-mdx-gfm": "8.3.3",
"@storybook/blocks": "8.3.3",
"@storybook/test": "8.3.3",
"@storybook/test-runner": "0.19.1",
"@storybook/web-components": "8.2.9",
"@storybook/web-components-vite": "8.2.9",
"@storybook/web-components": "8.3.3",
"@storybook/web-components-vite": "8.3.3",
"@vitest/browser": "2.0.5",
"@vitest/coverage-istanbul": "2.0.5",
"coverage-svg": "0.0.3",
"lit": "3.2.0",
"msw": "2.4.5",
"msw-storybook-addon": "2.0.3",
"playwright": "1.47.0",
"storybook": "8.2.9",
"storybook": "8.3.3",
"typescript": "5.6.2",
"vite": "5.4.3",
"vite": "5.4.8",
"vitest": "2.0.5",
"webdriverio": "9.0.9"
},
Expand Down
81 changes: 61 additions & 20 deletions src/custom-element/custom-element.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,12 @@ assureSlot( e )
}
return e;
}
function
keepAttributes(e, aNames)
{ e.getAttributeNames().forEach( n=> aNames.includes(n) || e.removeAttribute(n) ); }

export const
sanitizeBlankText = payload=> [...payload].filter(e=>!(e.nodeType===3 && e.data.trim() ==='' ));

export function
obj2node( o, tag, doc )
Expand Down Expand Up @@ -181,17 +187,26 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
</dce-text>
</xsl:template>
<xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']">
<dce-text>
<xsl:copy>
<xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
</xsl:copy>
</dce-text>
<xsl:copy>
<xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
</xsl:copy>
</xsl:template>
<xsl:template mode="sanitize" match="xhtml:*">
<xsl:element name="{local-name()}">
<xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
</xsl:element>
</xsl:template>
<xsl:template mode="sanitize" match="xhtml:input">
<xsl:element name="{local-name()}">
<xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
</xsl:element>
<xsl:for-each select="*">
<xsl:copy>
<xsl:attribute name="for" >^</xsl:attribute>
<xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
</xsl:copy>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>`)
const sanitizeProcessor = new XSLTProcessor()
, tc = (n =>
Expand Down Expand Up @@ -273,18 +288,20 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
const params = [];
[...fr.querySelectorAll('dce-root>attribute')].forEach( a=>
{
keepAttributes(a,'namespace,name,select');
const p = cloneAs(a,'xsl:param')
, name = attr(a,'name');
payload.append(p);
keepAttributes(p,'select,name');
let select = attr(p,'select')?.split('??')
if( !select)
{ select = ['//'+name, `'${p.textContent}'`];
emptyNode(p);
p.setAttribute('name',name);
}
let val;
if( select?.length>1 ){
p.removeAttribute('select');
if( select?.length>1 )
{ p.removeAttribute('select');
const c = $( xslDom, 'template[match="ignore"]>choose').cloneNode(true);
emptyNode(c.firstElementChild).append( createText(c,'{'+select[0]+'}'));
emptyNode(c.lastElementChild ).append( createText(c,'{'+select[1]+'}'));
Expand Down Expand Up @@ -317,7 +334,7 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
for( let c of s.childNodes)
v.lastElementChild.append(c)
return v
}
};

forEach$( payload,'slot', s => s.parentNode.replaceChild( slot2xsl(s), s ) )

Expand Down Expand Up @@ -466,7 +483,8 @@ const loadTemplateRoots = async ( src, dce )=>
if( hash )
{ const ret = dom.querySelectorAll('#'+hash);
if( ret.length )
return [...ret]
return [...ret];
console.error('template not found',src+'#'+hash);
return [dce]
}
return [dom]
Expand Down Expand Up @@ -609,6 +627,8 @@ CustomElement extends HTMLElement
static observedAttributes = ['src','tag','hidden'];
async connectedCallback()
{
if(this.firstElementChild && this.firstElementChild.localName !== 'template')
console.warn('custom-element used without template wrapping content\n', this.outerHTML);
const templateRoots = await loadTemplateRoots( attr( this, 'src' ), this )
, tag = attr( this, 'tag' )
, tagName = tag ? tag : 'dce-'+crypto.randomUUID();
Expand Down Expand Up @@ -644,16 +664,16 @@ CustomElement extends HTMLElement
static get observedAttributes(){ return declaredAttributes.map( a=>attr(a,'name')); }
#inTransform = 0;
connectedCallback()
{ let payload = this.childNodes;
{ let payload = sanitizeBlankText(this.childNodes);
if( this.firstElementChild?.tagName === 'TEMPLATE' )
{
if( this.firstElementChild !== this.lastElementChild )
{ console.error('payload should have TEMPLATE as only child', this.outerHTML ) }
const t = this.firstElementChild;
t.remove();
payload = t.content.childNodes;
payload = sanitizeBlankText(t.content.childNodes);

for( const n of [...t.content.childNodes] )
for( const n of payload )
if( n.localName === 'style' ){
const id = assureUID(this,'data-dce-style')
n.innerHTML= `${tagName}[data-dce-style="${id}"]{${n.innerHTML}}`;
Expand Down Expand Up @@ -728,18 +748,39 @@ CustomElement extends HTMLElement
}
})

function getSliceTarget(el)
{ let r = el;
if( el.localName === 'slice')
{ const ref= attr(el,'for');
if( !ref )
r = el.parentElement;
if( '^' === ref )
{ do r = r.previousElementSibling;
while( r.localName === 'slice' )
} else
r = this.querySelector(ref)

if( !r )
return console.warn(`can not find selector in "slice for=${ref}" `, el.outerHTML);
attr(el,'slice') || el.setAttribute('slice', attr(el,'name'))
}
return r;
}
forEach$( this,'[slice],[slice-event]', el =>
{ if( !el.dceInitialized )
{ let evs = attr(el,'slice-event');
const sVal = el.hasAttribute('slice-value') || el.hasAttribute('value') || el.value;
const tgt = getSliceTarget(el);
if( !el.dceInitialized )
{ el.dceInitialized = 1;
let evs = attr(el,'slice-event');
if( el.hasAttribute('custom-validity') )
if( tgt.hasAttribute('custom-validity') )
evs += ' change submit';

[...new Set((evs || 'change') .split(' '))]
.forEach( t=> (el.localName==='slice'? el.parentElement : el)
.addEventListener( t, ev=>
.forEach( t=>
tgt.addEventListener( t, ev=>
{ ev.sliceElement = el;
ev.sliceEventSource = ev.currentTarget || ev.target;
ev.sliceProcessed = 0;
const slices = event2slice( sliceRoot, attr( ev.sliceElement, 'slice'), ev, this );

forEach$(this,'[custom-validity]',el =>
Expand All @@ -752,7 +793,7 @@ CustomElement extends HTMLElement
}catch(err)
{ console.error(err, 'xPath', x) }
})
const x = attr(el,'custom-validity')
const x = attr(tgt,'custom-validity')
, v = x && xPath( x, attrsRoot )
, msg = v === true? '' : v;

Expand All @@ -778,8 +819,8 @@ CustomElement extends HTMLElement
this.onSlice(ev);
} ));
if( !evs || evs.includes('init') )
{ if( el.hasAttribute('slice-value') || el.hasAttribute('value') || el.value )
this.onSlice({type:'init', target: el, sliceElement:el, sliceEventSource:el })
{ if( sVal )
this.onSlice({type:'init', target: tgt, sliceElement:el, sliceEventSource:tgt })
else
el.value = sliceXPath( attr(el,'slice') )
}
Expand Down
2 changes: 1 addition & 1 deletion src/custom-element/ide/web-types-dce.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"$schema": "http://json.schemastore.org/web-types",
"name": "@epa-wg/custom-element",
"version": "0.0.27",
"version": "0.0.28",
"js-types-syntax": "typescript",
"description-markup": "markdown",
"contributions": {
Expand Down
2 changes: 1 addition & 1 deletion src/custom-element/ide/web-types-xsl.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"$schema": "http://json.schemastore.org/web-types",
"name": "@epa-wg/custom-element",
"version": "0.0.27",
"version": "0.0.28",
"js-types-syntax": "typescript",
"description-markup": "markdown",
"contributions": {
Expand Down
Binary file added src/dce-social-preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 4192859

Please sign in to comment.