@reactful/create 1.2.1 → 1.2.3

package/templates/sampling/routes/forms/form.tsx

@@ -1,51 +1,51 @@
-import React from "react"
-import { client } from "@reactful/web"
-import '@reactful/commons'
-import "./form.css"
-
-//@ts-ignore
-@client(true)
-export default (props, { fails: errors, await: awaits }: Feeds ) => <>
-   <h1>Uncontrolled Components</h1>   
-   <progress hidden={!awaits} >test...</progress>
-
-   <form grid cols={2} method="post" data={props.user}
-      action="https://jsonplaceholder.typicode.com/posts1"
-      onValidate={onValidate} onSubmit={e => onSubmit(e)}>
-
-      <label>Name<input id="name" bind="name" /></label>
-      <label>Date<input type="date" bind="date" /></label>
-      <label>Work<input pattern="dev|test" bind="work" /></label>
-      <label>Mode<input validate={modeValidate} bind="mode" /></label>
-
-      <hr/><hr/>
-      <label>Accept?<input bind="term" type="checkbox" required /></label>      
-      <button>Submit</button>
-   </form>
-
-
-   <fieldset shown={!!errors?.length}>
-      <legend>ERROR</legend>
-      <ul>{ errors?.map(x => <li>{ x.error }</li>) }</ul>
-   </fieldset>
-</>
-
-function modeValidate(value: string) {
-   console.log('modeValidate', value)
-   if (!value) return 'Mode is required!'
-   if (value.match(/\d+/)) return 'Mode is non-numerical!'
-   return ''
-}
-
-function onSubmit(e) {
-   // after submited validation (feeds)
-   console.log('after form submit', e)
-
-}
-
-async function onValidate(errors: Invalid[]) {
-   // add some async custom invalidations
-   // ex.: errors.push({field:'*', error:'some error', value:''})
-
-   console.warn(errors)
+import React from "react"
+import { client } from "@reactful/web"
+import '@reactful/commons'
+import "./form.css"
+
+//@ts-ignore
+@client(true)
+export default (props, { fails: errors, await: awaits }: Feeds ) => <>
+   <h1>Uncontrolled Components</h1>   
+   <progress hidden={!awaits} >test...</progress>
+
+   <form grid cols={2} method="post" data={props.user}
+      action="https://jsonplaceholder.typicode.com/posts1"
+      onValidate={onValidate} onSubmit={e => onSubmit(e)}>
+
+      <label>Name<input id="name" bind="name" /></label>
+      <label>Date<input type="date" bind="date" /></label>
+      <label>Work<input pattern="dev|test" bind="work" /></label>
+      <label>Mode<input validate={modeValidate} bind="mode" /></label>
+
+      <hr/><hr/>
+      <label>Accept?<input bind="term" type="checkbox" required /></label>      
+      <button>Submit</button>
+   </form>
+
+
+   <fieldset shown={!!errors?.length}>
+      <legend>ERROR</legend>
+      <ul>{ errors?.map(x => <li>{ x.error }</li>) }</ul>
+   </fieldset>
+</>
+
+function modeValidate(value: string) {
+   console.log('modeValidate', value)
+   if (!value) return 'Mode is required!'
+   if (value.match(/\d+/)) return 'Mode is non-numerical!'
+   return ''
+}
+
+function onSubmit(e) {
+   // after submited validation (feeds)
+   console.log('after form submit', e)
+
+}
+
+async function onValidate(errors: Invalid[]) {
+   // add some async custom invalidations
+   // ex.: errors.push({field:'*', error:'some error', value:''})
+
+   console.warn(errors)
 }

package/templates/sampling/routes/hello.tsx

@@ -1,62 +1,59 @@
-import React from 'react'
-import { seo, client, useStore, state } from '@reactful/web'
-import { Header } from '../components/header'
-
-const orbital1 = useStore({ value:0 })
-const orbital2 = useStore({ value:1 })
-
-//@ts-ignore
-@client(true)
-@state(orbital1)
-@state(orbital2)
-@seo('Hello', 'Hello forms...')
-export default function Hello(props, { store }: Feeds) {
-   if (globalThis.document) globalThis.props = props
-
-   return <>
-      <Header>Hello Forms</Header>
-      <main grid gaps='0 10px' cols={1}>      
-         <label>
-            <b>LOCAL state </b> <code>function(props)</code><br/>
-            <input id='1' data={props} bind="value" placeholder="{props}" />            
-            <input id='1.1' bind="value" placeholder="default" />
-            <SubLocal id='1.1.1' placeholder="inner" />
-         </label>
-         
-          <label>
-            <b>GLOBAL state</b> <code>function(props, {'{ store }'})</code><br/>
-            <input id='2' data={store} bind="value" placeholder="outer" />
-            <SubGlobal id='2.1' placeholder='inner' />
-         </label>
-
-         <label>
-            <b>ORBITAL state</b> <code>useStore(...) + @state(...)</code><br/>
-            <input id='3' data={orbital1} bind="value" placeholder="outer" />
-            <SubOrbital id='3.1' placeholder='inner' />
-            <input id='3.2' data={orbital2} bind="value" placeholder="other" /> = {orbital2.value }
-         </label>
-      </main>
-      <br />
-      <hr />
-      <code>
-         <strong>local</strong>: <label id='l1'>{ props.value }</label><br />
-         <strong>global</strong>: <label id='l2'>{ store.value }</label><br />
-         <strong>orbital</strong>: <label id='l3'>{ orbital1.value }</label>
-      </code>
-   </>
-}
-
-
-function SubGlobal(props, { store }) {
-   return <input {...props} data={store} bind='value' />
-}
-
-function SubLocal(props) {
-   return <><input {...props} data={props} bind='value' /><label> = {props.value}</label></>
-}
-
-//@ts-ignore
-@state(orbital1)
-function SubOrbital(props) {
-   return <input {...props} data={orbital1} bind='value' />
+import React from 'react'
+import { seo, client, useStore } from '@reactful/web'
+import { Header } from '../components/header'
+import '@reactful/extensions'
+
+const state1 = useStore({ value:11 })
+const state2 = useStore({ value:99 })
+const styles = { textAlign: 'right' } as any
+
+const SubGlobal = (props, { store }) => <input {...props} data={store} bind='value' />
+
+const SubLocal= props => <>
+   <input {...props} style={styles} data={props} bind='value' />
+   <label> = {props.value}</label>
+</>
+
+//@ts-ignore
+// @client(true, state1) 
+// TODO: inner component with same orbital state doesn't work ???
+const SubOrbital = props => <input {...props} data={state1} bind='value' />
+
+//@ts-ignore
+@client(true, state1, state2)
+@seo('Hello', 'Hello forms...')
+export default function Hello(props, { store }: Feeds) {
+   if (globalThis.document) globalThis.props = props
+
+   return <>
+      <Header>Hello Forms</Header>
+      <main grid gaps='0 10px' cols={1} className='hello'>      
+         <label>
+            <b>LOCAL state </b> <code>function(props)</code><br/>
+            <input id='1' data={props} bind="value" placeholder="{props}" />            
+            <input id='1.1' bind="value" placeholder="default" />
+            <SubLocal id='1.1.1' placeholder="inner" />
+         </label>
+         
+          <label>
+            <b>GLOBAL state</b> <code>function(props, {'{ store }'})</code><br/>
+            <input id='2' data={store} bind="value" placeholder="outer" />
+            <SubGlobal id='2.1' placeholder='inner' />
+         </label>
+
+          <label>
+            <b>ORBITAL state</b> <code>useStore(...) + @client(true, ...)</code><br/>
+            <input id='3' data={state1} bind="value" placeholder="outer" />
+            <SubOrbital id='3.1' placeholder='inner' /> 
+            <input id='3.2' style={styles} data={state2} bind="value" placeholder="other" /> = {state2.value}
+         </label> 
+      </main>
+      <br />
+      <hr />
+      <code>
+         <strong>local</strong>: <label id='l1'>{ props.value }</label><br />
+         <strong>global</strong>: <label id='l2'>{ store.value }</label><br />
+         <strong>orbital</strong>: <label id='l3'>{ state1.value }</label> 
+      </code>
+   </>
 }

package/templates/sampling/routes/htmlx.html

@@ -1,15 +1,15 @@
-<head>
-   <title>Sample</title>
-   <meta name="description" content="Sample page">
-   <link type="component" href="../components/header.tsx" rel="Header" />
-</head>
-<body>
-   <!-- no {interpolation} -->
-   <Header title="HTML-X" />
-   <p>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. 
-      Similique eum quaerat nesciunt est molestias accusantium 
-      aut sit odit, vero voluptate iure vel aperiam modi libero 
-      in praesentium nam obcaecati error!
-   </p>
+<head>
+   <title>Sample</title>
+   <meta name="description" content="Sample page">
+   <link type="component" href="../components/header.tsx" rel="Header" />
+</head>
+<body>
+   <!-- no {interpolation} -->
+   <Header title="HTML-X" />
+   <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+      Similique eum quaerat nesciunt est molestias accusantium 
+      aut sit odit, vero voluptate iure vel aperiam modi libero 
+      in praesentium nam obcaecati error!
+   </p>
 </body>

package/templates/sampling/routes/index.md

@@ -1,15 +1,15 @@
-# Welcome
-> with markdown (powered by marked)
-
-|                         |                                                 |
-| ----------------------: | ----------------------------------------------- |
-|         [About](/about) | Static generation (default)                     |
-|         [Clock](/clock) | Dynamic generation (with lazy)                  |
-|        [HTML-X](/htmlx) | HTML with JSX using link[type='component']      |
-|       [System](/system) | Server component                                |
-|       [Quotes](/quotes) | Periodic genreation                             |
-|     [Counter](/counter) | Client component                                |
-|         [Hello](/hello) | Stateful object + data bind props               |
-|         [Forms](/forms) | reactful forms + validation API + server action |
-|         [Login](/login) | reactful forms server action authentication     |
-| [Profile](/profile/123) | Parametric (dynamic) routes with modular CSS    |
+# Welcome
+> with markdown (powered by marked)
+
+|                         |                                                  |
+| ----------------------: | ------------------------------------------------ |
+|         [About](/about) | Static generation (default)                      |
+|         [Clock](/clock) | Dynamic generation (with lazy)                   |
+|        [HTML-X](/htmlx) | HTML with JSX using link[type='component']       |
+|       [System](/system) | Server component                                 |
+|       [Quotes](/quotes) | Periodic genreation                              |
+|     [Counter](/counter) | Client component                                 |
+|         [Hello](/hello) | Stateful object + data bind props                |
+|         [Forms](/forms) | reactful forms + validation API + RESTful action |
+|         [Login](/login) | reactful forms RESTful action authentication     |
+| [Profile](/profile/123) | Parametric (dynamic) routes with modular CSS     |

package/templates/sampling/routes/login.tsx

@@ -1,36 +1,36 @@
-// @ts-ignore: 1206
-
-import React from 'react'
-import { client } from '@reactful/web'
-
-//@ts-ignore
-@client(true)
-export default (props, feeds: Feeds) => <>
-   <h1>Login</h1>   
-
-   <progress hidden={!feeds.await}>loading...</progress>
-
-   <form method="POST" data={props.user} 
-      action="http://localhost:3000/api/auth"
-      bearer="access_token">
-
-      <section grid cols={1}>
-         <label>UserName<input bind="username" /></label>
-         <label>PassWord<input type="password" bind="password" /></label>
-      </section>
-      
-      <button>Submit</button>
-   </form>
-
-   <fieldset shown={!!feeds.fails?.length}>
-      <legend>ERROR</legend>
-      <ul>{ feeds.fails?.map((x,i) => <li key={i}>{ x.error }</li>) }</ul>
-   </fieldset>
-
-   <br />
-
-   <fieldset style={{ wordBreak: 'break-all' }}>
-      <legend>token</legend>
-      { sessionStorage.getItem("token") }
-   </fieldset>
+import React from 'react'
+import { client } from '@reactful/web'
+import { Icon } from '../components'
+import '@reactful/extensions'
+
+//@ts-ignore
+@client(true)
+export default (props, feeds: Feeds) => <>
+   <h1><Icon id='user' />Login</h1>      
+
+   <progress hidden={!feeds.await}>loading...</progress>
+
+   <form method="POST" data={props.user} 
+      action="http://localhost:3000/api/auth"
+      bearer="access_token">
+
+      <section grid cols={1}>
+         <label>UserName<input bind="username" /></label>
+         <label>PassWord<input type="password" bind="password" /></label>
+      </section>
+      
+      <button>Submit</button>
+   </form>
+
+   <fieldset shown={!!feeds.fails?.length}>
+      <legend>ERROR</legend>
+      <ul>{ feeds.fails?.map((x,i) => <li key={i}>{ x.error }</li>) }</ul>
+   </fieldset>
+
+   <br />
+
+   <fieldset style={{ wordBreak: 'break-all' }}>
+      <legend>token</legend>
+      { sessionStorage.getItem("token") }
+   </fieldset>
 </>

package/templates/sampling/routes/profile/detail.css

@@ -1,13 +1,13 @@
-h1 {
-   color: dimgrey;
-   font-size: 1.7rem;
-}
-
-button {
-   padding: 10px 20px;
-}
-
-button.routed {
-   background: wheat;
-   font-weight: bolder;
+h1 {
+   color: dimgrey;
+   font-size: 1.7rem;
+}
+
+button {
+   padding: 10px 20px;
+}
+
+button.routed {
+   background: wheat;
+   font-weight: bolder;
 }

package/templates/sampling/routes/profile/detail.tsx

@@ -1,48 +1,48 @@
-import React from 'react'
-import { client } from '@reactful/web'
-import '@reactful/extensions'
-import './detail.css'
-
-const Tester = import('./tester').asLazyComponent("Tester")
-
-//@ts-ignore
-@client(true)
-export function Detail(_, feeds: Feeds) {
-   return <>
-      <h3>Detail</h3>
-      Parametric value = <b>{ feeds.param.id }</b>
-
-      <hr />
-      <p>modular CSS keep original color</p>
-
-      <fieldset>
-         <legend>Mode</legend>
-
-         <section>
-            <button link='./developer'>developer</button>
-            <button link='./manager'>manager</button>
-            <button link='./tester'>tester (component)</button>
-         </section>
-
-         <hr/>
-
-         <section route='./developer'>
-            <b>DEVELOPER</b> is Lorem ipsum dolor sit amet consectetur
-            adipisicing elit. Aspernatur similique ipsa, molestiae
-            numquam laudantium quod, aliquid soluta cumque placeat
-            saepe mollitia sint consectetur labore consequatur
-            pariatur praesentium animi. Obcaecati, nihil?
-         </section>
-
-         <section route='./manager'>
-            <b>MANAGER</b> is Lorem ipsum dolor sit amet consectetur
-            adipisicing elit. Aspernatur similique ipsa, molestiae
-            numquam laudantium quod, aliquid soluta cumque placeat
-            saepe mollitia sint consectetur labore consequatur
-            pariatur praesentium animi. Obcaecati, nihil?
-         </section>
-
-         <Tester route='./tester' />
-      </fieldset>
-   </>
+import React from 'react'
+import { client } from '@reactful/web'
+import '@reactful/extensions'
+import './detail.css'
+
+const Tester = import('./tester').asLazyComponent("Tester")
+
+//@ts-ignore
+@client(true)
+export function Detail(_, feeds: Feeds) {
+   return <>
+      <h3>Detail</h3>
+      Parametric value = <b>{ feeds.param.id }</b>
+
+      <hr />
+      <p>modular CSS keep original color</p>
+
+      <fieldset>
+         <legend>Mode</legend>
+
+         <section>
+            <button link='./developer'>developer</button>
+            <button link='./manager'>manager</button>
+            <button link='./tester'>tester (component)</button>
+         </section>
+
+         <hr/>
+
+         <section route='./developer'>
+            <b>DEVELOPER</b> is Lorem ipsum dolor sit amet consectetur
+            adipisicing elit. Aspernatur similique ipsa, molestiae
+            numquam laudantium quod, aliquid soluta cumque placeat
+            saepe mollitia sint consectetur labore consequatur
+            pariatur praesentium animi. Obcaecati, nihil?
+         </section>
+
+         <section route='./manager'>
+            <b>MANAGER</b> is Lorem ipsum dolor sit amet consectetur
+            adipisicing elit. Aspernatur similique ipsa, molestiae
+            numquam laudantium quod, aliquid soluta cumque placeat
+            saepe mollitia sint consectetur labore consequatur
+            pariatur praesentium animi. Obcaecati, nihil?
+         </section>
+
+         <Tester route='./tester' />
+      </fieldset>
+   </>
 }

package/templates/sampling/routes/profile/index.tsx

@@ -1,14 +1,14 @@
-import React from 'react'
-import { Detail } from './detail'
-import { seo, route } from '@reactful/web'
-import './profile.css'
-
-//@ts-ignore
-@route("/profile/:id")
-@seo('Profile', 'Profile description')
-export default () => <>
-   <h1>Profile</h1>
-   <Detail />   
-   <hr/>
-   <p>modular CSS chainging to red</p>
+import React from 'react'
+import { Detail } from './detail'
+import { seo, route } from '@reactful/web'
+import './profile.css'
+
+//@ts-ignore
+@route("/profile/:id")
+@seo('Profile', 'Profile description')
+export default () => <>
+   <h1>Profile</h1>
+   <Detail />   
+   <hr/>
+   <p>modular CSS chainging to red</p>
 </>

package/templates/sampling/routes/profile/profile.css

@@ -1,8 +1,8 @@
-h1 {
-   color: #ffb300;
-}
-
-p {
-   color:red;
-}
-
+h1 {
+   color: #ffb300;
+}
+
+p {
+   color:red;
+}
+

package/templates/sampling/routes/profile/tester.tsx

@@ -1,11 +1,11 @@
-import React from "react"
-
-export function Tester() {
-   return <section route='./manager'>
-      <b>TESTER</b> is Lorem ipsum dolor sit amet consectetur 
-      adipisicing elit. Aspernatur similique ipsa, molestiae 
-      numquam laudantium quod, aliquid soluta cumque placeat 
-      saepe mollitia sint consectetur labore consequatur 
-      pariatur praesentium animi. Obcaecati, nihil?
-   </section>
+import React from "react"
+
+export function Tester() {
+   return <section>
+      <b>TESTER</b> is Lorem ipsum dolor sit amet consectetur 
+      adipisicing elit. Aspernatur similique ipsa, molestiae 
+      numquam laudantium quod, aliquid soluta cumque placeat 
+      saepe mollitia sint consectetur labore consequatur 
+      pariatur praesentium animi. Obcaecati, nihil?
+   </section>
 }

package/templates/sampling/routes/system.tsx

@@ -1,6 +1,7 @@
 import OS from "os"
 import React from "react"
 import { seo, style } from '@reactful/web'
+import '@reactful/extensions'
 
 const metatags: MetaTags = { 
    charset:"UTF-16", 

package/templates/sampling/tests/access.spec.ts

@@ -1,29 +1,29 @@
-import { test, expect } from '@playwright/test'
-
-const cases = [
-   ['/about', 'About'],
-   ['/clock', 'World Clock'],
-   ['/htmlx', 'HTML-X'],
-   ['/system', 'Server OS'],
-   ['/quotes', 'My custom error component', 'Philosophy quote of the day'],
-   ['/counter', 'Counter'],
-   ['/hello', 'Hello Forms'],
-   ['/forms', 'Uncontrolled Components'],
-   ['/profile/123', 'Profile'],
-]
-
-cases.forEach(function(scenario) {
-   const [ href, head, that ] = scenario
-
-   test(href, async ({ page }) => {
-      await page.goto('http://localhost:3000/')
-      await page.goto(href)
-      await page.waitForTimeout(333)
-      await page.waitForURL(`http://localhost:3000${href}`);
-
-      const h1 = await page.locator(`h1`).innerHTML()    
-      const ok = [head,that].includes(h1)
-
-      if (!ok) expect(h1).toBe(that || head)      
-    })
-})
+import { test, expect } from '@playwright/test'
+
+const cases = [
+   ['/about', 'About'],
+   ['/clock', 'World Clock'],
+   ['/htmlx', 'HTML-X'],
+   ['/system', 'Server OS'],
+   ['/quotes', 'My custom error component', 'Philosophy quote of the day'],
+   ['/counter', 'Counter'],
+   ['/hello', 'Hello Forms'],
+   ['/forms', 'Uncontrolled Components'],
+   ['/profile/123', 'Profile'],
+]
+
+cases.forEach(function(scenario) {
+   const [ href, head, that ] = scenario
+
+   test(href, async ({ page }) => {
+      await page.goto('http://localhost:3000/')
+      await page.goto(href)
+      await page.waitForTimeout(333)
+      await page.waitForURL(`http://localhost:3000${href}`);
+
+      const h1 = await page.locator(`h1`).innerHTML()    
+      const ok = [head,that].includes(h1)
+
+      if (!ok) expect(h1).toBe(that || head)      
+    })
+})