-
21 | {comments.map(d => (
22 |
- {d} 23 | ))} 24 |
asdf
31 | // }
32 |
33 | // the app component
34 | class App extends Component {
35 | // this static method can be calles before the componend is rendered in SSR mode
36 | static async getData() {
37 | // get some data from your server
38 | return await fetchMock()
39 | }
40 |
41 | async didMount() {
42 | // will re-render the component and pass the result of getData()
43 | const data = await App.getData()
44 | this.update(data)
45 | }
46 |
47 | render(data: string[]) {
48 | // this.props.data will be defined if in SSR mode
49 | data = data || this.props.data
50 |
51 | // console.log(Nano.h(Bla, null))
52 | if (data) return loading...
56 | }
57 | }
58 |
59 | export { App }
60 |
--------------------------------------------------------------------------------
/src/dev/dev.tsx:
--------------------------------------------------------------------------------
1 | import { h, render } from '../core.js'
2 | import { Component } from '../component.js'
3 |
4 | class App extends Component {
5 | render() {
6 | return Nano JSX App
7 | }
8 | }
9 |
10 | render(Nano JSX App
18 | }
19 | }
20 |
21 | const app = renderSSR(
38 | ${body}
39 |
40 |
41 | ${footer.join('\n')}
42 |
43 | `
44 |
45 | // minify
46 | // html = html.replace(/[\s]+/gm, ' ')
47 |
48 | http
49 | .createServer((req: any, res: any) => {
50 | const { url } = req
51 |
52 | if (/\.html$/.test(url)) return res.end(html)
53 |
54 | // @ts-ignore
55 | const path = join(__dirname, '../../', url)
56 |
57 | fs.readFile(path, (err: any, data: any) => {
58 | if (err) {
59 | res.writeHead(404)
60 | return res.end(data)
61 | }
62 | const type = /\.png$/.test(url) ? 'image/png' : 'image/svg+xml'
63 | res.setHeader('Content-Type', type)
64 | return res.end(data)
65 | })
66 | })
67 | .listen(8080, () => console.log('open http://localhost:8080/index.html in your browser'))
68 |
--------------------------------------------------------------------------------
/src/fragment.ts:
--------------------------------------------------------------------------------
1 | export const Fragment = (props: any) => {
2 | return props.children
3 | }
4 |
--------------------------------------------------------------------------------
/src/helpers.ts:
--------------------------------------------------------------------------------
1 | import { VERSION } from './version.js'
2 |
3 | /** Creates a new Task using setTimeout() */
4 | export const task = (task: () => void) => setTimeout(task, 0)
5 |
6 | export const nodeToString = (node: Node) => {
7 | const tmpNode = document.createElement('div')
8 | tmpNode.appendChild(node.cloneNode(true))
9 | return tmpNode.innerHTML
10 | }
11 |
12 | export const detectSSR = (): boolean => {
13 | // @ts-ignore
14 | const isDeno = typeof Deno !== 'undefined'
15 | const hasWindow = typeof window !== 'undefined' ? true : false
16 | return (typeof _nano !== 'undefined' && _nano.isSSR) || isDeno || !hasWindow
17 | }
18 |
19 | function isDescendant(desc: ParentNode | null, root: Node): boolean {
20 | // @ts-ignore
21 | return !!desc && (desc === root || isDescendant(desc.parentNode, root))
22 | }
23 |
24 | // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
25 | export const onNodeRemove = (element: HTMLElement, callback: () => void) => {
26 | let observer = new MutationObserver(mutationsList => {
27 | mutationsList.forEach(mutation => {
28 | mutation.removedNodes.forEach(removed => {
29 | if (isDescendant(element, removed)) {
30 | callback()
31 | if (observer) {
32 | // allow garbage collection
33 | observer.disconnect()
34 | // @ts-ignore
35 | observer = undefined
36 | }
37 | }
38 | })
39 | })
40 | })
41 | observer.observe(document, {
42 | childList: true,
43 | subtree: true
44 | })
45 | return observer
46 | }
47 |
48 | // https://stackoverflow.com/a/6234804
49 | export const escapeHtml = (unsafe: string) => {
50 | if (unsafe && typeof unsafe === 'string')
51 | return unsafe
52 | .replace(/&/g, '&')
53 | .replace(//g, '>')
55 | .replace(/"/g, '"')
56 | .replace(/'/g, ''')
57 | return unsafe
58 | }
59 |
60 | export const printVersion = () => {
61 | const info = `Powered by nano JSX v${VERSION}`
62 | console.log(
63 | `%c %c %c %c %c ${info} %c http://nanojsx.io`,
64 | 'background: #ff0000',
65 | 'background: #ffff00',
66 | 'background: #00ff00',
67 | 'background: #00ffff',
68 | 'color: #fff; background: #000000;',
69 | 'background: none'
70 | )
71 | }
72 |
--------------------------------------------------------------------------------
/src/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export { useState, getState, setState } from './useState.js'
2 |
--------------------------------------------------------------------------------
/src/hooks/useState.ts:
--------------------------------------------------------------------------------
1 | import { _state } from '../state.js'
2 |
3 | export const useState =
11 |
13 | )
14 | const html = render(Root)
15 | await wait()
16 | expect(nodeToString(html)).toBe('Hello
12 |Hello
23 |
24 | TITLE
25 |
26 |
27 |
29 | )
30 | render(Root, document.body)
31 | await wait()
32 | expect(nodeToString(document.head)).toBe(
33 | 'Hello
28 |Hello
32 |
34 | )
35 | initSSR('/')
36 | const html = renderSSR(() => Hello
33 |Hello
43 |
44 | TITLE
45 |
46 |
47 |
49 | )
50 | const html = renderSSR(Hello
48 |Hello
Hello
59 | const Root = (props: any) =>{props.children}
60 | const html = renderSSR(
61 | Hello
Hello
71 | const Root = (props: any) =>{props.children}
72 | const html = renderSSR(Hello
Hello
79 | const Root = (props: any) =>{props.children}
80 | const html = renderSSR(Hello
37 | invisible
38 | John Doe
39 |
40 |
41 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/test/browser/withStyles.test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
16 |
17 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/test/deno/deno.test.tsx:
--------------------------------------------------------------------------------
1 | import { h, Helmet, renderSSR, Component } from '../../deno_lib/mod.ts'
2 | import { assertEquals } from 'https://deno.land/std@0.115.1/testing/asserts.ts'
3 |
4 | Deno.test('should render without errors', () => {
5 | const comments = ['Comment One', 'Comment Two']
6 |
7 | class Comments extends Component {
8 | render() {
9 | return (
10 | -
11 | {this.props.comments.map((comment: any) => {
12 | return
- {comment} 13 | })} 14 |
21 |
22 | Nano JSX SSR
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
35 | )
36 |
37 | const ssr = renderSSR(Comments
31 |
32 |
34 | Comments
- Comment One
- Comment Two
65 |
67 | )
68 |
69 | // console.log('Listening on http://localhost:8080')
70 | // await listenAndServe(':8080', req => {
71 | // const url = new URL(req.url)
72 | // const name = url.searchParams.get('name') ?? 'world'
73 | // return ssr(() => Hello {props.name}!
66 |
40 |
42 | )
43 | }
44 | }
45 |
46 | const App = withStyles('CSS1', () => 'CSS2', { toString: () => 'CSS3' })(AppA)
47 |
48 | Nano.render(hello
41 |{this.props.children}
60 | }
61 | }
62 |
63 | const App = withStyles(`
64 | @import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto:100,300,400");
65 |
66 | body {
67 | font-family: 'Montserrat', 'Roboto', sans-serif;
68 | }
69 | `)(AppA)
70 |
71 | Nano.render(
72 | with styles
74 |