Skip to content

Commit 4858bed

Browse files
bcomnesbcomnes
committed
CSS modules
1 parent 92d4310 commit 4858bed

File tree

9 files changed

+166
-0
lines changed

9 files changed

+166
-0
lines changed

‎examples/css-modules/package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "@top-bun/preact-example",
3+
"version": "0.0.0",
4+
"type": "module",
5+
"scripts": {
6+
"start": "npm run watch",
7+
"build": "npm run clean && top-bun",
8+
"clean": "rm -rf public && mkdir -p public",
9+
"watch": "npm run clean && tb --watch"
10+
},
11+
"author": "Bret Comnes <[email protected]> (https://bret.io/)",
12+
"license": "MIT",
13+
"dependencies": {
14+
"@preact/signals": "^2.0.0",
15+
"highlight.js": "^11.9.0",
16+
"htm": "^3.1.1",
17+
"mine.css": "^9.0.1",
18+
"preact": "^10.24.0",
19+
"preact-render-to-string": "^6.5.11",
20+
"top-bun": "../../."
21+
},
22+
"devDependencies": {
23+
"npm-run-all2": "^6.0.0"
24+
}
25+
}

‎examples/css-modules/src/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Preact example
2+
3+
This is a preact example.
4+
5+
[Isomorphic Component Rendering](./modules/)

‎examples/css-modules/src/globals/global.client.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// @ts-ignore
2+
import { toggleTheme } from 'mine.css'
3+
// @ts-ignore
4+
window.toggleTheme = toggleTheme

‎examples/css-modules/src/globals/global.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import 'mine.css/dist/mine.css';
2+
@import 'mine.css/dist/layout.css';
3+
@import 'highlight.js/styles/github-dark-dimmed.css';

‎examples/css-modules/src/layouts/root.layout.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
// @ts-ignore
2+
import { html } from 'htm/preact'
3+
import { render } from 'preact-render-to-string'
4+
5+
/**
6+
* @template T extends object
7+
* @typedef {import('../build-pages/resolve-layout.js').LayoutFunction<T>} LayoutFunction
8+
*/
9+
10+
/**
11+
* Build all of the bundles using esbuild.
12+
*
13+
* @type {LayoutFunction<{
14+
* title: string,
15+
* siteName: string,
16+
* defaultStyle: boolean,
17+
* basePath: string
18+
* }>}
19+
*/
20+
export default function defaultRootLayout ({
21+
vars: {
22+
title,
23+
siteName = 'TopBun',
24+
basePath,
25+
/* defaultStyle = true Set this to false in global or page to disable the default style in the default layout */
26+
},
27+
scripts,
28+
styles,
29+
children,
30+
/* pages */
31+
/* page */
32+
}) {
33+
return /* html */`
34+
<!DOCTYPE html>
35+
<html>
36+
${render(html`
37+
<head>
38+
<meta charset="utf-8" />
39+
<title>${title ? `${title}` : ''}${title && siteName ? ' | ' : ''}${siteName}</title>
40+
<meta name="viewport" content="width=device-width, user-scalable=no" />
41+
${scripts
42+
? scripts.map(script => html`<script type='module' src="${script.startsWith('/') ? `${basePath ?? ''}${script}` : script}" />`)
43+
: null}
44+
${styles
45+
? styles.map(style => html`<link rel="stylesheet" href="${style.startsWith('/') ? `${basePath ?? ''}${style}` : style}" />`)
46+
: null}
47+
</head>
48+
`)}
49+
${render(html`
50+
<body class="safe-area-inset">
51+
${typeof children === 'string'
52+
? html`<main class="mine-layout app-main" dangerouslySetInnerHTML="${{ __html: children }}"/>`
53+
: html`<main class="mine-layout app-main">${children}</main>`
54+
}
55+
</body>
56+
`)}
57+
</html>
58+
`
59+
}

‎examples/css-modules/src/modules/app.module.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/* app.module.css */
2+
.outerShell {
3+
background: blue;
4+
}

‎examples/css-modules/src/modules/client.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { html, Component } from 'htm/preact'
2+
import { render } from 'preact'
3+
import { useCallback } from 'preact/hooks'
4+
import { useSignal, useComputed } from '@preact/signals'
5+
import { outerShell } from './app.module.css'
6+
7+
console.log({ outerShell })
8+
9+
const Header = ({ name }) => html`<h1>${name} List</h1>`
10+
11+
const Footer = props => {
12+
const count = useSignal(0)
13+
const double = useComputed(() => count.value * 2)
14+
15+
const handleClick = useCallback(() => {
16+
count.value++
17+
}, [count])
18+
19+
return html`<footer ...${props}>
20+
${count}
21+
${double}
22+
${props.children}
23+
<button onClick=${handleClick}>Click</button>
24+
</footer>`
25+
}
26+
27+
class App extends Component {
28+
addTodo () {
29+
const { todos = [] } = this.state
30+
this.setState({ todos: todos.concat(`Item ${todos.length}`) })
31+
}
32+
33+
render ({ page }, { todos = [] }) {
34+
return html`
35+
<div class="${`app ${outerShell}`}">
36+
<${Header} name="ToDo's (${page})" />
37+
<ul>
38+
${todos.map(todo => html`
39+
<li key=${todo}>${todo}</li>
40+
`)}
41+
</ul>
42+
<button onClick=${() => this.addTodo()}>Add Todo</button>
43+
<${Footer}>footer content here<//>
44+
</div>
45+
`
46+
}
47+
}
48+
49+
export const page = () => html`
50+
<${App} page="Isomorphic"/>
51+
<${Footer}>footer content here<//>
52+
<${Footer}>footer content here<//>
53+
`
54+
55+
if (typeof window !== 'undefined') {
56+
const renderTarget = document.querySelector('.app-main')
57+
render(page(), renderTarget)
58+
}

‎examples/css-modules/src/modules/page.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { html } from 'htm/preact'
2+
3+
export default () => {
4+
return html`
5+
<div>Loading</div>
6+
`
7+
}

‎examples/css-modules/src/modules/style.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import './app.module.css';

0 commit comments

Comments
 (0)