Skip to content

Commit af48948

Browse files
barelyhumanbarelyhuman
committed
chore: update example
1 parent 8b26218 commit af48948

File tree

8 files changed

+67
-51
lines changed

8 files changed

+67
-51
lines changed

‎packages/adapters/node/lib/index.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { existsSync } from 'node:fs'
22
import http from 'node:http'
3-
43
import { sirv, useMiddleware } from 'adex/ssr'
54

65
import { handler } from 'virtual:adex:handler'

‎playground/.islands/island-counter.js

+40-37
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1+
import { render, h } from 'preact'
12

2-
import { render, h } from 'preact';
3-
4-
// h() imports will be added at build time since this file is inlined with the client template
3+
// h() imports will be added at build time since this file is inlined with the client template
54

65
const restoreTree = (type, props = {}) => {
76
if (typeof props.children === 'object') {
@@ -61,49 +60,53 @@ function mergePropsWithDOM(rootNode, props) {
6160
rootNode.append(...scriptNodes)
6261
}
6362

63+
init()
6464

65-
init()
66-
67-
function init(){
68-
if(customElements.get("island-counter")){
69-
return
70-
}
71-
customElements.define("island-counter", class IslandCounter extends HTMLElement {
72-
constructor(){
73-
super();
65+
function init() {
66+
if (customElements.get('island-counter')) {
67+
return
68+
}
69+
customElements.define(
70+
'island-counter',
71+
class IslandCounter extends HTMLElement {
72+
constructor() {
73+
super()
7474
}
75-
75+
7676
async connectedCallback() {
77-
const c = await import("/Users/sid/code/adex/playground/src/components/counter.tsx");
78-
const usableComponent = c["Counter"]
79-
const props = JSON.parse(this.dataset.props || '{}');
80-
this.baseProps = props
81-
this.component = usableComponent
82-
this.renderOnView({threshold:0.2})
77+
const c = await import(
78+
'/Users/sid/code/adex/playground/src/components/counter.tsx'
79+
)
80+
const usableComponent = c['Counter']
81+
const props = JSON.parse(this.dataset.props || '{}')
82+
this.baseProps = props
83+
this.component = usableComponent
84+
this.renderOnView({ threshold: 0.2 })
8385
}
84-
85-
renderOnView({threshold} = {}){
86+
87+
renderOnView({ threshold } = {}) {
8688
const options = {
8789
root: null,
8890
threshold,
89-
};
90-
91-
const self = this;
92-
93-
const callback = function(entries, observer) {
94-
entries.forEach((entry) => {
95-
if(!entry.isIntersecting) return
91+
}
92+
93+
const self = this
94+
95+
const callback = function (entries, observer) {
96+
entries.forEach(entry => {
97+
if (!entry.isIntersecting) return
9698
self.renderIsland()
97-
});
99+
})
98100
}
99-
100-
let observer = new IntersectionObserver(callback, options);
101-
observer.observe(this);
101+
102+
let observer = new IntersectionObserver(callback, options)
103+
observer.observe(this)
102104
}
103-
104-
renderIsland(){
105-
mergePropsWithDOM(this, this.baseProps);
105+
106+
renderIsland() {
107+
mergePropsWithDOM(this, this.baseProps)
106108
render(restoreTree(this.component, this.baseProps), this, undefined)
107109
}
108-
})
109-
}
110+
}
111+
)
112+
}

‎playground/src/components/SharedSignal.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,12 @@ export function Triggerer() {
1515
return (
1616
<div class="p-10 border border-red-400 border-dashed">
1717
<h2>Triggerer Island</h2>
18-
<button class="px-4 py-2 text-white bg-black rounded-md" onClick={fetchData}>Fetch Again</button>
18+
<button
19+
class="px-4 py-2 text-white bg-black rounded-md"
20+
onClick={fetchData}
21+
>
22+
Fetch Again
23+
</button>
1924
</div>
2025
)
2126
}

‎playground/src/global.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
@tailwind base;
22
@tailwind components;
3-
@tailwind utilities;
3+
@tailwind utilities;

‎playground/src/index.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Document</title>
7-
</head>
8-
<body>
7+
</head>
8+
<body>
99
<div id="app"></div>
10-
</body>
11-
</html>
10+
</body>
11+
</html>

‎playground/src/pages/index.jsx

+8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import { useState } from 'preact/hooks'
22
import './local-index.css'
33
import { Counter } from '../components/counter.tsx'
4+
import { signal } from '@preact/signals'
5+
6+
const data = signal({})
7+
8+
$fetch('/api/hello').then(d => {
9+
data.value = d
10+
})
411

512
export default function Page() {
613
const [count, setCount] = useState(0)
@@ -36,6 +43,7 @@ export default function Page() {
3643
<Counter />
3744
</span>
3845
</p>
46+
<pre>{JSON.stringify(data.value, null, 2)}</pre>
3947
</div>
4048
)
4149
}

‎playground/src/pages/local-index.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
body{
2-
background:red;
3-
}
1+
body {
2+
background: red;
3+
}

‎playground/tsconfig.json

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"jsx": "react-jsx",
66
"jsxImportSource": "preact",
77
"moduleResolution": "Node",
8+
"types": ["adex/types"],
89
"paths": {
910
"adex": ["../adex/vite.js"],
1011
"adex/*": ["../adex/src/*"]

0 commit comments

Comments
 (0)