`, 'g'),
41 | sub: xmlElement.sub
42 | },
43 | {
44 | match: RegExp(`${xmlElement.match}|[^]*(?=$)`, 'g'),
45 | sub: 'js'
46 | },
47 | xmlElement
48 | ]
49 | },
50 | ...xml
51 | ]
--------------------------------------------------------------------------------
/public/lib/speed-highlight/languages/js.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | match: /\/\*\*((?!\*\/)[^])*(\*\/)?/g,
4 | sub: 'jsdoc'
5 | },
6 | {
7 | match: /\/\/.*\n?|\/\*((?!\*\/)[^])*(\*\/)?/g,
8 | sub: 'todo'
9 | },
10 | {
11 | expand: 'str'
12 | },
13 | {
14 | match: /`((?!`)[^]|\\[^])*`?/g,
15 | sub: 'js_template_literals'
16 | },
17 | {
18 | type: 'kwd',
19 | match: /=>|\b(this|set|get|as|async|await|break|case|catch|class|const|constructor|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|if|implements|import|in|instanceof|interface|let|var|of|new|package|private|protected|public|return|static|super|switch|throw|throws|try|typeof|void|while|with|yield)\b/g
20 | },
21 | {
22 | match: /\/((?!\/)[^\r\n\\]|\\.)+\/[dgimsuy]*/g,
23 | sub: 'regex'
24 | },
25 | {
26 | expand: 'num'
27 | },
28 | {
29 | type: 'num',
30 | match: /\b(NaN|null|undefined|[A-Z][A-Z_]*)\b/g
31 | },
32 | {
33 | type: 'bool',
34 | match: /\b(true|false)\b/g
35 | },
36 | {
37 | type: 'oper',
38 | match: /[/*+:?&|%^~=!,<>.^-]+/g
39 | },
40 | {
41 | type: 'class',
42 | match: /\b[A-Z][\w_]*\b/g
43 | },
44 | {
45 | type: 'func',
46 | match: /[a-zA-Z$_][\w$_]*(?=\s*((\?\.)?\s*\(|=\s*(\(?[\w,{}\[\])]+\)? =>|function\b)))/g
47 | }
48 | ]
49 |
--------------------------------------------------------------------------------
/public/lib/speed-highlight/languages/js_template_literals.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | match: new class {
4 | exec(str) {
5 | let i = this.lastIndex,
6 | j,
7 | f = _ => {
8 | while (++i < str.length - 2)
9 | if (str[i] == '{') f();
10 | else if (str[i] == '}') return;
11 | };
12 | for (; i < str.length; i++)
13 | if (str[i - 1] != '\\' && str[i] == '$' && str[i + 1] == '{') {
14 | j = i++;
15 | f(i);
16 | this.lastIndex = i + 1;
17 | return { index: j, 0: str.slice(j, i + 1) };
18 | }
19 | return null;
20 | }
21 | }(),
22 | sub: [
23 | {
24 | type: 'kwd',
25 | match: /^\${|}$/g
26 | },
27 | {
28 | match: /(?!^\$|{)[^]+(?=}$)/g,
29 | sub: 'js'
30 | },
31 | ],
32 | },
33 | ];
34 | export let type = 'str';
35 |
--------------------------------------------------------------------------------
/public/lib/speed-highlight/languages/jsdoc.js:
--------------------------------------------------------------------------------
1 | import todo from './todo.js';
2 |
3 | export default [
4 | {
5 | type: 'kwd',
6 | match: /@\w+/g
7 | },
8 | {
9 | type: 'class',
10 | match: /{[\w\s|<>,.@\[\]]+}/g
11 | },
12 | {
13 | type: 'var',
14 | match: /\[[\w\s="']+\]/g
15 | },
16 | ...todo
17 | ];
18 | export let type = 'cmnt';
19 |
--------------------------------------------------------------------------------
/public/lib/speed-highlight/languages/json.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | type: 'var',
4 | match: /("|')?[a-zA-Z]\w*\1(?=\s*:)/g
5 | },
6 | {
7 | expand: 'str'
8 | },
9 | {
10 | expand: 'num'
11 | },
12 | {
13 | type: 'num',
14 | match: /\bnull\b/g
15 | },
16 | {
17 | type: 'bool',
18 | match: /\b(true|false)\b/g
19 | }
20 | ]
21 |
--------------------------------------------------------------------------------
/public/lib/speed-highlight/languages/log.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | type: 'cmnt',
4 | match: /^#.*/gm
5 | },
6 | {
7 | expand: 'strDouble'
8 | },
9 | {
10 | expand: 'num'
11 | },
12 | {
13 | type: 'err',
14 | match: /\b(err(or)?|[a-z_-]*exception|warn|warning|failed|ko|invalid|not ?found|alert|fatal)\b/gi
15 | },
16 | {
17 | type: 'num',
18 | match: /\b(null|undefined)\b/gi
19 | },
20 | {
21 | type: 'bool',
22 | match: /\b(false|true|yes|no)\b/gi
23 | },
24 | {
25 | type: 'oper',
26 | match: /\.|,/g
27 | }
28 | ]
29 |
--------------------------------------------------------------------------------
/public/lib/speed-highlight/languages/plain.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | expand: 'strDouble'
4 | }
5 | ]
6 |
--------------------------------------------------------------------------------
/public/lib/speed-highlight/languages/regex.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | match: /^(?!\/).*/gm,
4 | sub: 'todo'
5 | },
6 | {
7 | type: 'num',
8 | match: /\[((?!\])[^\\]|\\.)*\]/g
9 | },
10 | {
11 | type: 'kwd',
12 | match: /\||\^|\$|\\.|\w+($|\r|\n)/g
13 | },
14 | {
15 | type: 'var',
16 | match: /\*|\+|\{\d+,\d+\}/g
17 | }
18 | ];
19 | export let type = 'oper';
20 |
--------------------------------------------------------------------------------
/public/lib/speed-highlight/languages/todo.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | type: 'err',
4 | match: /\b(TODO|FIXME|DEBUG|OPTIMIZE|WARNING|XXX|BUG)\b/g
5 | },
6 | {
7 | type: 'class',
8 | match: /\bIDEA\b/g
9 | },
10 | {
11 | type: 'insert',
12 | match: /\b(CHANGED|FIX|CHANGE)\b/g
13 | },
14 | {
15 | type: 'oper',
16 | match: /\bQUESTION\b/g
17 | }
18 | ];
19 | export let type = 'cmnt';
20 |
--------------------------------------------------------------------------------
/public/lib/speed-highlight/languages/ts.js:
--------------------------------------------------------------------------------
1 | import js from './js.js'
2 |
3 | export default [
4 | {
5 | type: 'type',
6 | match: /:\s*(any|void|number|boolean|string|object|never|enum)\b/g
7 | },
8 | {
9 | type: 'kwd',
10 | match: /\b(type|namespace|typedef|interface|public|private|protected|implements|declare|abstract|readonly)\b/g
11 | },
12 | ...js
13 | ]
14 |
--------------------------------------------------------------------------------
/public/lib/speed-highlight/languages/uri.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | match: /^#.*/gm,
4 | sub: 'todo'
5 | },
6 | {
7 | type: 'class',
8 | match: /^\w+(?=:?)/gm
9 | },
10 | {
11 | type: 'num',
12 | match: /:\d+/g
13 | },
14 | {
15 | type: 'oper',
16 | match: /[:/&?]|\w+=/g
17 | },
18 | {
19 | type: 'func',
20 | match: /[.\w]+@|#[\w]+$/gm
21 | },
22 | {
23 | type: 'var',
24 | match: /\w+\.\w+(\.\w+)*/g
25 | }
26 | ]
27 |
--------------------------------------------------------------------------------
/public/lib/speed-highlight/languages/xml.js:
--------------------------------------------------------------------------------
1 | export let property = '\\s*(\\s+[a-z-]+\\s*(=\\s*([^"\']\\S*|("|\')(\\\\[^]|(?!\\4)[^])*\\4?)?)?\\s*)*',
2 | xmlElement = {
3 | match: RegExp(`<\/?[a-z_-]+${property}\/?>`, 'g'),
4 | sub: [
5 | {
6 | type: 'var',
7 | match: /^<\/?[^\s>\/]+/g,
8 | sub: [
9 | {
10 | type: 'oper',
11 | match: /^<\/?/g
12 | }
13 | ]
14 | },
15 | {
16 | type: 'str',
17 | match: /=\s*([^"']\S*|("|')(\\[^]|(?!\2)[^])*\2?)/g,
18 | sub: [
19 | {
20 | type: 'oper',
21 | match: /^=/g
22 | }
23 | ]
24 | },
25 | {
26 | type: 'oper',
27 | match: /\/?>/g
28 | },
29 | {
30 | type: 'class',
31 | match: /[a-z-]+/gi
32 | }
33 | ]
34 | };
35 |
36 | export default [
37 | {
38 | match: /)[^])*-->/g,
39 | sub: 'todo'
40 | },
41 | {
42 | type: 'class',
43 | match: RegExp(`<\\?xml${property}\\?>`, 'gi'),
44 | sub: [
45 | {
46 | type: 'oper',
47 | match: /^<\?|\?>$/g
48 | },
49 | {
50 | type: 'str',
51 | match: /"[^"]*"|'[^']*'/g
52 | },
53 | {
54 | type: 'var',
55 | match: /xml/gi
56 | }
57 | ]
58 | },
59 | {
60 | type: 'class',
61 | match: //gi
62 | },
63 | xmlElement,
64 | {
65 | type: 'var',
66 | match: /&(#x?)?[\da-z]{1,8};/gi
67 | }
68 | ]
--------------------------------------------------------------------------------
/public/lib/speed-highlight/themes/default.css:
--------------------------------------------------------------------------------
1 | [class*="shj-lang-"] {
2 | white-space: pre;
3 | /* margin: 10px 0;*/
4 | /* border-radius: 10px;*/
5 | /* padding: 30px 20px;*/
6 | background: white;
7 | color: #112;
8 | /* box-shadow: 0 0 5px #0001;*/
9 | text-shadow: none;
10 | /* font: normal 18px Consolas, "Courier New", Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;*/
11 | line-height: 24px;
12 | box-sizing: border-box;
13 | max-width: min(100%, 100vw)
14 | }
15 | .shj-inline {
16 | /* margin: 0;*/
17 | /* padding: 2px 5px;*/
18 | display: inline-block;
19 | /* border-radius: 5px*/
20 | }
21 |
22 | [class*="shj-lang-"]::selection,
23 | [class*="shj-lang-"] ::selection {background: #bdf5}
24 | [class*="shj-lang-"] > div {
25 | display: flex;
26 | overflow: auto
27 | }
28 | [class*="shj-lang-"] > div :last-child {
29 | flex: 1;
30 | outline: none
31 | }
32 | .shj-numbers {
33 | padding-left: 5px;
34 | counter-reset: line
35 | }
36 | .shj-numbers div {padding-right: 5px}
37 | .shj-numbers div::before {
38 | color: #999;
39 | display: block;
40 | content: counter(line);
41 | opacity: .5;
42 | text-align: right;
43 | margin-right: 5px;
44 | counter-increment: line
45 | }
46 |
47 | .shj-syn-cmnt {font-style: italic}
48 |
49 | .shj-syn-err,
50 | .shj-syn-kwd {color: #e16}
51 | .shj-syn-num,
52 | .shj-syn-class {color: #f60}
53 | .shj-numbers,
54 | .shj-syn-cmnt {color: #999}
55 | .shj-syn-insert,
56 | .shj-syn-str {color: #7d8}
57 | .shj-syn-bool {color: #3bf}
58 | .shj-syn-type,
59 | .shj-syn-oper {color: #5af}
60 | .shj-syn-section,
61 | .shj-syn-func {color: #84f}
62 | .shj-syn-deleted,
63 | .shj-syn-var {color: #f44}
64 |
65 | .shj-oneline {padding: 12px 10px}
66 | .shj-lang-http.shj-oneline .shj-syn-kwd {
67 | background: #25f;
68 | color: #fff;
69 | padding: 5px 7px;
70 | border-radius: 5px
71 | }
72 |
--------------------------------------------------------------------------------
/public/lib/speed-highlight/themes/github-dark.css:
--------------------------------------------------------------------------------
1 | @import 'default.css';
2 |
3 | [class*="shj-lang-"] {
4 | color: #c9d1d9;
5 | background: #161b22
6 | }
7 | [class*="shj-lang-"]:before {color: #6f9aff}
8 |
9 | .shj-syn-insert {color: #98c379}
10 | .shj-syn-deleted,
11 | .shj-syn-err,
12 | .shj-syn-kwd {color: #ff7b72}
13 | .shj-syn-class {color: #ffa657}
14 | .shj-numbers,
15 | .shj-syn-cmnt {color: #8b949e}
16 | .shj-syn-type,
17 | .shj-syn-oper,
18 | .shj-syn-num,
19 | .shj-syn-section,
20 | .shj-syn-var,
21 | .shj-syn-bool {color: #79c0ff}
22 | .shj-syn-str {color: #a5d6ff}
23 | .shj-syn-func {color: #d2a8ff}
24 |
--------------------------------------------------------------------------------
/public/lib/speed-highlight/themes/github-light.css:
--------------------------------------------------------------------------------
1 | @import 'default.css';
2 |
3 | [class*="shj-lang-"] {
4 | color: #24292f;
5 | background: #fff
6 | }
7 |
8 | .shj-syn-deleted,
9 | .shj-syn-err,
10 | .shj-syn-kwd {color: #cf222e}
11 | .shj-syn-class {color: #953800}
12 | .shj-numbers,
13 | .shj-syn-cmnt {color: #6e7781}
14 | .shj-syn-type,
15 | .shj-syn-oper,
16 | .shj-syn-num,
17 | .shj-syn-section,
18 | .shj-syn-var,
19 | .shj-syn-bool {color: #0550ae}
20 | .shj-syn-str {color: #0a3069}
21 | .shj-syn-func {color: #8250df}
22 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Plain Vanilla",
3 | "short_name": "Plain Vanilla",
4 | "icons": [{
5 | "src": "android-chrome-512x512.png",
6 | "sizes": "512x512"
7 | }],
8 | "background_color": "#ffffff",
9 | "description": "An explainer for doing web development using only vanilla techniques.",
10 | "theme_color": "#ffffff",
11 | "display": "fullscreen"
12 | }
--------------------------------------------------------------------------------
/public/pages/examples/applications/counter/components/counter.js:
--------------------------------------------------------------------------------
1 | class Counter extends HTMLElement {
2 | #count = 0;
3 |
4 | increment() {
5 | this.#count++;
6 | this.update();
7 | }
8 |
9 | connectedCallback() {
10 | this.update();
11 | }
12 |
13 | update() {
14 | this.textContent = this.#count;
15 | }
16 | }
17 |
18 | export const registerCounterComponent =
19 | () => customElements.define('x-counter', Counter);
20 |
--------------------------------------------------------------------------------
/public/pages/examples/applications/counter/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
8 |
9 |
10 |
11 | Let's count to
12 |
13 | Increment
14 |
15 |
16 |
--------------------------------------------------------------------------------
/public/pages/examples/applications/counter/index.js:
--------------------------------------------------------------------------------
1 | import { registerCounterComponent } from './components/counter.js';
2 |
3 | const app = () => {
4 | registerCounterComponent();
5 | }
6 |
7 | document.addEventListener('DOMContentLoaded', app);
8 |
--------------------------------------------------------------------------------
/public/pages/examples/applications/lifting-state-up/components/accordion.js:
--------------------------------------------------------------------------------
1 | class Accordion extends HTMLElement {
2 | #activeIndex = 0;
3 |
4 | get activeIndex () { return this.#activeIndex; }
5 | set activeIndex(index) { this.#activeIndex = index; this.update(); }
6 |
7 | connectedCallback() {
8 | this.innerHTML = `
9 | Almaty, Kazakhstan
10 |
12 | With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.
13 |
14 |
16 | The name comes from алма , the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple.
17 |
18 | `;
19 | this.querySelectorAll('x-panel').forEach((panel, index) => {
20 | panel.addEventListener('show', () => {
21 | this.activeIndex = index;
22 | });
23 | })
24 | this.update();
25 | }
26 |
27 | update() {
28 | this.querySelectorAll('x-panel').forEach((panel, index) => {
29 | panel.setAttribute('active', index === this.activeIndex);
30 | });
31 | }
32 | }
33 |
34 | export const registerAccordionComponent = () => {
35 | customElements.define('x-accordion', Accordion);
36 | }
37 |
--------------------------------------------------------------------------------
/public/pages/examples/applications/lifting-state-up/components/panel.js:
--------------------------------------------------------------------------------
1 | class Panel extends HTMLElement {
2 | constructor() {
3 | super();
4 | this.attachShadow({ mode: 'open' });
5 | }
6 |
7 | connectedCallback() {
8 | this.shadowRoot.innerHTML = `
9 |
14 | `;
15 | this.shadowRoot.querySelector('button').onclick =
16 | () => this.dispatchEvent(new CustomEvent('show'));
17 | this.update();
18 | }
19 |
20 | static get observedAttributes() { return ['title', 'active']; }
21 |
22 | attributeChangedCallback() {
23 | this.update();
24 | }
25 |
26 | update() {
27 | const heading = this.shadowRoot.querySelector('h3');
28 | const slot = this.shadowRoot.querySelector('slot');
29 | const button = this.shadowRoot.querySelector('button');
30 | if (heading && slot && button) {
31 | heading.textContent = this.title;
32 | slot.style.display = this.getAttribute('active') === 'true' ? 'block' : 'none';
33 | button.style.display = this.getAttribute('active') === 'true' ? 'none' : 'inline';
34 | }
35 | }
36 | }
37 |
38 | export const registerPanelComponent =
39 | () => customElements.define('x-panel', Panel);
40 |
--------------------------------------------------------------------------------
/public/pages/examples/applications/lifting-state-up/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: system-ui, sans-serif;
3 | }
--------------------------------------------------------------------------------
/public/pages/examples/applications/lifting-state-up/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Almaty, Kazakhstan
8 | setActiveIndex(0)}
12 | >
13 | With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.
14 |
15 | setActiveIndex(1)}
19 | >
20 | The name comes from алма , the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple.
21 |
22 |
23 | );
24 | }
25 |
26 | function Panel({
27 | title,
28 | children,
29 | isActive,
30 | onShow
31 | }) {
32 | return (
33 |
34 | {title}
35 | {isActive ? (
36 | {children}
37 | ) : (
38 |
39 | Show
40 |
41 | )}
42 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/public/pages/examples/applications/passing-data-deeply/components/button.js:
--------------------------------------------------------------------------------
1 | import { ContextRequestEvent } from "../lib/tiny-context.js";
2 |
3 | class ButtonComponent extends HTMLElement {
4 | constructor() {
5 | super();
6 | this.attachShadow({ mode: 'open' });
7 | }
8 |
9 | #theme = 'light';
10 | #unsubscribe;
11 |
12 | connectedCallback() {
13 | this.shadowRoot.innerHTML = `
14 |
16 |
18 | `;
19 | this.dispatchEvent(new ContextRequestEvent('theme', (theme, unsubscribe) => {
20 | this.#theme = theme;
21 | this.#unsubscribe = unsubscribe;
22 | this.update();
23 | }, true));
24 | this.dispatchEvent(new ContextRequestEvent('theme-toggle', (toggle) => {
25 | this.shadowRoot.querySelector('button').onclick = toggle;
26 | }));
27 | this.update();
28 | }
29 |
30 | disconnectedCallback() {
31 | this.#unsubscribe?.();
32 | }
33 |
34 | update() {
35 | const button = this.shadowRoot.querySelector('button');
36 | if (button) button.className = 'button-' + this.#theme;
37 | }
38 | }
39 |
40 | export const registerButtonComponent =
41 | () => customElements.define('x-button', ButtonComponent);
42 |
--------------------------------------------------------------------------------
/public/pages/examples/applications/passing-data-deeply/components/panel.js:
--------------------------------------------------------------------------------
1 | import { ContextRequestEvent } from "../lib/tiny-context.js";
2 |
3 | class PanelComponent extends HTMLElement {
4 | constructor() {
5 | super();
6 | this.attachShadow({ mode: 'open' });
7 | }
8 |
9 | #theme = 'light';
10 | #unsubscribe;
11 |
12 | connectedCallback() {
13 | this.shadowRoot.innerHTML = `
14 |
9 |
10 | Toggle theme
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/public/pages/examples/applications/passing-data-deeply/index.js:
--------------------------------------------------------------------------------
1 | import { registerThemeContext } from './components/theme-context.js';
2 | import { registerPanelComponent } from './components/panel.js';
3 | import { registerButtonComponent } from './components/button.js';
4 |
5 | const app = () => {
6 | registerThemeContext();
7 | registerPanelComponent();
8 | registerButtonComponent();
9 | }
10 |
11 | document.addEventListener('DOMContentLoaded', app);
12 |
--------------------------------------------------------------------------------
/public/pages/examples/applications/passing-data-deeply/lib/tiny-context.js:
--------------------------------------------------------------------------------
1 | export class ContextRequestEvent extends Event {
2 | constructor(context, callback, subscribe) {
3 | super('context-request', {
4 | bubbles: true,
5 | composed: true,
6 | });
7 | this.context = context;
8 | this.callback = callback;
9 | this.subscribe = subscribe;
10 | }
11 | }
12 |
13 | export class ContextProvider extends EventTarget {
14 | #value;
15 | get value() { return this.#value }
16 | set value(v) { this.#value = v; this.dispatchEvent(new Event('change')); }
17 |
18 | #context;
19 | get context() { return this.#context }
20 |
21 | constructor(target, context, initialValue = undefined) {
22 | super();
23 | this.#context = context;
24 | this.#value = initialValue;
25 | if (target) this.attach(target);
26 | }
27 |
28 | attach(target) {
29 | target.addEventListener('context-request', this);
30 | }
31 |
32 | detach(target) {
33 | target.removeEventListener('context-request', this);
34 | }
35 |
36 | /**
37 | * Handle a context-request event
38 | * @param {ContextRequestEvent} e
39 | */
40 | handleEvent(e) {
41 | if (e.context === this.context) {
42 | if (e.subscribe) {
43 | const unsubscribe = () => this.removeEventListener('change', update);
44 | const update = () => e.callback(this.value, unsubscribe);
45 | this.addEventListener('change', update);
46 | update();
47 | } else {
48 | e.callback(this.value);
49 | }
50 | e.stopPropagation();
51 | }
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/public/pages/examples/applications/single-page/app/App.js:
--------------------------------------------------------------------------------
1 | class App extends HTMLElement {
2 | connectedCallback() {
3 | this.innerHTML = `
4 | Basic Example
5 |
6 |
7 | This example demonstrates how the features of a framework router
8 | can be approximated using web components and a vanilla hash router.
9 |
10 |
11 | Check out the original React Router basic example for comparison.
12 |
13 |
14 |
15 |
16 |
18 | Home
19 |
20 |
21 | About
22 |
23 |
24 | Dashboard
25 |
26 |
27 | Nothing to see here
28 | Go to the home page
29 |
30 |
31 | `;
32 | }
33 | }
34 |
35 | class AppLayout extends HTMLElement {
36 | connectedCallback() {
37 | this.innerHTML = `
38 |
39 |
45 |
46 | Single-page Example
5 | Please enable JavaScript to view this page.
11 |
13 |
14 |
--------------------------------------------------------------------------------
/public/pages/examples/applications/single-page/index.js:
--------------------------------------------------------------------------------
1 | import { registerApp } from "./app/App.js";
2 | import { registerRouteComponent } from "./components/route/route.js";
3 |
4 | const app = () => {
5 | registerRouteComponent();
6 | registerApp();
7 |
8 | const template = document.querySelector('template#root');
9 | if (template) document.body.appendChild(template.content, true);
10 | }
11 |
12 | document.addEventListener('DOMContentLoaded', app);
13 |
--------------------------------------------------------------------------------
/public/pages/examples/components/adding-children/components/avatar.css:
--------------------------------------------------------------------------------
1 | x-avatar {
2 | display: flex;
3 | align-items: center;
4 | justify-content: center;
5 | width: 2.5rem;
6 | height: 2.5rem;
7 | }
8 |
9 | x-avatar[size=lg] {
10 | width: 3.5rem;
11 | height: 3.5rem;
12 | }
13 |
14 | x-avatar img {
15 | border-radius: 9999px;
16 | width: 100%;
17 | height: 100%;
18 | vertical-align: middle;
19 | object-fit: cover;
20 | }
21 |
--------------------------------------------------------------------------------
/public/pages/examples/components/adding-children/components/avatar.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Usage:
3 | * Avatar and badge, when their powers combine...
9 |
10 |
11 |
13 | ←
14 |
17 |
18 |
--------------------------------------------------------------------------------
/public/pages/examples/components/adding-children/index.js:
--------------------------------------------------------------------------------
1 | import { registerAvatarComponent } from './components/avatar.js';
2 | import { registerBadgeComponent } from './components/badge.js';
3 | const app = () => {
4 | registerAvatarComponent();
5 | registerBadgeComponent();
6 | }
7 | document.addEventListener('DOMContentLoaded', app);
8 |
--------------------------------------------------------------------------------
/public/pages/examples/components/advanced/components/avatar.css:
--------------------------------------------------------------------------------
1 | x-avatar {
2 | display: flex;
3 | align-items: center;
4 | justify-content: center;
5 | width: 2.5rem;
6 | height: 2.5rem;
7 | }
8 |
9 | x-avatar[size=lg] {
10 | width: 3.5rem;
11 | height: 3.5rem;
12 | }
13 |
14 | x-avatar img {
15 | border-radius: 9999px;
16 | width: 100%;
17 | height: 100%;
18 | vertical-align: middle;
19 | object-fit: cover;
20 | }
21 |
--------------------------------------------------------------------------------
/public/pages/examples/components/advanced/components/avatar.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Usage:
3 | * A basic avatar component in two sizes:
9 | Santa's List
8 | ' +
12 | this.#currentList.map(person =>
13 |
14 | // the html`` literal automatically encodes entities in the variables
15 | html`${person.name} is ${person.nice ? 'nice' : 'naughty'} `
16 |
17 | ).join('\n') +
18 | ' ';
19 | }
20 | }
21 |
22 | export const registerSantasList =
23 | () => customElements.define('santas-list', SantasList);
24 |
--------------------------------------------------------------------------------
/public/pages/examples/components/data/components/list.js:
--------------------------------------------------------------------------------
1 | class SantasList extends HTMLElement {
2 | #currentList = [/* { name, nice } */];
3 | set list(newList) {
4 | this.#currentList = newList;
5 | this.update();
6 | }
7 | update() {
8 | this.innerHTML =
9 | '' +
10 | this.#currentList.map(person =>
11 | `${person.name} is ${person.nice ? 'nice' : 'naughty'} `
12 | ).join('\n') +
13 | ' ';
14 | }
15 | }
16 |
17 | export const registerSantasList =
18 | () => customElements.define('santas-list', SantasList);
19 |
--------------------------------------------------------------------------------
/public/pages/examples/components/data/components/summary.js:
--------------------------------------------------------------------------------
1 | class SantasSummary extends HTMLElement {
2 | update(list) {
3 | const nice = list.filter((item) => item.nice).length;
4 | const naughty = list.length - nice;
5 | this.innerHTML = list.length ? `
6 | ${nice} nice, ${naughty} naughty
7 | ` : "Nobody's on the list yet.
";
8 | }
9 | }
10 |
11 | export const registerSantasSummary =
12 | () => customElements.define('santas-summary', SantasSummary);
13 |
--------------------------------------------------------------------------------
/public/pages/examples/components/data/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
3 | margin: 1em;
4 | }
5 |
6 | button { font-family: inherit; font-size: 100%; margin-left: 0.5em; }
7 |
8 | santas-form { display: block }
9 | santas-form * { vertical-align: middle; }
10 |
11 | santas-app h1 { color: darkred; }
12 |
--------------------------------------------------------------------------------
/public/pages/examples/components/data/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 |
12 |
13 |
14 | Hello, shadow DOM!
15 |
16 |
17 |
--------------------------------------------------------------------------------
/public/pages/examples/components/shadow-dom/index.js:
--------------------------------------------------------------------------------
1 | import { registerAvatarComponent } from './components/avatar.js';
2 | import { registerBadgeComponent } from './components/badge.js';
3 | import { registerHeaderComponent } from './components/header.js';
4 | const app = () => {
5 | registerAvatarComponent();
6 | registerBadgeComponent();
7 | registerHeaderComponent();
8 | }
9 | document.addEventListener('DOMContentLoaded', app);
10 |
--------------------------------------------------------------------------------
/public/pages/examples/components/shadow-dom/reset.css:
--------------------------------------------------------------------------------
1 | /* generic minimal CSS reset
2 | inspiration: https://www.digitalocean.com/community/tutorials/css-minimal-css-reset */
3 |
4 | :root {
5 | box-sizing: border-box;
6 | line-height: 1.4;
7 | /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
8 | -moz-text-size-adjust: none;
9 | -webkit-text-size-adjust: none;
10 | text-size-adjust: none;
11 | }
12 |
13 | *, *:before, *:after {
14 | box-sizing: inherit;
15 | }
16 |
17 | body, h1, h2, h3, h4, h5, h6, p {
18 | margin: 0;
19 | padding: 0;
20 | font-weight: normal;
21 | }
22 |
23 | img {
24 | max-width:100%;
25 | height:auto;
26 | }
27 |
--------------------------------------------------------------------------------
/public/pages/examples/components/simple/hello-world.js:
--------------------------------------------------------------------------------
1 | class HelloWorldComponent extends HTMLElement {
2 | connectedCallback() {
3 | this.textContent = 'hello world!';
4 | }
5 | }
6 | customElements.define('x-hello-world', HelloWorldComponent);
7 |
--------------------------------------------------------------------------------
/public/pages/examples/components/simple/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | I just want to say...
6 | Page loaded ${this.#now.fromNow()}, TTFB ${this.#ttfb} milliseconds
22 | `;
23 | }
24 | }
25 |
26 | export const registerMetricsComponent = () => {
27 | customElements.define('x-metrics', MetricsComponent);
28 | }
--------------------------------------------------------------------------------
/public/pages/examples/sites/importmap/index.css:
--------------------------------------------------------------------------------
1 | body { font-family: sans-serif; }
2 |
--------------------------------------------------------------------------------
/public/pages/examples/sites/importmap/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(""+p)),a="string"==typeof v?v.replace("%d",p):v(p,n,y.l,s);break}}if(n)return a;var M=s?l.future:l.past;return"function"==typeof M?M(a):M.replace("%s",a)},n.to=function(r,e){return i(r,e,this,!0)},n.from=function(r,e){return i(r,e,this)};var d=function(r){return r.$u?t.utc():t()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)}}}));
--------------------------------------------------------------------------------
/public/pages/examples/sites/imports/components/metrics.js:
--------------------------------------------------------------------------------
1 | import { dayjs, webVitals } from '../lib/imports.js';
2 |
3 | class MetricsComponent extends HTMLElement {
4 | #now = dayjs();
5 | #ttfb;
6 | #interval;
7 |
8 | connectedCallback() {
9 | webVitals.onTTFB(_ => this.#ttfb = Math.round(_.value));
10 | this.#interval = setInterval(() => this.update(), 500);
11 | }
12 |
13 | disconnectedCallback() {
14 | clearInterval(this.#interval);
15 | this.#interval = null;
16 | }
17 |
18 | update() {
19 | this.innerHTML = `
20 | Page loaded ${this.#now.fromNow()}, TTFB ${this.#ttfb} milliseconds
21 | `;
22 | }
23 | }
24 |
25 | export const registerMetricsComponent = () => {
26 | customElements.define('x-metrics', MetricsComponent);
27 | }
--------------------------------------------------------------------------------
/public/pages/examples/sites/imports/index.css:
--------------------------------------------------------------------------------
1 | body { font-family: sans-serif; }
2 |
--------------------------------------------------------------------------------
/public/pages/examples/sites/imports/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(""+p)),a="string"==typeof v?v.replace("%d",p):v(p,n,y.l,s);break}}if(n)return a;var M=s?l.future:l.past;return"function"==typeof M?M(a):M.replace("%s",a)},n.to=function(r,e){return i(r,e,this,!0)},n.from=function(r,e){return i(r,e,this)};var d=function(r){return r.$u?t.utc():t()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)}}}));
--------------------------------------------------------------------------------
/public/pages/examples/sites/imports/lib/imports.js:
--------------------------------------------------------------------------------
1 | // UMD version of dayjs, from https://unpkg.com/dayjs/
2 | const dayjs = window.dayjs;
3 | const dayjsRelativeTime = window.dayjs_plugin_relativeTime;
4 | dayjs.extend(dayjsRelativeTime);
5 |
6 | // ESM version of web-vitals, from https://unpkg.com/web-vitals/dist/web-vitals.js
7 | import * as webVitals from './web-vitals.js';
8 |
9 | export { dayjs, webVitals };
10 |
--------------------------------------------------------------------------------
/public/pages/examples/sites/page/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Example
5 | Please enable JavaScript to view this page correctly.
13 | title and navigation ...
14 |
15 |
16 | main content ...
17 |
18 |
19 | byline and copyright ...
20 |
21 |
22 |
--------------------------------------------------------------------------------
/public/pages/examples/sites/page/example2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Example
5 | Please enable JavaScript to view this page.
13 |
14 | title and navigation ...
15 |
16 |
17 | main content ...
18 |
19 |
20 | byline and copyright ...
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/public/pages/examples/sites/page/index.js:
--------------------------------------------------------------------------------
1 | const app = () => {
2 | const template = document.querySelector('template#page');
3 | if (template) document.body.appendChild(template.content, true);
4 | }
5 |
6 | document.addEventListener('DOMContentLoaded', app);
7 |
--------------------------------------------------------------------------------
/public/pages/examples/styling/replacing-css-modules/nextjs/layout.tsx:
--------------------------------------------------------------------------------
1 | import styles from './styles.module.css'
2 |
3 | export default function DashboardLayout({
4 | children,
5 | }: {
6 | children: React.ReactNode
7 | }) {
8 | return
9 | }
--------------------------------------------------------------------------------
/public/pages/examples/styling/replacing-css-modules/nextjs/styles.module.css:
--------------------------------------------------------------------------------
1 | .dashboard {
2 | padding: 24px;
3 | }
--------------------------------------------------------------------------------
/public/pages/examples/styling/replacing-css-modules/vanilla/layout.js:
--------------------------------------------------------------------------------
1 | class Layout extends HTMLElement {
2 | constructor() {
3 | super();
4 | this.attachShadow({ mode: 'open' });
5 | this.shadowRoot.innerHTML = `
6 | For example...
';
4 | }
5 | }
6 | export const registerExampleComponent = () => {
7 | customElements.define('x-example', ExampleComponent);
8 | }
9 |
--------------------------------------------------------------------------------
/public/pages/examples/styling/scoping-prefixed/components/example/example_nested.css:
--------------------------------------------------------------------------------
1 | x-example {
2 | p {
3 | font-family: casual, cursive;
4 | color: darkblue;
5 | }
6 | }
--------------------------------------------------------------------------------
/public/pages/examples/styling/scoping-prefixed/index.css:
--------------------------------------------------------------------------------
1 | @import "./components/example/example.css";
2 |
--------------------------------------------------------------------------------
/public/pages/examples/styling/scoping-prefixed/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | This <p> is not affected, because it is outside the custom element.
10 |
11 |
--------------------------------------------------------------------------------
/public/pages/examples/styling/scoping-prefixed/index.js:
--------------------------------------------------------------------------------
1 | import { registerExampleComponent } from './components/example/example.js';
2 | const app = () => {
3 | registerExampleComponent();
4 | }
5 | document.addEventListener('DOMContentLoaded', app);
6 |
--------------------------------------------------------------------------------
/public/pages/examples/styling/scoping-shadowed/components/example/example.css:
--------------------------------------------------------------------------------
1 | p {
2 | font-family: casual, cursive;
3 | color: darkblue;
4 | }
--------------------------------------------------------------------------------
/public/pages/examples/styling/scoping-shadowed/components/example/example.js:
--------------------------------------------------------------------------------
1 | class ExampleComponent extends HTMLElement {
2 | constructor() {
3 | super();
4 | this.attachShadow({mode: 'open'});
5 | this.shadowRoot.innerHTML = `
6 | For example...
8 |
8 | This <p> is not affected, even though it is slotted.
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/public/pages/examples/styling/scoping-shadowed/index.js:
--------------------------------------------------------------------------------
1 | import { registerExampleComponent } from './components/example/example.js';
2 | const app = () => {
3 | registerExampleComponent();
4 | }
5 | document.addEventListener('DOMContentLoaded', app);
6 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow: /blog/generator.html
3 | Disallow: /pages/examples/
4 |
--------------------------------------------------------------------------------
/public/sitemap.txt:
--------------------------------------------------------------------------------
1 | https://plainvanillaweb.com/
2 | https://plainvanillaweb.com/index.html
3 | https://plainvanillaweb.com/pages/components.html
4 | https://plainvanillaweb.com/pages/styling.html
5 | https://plainvanillaweb.com/pages/sites.html
6 | https://plainvanillaweb.com/pages/applications.html
7 | https://plainvanillaweb.com/blog/index.html
8 | https://plainvanillaweb.com/blog/archive.html
9 | https://plainvanillaweb.com/blog/articles/2024-08-17-lets-build-a-blog/index.html
10 | https://plainvanillaweb.com/blog/articles/2024-08-25-vanilla-entity-encoding/index.html
11 | https://plainvanillaweb.com/blog/articles/2024-08-30-poor-mans-signals/index.html
12 | https://plainvanillaweb.com/blog/articles/2024-09-03-unix-philosophy/index.html
13 | https://plainvanillaweb.com/blog/articles/2024-09-06-how-fast-are-web-components/index.html
14 |
--------------------------------------------------------------------------------
/public/styles/reset.css:
--------------------------------------------------------------------------------
1 | /* generic minimal CSS reset
2 | inspiration: https://www.digitalocean.com/community/tutorials/css-minimal-css-reset */
3 |
4 | :root {
5 | box-sizing: border-box;
6 | line-height: 1.4;
7 | /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
8 | -moz-text-size-adjust: none;
9 | -webkit-text-size-adjust: none;
10 | text-size-adjust: none;
11 | }
12 |
13 | *, *::before, *::after {
14 | box-sizing: inherit;
15 | }
16 |
17 | body, h1, h2, h3, h4, h5, h6, p {
18 | margin: 0;
19 | padding: 0;
20 | font-weight: normal;
21 | }
22 |
23 | img {
24 | max-width:100%;
25 | height:auto;
26 | }
27 |
--------------------------------------------------------------------------------
/public/styles/variables.css:
--------------------------------------------------------------------------------
1 | :root {
2 | /* https://modernfontstacks.com/
3 | geometric humanist font */
4 | --font-system: Avenir, Montserrat, Corbel, source-sans-pro, sans-serif;
5 | /* monospace code font */
6 | --font-system-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
7 | --font-system-code-size: 0.8rem;
8 |
9 | --background-color: white;
10 |
11 | --text-color: black;
12 | --text-color-mute: hsl(0, 0%, 40%);
13 |
14 | --link-color: darkblue;
15 |
16 | --nav-separator-color: goldenrod;
17 | --nav-background-color: hsl(50, 50%, 95%);
18 |
19 | --border-color: black;
20 |
21 | --code-text-color: var(--text-color);
22 | --code-text-color-bg: inherit;
23 |
24 | --panel-title-color: black;
25 | --panel-title-color-bg: cornsilk;
26 | }
27 |
--------------------------------------------------------------------------------
/public/tests/imports-test.js:
--------------------------------------------------------------------------------
1 | const { expect } = window.chai;
2 | const { getByText, queries, within, waitFor, fireEvent } = window.TestingLibraryDom;
3 |
4 | let rootContainer;
5 | let screen;
6 |
7 | beforeEach(() => {
8 | // the hidden div where the test can render elements
9 | rootContainer = document.createElement("div");
10 | rootContainer.style.position = 'absolute';
11 | rootContainer.style.left = '-10000px';
12 | document.body.appendChild(rootContainer);
13 | // pre-bind @testing-library/dom helpers to rootContainer
14 | screen = Object.keys(queries).reduce((helpers, key) => {
15 | const fn = queries[key]
16 | helpers[key] = fn.bind(null, rootContainer)
17 | return helpers
18 | }, {});
19 | });
20 |
21 | afterEach(() => {
22 | document.body.removeChild(rootContainer);
23 | rootContainer = null;
24 | });
25 |
26 | function render(el) {
27 | rootContainer.appendChild(el);
28 | }
29 |
30 | export {
31 | rootContainer,
32 | expect,
33 | render,
34 | getByText, screen, within, waitFor, fireEvent
35 | };
36 |
--------------------------------------------------------------------------------
/public/tests/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Plain Vanilla - Tests
5 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/public/tests/index.js:
--------------------------------------------------------------------------------
1 | import { registerTabPanelComponent } from "../components/tab-panel/tab-panel.js";
2 |
3 | const app = () => {
4 | registerTabPanelComponent();
5 | mocha.run();
6 | }
7 |
8 | document.addEventListener('DOMContentLoaded', app);
9 |
--------------------------------------------------------------------------------
/public/tests/tabpanel.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen, waitFor, expect, fireEvent } from './imports-test.js';
2 |
3 | const renderTabPanel = () => {
4 | const div = document.createElement('div');
5 | div.innerHTML = `
6 |
7 |
8 | Tab 1 content
9 |
10 |
11 | Tab 2 content
12 |
13 |
14 | `;
15 | render(div);
16 | }
17 |
18 | describe('tabpanel', () => {
19 | it("renders a tabpanel with active tab", async () => {
20 | // ARRANGE
21 | renderTabPanel();
22 |
23 | // ASSERT
24 | // active tab is selected
25 | const activeTab = await screen.findByRole('tab', { name: 'Tab 1', selected: true });
26 | expect(activeTab).to.not.be.undefined;
27 | // active tabpanel is visible
28 | const activePanel = screen.getByText(/Tab 1 content/);
29 | expect(activePanel).to.not.be.undefined;
30 | // not active tabpanel content is hidden
31 | const tab2 = screen.getByTitle('Tab 2');
32 | await waitFor(() => expect(tab2.offsetParent).to.be.null);
33 | });
34 |
35 | it("activates a different tab on click", async () => {
36 | // ARRANGE
37 | renderTabPanel();
38 | const tab2 = screen.getByTitle('Tab 2');
39 |
40 | // ASSERT
41 | // inactive tabpanel content is hidden
42 | await waitFor(() => expect(tab2.offsetParent).to.be.null);
43 | // find inactive tab button and click it
44 | const tab2Button = await screen.findByRole('tab', { name: 'Tab 2' });
45 | expect(tab2Button).not.to.be.undefined;
46 | fireEvent.click(tab2Button);
47 | // inactive tabpanel content is made visible
48 | await waitFor(() => expect(tab2.offsetParent).not.to.be.null);
49 | });
50 | });
51 |
--------------------------------------------------------------------------------
4 | 
12 | 
29 |