Skip to content

Commit

Permalink
sync location-element.test.js , src-attribute.test.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@sashafirsov
sashafirsov committed Dec 25, 2023
1 parent d3594fc commit eb9bd91
Show file tree
Hide file tree
Showing 10 changed files with 427 additions and 304 deletions.
265 changes: 205 additions & 60 deletions src/custom-element.js
View file

Large diffs are not rendered by default.

101 changes: 44 additions & 57 deletions src/demo/http-request.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,88 +35,75 @@
description="load the list of pokemons">
<p>Should display 6 image buttons with pokemon name </p>
<template>
<custom-element tag="dce-1" hidden>
<custom-element>
<template><!-- wrapping into template to prevent images loading within DCE declaration -->
<http-request
url="https://pokeapi.co/api/v2/pokemon?limit=6&offset=0"
slice="page"
method="GET"
header-accept="application/json"
></http-request>
<xsl:variable name="slides-url"
>https://unpkg.com/[email protected]/sprites/pokemon/other/dream-world</xsl:variable>
<xsl:for-each select="//slice/page/data/results/*">
<xsl:variable name="slides-url"
>https://unpkg.com/[email protected]/sprites/pokemon/other/dream-world</xsl:variable>
<xsl:variable name="pokeid"
select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"
></xsl:variable>
<button>
<img src="{$slides-url}/{$pokeid}.svg"
alt="{@name}"/>
<xsl:value-of select='@name'/>
{@name}
</button>
</xsl:for-each>
</template>
</custom-element>
<dce-1></dce-1>
</template>
</html-demo-element>

<html-demo-element legend="1. http-request headers"
<html-demo-element legend="2. http-request response and headers"
description="request and response headers access demo">

<template>
<custom-element
tag="headers-demo"
hidden
>
<http-request
url="https://pokeapi.co/api/v2/pokemon?offset=6&limit=6"
slice="request_slice"
type="text"
mode="cors"
header-x-test="testing"
></http-request>
Content of <code>//slice/request_slice</code> is filled by <b>request</b> and <b>response</b>
from <code>${url}</code>
<custom-element url="https://pokeapi.co/api/v2/pokemon?offset=6&limit=6">
<template> <!-- IMPORTANT! to wrap DCE payload into template to avoid
http-request initializing out of instance -->
<http-request
url="{url}"
slice="request_slice"
type="text"
mode="cors"
header-x-test="testing"
></http-request>
Content of <code>//slice/request_slice</code> is filled by <b>request</b> and <b>response</b>
from <code>${url}</code>

