Skip to content

(ssr) - create initial template for ssr plugin #400

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

(ssr) - create initial template for ssr plugin #400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d710dd
port ssr-plugin to new structure
JoviDeCroock Mar 7, 2021
a0951d8
update pkg.json
JoviDeCroock Mar 7, 2021
ed2003e
use hydrate
JoviDeCroock Mar 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added packages/ssr-plugin/README.md
View file
Open in desktop
Empty file.
3 changes: 3 additions & 0 deletions packages/ssr-plugin/example/.env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
FOO="bar"
OVERRIDE=1
EMPTY=
1 change: 1 addition & 0 deletions packages/ssr-plugin/example/.env.development
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
FOO_DEV="bar"
1 change: 1 addition & 0 deletions packages/ssr-plugin/example/.env.development.local
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
FOO_DEV_LOCAL="bar"
2 changes: 2 additions & 0 deletions packages/ssr-plugin/example/.env.local
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
FOO_LOCAL="bar"
OVERRIDE=11
10 changes: 10 additions & 0 deletions packages/ssr-plugin/example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"scripts": {
"dev": "cross-env node --experimental-modules ../../wmr/src/cli.js 2>&1"
},
"type": "module",
"devDependencies": {
"cross-env": "7.0.3",
"wmr": "latest"
}
}
23 changes: 23 additions & 0 deletions packages/ssr-plugin/example/public/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { useLocation } from './lib/loc.js';

export default function Header() {
const { url }: { url: string } = useLocation();
return (
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/lazy-and-late">Lazy and Late</a>
<a href="/compat">Compat</a>
<a href="/class-fields">Class-Fields</a>
<a href="/files">Files</a>
<a href="/env">Env</a>
<a href="/error">Error</a>
</nav>
<label>
URL:
<input readonly value={url} ref={c => c && (c.size = c.value.length)} />
</label>
</header>
);
}
22 changes: 22 additions & 0 deletions packages/ssr-plugin/example/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>WMR Demo</title>
<meta name="description" content="WMR Demo" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="data:" />
<link rel="preload" as="script" href="/index.tsx" crossorigin />
<link rel="stylesheet" href="/style.css" />
</head>

<body>
<script type="module" src="/index.tsx"></script>

<!-- a little in-page console -->
<!-- <script type="module" src="https://not-rawgit.glitch.me/gist/developit/60b810cbcb55e1da198a634218adcc90/raw/tiny-console.js"></script> -->

<!-- test: external stylesheets don't break style HMR -->
<!-- <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css"> -->
</body>
</html>
53 changes: 53 additions & 0 deletions packages/ssr-plugin/example/public/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { h, render } from 'preact';
import { LocationProvider, Router, ErrorBoundary, lazy, hydrate } from 'preact-iso';
import Home from './pages/home.js';
import NotFound from './pages/_404.js';
import Header from './header.tsx';

const About = lazy(() => import('./pages/about/index.js'));
const LazyAndLate = lazy(
() =>
new Promise(r => {
setTimeout(() => {
r(import('./pages/about/index.js'));
}, 1.5e3);
})
);
const CompatPage = lazy(() => import('./pages/compat.js'));
const ClassFields = lazy(() => import('./pages/class-fields.js'));
const Files = lazy(() => import('./pages/files/index.js'));
const Environment = lazy(async () => (await import('./pages/environment/index.js')).Environment);

export function App() {
return (
<LocationProvider>
<div class="app">
<Header />
<ErrorBoundary>
<Router>
<Home path="/" />
<About path="/about" />
<LazyAndLate path="/lazy-and-late" title={'Lazy and Late'} />
<CompatPage path="/compat" />
<ClassFields path="/class-fields" />
<Files path="/files" />
<Environment path="/env" />
<NotFound default />
</Router>
</ErrorBoundary>
</div>
</LocationProvider>
);
}

if (typeof window !== 'undefined') {
hydrate(<App />, document.body);
}
Comment on lines +43 to +45
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You will probably see this in PR #403 ( #403 (review) ) but just in case this goes under the radar for this PR #400, here it is again:

The typeof window !== 'undefined' browser check can be removed.

References:

wmr/packages/preact-iso/hydrate.js

Line 7 in fe51b7e

if (typeof window === 'undefined') return;

https://github.com/preactjs/wmr/blob/main/packages/preact-iso/README.md#hydratejs

This method also checks to make sure its running in a browser context before attempting any rendering - if not, it does nothing.


export async function prerender(data) {
const { prerender } = await import('preact-iso');
return await prerender(<App {...data} />);
}

// @ts-ignore
if (module.hot) module.hot.accept(u => render(<u.module.App />, document.body));
8 changes: 8 additions & 0 deletions packages/ssr-plugin/example/public/pages/_404.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
const NotFound = () => (
<section>
<h1>404: Not Found</h1>
<p>It's gone :(</p>
</section>
);

export default NotFound;
11 changes: 11 additions & 0 deletions packages/ssr-plugin/example/public/pages/about/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import styles from './style.module.css';

const About = ({ query, title }) => (
<section class={styles.about}>
<h1>{title || 'About'}</h1>
<p>My name is Jason.</p>
<pre>{JSON.stringify(query)}</pre>
</section>
);

export default About;
3 changes: 3 additions & 0 deletions packages/ssr-plugin/example/public/pages/about/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.about {
background: #dbcfe7;
}
20 changes: 20 additions & 0 deletions packages/ssr-plugin/example/public/pages/class-fields.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Component } from 'preact';

