Skip to content

Commit 444d4e8

Browse files
bennypowersbennypowers
committed
test: ssr demos
backported from #2505
1 parent 35a459e commit 444d4e8

File tree

8 files changed

+202
-103
lines changed

8 files changed

+202
-103
lines changed

‎core/pfe-core/controllers/slot-controller-server.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,9 @@ export class SlotController implements SlotControllerPublicAPI {
1010
/** @deprecated use `default` */
1111
public static anonymous: symbol = this.default;
1212

13-
static property = 'ssrHintHasSlotted' as const;
14-
1513
static attribute = 'ssr-hint-has-slotted' as const;
1614

17-
static anonymousAttribute = 'ssr-hint-has-default-slotted' as const;
15+
static anonymousAttribute = 'ssr-hint-has-slotted-default' as const;
1816

1917
constructor(public host: ReactiveElement, ..._: SlotControllerArgs) {
2018
host.addController(this);

‎docs/components/demos.11tydata.cjs‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
module.exports = {
2+
templateEngineOverride: 'njk',
3+
permalink: '{{ demo.permalink }}',
4+
pagination: {
5+
data: 'demos',
6+
alias: 'demo',
7+
size: 1,
8+
before: xs => xs.filter(x => x.permalink),
9+
},
10+
preloads: [
11+
'@lit/[email protected]/development/css-tag.js',
12+
'@lit/[email protected]/development/decorators/base.js',
13+
'@lit/[email protected]/development/decorators/custom-element.js',
14+
'@lit/[email protected]/development/decorators/event-options.js',
15+
'@lit/[email protected]/development/decorators/property.js',
16+
'@lit/[email protected]/development/decorators/query-all.js',
17+
'@lit/[email protected]/development/decorators/query-assigned-nodes.js',
18+
'@lit/[email protected]/development/decorators/query-async.js',
19+
'@lit/[email protected]/development/decorators/query.js',
20+
'@lit/[email protected]/development/decorators/state.js',
21+
'@lit/[email protected]/development/reactive-element.js',
22+
'[email protected]/development/experimental-hydrate-support.js',
23+
'[email protected]/development/lit-element.js',
24+
'[email protected]/_/a39ea7cf.js',
25+
'[email protected]/development/async-directive.js',
26+
'[email protected]/development/directive-helpers.js',
27+
'[email protected]/development/directive.js',
28+
'[email protected]/development/directives/guard.js',
29+
'[email protected]/development/directives/if-defined.js',
30+
'[email protected]/development/directives/live.js',
31+
'[email protected]/development/directives/ref.js',
32+
'[email protected]/development/directives/repeat.js',
33+
'[email protected]/development/directives/style-map.js',
34+
'[email protected]/development/directives/template-content.js',
35+
'[email protected]/development/directives/unsafe-html.js',
36+
'[email protected]/development/directives/unsafe-svg.js',
37+
'[email protected]/development/directives/until.js',
38+
'[email protected]/development/experimental-hydrate.js',
39+
'[email protected]/development/lit-html.js',
40+
'[email protected]/development/static.js',
41+
'[email protected]/async-directive.js',
42+
'[email protected]/decorators.js',
43+
'[email protected]/decorators/query-all.js',
44+
'[email protected]/decorators/query-assigned-nodes.js',
45+
'[email protected]/decorators/query-async.js',
46+
'[email protected]/decorators/query.js',
47+
'[email protected]/directives/guard.js',
48+
'[email protected]/directives/if-defined.js',
49+
'[email protected]/directives/live.js',
50+
'[email protected]/directives/ref.js',
51+
'[email protected]/directives/repeat.js',
52+
'[email protected]/directives/style-map.js',
53+
'[email protected]/directives/template-content.js',
54+
'[email protected]/directives/unsafe-html.js',
55+
'[email protected]/directives/unsafe-svg.js',
56+
'[email protected]/directives/until.js',
57+
'[email protected]/experimental-hydrate-support.js',
58+
'[email protected]/experimental-hydrate.js',
59+
'[email protected]/html.js',
60+
'[email protected]/index.js',
61+
'[email protected]/polyfill-support.js',
62+
'[email protected]/static-html.js',
63+
],
64+
};

‎docs/components/demos.html‎

Lines changed: 54 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,56 @@
1-
---js
2-
{
3-
templateEngineOverride: 'njk',
4-
permalink: '{{ demo.permalink }}',
5-
pagination: {
6-
data: 'demos',
7-
alias: 'demo',
8-
size: 1,
9-
before: xs => xs.filter(x => x.permalink),
10-
},
11-
preloads: [
12-
'@lit/[email protected]/development/css-tag.js',
13-
'@lit/[email protected]/development/decorators/base.js',
14-
'@lit/[email protected]/development/decorators/custom-element.js',
15-
'@lit/[email protected]/development/decorators/event-options.js',
16-
'@lit/[email protected]/development/decorators/property.js',
17-
'@lit/[email protected]/development/decorators/query-all.js',
18-
'@lit/[email protected]/development/decorators/query-assigned-nodes.js',
19-
'@lit/[email protected]/development/decorators/query-async.js',
20-
'@lit/[email protected]/development/decorators/query.js',
21-
'@lit/[email protected]/development/decorators/state.js',
22-
'@lit/[email protected]/development/reactive-element.js',
23-
'[email protected]/development/experimental-hydrate-support.js',
24-
'[email protected]/development/lit-element.js',
25-
'[email protected]/_/a39ea7cf.js',
26-
'[email protected]/development/async-directive.js',
27-
'[email protected]/development/directive-helpers.js',
28-
'[email protected]/development/directive.js',
29-
'[email protected]/development/directives/guard.js',
30-
'[email protected]/development/directives/if-defined.js',
31-
'[email protected]/development/directives/live.js',
32-
'[email protected]/development/directives/ref.js',
33-
'[email protected]/development/directives/repeat.js',
34-
'[email protected]/development/directives/style-map.js',
35-
'[email protected]/development/directives/template-content.js',
36-
'[email protected]/development/directives/unsafe-html.js',
37-
'[email protected]/development/directives/unsafe-svg.js',
38-
'[email protected]/development/directives/until.js',
39-
'[email protected]/development/experimental-hydrate.js',
40-
'[email protected]/development/lit-html.js',
41-
'[email protected]/development/static.js',
42-
'[email protected]/async-directive.js',
43-
'[email protected]/decorators.js',
44-
'[email protected]/decorators/query-all.js',
45-
'[email protected]/decorators/query-assigned-nodes.js',
46-
'[email protected]/decorators/query-async.js',
47-
'[email protected]/decorators/query.js',
48-
'[email protected]/directives/guard.js',
49-
'[email protected]/directives/if-defined.js',
50-
'[email protected]/directives/live.js',
51-
'[email protected]/directives/ref.js',
52-
'[email protected]/directives/repeat.js',
53-
'[email protected]/directives/style-map.js',
54-
'[email protected]/directives/template-content.js',
55-
'[email protected]/directives/unsafe-html.js',
56-
'[email protected]/directives/unsafe-svg.js',
57-
'[email protected]/directives/until.js',
58-
'[email protected]/experimental-hydrate-support.js',
59-
'[email protected]/experimental-hydrate.js',
60-
'[email protected]/html.js',
61-
'[email protected]/index.js',
62-
'[email protected]/polyfill-support.js',
63-
'[email protected]/static-html.js',
64-
]
65-
}
66-
---
671
<!DOCTYPE html>
68-
<html lang="en" dir="ltr" style="height: 100%">
69-
<head>
70-
<meta charset="utf-8">
71-
<meta name="viewport" content="width=device-width, initial-scale=1">
72-
<meta name="description" content="PatternFly Elements: A set of community-created web components based on PatternFly design.">
73-
<link href="{{ '/brand/logo/svg/pfe-icon-blue.svg' | url }}" rel="shortcut icon">
74-
<title>{{ demo.title or (demo.tagName) }} | PatternFly Elements</title>
75-
<link rel="preconnect" href="https://ga.jspm.io">
76-
<link rel="preconnect" href="https://fonts.gstatic.com">
77-
<script type="importmap">{{ importMap | dump | safe }}</script>
78-
{%- for path in preloads -%}
79-
<link rel="modulepreload" href="https://ga.jspm.io/npm:{{ path }}">
80-
{%- endfor -%}
81-
<link rel="stylesheet" href="{{ '/main.css' | url }}">
82-
<noscript><link href="{{ '/core/styles/pf--noscript.min.css' | url }}" rel="stylesheet"></noscript>
83-
<script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>
84-
<script type="module">import 'element-internals-polyfill';</script>
85-
</head>
86-
<body style="height: 100%">
87-
<main style="height: 100%">
88-
<div data-demo="{{demo.tagName}}">{% if demo.filePath %}
89-
{%- include demo.filePath -%}{% endif %}
90-
</div>
91-
</main>
92-
</body>
2+
<html lang="en"
3+
dir="ltr">
4+
5+
<head>
6+
<meta charset="utf-8">
7+
<meta name="viewport"
8+
content="width=device-width, initial-scale=1">
9+
<meta name="description"
10+
content="PatternFly Elements: A set of community-created web components based on PatternFly design.">
11+
<link href="{{ '/brand/logo/svg/pfe-icon-blue.svg' | url }}"
12+
rel="shortcut icon">
13+
<title>{{ demo.title or (demo.tagName) }} | PatternFly Elements</title>
14+
<link rel="preconnect"
15+
href="https://ga.jspm.io">
16+
<link rel="preconnect"
17+
href="https://fonts.gstatic.com">
18+
<script type="importmap">{{ importMap | dump | safe }}</script>
19+
{%- for path in preloads -%}
20+
<link rel="modulepreload"
21+
href="https://ga.jspm.io/npm:{{ path }}">
22+
{%- endfor -%}
23+
<link rel="stylesheet"
24+
href="{{ '/main.css' | url }}">
25+
<noscript>
26+
<link href="{{ '/core/styles/pf--noscript.min.css' | url }}"
27+
rel="stylesheet">
28+
</noscript>
29+
<script async
30+
src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>
31+
<script type="module">import 'element-internals-polyfill';</script>
32+
<style>
33+
html,
34+
body,
35+
main {
36+
min-height: 100%;
37+
}
38+
</style>
39+
<noscript>
40+
<style>
41+
:not(:defined) {
42+
opacity: 1;
43+
}
44+
</style>
45+
</noscript>
46+
</head>
47+
48+
<body>
49+
<main>
50+
<div data-demo="{{demo.tagName}}">{% if demo.filePath %}
51+
{%- include demo.filePath -%}{% endif %}
52+
</div>
53+
</main>
54+
</body>
55+
9356
</html>

‎elements/pf-card/demo/ssr.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<pf-card ssr-hint-has-slotted-default
2+
ssr-hint-has-slotted="header,footer">
3+
<h2 slot="header">Header</h2>
4+
<p>Body</p>
5+
<span slot="footer">Footer</span>
6+
</pf-card>
7+
8+
<pf-card ssr-hint-has-slotted-defaul>
9+
<p>Body</p>
10+
</pf-card>
11+
12+
<pf-card ssr-hint-has-slotted="header">
13+
<h2 slot="header">Header</h2>
14+
</pf-card>
15+
16+
<pf-card ssr-hint-has-slotted-default
17+
ssr-hint-has-slotted="header">
18+
<h2 slot="header">Header</h2>
19+
<p>Body</p>
20+
</pf-card>
21+
22+
<pf-card ssr-hint-has-slotted="header,footer">
23+
<h2 slot="header">Header</h2>
24+
<span slot="footer">Footer</span>
25+
</pf-card>
26+
27+
<pf-card ssr-hint-has-slotted-default
28+
ssr-hint-has-slotted="footer">
29+
<p>Body</p>
30+
<span slot="footer">Footer</span>
31+
</pf-card>
32+
33+
<pf-card ssr-hint-has-slotted="footer">
34+
<span slot="footer">Footer</span>
35+
</pf-card>
36+
37+
<style>
38+
main {
39+
padding: 2em;
40+
background: #eeeeee;
41+
display: grid;
42+
grid-template-columns: 1fr;
43+
grid-template-rows: max-content 1fr;
44+
gap: 1em;
45+
}
46+
47+
[data-demo] {
48+
display: contents;
49+
}
50+
</style>

‎elements/pf-card/test/pf-card.e2e.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
44

55
const tagName = 'pf-card';
66

7+
const html = String.raw;
8+
79
test.describe(tagName, () => {
810
test('snapshot', async ({ page }) => {
911
const componentPage = new PfeDemoPage(page, tagName);
@@ -28,8 +30,9 @@ test.describe(tagName, () => {
2830
tagName,
2931
browser,
3032
importSpecifiers: [`@patternfly/elements/${tagName}/${tagName}.js`],
31-
demoContent: /* html */ `
32-
<pf-card ssr-hint-has-default-slotted ssr-hint-has-slotted="header,footer">
33+
demoContent: html`
34+
<pf-card ssr-hint-has-slotted-default
35+
ssr-hint-has-slotted="header,footer">
3336
<h2 slot="header">Header</h2>
3437
<span>Body</span>
3538
<span slot="footer">Footer</span>

‎eleventy.config.cjs‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const { EleventyRenderPlugin } = require('@11ty/eleventy');
22
const SyntaxHighlightPlugin = require('@11ty/eleventy-plugin-syntaxhighlight');
33
const DirectoryOutputPlugin = require('@11ty/eleventy-plugin-directory-output');
4+
const LitSSRPlugin = require('@lit-labs/eleventy-plugin-lit');
45

56
const PfeAssetsPlugin = require('./docs/_plugins/pfe-assets.cjs');
67
const EmptyParagraphPlugin = require('./docs/_plugins/empty-p.cjs');
@@ -92,6 +93,14 @@ module.exports = function(eleventyConfig) {
9293
},
9394
});
9495

96+
eleventyConfig.addPlugin(LitSSRPlugin, {
97+
componentModules: [
98+
'elements/pf-card/pf-card.js',
99+
'elements/pf-jump-links/pf-jump-links.js',
100+
],
101+
});
102+
103+
95104
if (!process.argv.some(arg =>
96105
arg.match(/--((w)(atch)?)|((s)(erve))?/))) {
97106
eleventyConfig.addPlugin(DirectoryOutputPlugin, {

‎tools/pfe-tools/dev-server/demo.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -597,3 +597,11 @@ footer ul {
597597
top: 2rem;
598598
}
599599
}
600+
601+
strong.noscript {
602+
background-color: var(--pf-global--danger-color--100, #c9190b);
603+
color: white;
604+
border-radius: 4px;
605+
padding: 4px 12px;
606+
display: inline-block;
607+
}

‎tools/pfe-tools/dev-server/plugins/templates/index.html‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr" unresolved>
3+
14
{% set groupeddemos = demos | sort(false, false, 'permalink') | groupby('primaryElementName') %}
25
{% if demo.title %}
36
{% set title = demo.title + ' | ' + options.site.title %}
@@ -16,8 +19,6 @@
1619
{% set repoHost = '' %}
1720
{% endif %}
1821
{% endif %}
19-
<!DOCTYPE html>
20-
<html lang="en" dir="ltr" unresolved>
2122

2223
<head>
2324
<meta charset="utf-8">
@@ -28,6 +29,7 @@
2829
<title>{{ title }}</title>
2930
<link rel="stylesheet" href="/node_modules/@patternfly/pfe-tools/dev-server/fonts.css">
3031
<link rel="stylesheet" href="/node_modules/@patternfly/pfe-tools/dev-server/demo.css">
32+
<noscript><style>html[unresolved] { opacity: 1; }</style></noscript>
3133
{% for sheet in options.site.stylesheets %}
3234
<link rel="stylesheet" href="{{ sheet }}">
3335
{% endfor %}
@@ -43,16 +45,18 @@
4345
<body class="menu-open">
4446
<header id="main-header">
4547
<div class="logo-bar">
46-
<pf-button
47-
id="hamburger"
48-
plain
49-
aria-controls="sidebar"
50-
label="Expand Main Navigation">
48+
<pf-button id="hamburger"
49+
plain
50+
aria-controls="sidebar"
51+
label="Expand Main Navigation">
5152
<pf-icon icon="bars" size="lg"></pf-icon>
5253
</pf-button>
5354
<a href="/" aria-label="{{ title }} Home">
5455
<img src="{{ options.site.logoUrl }}" alt="{{ title }}">
5556
</a>
57+
58+
<noscript><strong class="noscript">JavaScript is disabled</strong></noscript>
59+
5660
<a id="source-control" href="{{
5761
options.sourceControlURLPrefix.replace('tree/main/', '')
5862
}}{{

0 commit comments

Comments
 (0)