npm - @reactful/create - Versions diffs - 0.0.51 - Mend

@reactful/create 0.0.51

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.

Files changed (132) hide show

package/README.md +8 -0
package/bun.lockb +0 -0
package/common/package.json +22 -0
package/common/tsconfig.json +24 -0
package/index.js +77 -0
package/package.json +16 -0
package/templates/empty/index.html +12 -0
package/templates/empty/index.ts +5 -0
package/templates/minimal/index.html +12 -0
package/templates/minimal/index.ts +5 -0
package/templates/sampling/apis/auth/db.ts +15 -0
package/templates/sampling/apis/auth/index.ts +28 -0
package/templates/sampling/apis/hello.ts +3 -0
package/templates/sampling/apis/quotes.ts +16 -0
package/templates/sampling/apis/sub/index.ts +3 -0
package/templates/sampling/apis/sub/sub.ts +3 -0
package/templates/sampling/assets/SLIDEME.png +0 -0
package/templates/sampling/assets/default.css +91 -0
package/templates/sampling/assets/favicon.ico +0 -0
package/templates/sampling/assets/icon.png +0 -0
package/templates/sampling/assets/icon.svg +6 -0
package/templates/sampling/assets/logo-144.png +0 -0
package/templates/sampling/assets/logo-168.png +0 -0
package/templates/sampling/assets/logo-192.png +0 -0
package/templates/sampling/assets/logo-48.png +0 -0
package/templates/sampling/assets/logo-512.png +0 -0
package/templates/sampling/assets/logo-72.png +0 -0
package/templates/sampling/assets/logo-96.png +0 -0
package/templates/sampling/assets/manifest.json +57 -0
package/templates/sampling/assets/markdown.css +274 -0
package/templates/sampling/assets/robots.txt +1 -0
package/templates/sampling/assets/system.css +7 -0
package/templates/sampling/builds/about.html +27 -0
package/templates/sampling/builds/bundle.js +13116 -0
package/templates/sampling/builds/bundle.ts +25 -0
package/templates/sampling/builds/client.ts +1 -0
package/templates/sampling/builds/clock.html +30 -0
package/templates/sampling/builds/counter.html +30 -0
package/templates/sampling/builds/forms/form.html +48 -0
package/templates/sampling/builds/forms/index.html +48 -0
package/templates/sampling/builds/hello.html +60 -0
package/templates/sampling/builds/htmlx.html +24 -0
package/templates/sampling/builds/htmlx.tsx +13 -0
package/templates/sampling/builds/index.html +98 -0
package/templates/sampling/builds/login.html +45 -0
package/templates/sampling/builds/profile/index.html +54 -0
package/templates/sampling/builds/quotes.html +26 -0
package/templates/sampling/builds/shared.js +76 -0
package/templates/sampling/builds/system.html +27 -0
package/templates/sampling/components/header.tsx +7 -0
package/templates/sampling/directives/index.ts +1 -0
package/templates/sampling/directives/shown.ts +6 -0
package/templates/sampling/index.html +20 -0
package/templates/sampling/index.ts +19 -0
package/templates/sampling/routes/about.html +13 -0
package/templates/sampling/routes/clock.tsx +35 -0
package/templates/sampling/routes/counter.tsx +21 -0
package/templates/sampling/routes/forms/form.css +19 -0
package/templates/sampling/routes/forms/form.tsx +51 -0
package/templates/sampling/routes/forms/index.tsx +3 -0
package/templates/sampling/routes/hello.tsx +62 -0
package/templates/sampling/routes/htmlx.html +15 -0
package/templates/sampling/routes/index.md +15 -0
package/templates/sampling/routes/login.tsx +36 -0
package/templates/sampling/routes/profile/detail.css +13 -0
package/templates/sampling/routes/profile/detail.tsx +48 -0
package/templates/sampling/routes/profile/index.tsx +14 -0
package/templates/sampling/routes/profile/profile.css +8 -0
package/templates/sampling/routes/profile/tester.tsx +11 -0
package/templates/sampling/routes/quotes.tsx +25 -0
package/templates/sampling/routes/system.tsx +23 -0
package/templates/sampling/tests/access.spec.ts +29 -0
package/templates/sampling/tests/counter.spec.ts +19 -0
package/templates/sampling/tests/form.spec.ts +51 -0
package/templates/sampling/tests/hello.spec.ts +25 -0
package/templates/sampling/tests/path.test.ts +20 -0
package/testings/apis/auth/db.ts +15 -0
package/testings/apis/auth/index.ts +28 -0
package/testings/apis/hello.ts +3 -0
package/testings/apis/quotes.ts +16 -0
package/testings/apis/sub/index.ts +3 -0
package/testings/apis/sub/sub.ts +3 -0
package/testings/assets/SLIDEME.png +0 -0
package/testings/assets/default.css +91 -0
package/testings/assets/favicon.ico +0 -0
package/testings/assets/icon.png +0 -0
package/testings/assets/icon.svg +6 -0
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 +57 -0
package/testings/assets/markdown.css +274 -0
package/testings/assets/robots.txt +1 -0
package/testings/assets/system.css +7 -0
package/testings/builds/forms/form.html +48 -0
package/testings/builds/forms/index.html +48 -0
package/testings/builds/profile/index.html +54 -0
package/testings/bun.lockb +0 -0
package/testings/components/header.tsx +7 -0
package/testings/directives/index.ts +1 -0
package/testings/directives/shown.ts +6 -0
package/testings/index.html +20 -0
package/testings/index.ts +19 -0
package/testings/package.json +22 -0
package/testings/routes/about.html +13 -0
package/testings/routes/clock.tsx +35 -0
package/testings/routes/counter.tsx +21 -0
package/testings/routes/forms/form.css +19 -0
package/testings/routes/forms/form.tsx +51 -0
package/testings/routes/forms/index.tsx +3 -0
package/testings/routes/hello.tsx +62 -0
package/testings/routes/htmlx.html +15 -0
package/testings/routes/index.md +15 -0
package/testings/routes/login.tsx +36 -0
package/testings/routes/profile/detail.css +13 -0
package/testings/routes/profile/detail.tsx +48 -0
package/testings/routes/profile/index.tsx +14 -0
package/testings/routes/profile/profile.css +8 -0
package/testings/routes/profile/tester.tsx +11 -0
package/testings/routes/quotes.tsx +25 -0
package/testings/routes/system.tsx +23 -0
package/testings/tests/access.spec.ts +29 -0
package/testings/tests/counter.spec.ts +19 -0
package/testings/tests/form.spec.ts +51 -0
package/testings/tests/hello.spec.ts +25 -0
package/testings/tests/path.test.ts +20 -0
package/testings/tsconfig.json +24 -0
package/tsconfig.json +22 -0

