@epa-wg/custom-element
Version:
Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating
144 lines (130 loc) • 6.31 kB
HTML
<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>http-request Declarative Custom Element implementation demo</title>
<link rel="icon" href="./wc-square.svg" />
<script type="module" src="../http-request.js"></script>
<script type="module" src="../custom-element.js"></script>
<style>
@import "./demo.css";
button
{ display: inline-flex; flex-direction: column; align-items: center; flex: auto;
box-shadow: inset silver 0px 0px 1rem; min-width: 12rem; padding: 1rem;
color: coral; text-shadow: 1px 1px silver; font-weight: bolder;
}
button img{ max-height: 10vw; min-height: 4rem;}
table{ min-width: 16rem; }
td{ border-bottom: 1px solid silver; }
tfoot td{ border-bottom: none; }
td,th{text-align: right; }
caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
dce-1{ padding: 0; display: flex; flex-wrap: wrap;}
code{ text-align: right; min-width: 3rem;}
</style>
</head>
<body>
<nav>
<a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
</nav>
<html-demo-element legend="0. url from text to http-request "
description="read data from arbitrary URL">
<template>
<custom-element>
<template>
<button slice="url-string" slice-value="''" slice-event="click">⬇️set blank</button>
<button slice="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=6'" slice-event="click">⬇️https://pokeapi.co/api/v2/pokemon?limit=6</button>
<button slice="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=3'" slice-event="click">⬇️https://pokeapi.co/api/v2/pokemon?limit=3</button>
<input slice="url-string" value="{ //url-string ?? '' }" style="width:100%"/>
<button slice="fetch-url" slice-event="click" slice-value="//url-string"> GET </button>
<http-request
url="{//fetch-url}"
slice="request_slice"
type="text"
mode="cors"
></http-request>
<code>//fetch-url</code> from <code>{//fetch-url}</code><br/>
<ul><for-each select="//results">
<li>{@name}</li>
</for-each></ul>
</template>
</custom-element>
</template>
</html-demo-element>
<html-demo-element legend="1. http-request simplest"
description="load the list of pokemons">
<p>Should display 6 image buttons with pokemon name </p>
<template>
<custom-element>
<template><!-- wrapping into template to prevent images loading within DCE declaration -->
<p>Pokemon buttons from API</p>
<http-request
url="https://pokeapi.co/api/v2/pokemon?limit=6&offset=0"
slice="page"
method="GET"
header-accept="application/json"
></http-request>
<variable name="slides-url"
>https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</variable>
<for-each select="//results">
<variable name="pokeid"
select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"
></variable>
<button>
<img src="{$slides-url}/{$pokeid}.svg"
alt="{@name}"/>
{@name}
</button>
</for-each>
</template>
</custom-element>
</template>
</html-demo-element>
<html-demo-element legend="2. http-request response and headers"
description="request and response headers access demo">
<template>
<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 -->
<attribute name="url"></attribute>
<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/value/request/@mode </th>
<td>{ //slice/request_slice/value/request/@mode }</td></tr>
<tr><th> //slice/request_slice/value/response/headers/@content-type </th>
<td>{ //slice/request_slice/value/response/headers/@content-type }</td></tr>
<tr><th> //slice/request_slice/value/response/@status </th>
<td>{ //slice/request_slice/value/response/@status }</td></tr>
</table>
<apply-templates mode="display" select="//slice/request_slice/value/*"></apply-templates>
<xsl:template mode="display" match="*">
<fieldset>
<legend> {local-name(.)} </legend>
<ul>
<for-each select="@*">
<li>
<var data-testid="section-attribute">@{local-name(.)}</var>
=
<code><value-of select='.'/></code>
</li>
</for-each>
</ul>
<apply-templates mode="display" select="*"></apply-templates>
</fieldset>
</xsl:template>
</template>
</custom-element>
</template>
</html-demo-element>
<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
</body>
</html>