Merge pull request #165 from bcomnes/preact-example

Add preact example
bcomnes · Sep 28, 2024 · cc902b6 · cc902b6
2 parents 3a99703 + 72ce635
commit cc902b6
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 8 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -22,6 +22,10 @@ updates:
     directory: "/examples/nested-dest/"
     schedule:
       interval: "daily"
+  - package-ecosystem: "npm"
+    directory: "/examples/preact/"
+    schedule:
+      interval: "daily"
   - package-ecosystem: "npm"
     directory: "/examples/string-layouts/"
     schedule:

diff --git a/examples/preact/package.json b/examples/preact/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@top-bun/preact-example",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "npm run watch",
+    "build": "npm run clean && top-bun",
+    "clean": "rm -rf public && mkdir -p public",
+    "watch": "npm run clean && tb --watch"
+  },
+  "author": "Bret Comnes <bcomnes@gmail.com> (https://bret.io/)",
+  "license": "MIT",
+  "dependencies": {
+    "@preact/signals": "^1.3.0",
+    "highlight.js": "^11.9.0",
+    "htm": "^3.1.1",
+    "mine.css": "^9.0.1",
+    "preact": "^10.24.0",
+    "preact-render-to-string": "^6.5.11",
+    "top-bun": "../../."
+  },
+  "devDependencies": {
+    "npm-run-all2": "^6.0.0"
+  }
+}
diff --git a/examples/preact/src/README.md b/examples/preact/src/README.md
@@ -0,0 +1,3 @@
+# Preact example
+
+This is a preact example. 
diff --git a/examples/preact/src/globals/global.client.js b/examples/preact/src/globals/global.client.js
@@ -0,0 +1,4 @@
+// @ts-ignore
+import { toggleTheme } from 'mine.css'
+// @ts-ignore
+window.toggleTheme = toggleTheme
diff --git a/examples/preact/src/globals/global.css b/examples/preact/src/globals/global.css
@@ -0,0 +1,3 @@
+@import 'mine.css/dist/mine.css';
+@import 'mine.css/dist/layout.css';
+@import 'highlight.js/styles/github-dark-dimmed.css';
diff --git a/examples/preact/src/isomorphic/client.js b/examples/preact/src/isomorphic/client.js
@@ -0,0 +1,55 @@
+import { html, Component } from 'htm/preact'
+import { render } from 'preact'
+import { useCallback } from 'preact/hooks'
+import { useSignal, useComputed } from '@preact/signals'
+
+const Header = ({ name }) => html`<h1>${name} List</h1>`
+
+const Footer = props => {
+  const count = useSignal(0)
+  const double = useComputed(() => count.value * 2)
+
+  const handleClick = useCallback(() => {
+    count.value++
+  }, [count])
+
+  return html`<footer ...${props}>
+    ${count}
+    ${double}
+    ${props.children}
+    <button onClick=${handleClick}>Click</button>
+  </footer>`
+}
+
+class App extends Component {
+  addTodo () {
+    const { todos = [] } = this.state
+    this.setState({ todos: todos.concat(`Item ${todos.length}`) })
+  }
+
+  render ({ page }, { todos = [] }) {
+    return html`
+          <div class="app">
+            <${Header} name="ToDo's (${page})" />
+            <ul>
+              ${todos.map(todo => html`
+                <li key=${todo}>${todo}</li>
+              `)}
+            </ul>
+            <button onClick=${() => this.addTodo()}>Add Todo</button>
+            <${Footer}>footer content here<//>
+          </div>
+        `
+  }
+}
+
+export const page = () => html`
+    <${App}/>
+    <${Footer}>footer content here<//>
+    <${Footer}>footer content here<//>
+  `
+
+if (typeof window !== 'undefined') {
+  const renderTarget = document.querySelector('.app-main')
+  render(page(), renderTarget)
+}
diff --git a/examples/preact/src/isomorphic/page.js b/examples/preact/src/isomorphic/page.js
@@ -0,0 +1,5 @@
+import { page } from './client.js'
+
+export default () => {
+  return page()
+}
diff --git a/examples/preact/src/layouts/root.layout.js b/examples/preact/src/layouts/root.layout.js
@@ -0,0 +1,58 @@
+// @ts-ignore
+import { html } from 'htm/preact'
+import { render } from 'preact-render-to-string'
+
+/**
+ * @template T extends object
+ * @typedef {import('../build-pages/resolve-layout.js').LayoutFunction<T>} LayoutFunction
+ */
+
+/**
+ * Build all of the bundles using esbuild.
+ *
+ * @type {LayoutFunction<{
+ *   title: string,
+ *   siteName: string,
+ *   defaultStyle: boolean,
+ *   basePath: string
+ * }>}
+ */
+export default function defaultRootLayout ({
+  vars: {
+    title,
+    siteName = 'TopBun',
+    basePath,
+    /* defaultStyle = true  Set this to false in global or page to disable the default style in the default layout */
+  },
+  scripts,
+  styles,
+  children,
+  /* pages */
+  /* page */
+}) {
+  return /* html */`
+    <!DOCTYPE html>
+    <html>
+      ${render(html`
+        <head>
+          <meta charset="utf-8" />
+          <title>${title ? `${title}` : ''}${title && siteName ? ' | ' : ''}${siteName}</title>
+          <meta name="viewport" content="width=device-width, user-scalable=no" />
+          ${scripts
+            ? scripts.map(script => html`<script type='module' src="${script.startsWith('/') ? `${basePath ?? ''}${script}` : script}" />`)
+            : null}
+          ${styles
+            ? styles.map(style => html`<link rel="stylesheet" href="${style.startsWith('/') ? `${basePath ?? ''}${style}` : style}" />`)
+            : null}
+        </head>
+      `)}
+      ${render(html`
+        <body class="safe-area-inset">
+          <main class="mine-layout app-main">
+            ${typeof children === 'string' ? html([children]) : children /* Support both uhtml and string children. Optional. */}
+          </main>
+        </body>
+      `)}
+    </html>
+  `
+}
diff --git a/lib/builder.js b/lib/builder.js
@@ -94,13 +94,10 @@ import { ensureDest } from './helpers/ensure-dest.js'
  * }
  */
 export async function builder (src, dest, opts) {
-  /** @type {BuildStepErrors} */
-  const errors = []
-  /** @type {BuildStepWarnings} */
-  const warnings = []
+  const errors = [] /** @type {BuildStepErrors} */
+  const warnings = [] /** @type {BuildStepWarnings} */
 
-  /** @type {SiteData} */
-  const siteData = await identifyPages(src, opts)
+  const siteData = await identifyPages(src, opts) /** @type {SiteData} */
 
   errors.push(...siteData.errors)
   warnings.push(...siteData.warnings)

diff --git a/lib/helpers/top-bun-warning.js b/lib/helpers/top-bun-warning.js
@@ -1,4 +1,5 @@
-/** @typedef { 'TOP_BUN_WARNING_DUPLICATE_LAYOUT' |
+/**
+ * @typedef { 'TOP_BUN_WARNING_DUPLICATE_LAYOUT' |
  *  'TOP_BUN_WARNING_DUPLICATE_LAYOUT_STYLE' |
  *  'TOP_BUN_WARNING_ORPHANED_LAYOUT_STYLE' |
  *  'TOP_BUN_WARNING_DUPLICATE_LAYOUT_CLIENT' |
@@ -8,7 +9,8 @@
  *  'TOP_BUN_WARNING_DUPLICATE_GLOBAL_STYLE' |
  *  'TOP_BUN_WARNING_DUPLICATE_GLOBAL_CLIENT' |
  * 'TOP_BUN_WARNING_DUPLICATE_GLOBAL_VARS'
- *  } TopBunWarningCode */
+ *  } TopBunWarningCode
+ */
 
 /**
  * @typedef TopBunWarning