package/testings/routes/hello.tsx ADDED Viewed

@@ -0,0 +1,62 @@
+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' />
+}

package/testings/routes/htmlx.html ADDED Viewed

@@ -0,0 +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>
+</body>

package/testings/routes/index.md ADDED Viewed

@@ -0,0 +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    |

package/testings/routes/login.tsx ADDED Viewed

@@ -0,0 +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>
+</>

package/testings/routes/profile/detail.css ADDED Viewed

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

package/testings/routes/profile/detail.tsx ADDED Viewed

@@ -0,0 +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>
+   </>
+}

package/testings/routes/profile/index.tsx ADDED Viewed

@@ -0,0 +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>
+</>

package/testings/routes/profile/profile.css ADDED Viewed

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

package/testings/routes/profile/tester.tsx ADDED Viewed

@@ -0,0 +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>
+}

package/testings/routes/quotes.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import React from 'react'
+import { seo, server, error } from '@reactful/web'
+//@ts-ignore
+@server("periodic", "30min")
+@error(specificErrorComponent)
+@seo('Quotes', 'Philosophy quotes...')
+export default async function Quotes(props: any) {
+   const url = "http://localhost:3000/api/quotes"
+   const txt = await fetch(url).then(x => x.text())
+   return <>
+      <h1>Philosophy quote of the day</h1>
+      <blockquote style={{zoom:1.1}}>{txt}</blockquote>
+      <hr /><code>it will be regenerated in each 30min (press F5 to check)</code>
+   </>
+}
+function specificErrorComponent(status: number, errors: string[]) {
+   return <>
+      <h1>My custom error component</h1>
+      <p> { errors.join(', ') } </p><hr/>
+      <code>it will be regenerated in each 30min (press F5 to check)</code>
+   </>
+}

package/testings/routes/system.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import OS from "os"
+import React from "react"
+import { seo, style } from '@reactful/web'
+const metatags: MetaTags = {
+   charset:"UTF-16",
+   rating:"general",
+   keywords:"hello, hi"
+}
+//@ts-ignore
+@seo('System', metatags)
+@style('/assets/system.css')
+export default function System() {
+   const [ type, arch, release ] = [OS.type(), OS.arch(), OS.release()]
+   return <>
+      <h1>Server OS</h1>
+      <h2>server side information</h2>
+      <pre>{type} | {arch} | {release} </pre>
+      <section shown={false}>DONT SHOW ME!</section>
+   </>
+}

package/testings/tests/access.spec.ts ADDED Viewed

@@ -0,0 +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)
+    })
+})

package/testings/tests/counter.spec.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+test('counter: statefull props', async ({ page }) => {
+   await page.goto('http://localhost:3000/counter')
+   await page.waitForTimeout(99)
+   await page.click('button', { delay:99 })
+   await page.click('button', { delay:99 })
+   await page.click('button', { delay:99 })
+   await page.waitForTimeout(99)
+   const btn = await page.locator('button').innerText()
+   expect(btn.trim()).toBe('COUNTED: 3')
+ })
+ test('counter: shown custom props directive', async ({ page }) => {
+   await page.goto('http://localhost:3000/counter')
+   const h2IsVisible = await page.locator('h6').isVisible()
+   expect(h2IsVisible).toBe(false)
+ })

package/testings/tests/form.spec.ts ADDED Viewed

