@reactful/create 0.0.57 → 0.0.58
Sign up to get free protection for your applications and to get access to all the features.
- package/index.js +38 -11
- package/package.json +7 -4
- package/testings/apis/auth/db.ts +0 -15
- package/testings/apis/auth/index.ts +0 -28
- package/testings/apis/hello.ts +0 -3
- package/testings/apis/quotes.ts +0 -16
- package/testings/apis/sub/index.ts +0 -3
- package/testings/apis/sub/sub.ts +0 -3
- package/testings/assets/SLIDEME.png +0 -0
- package/testings/assets/default.css +0 -91
- package/testings/assets/favicon.ico +0 -0
- package/testings/assets/icon.png +0 -0
- package/testings/assets/icon.svg +0 -6
- package/testings/assets/logo-144.png +0 -0
- package/testings/assets/logo-168.png +0 -0
- package/testings/assets/logo-192.png +0 -0
- package/testings/assets/logo-48.png +0 -0
- package/testings/assets/logo-512.png +0 -0
- package/testings/assets/logo-72.png +0 -0
- package/testings/assets/logo-96.png +0 -0
- package/testings/assets/manifest.json +0 -57
- package/testings/assets/markdown.css +0 -274
- package/testings/assets/robots.txt +0 -1
- package/testings/assets/system.css +0 -7
- package/testings/builds/forms/form.html +0 -48
- package/testings/builds/forms/index.html +0 -48
- package/testings/builds/profile/index.html +0 -54
- package/testings/bun.lockb +0 -0
- package/testings/components/header.tsx +0 -7
- package/testings/directives/index.ts +0 -1
- package/testings/directives/shown.ts +0 -6
- package/testings/index.html +0 -20
- package/testings/index.ts +0 -19
- package/testings/package.json +0 -22
- package/testings/routes/about.html +0 -13
- package/testings/routes/clock.tsx +0 -35
- package/testings/routes/counter.tsx +0 -21
- package/testings/routes/forms/form.css +0 -19
- package/testings/routes/forms/form.tsx +0 -51
- package/testings/routes/forms/index.tsx +0 -3
- package/testings/routes/hello.tsx +0 -62
- package/testings/routes/htmlx.html +0 -15
- package/testings/routes/index.md +0 -15
- package/testings/routes/login.tsx +0 -36
- package/testings/routes/profile/detail.css +0 -13
- package/testings/routes/profile/detail.tsx +0 -48
- package/testings/routes/profile/index.tsx +0 -14
- package/testings/routes/profile/profile.css +0 -8
- package/testings/routes/profile/tester.tsx +0 -11
- package/testings/routes/quotes.tsx +0 -25
- package/testings/routes/system.tsx +0 -23
- package/testings/tests/access.spec.ts +0 -29
- package/testings/tests/counter.spec.ts +0 -19
- package/testings/tests/form.spec.ts +0 -51
- package/testings/tests/hello.spec.ts +0 -25
- package/testings/tests/path.test.ts +0 -20
- package/testings/tsconfig.json +0 -24
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<meta name="description" content="Home page">
|
|
7
|
-
<meta name="theme-color" content="#333">
|
|
8
|
-
<link rel="stylesheet" href="/assets/markdown.css">
|
|
9
|
-
<link rel="stylesheet" href="/assets/default.css">
|
|
10
|
-
<link rel="manifest" href="/assets/manifest.json">
|
|
11
|
-
<title>Welcome</title>
|
|
12
|
-
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
|
13
|
-
<meta name='description' content='Home page' />
|
|
14
|
-
<meta name='theme-color' content='#333' />
|
|
15
|
-
<meta name='title' content='Welcome' />
|
|
16
|
-
<script src='/mnt/b/Repositorios/reactful/experiments/builds/shared.js'></script>
|
|
17
|
-
<script type='module' src='/mnt/b/Repositorios/reactful/experiments/builds/bundle.js'></script></head>
|
|
18
|
-
<body>
|
|
19
|
-
<div id='root'>
|
|
20
|
-
<jsx tag="jsx" uid="2" own="default"
|
|
21
|
-
src="/mnt/b/Repositorios/reactful/experiments/routes/forms/form.tsx" hidden
|
|
22
|
-
class="default">
|
|
23
|
-
<h1>Uncontrolled Components</h1>
|
|
24
|
-
<progress hidden>test...</progress>
|
|
25
|
-
<form cols="2" method="post" action="https://jsonplaceholder.typicode.com/posts1">
|
|
26
|
-
<label>Name<input id="name" bind="name" />
|
|
27
|
-
</label>
|
|
28
|
-
<label>Date<input type="date" bind="date" />
|
|
29
|
-
</label>
|
|
30
|
-
<label>Work<input pattern="dev|test" bind="work" />
|
|
31
|
-
</label>
|
|
32
|
-
<label>Mode<input bind="mode" />
|
|
33
|
-
</label>
|
|
34
|
-
<hr />
|
|
35
|
-
<hr />
|
|
36
|
-
<label>Accept?<input bind="term" type="checkbox" required />
|
|
37
|
-
</label>
|
|
38
|
-
<button>Submit</button>
|
|
39
|
-
</form>
|
|
40
|
-
<fieldset>
|
|
41
|
-
<legend>ERROR</legend>
|
|
42
|
-
<ul>
|
|
43
|
-
</ul>
|
|
44
|
-
</fieldset>
|
|
45
|
-
</jsx>
|
|
46
|
-
</div>
|
|
47
|
-
</body>
|
|
48
|
-
</html>
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<meta name="description" content="Home page">
|
|
7
|
-
<meta name="theme-color" content="#333">
|
|
8
|
-
<link rel="stylesheet" href="/assets/markdown.css">
|
|
9
|
-
<link rel="stylesheet" href="/assets/default.css">
|
|
10
|
-
<link rel="manifest" href="/assets/manifest.json">
|
|
11
|
-
<title>Welcome</title>
|
|
12
|
-
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
|
13
|
-
<meta name='description' content='Home page' />
|
|
14
|
-
<meta name='theme-color' content='#333' />
|
|
15
|
-
<meta name='title' content='Welcome' />
|
|
16
|
-
<script src='/mnt/b/Repositorios/reactful/experiments/builds/shared.js'></script>
|
|
17
|
-
<script type='module' src='/mnt/b/Repositorios/reactful/experiments/builds/bundle.js'></script></head>
|
|
18
|
-
<body>
|
|
19
|
-
<div id='root'>
|
|
20
|
-
<jsx tag="jsx" uid="2" own="default"
|
|
21
|
-
src="/mnt/b/Repositorios/reactful/experiments/routes/forms/form.tsx" hidden
|
|
22
|
-
class="default">
|
|
23
|
-
<h1>Uncontrolled Components</h1>
|
|
24
|
-
<progress hidden>test...</progress>
|
|
25
|
-
<form cols="2" method="post" action="https://jsonplaceholder.typicode.com/posts1">
|
|
26
|
-
<label>Name<input id="name" bind="name" />
|
|
27
|
-
</label>
|
|
28
|
-
<label>Date<input type="date" bind="date" />
|
|
29
|
-
</label>
|
|
30
|
-
<label>Work<input pattern="dev|test" bind="work" />
|
|
31
|
-
</label>
|
|
32
|
-
<label>Mode<input bind="mode" />
|
|
33
|
-
</label>
|
|
34
|
-
<hr />
|
|
35
|
-
<hr />
|
|
36
|
-
<label>Accept?<input bind="term" type="checkbox" required />
|
|
37
|
-
</label>
|
|
38
|
-
<button>Submit</button>
|
|
39
|
-
</form>
|
|
40
|
-
<fieldset>
|
|
41
|
-
<legend>ERROR</legend>
|
|
42
|
-
<ul>
|
|
43
|
-
</ul>
|
|
44
|
-
</fieldset>
|
|
45
|
-
</jsx>
|
|
46
|
-
</div>
|
|
47
|
-
</body>
|
|
48
|
-
</html>
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<meta name="description" content="Home page">
|
|
7
|
-
<meta name="theme-color" content="#333">
|
|
8
|
-
<link rel="stylesheet" href="/assets/markdown.css">
|
|
9
|
-
<link rel="stylesheet" href="/assets/default.css">
|
|
10
|
-
<link rel="manifest" href="/assets/manifest.json">
|
|
11
|
-
<title>Welcome</title>
|
|
12
|
-
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
|
13
|
-
<meta name='description' content='Home page' />
|
|
14
|
-
<meta name='theme-color' content='#333' />
|
|
15
|
-
<meta name='title' content='Welcome' />
|
|
16
|
-
<script src='/mnt/b/Repositorios/reactful/experiments/builds/shared.js'></script>
|
|
17
|
-
<script type='module' src='/mnt/b/Repositorios/reactful/experiments/builds/bundle.js'></script></head>
|
|
18
|
-
<body>
|
|
19
|
-
<div id='root'>
|
|
20
|
-
<h1 tag="h1" uid="3" class="default" style="color:#ffb300">Profile</h1>
|
|
21
|
-
<jsx tag="jsx" uid="12" own="default"
|
|
22
|
-
src="/mnt/b/Repositorios/reactful/experiments/routes/profile/detail.tsx" hidden
|
|
23
|
-
class="default">
|
|
24
|
-
<h3>Detail</h3>Parametric value = <b>
|
|
25
|
-
</b>
|
|
26
|
-
<hr />
|
|
27
|
-
<p>modular CSS keep original color</p>
|
|
28
|
-
<fieldset>
|
|
29
|
-
<legend>Mode</legend>
|
|
30
|
-
<section>
|
|
31
|
-
<button link="./developer">developer</button>
|
|
32
|
-
<button link="./manager">manager</button>
|
|
33
|
-
<button link="./tester">tester(component)</button>
|
|
34
|
-
</section>
|
|
35
|
-
<hr />
|
|
36
|
-
<section route="./developer">
|
|
37
|
-
<b>DEVELOPER</b> is Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
38
|
-
Aspernatur similique ipsa, molestiae numquam laudantium quod, aliquid soluta
|
|
39
|
-
cumque placeat saepe mollitia sint consectetur labore consequatur pariatur
|
|
40
|
-
praesentium animi. Obcaecati, nihil?</section>
|
|
41
|
-
<section route="./manager">
|
|
42
|
-
<b>MANAGER</b> is Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
43
|
-
Aspernatur similique ipsa, molestiae numquam laudantium quod, aliquid soluta
|
|
44
|
-
cumque placeat saepe mollitia sint consectetur labore consequatur pariatur
|
|
45
|
-
praesentium animi. Obcaecati, nihil?</section>
|
|
46
|
-
<div>
|
|
47
|
-
</div>
|
|
48
|
-
</fieldset>
|
|
49
|
-
</jsx>
|
|
50
|
-
<hr tag="hr" uid="8" class="default" />
|
|
51
|
-
<p tag="p" uid="10" class="default" style="color:red">modular CSS chainging to red</p>
|
|
52
|
-
</div>
|
|
53
|
-
</body>
|
|
54
|
-
</html>
|
package/testings/bun.lockb
DELETED
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './shown'
|
package/testings/index.html
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
|
|
8
|
-
<meta name="description" content="Home page" >
|
|
9
|
-
<meta name="theme-color" content="#333"/>
|
|
10
|
-
|
|
11
|
-
<link rel="stylesheet" href="/assets/markdown.css">
|
|
12
|
-
<link rel="stylesheet" href="/assets/default.css" />
|
|
13
|
-
<link rel="manifest" href="/assets/manifest.json" />
|
|
14
|
-
|
|
15
|
-
<title>Welcome</title>
|
|
16
|
-
</head>
|
|
17
|
-
<body>
|
|
18
|
-
<div id="root"></div>
|
|
19
|
-
</body>
|
|
20
|
-
</html>
|
package/testings/index.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React from "react"
|
|
2
|
-
import { shown } from './directives'
|
|
3
|
-
import { server } from "@reactful/server"
|
|
4
|
-
|
|
5
|
-
const storage = { name: "ok" }
|
|
6
|
-
|
|
7
|
-
await server("/routes", { failure, storage })
|
|
8
|
-
.inject(shown)
|
|
9
|
-
.render("#root")
|
|
10
|
-
|
|
11
|
-
function failure(status, errors) {
|
|
12
|
-
const children: any[] = errors.map((x, i) =>
|
|
13
|
-
React.createElement('li', { key:i }, x))
|
|
14
|
-
|
|
15
|
-
return React.createElement('div', {}, [
|
|
16
|
-
React.createElement('h1', {}, status),
|
|
17
|
-
React.createElement('ul', {}, children),
|
|
18
|
-
])
|
|
19
|
-
}
|
package/testings/package.json
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"type": "module",
|
|
3
|
-
"name": "testings",
|
|
4
|
-
"module": "index.ts",
|
|
5
|
-
"scripts": {
|
|
6
|
-
"start": "bun --hot run index.ts",
|
|
7
|
-
"build": "rm -rf tsconfig.tsbuildinfo; bunx tsc -p tsconfig.json",
|
|
8
|
-
"clear": "rm -rf node_modules package-lock.json bun.lockb; bun i; bun run build"
|
|
9
|
-
},
|
|
10
|
-
"dependencies": {
|
|
11
|
-
"react": "^18.2.0",
|
|
12
|
-
"react-dom": "^18.2.0",
|
|
13
|
-
"@reactful/extensions": "latest",
|
|
14
|
-
"@reactful/server": "latest",
|
|
15
|
-
"@reactful/web": "latest"
|
|
16
|
-
},
|
|
17
|
-
"devDependencies": {
|
|
18
|
-
"bun-types": "^1.0.20",
|
|
19
|
-
"typescript": "^5.3.3",
|
|
20
|
-
"@types/react": "^18.2.57"
|
|
21
|
-
}
|
|
22
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<head>
|
|
2
|
-
<title>About</title>
|
|
3
|
-
<meta name="description" content="About page">
|
|
4
|
-
</head>
|
|
5
|
-
<body>
|
|
6
|
-
<h1>About</h1>
|
|
7
|
-
<p>
|
|
8
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
9
|
-
Adipisci id eaque saepe ab numquam, nisi minus atque obcaecati,
|
|
10
|
-
dignissimos facere accusamus nihil ipsam repudiandae praesentium,
|
|
11
|
-
quia animi perspiciatis architecto fuga?
|
|
12
|
-
</p>
|
|
13
|
-
</body>
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import React, { Suspense } from 'react'
|
|
2
|
-
import { server, seo } from '@reactful/web'
|
|
3
|
-
|
|
4
|
-
const loading = <h3>Loading content...</h3>
|
|
5
|
-
const address = "https://timeapi.io/api/Time/current/zone?timeZone=Europe/Amsterdam"
|
|
6
|
-
|
|
7
|
-
//@ts-ignore
|
|
8
|
-
@server("dynamic")
|
|
9
|
-
@seo('Time Zone', 'Time zone clock...')
|
|
10
|
-
export default function(props: any) {
|
|
11
|
-
return <Suspense fallback={loading}>
|
|
12
|
-
<TimeZone />
|
|
13
|
-
</Suspense>
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
async function TimeZone() {
|
|
17
|
-
const response = await fetch(address)
|
|
18
|
-
const { year, month, day, hour, minute, seconds } = await response.json()
|
|
19
|
-
const time = `${hour}:${minute}:${seconds}`
|
|
20
|
-
const date = `${year}-${month}-${day}`
|
|
21
|
-
|
|
22
|
-
return <React.Fragment>
|
|
23
|
-
<h1>World Clock</h1>
|
|
24
|
-
<h2>Europe/Amistedan timezone</h2>
|
|
25
|
-
<h3 style={{color:'yellow'}}> {date} {time} </h3>
|
|
26
|
-
<Suspense fallback={loading}>
|
|
27
|
-
<InnerAsyncComponent />
|
|
28
|
-
</Suspense>
|
|
29
|
-
</React.Fragment>
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
async function InnerAsyncComponent() {
|
|
33
|
-
await new Promise(promise => setTimeout(promise, 1000))
|
|
34
|
-
return <code><mark>I'm a inner subcomponent !!!</mark></code>
|
|
35
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { seo, client } from '@reactful/web'
|
|
3
|
-
|
|
4
|
-
//@ts-ignore
|
|
5
|
-
@seo('Counter', '...')
|
|
6
|
-
export default (props: any) => <>
|
|
7
|
-
<h1>Counter</h1>
|
|
8
|
-
<CountButton />
|
|
9
|
-
|
|
10
|
-
<h6 shown={false}>DONT SHOW ME!</h6>
|
|
11
|
-
</>
|
|
12
|
-
|
|
13
|
-
//@ts-ignore
|
|
14
|
-
@client(true)
|
|
15
|
-
export function CountButton(props: any, feeds: any) {
|
|
16
|
-
function onClick() { props.count ||= 0; props.count++ }
|
|
17
|
-
|
|
18
|
-
return <button style={{ padding:'20px' }} onClick={onClick}>
|
|
19
|
-
COUNTED: <b>{ props.count || 0 }</b>
|
|
20
|
-
</button>
|
|
21
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/* form {
|
|
2
|
-
gap: 20px;
|
|
3
|
-
display: grid;
|
|
4
|
-
grid-template-columns: repeat(2, 1fr);
|
|
5
|
-
} */
|
|
6
|
-
|
|
7
|
-
code {
|
|
8
|
-
padding: 10px;
|
|
9
|
-
display: block;
|
|
10
|
-
background: silver;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
progress {
|
|
14
|
-
width: 100%;
|
|
15
|
-
height: 30px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
progress[value]::-webkit-progress-bar { border-radius: 0; }
|
|
19
|
-
progress[value]::-webkit-progress-value { border-radius: 0; }
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import React from "react"
|
|
2
|
-
import { client } from "@reactful/web"
|
|
3
|
-
import '@reactful/commons'
|
|
4
|
-
import "./form.css"
|
|
5
|
-
|
|
6
|
-
//@ts-ignore
|
|
7
|
-
@client(true)
|
|
8
|
-
export default (props, { fails: errors, await: awaits }: Feeds ) => <>
|
|
9
|
-
<h1>Uncontrolled Components</h1>
|
|
10
|
-
<progress hidden={!awaits} >test...</progress>
|
|
11
|
-
|
|
12
|
-
<form grid cols={2} method="post" data={props.user}
|
|
13
|
-
action="https://jsonplaceholder.typicode.com/posts1"
|
|
14
|
-
onValidate={onValidate} onSubmit={e => onSubmit(e)}>
|
|
15
|
-
|
|
16
|
-
<label>Name<input id="name" bind="name" /></label>
|
|
17
|
-
<label>Date<input type="date" bind="date" /></label>
|
|
18
|
-
<label>Work<input pattern="dev|test" bind="work" /></label>
|
|
19
|
-
<label>Mode<input validate={modeValidate} bind="mode" /></label>
|
|
20
|
-
|
|
21
|
-
<hr/><hr/>
|
|
22
|
-
<label>Accept?<input bind="term" type="checkbox" required /></label>
|
|
23
|
-
<button>Submit</button>
|
|
24
|
-
</form>
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<fieldset shown={!!errors?.length}>
|
|
28
|
-
<legend>ERROR</legend>
|
|
29
|
-
<ul>{ errors?.map(x => <li>{ x.error }</li>) }</ul>
|
|
30
|
-
</fieldset>
|
|
31
|
-
</>
|
|
32
|
-
|
|
33
|
-
function modeValidate(value: string) {
|
|
34
|
-
console.log('modeValidate', value)
|
|
35
|
-
if (!value) return 'Mode is required!'
|
|
36
|
-
if (value.match(/\d+/)) return 'Mode is non-numerical!'
|
|
37
|
-
return ''
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
function onSubmit(e) {
|
|
41
|
-
// after submited validation (feeds)
|
|
42
|
-
console.log('after form submit', e)
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
async function onValidate(errors: Invalid[]) {
|
|
47
|
-
// add some async custom invalidations
|
|
48
|
-
// ex.: errors.push({field:'*', error:'some error', value:''})
|
|
49
|
-
|
|
50
|
-
console.warn(errors)
|
|
51
|
-
}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { seo, client, useStore, state } from '@reactful/web'
|
|
3
|
-
import { Header } from '../components/header'
|
|
4
|
-
|
|
5
|
-
const orbital1 = useStore({ value:0 })
|
|
6
|
-
const orbital2 = useStore({ value:1 })
|
|
7
|
-
|
|
8
|
-
//@ts-ignore
|
|
9
|
-
@client(true)
|
|
10
|
-
@state(orbital1)
|
|
11
|
-
@state(orbital2)
|
|
12
|
-
@seo('Hello', 'Hello forms...')
|
|
13
|
-
export default function Hello(props, { store }: Feeds) {
|
|
14
|
-
if (globalThis.document) globalThis.props = props
|
|
15
|
-
|
|
16
|
-
return <>
|
|
17
|
-
<Header>Hello Forms</Header>
|
|
18
|
-
<main grid gaps='0 10px' cols={1}>
|
|
19
|
-
<label>
|
|
20
|
-
<b>LOCAL state </b> <code>function(props)</code><br/>
|
|
21
|
-
<input id='1' data={props} bind="value" placeholder="{props}" />
|
|
22
|
-
<input id='1.1' bind="value" placeholder="default" />
|
|
23
|
-
<SubLocal id='1.1.1' placeholder="inner" />
|
|
24
|
-
</label>
|
|
25
|
-
|
|
26
|
-
<label>
|
|
27
|
-
<b>GLOBAL state</b> <code>function(props, {'{ store }'})</code><br/>
|
|
28
|
-
<input id='2' data={store} bind="value" placeholder="outer" />
|
|
29
|
-
<SubGlobal id='2.1' placeholder='inner' />
|
|
30
|
-
</label>
|
|
31
|
-
|
|
32
|
-
<label>
|
|
33
|
-
<b>ORBITAL state</b> <code>useStore(...) + @state(...)</code><br/>
|
|
34
|
-
<input id='3' data={orbital1} bind="value" placeholder="outer" />
|
|
35
|
-
<SubOrbital id='3.1' placeholder='inner' />
|
|
36
|
-
<input id='3.2' data={orbital2} bind="value" placeholder="other" /> = {orbital2.value }
|
|
37
|
-
</label>
|
|
38
|
-
</main>
|
|
39
|
-
<br />
|
|
40
|
-
<hr />
|
|
41
|
-
<code>
|
|
42
|
-
<strong>local</strong>: <label id='l1'>{ props.value }</label><br />
|
|
43
|
-
<strong>global</strong>: <label id='l2'>{ store.value }</label><br />
|
|
44
|
-
<strong>orbital</strong>: <label id='l3'>{ orbital1.value }</label>
|
|
45
|
-
</code>
|
|
46
|
-
</>
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
function SubGlobal(props, { store }) {
|
|
51
|
-
return <input {...props} data={store} bind='value' />
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
function SubLocal(props) {
|
|
55
|
-
return <><input {...props} data={props} bind='value' /><label> = {props.value}</label></>
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
//@ts-ignore
|
|
59
|
-
@state(orbital1)
|
|
60
|
-
function SubOrbital(props) {
|
|
61
|
-
return <input {...props} data={orbital1} bind='value' />
|
|
62
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
<head>
|
|
2
|
-
<title>Sample</title>
|
|
3
|
-
<meta name="description" content="Sample page">
|
|
4
|
-
<link type="component" href="../components/header.tsx" rel="Header" />
|
|
5
|
-
</head>
|
|
6
|
-
<body>
|
|
7
|
-
<!-- no {interpolation} -->
|
|
8
|
-
<Header title="HTML-X" />
|
|
9
|
-
<p>
|
|
10
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
11
|
-
Similique eum quaerat nesciunt est molestias accusantium
|
|
12
|
-
aut sit odit, vero voluptate iure vel aperiam modi libero
|
|
13
|
-
in praesentium nam obcaecati error!
|
|
14
|
-
</p>
|
|
15
|
-
</body>
|
package/testings/routes/index.md
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
# Welcome
|
|
2
|
-
> with markdown (powered by marked)
|
|
3
|
-
|
|
4
|
-
| | |
|
|
5
|
-
| ----------------------: | ----------------------------------------------- |
|
|
6
|
-
| [About](/about) | Static generation (default) |
|
|
7
|
-
| [Clock](/clock) | Dynamic generation (with lazy) |
|
|
8
|
-
| [HTML-X](/htmlx) | HTML with JSX using link[type='component'] |
|
|
9
|
-
| [System](/system) | Server component |
|
|
10
|
-
| [Quotes](/quotes) | Periodic genreation |
|
|
11
|
-
| [Counter](/counter) | Client component |
|
|
12
|
-
| [Hello](/hello) | Stateful object + data bind props |
|
|
13
|
-
| [Forms](/forms) | reactful forms + validation API + server action |
|
|
14
|
-
| [Login](/login) | reactful forms server action authentication |
|
|
15
|
-
| [Profile](/profile/123) | Parametric (dynamic) routes with modular CSS |
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
// @ts-ignore: 1206
|
|
2
|
-
|
|
3
|
-
import React from 'react'
|
|
4
|
-
import { client } from '@reactful/web'
|
|
5
|
-
|
|
6
|
-
//@ts-ignore
|
|
7
|
-
@client(true)
|
|
8
|
-
export default (props, feeds: Feeds) => <>
|
|
9
|
-
<h1>Login</h1>
|
|
10
|
-
|
|
11
|
-
<progress hidden={!feeds.await}>loading...</progress>
|
|
12
|
-
|
|
13
|
-
<form method="POST" data={props.user}
|
|
14
|
-
action="http://localhost:3000/api/auth"
|
|
15
|
-
bearer="access_token">
|
|
16
|
-
|
|
17
|
-
<section grid cols={1}>
|
|
18
|
-
<label>UserName<input bind="username" /></label>
|
|
19
|
-
<label>PassWord<input type="password" bind="password" /></label>
|
|
20
|
-
</section>
|
|
21
|
-
|
|
22
|
-
<button>Submit</button>
|
|
23
|
-
</form>
|
|
24
|
-
|
|
25
|
-
<fieldset shown={!!feeds.fails?.length}>
|
|
26
|
-
<legend>ERROR</legend>
|
|
27
|
-
<ul>{ feeds.fails?.map((x,i) => <li key={i}>{ x.error }</li>) }</ul>
|
|
28
|
-
</fieldset>
|
|
29
|
-
|
|
30
|
-
<br />
|
|
31
|
-
|
|
32
|
-
<fieldset style={{ wordBreak: 'break-all' }}>
|
|
33
|
-
<legend>token</legend>
|
|
34
|
-
{ sessionStorage.getItem("token") }
|
|
35
|
-
</fieldset>
|
|
36
|
-
</>
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { client } from '@reactful/web'
|
|
3
|
-
import '@reactful/extensions'
|
|
4
|
-
import './detail.css'
|
|
5
|
-
|
|
6
|
-
const Tester = import('./tester').asLazyComponent("Tester")
|
|
7
|
-
|
|
8
|
-
//@ts-ignore
|
|
9
|
-
@client(true)
|
|
10
|
-
export function Detail(_, feeds: Feeds) {
|
|
11
|
-
return <>
|
|
12
|
-
<h3>Detail</h3>
|
|
13
|
-
Parametric value = <b>{ feeds.param.id }</b>
|
|
14
|
-
|
|
15
|
-
<hr />
|
|
16
|
-
<p>modular CSS keep original color</p>
|
|
17
|
-
|
|
18
|
-
<fieldset>
|
|
19
|
-
<legend>Mode</legend>
|
|
20
|
-
|
|
21
|
-
<section>
|
|
22
|
-
<button link='./developer'>developer</button>
|
|
23
|
-
<button link='./manager'>manager</button>
|
|
24
|
-
<button link='./tester'>tester (component)</button>
|
|
25
|
-
</section>
|
|
26
|
-
|
|
27
|
-
<hr/>
|
|
28
|
-
|
|
29
|
-
<section route='./developer'>
|
|
30
|
-
<b>DEVELOPER</b> is Lorem ipsum dolor sit amet consectetur
|
|
31
|
-
adipisicing elit. Aspernatur similique ipsa, molestiae
|
|
32
|
-
numquam laudantium quod, aliquid soluta cumque placeat
|
|
33
|
-
saepe mollitia sint consectetur labore consequatur
|
|
34
|
-
pariatur praesentium animi. Obcaecati, nihil?
|
|
35
|
-
</section>
|
|
36
|
-
|
|
37
|
-
<section route='./manager'>
|
|
38
|
-
<b>MANAGER</b> is Lorem ipsum dolor sit amet consectetur
|
|
39
|
-
adipisicing elit. Aspernatur similique ipsa, molestiae
|
|
40
|
-
numquam laudantium quod, aliquid soluta cumque placeat
|
|
41
|
-
saepe mollitia sint consectetur labore consequatur
|
|
42
|
-
pariatur praesentium animi. Obcaecati, nihil?
|
|
43
|
-
</section>
|
|
44
|
-
|
|
45
|
-
<Tester route='./tester' />
|
|
46
|
-
</fieldset>
|
|
47
|
-
</>
|
|
48
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { Detail } from './detail'
|
|
3
|
-
import { seo, route } from '@reactful/web'
|
|
4
|
-
import './profile.css'
|
|
5
|
-
|
|
6
|
-
//@ts-ignore
|
|
7
|
-
@route("/profile/:id")
|
|
8
|
-
@seo('Profile', 'Profile description')
|
|
9
|
-
export default () => <>
|
|
10
|
-
<h1>Profile</h1>
|
|
11
|
-
<Detail />
|
|
12
|
-
<hr/>
|
|
13
|
-
<p>modular CSS chainging to red</p>
|
|
14
|
-
</>
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from "react"
|
|
2
|
-
|
|
3
|
-
export function Tester() {
|
|
4
|
-
return <section route='./manager'>
|
|
5
|
-
<b>TESTER</b> is Lorem ipsum dolor sit amet consectetur
|
|
6
|
-
adipisicing elit. Aspernatur similique ipsa, molestiae
|
|
7
|
-
numquam laudantium quod, aliquid soluta cumque placeat
|
|
8
|
-
saepe mollitia sint consectetur labore consequatur
|
|
9
|
-
pariatur praesentium animi. Obcaecati, nihil?
|
|
10
|
-
</section>
|
|
11
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { seo, server, error } from '@reactful/web'
|
|
3
|
-
|
|
4
|
-
//@ts-ignore
|
|
5
|
-
@server("periodic", "30min")
|
|
6
|
-
@error(specificErrorComponent)
|
|
7
|
-
@seo('Quotes', 'Philosophy quotes...')
|
|
8
|
-
export default async function Quotes(props: any) {
|
|
9
|
-
const url = "http://localhost:3000/api/quotes"
|
|
10
|
-
const txt = await fetch(url).then(x => x.text())
|
|
11
|
-
|
|
12
|
-
return <>
|
|
13
|
-
<h1>Philosophy quote of the day</h1>
|
|
14
|
-
<blockquote style={{zoom:1.1}}>{txt}</blockquote>
|
|
15
|
-
<hr /><code>it will be regenerated in each 30min (press F5 to check)</code>
|
|
16
|
-
</>
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
function specificErrorComponent(status: number, errors: string[]) {
|
|
20
|
-
return <>
|
|
21
|
-
<h1>My custom error component</h1>
|
|
22
|
-
<p> { errors.join(', ') } </p><hr/>
|
|
23
|
-
<code>it will be regenerated in each 30min (press F5 to check)</code>
|
|
24
|
-
</>
|
|
25
|
-
}
|