Skip to content

Commit 38c018f

Browse files
explodingcameraexplodingcamera
authored
feat: add simplejsx (#8)
Signed-off-by: Henry <mail@henrygressmann.de>
1 parent 2e68f6e commit 38c018f

33 files changed

Lines changed: 1525 additions & 334 deletions

‎CHANGELOG.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Changelog
2+
3+
This repository contains multiple packages. Changelogs are maintained per package:
4+
5+
- [`@explodingcamera/css`](packages/css/CHANGELOG.md)
6+
- [`minify-literals`](packages/minify-literals/CHANGELOG.md)
7+
- [`rollup-plugin-minify-template-literals`](packages/rollup-plugin-minify-template-literals/CHANGELOG.md)
8+
- [`simplejsx`](packages/simplejsx/CHANGELOG.md)
9+
- [`spaify`](packages/spaify/CHANGELOG.md)

‎README.md‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,21 @@
1010

1111
## Projects
1212

13-
| Package | | Description |
14-
| --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
15-
| [`@explodingcamera/css`](./packages/css) | [![API Docs](https://img.shields.io/badge/API%20Docs-blue.svg)](https://paka.dev/npm/@explodingcamera/css) [![NPM Version](https://img.shields.io/npm/v/@explodingcamera/css.svg)](https://www.npmjs.com/package/@explodingcamera/css) | Small CSS reset/base files. |
16-
| [`minify-literals`](./packages/minify-literals) | [![API Docs](https://img.shields.io/badge/API%20Docs-blue.svg)](https://paka.dev/npm/minify-literals) [![NPM Version](https://img.shields.io/npm/v/minify-literals.svg)](https://www.npmjs.com/package/minify-literals) | Minify CSS and HTML literals. |
17-
| [`rollup-plugin-minify-template-literals`](./packages/rollup-plugin-minify-template-literals) | [![API Docs](https://img.shields.io/badge/API%20Docs-blue.svg)](https://paka.dev/npm/rollup-plugin-minify-template-literals) [![NPM Version](https://img.shields.io/npm/v/rollup-plugin-minify-template-literals.svg)](https://www.npmjs.com/package/rollup-plugin-minify-template-literals) | Vite/Rollup plugin that minifies template literals. |
18-
| [`spaify`](./packages/spaify) | [![API Docs](https://img.shields.io/badge/API%20Docs-blue.svg)](https://paka.dev/npm/spaify) [![NPM Version](https://img.shields.io/npm/v/spaify.svg)](https://www.npmjs.com/package/spaify) | Seamless page transitions for static sites. |
13+
| Package | | Description |
14+
| --------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
15+
| [`@explodingcamera/css`](./packages/css) | [![API Docs](https://img.shields.io/badge/API%20Docs-blue.svg)](https://www.jsdocs.io/package/@explodingcamera/css) [![NPM Version](https://img.shields.io/npm/v/@explodingcamera/css.svg)](https://www.npmjs.com/package/@explodingcamera/css) | Small CSS reset/base files. |
16+
| [`minify-literals`](./packages/minify-literals) | [![API Docs](https://img.shields.io/badge/API%20Docs-blue.svg)](https://www.jsdocs.io/package/minify-literals) [![NPM Version](https://img.shields.io/npm/v/minify-literals.svg)](https://www.npmjs.com/package/minify-literals) | Minify CSS and HTML literals. |
17+
| [`rollup-plugin-minify-template-literals`](./packages/rollup-plugin-minify-template-literals) | [![API Docs](https://img.shields.io/badge/API%20Docs-blue.svg)](https://www.jsdocs.io/package/rollup-plugin-minify-template-literals) [![NPM Version](https://img.shields.io/npm/v/rollup-plugin-minify-template-literals.svg)](https://www.npmjs.com/package/rollup-plugin-minify-template-literals) | Vite/Rollup plugin that minifies template literals. |
18+
| [`simplejsx`](./packages/simplejsx) | [![API Docs](https://img.shields.io/badge/API%20Docs-blue.svg)](https://www.jsdocs.io/package/simplejsx) [![NPM Version](https://img.shields.io/npm/v/simplejsx.svg)](https://www.npmjs.com/package/simplejsx) | Minimal JSX templating for safe HTML strings. |
19+
| [`spaify`](./packages/spaify) | [![API Docs](https://img.shields.io/badge/API%20Docs-blue.svg)](https://www.jsdocs.io/package/spaify) [![NPM Version](https://img.shields.io/npm/v/spaify.svg)](https://www.npmjs.com/package/spaify) | Seamless page transitions for static sites. |
1920

2021
## Packages Contained In Other Repositories
2122

2223
Please open issues and pull requests for these packages in their respective repositories.
2324

24-
| Package | | Description |
25-
| ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
26-
| [`subsonic-api`](https://github.com/explodingcamera/subsonic-api) | [![API Docs](https://img.shields.io/badge/API%20Docs-blue.svg)](https://paka.dev/npm/subsonic-api) [![NPM Version](https://img.shields.io/npm/v/subsonic-api.svg)](https://www.npmjs.com/package/subsonic-api) | API library for Subsonic-compatible servers. |
25+
| Package | | Description |
26+
| ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
27+
| [`subsonic-api`](https://github.com/explodingcamera/subsonic-api) | [![API Docs](https://img.shields.io/badge/API%20Docs-blue.svg)](https://www.jsdocs.io/package/subsonic-api) [![NPM Version](https://img.shields.io/npm/v/subsonic-api.svg)](https://www.npmjs.com/package/subsonic-api) | API library for Subsonic-compatible servers. |
2728

2829
## Deprecated Packages
2930

‎biome.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@
3030
},
3131
"complexity": {
3232
"noBannedTypes": "off",
33-
"noForEach": "off"
33+
"noForEach": "off",
34+
"useLiteralKeys": "off"
3435
}
3536
}
3637
}

‎bun.lock‎

Lines changed: 25 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/package.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"name": "examples",
3+
"version": "0.0.0",
4+
"private": true,
5+
"type": "module",
6+
"dependencies": {
7+
"simplejsx": "workspace:*"
8+
},
9+
"devDependencies": {
10+
"bun-types": "^1.3.14",
11+
"typescript": "^6.0.3"
12+
}
13+
}

‎examples/simplejsx/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# simplejsx example
2+
3+
Run this example from the repo root:
4+
5+
```bash
6+
bun run build
7+
bun examples/simplejsx/index.tsx
8+
bun examples/simplejsx/middleware.tsx
9+
```

‎examples/simplejsx/index.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/** @jsxImportSource simplejsx */
2+
import { renderAsync, unsafeHTML, type PropsWithChildren } from "simplejsx";
3+
4+
function Document({ children }: PropsWithChildren) {
5+
return (
6+
<html lang="en">
7+
<head>
8+
<meta charset="utf-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1" />
10+
</head>
11+
<body>{children}</body>
12+
</html>
13+
);
14+
}
15+
16+
async function Page() {
17+
const name = await Promise.resolve("<World>");
18+
19+
return (
20+
<>
21+
<head>
22+
<title>simplejsx example</title>
23+
<meta name="description" content="Rendered with simplejsx" />
24+
</head>
25+
<main class="page">
26+
<h1>Hello {name}</h1>
27+
<p>Text is escaped by default.</p>
28+
{unsafeHTML("<hr>")}
29+
</main>
30+
</>
31+
);
32+
}
33+
34+
const html = await renderAsync(
35+
<Document>
36+
<Page />
37+
</Document>,
38+
);
39+
40+
console.log(`<!doctype html>${html}`);

‎examples/simplejsx/middleware.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/** @jsxImportSource simplejsx */
2+
import { renderAsync, type ElementMiddleware, type PropsWithChildren } from "simplejsx";
3+
4+
function Document({ children }: PropsWithChildren) {
5+
return (
6+
<html lang="en">
7+
<head>
8+
<meta charset="utf-8" />
9+
<title>simplejsx middleware</title>
10+
</head>
11+
<body>{children}</body>
12+
</html>
13+
);
14+
}
15+
16+
const externalLinks: ElementMiddleware = ({ tag, props }) => {
17+
if (tag !== "a" || typeof props["href"] !== "string") return;
18+
if (!props["href"].startsWith("https://")) return;
19+
20+
return { ...props, target: "_blank", rel: "noreferrer" };
21+
};
22+
23+
const imageMetadata: ElementMiddleware = async ({ tag, props }) => {
24+
if (tag !== "img" || typeof props["src"] !== "string") return;
25+
26+
const size = await getImageSize(props["src"]);
27+
return {
28+
...props,
29+
loading: props["loading"] ?? "lazy",
30+
width: size.width,
31+
height: size.height,
32+
};
33+
};
34+
35+
async function getImageSize(_src: string) {
36+
return { width: 1200, height: 800 };
37+
}
38+
39+
const html = await renderAsync(
40+
<Document>
41+
<main>
42+
<h1>Element middleware</h1>
43+
<a href="https://example.com">External link</a>
44+
<img src="/photo.jpg" alt="A mountain lake" />
45+
</main>
46+
</Document>,
47+
{
48+
element: [externalLinks, imageMetadata],
49+
},
50+
);
51+
52+
console.log(`<!doctype html>${html}`);

‎examples/tsconfig.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2022",
4+
"module": "ESNext",
5+
"moduleResolution": "Bundler",
6+
"jsx": "react-jsx",
7+
"jsxImportSource": "simplejsx",
8+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
9+
"types": ["bun-types"],
10+
"strict": true,
11+
"esModuleInterop": true,
12+
"skipLibCheck": true,
13+
"forceConsistentCasingInFileNames": true,
14+
"noUncheckedIndexedAccess": true,
15+
"verbatimModuleSyntax": true
16+
},
17+
"include": ["**/*.tsx"]
18+
}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
{
22
"workspaces": [
3+
"examples",
34
"packages/*"
45
],
56
"scripts": {
67
"build": "bun run --bun tsdown",
7-
"check": "biome check packages",
8+
"check": "biome check packages examples",
89
"typecheck": "tsc --noEmit",
910
"test": "bun test"
1011
},

0 commit comments

Comments
 (0)