@@ -0,0 +1,51 @@
+// import { test, expect } from '@playwright/test'
+// async function goto(page) {
+//    await page.goto('http://localhost:3000/forms')
+//    await page.waitForTimeout(1500)
+// }
+// test(`form validation: checkbox`, async function({ page }) {
+//    await goto(page)
+//    await page.click('button', { delay:333 })
+//    const check = await page.locator('[type="checkbox"]')
+//    const checkHandle = await check!.evaluateHandle(x => x['validationMessage'])
+//    const validationMessage = await checkHandle.jsonValue()
+//    expect(validationMessage).toBe('Please check this box if you want to proceed')
+// })
+// test(`form validation: input`, async function({ page }) {
+//    await goto(page)
+//    await page.click('[uid="14"]')
+//    await page.click('button', { delay:333 })
+//    const input = await page.evaluate(() => document.querySelector('[bind="mode"]'))
+//    const validationMessage = input && input['validationMessage']
+//    // const input = await page.$('[bind="mode"]');
+//    // const inputHandle = await input!.evaluateHandle(x => x['validationMessage'])
+//    // const validationMessage = await inputHandle.jsonValue()
+//    expect(validationMessage).toBe('Mode is required!')
+// })
+// test(`form action: errors feedback`, async function({ page }) {
+//    await goto(page)
+//    const checkbox = await page.getByLabel('Accepted?')
+//    await checkbox.click()
+//    await page.getByLabel('Accepted?').click()
+//    await page.fill('[bind="mode"]', 'ok', { timeout:99 })
+//    await page.click('button', { delay:333 })
+//    const progress = await page.locator('progress').isVisible()
+//    expect(progress).toBe(true)
+//    await page.waitForTimeout(333)
+//    const li = await page.locator('ul > li').innerHTML()
+//    expect(li).toContain('URL not found')
+// })

package/testings/tests/hello.spec.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+const cases = [
+   ['local', 'hi!', '[id="1"]', '#l1'],
+   ['global (outer)', 'hi!', '[id="2"]', '#l2'],
+   ['global (inner)', 'hi!', '[id="3"]', '#l2'],
+]
+cases.forEach(function(scenario) {
+   const [ scope, text, inputId, labelId ] = scenario
+   test(`hello: ${scope} props binding`, async function({ page }) {
+      await page.goto('http://localhost:3000/hello')
+      await page.waitForTimeout(99)
+      for await (const char of text.split('')) {
+         await page.waitForTimeout(99)
+         await page.type(inputId, char, { delay: 99 })
+      }
+      await page.waitForTimeout(99)
+      const result = await page.locator(labelId).innerText()
+      expect(result).toBe(text)
+   })
+})

package/testings/tests/path.test.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import { test, expect } from 'bun:test'
+const scenarios = [
+   ['url', '/routes', '/'],
+   ['sub url', '/routes/sub', '/sub'],
+   ['http', 'http://domain.com/routes', '/'],
+   ['https', 'https://domain.com/routes', '/'],
+   ['https port', 'https://domain.com:3000/routes', '/'],
+   ['https port file', 'https://domain.com:3000/routes/file.tsx', '/file'],
+   ['https port index', 'https://domain.com:3000/routes/index', '/'],
+   ['https port sub file', 'https://domain.com:3000/routes/sub/file.tsx', '/sub/file'],
+]
+scenarios.forEach(function([ scenario, sampling, expected ]) {
+   test(`new Path(url).href: ${scenario}`, function() {
+      const resulted = new URL(sampling).pathname
+      expect(resulted).toBe(expected as any)
+      // console.log('sampling:', sampling)
+   })
+})

package/testings/tsconfig.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+   "exclude": ["node_modules"],
+   "compilerOptions": {
+      "rootDir": ".",
+      "jsx": "react",
+      "target": "esnext",
+      "module": "esnext",
+      "types": ["bun-types"],
+      "moduleDetection": "auto",
+      "moduleResolution": "bundler",
+      "noEmit": true,
+      "strict": false,
+      "allowJs": true,
+      "sourceMap": true,
+      "composite": true,
+      "declaration": true,
+      "skipLibCheck": true,
+      "noImplicitAny": false,
+      "esModuleInterop": true,
+      "downlevelIteration": true,
+      "allowSyntheticDefaultImports": true,
+      "forceConsistentCasingInFileNames": true
+   }
+}

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,22 @@
+{
+   "exclude": ["node_modules"],
+   "compilerOptions": {
+      "types": ["bun-types"],
+      "module": "esnext",
+      "target": "esnext",
+      "moduleDetection": "auto",
+      "moduleResolution": "bundler",
+      "noEmit": true,
+      "strict": true,
+      "allowJs": true,
+      "composite": true,
+      "declaration": true,
+      "skipLibCheck": true,
+      "noImplicitAny": false,
+      "esModuleInterop": true,
+      "downlevelIteration": true,
+      "allowImportingTsExtensions": true,
+      "allowSyntheticDefaultImports": true,
+      "forceConsistentCasingInFileNames": true
+   }
+}