export default class ClassFields extends Component {
state = {
value: 1
};

onClick = () => {
this.setState(prev => ({ value: prev.value + 1 }));
};

render() {
return (
<div>
<p>State: {this.state.value}</p>
<button onClick={this.onClick}>click me</button>
</div>
);
}
}
8 changes: 8 additions & 0 deletions packages/ssr-plugin/example/public/pages/compat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { useState } from 'preact/hooks';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

export default function CompatDemo() {
const [value, onChange] = useState(new Date());
return <Calendar onChange={onChange} showWeekNumbers value={value} />;
}
1 change: 1 addition & 0 deletions packages/ssr-plugin/example/public/pages/environment/foo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const foo = 42;
27 changes: 27 additions & 0 deletions packages/ssr-plugin/example/public/pages/environment/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import './style.css';
import { foo } from './foo.js';

export function Environment() {
return (
<table>
<thead>
<tr>
<th>Name {foo}</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{Object.keys(process.env)
.sort()
.map(key => {
return (
<tr key={key}>
<td>{key}</td>
<td>{String(process.env[key])}</td>
</tr>
);
})}
</tbody>
</table>
);
}
16 changes: 16 additions & 0 deletions packages/ssr-plugin/example/public/pages/environment/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
table {
margin: 4rem;
border-collapse: collapse;
border-spacing: 0;
}

td,
th {
padding: 0.5rem 0.75rem;
border: 0.0625rem solid #d0d0d0;
text-align: left;
}

tbody tr:nth-child(even) {
background: #eee;
}
Binary file added packages/ssr-plugin/example/public/pages/files/img.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions packages/ssr-plugin/example/public/pages/files/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import jpg from './img.jpg';

export default function Files() {
return (
<div style="padding: 2rem;">
<h1>Files</h1>
<p>
jpg: {jpg}
<br />
<img src={jpg} alt="" height="320" />
</p>
</div>
);
}
Binary file added packages/ssr-plugin/example/public/pages/files/unreferenced.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions packages/ssr-plugin/example/public/pages/home/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import styles from './style.module.css';
import { useState } from 'preact/hooks';

export default function Home() {
const [count, setCount] = useState(0);

return (
<>
<section class={styles.home}>
<h1>Home</h1>
{/* Note: the string below is used in E2E tests */}
<p>This is the home page.</p>
<>
<button style={{ width: 30 }} onClick={() => setCount(count - 1)}>
-
</button>
<output style={{ padding: 10 }}>Count: {count}</output>
<button style={{ width: 30 }} onClick={() => setCount(count + 1)}>
+
</button>
</>
</section>
</>
);
}
4 changes: 4 additions & 0 deletions packages/ssr-plugin/example/public/pages/home/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.home {
background: #f6f6f6;
color: #333;
}
17 changes: 17 additions & 0 deletions packages/ssr-plugin/example/public/ssr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { promises as fs } from 'fs';

export async function ssr(data) {
let tpl = await fs.readFile('./public/index.html', 'utf-8');
// The first script in the file is assumed to have a .prerender export:
let script = (tpl.match(/<script(?:\s[^>]*?)?\s+src=(['"]?)([^>]*?)\1(?:\s[^>]*?)?>/) || [])[2];
if (!script) throw Error(`Unable to detect <script src="entry.js"> in your index.html.`);
const { prerender } = await import(script);
const result = await prerender(data);
const body = typeof result === 'string' ? result : result.html;
if (/<body(?:\s[^>]*?)?>/.test(tpl)) {
tpl = tpl.replace(/(<body(?:\s[^>]*?)?)>/, '$1 ssr>' + body);
} else {
tpl += body;
}
return tpl;
}
45 changes: 45 additions & 0 deletions packages/ssr-plugin/example/public/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
html,
body {
margin: 0;
min-height: 100%;
font-family: system-ui, sans-serif;
}

header {
display: flex;
background: #ddd;
}

header > nav {
flex: 1;
display: flex;
}

header > nav a {
padding: 10px;
color: #673ab8;
text-decoration: none;
}

header > nav a:hover {
background-color: #f1e9ff;
}

header > label {
display: flex;
align-items: center;
padding: 10px;
color: #555;
font-size: 80%;
}

header input {
border: none;
border-radius: 3px;
padding: 2px 5px;
font-size: 100%;
}

.app > section {
padding: 20px;
}
5 changes: 5 additions & 0 deletions packages/ssr-plugin/example/wmr.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import ssr from '../src/index.js';

export default options => {
ssr({})(options);
};
30 changes: 30 additions & 0 deletions packages/ssr-plugin/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{
"name": "@wmr-plugins/ssr",
"version": "0.1.1",
"type": "module",
"module": "./src/index.js",
"scripts": {
"build": "rollup -c",
"prepublishOnly": "yarn build"
},
"author": "The Preact Authors (https://preactjs.com)",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/preactjs/wmr.git",
"directory": "packages/ssr-plugin"
},
"files": [
"src/index.js"
],
"devDependencies": {
"wmr": "^1.3.2"
},
"dependencies": {},
"peerDependencies": {
"wmr": ">=1.4.0"
},
"engines": {
"node": ">=12"
}
}
17 changes: 17 additions & 0 deletions packages/ssr-plugin/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import middleware from './middleware.js';

export default function plugin(options) {
function configure(config) {
if (!config || config.mode === 'start') {
config.middleware.push(middleware(config, options));
}

return config;
}

if (options.cwd) {
return configure(options);
}

return configure;
}
Loading