@reactful/create 0.0.57 → 0.0.59

package/testings/assets/markdown.css

@@ -1,274 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
- @import url('https://fonts.cdnfonts.com/css/agave');
- @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;300;400&display=swap');
- @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;300;400&family=Quicksand:wght@300;400;500;600;700&display=swap');
-
-
-
-:root {
-   --base-font: 'fira-sans';
-   --code-font: 'agave';
-}
-
-@media (prefers-color-scheme: dark) {
-   /* :root { filter: invert(80%) contrast(150%); }   
-   input { filter: invert(10%); } */
-}
-
-label > input { margin-left:10px;  }
-
-input { 
-   font-family: var(--code-font); 
-   padding: 5px 7px;
-   color: black;
-}
-
-html, body {
-   font-family: var(--base-font, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", system-ui, "Ubuntu", "Droid Sans", sans-serif);
-   font-size: var(--markdown-font-size, 14px);
-   line-height: var(--markdown-line-height, 22px);
-   word-wrap: break-word;
-}
-
-body {
-   padding: 10px;
-   background: whitesmoke;
-   zoom: 1.1;
-}
-
-
-/* Reset margin top for elements */
-h1,h2,h3,h4,h5,h6,p,ol,ul,pre {
-   margin-top: 0;
-}
-
-h1,h2,h3,h4,h5,h6 {
-   font-weight: 600;
-   margin-top: 24px;
-   margin-bottom: 16px;
-   line-height: 1.25;
-}
-
-#code-csp-warning {
-   position: fixed;
-   top: 0;
-   right: 0;
-   color: white;
-   margin: 16px;
-   text-align: center;
-   font-size: 12px;
-   font-family: sans-serif;
-   background-color: #444444;
-   cursor: pointer;
-   padding: 6px;
-   box-shadow: 1px 1px 1px rgba(0, 0, 0, .25);
-}
-
-#code-csp-warning:hover {
-   text-decoration: none;
-   background-color: #007acc;
-   box-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
-}
-
-body.scrollBeyondLastLine {
-   margin-bottom: calc(100vh - 22px);
-}
-
-body.showEditorSelection .code-line {
-   position: relative;
-}
-
-body.showEditorSelection :not(tr, ul, ol).code-active-line:before,
-body.showEditorSelection :not(tr, ul, ol).code-line:hover:before {
-   content: "";
-   display: block;
-   position: absolute;
-   top: 0;
-   left: -12px;
-   height: 100%;
-}
-
-.vscode-high-contrast.showEditorSelection :not(tr, ul, ol).code-line .code-line:hover:before {
-   border-left: none;
-}
-
-body.showEditorSelection li.code-active-line:before,
-body.showEditorSelection li.code-line:hover:before {
-   left: -30px;
-}
-
-.vscode-light.showEditorSelection .code-active-line:before {
-   border-left: 3px solid rgba(0, 0, 0, 0.15);
-}
-
-.vscode-light.showEditorSelection .code-line:hover:before {
-   border-left: 3px solid rgba(0, 0, 0, 0.40);
-}
-
-.vscode-dark.showEditorSelection .code-active-line:before {
-   border-left: 3px solid rgba(255, 255, 255, 0.4);
-}
-
-.vscode-dark.showEditorSelection .code-line:hover:before {
-   border-left: 3px solid rgba(255, 255, 255, 0.60);
-}
-
-.vscode-high-contrast.showEditorSelection .code-active-line:before {
-   border-left: 3px solid rgba(255, 160, 0, 0.7);
-}
-
-.vscode-high-contrast.showEditorSelection .code-line:hover:before {
-   border-left: 3px solid rgba(255, 160, 0, 1);
-}
-
-/* Prevent `sub` and `sup` elements from affecting line height */
-sub, sup { line-height: 0; }
-
-ul ul:first-child,
-ul ol:first-child,
-ol ul:first-child,
-ol ol:first-child {
-   margin-bottom: 0;
-}
-
-img, video {
-   max-width: 100%;
-   max-height: 100%;
-}
-
-a { text-decoration: none; }
-
-a:hover { text-decoration: underline; }
-
-a:focus,
-input:focus,
-select:focus,
-textarea:focus {
-   outline: 1px solid -webkit-focus-ring-color;
-   outline-offset: -1px;
-}
-
-p {
-   margin-bottom: 16px;
-}
-
-li p {
-   margin-bottom: 0.7em;
-}
-
-ul,
-ol {
-   margin-bottom: 0.7em;
-}
-
-hr {
-   border: 0;
-   height: 1px;
-   border-bottom: 1px solid;
-}
-
-h1 {
-   font-size: 2em;
-   margin-top: 0;
-   padding-bottom: 0.3em;
-   border-bottom-width: 1px;
-   border-bottom-style: solid;
-}
-
-h2 {
-   font-size: 1.5em;
-   padding-bottom: 0.3em;
-   border-bottom-width: 1px;
-   border-bottom-style: solid;
-}
-
-h3 {
-   font-size: 1.25em;
-}
-
-h4 {
-   font-size: 1em;
-}
-
-h5 {
-   font-size: 0.875em;
-}
-
-h6 {
-   font-size: 0.85em;
-}
-
-table {
-   border-collapse: collapse;
-   margin-bottom: 0.7em;
-}
-
-th {
-   text-align: left;
-   border-bottom: 1px solid;
-}
-
-th,
-td {
-   padding: 5px 10px;
-}
-
-table>tbody>tr+tr>td {
-   border-top: 1px solid;
-}
-
-blockquote {
-   margin: 0;
-   padding: 2px 16px 0 10px;
-   border-left-width: 5px;
-   border-left-style: solid;
-   border-radius: 2px;
-}
-
-code {
-   font-family: var(--code-font, "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace);
-   font-size: 1em;
-   line-height: 1.357em;
-}
-
-body.wordWrap pre {
-   white-space: pre-wrap;
-}
-
-pre:not(.hljs),
-pre.hljs code>div {
-   padding: 16px;
-   border-radius: 3px;
-   overflow: auto;
-}
-
-pre code {
-   color: var(--vscode-editor-foreground);
-   tab-size: 4;
-}
-
-/** Theming */
-
-pre {
-   background-color: var(--vscode-textCodeBlock-background);
-   border: 1px solid var(--vscode-widget-border);
-}
-
-.vscode-high-contrast h1 {
-   border-color: rgb(0, 0, 0);
-}
-
-.vscode-light th {
-   border-color: rgba(0, 0, 0, 0.69);
-}
-
-.vscode-dark th {
-   border-color: rgba(255, 255, 255, 0.69);
-}
-
-.vscode-light h1,.vscode-light h2,.vscode-light hr,.vscode-light td {   border-color: rgba(0, 0, 0, 0.18);}
-
-.vscode-dark h1,.vscode-dark h2,.vscode-dark hr,.vscode-dark td {   border-color: rgba(255, 255, 255, 0.18);}

package/testings/assets/robots.txt

@@ -1 +0,0 @@
-User-agent: *

package/testings/assets/system.css

@@ -1,7 +0,0 @@
-h2 { 
-   color:green; 
-   font-weight: bolder; 
-   border-bottom: solid 3px dimgray;
-   font-family: 'Bebas Neue', quicksand, sans-serif !important;   
-   font-size: 50px !important;
-}

package/testings/builds/forms/form.html

@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-   <head>
-      <meta charset="UTF-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <meta name="description" content="Home page">
-      <meta name="theme-color" content="#333">
-      <link rel="stylesheet" href="/assets/markdown.css">
-      <link rel="stylesheet" href="/assets/default.css">
-      <link rel="manifest" href="/assets/manifest.json">
-      <title>Welcome</title>
-      <meta name='viewport' content='width=device-width, initial-scale=1.0' />
-      <meta name='description' content='Home page' />
-      <meta name='theme-color' content='#333' />
-      <meta name='title' content='Welcome' />
-   <script src='/mnt/b/Repositorios/reactful/experiments/builds/shared.js'></script>
-      <script type='module' src='/mnt/b/Repositorios/reactful/experiments/builds/bundle.js'></script></head>
-   <body>
-      <div id='root'>
-         <jsx tag="jsx" uid="2" own="default"
-            src="/mnt/b/Repositorios/reactful/experiments/routes/forms/form.tsx" hidden
-            class="default">
-            <h1>Uncontrolled Components</h1>
-            <progress hidden>test...</progress>
-            <form cols="2" method="post" action="https://jsonplaceholder.typicode.com/posts1">
-               <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 bind="mode" />
-               </label>
-               <hr />
-               <hr />
-               <label>Accept?<input bind="term" type="checkbox" required />
-               </label>
-               <button>Submit</button>
-            </form>
-            <fieldset>
-               <legend>ERROR</legend>
-               <ul>
-               </ul>
-            </fieldset>
-         </jsx>
-      </div>
-   </body>
-</html>

package/testings/builds/forms/index.html

@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-   <head>
-      <meta charset="UTF-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <meta name="description" content="Home page">
-      <meta name="theme-color" content="#333">
-      <link rel="stylesheet" href="/assets/markdown.css">
-      <link rel="stylesheet" href="/assets/default.css">
-      <link rel="manifest" href="/assets/manifest.json">
-      <title>Welcome</title>
-      <meta name='viewport' content='width=device-width, initial-scale=1.0' />
-      <meta name='description' content='Home page' />
-      <meta name='theme-color' content='#333' />
-      <meta name='title' content='Welcome' />
-   <script src='/mnt/b/Repositorios/reactful/experiments/builds/shared.js'></script>
-      <script type='module' src='/mnt/b/Repositorios/reactful/experiments/builds/bundle.js'></script></head>
-   <body>
-      <div id='root'>
-         <jsx tag="jsx" uid="2" own="default"
-            src="/mnt/b/Repositorios/reactful/experiments/routes/forms/form.tsx" hidden
-            class="default">
-            <h1>Uncontrolled Components</h1>
-            <progress hidden>test...</progress>
-            <form cols="2" method="post" action="https://jsonplaceholder.typicode.com/posts1">
-               <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 bind="mode" />
-               </label>
-               <hr />
-               <hr />
-               <label>Accept?<input bind="term" type="checkbox" required />
-               </label>
-               <button>Submit</button>
-            </form>
-            <fieldset>
-               <legend>ERROR</legend>
-               <ul>
-               </ul>
-            </fieldset>
-         </jsx>
-      </div>
-   </body>
-</html>

package/testings/builds/profile/index.html

@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-   <head>
-      <meta charset="UTF-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <meta name="description" content="Home page">
-      <meta name="theme-color" content="#333">
-      <link rel="stylesheet" href="/assets/markdown.css">
-      <link rel="stylesheet" href="/assets/default.css">
-      <link rel="manifest" href="/assets/manifest.json">
-      <title>Welcome</title>
-      <meta name='viewport' content='width=device-width, initial-scale=1.0' />
-      <meta name='description' content='Home page' />
-      <meta name='theme-color' content='#333' />
-      <meta name='title' content='Welcome' />
-   <script src='/mnt/b/Repositorios/reactful/experiments/builds/shared.js'></script>
-      <script type='module' src='/mnt/b/Repositorios/reactful/experiments/builds/bundle.js'></script></head>
-   <body>
-      <div id='root'>
-         <h1 tag="h1" uid="3" class="default" style="color:#ffb300">Profile</h1>
-         <jsx tag="jsx" uid="12" own="default"
-            src="/mnt/b/Repositorios/reactful/experiments/routes/profile/detail.tsx" hidden
-            class="default">
-            <h3>Detail</h3>Parametric value = <b>
-            </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>
-               <div>
-               </div>
-            </fieldset>
-         </jsx>
-         <hr tag="hr" uid="8" class="default" />
-         <p tag="p" uid="10" class="default" style="color:red">modular CSS chainging to red</p>
-      </div>
-   </body>
-</html>

package/testings/components/header.tsx

@@ -1,7 +0,0 @@
-import React from 'react'
-
-export const Header = props => <>
-   <h1 style={{color:'wheat'}}>{ props.children || props.title  }</h1>
-</>
-
-export default { ok:true }

package/testings/directives/index.ts

@@ -1 +0,0 @@
-export * from  './shown'

package/testings/directives/shown.ts

@@ -1,6 +0,0 @@
-declare module "react" { interface HTMLAttributes<T> { shown?:boolean } }
-
-export const shown = props => 
-   props?.shown === false 
-      ? { ...props, hidden: true } 
-      : props

package/testings/index.html

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-   <meta charset="UTF-8">
-   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-   <meta name="description" content="Home page" >
-   <meta name="theme-color" content="#333"/>
-
-   <link rel="stylesheet" href="/assets/markdown.css">
-   <link rel="stylesheet" href="/assets/default.css" />
-   <link rel="manifest" href="/assets/manifest.json" />
-
-   <title>Welcome</title>
-</head>
-<body>
-   <div id="root"></div>
-</body>
-</html>

package/testings/index.ts

@@ -1,19 +0,0 @@
-import React from "react"
-import { shown } from './directives'
-import { server } from "@reactful/server"
-
-const storage = { name: "ok" }
-
-await server("/routes", { failure, storage })
-     .inject(shown)
-     .render("#root")
-
-function failure(status, errors) {
-   const children: any[] = errors.map((x, i) => 
-         React.createElement('li', { key:i }, x))
-
-   return React.createElement('div', {}, [
-      React.createElement('h1', {}, status),
-      React.createElement('ul', {}, children),
-   ])
-}

package/testings/package.json

@@ -1,22 +0,0 @@
-{
-   "type": "module",
-   "name": "testings",
-   "module": "index.ts",
-   "scripts": {
-      "start": "bun --hot run index.ts",
-      "build": "rm -rf tsconfig.tsbuildinfo; bunx tsc -p tsconfig.json",
-      "clear": "rm -rf node_modules package-lock.json bun.lockb; bun i; bun run build"
-   },
-   "dependencies": {
-      "react": "^18.2.0",
-      "react-dom": "^18.2.0",
-      "@reactful/extensions": "latest",
-      "@reactful/server": "latest",
-      "@reactful/web": "latest"
-   },
-   "devDependencies": {
-      "bun-types": "^1.0.20",
-      "typescript": "^5.3.3",
-      "@types/react": "^18.2.57"
-   }
-}

package/testings/routes/about.html

@@ -1,13 +0,0 @@
-<head>
-   <title>About</title>
-   <meta name="description" content="About page">
-</head>
-<body>
-   <h1>About</h1>
-   <p>
-   Lorem ipsum dolor sit amet consectetur adipisicing elit. 
-   Adipisci id eaque saepe ab numquam, nisi minus atque obcaecati, 
-   dignissimos facere accusamus nihil ipsam repudiandae praesentium, 
-   quia animi perspiciatis architecto fuga? 
-   </p>    
-</body>

package/testings/routes/clock.tsx

@@ -1,35 +0,0 @@
-import React, { Suspense } from 'react'
-import { server, seo } from '@reactful/web'
-
-const loading = <h3>Loading content...</h3>
-const address = "https://timeapi.io/api/Time/current/zone?timeZone=Europe/Amsterdam"
-
-//@ts-ignore
-@server("dynamic") 
-@seo('Time Zone', 'Time zone clock...')
-export default function(props: any) {
-   return <Suspense fallback={loading}>      
-         <TimeZone />
-      </Suspense>
-}
-
-async function TimeZone() {   
-   const response = await fetch(address)
-   const { year, month, day, hour, minute, seconds } = await response.json()
-   const time = `${hour}:${minute}:${seconds}`
-   const date = `${year}-${month}-${day}`
-
-   return <React.Fragment>
-      <h1>World Clock</h1>
-      <h2>Europe/Amistedan timezone</h2>
-      <h3 style={{color:'yellow'}}> {date} {time} </h3>
-      <Suspense fallback={loading}>
-         <InnerAsyncComponent />
-      </Suspense>
-   </React.Fragment>
-}
-
-async function InnerAsyncComponent() {
-   await new Promise(promise => setTimeout(promise, 1000))
-   return <code><mark>I'm a inner subcomponent !!!</mark></code>
-}

package/testings/routes/counter.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import { seo, client } from '@reactful/web'
-
-//@ts-ignore
-@seo('Counter', '...')
-export default (props: any) => <>
-   <h1>Counter</h1>
-   <CountButton />
-
-   <h6 shown={false}>DONT SHOW ME!</h6>
-</>
-
-//@ts-ignore
-@client(true)
-export function CountButton(props: any, feeds: any) {
-   function onClick() { props.count ||= 0; props.count++ }
-
-   return <button style={{ padding:'20px' }} onClick={onClick}>
-      COUNTED: <b>{ props.count || 0 }</b>
-   </button>
-}

package/testings/routes/forms/form.css

@@ -1,19 +0,0 @@
-/* form {
-   gap: 20px;
-   display: grid;
-   grid-template-columns: repeat(2, 1fr);
-} */
-
-code {
-   padding: 10px;
-   display: block;
-   background: silver;
-}
-
-progress {     
-   width: 100%;
-   height: 30px; 
-}
-
-progress[value]::-webkit-progress-bar { border-radius: 0; }
-progress[value]::-webkit-progress-value { border-radius: 0; }

package/testings/routes/forms/form.tsx

@@ -1,51 +0,0 @@
-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/testings/routes/forms/index.tsx

@@ -1,3 +0,0 @@
-import Form from './form'
-
-export default Form