@reactful/create 0.0.56 → 0.0.58
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +41 -12
- 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
|
-
}
|