Compare commits
No commits in common. "main" and "v0.1.2" have entirely different histories.
51 changed files with 4517 additions and 3024 deletions
|
|
@ -6,4 +6,3 @@ indent_size = 4
|
||||||
charset = utf-8
|
charset = utf-8
|
||||||
trim_trailing_whitespace = true
|
trim_trailing_whitespace = true
|
||||||
insert_final_newline = true
|
insert_final_newline = true
|
||||||
end_of_line = lf
|
|
||||||
|
|
|
||||||
1
.eslintignore
Normal file
1
.eslintignore
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
node_modules
|
||||||
23
.eslintrc
Normal file
23
.eslintrc
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
{
|
||||||
|
"root": true,
|
||||||
|
"parser": "@typescript-eslint/parser",
|
||||||
|
"plugins": ["@typescript-eslint", "prettier"],
|
||||||
|
"extends": [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:@typescript-eslint/eslint-recommended",
|
||||||
|
"plugin:@typescript-eslint/recommended",
|
||||||
|
"plugin:react/recommended",
|
||||||
|
"plugin:prettier/recommended"
|
||||||
|
],
|
||||||
|
"settings": {
|
||||||
|
"react": {
|
||||||
|
"pragma": "createElement"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"@typescript-eslint/no-namespace": "off",
|
||||||
|
"@typescript-eslint/ban-types": "off",
|
||||||
|
"react/prop-types": "off",
|
||||||
|
"react/jsx-key": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
name: CI
|
|
||||||
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches: [main]
|
|
||||||
pull_request:
|
|
||||||
branches: [main]
|
|
||||||
workflow_dispatch:
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
check:
|
|
||||||
runs-on: node-24
|
|
||||||
steps:
|
|
||||||
- uses: https://code.forgejo.org/actions/checkout@v4
|
|
||||||
- name: Cache npm dependencies
|
|
||||||
uses: https://code.forgejo.org/actions/cache@v4
|
|
||||||
with:
|
|
||||||
path: ~/.npm
|
|
||||||
key: node-24-${{ hashFiles('**/package-lock.json') }}
|
|
||||||
- run: npm ci
|
|
||||||
- run: npm run check
|
|
||||||
|
|
||||||
build:
|
|
||||||
needs: check
|
|
||||||
strategy:
|
|
||||||
matrix:
|
|
||||||
node: [22, 24]
|
|
||||||
runs-on: node-${{ matrix.node }}
|
|
||||||
steps:
|
|
||||||
- uses: https://code.forgejo.org/actions/checkout@v4
|
|
||||||
- name: Cache npm dependencies
|
|
||||||
uses: https://code.forgejo.org/actions/cache@v4
|
|
||||||
with:
|
|
||||||
path: ~/.npm
|
|
||||||
key: node-${{ matrix.node }}-${{ hashFiles('**/package-lock.json') }}
|
|
||||||
- run: npm ci
|
|
||||||
- run: npm run build
|
|
||||||
- run: npm test
|
|
||||||
2
.gitattributes
vendored
2
.gitattributes
vendored
|
|
@ -1,2 +0,0 @@
|
||||||
# Ensure that git uses lf line-endings for text files.
|
|
||||||
* text=auto eol=lf
|
|
||||||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,4 +1,3 @@
|
||||||
/dist
|
/dist
|
||||||
/.temp
|
|
||||||
public/
|
public/
|
||||||
node_modules/
|
node_modules/
|
||||||
|
|
|
||||||
2
.nvmrc
2
.nvmrc
|
|
@ -1 +1 @@
|
||||||
18
|
lts/erbium
|
||||||
|
|
|
||||||
9
.travis.yml
Normal file
9
.travis.yml
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
language: node_js
|
||||||
|
node_js:
|
||||||
|
- node
|
||||||
|
- lts/*
|
||||||
|
- 14
|
||||||
|
- 13
|
||||||
|
- 12
|
||||||
|
- 11
|
||||||
|
- 10
|
||||||
29
CHANGELOG.md
29
CHANGELOG.md
|
|
@ -1,34 +1,5 @@
|
||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
## [0.2.0](https://github.com/websnacksjs/websnacks/releases/tag/v0.2.0) (2021-02-28)
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
- add dangerouslySetInnerHTML attr ([#15](https://github.com/websnacksjs/websnacks/issues/15), [3f356dd](https://github.com/websnacksjs/websnacks/commit/3f356ddfeeb38e8a60c32d26c3e9e8715d0246c3))
|
|
||||||
|
|
||||||
### Misc
|
|
||||||
|
|
||||||
- **BREAKING CHANGE** update node-watch optional dep to major v0.7.1
|
|
||||||
|
|
||||||
## [0.1.5](https://github.com/websnacksjs/websnacks/releases/tag/v0.1.5) (2020-06-14)
|
|
||||||
|
|
||||||
### Bugfixes
|
|
||||||
|
|
||||||
- stack size exceed error on purging module cache ([32eee9b](https://github.com/websnacksjs/websnacks/commit/32eee9b2e04475452905e3478f0fa2a21ad3ccf4))
|
|
||||||
|
|
||||||
## [0.1.4](https://github.com/websnacksjs/websnacks/releases/tag/v0.1.4) (2020-06-10)
|
|
||||||
|
|
||||||
### Bugfixes
|
|
||||||
|
|
||||||
- dev cmd didn't watch files due to import mangling ([4e44d83](https://github.com/websnacksjs/websnacks/commit/4e44d8369451e19af616a8c03c2ff7f4065b3f50))
|
|
||||||
- dont require config file ([5520bb3](https://github.com/websnacksjs/websnacks/commit/5520bb3571189726df73a2945d9a6e7f5671e7ff))
|
|
||||||
|
|
||||||
## [0.1.3](https://github.com/websnacksjs/websnacks/releases/tag/v0.1.3) (2020-06-04)
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
- provide Fragment component ([#9](https://github.com/websnacksjs/websnacks/issues/9), [f1aca35](https://github.com/websnacksjs/websnacks/commit/f1aca350ed7e63e277fae7f9cc01039a29442bcb))
|
|
||||||
|
|
||||||
## [0.1.2](https://github.com/websnacksjs/websnacks/releases/tag/v0.1.2) (2020-06-03)
|
## [0.1.2](https://github.com/websnacksjs/websnacks/releases/tag/v0.1.2) (2020-06-03)
|
||||||
|
|
||||||
### Bugfixes
|
### Bugfixes
|
||||||
|
|
|
||||||
2
LICENSE
2
LICENSE
|
|
@ -35,7 +35,7 @@ Mozilla Public License Version 2.0
|
||||||
means any form of the work other than Source Code Form.
|
means any form of the work other than Source Code Form.
|
||||||
|
|
||||||
1.7. "Larger Work"
|
1.7. "Larger Work"
|
||||||
means a work that combines Covered Software with other material, in
|
means a work that combines Covered Software with other material, in
|
||||||
a separate file or files, that is not Covered Software.
|
a separate file or files, that is not Covered Software.
|
||||||
|
|
||||||
1.8. "License"
|
1.8. "License"
|
||||||
|
|
|
||||||
19
README.md
19
README.md
|
|
@ -1,9 +1,20 @@
|
||||||
# websnacks: Minimal Dependency Server-Side JSX for Static Sites
|
# websnacks: Minimal Dependency Server-Side JSX for Static Sites
|
||||||
|
|
||||||
[](https://www.npmjs.com/package/@websnacksjs/websnacks "NPM release")
|
<div>
|
||||||
[](https://www.mozilla.org/en-US/MPL/2.0/FAQ/ "License info")
|
|
||||||
[](https://git.theinnerlimit.ch/websnacksjs/websnacks/actions?workflow=ci.yml "CI status for main branch")
|
[](https://www.npmjs.com/package/@websnacksjs/websnacks "NPM release")
|
||||||
|
[](https://www.mozilla.org/en-US/MPL/2.0/FAQ/ "License info")
|
||||||
|
[](https://travis-ci.org/websnacksjs/websnacks "Build status for master branch")
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
[](https://david-dm.org/websnacksjs/websnacks "Dependency status")
|
||||||
|
[](https://david-dm.org/websnacksjs/websnacks?type=optional "Optional dependency status")
|
||||||
|
[](https://david-dm.org/websnacksjs/websnacks?type=dev "Dev dependency status")
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
Develop fully static websites using typesafe JSX templates on the server without the complex build system and dependency management of server-side rendered React frameworks.
|
Develop fully static websites using typesafe JSX templates on the server without the complex build system and dependency management of server-side rendered React frameworks.
|
||||||
|
|
||||||
|
|
|
||||||
41
biome.json
41
biome.json
|
|
@ -1,41 +0,0 @@
|
||||||
{
|
|
||||||
"$schema": "https://biomejs.dev/schemas/2.4.14/schema.json",
|
|
||||||
"files": {
|
|
||||||
"includes": ["**", "!dist", "!node_modules", "!.temp"]
|
|
||||||
},
|
|
||||||
"assist": {
|
|
||||||
"enabled": true,
|
|
||||||
"actions": {
|
|
||||||
"source": {
|
|
||||||
"organizeImports": "on"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"formatter": {
|
|
||||||
"enabled": true
|
|
||||||
},
|
|
||||||
"linter": {
|
|
||||||
"enabled": true,
|
|
||||||
"rules": {
|
|
||||||
"recommended": true,
|
|
||||||
"style": {
|
|
||||||
"useShorthandFunctionType": "off"
|
|
||||||
},
|
|
||||||
"correctness": {
|
|
||||||
"useJsxKeyInIterable": "off"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"overrides": [
|
|
||||||
{
|
|
||||||
"includes": ["test/**"],
|
|
||||||
"linter": {
|
|
||||||
"rules": {
|
|
||||||
"a11y": {
|
|
||||||
"useHtmlLang": "off"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,29 +1,25 @@
|
||||||
import { stylesheet } from "typestyle";
|
import { stylesheet } from "typestyle";
|
||||||
import {
|
import { Component, createElement } from "websnacks";
|
||||||
type Component,
|
|
||||||
// biome-ignore lint/correctness/noUnusedImports: required to support JSX
|
|
||||||
createElement,
|
|
||||||
} from "websnacks";
|
|
||||||
|
|
||||||
const styles = stylesheet({
|
const styles = stylesheet({
|
||||||
header: {
|
header: {
|
||||||
background: "#6c42bd",
|
background: "#6c42bd",
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
padding: "32px",
|
padding: "32px",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
boxShadow: "0 1px 8px -3px #000",
|
boxShadow: "0 1px 8px -3px #000",
|
||||||
},
|
},
|
||||||
headline: {
|
headline: {
|
||||||
fontSize: "28px",
|
fontSize: "28px",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export interface HeaderProps {
|
export interface HeaderProps {
|
||||||
headline: string;
|
headline: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Header: Component<HeaderProps> = ({ headline }) => (
|
export const Header: Component<HeaderProps> = ({ headline }) => (
|
||||||
<header className={styles.header}>
|
<header className={styles.header}>
|
||||||
<h1 className={styles.headline}>{headline}</h1>
|
<h1 className={styles.headline}>{headline}</h1>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,6 @@
|
||||||
import { normalize } from "csstips";
|
import { normalize } from "csstips";
|
||||||
import { stylesheet } from "typestyle";
|
import { stylesheet } from "typestyle";
|
||||||
import {
|
import { Component, createElement } from "websnacks";
|
||||||
type Component,
|
|
||||||
// biome-ignore lint/correctness/noUnusedImports: required to support JSX
|
|
||||||
createElement,
|
|
||||||
} from "websnacks";
|
|
||||||
|
|
||||||
import { stylesheetPath } from "../config";
|
import { stylesheetPath } from "../config";
|
||||||
import { Header } from "./header";
|
import { Header } from "./header";
|
||||||
|
|
@ -13,57 +9,60 @@ import { Navbar } from "./navbar";
|
||||||
normalize();
|
normalize();
|
||||||
|
|
||||||
const styles = stylesheet({
|
const styles = stylesheet({
|
||||||
html: {
|
html: {
|
||||||
height: "100%",
|
height: "100%",
|
||||||
},
|
},
|
||||||
wrapper: {
|
wrapper: {
|
||||||
height: "100%",
|
height: "100%",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
margin: 0,
|
margin: 0,
|
||||||
},
|
},
|
||||||
main: {
|
main: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
},
|
},
|
||||||
mainBody: {
|
mainBody: {
|
||||||
padding: "16px",
|
padding: "16px",
|
||||||
},
|
},
|
||||||
navbar: {
|
navbar: {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flex: "0 0 auto",
|
flex: "0 0 auto",
|
||||||
zIndex: 9,
|
zIndex: 9,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const SITE_TITLE = "Example Site";
|
const SITE_TITLE = "Example Site";
|
||||||
|
|
||||||
export interface LayoutProps {
|
export interface LayoutProps {
|
||||||
headline?: string;
|
headline?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Layout: Component<LayoutProps> = ({ children, headline }) => (
|
export const Layout: Component<LayoutProps> = ({ children, headline }) => (
|
||||||
<html className={styles.html} lang="en-US">
|
<html className={styles.html} lang="en-US">
|
||||||
<head>
|
<head>
|
||||||
<meta charSet="utf-8" />
|
<meta charSet="utf-8" />
|
||||||
<title>
|
<title>
|
||||||
{SITE_TITLE}
|
{SITE_TITLE}
|
||||||
{headline && ` | ${headline}`}
|
{headline && ` | ${headline}`}
|
||||||
</title>
|
</title>
|
||||||
<meta name="description" content="" />
|
<meta name="description" content="" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta
|
||||||
<link rel="stylesheet" href={stylesheetPath} />
|
name="viewport"
|
||||||
</head>
|
content="width=device-width, initial-scale=1"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href={stylesheetPath} />
|
||||||
|
</head>
|
||||||
|
|
||||||
<body className={styles.wrapper}>
|
<body className={styles.wrapper}>
|
||||||
<div className={styles.navbar}>
|
<div className={styles.navbar}>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main className={styles.main}>
|
<main className={styles.main}>
|
||||||
<Header headline={headline || SITE_TITLE} />
|
<Header headline={headline || SITE_TITLE} />
|
||||||
|
|
||||||
<div className={styles.mainBody}>{children}</div>
|
<div className={styles.mainBody}>{children}</div>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,43 @@
|
||||||
import { stylesheet } from "typestyle";
|
import { stylesheet } from "typestyle";
|
||||||
import {
|
import { Component, createElement } from "websnacks";
|
||||||
type Component,
|
|
||||||
// biome-ignore lint/correctness/noUnusedImports: required to support JSX
|
|
||||||
createElement,
|
|
||||||
} from "websnacks";
|
|
||||||
|
|
||||||
const styles = stylesheet({
|
const styles = stylesheet({
|
||||||
navbar: {
|
navbar: {
|
||||||
minWidth: "140px",
|
minWidth: "140px",
|
||||||
borderRight: "1px solid #ddd",
|
borderRight: "1px solid #ddd",
|
||||||
background: "#fff",
|
background: "#fff",
|
||||||
},
|
},
|
||||||
sectionTitle: {
|
sectionTitle: {
|
||||||
color: "#333",
|
color: "#333",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
borderBottom: "1px solid #333",
|
borderBottom: "1px solid #333",
|
||||||
padding: "6px",
|
padding: "6px",
|
||||||
margin: "0 4px",
|
margin: "0 4px",
|
||||||
fontSize: "18px",
|
fontSize: "18px",
|
||||||
},
|
},
|
||||||
linksList: {
|
linksList: {
|
||||||
padding: "3px 16px 0",
|
padding: "3px 16px 0",
|
||||||
},
|
},
|
||||||
linksListItem: {
|
linksListItem: {
|
||||||
padding: "6px",
|
padding: "6px",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const links = [
|
const links = [
|
||||||
{ title: "Home", href: "/" },
|
{ title: "Home", href: "/" },
|
||||||
{ title: "Projects", href: "/projects" },
|
{ title: "Projects", href: "/projects" },
|
||||||
];
|
];
|
||||||
|
|
||||||
export const Navbar: Component = () => (
|
export const Navbar: Component = () => (
|
||||||
<nav className={styles.navbar}>
|
<nav className={styles.navbar}>
|
||||||
<h2 className={styles.sectionTitle}>Navigation</h2>
|
<h2 className={styles.sectionTitle}>Navigation</h2>
|
||||||
|
|
||||||
<ol className={styles.linksList}>
|
<ol className={styles.linksList}>
|
||||||
{links.map(({ title, href }) => (
|
{links.map(({ title, href }) => (
|
||||||
<li className={styles.linksListItem}>
|
<li className={styles.linksListItem}>
|
||||||
<a href={href}>{title}</a>
|
<a href={href}>{title}</a>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ol>
|
</ol>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
1505
examples/personal-site/package-lock.json
generated
1505
examples/personal-site/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,14 +1,13 @@
|
||||||
{
|
{
|
||||||
"name": "websnacks-example-personal-site",
|
"name": "websnacks-example-personal-site",
|
||||||
"type": "module",
|
"scripts": {
|
||||||
"scripts": {
|
"build": "websnacks -r ts-node/register build",
|
||||||
"build": "websnacks -r ts-node/register build",
|
"dev": "websnacks -r ts-node/register dev"
|
||||||
"dev": "websnacks -r ts-node/register dev"
|
},
|
||||||
},
|
"dependencies": {
|
||||||
"dependencies": {
|
"csstips": "^1.2.0",
|
||||||
"csstips": "^1.2.0",
|
"ts-node": "^8.10.1",
|
||||||
"ts-node": "^8.10.1",
|
"typestyle": "^2.1.0",
|
||||||
"typestyle": "^2.1.0",
|
"websnacks": "../../"
|
||||||
"websnacks": "../../"
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,22 @@
|
||||||
import {
|
import { Component, createElement } from "websnacks";
|
||||||
type Component,
|
|
||||||
// biome-ignore lint/correctness/noUnusedImports: required to support JSX
|
|
||||||
createElement,
|
|
||||||
} from "websnacks";
|
|
||||||
|
|
||||||
import { Layout } from "../components/layout";
|
import { Layout } from "../components/layout";
|
||||||
|
|
||||||
export const page: Component = () => (
|
export const page: Component = () => (
|
||||||
<Layout>
|
<Layout>
|
||||||
<p>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
|
||||||
condimentum mauris et egestas. Quisque orci nulla, consequat at erat
|
dapibus condimentum mauris et egestas. Quisque orci nulla, consequat
|
||||||
laoreet, malesuada sodales nisi. Sed in lorem semper lorem placerat
|
at erat laoreet, malesuada sodales nisi. Sed in lorem semper lorem
|
||||||
fermentum a id arcu. Curabitur non aliquam tellus, sed auctor lacus. Nunc
|
placerat fermentum a id arcu. Curabitur non aliquam tellus, sed
|
||||||
sit amet lectus ultrices, sodales nisl sit amet, luctus nisl. Nunc mollis
|
auctor lacus. Nunc sit amet lectus ultrices, sodales nisl sit amet,
|
||||||
imperdiet quam, eget sollicitudin leo tincidunt vel. Duis felis dui,
|
luctus nisl. Nunc mollis imperdiet quam, eget sollicitudin leo
|
||||||
imperdiet aliquam bibendum sed, auctor et dolor. Vivamus odio ipsum,
|
tincidunt vel. Duis felis dui, imperdiet aliquam bibendum sed,
|
||||||
venenatis in felis sed, aliquam dictum turpis. Pellentesque pellentesque
|
auctor et dolor. Vivamus odio ipsum, venenatis in felis sed, aliquam
|
||||||
consequat neque, id imperdiet diam molestie nec. Nullam ut vestibulum est.
|
dictum turpis. Pellentesque pellentesque consequat neque, id
|
||||||
Pellentesque orci urna, porta vel porta quis, semper ut enim. Donec sit
|
imperdiet diam molestie nec. Nullam ut vestibulum est. Pellentesque
|
||||||
amet urna arcu. Nam tincidunt fermentum ligula a pharetra.{" "}
|
orci urna, porta vel porta quis, semper ut enim. Donec sit amet urna
|
||||||
</p>
|
arcu. Nam tincidunt fermentum ligula a pharetra.{" "}
|
||||||
</Layout>
|
</p>
|
||||||
|
</Layout>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,26 @@
|
||||||
import { stylesheet } from "typestyle";
|
import { stylesheet } from "typestyle";
|
||||||
import {
|
import { Component, createElement } from "websnacks";
|
||||||
type Component,
|
|
||||||
// biome-ignore lint/correctness/noUnusedImports: required to support JSX
|
|
||||||
createElement,
|
|
||||||
} from "websnacks";
|
|
||||||
|
|
||||||
import { Layout } from "../components/layout";
|
import { Layout } from "../components/layout";
|
||||||
|
|
||||||
const styles = stylesheet({
|
const styles = stylesheet({
|
||||||
projectsGrid: {
|
projectsGrid: {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexWrap: "wrap",
|
flexWrap: "wrap",
|
||||||
width: "25%",
|
width: "25%",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export const page: Component = () => (
|
export const page: Component = () => (
|
||||||
<Layout>
|
<Layout>
|
||||||
<h1>Projects</h1>
|
<h1>Projects</h1>
|
||||||
|
|
||||||
<div className={styles.projectsGrid}>
|
<div className={styles.projectsGrid}>
|
||||||
<div>Project 1</div>
|
<div>Project 1</div>
|
||||||
<div>Project 2</div>
|
<div>Project 2</div>
|
||||||
<div>Project 3</div>
|
<div>Project 3</div>
|
||||||
<div>Project 4</div>
|
<div>Project 4</div>
|
||||||
<div>Project 5</div>
|
<div>Project 5</div>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
"module": "CommonJS",
|
"module": "CommonJS",
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"jsx": "react",
|
"jsx": "react",
|
||||||
"jsxFactory": "createElement",
|
"jsxFactory": "createElement",
|
||||||
"target": "ES2018",
|
"target": "ES2018",
|
||||||
"lib": ["ES2018"],
|
"lib": ["ES2018"],
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"noUnusedLocals": true,
|
"noUnusedLocals": true,
|
||||||
"noUnusedParameters": true,
|
"noUnusedParameters": true,
|
||||||
"noImplicitReturns": true,
|
"noImplicitReturns": true,
|
||||||
"noFallthroughCasesInSwitch": true
|
"noFallthroughCasesInSwitch": true
|
||||||
},
|
},
|
||||||
"include": ["components/**/*", "pages/**/*"]
|
"include": ["components/**/*", "pages/**/*"]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,26 @@
|
||||||
import { promises as fs } from "node:fs";
|
import { promises as fs } from "fs";
|
||||||
import * as path from "node:path";
|
import * as path from "path";
|
||||||
import type { Config } from "websnacks";
|
import { Config } from "websnacks";
|
||||||
|
|
||||||
import { stylesheetPath } from "./config";
|
import { stylesheetPath } from "./config";
|
||||||
|
|
||||||
const _config: Config = {
|
const config: Config = {
|
||||||
// Watch additional files and folders for changes when the dev server is
|
// Watch additional files and folders for changes when the dev server is
|
||||||
// running.
|
// running.
|
||||||
watch: ["components/", "config.ts"],
|
watch: ["components/", "config.ts"],
|
||||||
// Hooks to execute after certain rendering events. Currently only
|
// Hooks to execute after certain rendering events. Currently only
|
||||||
// afterSiteRender is supported.
|
// afterSiteRender is supported.
|
||||||
hooks: {
|
hooks: {
|
||||||
async afterSiteRender({ outDir }): Promise<void> {
|
async afterSiteRender({ outDir }): Promise<void> {
|
||||||
// NOTE: we dynamically import typestyle so that the global style
|
// NOTE: we dynamically import typestyle so that the global style
|
||||||
// registry is properly updated once all pages are reloaded in
|
// registry is properly updated once all pages are reloaded in
|
||||||
// dev. We could also create a typestyle object in config.ts,
|
// dev. We could also create a typestyle object in config.ts,
|
||||||
// or even multiple objects to split up our styles into e.g. a
|
// or even multiple objects to split up our styles into e.g. a
|
||||||
// critical-path.css and noncrticial.css.
|
// critical-path.css and noncrticial.css.
|
||||||
const { getStyles } = await import("typestyle");
|
const { getStyles } = await import("typestyle");
|
||||||
const styles = getStyles();
|
const styles = getStyles();
|
||||||
await fs.writeFile(path.join(outDir, stylesheetPath), styles);
|
await fs.writeFile(path.join(outDir, stylesheetPath), styles);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
export = config;
|
||||||
|
|
|
||||||
2141
package-lock.json
generated
2141
package-lock.json
generated
File diff suppressed because it is too large
Load diff
96
package.json
96
package.json
|
|
@ -1,49 +1,51 @@
|
||||||
{
|
{
|
||||||
"name": "@websnacksjs/websnacks",
|
"name": "@websnacksjs/websnacks",
|
||||||
"description": "Minimal dependency server-side JSX for static sites",
|
"description": "Minimal dependency server-side JSX for static sites",
|
||||||
"version": "0.2.0",
|
"version": "0.1.2",
|
||||||
"author": {
|
"author": {
|
||||||
"name": "M. George Hansen",
|
"name": "M. George Hansen",
|
||||||
"email": "mgeorge@technopolitica.com"
|
"email": "mgeorge@technopolitica.com"
|
||||||
},
|
},
|
||||||
"license": "MPL-2.0",
|
"license": "MPL-2.0",
|
||||||
"repository": "github:websnacksjs/websnacks",
|
"engines": {
|
||||||
"engines": {
|
"node": ">=10"
|
||||||
"node": ">=18"
|
},
|
||||||
},
|
"main": "dist/index.js",
|
||||||
"main": "dist/index.js",
|
"types": "types.d.ts",
|
||||||
"types": "types.d.ts",
|
"bin": "bin/websnacks.js",
|
||||||
"bin": "bin/websnacks.js",
|
"files": [
|
||||||
"files": [
|
"/bin/websnacks.js",
|
||||||
"/bin/websnacks.js",
|
"/dist/**/*.js",
|
||||||
"/dist/**/*.js",
|
"/dist/**/*.d.ts",
|
||||||
"/dist/**/*.d.ts",
|
"/dist/**/*.map",
|
||||||
"/dist/**/*.map",
|
"/src/**/*.ts",
|
||||||
"/src/**/*.ts",
|
"/index.d.ts"
|
||||||
"/index.d.ts"
|
],
|
||||||
],
|
"scripts": {
|
||||||
"scripts": {
|
"build": "tsc",
|
||||||
"build": "tsc",
|
"clean": "ts-node scripts/clean.ts",
|
||||||
"check": "biome check .",
|
"prepublishOnly": "npm run reset && npm test",
|
||||||
"clean": "ts-node scripts/clean.ts",
|
"pretest": "npm run build",
|
||||||
"prepublishOnly": "npm run reset && npm test",
|
"preversion": "npm run reset && npm test",
|
||||||
"pretest": "npm run build",
|
"release": "npm version",
|
||||||
"preversion": "npm run reset && npm test",
|
"reset": "npm run clean && npm ci",
|
||||||
"release": "npm version",
|
"test": "ts-node --project=test/tsconfig.json test/run-tests.ts"
|
||||||
"reset": "npm run clean && npm ci",
|
},
|
||||||
"test": "npm run test:unit && npm run test:e2e",
|
"devDependencies": {
|
||||||
"test:unit": "cd test && ts-node --script-mode ./run-tests.ts",
|
"@types/node": "~10",
|
||||||
"test:e2e": "cd test && ts-node --script-mode ./run-e2e.ts"
|
"@types/ws": "^7.2.4",
|
||||||
},
|
"@typescript-eslint/eslint-plugin": "^3.0.2",
|
||||||
"devDependencies": {
|
"@typescript-eslint/parser": "^3.0.2",
|
||||||
"@biomejs/biome": "2.4.14",
|
"eslint": "^7.1.0",
|
||||||
"@types/node": "~18",
|
"eslint-config-prettier": "^6.11.0",
|
||||||
"@types/ws": "^8.18.1",
|
"eslint-plugin-prettier": "^3.1.3",
|
||||||
"ts-node": "^10.9.2",
|
"eslint-plugin-react": "^7.20.0",
|
||||||
"typescript": "~4.9.5"
|
"prettier": "^2.0.5",
|
||||||
},
|
"ts-node": "^8.10.2",
|
||||||
"optionalDependencies": {
|
"typescript": "~3.9.3"
|
||||||
"node-watch": "^0.7.4",
|
},
|
||||||
"ws": "^8.20.0"
|
"optionalDependencies": {
|
||||||
}
|
"node-watch": "^0.6.4",
|
||||||
|
"ws": "^7.3.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,29 +3,27 @@
|
||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import * as fs from "node:fs";
|
import * as fs from "fs";
|
||||||
import * as path from "node:path";
|
import * as path from "path";
|
||||||
|
|
||||||
const ROOT_DIR = path.resolve(__dirname, "..");
|
const ROOT_DIR = path.resolve(__dirname, "..");
|
||||||
const DIST_DIR = path.join(ROOT_DIR, "dist");
|
const DIST_DIR = path.join(ROOT_DIR, "dist");
|
||||||
const TEST_DIR = path.join(ROOT_DIR, ".temp");
|
|
||||||
|
|
||||||
const rmdirRecursive = (dirPath: string): void => {
|
const rmdirRecursive = (dirPath: string): void => {
|
||||||
if (!fs.existsSync(dirPath)) {
|
if (!fs.existsSync(dirPath)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const entryNames = fs.readdirSync(dirPath);
|
const entryNames = fs.readdirSync(dirPath);
|
||||||
for (const entryName of entryNames) {
|
for (const entryName of entryNames) {
|
||||||
const entryPath = path.join(dirPath, entryName);
|
const entryPath = path.join(dirPath, entryName);
|
||||||
const dirent = fs.lstatSync(entryPath);
|
const dirent = fs.lstatSync(entryPath);
|
||||||
if (dirent.isDirectory()) {
|
if (dirent.isDirectory()) {
|
||||||
rmdirRecursive(entryPath);
|
rmdirRecursive(entryPath);
|
||||||
} else {
|
} else {
|
||||||
fs.unlinkSync(entryPath);
|
fs.unlinkSync(entryPath);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
fs.rmdirSync(dirPath);
|
fs.rmdirSync(dirPath);
|
||||||
};
|
};
|
||||||
|
|
||||||
rmdirRecursive(DIST_DIR);
|
rmdirRecursive(DIST_DIR);
|
||||||
rmdirRecursive(TEST_DIR);
|
|
||||||
|
|
|
||||||
128
src/build.ts
128
src/build.ts
|
|
@ -3,78 +3,80 @@
|
||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { promises as fs } from "node:fs";
|
import { promises as fs } from "fs";
|
||||||
import * as path from "node:path";
|
import * as path from "path";
|
||||||
|
|
||||||
import type { Config, ConfigPaths } from "./config";
|
import { Config, ConfigPaths } from "./config";
|
||||||
import { renderPage } from "./render";
|
import { renderPage } from "./render";
|
||||||
import { decacheModule, walkDir } from "./utils";
|
import { purgeModuleAndDepsFromCache, walkDir } from "./utils";
|
||||||
|
|
||||||
const renderPagesToHtml = async ({
|
const renderPagesToHtml = async ({
|
||||||
pagesDir,
|
pagesDir,
|
||||||
outDir,
|
outDir,
|
||||||
}: ConfigPaths): Promise<void> => {
|
}: ConfigPaths): Promise<void> => {
|
||||||
const deferred = [];
|
const deferred = [];
|
||||||
for await (const srcPath of walkDir(pagesDir)) {
|
for await (const srcPath of walkDir(pagesDir)) {
|
||||||
const ext = path.extname(srcPath);
|
const ext = path.extname(srcPath);
|
||||||
if (ext !== ".tsx") {
|
if (ext !== ".tsx") {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Ensure that we don't cache page modules when running in dev server.
|
// Ensure that we don't cache page modules when running in dev server.
|
||||||
decacheModule(srcPath);
|
purgeModuleAndDepsFromCache(srcPath);
|
||||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||||
const pageSrc = require(srcPath);
|
const pageSrc = require(srcPath);
|
||||||
if (!("page" in pageSrc)) {
|
if (!("page" in pageSrc)) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
`page source at ${srcPath} does not export a "page" variable`,
|
`page source at ${srcPath} does not export a "page" variable`
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
let compiledHtml: string;
|
let compiledHtml;
|
||||||
try {
|
try {
|
||||||
compiledHtml = renderPage(pageSrc.page());
|
compiledHtml = renderPage(pageSrc.page());
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
throw new Error(`failed to compile ${srcPath}: ${error}`);
|
throw new Error(
|
||||||
}
|
`failed to compile ${srcPath}: ${error.stack ?? error}`
|
||||||
const relPath = path.relative(pagesDir, path.dirname(srcPath));
|
);
|
||||||
let baseName = path.basename(srcPath, ".tsx");
|
}
|
||||||
if (baseName === "index") {
|
const relPath = path.relative(pagesDir, path.dirname(srcPath));
|
||||||
baseName = "";
|
let baseName = path.basename(srcPath, ".tsx");
|
||||||
}
|
if (baseName === "index") {
|
||||||
const destPath = path.join(outDir, relPath, baseName, "index.html");
|
baseName = "";
|
||||||
deferred.push(
|
}
|
||||||
(async () => {
|
const destPath = path.join(outDir, relPath, baseName, "index.html");
|
||||||
await fs.mkdir(path.dirname(destPath), { recursive: true });
|
deferred.push(
|
||||||
await fs.writeFile(destPath, compiledHtml);
|
(async () => {
|
||||||
})(),
|
await fs.mkdir(path.dirname(destPath), { recursive: true });
|
||||||
);
|
await fs.writeFile(destPath, compiledHtml);
|
||||||
}
|
})()
|
||||||
await Promise.all(deferred);
|
);
|
||||||
|
}
|
||||||
|
await Promise.all(deferred);
|
||||||
};
|
};
|
||||||
|
|
||||||
const copyStaticAssets = async ({
|
const copyStaticAssets = async ({
|
||||||
staticAssetsDir,
|
staticAssetsDir,
|
||||||
outDir,
|
outDir,
|
||||||
}: ConfigPaths): Promise<void> => {
|
}: ConfigPaths): Promise<void> => {
|
||||||
try {
|
try {
|
||||||
await fs.access(staticAssetsDir);
|
await fs.access(staticAssetsDir);
|
||||||
} catch (_error) {
|
} catch (error) {
|
||||||
// Static assets folder doesn't exist, so no-op.
|
// Static assets folder doesn't exist, so no-op.
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const deferred = [];
|
const deferred = [];
|
||||||
for await (const assetPath of walkDir(staticAssetsDir)) {
|
for await (const assetPath of walkDir(staticAssetsDir)) {
|
||||||
const relPath = path.relative(staticAssetsDir, assetPath);
|
const relPath = path.relative(staticAssetsDir, assetPath);
|
||||||
const destPath = path.join(outDir, relPath);
|
const destPath = path.join(outDir, relPath);
|
||||||
deferred.push(
|
deferred.push(
|
||||||
(async () => {
|
(async () => {
|
||||||
await fs.mkdir(path.dirname(destPath), { recursive: true });
|
await fs.mkdir(path.dirname(destPath), { recursive: true });
|
||||||
await fs.copyFile(assetPath, destPath);
|
await fs.copyFile(assetPath, destPath);
|
||||||
})(),
|
})()
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
await Promise.all(deferred);
|
await Promise.all(deferred);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -84,6 +86,6 @@ const copyStaticAssets = async ({
|
||||||
* @param config Configuration for the site.
|
* @param config Configuration for the site.
|
||||||
*/
|
*/
|
||||||
export const renderSite = async ({ paths, hooks }: Config): Promise<void> => {
|
export const renderSite = async ({ paths, hooks }: Config): Promise<void> => {
|
||||||
await Promise.all([renderPagesToHtml(paths), copyStaticAssets(paths)]);
|
await Promise.all([renderPagesToHtml(paths), copyStaticAssets(paths)]);
|
||||||
await hooks.afterSiteRender(paths);
|
await hooks.afterSiteRender(paths);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
|
|
||||||
import { renderSite } from "../../build";
|
import { renderSite } from "../../build";
|
||||||
import { loadConfig } from "../../config";
|
import { loadConfig } from "../../config";
|
||||||
import { type Command, UsageError } from "../types";
|
import { Command, UsageError } from "../types";
|
||||||
|
|
||||||
const helpText = `\
|
const helpText = `\
|
||||||
Usage: websnacks build [ROOT_DIR]
|
Usage: websnacks build [ROOT_DIR]
|
||||||
|
|
@ -18,16 +18,16 @@ Args:
|
||||||
`;
|
`;
|
||||||
|
|
||||||
interface BuildArgs {
|
interface BuildArgs {
|
||||||
rootDir: string;
|
rootDir: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const parseArgs = (args: string[]): BuildArgs => {
|
const parseArgs = (args: string[]): BuildArgs => {
|
||||||
if (args.length > 1) {
|
if (args.length > 1) {
|
||||||
throw new UsageError("too many arguments provided", helpText);
|
throw new UsageError("too many arguments provided", helpText);
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
rootDir: args[0] || process.cwd(),
|
rootDir: args[0] || process.cwd(),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -35,11 +35,11 @@ const parseArgs = (args: string[]): BuildArgs => {
|
||||||
* static files.
|
* static files.
|
||||||
*/
|
*/
|
||||||
const buildCommand: Command = {
|
const buildCommand: Command = {
|
||||||
execute: async (args: string[]): Promise<void> => {
|
execute: async (args: string[]): Promise<void> => {
|
||||||
const { rootDir } = parseArgs(args);
|
const { rootDir } = parseArgs(args);
|
||||||
const config = await loadConfig(rootDir);
|
const config = await loadConfig(rootDir);
|
||||||
await renderSite(config);
|
await renderSite(config);
|
||||||
},
|
},
|
||||||
helpText,
|
helpText,
|
||||||
};
|
};
|
||||||
export = buildCommand;
|
export = buildCommand;
|
||||||
|
|
|
||||||
|
|
@ -3,250 +3,204 @@
|
||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { existsSync, promises as fs, watch } from "node:fs";
|
import { existsSync, promises as fs, watch } from "fs";
|
||||||
import * as http from "node:http";
|
import * as http from "http";
|
||||||
import * as path from "node:path";
|
import * as path from "path";
|
||||||
|
|
||||||
import { renderSite } from "../../build";
|
import { renderSite } from "../../build";
|
||||||
import { type Config, loadConfig } from "../../config";
|
import { Config, loadConfig } from "../../config";
|
||||||
import { isErrnoException } from "../../utils/error";
|
import { Command, UsageError } from "../types";
|
||||||
import { type Command, UsageError } from "../types";
|
|
||||||
|
|
||||||
const DEFAULT_SERVER_PORT = 8080;
|
const SERVER_PORT = 8080;
|
||||||
|
|
||||||
const injectLiveReloadScript = (htmlContents: string, port: number): string =>
|
const injectLiveReloadScript = (htmlContents: string): string =>
|
||||||
htmlContents.replace(
|
htmlContents.replace(
|
||||||
"</html>",
|
"</html>",
|
||||||
`
|
`
|
||||||
<script>
|
<script>
|
||||||
const ws = new WebSocket("ws://127.0.0.1:${port}");
|
const ws = new WebSocket("ws://127.0.0.1:${SERVER_PORT}");
|
||||||
ws.onmessage = function() {
|
ws.onmessage = function() {
|
||||||
console.log('dev server requested reload, reloading...');
|
console.log('dev server requested reload, reloading...');
|
||||||
location.reload();
|
location.reload();
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
</html>
|
</html>
|
||||||
`,
|
`
|
||||||
);
|
);
|
||||||
|
|
||||||
const guessMimeType = (ext: string): string => {
|
const guessMimeType = (ext: string): string => {
|
||||||
let mimeType: string;
|
let mimeType;
|
||||||
switch (ext) {
|
switch (ext) {
|
||||||
case ".apng":
|
case ".apng":
|
||||||
mimeType = "image/apng";
|
mimeType = "image/apng";
|
||||||
break;
|
break;
|
||||||
case ".bmp":
|
case ".bmp":
|
||||||
mimeType = "image/bmp";
|
mimeType = "image/bmp";
|
||||||
break;
|
break;
|
||||||
case ".css":
|
case ".css":
|
||||||
mimeType = "text/css";
|
mimeType = "text/css";
|
||||||
break;
|
break;
|
||||||
case ".eot":
|
case ".eot":
|
||||||
mimeType = "application/vnd.ms-fontobject";
|
mimeType = "application/vnd.ms-fontobject";
|
||||||
break;
|
break;
|
||||||
case ".gif":
|
case ".gif":
|
||||||
mimeType = "image/gif";
|
mimeType = "image/gif";
|
||||||
break;
|
break;
|
||||||
case ".htm":
|
case ".htm":
|
||||||
case ".html":
|
case ".html":
|
||||||
mimeType = "text/html";
|
mimeType = "text/html";
|
||||||
break;
|
break;
|
||||||
case ".ico":
|
case ".ico":
|
||||||
mimeType = "image/vnd.microsoft.icon";
|
mimeType = "image/vnd.microsoft.icon";
|
||||||
break;
|
break;
|
||||||
case ".jpg":
|
case ".jpg":
|
||||||
case ".jpeg":
|
case ".jpeg":
|
||||||
mimeType = "image/jpeg";
|
mimeType = "image/jpeg";
|
||||||
break;
|
break;
|
||||||
case ".js":
|
case ".js":
|
||||||
case ".mjs":
|
case ".mjs":
|
||||||
mimeType = "text/javascript";
|
mimeType = "text/javascript";
|
||||||
break;
|
break;
|
||||||
case ".mp3":
|
case ".mp3":
|
||||||
mimeType = "audio/mpeg";
|
mimeType = "audio/mpeg";
|
||||||
break;
|
break;
|
||||||
case ".mpeg":
|
case ".mpeg":
|
||||||
mimeType = "video/mpeg";
|
mimeType = "video/mpeg";
|
||||||
break;
|
break;
|
||||||
case ".oga":
|
case ".oga":
|
||||||
mimeType = "audio/ogg";
|
mimeType = "audio/ogg";
|
||||||
break;
|
break;
|
||||||
case ".ogv":
|
case ".ogv":
|
||||||
mimeType = "video/ogg";
|
mimeType = "video/ogg";
|
||||||
break;
|
break;
|
||||||
case ".otf":
|
case ".otf":
|
||||||
mimeType = "font/otf";
|
mimeType = "font/otf";
|
||||||
break;
|
break;
|
||||||
case ".png":
|
case ".png":
|
||||||
mimeType = "image/png";
|
mimeType = "image/png";
|
||||||
break;
|
break;
|
||||||
case ".svg":
|
case ".svg":
|
||||||
mimeType = "image/svg+xml";
|
mimeType = "image/svg+xml";
|
||||||
break;
|
break;
|
||||||
case ".txt":
|
case ".txt":
|
||||||
mimeType = "text/plain";
|
mimeType = "text/plain";
|
||||||
break;
|
break;
|
||||||
case ".tif":
|
case ".tif":
|
||||||
case ".tiff":
|
case ".tiff":
|
||||||
mimeType = "image/tiff";
|
mimeType = "image/tiff";
|
||||||
break;
|
break;
|
||||||
case ".ttf":
|
case ".ttf":
|
||||||
mimeType = "font/ttf";
|
mimeType = "font/ttf";
|
||||||
break;
|
break;
|
||||||
case ".wav":
|
case ".wav":
|
||||||
mimeType = "audio/wav";
|
mimeType = "audio/wav";
|
||||||
break;
|
break;
|
||||||
case ".weba":
|
case ".weba":
|
||||||
mimeType = "audio/webm";
|
mimeType = "audio/webm";
|
||||||
break;
|
break;
|
||||||
case ".webm":
|
case ".webm":
|
||||||
mimeType = "video/webm";
|
mimeType = "video/webm";
|
||||||
break;
|
break;
|
||||||
case ".webp":
|
case ".webp":
|
||||||
mimeType = "image/webp";
|
mimeType = "image/webp";
|
||||||
break;
|
break;
|
||||||
case ".woff":
|
case ".woff":
|
||||||
mimeType = "font/woff";
|
mimeType = "font/woff";
|
||||||
break;
|
break;
|
||||||
case ".woff2":
|
case ".woff2":
|
||||||
mimeType = "font/woff2";
|
mimeType = "font/woff2";
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
// Default to binary mimetype which most browsers will be able to
|
// Default to binary mimetype which most browsers will be able to
|
||||||
// correctly interpret in the right context.
|
// correctly interpret in the right context.
|
||||||
mimeType = "application/octet-stream";
|
mimeType = "application/octet-stream";
|
||||||
}
|
}
|
||||||
return mimeType;
|
return mimeType;
|
||||||
};
|
};
|
||||||
|
|
||||||
const portFromServer = (
|
const serve = (publicDir: string): http.Server => {
|
||||||
addrInfo: { port: number } | object | string | undefined | null,
|
const server = http.createServer(async (req, res) => {
|
||||||
): number => {
|
if (req.url == null) {
|
||||||
if (
|
res.writeHead(404);
|
||||||
typeof addrInfo !== "object" ||
|
res.end();
|
||||||
addrInfo == null ||
|
return;
|
||||||
!("port" in addrInfo)
|
}
|
||||||
) {
|
|
||||||
throw new Error(
|
|
||||||
"server address does not have a valid port (this should never happen!)",
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return addrInfo.port;
|
|
||||||
};
|
|
||||||
|
|
||||||
const startHttpServer = async (publicDir: string): Promise<http.Server> => {
|
let reqExt = path.extname(req.url);
|
||||||
const httpServer = http.createServer(async (req, res) => {
|
let reqPath = req.url;
|
||||||
if (req.url == null) {
|
if (!reqExt) {
|
||||||
res.writeHead(404);
|
reqPath = path.join(reqPath, "index.html");
|
||||||
res.end();
|
reqExt = ".html";
|
||||||
return;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
let reqExt = path.extname(req.url);
|
let contents;
|
||||||
let reqPath = req.url;
|
try {
|
||||||
if (!reqExt) {
|
contents = await fs.readFile(path.join(publicDir, reqPath));
|
||||||
reqPath = path.join(reqPath, "index.html");
|
} catch (error) {
|
||||||
reqExt = ".html";
|
console.error(`unable to load file ${reqPath}`);
|
||||||
}
|
res.writeHead(404);
|
||||||
|
res.end();
|
||||||
let contents: Buffer | string;
|
return;
|
||||||
try {
|
}
|
||||||
contents = await fs.readFile(path.join(publicDir, reqPath));
|
const mimeType = guessMimeType(reqExt);
|
||||||
} catch (_error) {
|
if (mimeType === "text/html") {
|
||||||
console.error(`unable to load file ${reqPath}`);
|
contents = injectLiveReloadScript(contents.toString("utf8"));
|
||||||
res.writeHead(404);
|
}
|
||||||
res.end();
|
res.writeHead(200, {
|
||||||
return;
|
"Content-Type": mimeType,
|
||||||
}
|
});
|
||||||
const mimeType = guessMimeType(reqExt);
|
res.end(contents);
|
||||||
if (mimeType === "text/html") {
|
});
|
||||||
const port = portFromServer(req.socket.address());
|
return server;
|
||||||
contents = injectLiveReloadScript(contents.toString("utf8"), port);
|
|
||||||
}
|
|
||||||
res.writeHead(200, {
|
|
||||||
"Content-Type": mimeType,
|
|
||||||
});
|
|
||||||
res.end(contents);
|
|
||||||
});
|
|
||||||
const listen = async (port?: number): Promise<void> =>
|
|
||||||
new Promise((resolve, reject) => {
|
|
||||||
httpServer
|
|
||||||
.once("error", (error) => reject(error))
|
|
||||||
.once("listening", () => resolve())
|
|
||||||
.listen(port);
|
|
||||||
});
|
|
||||||
try {
|
|
||||||
await listen(DEFAULT_SERVER_PORT);
|
|
||||||
} catch (error) {
|
|
||||||
if (
|
|
||||||
error instanceof Error &&
|
|
||||||
isErrnoException(error) &&
|
|
||||||
error.code !== "EADDRINUSE"
|
|
||||||
) {
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
await listen();
|
|
||||||
}
|
|
||||||
const port = portFromServer(httpServer.address());
|
|
||||||
console.log(`Listening at http://127.0.0.1:${port}`);
|
|
||||||
return httpServer;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const startWebSocketServer = async (
|
const startWebSocketServer = async (
|
||||||
httpServer: http.Server,
|
server: http.Server
|
||||||
): Promise<import("ws").Server | undefined> => {
|
): Promise<import("ws").Server | undefined> => {
|
||||||
// Attempt to load the ws module, aborting if it isn't available.
|
// Attempt to load the ws module, aborting if it isn't available.
|
||||||
let ws: typeof import("ws");
|
let ws;
|
||||||
try {
|
try {
|
||||||
ws = await import("ws");
|
ws = await import("ws");
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (
|
if (error.code !== "MODULE_NOT_FOUND") {
|
||||||
error instanceof Error &&
|
throw error;
|
||||||
isErrnoException(error) &&
|
}
|
||||||
error.code !== "MODULE_NOT_FOUND"
|
console.warn(`'ws' module not found, live-reloading will be disabled`);
|
||||||
) {
|
return;
|
||||||
throw error;
|
}
|
||||||
}
|
const wsServer = new ws.Server({ server });
|
||||||
console.warn(`'ws' module not found, live-reloading will be disabled`);
|
wsServer.on("connection", () => {
|
||||||
return;
|
console.log("connected to dev site");
|
||||||
}
|
});
|
||||||
const wsServer = new ws.Server({ server: httpServer });
|
return wsServer;
|
||||||
wsServer.on("connection", () => {
|
|
||||||
console.log("connected to dev site");
|
|
||||||
});
|
|
||||||
return wsServer;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const watchFolders = async (
|
const watchFolders = async (
|
||||||
folders: string[],
|
folders: string[],
|
||||||
listener: (eventType?: "update" | "remove", fileName?: string) => void,
|
listener: (eventType: "update" | "remove", fileName: string) => void
|
||||||
): Promise<void> => {
|
): Promise<void> => {
|
||||||
// Try to load node-watch, falling back to fs watch if node-watch isn't
|
// Try to load node-watch, falling back to fs watch if node-watch isn't
|
||||||
// available.
|
// available.
|
||||||
try {
|
try {
|
||||||
const nodeWatch = await import("node-watch");
|
const { default: watch } = await import("node-watch");
|
||||||
nodeWatch.default(folders, { recursive: true }, listener);
|
watch(folders, { recursive: true }, listener);
|
||||||
return;
|
return;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (
|
if (error.code !== "MODULE_NOT_FOUND") {
|
||||||
error instanceof Error &&
|
throw error;
|
||||||
isErrnoException(error) &&
|
}
|
||||||
error.code !== "MODULE_NOT_FOUND"
|
console.warn(
|
||||||
) {
|
`'node-watch' module not found, falling back to fs.watch (may ` +
|
||||||
throw error;
|
`result in file watch issues on some OSes)`
|
||||||
}
|
);
|
||||||
console.warn(
|
}
|
||||||
`'node-watch' module not found, falling back to fs.watch (may ` +
|
// NOTE: fs.watch has significant cross-platform issues, including
|
||||||
"result in file watch issues on some OSes)",
|
// triggering duplicate file events on some systems.
|
||||||
);
|
for (const folder of folders) {
|
||||||
}
|
watch(folder, { recursive: true }, (_, fileName) => {
|
||||||
// NOTE: fs.watch has significant cross-platform issues, including
|
listener("update", fileName);
|
||||||
// triggering duplicate file events on some systems.
|
});
|
||||||
for (const folder of folders) {
|
}
|
||||||
watch(folder, { recursive: true }, (_, fileName) => {
|
|
||||||
listener("update", fileName || undefined);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const helpText = `\
|
const helpText = `\
|
||||||
|
|
@ -259,16 +213,16 @@ Args:
|
||||||
`;
|
`;
|
||||||
|
|
||||||
interface DevArgs {
|
interface DevArgs {
|
||||||
rootDir: string;
|
rootDir: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const parseArgs = (args: string[]): DevArgs | null => {
|
const parseArgs = (args: string[]): DevArgs | null => {
|
||||||
if (args.length > 1) {
|
if (args.length > 1) {
|
||||||
throw new UsageError("too many arguments provided", helpText);
|
throw new UsageError("too many arguments provided", helpText);
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
rootDir: args[0] || process.cwd(),
|
rootDir: args[0] || process.cwd(),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -277,37 +231,38 @@ const parseArgs = (args: string[]): DevArgs | null => {
|
||||||
* production static hosting environment as closely as possible.
|
* production static hosting environment as closely as possible.
|
||||||
*/
|
*/
|
||||||
const devCommand: Command = {
|
const devCommand: Command = {
|
||||||
async execute(args: string[]): Promise<void> {
|
async execute(args: string[]): Promise<void> {
|
||||||
const parsedArgs = parseArgs(args);
|
const parsedArgs = parseArgs(args);
|
||||||
if (!parsedArgs) {
|
if (!parsedArgs) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const { rootDir } = parsedArgs;
|
const { rootDir } = parsedArgs;
|
||||||
const rebuild = async (): Promise<Config> => {
|
const rebuild = async (): Promise<Config> => {
|
||||||
const config = await loadConfig(rootDir);
|
const config = await loadConfig(rootDir);
|
||||||
await renderSite(config);
|
await renderSite(config);
|
||||||
return config;
|
return config;
|
||||||
};
|
};
|
||||||
const config = await rebuild();
|
const config = await rebuild();
|
||||||
const { outDir } = config.paths;
|
const { outDir } = config.paths;
|
||||||
const httpServer = await startHttpServer(outDir);
|
const httpServer = serve(outDir);
|
||||||
const wsServer = await startWebSocketServer(httpServer);
|
const wsServer = await startWebSocketServer(httpServer);
|
||||||
const watchedFolders = config.watch.filter((filePath) =>
|
httpServer.listen(SERVER_PORT, () => {
|
||||||
existsSync(filePath),
|
console.log(`Listening at http://127.0.0.1:${SERVER_PORT}`);
|
||||||
);
|
});
|
||||||
await watchFolders(watchedFolders, async (event, filePath) => {
|
const watchedFolders = config.watch.filter((filePath) =>
|
||||||
const filePathForLog = filePath || "<UNKNOWN_FILE>";
|
existsSync(filePath)
|
||||||
const eventForLog = event || "<UNKNOWN_EVENT>";
|
);
|
||||||
console.log(`${filePathForLog}:${eventForLog} triggering rebuild...`);
|
watchFolders(watchedFolders, async (event, filePath) => {
|
||||||
await rebuild();
|
console.log(`${filePath}:${event} triggering rebuild...`);
|
||||||
if (wsServer != null) {
|
await rebuild();
|
||||||
console.log("rebuild finished, reloading browsers...");
|
if (wsServer != null) {
|
||||||
for (const ws of wsServer.clients) {
|
console.log(`rebuild finished, reloading browsers...`);
|
||||||
ws.send("reload");
|
for (const ws of wsServer.clients) {
|
||||||
}
|
ws.send("reload");
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
},
|
});
|
||||||
helpText,
|
},
|
||||||
|
helpText,
|
||||||
};
|
};
|
||||||
export = devCommand;
|
export = devCommand;
|
||||||
|
|
|
||||||
157
src/cli/index.ts
157
src/cli/index.ts
|
|
@ -3,7 +3,7 @@
|
||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { type Command, UsageError } from "./types";
|
import { Command, UsageError } from "./types";
|
||||||
|
|
||||||
const globalHelpText = `\
|
const globalHelpText = `\
|
||||||
Usage: websnacks [...globalOptions] <command>
|
Usage: websnacks [...globalOptions] <command>
|
||||||
|
|
@ -19,94 +19,97 @@ Commands:
|
||||||
`;
|
`;
|
||||||
|
|
||||||
interface Options {
|
interface Options {
|
||||||
showHelp: boolean;
|
showHelp: boolean;
|
||||||
require: string[];
|
require: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
const parseArgs = (
|
const parseArgs = (
|
||||||
args: string[],
|
args: string[]
|
||||||
): { options: Options; commandName?: string; commandArgs: string[] } => {
|
): { options: Options; commandName?: string; commandArgs: string[] } => {
|
||||||
const options: Options = {
|
const options: Options = {
|
||||||
showHelp: false,
|
showHelp: false,
|
||||||
require: [],
|
require: [],
|
||||||
};
|
};
|
||||||
// Look ahead for the first argument that doesn't start with a "-" to
|
// Look ahead for the first argument that doesn't start with a "-" to
|
||||||
// indicate the end of option parsing.
|
// indicate the end of option parsing.
|
||||||
while (args.length > 0 && args[0].indexOf("-") >= 0) {
|
while (args.length > 0 && args[0].indexOf("-") >= 0) {
|
||||||
const opt = args.shift();
|
const opt = args.shift();
|
||||||
switch (opt) {
|
switch (opt) {
|
||||||
case "-h":
|
case "-h":
|
||||||
case "--help": {
|
case "--help": {
|
||||||
options.showHelp = true;
|
options.showHelp = true;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case "-r":
|
case "-r":
|
||||||
case "--require": {
|
case "--require": {
|
||||||
const moduleName = args.shift();
|
const moduleName = args.shift();
|
||||||
if (moduleName == null) {
|
if (moduleName == null) {
|
||||||
throw new UsageError(
|
throw new UsageError(
|
||||||
"-r requires a valid module name",
|
`-r requires a valid module name`,
|
||||||
globalHelpText,
|
globalHelpText
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
options.require.push(moduleName);
|
options.require.push(moduleName);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
default:
|
default:
|
||||||
throw new UsageError(`unknown option ${opt}`, globalHelpText);
|
throw new UsageError(`unknown option ${opt}`, globalHelpText);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const commandName = args.shift();
|
const commandName = args.shift();
|
||||||
return { options, commandName, commandArgs: args };
|
return { options, commandName, commandArgs: args };
|
||||||
};
|
};
|
||||||
|
|
||||||
const _main = async (args: string[]): Promise<void> => {
|
const _main = async (args: string[]): Promise<void> => {
|
||||||
const { options, commandName, commandArgs } = parseArgs(args);
|
const { options, commandName, commandArgs } = parseArgs(args);
|
||||||
if (options.showHelp) {
|
if (options.showHelp) {
|
||||||
console.log(`${globalHelpText}\n`);
|
console.log(`${globalHelpText}\n`);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (commandName == null) {
|
if (commandName == null) {
|
||||||
throw new UsageError("must specify a valid command", globalHelpText);
|
throw new UsageError(`must specify a valid command`, globalHelpText);
|
||||||
}
|
}
|
||||||
for (const moduleName of options.require) {
|
for (const moduleName of options.require) {
|
||||||
await import(moduleName);
|
await import(moduleName);
|
||||||
}
|
}
|
||||||
|
|
||||||
let command: Command;
|
let command: Command;
|
||||||
switch (commandName) {
|
switch (commandName) {
|
||||||
case "build":
|
case "build":
|
||||||
command = await import("./commands/build");
|
command = await import("./commands/build");
|
||||||
break;
|
break;
|
||||||
case "dev":
|
case "dev":
|
||||||
command = await import("./commands/dev");
|
command = await import("./commands/dev");
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
throw new UsageError(`unknown command ${commandName}`, globalHelpText);
|
throw new UsageError(
|
||||||
}
|
`unknown command ${commandName}`,
|
||||||
// NOTE: Should this just delegate to the command?
|
globalHelpText
|
||||||
for (const arg of commandArgs) {
|
);
|
||||||
if (arg === "--help" || arg === "-h") {
|
}
|
||||||
console.log(`${command.helpText}\n`);
|
// NOTE: Should this just delegate to the command?
|
||||||
return;
|
for (const arg of commandArgs) {
|
||||||
}
|
if (arg === "--help" || arg === "-h") {
|
||||||
}
|
console.log(`${command.helpText}\n`);
|
||||||
await command.execute(commandArgs);
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await command.execute(commandArgs);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Entrypoint of the CLI app.
|
* Entrypoint of the CLI app.
|
||||||
*/
|
*/
|
||||||
export const main = (): void => {
|
export const main = (): void => {
|
||||||
_main(process.argv.slice(2)).catch((error) => {
|
_main(process.argv.slice(2)).catch((error) => {
|
||||||
if (error instanceof UsageError) {
|
if (error instanceof UsageError) {
|
||||||
console.error(`Error: ${error.message}\n`);
|
console.error(`Error: ${error.message}\n`);
|
||||||
console.log(`${error.helpText}\n`);
|
console.log(`${error.helpText}\n`);
|
||||||
} else {
|
} else {
|
||||||
const errorMsg =
|
const errorMsg =
|
||||||
error instanceof Error ? error.stack : JSON.stringify(error);
|
error instanceof Error ? error.stack : JSON.stringify(error);
|
||||||
console.error(`Unexpected error: ${errorMsg}\n`);
|
console.error(`Unexpected error: ${errorMsg}\n`);
|
||||||
}
|
}
|
||||||
process.exit(1);
|
process.exit(1);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -7,16 +7,16 @@
|
||||||
* CLI command representing an action that the CLI program supports.
|
* CLI command representing an action that the CLI program supports.
|
||||||
*/
|
*/
|
||||||
export interface Command {
|
export interface Command {
|
||||||
/**
|
/**
|
||||||
* Execute the command with the specified arguments.
|
* Execute the command with the specified arguments.
|
||||||
*
|
*
|
||||||
* @param args List of CLI arguments to pass to the command.
|
* @param args List of CLI arguments to pass to the command.
|
||||||
*/
|
*/
|
||||||
execute(args: string[]): Promise<void>;
|
execute(args: string[]): Promise<void>;
|
||||||
/**
|
/**
|
||||||
* Help text for this command.
|
* Help text for this command.
|
||||||
*/
|
*/
|
||||||
helpText: string;
|
helpText: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -24,11 +24,11 @@ export interface Command {
|
||||||
* text to guide the user to correct their mistake.
|
* text to guide the user to correct their mistake.
|
||||||
*/
|
*/
|
||||||
export class UsageError extends Error {
|
export class UsageError extends Error {
|
||||||
public readonly helpText: string;
|
public readonly helpText: string;
|
||||||
|
|
||||||
public constructor(message: string, helpText: string) {
|
public constructor(message: string, helpText: string) {
|
||||||
super(message);
|
super(message);
|
||||||
|
|
||||||
this.helpText = helpText;
|
this.helpText = helpText;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,46 +7,40 @@
|
||||||
* An in-memory representation of a renderable HTML element.
|
* An in-memory representation of a renderable HTML element.
|
||||||
*/
|
*/
|
||||||
export interface HTMLElement {
|
export interface HTMLElement {
|
||||||
/**
|
/**
|
||||||
* Name of the tag that gets output upon rendering.
|
* Name of the tag that gets output upon rendering.
|
||||||
*/
|
*/
|
||||||
tag: string;
|
tag: string;
|
||||||
/**
|
/**
|
||||||
* Record of attribute names and values that should be output in the opening
|
* Record of attribute names and values that should be output in the opening
|
||||||
* tag.
|
* tag.
|
||||||
*/
|
*/
|
||||||
attributes: Record<string, string | number | boolean>;
|
attributes: Record<string, string | number | boolean>;
|
||||||
/**
|
/**
|
||||||
* Child elements to render nested within this HTML element.
|
* Child elements to render nested within this HTML element.
|
||||||
*/
|
*/
|
||||||
children: Element[];
|
children: Element[];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* All valid types of elements that can be rendered to HTML.
|
* All valid types of elements that can be rendered to HTML.
|
||||||
*/
|
*/
|
||||||
export type Element =
|
export type Element =
|
||||||
| Element[]
|
| Element[]
|
||||||
| HTMLElement
|
| HTMLElement
|
||||||
| string
|
| string
|
||||||
| number
|
| number
|
||||||
| boolean
|
| boolean
|
||||||
| undefined
|
| undefined
|
||||||
| null;
|
| null;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Custom HTMLElement factory that can be parameterized by props.
|
* Custom HTMLElement factory that can be parameterized by props.
|
||||||
*/
|
*/
|
||||||
export interface Component<P extends object = Record<string, unknown>> {
|
export interface Component<P extends object = {}> {
|
||||||
(
|
(
|
||||||
props: P & {
|
props: P & {
|
||||||
children?: Element[];
|
children?: Element[];
|
||||||
},
|
}
|
||||||
): HTMLElement;
|
): HTMLElement;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Fragment: Component = ({ children }) => ({
|
|
||||||
tag: "#fragment",
|
|
||||||
attributes: {},
|
|
||||||
children: children || [],
|
|
||||||
});
|
|
||||||
|
|
|
||||||
101
src/config.ts
101
src/config.ts
|
|
@ -3,48 +3,48 @@
|
||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import * as path from "node:path";
|
import * as path from "path";
|
||||||
|
|
||||||
import { decacheModule } from "./utils";
|
import { purgeModuleAndDepsFromCache } from "./utils";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Paths used during configuration.
|
* Paths used during configuration.
|
||||||
*/
|
*/
|
||||||
export interface ConfigPaths {
|
export interface ConfigPaths {
|
||||||
rootDir: string;
|
rootDir: string;
|
||||||
outDir: string;
|
outDir: string;
|
||||||
pagesDir: string;
|
pagesDir: string;
|
||||||
staticAssetsDir: string;
|
staticAssetsDir: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Hooks that allow user code to customize site rendering.
|
* Hooks that allow user code to customize site rendering.
|
||||||
*/
|
*/
|
||||||
export interface Hooks {
|
export interface Hooks {
|
||||||
/**
|
/**
|
||||||
* Hook that fires at the end of site rendering one all pages and assets are
|
* Hook that fires at the end of site rendering one all pages and assets are
|
||||||
* fully rendered.
|
* fully rendered.
|
||||||
*/
|
*/
|
||||||
afterSiteRender(context: ConfigPaths): Promise<void> | void;
|
afterSiteRender(context: ConfigPaths): Promise<void> | void;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* User-provided configuration options.
|
* User-provided configuration options.
|
||||||
*/
|
*/
|
||||||
export type UserConfig = {
|
export type UserConfig = {
|
||||||
/** Hook implementations that allow customizing the rendering process. */
|
/** Hook implementations that allow customizing the rendering process. */
|
||||||
hooks?: Partial<Hooks>;
|
hooks?: Partial<Hooks>;
|
||||||
/** Additional folders and files to watch by the development server. */
|
/** Additional folders and files to watch by the development server. */
|
||||||
watch?: string[];
|
watch?: string[];
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Fully-realized configuration for a websnacks site.
|
* Fully-realized configuration for a websnacks site.
|
||||||
*/
|
*/
|
||||||
export interface Config {
|
export interface Config {
|
||||||
paths: ConfigPaths;
|
paths: ConfigPaths;
|
||||||
hooks: Hooks;
|
hooks: Hooks;
|
||||||
watch: string[];
|
watch: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
||||||
|
|
@ -58,44 +58,29 @@ const noop = () => {};
|
||||||
* @return Fully-realized configuration.
|
* @return Fully-realized configuration.
|
||||||
*/
|
*/
|
||||||
export const loadConfig = async (rootDir: string): Promise<Config> => {
|
export const loadConfig = async (rootDir: string): Promise<Config> => {
|
||||||
let configPath = "";
|
const configPath = require.resolve(path.resolve(rootDir, "websnacks"));
|
||||||
let userConfig: UserConfig = {};
|
purgeModuleAndDepsFromCache(configPath);
|
||||||
// Attempt to load a websnacks.ts/js file in rootDir.
|
// TODO: validate user config.
|
||||||
try {
|
const userConfig = await import(configPath);
|
||||||
configPath = require.resolve(path.resolve(rootDir, "websnacks"));
|
const outDir = path.join(rootDir, "public");
|
||||||
decacheModule(configPath);
|
const pagesDir = path.join(rootDir, "pages");
|
||||||
// TODO: validate user config.
|
const staticAssetsDir = path.join(rootDir, "static");
|
||||||
userConfig = await import(configPath);
|
return {
|
||||||
} catch (_error) {
|
paths: {
|
||||||
// Use default config;
|
rootDir,
|
||||||
}
|
outDir,
|
||||||
const outDir = path.join(rootDir, "public");
|
pagesDir,
|
||||||
const pagesDir = path.join(rootDir, "pages");
|
staticAssetsDir,
|
||||||
const staticAssetsDir = path.join(rootDir, "static");
|
},
|
||||||
|
hooks: {
|
||||||
const watch = [pagesDir, staticAssetsDir];
|
afterSiteRender: noop,
|
||||||
if (configPath) {
|
...userConfig.hooks,
|
||||||
watch.push(path.relative(rootDir, configPath));
|
},
|
||||||
}
|
watch: [
|
||||||
if (userConfig.watch != null) {
|
...userConfig.watch.map((p: string) => path.relative(rootDir, p)),
|
||||||
for (const userWatch of userConfig.watch) {
|
path.relative(rootDir, configPath),
|
||||||
watch.push(path.relative(rootDir, userWatch));
|
pagesDir,
|
||||||
}
|
staticAssetsDir,
|
||||||
}
|
],
|
||||||
|
};
|
||||||
return {
|
|
||||||
paths: {
|
|
||||||
rootDir,
|
|
||||||
outDir,
|
|
||||||
pagesDir,
|
|
||||||
staticAssetsDir,
|
|
||||||
},
|
|
||||||
hooks: {
|
|
||||||
afterSiteRender: noop,
|
|
||||||
...userConfig.hooks,
|
|
||||||
},
|
|
||||||
watch,
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const defineConfig = (userConfig: UserConfig): UserConfig => userConfig;
|
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@
|
||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import type { Component, Element, HTMLElement } from "./component";
|
import { Component, Element, HTMLElement } from "./component";
|
||||||
import type { HTMLAttributes } from "./jsx";
|
import { HTMLAttributes } from "./jsx";
|
||||||
import { flatDeep } from "./utils";
|
import { flatDeep } from "./utils";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -18,9 +18,9 @@ import { flatDeep } from "./utils";
|
||||||
* @return Fully-realized HTMLElement, ready for rendering.
|
* @return Fully-realized HTMLElement, ready for rendering.
|
||||||
*/
|
*/
|
||||||
export function createElement<P extends object>(
|
export function createElement<P extends object>(
|
||||||
comp: Component<P>,
|
comp: Component<P>,
|
||||||
props: P,
|
props: P,
|
||||||
...children: Element[]
|
...children: Element[]
|
||||||
): HTMLElement;
|
): HTMLElement;
|
||||||
/**
|
/**
|
||||||
* Create an HTMLElement from a standard HTML5 tag.
|
* Create an HTMLElement from a standard HTML5 tag.
|
||||||
|
|
@ -33,44 +33,38 @@ export function createElement<P extends object>(
|
||||||
* @return Fully-realized HTMLElement, ready for rendering.
|
* @return Fully-realized HTMLElement, ready for rendering.
|
||||||
*/
|
*/
|
||||||
export function createElement(
|
export function createElement(
|
||||||
tag: string,
|
tag: string,
|
||||||
attrs: HTMLAttributes | null,
|
attrs: HTMLAttributes | null,
|
||||||
...children: Element[]
|
...children: Element[]
|
||||||
): HTMLElement;
|
): HTMLElement;
|
||||||
export function createElement(
|
export function createElement(
|
||||||
type: string | Component,
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
props: object | null,
|
type: string | Component<any>,
|
||||||
...children: Element[]
|
props: object | null,
|
||||||
|
...children: Element[]
|
||||||
): HTMLElement {
|
): HTMLElement {
|
||||||
// Flatten the children array so we can accept arrays as children.
|
// Flatten the children array so we can accept arrays as children.
|
||||||
const normalizedChildren = flatDeep(children);
|
const normalizedChildren = flatDeep(children);
|
||||||
if (type instanceof Function) {
|
if (type instanceof Function) {
|
||||||
return type({ ...props, children: normalizedChildren });
|
return type({ ...props, children: normalizedChildren });
|
||||||
}
|
}
|
||||||
|
|
||||||
if (type !== type.toLowerCase()) {
|
if (type !== type.toLowerCase()) {
|
||||||
console.warn(`constructed HTML5 tag with non-lowercase name ${type}`);
|
console.warn(`constructed HTML5 tag with non-lowercase name ${type}`);
|
||||||
}
|
}
|
||||||
const attrs: Record<string, string | number | boolean> = {};
|
const attrs: Record<string, string | number | boolean> = {};
|
||||||
for (const [key, value] of Object.entries(props || {})) {
|
for (const [key, value] of Object.entries(props || {})) {
|
||||||
if (key === "dangerouslySetInnerHTML") {
|
if (
|
||||||
if (children.length > 0) {
|
typeof value !== "string" &&
|
||||||
throw new Error(
|
typeof value !== "number" &&
|
||||||
'An element with children may not have a "dangerouslySetInnerHTML" prop since children would be overriden',
|
typeof value !== "boolean"
|
||||||
);
|
) {
|
||||||
}
|
console.warn(
|
||||||
attrs[key] = value.__html;
|
`non-primitive attribute ${key} = ${JSON.stringify(value)}`
|
||||||
continue;
|
);
|
||||||
}
|
continue;
|
||||||
if (
|
}
|
||||||
typeof value !== "string" &&
|
attrs[key] = value;
|
||||||
typeof value !== "number" &&
|
}
|
||||||
typeof value !== "boolean"
|
return { tag: type, attributes: attrs, children: normalizedChildren };
|
||||||
) {
|
|
||||||
console.warn(`non-primitive attribute ${key} = ${JSON.stringify(value)}`);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
attrs[key] = value;
|
|
||||||
}
|
|
||||||
return { tag: type, attributes: attrs, children: normalizedChildren };
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export { Component, Fragment, HTMLElement } from "./component";
|
export { HTMLElement, Component } from "./component";
|
||||||
export { defineConfig, UserConfig as Config } from "./config";
|
export { UserConfig as Config } from "./config";
|
||||||
export { createElement } from "./create-element";
|
export { createElement } from "./create-element";
|
||||||
export * from "./jsx";
|
export * from "./jsx";
|
||||||
|
|
|
||||||
535
src/jsx.ts
535
src/jsx.ts
|
|
@ -4,285 +4,278 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
import type { HTMLElement } from "./component";
|
import { HTMLElement } from "./component";
|
||||||
|
|
||||||
export interface RdfaAttributes {
|
export interface RdfaAttributes {
|
||||||
about?: string;
|
about?: string;
|
||||||
datatype?: string;
|
datatype?: string;
|
||||||
inlist?: boolean;
|
inlist?: boolean;
|
||||||
prefix?: string;
|
prefix?: string;
|
||||||
property?: string;
|
property?: string;
|
||||||
resource?: string;
|
resource?: string;
|
||||||
typeof?: string;
|
typeof?: string;
|
||||||
vocab?: string;
|
vocab?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface MicrodataAttributes {
|
export interface MicrodataAttributes {
|
||||||
itemProp?: string;
|
itemProp?: string;
|
||||||
itemScope?: boolean;
|
itemScope?: boolean;
|
||||||
itemType?: string;
|
itemType?: string;
|
||||||
itemID?: string;
|
itemID?: string;
|
||||||
itemRef?: string;
|
itemRef?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface SetInnerHtmlAttributes {
|
export interface HTMLAttributes extends RdfaAttributes, MicrodataAttributes {
|
||||||
dangerouslySetInnerHTML?: { __html: string };
|
accept?: string;
|
||||||
}
|
acceptCharset?: string;
|
||||||
|
accessKey?: string;
|
||||||
export interface HTMLAttributes
|
action?: string;
|
||||||
extends RdfaAttributes,
|
allowFullScreen?: boolean;
|
||||||
MicrodataAttributes,
|
allowTransparency?: boolean;
|
||||||
SetInnerHtmlAttributes {
|
alt?: string;
|
||||||
accept?: string;
|
as?: string;
|
||||||
acceptCharset?: string;
|
async?: boolean;
|
||||||
accessKey?: string;
|
autoComplete?: string;
|
||||||
action?: string;
|
autoCorrect?: string;
|
||||||
allowFullScreen?: boolean;
|
autoFocus?: boolean;
|
||||||
allowTransparency?: boolean;
|
autoPlay?: boolean;
|
||||||
alt?: string;
|
capture?: boolean;
|
||||||
as?: string;
|
cellPadding?: number | string;
|
||||||
async?: boolean;
|
cellSpacing?: number | string;
|
||||||
autoComplete?: string;
|
charSet?: string;
|
||||||
autoCorrect?: string;
|
challenge?: string;
|
||||||
autoFocus?: boolean;
|
checked?: boolean;
|
||||||
autoPlay?: boolean;
|
class?: string;
|
||||||
capture?: boolean;
|
className?: string;
|
||||||
cellPadding?: number | string;
|
cols?: number;
|
||||||
cellSpacing?: number | string;
|
colSpan?: number;
|
||||||
charSet?: string;
|
content?: string;
|
||||||
challenge?: string;
|
contentEditable?: boolean;
|
||||||
checked?: boolean;
|
contextMenu?: string;
|
||||||
class?: string;
|
controls?: boolean;
|
||||||
className?: string;
|
controlsList?: string;
|
||||||
cols?: number;
|
coords?: string;
|
||||||
colSpan?: number;
|
crossOrigin?: string;
|
||||||
content?: string;
|
data?: string;
|
||||||
contentEditable?: boolean;
|
dateTime?: string;
|
||||||
contextMenu?: string;
|
default?: boolean;
|
||||||
controls?: boolean;
|
defer?: boolean;
|
||||||
controlsList?: string;
|
dir?: "auto" | "rtl" | "ltr";
|
||||||
coords?: string;
|
disabled?: boolean;
|
||||||
crossOrigin?: string;
|
disableRemotePlayback?: boolean;
|
||||||
data?: string;
|
download?: boolean | string;
|
||||||
dateTime?: string;
|
draggable?: boolean;
|
||||||
default?: boolean;
|
encType?: string;
|
||||||
defer?: boolean;
|
form?: string;
|
||||||
dir?: "auto" | "rtl" | "ltr";
|
formAction?: string;
|
||||||
disabled?: boolean;
|
formEncType?: string;
|
||||||
disableRemotePlayback?: boolean;
|
formMethod?: string;
|
||||||
download?: boolean | string;
|
formNoValidate?: boolean;
|
||||||
draggable?: boolean;
|
formTarget?: string;
|
||||||
encType?: string;
|
frameBorder?: number | string;
|
||||||
form?: string;
|
headers?: string;
|
||||||
formAction?: string;
|
height?: number | string;
|
||||||
formEncType?: string;
|
hidden?: boolean;
|
||||||
formMethod?: string;
|
high?: number;
|
||||||
formNoValidate?: boolean;
|
href?: string;
|
||||||
formTarget?: string;
|
hrefLang?: string;
|
||||||
frameBorder?: number | string;
|
for?: string;
|
||||||
headers?: string;
|
htmlFor?: string;
|
||||||
height?: number | string;
|
httpEquiv?: string;
|
||||||
hidden?: boolean;
|
icon?: string;
|
||||||
high?: number;
|
id?: string;
|
||||||
href?: string;
|
inputMode?: string;
|
||||||
hrefLang?: string;
|
integrity?: string;
|
||||||
for?: string;
|
is?: string;
|
||||||
htmlFor?: string;
|
keyParams?: string;
|
||||||
httpEquiv?: string;
|
keyType?: string;
|
||||||
icon?: string;
|
kind?: string;
|
||||||
id?: string;
|
label?: string;
|
||||||
inputMode?: string;
|
lang?: string;
|
||||||
integrity?: string;
|
list?: string;
|
||||||
is?: string;
|
loop?: boolean;
|
||||||
keyParams?: string;
|
low?: number;
|
||||||
keyType?: string;
|
manifest?: string;
|
||||||
kind?: string;
|
marginHeight?: number;
|
||||||
label?: string;
|
marginWidth?: number;
|
||||||
lang?: string;
|
max?: number | string;
|
||||||
list?: string;
|
maxLength?: number;
|
||||||
loop?: boolean;
|
media?: string;
|
||||||
low?: number;
|
mediaGroup?: string;
|
||||||
manifest?: string;
|
method?: string;
|
||||||
marginHeight?: number;
|
min?: number | string;
|
||||||
marginWidth?: number;
|
minLength?: number;
|
||||||
max?: number | string;
|
multiple?: boolean;
|
||||||
maxLength?: number;
|
muted?: boolean;
|
||||||
media?: string;
|
name?: string;
|
||||||
mediaGroup?: string;
|
nonce?: string;
|
||||||
method?: string;
|
noValidate?: boolean;
|
||||||
min?: number | string;
|
open?: boolean;
|
||||||
minLength?: number;
|
optimum?: number;
|
||||||
multiple?: boolean;
|
pattern?: string;
|
||||||
muted?: boolean;
|
placeholder?: string;
|
||||||
name?: string;
|
playsInline?: boolean;
|
||||||
nonce?: string;
|
poster?: string;
|
||||||
noValidate?: boolean;
|
preload?: string;
|
||||||
open?: boolean;
|
radioGroup?: string;
|
||||||
optimum?: number;
|
readOnly?: boolean;
|
||||||
pattern?: string;
|
rel?: string;
|
||||||
placeholder?: string;
|
required?: boolean;
|
||||||
playsInline?: boolean;
|
role?: string;
|
||||||
poster?: string;
|
rows?: number;
|
||||||
preload?: string;
|
rowSpan?: number;
|
||||||
radioGroup?: string;
|
sandbox?: string;
|
||||||
readOnly?: boolean;
|
scope?: string;
|
||||||
rel?: string;
|
scoped?: boolean;
|
||||||
required?: boolean;
|
scrolling?: string;
|
||||||
role?: string;
|
seamless?: boolean;
|
||||||
rows?: number;
|
selected?: boolean;
|
||||||
rowSpan?: number;
|
shape?: string;
|
||||||
sandbox?: string;
|
size?: number;
|
||||||
scope?: string;
|
sizes?: string;
|
||||||
scoped?: boolean;
|
slot?: string;
|
||||||
scrolling?: string;
|
span?: number;
|
||||||
seamless?: boolean;
|
spellcheck?: boolean;
|
||||||
selected?: boolean;
|
src?: string;
|
||||||
shape?: string;
|
srcset?: string;
|
||||||
size?: number;
|
srcDoc?: string;
|
||||||
sizes?: string;
|
srcLang?: string;
|
||||||
slot?: string;
|
srcSet?: string;
|
||||||
span?: number;
|
start?: number;
|
||||||
spellcheck?: boolean;
|
step?: number | string;
|
||||||
src?: string;
|
style?: string | { [key: string]: string | number };
|
||||||
srcset?: string;
|
summary?: string;
|
||||||
srcDoc?: string;
|
tabIndex?: number;
|
||||||
srcLang?: string;
|
target?: string;
|
||||||
srcSet?: string;
|
title?: string;
|
||||||
start?: number;
|
type?: string;
|
||||||
step?: number | string;
|
useMap?: string;
|
||||||
style?: string | { [key: string]: string | number };
|
value?: string | string[] | number;
|
||||||
summary?: string;
|
volume?: string | number;
|
||||||
tabIndex?: number;
|
width?: number | string;
|
||||||
target?: string;
|
wmode?: string;
|
||||||
title?: string;
|
wrap?: string;
|
||||||
type?: string;
|
|
||||||
useMap?: string;
|
|
||||||
value?: string | string[] | number;
|
|
||||||
volume?: string | number;
|
|
||||||
width?: number | string;
|
|
||||||
wmode?: string;
|
|
||||||
wrap?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
namespace JSX {
|
namespace JSX {
|
||||||
type Element = HTMLElement;
|
type Element = HTMLElement;
|
||||||
type IntrinsicElements = {
|
type IntrinsicElements = {
|
||||||
a: HTMLAttributes;
|
a: HTMLAttributes;
|
||||||
abbr: HTMLAttributes;
|
abbr: HTMLAttributes;
|
||||||
address: HTMLAttributes;
|
address: HTMLAttributes;
|
||||||
area: HTMLAttributes;
|
area: HTMLAttributes;
|
||||||
article: HTMLAttributes;
|
article: HTMLAttributes;
|
||||||
aside: HTMLAttributes;
|
aside: HTMLAttributes;
|
||||||
audio: HTMLAttributes;
|
audio: HTMLAttributes;
|
||||||
b: HTMLAttributes;
|
b: HTMLAttributes;
|
||||||
base: HTMLAttributes;
|
base: HTMLAttributes;
|
||||||
bdi: HTMLAttributes;
|
bdi: HTMLAttributes;
|
||||||
bdo: HTMLAttributes;
|
bdo: HTMLAttributes;
|
||||||
big: HTMLAttributes;
|
big: HTMLAttributes;
|
||||||
blockquote: HTMLAttributes;
|
blockquote: HTMLAttributes;
|
||||||
body: HTMLAttributes;
|
body: HTMLAttributes;
|
||||||
br: HTMLAttributes;
|
br: HTMLAttributes;
|
||||||
button: HTMLAttributes;
|
button: HTMLAttributes;
|
||||||
canvas: HTMLAttributes;
|
canvas: HTMLAttributes;
|
||||||
caption: HTMLAttributes;
|
caption: HTMLAttributes;
|
||||||
cite: HTMLAttributes;
|
cite: HTMLAttributes;
|
||||||
code: HTMLAttributes;
|
code: HTMLAttributes;
|
||||||
col: HTMLAttributes;
|
col: HTMLAttributes;
|
||||||
colgroup: HTMLAttributes;
|
colgroup: HTMLAttributes;
|
||||||
data: HTMLAttributes;
|
data: HTMLAttributes;
|
||||||
datalist: HTMLAttributes;
|
datalist: HTMLAttributes;
|
||||||
dd: HTMLAttributes;
|
dd: HTMLAttributes;
|
||||||
del: HTMLAttributes;
|
del: HTMLAttributes;
|
||||||
details: HTMLAttributes;
|
details: HTMLAttributes;
|
||||||
dfn: HTMLAttributes;
|
dfn: HTMLAttributes;
|
||||||
dialog: HTMLAttributes;
|
dialog: HTMLAttributes;
|
||||||
div: HTMLAttributes;
|
div: HTMLAttributes;
|
||||||
dl: HTMLAttributes;
|
dl: HTMLAttributes;
|
||||||
dt: HTMLAttributes;
|
dt: HTMLAttributes;
|
||||||
em: HTMLAttributes;
|
em: HTMLAttributes;
|
||||||
embed: HTMLAttributes;
|
embed: HTMLAttributes;
|
||||||
fieldset: HTMLAttributes;
|
fieldset: HTMLAttributes;
|
||||||
figcaption: HTMLAttributes;
|
figcaption: HTMLAttributes;
|
||||||
figure: HTMLAttributes;
|
figure: HTMLAttributes;
|
||||||
footer: HTMLAttributes;
|
footer: HTMLAttributes;
|
||||||
form: HTMLAttributes;
|
form: HTMLAttributes;
|
||||||
h1: HTMLAttributes;
|
h1: HTMLAttributes;
|
||||||
h2: HTMLAttributes;
|
h2: HTMLAttributes;
|
||||||
h3: HTMLAttributes;
|
h3: HTMLAttributes;
|
||||||
h4: HTMLAttributes;
|
h4: HTMLAttributes;
|
||||||
h5: HTMLAttributes;
|
h5: HTMLAttributes;
|
||||||
h6: HTMLAttributes;
|
h6: HTMLAttributes;
|
||||||
head: HTMLAttributes;
|
head: HTMLAttributes;
|
||||||
header: HTMLAttributes;
|
header: HTMLAttributes;
|
||||||
hgroup: HTMLAttributes;
|
hgroup: HTMLAttributes;
|
||||||
hr: HTMLAttributes;
|
hr: HTMLAttributes;
|
||||||
html: HTMLAttributes;
|
html: HTMLAttributes;
|
||||||
i: HTMLAttributes;
|
i: HTMLAttributes;
|
||||||
iframe: HTMLAttributes;
|
iframe: HTMLAttributes;
|
||||||
img: HTMLAttributes;
|
img: HTMLAttributes;
|
||||||
input: HTMLAttributes;
|
input: HTMLAttributes;
|
||||||
ins: HTMLAttributes;
|
ins: HTMLAttributes;
|
||||||
kbd: HTMLAttributes;
|
kbd: HTMLAttributes;
|
||||||
keygen: HTMLAttributes;
|
keygen: HTMLAttributes;
|
||||||
label: HTMLAttributes;
|
label: HTMLAttributes;
|
||||||
legend: HTMLAttributes;
|
legend: HTMLAttributes;
|
||||||
li: HTMLAttributes;
|
li: HTMLAttributes;
|
||||||
link: HTMLAttributes;
|
link: HTMLAttributes;
|
||||||
main: HTMLAttributes;
|
main: HTMLAttributes;
|
||||||
map: HTMLAttributes;
|
map: HTMLAttributes;
|
||||||
mark: HTMLAttributes;
|
mark: HTMLAttributes;
|
||||||
marquee: HTMLAttributes;
|
marquee: HTMLAttributes;
|
||||||
menu: HTMLAttributes;
|
menu: HTMLAttributes;
|
||||||
menuitem: HTMLAttributes;
|
menuitem: HTMLAttributes;
|
||||||
meta: HTMLAttributes;
|
meta: HTMLAttributes;
|
||||||
meter: HTMLAttributes;
|
meter: HTMLAttributes;
|
||||||
nav: HTMLAttributes;
|
nav: HTMLAttributes;
|
||||||
noscript: HTMLAttributes;
|
noscript: HTMLAttributes;
|
||||||
object: HTMLAttributes;
|
object: HTMLAttributes;
|
||||||
ol: HTMLAttributes;
|
ol: HTMLAttributes;
|
||||||
optgroup: HTMLAttributes;
|
optgroup: HTMLAttributes;
|
||||||
option: HTMLAttributes;
|
option: HTMLAttributes;
|
||||||
output: HTMLAttributes;
|
output: HTMLAttributes;
|
||||||
p: HTMLAttributes;
|
p: HTMLAttributes;
|
||||||
param: HTMLAttributes;
|
param: HTMLAttributes;
|
||||||
picture: HTMLAttributes;
|
picture: HTMLAttributes;
|
||||||
pre: HTMLAttributes;
|
pre: HTMLAttributes;
|
||||||
progress: HTMLAttributes;
|
progress: HTMLAttributes;
|
||||||
q: HTMLAttributes;
|
q: HTMLAttributes;
|
||||||
rp: HTMLAttributes;
|
rp: HTMLAttributes;
|
||||||
rt: HTMLAttributes;
|
rt: HTMLAttributes;
|
||||||
ruby: HTMLAttributes;
|
ruby: HTMLAttributes;
|
||||||
s: HTMLAttributes;
|
s: HTMLAttributes;
|
||||||
samp: HTMLAttributes;
|
samp: HTMLAttributes;
|
||||||
script: HTMLAttributes;
|
script: HTMLAttributes;
|
||||||
section: HTMLAttributes;
|
section: HTMLAttributes;
|
||||||
select: HTMLAttributes;
|
select: HTMLAttributes;
|
||||||
slot: HTMLAttributes;
|
slot: HTMLAttributes;
|
||||||
small: HTMLAttributes;
|
small: HTMLAttributes;
|
||||||
source: HTMLAttributes;
|
source: HTMLAttributes;
|
||||||
span: HTMLAttributes;
|
span: HTMLAttributes;
|
||||||
strong: HTMLAttributes;
|
strong: HTMLAttributes;
|
||||||
style: HTMLAttributes;
|
style: HTMLAttributes;
|
||||||
sub: HTMLAttributes;
|
sub: HTMLAttributes;
|
||||||
summary: HTMLAttributes;
|
summary: HTMLAttributes;
|
||||||
sup: HTMLAttributes;
|
sup: HTMLAttributes;
|
||||||
table: HTMLAttributes;
|
table: HTMLAttributes;
|
||||||
tbody: HTMLAttributes;
|
tbody: HTMLAttributes;
|
||||||
td: HTMLAttributes;
|
td: HTMLAttributes;
|
||||||
textarea: HTMLAttributes;
|
textarea: HTMLAttributes;
|
||||||
tfoot: HTMLAttributes;
|
tfoot: HTMLAttributes;
|
||||||
th: HTMLAttributes;
|
th: HTMLAttributes;
|
||||||
thead: HTMLAttributes;
|
thead: HTMLAttributes;
|
||||||
time: HTMLAttributes;
|
time: HTMLAttributes;
|
||||||
title: HTMLAttributes;
|
title: HTMLAttributes;
|
||||||
tr: HTMLAttributes;
|
tr: HTMLAttributes;
|
||||||
track: HTMLAttributes;
|
track: HTMLAttributes;
|
||||||
u: HTMLAttributes;
|
u: HTMLAttributes;
|
||||||
ul: HTMLAttributes;
|
ul: HTMLAttributes;
|
||||||
var: HTMLAttributes;
|
var: HTMLAttributes;
|
||||||
video: HTMLAttributes;
|
video: HTMLAttributes;
|
||||||
wbr: HTMLAttributes;
|
wbr: HTMLAttributes;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
140
src/render.ts
140
src/render.ts
|
|
@ -3,88 +3,72 @@
|
||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import type { Element, HTMLElement } from "./component";
|
import { Element, HTMLElement } from "./component";
|
||||||
|
|
||||||
const HTML_ESCAPES: { [char: string]: string } = {
|
const HTML_ESCAPES: { [char: string]: string } = {
|
||||||
"&": "&",
|
"&": "&",
|
||||||
"<": "<",
|
"<": "<",
|
||||||
">": ">",
|
">": ">",
|
||||||
};
|
};
|
||||||
|
|
||||||
const escapeHtml = (text: string): string =>
|
const escapeHtml = (text: string): string =>
|
||||||
text.replace(/[&<>]/g, (t) => HTML_ESCAPES[t]);
|
text.replace(/[&<>]/g, (t) => HTML_ESCAPES[t]);
|
||||||
|
|
||||||
const escapeAttr = (text: string): string => text.replace(/"/g, """);
|
const escapeAttr = (text: string): string => text.replace(/"/g, """);
|
||||||
|
|
||||||
const renderElement = (elem: Element): string => {
|
const renderElement = (elem: Element): string => {
|
||||||
// Ignore null and true/false to support nicer JSX conditional syntax with
|
// Ignore null and true/false to support nicer JSX conditional syntax with
|
||||||
// &&, ||, !! operators.
|
// &&, ||, !! operators.
|
||||||
if (elem == null || typeof elem === "boolean") {
|
if (elem == null || typeof elem === "boolean") {
|
||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
if (typeof elem === "number") {
|
if (typeof elem === "number") {
|
||||||
return elem.toString();
|
return elem.toString();
|
||||||
}
|
}
|
||||||
if (typeof elem === "string") {
|
if (typeof elem === "string") {
|
||||||
return escapeHtml(elem);
|
return escapeHtml(elem);
|
||||||
}
|
}
|
||||||
if (Array.isArray(elem)) {
|
if (Array.isArray(elem)) {
|
||||||
return elem.map((e) => renderElement(e)).join("");
|
return elem.map((e) => renderElement(e)).join("");
|
||||||
}
|
}
|
||||||
|
|
||||||
let output = "";
|
let output = "";
|
||||||
output += startTag(elem);
|
output += startTag(elem);
|
||||||
if (elem.attributes.dangerouslySetInnerHTML != null) {
|
for (const child of elem.children) {
|
||||||
output += elem.attributes.dangerouslySetInnerHTML;
|
output += renderElement(child);
|
||||||
} else {
|
}
|
||||||
for (const child of elem.children) {
|
output += endTag(elem);
|
||||||
output += renderElement(child);
|
return output;
|
||||||
}
|
|
||||||
}
|
|
||||||
output += endTag(elem);
|
|
||||||
return output;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const startTag = (elem: HTMLElement): string => {
|
const startTag = (elem: HTMLElement): string => {
|
||||||
if (elem.tag === "#fragment") {
|
let output = `<${escapeHtml(elem.tag)}`;
|
||||||
return "";
|
|
||||||
}
|
|
||||||
|
|
||||||
let output = `<${escapeHtml(elem.tag)}`;
|
for (const [attrName, attrValue] of Object.entries(elem.attributes)) {
|
||||||
|
// Handle boolean attributes with a false value by not outputting the
|
||||||
|
// attribute at all.
|
||||||
|
if (attrValue === false) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
for (const [attrName, attrValue] of Object.entries(elem.attributes)) {
|
let normalizedAttrName = escapeHtml(attrName.toLowerCase());
|
||||||
// Handle boolean attributes with a false value by not outputting the
|
if (normalizedAttrName === "classname") {
|
||||||
// attribute at all.
|
normalizedAttrName = "class";
|
||||||
if (attrValue === false) {
|
}
|
||||||
continue;
|
if (attrValue === true) {
|
||||||
}
|
output += ` ${normalizedAttrName}=""`;
|
||||||
|
} else {
|
||||||
|
output += ` ${normalizedAttrName}="${escapeAttr(
|
||||||
|
attrValue.toString()
|
||||||
|
)}"`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Ignore the special attr for setting raw inner HTML.
|
output += ">";
|
||||||
if (attrName === "dangerouslySetInnerHTML") {
|
return output;
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
let normalizedAttrName = escapeHtml(attrName.toLowerCase());
|
|
||||||
if (normalizedAttrName === "classname") {
|
|
||||||
normalizedAttrName = "class";
|
|
||||||
}
|
|
||||||
if (attrValue === true) {
|
|
||||||
output += ` ${normalizedAttrName}=""`;
|
|
||||||
} else {
|
|
||||||
output += ` ${normalizedAttrName}="${escapeAttr(attrValue.toString())}"`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
output += ">";
|
|
||||||
return output;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const endTag = (elem: HTMLElement): string => {
|
const endTag = (elem: HTMLElement): string => `</${escapeHtml(elem.tag)}>`;
|
||||||
if (elem.tag === "#fragment") {
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
return `</${escapeHtml(elem.tag)}>`;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Render a complete HTML page from an HTMLElement. Note that the root element
|
* Render a complete HTML page from an HTMLElement. Note that the root element
|
||||||
|
|
@ -94,24 +78,14 @@ const endTag = (elem: HTMLElement): string => {
|
||||||
*
|
*
|
||||||
* @return Fully rendered HTML document as a string.
|
* @return Fully rendered HTML document as a string.
|
||||||
*/
|
*/
|
||||||
export const renderPage = (rootElem: Element): string => {
|
export const renderPage = (rootElem: HTMLElement): string => {
|
||||||
if (rootElem == null) {
|
if (rootElem.tag.toLowerCase() !== "html") {
|
||||||
throw new Error("root page element cannot be null");
|
throw new Error(
|
||||||
}
|
`attempted to render page with non-HTML root element ${rootElem.tag}`
|
||||||
if (typeof rootElem !== "object" || !("tag" in rootElem)) {
|
);
|
||||||
throw new Error(
|
}
|
||||||
`root page element must be a valid HTMLElement, got ${JSON.stringify(
|
|
||||||
rootElem,
|
|
||||||
)}`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (rootElem.tag.toLowerCase() !== "html") {
|
|
||||||
throw new Error(
|
|
||||||
`attempted to render page with non-HTML root element ${rootElem.tag}`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
let output = "<!DOCTYPE html>";
|
let output = "<!DOCTYPE html>";
|
||||||
output += renderElement(rootElem);
|
output += renderElement(rootElem);
|
||||||
return output;
|
return output;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
71
src/utils.ts
Normal file
71
src/utils.ts
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { promises as fs } from "fs";
|
||||||
|
import * as path from "path";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Recursively walk a directory, returning the files it finds.
|
||||||
|
*
|
||||||
|
* @param dirPath Path to the directory to walk.
|
||||||
|
*
|
||||||
|
* @return Generator that yields the files found while walking the directory.
|
||||||
|
*/
|
||||||
|
export const walkDir = async function* (
|
||||||
|
dirPath: string
|
||||||
|
): AsyncGenerator<string> {
|
||||||
|
const dirEnts = await fs.readdir(dirPath, { withFileTypes: true });
|
||||||
|
for (const dirEnt of dirEnts) {
|
||||||
|
if (dirEnt.isDirectory()) {
|
||||||
|
yield* walkDir(path.join(dirPath, dirEnt.name));
|
||||||
|
}
|
||||||
|
if (dirEnt.isFile()) {
|
||||||
|
yield path.join(dirPath, dirEnt.name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Purge cached versions of a node module and all of its dependencies from the
|
||||||
|
* global require cache, ensuring that future imports reload the module from
|
||||||
|
* disk.
|
||||||
|
*
|
||||||
|
* @param modName Name of the module to purge from the require cache.
|
||||||
|
*/
|
||||||
|
export const purgeModuleAndDepsFromCache = (modName: string): void => {
|
||||||
|
const modPath = require.resolve(modName);
|
||||||
|
if (modPath == null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const mod = require.cache[modPath];
|
||||||
|
if (mod == null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for (const child of mod.children) {
|
||||||
|
purgeModuleAndDepsFromCache(child.id);
|
||||||
|
}
|
||||||
|
delete require.cache[modPath];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Flattenable<T> = Array<T | Flattenable<T>>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Flatten an arbitrarily-deeply nested array into a flat array.
|
||||||
|
*
|
||||||
|
* @param arr Array to flatten.
|
||||||
|
*
|
||||||
|
* @return Flattened array.
|
||||||
|
*/
|
||||||
|
export const flatDeep = <T>(arr: Flattenable<T>): T[] => {
|
||||||
|
const flattenedArr: T[] = [];
|
||||||
|
for (const val of arr) {
|
||||||
|
if (Array.isArray(val)) {
|
||||||
|
flattenedArr.push(...flatDeep(val));
|
||||||
|
} else {
|
||||||
|
flattenedArr.push(val);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return flattenedArr;
|
||||||
|
};
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { isErrnoException } from "./error";
|
|
||||||
|
|
||||||
const resolveModulePath = (importPath: string): string | undefined => {
|
|
||||||
try {
|
|
||||||
return require.resolve(importPath);
|
|
||||||
} catch (error) {
|
|
||||||
if (
|
|
||||||
error instanceof Error &&
|
|
||||||
isErrnoException(error) &&
|
|
||||||
error.code === "MODULE_NOT_FOUND"
|
|
||||||
) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeParentModuleRef = (mod: NodeModule): void => {
|
|
||||||
const parent = mod.parent;
|
|
||||||
if (parent == null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const siblings = parent.children;
|
|
||||||
const nSiblings = siblings.length;
|
|
||||||
for (let i = nSiblings - 1; i >= 0; i--) {
|
|
||||||
const sibling = siblings[i];
|
|
||||||
if (sibling.id === mod.id) {
|
|
||||||
siblings.splice(i, 1);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Clear a module and its dependencies from node's module cache, ensuring that
|
|
||||||
* requiring the module again will reload the code from disk.
|
|
||||||
*
|
|
||||||
* @param importPath Path or name of the module to resolve (same as
|
|
||||||
* {@see require}).
|
|
||||||
*
|
|
||||||
* @throws Error if the module could not be resolved due to filesystem error.
|
|
||||||
*/
|
|
||||||
export const decacheModule = (importPath: string): void => {
|
|
||||||
const modulePath = resolveModulePath(importPath);
|
|
||||||
if (modulePath == null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// DFS the module dependency tree, using iteration to avoid stack size
|
|
||||||
// exceeded exceptions.
|
|
||||||
const modsToCheck: NodeModule[] = [];
|
|
||||||
const visited: Set<string> = new Set();
|
|
||||||
let currentMod: NodeModule | undefined = require.cache[modulePath];
|
|
||||||
while (currentMod != null) {
|
|
||||||
if (visited.has(currentMod.id)) {
|
|
||||||
currentMod = modsToCheck.pop();
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
removeParentModuleRef(currentMod);
|
|
||||||
delete require.cache[currentMod.id];
|
|
||||||
for (const childMod of currentMod.children) {
|
|
||||||
modsToCheck.push(childMod);
|
|
||||||
}
|
|
||||||
|
|
||||||
visited.add(currentMod.id);
|
|
||||||
currentMod = modsToCheck.pop();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
export const isErrnoException = (
|
|
||||||
error: Error,
|
|
||||||
): error is NodeJS.ErrnoException => "code" in error;
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { promises as fs } from "node:fs";
|
|
||||||
import * as path from "node:path";
|
|
||||||
|
|
||||||
export { decacheModule } from "./decache-module";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Recursively walk a directory, returning the files it finds.
|
|
||||||
*
|
|
||||||
* @param dirPath Path to the directory to walk.
|
|
||||||
*
|
|
||||||
* @return Generator that yields the files found while walking the directory.
|
|
||||||
*/
|
|
||||||
export const walkDir = async function* (
|
|
||||||
dirPath: string,
|
|
||||||
): AsyncGenerator<string> {
|
|
||||||
const dirEnts = await fs.readdir(dirPath, { withFileTypes: true });
|
|
||||||
for (const dirEnt of dirEnts) {
|
|
||||||
if (dirEnt.isDirectory()) {
|
|
||||||
yield* walkDir(path.join(dirPath, dirEnt.name));
|
|
||||||
}
|
|
||||||
if (dirEnt.isFile()) {
|
|
||||||
yield path.join(dirPath, dirEnt.name);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export type Flattenable<T> = Array<T | Flattenable<T>>;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Flatten an arbitrarily-deeply nested array into a flat array.
|
|
||||||
*
|
|
||||||
* @param arr Array to flatten.
|
|
||||||
*
|
|
||||||
* @return Flattened array.
|
|
||||||
*/
|
|
||||||
export const flatDeep = <T>(arr: Flattenable<T>): T[] => {
|
|
||||||
const flattenedArr: T[] = [];
|
|
||||||
for (const val of arr) {
|
|
||||||
if (Array.isArray(val)) {
|
|
||||||
flattenedArr.push(...flatDeep(val));
|
|
||||||
} else {
|
|
||||||
flattenedArr.push(val);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return flattenedArr;
|
|
||||||
};
|
|
||||||
|
|
@ -1,151 +0,0 @@
|
||||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { promises as fs } from "node:fs";
|
|
||||||
import * as path from "node:path";
|
|
||||||
|
|
||||||
import {
|
|
||||||
npmCmd,
|
|
||||||
runCommand,
|
|
||||||
WEBSNACKS_BIN_PATH,
|
|
||||||
WEBSNACKS_REPO_ROOT,
|
|
||||||
withTempDir,
|
|
||||||
} from "../helpers/e2e";
|
|
||||||
import { testSuite } from "../lib";
|
|
||||||
|
|
||||||
testSuite("build command", ({ test }) => {
|
|
||||||
test("runs without throwing error", async () => {
|
|
||||||
await withTempDir(async (tempDirPath) => {
|
|
||||||
await fs.writeFile(
|
|
||||||
path.join(tempDirPath, "tsconfig.json"),
|
|
||||||
JSON.stringify({
|
|
||||||
compilerOptions: {
|
|
||||||
esModuleInterop: true,
|
|
||||||
module: "CommonJS",
|
|
||||||
moduleResolution: "node",
|
|
||||||
jsx: "react",
|
|
||||||
jsxFactory: "createElement",
|
|
||||||
target: "ES2018",
|
|
||||||
lib: ["ES2018"],
|
|
||||||
strict: true,
|
|
||||||
noUnusedLocals: true,
|
|
||||||
noUnusedParameters: true,
|
|
||||||
noImplicitReturns: true,
|
|
||||||
noFallthroughCasesInSwitch: true,
|
|
||||||
},
|
|
||||||
include: ["components/**/*", "pages/**/*"],
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
encoding: "utf8",
|
|
||||||
},
|
|
||||||
);
|
|
||||||
await fs.writeFile(
|
|
||||||
path.join(tempDirPath, "websnacks.ts"),
|
|
||||||
`
|
|
||||||
import { Config } from "websnacks";
|
|
||||||
const config: Config = {
|
|
||||||
watch: [],
|
|
||||||
};
|
|
||||||
export = config;
|
|
||||||
`,
|
|
||||||
{
|
|
||||||
encoding: "utf8",
|
|
||||||
},
|
|
||||||
);
|
|
||||||
const pagesPath = path.join(tempDirPath, "pages");
|
|
||||||
await fs.mkdir(pagesPath);
|
|
||||||
await fs.writeFile(
|
|
||||||
path.join(pagesPath, "index.tsx"),
|
|
||||||
`
|
|
||||||
import { createElement } from "websnacks";
|
|
||||||
export const page = () => <html />;
|
|
||||||
`,
|
|
||||||
{
|
|
||||||
encoding: "utf8",
|
|
||||||
},
|
|
||||||
);
|
|
||||||
await fs.writeFile(
|
|
||||||
path.join(tempDirPath, "package.json"),
|
|
||||||
JSON.stringify({
|
|
||||||
devDependencies: {
|
|
||||||
websnacks: `file:${WEBSNACKS_REPO_ROOT}`,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ encoding: "utf8" },
|
|
||||||
);
|
|
||||||
await runCommand(npmCmd, ["install", "--silent"], {
|
|
||||||
cwd: tempDirPath,
|
|
||||||
}).complete;
|
|
||||||
const cmd = runCommand(
|
|
||||||
"node",
|
|
||||||
[WEBSNACKS_BIN_PATH, "-r", "ts-node/register", "build"],
|
|
||||||
{
|
|
||||||
cwd: tempDirPath,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
await cmd.complete;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test("works without config file", async () => {
|
|
||||||
await withTempDir(async (tempDirPath) => {
|
|
||||||
await fs.writeFile(
|
|
||||||
path.join(tempDirPath, "tsconfig.json"),
|
|
||||||
JSON.stringify({
|
|
||||||
compilerOptions: {
|
|
||||||
esModuleInterop: true,
|
|
||||||
module: "CommonJS",
|
|
||||||
moduleResolution: "node",
|
|
||||||
jsx: "react",
|
|
||||||
jsxFactory: "createElement",
|
|
||||||
target: "ES2018",
|
|
||||||
lib: ["ES2018"],
|
|
||||||
strict: true,
|
|
||||||
noUnusedLocals: true,
|
|
||||||
noUnusedParameters: true,
|
|
||||||
noImplicitReturns: true,
|
|
||||||
noFallthroughCasesInSwitch: true,
|
|
||||||
},
|
|
||||||
include: ["components/**/*", "pages/**/*"],
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
encoding: "utf8",
|
|
||||||
},
|
|
||||||
);
|
|
||||||
const pagesPath = path.join(tempDirPath, "pages");
|
|
||||||
await fs.mkdir(pagesPath);
|
|
||||||
await fs.writeFile(
|
|
||||||
path.join(pagesPath, "index.tsx"),
|
|
||||||
`
|
|
||||||
import { createElement } from "websnacks";
|
|
||||||
export const page = () => <html />;
|
|
||||||
`,
|
|
||||||
{
|
|
||||||
encoding: "utf8",
|
|
||||||
},
|
|
||||||
);
|
|
||||||
await fs.writeFile(
|
|
||||||
path.join(tempDirPath, "package.json"),
|
|
||||||
JSON.stringify({
|
|
||||||
devDependencies: {
|
|
||||||
websnacks: `file:${WEBSNACKS_REPO_ROOT}`,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ encoding: "utf8" },
|
|
||||||
);
|
|
||||||
await runCommand(npmCmd, ["install", "--silent"], {
|
|
||||||
cwd: tempDirPath,
|
|
||||||
}).complete;
|
|
||||||
const cmd = runCommand(
|
|
||||||
"node",
|
|
||||||
[WEBSNACKS_BIN_PATH, "-r", "ts-node/register", "build"],
|
|
||||||
{
|
|
||||||
cwd: tempDirPath,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
await cmd.complete;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
160
test/e2e/dev.tsx
160
test/e2e/dev.tsx
|
|
@ -1,160 +0,0 @@
|
||||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { promises as fs } from "node:fs";
|
|
||||||
import * as path from "node:path";
|
|
||||||
|
|
||||||
import {
|
|
||||||
npmCmd,
|
|
||||||
runCommand,
|
|
||||||
WEBSNACKS_BIN_PATH,
|
|
||||||
WEBSNACKS_REPO_ROOT,
|
|
||||||
wait,
|
|
||||||
withTempDir,
|
|
||||||
} from "../helpers/e2e";
|
|
||||||
import { testSuite } from "../lib";
|
|
||||||
|
|
||||||
testSuite("dev command", ({ test, expect }) => {
|
|
||||||
test("starts without throwing error", async () => {
|
|
||||||
await withTempDir(async (tempDirPath) => {
|
|
||||||
await fs.writeFile(
|
|
||||||
path.join(tempDirPath, "tsconfig.json"),
|
|
||||||
JSON.stringify({
|
|
||||||
compilerOptions: {
|
|
||||||
esModuleInterop: true,
|
|
||||||
module: "CommonJS",
|
|
||||||
moduleResolution: "node",
|
|
||||||
jsx: "react",
|
|
||||||
jsxFactory: "createElement",
|
|
||||||
target: "ES2018",
|
|
||||||
lib: ["ES2018"],
|
|
||||||
strict: true,
|
|
||||||
noUnusedLocals: true,
|
|
||||||
noUnusedParameters: true,
|
|
||||||
noImplicitReturns: true,
|
|
||||||
noFallthroughCasesInSwitch: true,
|
|
||||||
},
|
|
||||||
include: ["components/**/*", "pages/**/*"],
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
encoding: "utf8",
|
|
||||||
},
|
|
||||||
);
|
|
||||||
await fs.writeFile(
|
|
||||||
path.join(tempDirPath, "websnacks.ts"),
|
|
||||||
`
|
|
||||||
import { Config } from "websnacks";
|
|
||||||
const config: Config = {
|
|
||||||
watch: [],
|
|
||||||
};
|
|
||||||
export = config;
|
|
||||||
`,
|
|
||||||
{
|
|
||||||
encoding: "utf8",
|
|
||||||
},
|
|
||||||
);
|
|
||||||
const pagesPath = path.join(tempDirPath, "pages");
|
|
||||||
await fs.mkdir(pagesPath);
|
|
||||||
await fs.writeFile(
|
|
||||||
path.join(pagesPath, "index.tsx"),
|
|
||||||
`
|
|
||||||
import { createElement } from "websnacks";
|
|
||||||
export const page = () => <html />;
|
|
||||||
`,
|
|
||||||
{
|
|
||||||
encoding: "utf8",
|
|
||||||
},
|
|
||||||
);
|
|
||||||
await fs.writeFile(
|
|
||||||
path.join(tempDirPath, "package.json"),
|
|
||||||
JSON.stringify({
|
|
||||||
devDependencies: {
|
|
||||||
websnacks: `file:${WEBSNACKS_REPO_ROOT}`,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ encoding: "utf8" },
|
|
||||||
);
|
|
||||||
await runCommand(npmCmd, ["install", "--silent"], {
|
|
||||||
cwd: tempDirPath,
|
|
||||||
}).complete;
|
|
||||||
const cmd = runCommand(
|
|
||||||
"node",
|
|
||||||
[WEBSNACKS_BIN_PATH, "-r", "ts-node/register", "dev"],
|
|
||||||
{
|
|
||||||
cwd: tempDirPath,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
// FIXME: This test is a bit brittle due to relying on timeouts.
|
|
||||||
await wait(10_000);
|
|
||||||
cmd.process.kill();
|
|
||||||
const stdout = await cmd.complete;
|
|
||||||
expect(stdout).toStartWith("Listening at");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test("works without config file", async () => {
|
|
||||||
await withTempDir(async (tempDirPath) => {
|
|
||||||
await fs.writeFile(
|
|
||||||
path.join(tempDirPath, "tsconfig.json"),
|
|
||||||
JSON.stringify({
|
|
||||||
compilerOptions: {
|
|
||||||
esModuleInterop: true,
|
|
||||||
module: "CommonJS",
|
|
||||||
moduleResolution: "node",
|
|
||||||
jsx: "react",
|
|
||||||
jsxFactory: "createElement",
|
|
||||||
target: "ES2018",
|
|
||||||
lib: ["ES2018"],
|
|
||||||
strict: true,
|
|
||||||
noUnusedLocals: true,
|
|
||||||
noUnusedParameters: true,
|
|
||||||
noImplicitReturns: true,
|
|
||||||
noFallthroughCasesInSwitch: true,
|
|
||||||
},
|
|
||||||
include: ["components/**/*", "pages/**/*"],
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
encoding: "utf8",
|
|
||||||
},
|
|
||||||
);
|
|
||||||
const pagesPath = path.join(tempDirPath, "pages");
|
|
||||||
await fs.mkdir(pagesPath);
|
|
||||||
await fs.writeFile(
|
|
||||||
path.join(pagesPath, "index.tsx"),
|
|
||||||
`
|
|
||||||
import { createElement } from "websnacks";
|
|
||||||
export const page = () => <html />;
|
|
||||||
`,
|
|
||||||
{
|
|
||||||
encoding: "utf8",
|
|
||||||
},
|
|
||||||
);
|
|
||||||
await fs.writeFile(
|
|
||||||
path.join(tempDirPath, "package.json"),
|
|
||||||
JSON.stringify({
|
|
||||||
devDependencies: {
|
|
||||||
websnacks: `file:${WEBSNACKS_REPO_ROOT}`,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ encoding: "utf8" },
|
|
||||||
);
|
|
||||||
await runCommand(npmCmd, ["install", "--silent"], {
|
|
||||||
cwd: tempDirPath,
|
|
||||||
}).complete;
|
|
||||||
const cmd = runCommand(
|
|
||||||
"node",
|
|
||||||
[WEBSNACKS_BIN_PATH, "-r", "ts-node/register", "dev"],
|
|
||||||
{
|
|
||||||
cwd: tempDirPath,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
// FIXME: This test is a bit brittle due to relying on timeouts.
|
|
||||||
await wait(10_000);
|
|
||||||
cmd.process.kill();
|
|
||||||
const stdout = await cmd.complete;
|
|
||||||
expect(stdout).toStartWith("Listening at");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,168 +0,0 @@
|
||||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { type ChildProcess, spawn } from "node:child_process";
|
|
||||||
import { promises as fs } from "node:fs";
|
|
||||||
import * as os from "node:os";
|
|
||||||
import * as path from "node:path";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set a timeout and wait for at least the specified number of milliseconds,
|
|
||||||
* resolving the promise once the event loop meets or exceeds timeMs.
|
|
||||||
*
|
|
||||||
* @param timeMs Time in milliseconds to wait.
|
|
||||||
*/
|
|
||||||
export const wait = async (timeMs: number): Promise<void> => {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
setTimeout(() => resolve(), timeMs);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const TEMP_PATH = path.resolve(__dirname, "..", "..", ".temp");
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Perform an operation within a unique temporary directory created within a
|
|
||||||
* special .test-dist folder within this websnacks repository.
|
|
||||||
*
|
|
||||||
* @note Currently the temporary folder is **not** cleaned up once the operation
|
|
||||||
* has finished. I've had issues with losing work due to buggy removal
|
|
||||||
* code and haven't been willing to risk it again. To cleanup these
|
|
||||||
* temporary folders it should be as easy as removing the whole
|
|
||||||
* ".test-dist" folder from your checkout.
|
|
||||||
*
|
|
||||||
* @param op Operation to perform which receives the fully resolved temp
|
|
||||||
* directory path as its only argument.
|
|
||||||
*/
|
|
||||||
export const withTempDir = async (
|
|
||||||
op: (tempDirPath: string) => Promise<void> | void,
|
|
||||||
): Promise<void> => {
|
|
||||||
await fs.mkdir(TEMP_PATH, { recursive: true });
|
|
||||||
const tempDirPath = await fs.mkdtemp(`${TEMP_PATH}/`);
|
|
||||||
try {
|
|
||||||
await op(tempDirPath);
|
|
||||||
} catch (error) {
|
|
||||||
throw new Error(`(${tempDirPath}): ${error}`);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fully resolved path to the root of this websnacks repository.
|
|
||||||
*/
|
|
||||||
export const WEBSNACKS_REPO_ROOT = path.resolve(__dirname, "..", "..");
|
|
||||||
/**
|
|
||||||
* Fully resolved path to the websnacks CLI script in this repository.
|
|
||||||
*/
|
|
||||||
export const WEBSNACKS_BIN_PATH = path.join(
|
|
||||||
WEBSNACKS_REPO_ROOT,
|
|
||||||
"bin",
|
|
||||||
"websnacks.js",
|
|
||||||
);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A handle to an asynchronous shell command run in a subprocess.
|
|
||||||
*/
|
|
||||||
export interface AsyncCommand {
|
|
||||||
/**
|
|
||||||
* Promise that resolves with the stdout of the subprocess once the
|
|
||||||
* subprocess exits with a zero-code.
|
|
||||||
*
|
|
||||||
* The promise rejects if the subprocess exits with a non-zero code, the
|
|
||||||
* subprocess writes to its stderr, or the command failed to spawn.
|
|
||||||
*/
|
|
||||||
complete: Promise<string>;
|
|
||||||
/**
|
|
||||||
* Handle to to child process for event-based process manipulation.
|
|
||||||
*/
|
|
||||||
process: ChildProcess;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Options used to configure {@link runCommand}.
|
|
||||||
*/
|
|
||||||
export interface CliOptions {
|
|
||||||
/**
|
|
||||||
* Working directory where the command should be run. Defaults to the
|
|
||||||
* current working directory.
|
|
||||||
*/
|
|
||||||
cwd?: string;
|
|
||||||
/**
|
|
||||||
* Timeout in milliseconds after which a command that hasn't exited will
|
|
||||||
* reject the promise and kill the subprocess.
|
|
||||||
*/
|
|
||||||
timeoutMs?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
const DEFAULT_CLI_OPTIONS = {
|
|
||||||
timeoutMs: 15_000,
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Execute a shell command in a subprocess.
|
|
||||||
*
|
|
||||||
* This provides a more user-friendly promise-based interface to
|
|
||||||
* {@link child_process.spawn}. The obj
|
|
||||||
*
|
|
||||||
* @param command Name of the shell command to run.
|
|
||||||
* @param args Array of arguments to pass to the command.
|
|
||||||
* @param options Parameters to change how the command is run and resolved.
|
|
||||||
*
|
|
||||||
* @returns Command object for handling in client code.
|
|
||||||
*/
|
|
||||||
export const runCommand = (
|
|
||||||
command: string,
|
|
||||||
args: string[] = [],
|
|
||||||
options?: CliOptions,
|
|
||||||
): AsyncCommand => {
|
|
||||||
const optionsWithDefaults = { ...DEFAULT_CLI_OPTIONS, ...options };
|
|
||||||
const process = spawn(command, args, {
|
|
||||||
...optionsWithDefaults,
|
|
||||||
stdio: "pipe",
|
|
||||||
});
|
|
||||||
const complete = new Promise<string>((resolve, reject) => {
|
|
||||||
let threwError = false;
|
|
||||||
|
|
||||||
let stdout = "";
|
|
||||||
process.stdout.on("data", (data) => {
|
|
||||||
stdout += data.toString();
|
|
||||||
});
|
|
||||||
process.stderr.on("data", (data) => {
|
|
||||||
threwError = true;
|
|
||||||
process.kill();
|
|
||||||
reject(new Error(`command output to stderr: ${data.toString()}`));
|
|
||||||
});
|
|
||||||
|
|
||||||
const timer = setTimeout(() => {
|
|
||||||
threwError = true;
|
|
||||||
process.kill();
|
|
||||||
reject(
|
|
||||||
new Error(`max timeout of ${optionsWithDefaults.timeoutMs}ms reached`),
|
|
||||||
);
|
|
||||||
}, optionsWithDefaults.timeoutMs);
|
|
||||||
process.on("exit", (code) => {
|
|
||||||
if (threwError) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
clearTimeout(timer);
|
|
||||||
if (code !== null && code !== 0) {
|
|
||||||
reject(new Error(`command exited with non-zero code: ${code}`));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
resolve(stdout);
|
|
||||||
});
|
|
||||||
process.on("error", (error) => {
|
|
||||||
clearTimeout(timer);
|
|
||||||
if (!threwError) {
|
|
||||||
reject(new Error(`command errored: ${error}`));
|
|
||||||
threwError = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
complete,
|
|
||||||
process,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export const npmCmd = os.platform() === "win32" ? "npm.cmd" : "npm";
|
|
||||||
|
|
@ -6,13 +6,13 @@
|
||||||
import { areEqual, displayValue, matches } from "./utils";
|
import { areEqual, displayValue, matches } from "./utils";
|
||||||
|
|
||||||
class ExpectError extends Error {
|
class ExpectError extends Error {
|
||||||
public constructor(reason: string, expected: unknown, actual: unknown) {
|
public constructor(reason: string, expected: unknown, actual: unknown) {
|
||||||
super(
|
super(
|
||||||
`${reason}\n` +
|
`${reason}\n` +
|
||||||
`\texpected: ${displayValue(expected)}\n` +
|
`\texpected: ${displayValue(expected)}\n` +
|
||||||
`\tactual : ${displayValue(actual)}`,
|
`\tactual : ${displayValue(actual)}`
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -24,134 +24,138 @@ class ExpectError extends Error {
|
||||||
* Expect.
|
* Expect.
|
||||||
*/
|
*/
|
||||||
export class Expect<T> {
|
export class Expect<T> {
|
||||||
protected readonly value: T;
|
protected readonly value: T;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Create a new expectation around a value.
|
* Create a new expectation around a value.
|
||||||
*
|
*
|
||||||
* @param value Value to place assertions upon.
|
* @param value Value to place assertions upon.
|
||||||
*/
|
*/
|
||||||
public constructor(value: T) {
|
public constructor(value: T) {
|
||||||
this.value = value;
|
this.value = value;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Expect the value to equal an expected value.
|
* Expect the value to equal an expected value.
|
||||||
*
|
*
|
||||||
* Note that strict equality checking is used for primitives and structural
|
* Note that strict equality checking is used for primitives and structural
|
||||||
* equality is used for objects.
|
* equality is used for objects.
|
||||||
*
|
*
|
||||||
* @param expected Expected value.
|
* @param expected Expected value.
|
||||||
*
|
*
|
||||||
* @throws ExpectError If the actual value does not equal the expected value.
|
* @throws ExpectError If the actual value does not equal the expected value.
|
||||||
*/
|
*/
|
||||||
public toEqual(expected: T): void {
|
public toEqual(expected: T): void {
|
||||||
if (!areEqual(this.value, expected)) {
|
if (!areEqual(this.value, expected)) {
|
||||||
throw new ExpectError(
|
throw new ExpectError(
|
||||||
"value does not equal expected",
|
`value does not equal expected`,
|
||||||
expected,
|
expected,
|
||||||
this.value,
|
this.value
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* String-specific Expect assertions.
|
* String-specific Expect assertions.
|
||||||
*/
|
*/
|
||||||
export class StringExpect extends Expect<string> {
|
export class StringExpect extends Expect<string> {
|
||||||
/**
|
/**
|
||||||
* Expect the string value to match a RegExp pattern.
|
* Expect the string value to match a RegExp pattern.
|
||||||
*
|
*
|
||||||
* @param pattern Regular expression to match against.
|
* @param pattern Regular expression to match against.
|
||||||
*
|
*
|
||||||
* @throws ExpectError If the actual value does not match the expected
|
* @throws ExpectError If the actual value does not match the expected
|
||||||
* RegExp pattern.
|
* RegExp pattern.
|
||||||
*/
|
*/
|
||||||
public toMatch(pattern: RegExp): void {
|
public toMatch(pattern: RegExp): void {
|
||||||
if (!this.value.match(pattern)) {
|
if (!this.value.match(pattern)) {
|
||||||
throw new ExpectError(
|
throw new ExpectError(
|
||||||
"value does not match expected pattern",
|
`value does not match expected pattern`,
|
||||||
pattern,
|
pattern,
|
||||||
this.value,
|
this.value
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Expect the string value to start with a particular prefix.
|
* Expect the string value to start with a particular prefix.
|
||||||
*
|
*
|
||||||
* @param prefix Prefix that the string is expected to start with.
|
* @param prefix Prefix that the string is expected to start with.
|
||||||
*
|
*
|
||||||
* @throws ExpectError If the actual value does not start with the expected
|
* @throws ExpectError If the actual value does not start with the expected
|
||||||
* prefix.
|
* prefix.
|
||||||
*/
|
*/
|
||||||
public toStartWith(prefix: string): void {
|
public toStartWith(prefix: string): void {
|
||||||
if (!this.value.startsWith(prefix)) {
|
if (!this.value.startsWith(prefix)) {
|
||||||
throw new ExpectError(
|
throw new ExpectError(
|
||||||
"value does not start with expected prefix",
|
`value does not start with expected prefix`,
|
||||||
prefix,
|
prefix,
|
||||||
this.value,
|
this.value
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Expect the string value to end with a particular suffix.
|
* Expect the string value to end with a particular suffix.
|
||||||
*
|
*
|
||||||
* @param suffix Suffix that the string is expected to end with.
|
* @param suffix Suffix that the string is expected to end with.
|
||||||
*
|
*
|
||||||
* @throws ExpectError If the actual value does not end with the expected
|
* @throws ExpectError If the actual value does not end with the expected
|
||||||
* suffix.
|
* suffix.
|
||||||
*/
|
*/
|
||||||
public toEndWith(suffix: string): void {
|
public toEndWith(suffix: string): void {
|
||||||
if (!this.value.endsWith(suffix)) {
|
if (!this.value.endsWith(suffix)) {
|
||||||
throw new ExpectError(
|
throw new ExpectError(
|
||||||
"value does not end with expected suffix",
|
`value does not end with expected suffix`,
|
||||||
suffix,
|
suffix,
|
||||||
this.value,
|
this.value
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function-specific Expect assertions.
|
* Function-specific Expect assertions.
|
||||||
*/
|
*/
|
||||||
export class FunctionExpect<T> extends Expect<() => T> {
|
export class FunctionExpect<T> extends Expect<() => T> {
|
||||||
/**
|
/**
|
||||||
* Expect the function to throw an Error with error message matching a
|
* Expect the function to throw an Error with error message matching a
|
||||||
* string or pattern.
|
* string or pattern.
|
||||||
*
|
*
|
||||||
* @param pattern String that exactly matches the error message or RegExp
|
* @param pattern String that exactly matches the error message or RegExp
|
||||||
* that should match the error message.
|
* that should match the error message.
|
||||||
*
|
*
|
||||||
* @throws ExpectError If the function does not throw an error, throws a
|
* @throws ExpectError If the function does not throw an error, throws a
|
||||||
* non-Error value, or throws an Error whose message does not match
|
* non-Error value, or throws an Error whose message does not match
|
||||||
* the expected pattern.
|
* the expected pattern.
|
||||||
*/
|
*/
|
||||||
public toThrowErrorMatching(pattern: string | RegExp): void {
|
public toThrowErrorMatching(pattern: string | RegExp): void {
|
||||||
try {
|
try {
|
||||||
this.value();
|
this.value();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (!(error instanceof Error)) {
|
if (!(error instanceof Error)) {
|
||||||
throw new ExpectError("function threw non-Error value", pattern, error);
|
throw new ExpectError(
|
||||||
}
|
`function threw non-Error value`,
|
||||||
if (!matches(error.message, pattern)) {
|
pattern,
|
||||||
throw new ExpectError(
|
error
|
||||||
`thrown Error's message does not match pattern`,
|
);
|
||||||
pattern,
|
}
|
||||||
error.message,
|
if (!matches(error.message, pattern)) {
|
||||||
);
|
throw new ExpectError(
|
||||||
}
|
`thrown Error's message does not match pattern`,
|
||||||
return;
|
pattern,
|
||||||
}
|
error.message
|
||||||
throw new ExpectError(
|
);
|
||||||
"function did not throw expected error",
|
}
|
||||||
pattern,
|
return;
|
||||||
null,
|
}
|
||||||
);
|
throw new ExpectError(
|
||||||
}
|
`function did not throw expected error`,
|
||||||
|
pattern,
|
||||||
|
null
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -198,11 +202,11 @@ export function expect<T>(fn: () => T): FunctionExpect<T>;
|
||||||
* @param value Value to place expectations upon.
|
* @param value Value to place expectations upon.
|
||||||
*/
|
*/
|
||||||
export function expect(value: unknown): Expect<unknown> {
|
export function expect(value: unknown): Expect<unknown> {
|
||||||
if (typeof value === "string") {
|
if (typeof value === "string") {
|
||||||
return new StringExpect(value);
|
return new StringExpect(value);
|
||||||
}
|
}
|
||||||
if (typeof value === "function") {
|
if (typeof value === "function") {
|
||||||
return new FunctionExpect(value as () => unknown);
|
return new FunctionExpect(value as () => unknown);
|
||||||
}
|
}
|
||||||
return new Expect(value);
|
return new Expect(value);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,66 +7,68 @@ import { expect } from "./expect";
|
||||||
import { displayValue, shuffle } from "./utils";
|
import { displayValue, shuffle } from "./utils";
|
||||||
|
|
||||||
interface Test {
|
interface Test {
|
||||||
readonly name: string;
|
readonly name: string;
|
||||||
|
|
||||||
runTest(): void | Promise<void>;
|
runTest(): void | Promise<void>;
|
||||||
}
|
}
|
||||||
|
|
||||||
type TestResult = {
|
type TestResult = {
|
||||||
testName: string;
|
testName: string;
|
||||||
} & (
|
} & (
|
||||||
| {
|
| {
|
||||||
result: "pass";
|
result: "pass";
|
||||||
}
|
}
|
||||||
| {
|
| {
|
||||||
result: "fail";
|
result: "fail";
|
||||||
error: Error;
|
error: Error;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
const runTest = async (test: Test): Promise<TestResult> => {
|
const runTest = async (test: Test): Promise<TestResult> => {
|
||||||
let result: TestResult;
|
let result: TestResult;
|
||||||
try {
|
try {
|
||||||
await test.runTest();
|
await test.runTest();
|
||||||
result = {
|
result = {
|
||||||
testName: test.name,
|
testName: test.name,
|
||||||
result: "pass",
|
result: "pass",
|
||||||
};
|
};
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
result = {
|
result = {
|
||||||
testName: test.name,
|
testName: test.name,
|
||||||
result: "fail",
|
result: "fail",
|
||||||
error:
|
error:
|
||||||
error instanceof Error
|
error instanceof Error
|
||||||
? error
|
? error
|
||||||
: new Error(`threw non-error object: ${displayValue(error)}`),
|
: new Error(
|
||||||
};
|
`threw non-error object: ${displayValue(error)}`
|
||||||
}
|
),
|
||||||
return result;
|
};
|
||||||
|
}
|
||||||
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Context object that is passed into a test suite definition.
|
* Context object that is passed into a test suite definition.
|
||||||
*/
|
*/
|
||||||
export interface TestSuiteContext {
|
export interface TestSuiteContext {
|
||||||
/**
|
/**
|
||||||
* Define a test in this test suite.
|
* Define a test in this test suite.
|
||||||
*
|
*
|
||||||
* Tests are functions that pass if they are executed and don't throw (or
|
* Tests are functions that pass if they are executed and don't throw (or
|
||||||
* that resolve for async tests), and that fail if they throw an error (or
|
* that resolve for async tests), and that fail if they throw an error (or
|
||||||
* reject for async tests).
|
* reject for async tests).
|
||||||
*
|
*
|
||||||
* Note that tests are executed in a random order within a test suite in
|
* Note that tests are executed in a random order within a test suite in
|
||||||
* order to prevent accidentally creating order dependencies between tests,
|
* order to prevent accidentally creating order dependencies between tests,
|
||||||
* which can result in brittle tests and is a code smell that might indicate
|
* which can result in brittle tests and is a code smell that might indicate
|
||||||
* that the code under test is also brittle.
|
* that the code under test is also brittle.
|
||||||
*/
|
*/
|
||||||
test: (name: string, def: () => void | Promise<void>) => void;
|
test: (name: string, def: () => void | Promise<void>) => void;
|
||||||
/**
|
/**
|
||||||
* Expectation builder function used to build human-readable assertions and
|
* Expectation builder function used to build human-readable assertions and
|
||||||
* errors.
|
* errors.
|
||||||
*/
|
*/
|
||||||
expect: typeof expect;
|
expect: typeof expect;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -83,36 +85,36 @@ export interface TestSuiteContext {
|
||||||
* @param def Function used to declare the tests
|
* @param def Function used to declare the tests
|
||||||
*/
|
*/
|
||||||
export const testSuite = (
|
export const testSuite = (
|
||||||
suiteName: string,
|
suiteName: string,
|
||||||
def: (ctx: TestSuiteContext) => void,
|
def: (ctx: TestSuiteContext) => void
|
||||||
): void => {
|
): void => {
|
||||||
const tests: Test[] = [];
|
const tests: Test[] = [];
|
||||||
const test = (name: string, runTest: () => void | Promise<void>): void => {
|
const test = (name: string, runTest: () => void | Promise<void>): void => {
|
||||||
tests.push({ name, runTest });
|
tests.push({ name, runTest });
|
||||||
};
|
};
|
||||||
def({ test, expect });
|
def({ test, expect });
|
||||||
|
|
||||||
// Randomly shuffle the tests so that we can catch accidental order
|
// Randomly shuffle the tests so that we can catch accidental order
|
||||||
// dependencies.
|
// dependencies.
|
||||||
shuffle(tests);
|
shuffle(tests);
|
||||||
(async () => {
|
(async () => {
|
||||||
const results = await Promise.all(tests.map((test) => runTest(test)));
|
const results = await Promise.all(tests.map((test) => runTest(test)));
|
||||||
let passed = 0;
|
let passed = 0;
|
||||||
for (const testResult of results) {
|
for (const testResult of results) {
|
||||||
if (testResult.result === "fail") {
|
if (testResult.result === "fail") {
|
||||||
console.error(
|
console.error(
|
||||||
`[TEST FAILURE] "${suiteName}": "${testResult.testName}": ` +
|
`[TEST FAILURE] "${suiteName}": "${testResult.testName}": ` +
|
||||||
`${testResult.error.stack}\n`,
|
`${testResult.error.stack}\n`
|
||||||
);
|
);
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
passed += 1;
|
passed += 1;
|
||||||
}
|
}
|
||||||
console.info(
|
console.info(
|
||||||
`[TEST] suite "${suiteName}": ${passed} of ${tests.length} succeeded\n\n`,
|
`[TEST] suite "${suiteName}": ${passed} of ${tests.length} succeeded\n\n`
|
||||||
);
|
);
|
||||||
if (passed < tests.length) {
|
if (passed < tests.length) {
|
||||||
process.exitCode = 1;
|
process.exitCode = 1;
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -9,43 +9,43 @@
|
||||||
* @param arr Array to shuffle.
|
* @param arr Array to shuffle.
|
||||||
*/
|
*/
|
||||||
export const shuffle = <T>(arr: T[]): void => {
|
export const shuffle = <T>(arr: T[]): void => {
|
||||||
let j: number;
|
let j: number;
|
||||||
let x: T;
|
let x: T;
|
||||||
for (let i = arr.length - 1; i > 0; i--) {
|
for (let i = arr.length - 1; i > 0; i--) {
|
||||||
j = Math.floor(Math.random() * (i + 1));
|
j = Math.floor(Math.random() * (i + 1));
|
||||||
x = arr[i];
|
x = arr[i];
|
||||||
arr[i] = arr[j];
|
arr[i] = arr[j];
|
||||||
arr[j] = x;
|
arr[j] = x;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const areArraysEqual = <T>(a: T[], b: T[]): boolean => {
|
const areArraysEqual = <T>(a: T[], b: T[]): boolean => {
|
||||||
if (a.length !== b.length) {
|
if (a.length != b.length) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
for (let i = 0; i < a.length; i++) {
|
for (let i = 0; i < a.length; i++) {
|
||||||
if (!areEqual(a[i], b[i])) {
|
if (!areEqual(a[i], b[i])) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
const areObjectsEqual = <T extends Record<string, unknown>>(
|
const areObjectsEqual = <T extends Record<string, unknown>>(
|
||||||
a: T,
|
a: T,
|
||||||
b: T,
|
b: T
|
||||||
): boolean => {
|
): boolean => {
|
||||||
const aKeys = Object.keys(a) as Array<keyof T>;
|
const aKeys = Object.keys(a) as Array<keyof T>;
|
||||||
const bKeys = Object.keys(b) as Array<keyof T>;
|
const bKeys = Object.keys(b) as Array<keyof T>;
|
||||||
if (aKeys.length !== bKeys.length) {
|
if (aKeys.length !== bKeys.length) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
for (const key of aKeys) {
|
for (const key of aKeys) {
|
||||||
if (!areEqual(a[key], b[key])) {
|
if (!areEqual(a[key], b[key])) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -58,19 +58,19 @@ const areObjectsEqual = <T extends Record<string, unknown>>(
|
||||||
* @return Whether the two values are structurally equal.
|
* @return Whether the two values are structurally equal.
|
||||||
*/
|
*/
|
||||||
export const areEqual = <T>(a: T, b: T): boolean => {
|
export const areEqual = <T>(a: T, b: T): boolean => {
|
||||||
if (Array.isArray(a) && Array.isArray(b)) {
|
if (Array.isArray(a) && Array.isArray(b)) {
|
||||||
return areArraysEqual(a, b);
|
return areArraysEqual(a, b);
|
||||||
}
|
}
|
||||||
if (a instanceof RegExp && b instanceof RegExp) {
|
if (a instanceof RegExp && b instanceof RegExp) {
|
||||||
return a.source === b.source;
|
return a.source === b.source;
|
||||||
}
|
}
|
||||||
if (typeof a === "object" && typeof b === "object") {
|
if (typeof a === "object" && typeof b === "object") {
|
||||||
return areObjectsEqual(
|
return areObjectsEqual(
|
||||||
a as Record<string, unknown>,
|
a as Record<string, unknown>,
|
||||||
b as Record<string, unknown>,
|
b as Record<string, unknown>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return a === b;
|
return a === b;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -84,10 +84,10 @@ export const areEqual = <T>(a: T, b: T): boolean => {
|
||||||
* @param pattern String or RegExp pattern to match value against.
|
* @param pattern String or RegExp pattern to match value against.
|
||||||
*/
|
*/
|
||||||
export const matches = (value: string, pattern: string | RegExp): boolean => {
|
export const matches = (value: string, pattern: string | RegExp): boolean => {
|
||||||
if (typeof pattern === "string") {
|
if (typeof pattern === "string") {
|
||||||
return value === pattern;
|
return value === pattern;
|
||||||
}
|
}
|
||||||
return pattern.test(value);
|
return pattern.test(value);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -102,11 +102,11 @@ export const matches = (value: string, pattern: string | RegExp): boolean => {
|
||||||
* @return Rendered value to display.
|
* @return Rendered value to display.
|
||||||
*/
|
*/
|
||||||
export const displayValue = (value: unknown): string => {
|
export const displayValue = (value: unknown): string => {
|
||||||
if (value === undefined) {
|
if (value === undefined) {
|
||||||
return "undefined";
|
return "undefined";
|
||||||
}
|
}
|
||||||
if (value instanceof RegExp) {
|
if (value instanceof RegExp) {
|
||||||
return value.toString();
|
return value.toString();
|
||||||
}
|
}
|
||||||
return JSON.stringify(value);
|
return JSON.stringify(value);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { fork } from "node:child_process";
|
|
||||||
import * as fs from "node:fs";
|
|
||||||
import * as path from "node:path";
|
|
||||||
|
|
||||||
import { shuffle } from "./lib/utils";
|
|
||||||
|
|
||||||
const TEST_SUITES_DIR = path.join(__dirname, "e2e");
|
|
||||||
const files = fs.readdirSync(TEST_SUITES_DIR);
|
|
||||||
// Shuffle test suites to detect ordering dependencies between them.
|
|
||||||
shuffle(files);
|
|
||||||
for (const file of files) {
|
|
||||||
const fullPath = path.join(TEST_SUITES_DIR, file);
|
|
||||||
fork(path.relative(process.cwd(), fullPath)).on("exit", (code) => {
|
|
||||||
if (code !== 0) {
|
|
||||||
process.exitCode = 1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -3,21 +3,22 @@
|
||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { fork } from "node:child_process";
|
import { fork } from "child_process";
|
||||||
import * as fs from "node:fs";
|
import * as fs from "fs";
|
||||||
import * as path from "node:path";
|
import * as path from "path";
|
||||||
|
|
||||||
import { shuffle } from "./lib/utils";
|
import { shuffle } from "./lib/utils";
|
||||||
|
|
||||||
const TEST_SUITES_DIR = path.join(__dirname, "test-suites");
|
const TEST_SUITES_DIR = path.join(__dirname, "test-suites");
|
||||||
|
|
||||||
const files = fs.readdirSync(TEST_SUITES_DIR);
|
const files = fs.readdirSync(TEST_SUITES_DIR);
|
||||||
// Shuffle test suites to detect ordering dependencies between them.
|
// Shuffle test suites to detect ordering dependencies between them.
|
||||||
shuffle(files);
|
shuffle(files);
|
||||||
for (const file of files) {
|
for (const file of files) {
|
||||||
const fullPath = path.join(TEST_SUITES_DIR, file);
|
const fullPath = path.join(TEST_SUITES_DIR, file);
|
||||||
fork(path.relative(process.cwd(), fullPath)).on("exit", (code) => {
|
fork(path.relative(process.cwd(), fullPath)).on("exit", (code) => {
|
||||||
if (code !== 0) {
|
if (code !== 0) {
|
||||||
process.exitCode = 1;
|
process.exitCode = 1;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,147 +3,104 @@
|
||||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { type Component, createElement, Fragment } from "../../dist";
|
import { Component, createElement } from "../../dist";
|
||||||
import { renderPage } from "../../dist/render";
|
import { renderPage } from "../../dist/render";
|
||||||
import { testSuite } from "../lib";
|
import { testSuite } from "../lib";
|
||||||
|
|
||||||
testSuite("renderPage", ({ test, expect }) => {
|
testSuite("renderPage", ({ test, expect }) => {
|
||||||
test("throws an Error when root elem is not html tag", () => {
|
test("throws an Error when root elem is not html tag", () => {
|
||||||
expect(() => renderPage(<div />)).toThrowErrorMatching(
|
expect(() => renderPage(<div />)).toThrowErrorMatching(
|
||||||
"attempted to render page with non-HTML root element div",
|
"attempted to render page with non-HTML root element div"
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
test("outputs a HTML5 DOCTYPE declaration", () => {
|
test("outputs a HTML5 DOCTYPE declaration", () => {
|
||||||
const html = renderPage(<html />);
|
const html = renderPage(<html />);
|
||||||
expect(html).toStartWith("<!DOCTYPE html>");
|
expect(html).toStartWith("<!DOCTYPE html>");
|
||||||
});
|
});
|
||||||
|
|
||||||
test("escapes HTML in tag names", () => {
|
test("escapes HTML in tag names", () => {
|
||||||
const html = renderPage(<html>{createElement("div></div", null)}</html>);
|
const html = renderPage(
|
||||||
expect(html).toEqual(
|
<html>{createElement("div></div", null)}</html>
|
||||||
"<!DOCTYPE html><html><div></div></div></div></html>",
|
);
|
||||||
);
|
expect(html).toEqual(
|
||||||
});
|
"<!DOCTYPE html><html><div></div></div></div></html>"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
test("renders html attributes", () => {
|
test("renders html attributes", () => {
|
||||||
const html = renderPage(
|
const html = renderPage(
|
||||||
<html>
|
<html>
|
||||||
<div className="test" id="1" />
|
<div className="test" id="1" />
|
||||||
</html>,
|
</html>
|
||||||
);
|
);
|
||||||
expect(html).toEqual(
|
expect(html).toEqual(
|
||||||
'<!DOCTYPE html><html><div class="test" id="1"></div></html>',
|
'<!DOCTYPE html><html><div class="test" id="1"></div></html>'
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
test("renders common html tags", () => {
|
test("renders common html tags", () => {
|
||||||
const html = renderPage(
|
const html = renderPage(
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title />
|
<title />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div />
|
<div />
|
||||||
</body>
|
</body>
|
||||||
</html>,
|
</html>
|
||||||
);
|
);
|
||||||
expect(html).toEqual(
|
expect(html).toEqual(
|
||||||
"<!DOCTYPE html><html><head><title></title></head><body><div></div></body></html>",
|
"<!DOCTYPE html><html><head><title></title></head><body><div></div></body></html>"
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
test("renders text nodes", () => {
|
test("renders text nodes", () => {
|
||||||
const html = renderPage(<html>There are three lights!</html>);
|
const html = renderPage(<html>There are three lights!</html>);
|
||||||
expect(html).toEqual("<!DOCTYPE html><html>There are three lights!</html>");
|
expect(html).toEqual(
|
||||||
});
|
"<!DOCTYPE html><html>There are three lights!</html>"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
test("renders spliced number nodes", () => {
|
test("renders spliced number nodes", () => {
|
||||||
const nLights = 3;
|
const nLights = 3;
|
||||||
const html = renderPage(<html>There are {nLights} lights!</html>);
|
const html = renderPage(<html>There are {nLights} lights!</html>);
|
||||||
expect(html).toEqual("<!DOCTYPE html><html>There are 3 lights!</html>");
|
expect(html).toEqual("<!DOCTYPE html><html>There are 3 lights!</html>");
|
||||||
});
|
});
|
||||||
|
|
||||||
test("renders spliced arrays", () => {
|
test("renders spliced arrays", () => {
|
||||||
const Light: Component<{ lightN: number }> = ({ lightN }) => (
|
const Light: Component<{ lightN: number }> = ({ lightN }) => (
|
||||||
<div>{lightN}</div>
|
<div>{lightN}</div>
|
||||||
);
|
);
|
||||||
const lights = [1, 2, 3];
|
const lights = [1, 2, 3];
|
||||||
const html = renderPage(
|
const html = renderPage(
|
||||||
<html>
|
<html>
|
||||||
There are{" "}
|
There are{" "}
|
||||||
{lights.map((lightN) => (
|
{lights.map((lightN) => (
|
||||||
<Light lightN={lightN} />
|
<Light lightN={lightN} />
|
||||||
))}{" "}
|
))}{" "}
|
||||||
lights!
|
lights!
|
||||||
</html>,
|
</html>
|
||||||
);
|
);
|
||||||
expect(html).toEqual(
|
expect(html).toEqual(
|
||||||
"<!DOCTYPE html><html>There are <div>1</div><div>2</div><div>3</div> lights!</html>",
|
"<!DOCTYPE html><html>There are <div>1</div><div>2</div><div>3</div> lights!</html>"
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
test("renders components w/ custom properties", () => {
|
test("renders components w/ custom properties", () => {
|
||||||
interface LightProps {
|
interface LightProps {
|
||||||
nLights: number;
|
nLights: number;
|
||||||
}
|
}
|
||||||
const Light: Component<LightProps> = ({ nLights }) => (
|
const Light: Component<LightProps> = ({ nLights }) => (
|
||||||
<div>{nLights} lights</div>
|
<div>{nLights} lights</div>
|
||||||
);
|
);
|
||||||
const html = renderPage(
|
const html = renderPage(
|
||||||
<html>
|
<html>
|
||||||
There are <Light nLights={3} />!
|
There are <Light nLights={3} />!
|
||||||
</html>,
|
</html>
|
||||||
);
|
);
|
||||||
expect(html).toEqual(
|
expect(html).toEqual(
|
||||||
"<!DOCTYPE html><html>There are <div>3 lights</div>!</html>",
|
"<!DOCTYPE html><html>There are <div>3 lights</div>!</html>"
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
test("renders fragment children only", () => {
|
|
||||||
const html = renderPage(
|
|
||||||
<html>
|
|
||||||
<Fragment>
|
|
||||||
<div>test of</div>
|
|
||||||
<div>fragments</div>
|
|
||||||
</Fragment>
|
|
||||||
</html>,
|
|
||||||
);
|
|
||||||
expect(html).toEqual(
|
|
||||||
"<!DOCTYPE html><html><div>test of</div><div>fragments</div></html>",
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
test("renders unescaped HTML via dangerouslySetInnerHTML", () => {
|
|
||||||
const html = renderPage(
|
|
||||||
<html>
|
|
||||||
<div
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: "<div>red alert!</div>",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</html>,
|
|
||||||
);
|
|
||||||
expect(html).toEqual(
|
|
||||||
"<!DOCTYPE html><html><div><div>red alert!</div></div></html>",
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
test("throws error when both dangerouslySetInnerHTML and children prop present", () => {
|
|
||||||
expect(() =>
|
|
||||||
renderPage(
|
|
||||||
<html>
|
|
||||||
<div
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: "<div>set phasers to kill</div>",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div>set phasers to stun</div>
|
|
||||||
</div>
|
|
||||||
</html>,
|
|
||||||
),
|
|
||||||
).toThrowErrorMatching(
|
|
||||||
'An element with children may not have a "dangerouslySetInnerHTML" prop since children would be overriden',
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"extends": "../tsconfig-base.json",
|
"extends": "../tsconfig-base.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"jsx": "react",
|
"jsx": "react",
|
||||||
"jsxFactory": "createElement"
|
"jsxFactory": "createElement"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,14 @@
|
||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"module": "CommonJS",
|
"esModuleInterop": true,
|
||||||
"moduleResolution": "node",
|
"module": "CommonJS",
|
||||||
"target": "ES2018",
|
"moduleResolution": "node",
|
||||||
"lib": ["ES2018"],
|
"target": "ES2018",
|
||||||
"strict": true,
|
"lib": ["ES2018"],
|
||||||
"noUnusedLocals": true,
|
"strict": true,
|
||||||
"noUnusedParameters": true,
|
"noUnusedLocals": true,
|
||||||
"noImplicitReturns": true,
|
"noUnusedParameters": true,
|
||||||
"noFallthroughCasesInSwitch": true
|
"noImplicitReturns": true,
|
||||||
}
|
"noFallthroughCasesInSwitch": true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
{
|
{
|
||||||
"extends": "./tsconfig-base.json",
|
"extends": "./tsconfig-base.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"declaration": true,
|
"declaration": true,
|
||||||
"sourceMap": true,
|
"sourceMap": true,
|
||||||
"outDir": "./dist"
|
"outDir": "./dist"
|
||||||
},
|
},
|
||||||
"include": ["src/**/*.ts"]
|
"include": ["src/**/*.ts"]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue