@reactful/create 1.2.1 → 1.2.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (73) hide show
  1. package/README.md +7 -7
  2. package/commons/package.json +21 -21
  3. package/commons/tsconfig.json +24 -24
  4. package/index.js +148 -148
  5. package/package.json +31 -31
  6. package/templates/minimal/components/hello.tsx +8 -8
  7. package/templates/minimal/components/icon.tsx +11 -0
  8. package/templates/minimal/components/index.ts +2 -1
  9. package/templates/minimal/routes/index.tsx +7 -6
  10. package/templates/sampling/apis/auth/db.ts +14 -14
  11. package/templates/sampling/apis/auth/index.ts +27 -27
  12. package/templates/sampling/apis/hello.ts +2 -2
  13. package/templates/sampling/apis/quotes.ts +15 -15
  14. package/templates/sampling/apis/sub/index.ts +2 -2
  15. package/templates/sampling/apis/sub/sub.ts +2 -2
  16. package/templates/sampling/assets/bootstrap-icons.css +5 -0
  17. package/templates/sampling/assets/default.css +94 -91
  18. package/templates/sampling/assets/fonts/bootstrap-icons.woff +0 -0
  19. package/templates/sampling/assets/fonts/bootstrap-icons.woff2 +0 -0
  20. package/templates/sampling/assets/icon.svg +6 -6
  21. package/templates/sampling/assets/manifest.json +56 -56
  22. package/templates/sampling/assets/markdown.css +273 -273
  23. package/templates/sampling/assets/robots.txt +1 -1
  24. package/templates/sampling/assets/system.css +6 -6
  25. package/templates/sampling/builds/about.html +29 -26
  26. package/templates/sampling/builds/bundle.js +34763 -13116
  27. package/templates/sampling/builds/bundle.ts +20 -25
  28. package/templates/sampling/builds/clock.html +29 -28
  29. package/templates/sampling/builds/counter.html +30 -29
  30. package/templates/sampling/builds/forms/form.html +48 -47
  31. package/templates/sampling/builds/forms/index.html +48 -47
  32. package/templates/sampling/builds/hello.html +61 -59
  33. package/templates/sampling/builds/htmlx.html +26 -23
  34. package/templates/sampling/builds/htmlx.tsx +12 -12
  35. package/templates/sampling/builds/index.html +98 -97
  36. package/templates/sampling/builds/login.html +47 -44
  37. package/templates/sampling/builds/profile/index.html +54 -53
  38. package/templates/sampling/builds/quotes.html +26 -25
  39. package/templates/sampling/builds/shared.js +77 -76
  40. package/templates/sampling/builds/system.html +27 -26
  41. package/templates/sampling/components/header.tsx +6 -6
  42. package/templates/sampling/components/hello.tsx +9 -0
  43. package/templates/sampling/components/icon.tsx +11 -0
  44. package/templates/sampling/components/index.ts +3 -0
  45. package/templates/sampling/index.html +20 -19
  46. package/templates/sampling/index.ts +18 -18
  47. package/templates/sampling/routes/about.html +12 -12
  48. package/templates/sampling/routes/clock.tsx +36 -35
  49. package/templates/sampling/routes/forms/form.tsx +50 -50
  50. package/templates/sampling/routes/hello.tsx +58 -61
  51. package/templates/sampling/routes/htmlx.html +14 -14
  52. package/templates/sampling/routes/index.md +15 -15
  53. package/templates/sampling/routes/login.tsx +35 -35
  54. package/templates/sampling/routes/profile/detail.css +12 -12
  55. package/templates/sampling/routes/profile/detail.tsx +47 -47
  56. package/templates/sampling/routes/profile/index.tsx +13 -13
  57. package/templates/sampling/routes/profile/profile.css +8 -8
  58. package/templates/sampling/routes/profile/tester.tsx +10 -10
  59. package/templates/sampling/routes/system.tsx +1 -0
  60. package/templates/sampling/tests/access.spec.ts +29 -29
  61. package/templates/sampling/tests/counter.spec.ts +18 -18
  62. package/templates/sampling/tests/form.spec.ts +50 -50
  63. package/templates/sampling/tests/hello.spec.ts +24 -24
  64. package/templates/sampling/tests/path.test.ts +19 -19
  65. package/vscode/launch.json +8 -8
  66. package/templates/sampling/builds/client.ts +0 -1
  67. /package/templates/sampling/assets/{logo-144.png → logos/logo-144.png} +0 -0
  68. /package/templates/sampling/assets/{logo-168.png → logos/logo-168.png} +0 -0
  69. /package/templates/sampling/assets/{logo-192.png → logos/logo-192.png} +0 -0
  70. /package/templates/sampling/assets/{logo-48.png → logos/logo-48.png} +0 -0
  71. /package/templates/sampling/assets/{logo-512.png → logos/logo-512.png} +0 -0
  72. /package/templates/sampling/assets/{logo-72.png → logos/logo-72.png} +0 -0
  73. /package/templates/sampling/assets/{logo-96.png → logos/logo-96.png} +0 -0
@@ -1,51 +1,51 @@
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)
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
51
  }
@@ -1,62 +1,59 @@
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' />
1
+ import React from 'react'
2
+ import { seo, client, useStore } from '@reactful/web'
3
+ import { Header } from '../components/header'
4
+ import '@reactful/extensions'
5
+
6
+ const state1 = useStore({ value:11 })
7
+ const state2 = useStore({ value:99 })
8
+ const styles = { textAlign: 'right' } as any
9
+
10
+ const SubGlobal = (props, { store }) => <input {...props} data={store} bind='value' />
11
+
12
+ const SubLocal= props => <>
13
+ <input {...props} style={styles} data={props} bind='value' />
14
+ <label> = {props.value}</label>
15
+ </>
16
+
17
+ //@ts-ignore
18
+ // @client(true, state1)
19
+ // TODO: inner component with same orbital state doesn't work ???
20
+ const SubOrbital = props => <input {...props} data={state1} bind='value' />
21
+
22
+ //@ts-ignore
23
+ @client(true, state1, state2)
24
+ @seo('Hello', 'Hello forms...')
25
+ export default function Hello(props, { store }: Feeds) {
26
+ if (globalThis.document) globalThis.props = props
27
+
28
+ return <>
29
+ <Header>Hello Forms</Header>
30
+ <main grid gaps='0 10px' cols={1} className='hello'>
31
+ <label>
32
+ <b>LOCAL state </b> <code>function(props)</code><br/>
33
+ <input id='1' data={props} bind="value" placeholder="{props}" />
34
+ <input id='1.1' bind="value" placeholder="default" />
35
+ <SubLocal id='1.1.1' placeholder="inner" />
36
+ </label>
37
+
38
+ <label>
39
+ <b>GLOBAL state</b> <code>function(props, {'{ store }'})</code><br/>
40
+ <input id='2' data={store} bind="value" placeholder="outer" />
41
+ <SubGlobal id='2.1' placeholder='inner' />
42
+ </label>
43
+
44
+ <label>
45
+ <b>ORBITAL state</b> <code>useStore(...) + @client(true, ...)</code><br/>
46
+ <input id='3' data={state1} bind="value" placeholder="outer" />
47
+ <SubOrbital id='3.1' placeholder='inner' />
48
+ <input id='3.2' style={styles} data={state2} bind="value" placeholder="other" /> = {state2.value}
49
+ </label>
50
+ </main>
51
+ <br />
52
+ <hr />
53
+ <code>
54
+ <strong>local</strong>: <label id='l1'>{ props.value }</label><br />
55
+ <strong>global</strong>: <label id='l2'>{ store.value }</label><br />
56
+ <strong>orbital</strong>: <label id='l3'>{ state1.value }</label>
57
+ </code>
58
+ </>
62
59
  }
@@ -1,15 +1,15 @@
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>
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
15
  </body>
@@ -1,15 +1,15 @@
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
+ # 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 + RESTful action |
14
+ | [Login](/login) | reactful forms RESTful action authentication |
15
+ | [Profile](/profile/123) | Parametric (dynamic) routes with modular CSS |
@@ -1,36 +1,36 @@
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>
1
+ import React from 'react'
2
+ import { client } from '@reactful/web'
3
+ import { Icon } from '../components'
4
+ import '@reactful/extensions'
5
+
6
+ //@ts-ignore
7
+ @client(true)
8
+ export default (props, feeds: Feeds) => <>
9
+ <h1><Icon id='user' />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
36
  </>
@@ -1,13 +1,13 @@
1
- h1 {
2
- color: dimgrey;
3
- font-size: 1.7rem;
4
- }
5
-
6
- button {
7
- padding: 10px 20px;
8
- }
9
-
10
- button.routed {
11
- background: wheat;
12
- font-weight: bolder;
1
+ h1 {
2
+ color: dimgrey;
3
+ font-size: 1.7rem;
4
+ }
5
+
6
+ button {
7
+ padding: 10px 20px;
8
+ }
9
+
10
+ button.routed {
11
+ background: wheat;
12
+ font-weight: bolder;
13
13
  }
@@ -1,48 +1,48 @@
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
- </>
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
48
  }
@@ -1,14 +1,14 @@
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>
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
14
  </>
@@ -1,8 +1,8 @@
1
- h1 {
2
- color: #ffb300;
3
- }
4
-
5
- p {
6
- color:red;
7
- }
8
-
1
+ h1 {
2
+ color: #ffb300;
3
+ }
4
+
5
+ p {
6
+ color:red;
7
+ }
8
+
@@ -1,11 +1,11 @@
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>
1
+ import React from "react"
2
+
3
+ export function Tester() {
4
+ return <section>
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
11
  }
@@ -1,6 +1,7 @@
1
1
  import OS from "os"
2
2
  import React from "react"
3
3
  import { seo, style } from '@reactful/web'
4
+ import '@reactful/extensions'
4
5
 
5
6
  const metatags: MetaTags = {
6
7
  charset:"UTF-16",
@@ -1,29 +1,29 @@
1
- import { test, expect } from '@playwright/test'
2
-
3
- const cases = [
4
- ['/about', 'About'],
5
- ['/clock', 'World Clock'],
6
- ['/htmlx', 'HTML-X'],
7
- ['/system', 'Server OS'],
8
- ['/quotes', 'My custom error component', 'Philosophy quote of the day'],
9
- ['/counter', 'Counter'],
10
- ['/hello', 'Hello Forms'],
11
- ['/forms', 'Uncontrolled Components'],
12
- ['/profile/123', 'Profile'],
13
- ]
14
-
15
- cases.forEach(function(scenario) {
16
- const [ href, head, that ] = scenario
17
-
18
- test(href, async ({ page }) => {
19
- await page.goto('http://localhost:3000/')
20
- await page.goto(href)
21
- await page.waitForTimeout(333)
22
- await page.waitForURL(`http://localhost:3000${href}`);
23
-
24
- const h1 = await page.locator(`h1`).innerHTML()
25
- const ok = [head,that].includes(h1)
26
-
27
- if (!ok) expect(h1).toBe(that || head)
28
- })
29
- })
1
+ import { test, expect } from '@playwright/test'
2
+
3
+ const cases = [
4
+ ['/about', 'About'],
5
+ ['/clock', 'World Clock'],
6
+ ['/htmlx', 'HTML-X'],
7
+ ['/system', 'Server OS'],
8
+ ['/quotes', 'My custom error component', 'Philosophy quote of the day'],
9
+ ['/counter', 'Counter'],
10
+ ['/hello', 'Hello Forms'],
11
+ ['/forms', 'Uncontrolled Components'],
12
+ ['/profile/123', 'Profile'],
13
+ ]
14
+
15
+ cases.forEach(function(scenario) {
16
+ const [ href, head, that ] = scenario
17
+
18
+ test(href, async ({ page }) => {
19
+ await page.goto('http://localhost:3000/')
20
+ await page.goto(href)
21
+ await page.waitForTimeout(333)
22
+ await page.waitForURL(`http://localhost:3000${href}`);
23
+
24
+ const h1 = await page.locator(`h1`).innerHTML()
25
+ const ok = [head,that].includes(h1)
26
+
27
+ if (!ok) expect(h1).toBe(that || head)
28
+ })
29
+ })