<h3>Samples</h3>
<table>
<tr><th>//slice/request_slice/request/headers/@mode</th>
<td><xsl:value-of select="//slice/request_slice/request/@mode"/></td></tr>
<tr><th>//slice/request_slice/response/headers/@content-type</th>
<td><xsl:value-of select="//slice/request_slice/response/headers/@content-type"/></td></tr>
<tr><th>//slice/request_slice/response/@status</th>
<td><xsl:value-of select="//slice/request_slice/response/@status"/></td></tr>
</table>
<xsl:for-each select="//slice/request_slice/*">
<ul data-request-section="{name(.)}">
<b data-testid="request-section"><xsl:value-of select='name(.)'/></b>
<xsl:for-each select="@*">
<div>
<var data-testid="section-attribute">@<xsl:value-of select='local-name(.)'/></var>
=
<code><xsl:value-of select='.'/></code>
</div>
</xsl:for-each>
<xsl:for-each select="*">
<div>
<b data-testid="section-deep"><xsl:value-of select='local-name(.)'/></b>
<ul>
<xsl:for-each select="@*">
<li>
<var data-testid="section-attribute">@<xsl:value-of select='local-name(.)'/></var>
=
<code><xsl:value-of select='.'/></code>
</li>
</xsl:for-each>
<code><xsl:value-of select='.'/></code>
</ul>
</div>
</xsl:for-each>
</ul>
</xsl:for-each>
</custom-element>
<headers-demo></headers-demo>
<h3>Samples</h3>
<table>
<tr><th> //slice/request_slice/request/@mode </th>
<td>{ //slice/request_slice/request/@mode }</td></tr>
<tr><th> //slice/request_slice/response/headers/@content-type </th>
<td>{ //slice/request_slice/response/headers/@content-type }</td></tr>
<tr><th> //slice/request_slice/response/@status </th>
<td>{ //slice/request_slice/response/@status }</td></tr>
</table>
<xsl:apply-templates mode="display" select="//slice/request_slice/*"></xsl:apply-templates>
<xsl:template mode="display" match="*">
<fieldset>
<legend> {local-name(.)} </legend>
<ul>
<xsl:for-each select="@*">
<li>
<var data-testid="section-attribute">@{local-name(.)}</var>
=
<code><xsl:value-of select='.'/></code>
</li>
</xsl:for-each>
</ul>
<xsl:apply-templates mode="display" select="*"></xsl:apply-templates>
</fieldset>
</xsl:template>
</template>
</custom-element>
</template>
</html-demo-element>

Expand Down
37 changes: 21 additions & 16 deletions src/demo/local-storage.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>custom-element Declarative Custom Element implementation demo</title>
Expand Down Expand Up @@ -41,21 +41,25 @@
<p>Click the fruits button to add into cart </p>
<template>
<custom-element tag="dce-2" hidden>
<local-storage key="basket" slice="basket" live type="json"></local-storage>
<html:table>
<xsl:for-each select="//slice/basket/@*">
<html:tr>
<html:th><xsl:value-of select="name()"/></html:th>
<html:td><xsl:value-of select="."/></html:td>
</html:tr>
</xsl:for-each>
<html:tfoot>
<html:tr>
<html:td><slot>🤔</slot></html:td>
<html:th><xsl:value-of select="sum(//slice/basket/@*)"/></html:th>
</html:tr>
</html:tfoot>
</html:table>
<template>
<local-storage key="basket" slice="basket" live type="json"></local-storage>
<xhtml:table xmlns:xhtml="http://www.w3.org/1999/xhtml" >
<xhtml:tbody>
<xsl:for-each select="//basket/@*">
<xhtml:tr>
<xhtml:th><xsl:value-of select="name()"/></xhtml:th>
<xhtml:td><xsl:value-of select="."/></xhtml:td>
</xhtml:tr>
</xsl:for-each>
</xhtml:tbody>
<xhtml:tfoot>
<xhtml:tr>
<xhtml:td><slot>🤔</slot></xhtml:td>
<xhtml:th><xsl:value-of select="sum(//slice/basket/@*)"/></xhtml:th>
</xhtml:tr>
</xhtml:tfoot>
</xhtml:table>
</template>
</custom-element>
<dce-2>🛒total</dce-2>
</template>
Expand Down Expand Up @@ -90,6 +94,7 @@
basket[k] || (basket[k] = 1);
localStorage.setItem( k, basket[k] = 1+1*localStorage[k] )
localStorage.setItem( 'basket', JSON.stringify(basket) );
renderStorage();
} );

const renderStorage = () =>
Expand Down
117 changes: 59 additions & 58 deletions src/demo/location-element.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>custom-element Declarative Custom Element implementation demo</title>
Expand All @@ -24,7 +25,7 @@
<html-demo-element legend="Change window URL">
<template>
<a href="#dce2">#dce2</a>
<form >
<form method="get">
<input name="p1" value="abc"/>
<input name="p2" value="def"/>
<input type="submit" value="params"/>
Expand All @@ -38,7 +39,7 @@
</html-demo-element>


<html-demo-element legend="2. window.location live update"
<html-demo-element legend="1. window.location live update"
description="In the page beginning change the window URL via link or by history change"
id="dce2"
>
Expand All @@ -49,32 +50,28 @@

<location-element slice="window-url" live></location-element>

<html:table>
<xsl:for-each select="//slice/window-url/@*">
<html:tr>
<html:th><xsl:value-of select="name()"/></html:th>
<html:td><xsl:value-of select="."/></html:td>
</html:tr>
</xsl:for-each>
<html:tr>
<html:th><u>params</u></html:th>
<html:th></html:th>
</html:tr>
<xsl:for-each select="//slice/window-url/params/*">
<html:tr>
<html:th><xsl:value-of select="name()"/></html:th>
<html:td><xsl:value-of select="."/></html:td>
</html:tr>
</xsl:for-each>
</html:table>
<xhtml:table>
<tr><th><h3> URL properties </h3></th></tr>
<xsl:apply-templates mode="attrs" select="//slice/window-url/@*"></xsl:apply-templates>
</xhtml:table>
<xhtml:table>
<tr><th><h3> URL parameters </h3></th></tr>
<xsl:apply-templates mode="attrs" select="//slice/window-url/params/*"></xsl:apply-templates>
</xhtml:table>
<xsl:template mode="attrs" match="*|@*">
<xhtml:tr>
<xhtml:th>{name()}</xhtml:th>
<xhtml:td>{.}</xhtml:td>
</xhtml:tr>
</xsl:template>
</template>
</custom-element>
<dce-2>?</dce-2>
</template>
</html-demo-element>


<html-demo-element legend="1. window.location simplest"
<html-demo-element legend="2. window.location simplest"
description="location read only during initial and only render, does not track the changes."
id="dce1">
<p>Has to produce URL properties</p>
Expand All @@ -84,24 +81,26 @@

<location-element slice="window-url"></location-element>

<html:table>
<xsl:for-each select="//slice/window-url/@*">
<html:tr>
<html:th><xsl:value-of select="name()"/></html:th>
<html:td><xsl:value-of select="."/></html:td>
</html:tr>
</xsl:for-each>
<html:tr>
<html:th><u>params</u></html:th>
<html:th></html:th>
</html:tr>
<xsl:for-each select="//slice/window-url/params/*">
<html:tr>
<html:th><xsl:value-of select="name()"/></html:th>
<html:td><xsl:value-of select="."/></html:td>
</html:tr>
</xsl:for-each>
</html:table>
<xhtml:table>
<xhtml:tbody>
<xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
<xsl:for-each select="//slice/window-url/@*">
<xhtml:tr>
<xhtml:th>{name()}</xhtml:th>
<xhtml:td>{.}</xhtml:td>
</xhtml:tr>
</xsl:for-each>
</xhtml:tbody>
<xhtml:tbody>
<xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
<xsl:for-each select="//slice/window-url/params/*">
<xhtml:tr>
<xhtml:th>{name()}</xhtml:th>
<xhtml:td>{.}</xhtml:td>
</xhtml:tr>
</xsl:for-each>
</xhtml:tbody>
</xhtml:table>
</template>
</custom-element>
<dce-1>?</dce-1>
Expand All @@ -119,24 +118,26 @@

<location-element slice="src-url" src="https://my.example?a=1&b=2#3"></location-element>

<html:table>
<xsl:for-each select="//slice/src-url/@*">
<html:tr>
<html:th><xsl:value-of select="name()"/></html:th>
<html:td><xsl:value-of select="."/></html:td>
</html:tr>
</xsl:for-each>
<html:tr>
<html:th><u>params</u></html:th>
<html:th></html:th>
</html:tr>
<xsl:for-each select="//slice/src-url/params/*">
<html:tr>
<html:th><xsl:value-of select="name()"/></html:th>
<html:td><xsl:value-of select="."/></html:td>
</html:tr>
</xsl:for-each>
</html:table>
<xhtml:table>
<xhtml:tbody>
<xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
<xsl:for-each select="//slice/src-url/@*">
<xhtml:tr>
<xhtml:th>{name()}</xhtml:th>
<xhtml:td>{.}</xhtml:td>
</xhtml:tr>
</xsl:for-each>
</xhtml:tbody>
<xhtml:tbody>
<xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
<xsl:for-each select="//slice/src-url/params/*">
<xhtml:tr>
<xhtml:th>{name()}</xhtml:th>
<xhtml:td>{.}</xhtml:td>
</xhtml:tr>
</xsl:for-each>
</xhtml:tbody>
</xhtml:table>
</template>
</custom-element>
<dce-3>?</dce-3>
Expand Down
Loading

0 comments on commit eb9bd91

Please sign in to comment.