npm - @reactful/create - Versions diffs - 1.2.23 → 1.2.24 - Mend

@reactful/create 1.2.23 → 1.2.24

Files changed (81) hide show

package/commons/package.json +4 -5
package/package.json +2 -2
package/templates/minimal/builds/about.html +30 -0
package/templates/minimal/builds/bundle.js +34981 -0
package/templates/minimal/builds/bundle.ts +20 -0
package/templates/minimal/builds/clock.html +30 -0
package/templates/minimal/builds/counter.html +37 -0
package/templates/minimal/builds/forms/form.html +48 -0
package/templates/minimal/builds/forms/index.html +48 -0
package/templates/minimal/builds/hello.html +62 -0
package/templates/minimal/builds/htmlx.html +27 -0
package/templates/minimal/builds/htmlx.tsx +13 -0
package/templates/minimal/builds/index.html +98 -11
package/templates/minimal/builds/login.html +48 -0
package/templates/minimal/builds/profile/index.html +55 -0
package/templates/minimal/builds/quotes.html +27 -0
package/templates/minimal/builds/shared.js +76 -0
package/templates/minimal/builds/system.html +28 -0
package/templates/minimal/components/index.ts +1 -2
package/templates/minimal/components/label.tsx +7 -0
package/templates/minimal/index.html +12 -11
package/templates/minimal/index.ts +2 -2
package/templates/minimal/routes/hello.tsx +6 -0
package/templates/minimal/routes/index.tsx +4 -7
package/templates/sampling/apis/auth/db.ts +14 -14
package/templates/sampling/apis/auth/index.ts +27 -27
package/templates/sampling/apis/hello.ts +2 -2
package/templates/sampling/apis/quotes.ts +15 -15
package/templates/sampling/apis/sub/index.ts +2 -2
package/templates/sampling/apis/sub/sub.ts +2 -2
package/templates/sampling/assets/bootstrap-icons.css +4 -4
package/templates/sampling/assets/default.css +93 -93
package/templates/sampling/assets/icon.svg +6 -6
package/templates/sampling/assets/manifest.json +56 -56
package/templates/sampling/assets/markdown.css +273 -273
package/templates/sampling/assets/robots.txt +1 -1
package/templates/sampling/assets/system.css +6 -6
package/templates/sampling/builds/about.html +30 -0
package/templates/sampling/builds/bundle.js +34981 -0
package/templates/sampling/builds/bundle.ts +20 -0
package/templates/sampling/builds/clock.html +30 -0
package/templates/sampling/builds/counter.html +37 -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 +62 -0
package/templates/sampling/builds/htmlx.html +27 -0
package/templates/sampling/builds/htmlx.tsx +13 -0
package/templates/sampling/builds/index.html +98 -98
package/templates/sampling/builds/login.html +48 -0
package/templates/sampling/builds/profile/index.html +55 -0
package/templates/sampling/builds/quotes.html +27 -0
package/templates/sampling/builds/shared.js +76 -0
package/templates/sampling/builds/system.html +28 -0
package/templates/sampling/components/header.tsx +6 -6
package/templates/sampling/components/hello.tsx +8 -8
package/templates/sampling/components/icon.tsx +10 -10
package/templates/sampling/components/index.ts +2 -2
package/templates/sampling/index.html +20 -20
package/templates/sampling/index.ts +18 -18
package/templates/sampling/routes/about.html +12 -12
package/templates/sampling/routes/clock.tsx +32 -36
package/templates/sampling/routes/counter.tsx +16 -7
package/templates/sampling/routes/forms/form.tsx +49 -50
package/templates/sampling/routes/hello.tsx +57 -58
package/templates/sampling/routes/htmlx.html +14 -14
package/templates/sampling/routes/index.md +14 -14
package/templates/sampling/routes/login.tsx +34 -35
package/templates/sampling/routes/profile/detail.css +12 -12
package/templates/sampling/routes/profile/detail.tsx +46 -47
package/templates/sampling/routes/profile/index.tsx +13 -13
package/templates/sampling/routes/profile/profile.css +8 -8
package/templates/sampling/routes/profile/tester.tsx +10 -10
package/templates/sampling/routes/quotes.tsx +1 -1
package/templates/sampling/routes/system.tsx +1 -2
package/templates/sampling/tests/access.spec.ts +29 -29
package/templates/sampling/tests/counter.spec.ts +18 -18
package/templates/sampling/tests/form.spec.ts +50 -50
package/templates/sampling/tests/hello.spec.ts +24 -24
package/templates/sampling/tests/path.test.ts +19 -19
package/templates/minimal/components/hello.tsx +0 -9
package/templates/minimal/components/icon.tsx +0 -11

package/templates/sampling/builds/bundle.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import { GLOBAL_KEY } from '@reactful/client'
+globalThis[GLOBAL_KEY].clients ||= {}
+globalThis[GLOBAL_KEY].clients['/mnt/b/Repositorios/reactful/prototype/routes/counter'] = { off:false, tag:'CountButton' }
+import('/mnt/b/Repositorios/reactful/prototype/routes/counter').then(x => x.CountButton).then(x => globalThis[GLOBAL_KEY].clients['/mnt/b/Repositorios/reactful/prototype/routes/counter'] = x);
+globalThis[GLOBAL_KEY].clients['/mnt/b/Repositorios/reactful/prototype/routes/forms/form'] = { off:false, tag:'default' }
+import('/mnt/b/Repositorios/reactful/prototype/routes/forms/form').then(x => x.default).then(x => globalThis[GLOBAL_KEY].clients['/mnt/b/Repositorios/reactful/prototype/routes/forms/form'] = x);
+globalThis[GLOBAL_KEY].clients['/mnt/b/Repositorios/reactful/prototype/routes/hello'] = { off:false, tag:'Hello' }
+import('/mnt/b/Repositorios/reactful/prototype/routes/hello').then(x => x.default).then(x => globalThis[GLOBAL_KEY].clients['/mnt/b/Repositorios/reactful/prototype/routes/hello'] = x);
+globalThis[GLOBAL_KEY].clients['/mnt/b/Repositorios/reactful/prototype/routes/login'] = { off:false, tag:'default' }
+import('/mnt/b/Repositorios/reactful/prototype/routes/login').then(x => x.default).then(x => globalThis[GLOBAL_KEY].clients['/mnt/b/Repositorios/reactful/prototype/routes/login'] = x);
+globalThis[GLOBAL_KEY].clients['/mnt/b/Repositorios/reactful/prototype/routes/profile/detail'] = { off:false, tag:'Detail' }
+import('/mnt/b/Repositorios/reactful/prototype/routes/profile/detail').then(x => x.Detail).then(x => globalThis[GLOBAL_KEY].clients['/mnt/b/Repositorios/reactful/prototype/routes/profile/detail'] = x);
+await import('/mnt/b/Repositorios/reactful/node_modules/@reactful/client/renders/index').then(x => x.default());

package/templates/sampling/builds/clock.html ADDED Viewed

@@ -0,0 +1,30 @@
+<!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/default.css">
+      <link rel="stylesheet" href="/assets/markdown.css">
+      <link rel="stylesheet" href="/assets/bootstrap-icons.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/prototype/builds/shared.js'></script>
+      <script type='module' src='/mnt/b/Repositorios/reactful/prototype/builds/bundle.js'></script></head>
+   <body>
+      <div id='root'>
+         <h1 tag="h1" uid="3" class="TimeZone">World Clock</h1>
+         <h2 tag="h2" uid="3" class="TimeZone">Europe/Amistedan timezone</h2>
+         <h3 style="color:yellow" tag="h3" uid="3" class="TimeZone"> <!-- -->2024-5-6<!-- -->
+            <!-- -->15:50:18<!-- --> </h3>
+         <h4
+            await="{&quot;name&quot;:&quot;InnerAsyncComponent&quot;,&quot;path&quot;:&quot;/mnt/b/Repositorios/reactful/prototype/routes/clock.tsx&quot;}"
+            tag="h4" uid="3" class="TimeZone">loading...</h4>
+      </div>
+   </body>
+</html>

package/templates/sampling/builds/counter.html ADDED Viewed

@@ -0,0 +1,37 @@
+<!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/default.css">
+      <link rel="stylesheet" href="/assets/markdown.css">
+      <link rel="stylesheet" href="/assets/bootstrap-icons.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/prototype/builds/shared.js'></script>
+      <script type='module' src='/mnt/b/Repositorios/reactful/prototype/builds/bundle.js'></script></head>
+   <body>
+      <div id='root'>
+         <h1 style="color:wheat" tag="Header" uid="2" class="Header" own="Header">
+            <h1 style="color:wheat">Counter</h1>
+         </h1>
+         <jsx complex="{&quot;person&quot;:{&quot;name&quot;:&quot;john&quot;}}" tag="CountButton"
+            uid="2" own="default" src="/mnt/b/Repositorios/reactful/prototype/routes/counter"
+            hidden class="default"
+            events="{&quot;onEvent&quot;:&quot;() =&gt; console.log(\&quot;function props works!\&quot;)&quot;}">
+            <button style="padding:20px">COUNTED: <b>0</b>
+            </button>
+            <hr />tuple: <code>
+            </code>
+            <br />event: <code>fails...</code>
+         </jsx>
+         <h6 tag="h6" uid="2" class="default" hidden>DONT SHOW ME!</h6>
+      </div>
+   </body>
+</html>

package/templates/sampling/builds/forms/form.html ADDED Viewed

@@ -0,0 +1,48 @@
+<!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/default.css">
+      <link rel="stylesheet" href="/assets/markdown.css">
+      <link rel="stylesheet" href="/assets/bootstrap-icons.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/prototype/builds/shared.js'></script>
+      <script type='module' src='/mnt/b/Repositorios/reactful/prototype/builds/bundle.js'></script></head>
+   <body>
+      <div id='root'>
+         <jsx tag uid="1" own="default"
+            src="/mnt/b/Repositorios/reactful/prototype/routes/forms/form" 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/templates/sampling/builds/forms/index.html ADDED Viewed

@@ -0,0 +1,48 @@
+<!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/default.css">
+      <link rel="stylesheet" href="/assets/markdown.css">
+      <link rel="stylesheet" href="/assets/bootstrap-icons.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/prototype/builds/shared.js'></script>
+      <script type='module' src='/mnt/b/Repositorios/reactful/prototype/builds/bundle.js'></script></head>
+   <body>
+      <div id='root'>
+         <jsx tag uid="1" own="default"
+            src="/mnt/b/Repositorios/reactful/prototype/routes/forms/form" 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/templates/sampling/builds/hello.html ADDED Viewed

@@ -0,0 +1,62 @@
+<!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/default.css">
+      <link rel="stylesheet" href="/assets/markdown.css">
+      <link rel="stylesheet" href="/assets/bootstrap-icons.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/prototype/builds/shared.js'></script>
+      <script type='module' src='/mnt/b/Repositorios/reactful/prototype/builds/bundle.js'></script></head>
+   <body>
+      <div id='root'>
+         <jsx tag="Hello" uid="1" own="default"
+            src="/mnt/b/Repositorios/reactful/prototype/routes/hello" hidden class="default">
+            <h1 style="color:wheat">Hello Forms</h1>
+            <main gaps="0 10px" cols="1" class="hello">
+               <label>
+                  <b>LOCAL state </b> <code>function(props)</code>
+                  <br />
+                  <input id="1" data="[object Object]" bind="value" placeholder="{props}" />
+                  <input id="1.1" bind="value" placeholder="default" />
+                  <input id="1.1.1" placeholder="inner" style="text-align:right"
+                     data="[object Object]" bind="value" />
+                  <label> = </label>
+               </label>
+               <label>
+                  <b>GLOBAL state</b> <code>function(props, <!-- -->{ store }<!-- -->)</code>
+                  <br />
+                  <input id="2" data="[object Object]" bind="value" placeholder="outer" />
+                  <input id="2.1" placeholder="inner" bind="value" />
+               </label>
+               <label>
+                  <b>ORBITAL state</b> <code>useStore(...) + @client(true, ...) </code>
+                  <br />
+                  <input id="3" data="[object Object]" bind="value" placeholder="outer" />
+                  <input id="3.1" placeholder="inner" data="[object Object]" bind="value" />
+                  <input id="3.2" style="text-align:right" data="[object Object]" bind="value"
+                     placeholder="other" /> = <!-- -->99</label>
+            </main>
+            <br />
+            <hr />
+            <code>
+               <strong>local</strong>: <label id="l1">
+               </label>
+               <br />
+               <strong>global</strong>: <label id="l2">
+               </label>
+               <br />
+               <strong>orbital</strong>: <label id="l3">11</label>
+            </code>
+         </jsx>
+      </div>
+   </body>
+</html>

package/templates/sampling/builds/htmlx.html ADDED Viewed

@@ -0,0 +1,27 @@
+<!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/default.css">
+      <link rel="stylesheet" href="/assets/markdown.css">
+      <link rel="stylesheet" href="/assets/bootstrap-icons.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/prototype/builds/shared.js'></script>
+      <script type='module' src='/mnt/b/Repositorios/reactful/prototype/builds/bundle.js'></script></head>
+   <body>
+      <div id='root'>
+         <h1 style="color:wheat">HTML-X</h1>
+         <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>
+      </div>
+   </body>
+</html>

package/templates/sampling/builds/htmlx.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Header } from '../components/header'
+export default function() {
+	return <>
+   <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>
+</>
+}

package/templates/sampling/builds/index.html CHANGED Viewed

@@ -1,99 +1,99 @@
-<!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/bootstrap-icons.css">
-      <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/experiment/builds/shared.js'></script>
-      <script type='module' src='/mnt/b/Repositorios/reactful/experiment/builds/bundle.js'></script></head>
-   <body>
-      <div id='root'>
-         <h1>Welcome</h1>
-         <blockquote>
-            <p>with markdown (powered by marked)</p>
-         </blockquote>
-         <table>
-            <thead>
-               <tr>
-                  <th align="right">
-                  </th>
-                  <th>
-                  </th>
-               </tr>
-            </thead>
-            <tbody>
-               <tr>
-                  <td align="right">
-                     <a href="/about">About</a>
-                  </td>
-                  <td>Static generation (default)</td>
-               </tr>
-               <tr>
-                  <td align="right">
-                     <a href="/clock">Clock</a>
-                  </td>
-                  <td>Dynamic generation (with lazy)</td>
-               </tr>
-               <tr>
-                  <td align="right">
-                     <a href="/htmlx">HTML-X</a>
-                  </td>
-                  <td>HTML with JSX using link[type="component"]</td>
-               </tr>
-               <tr>
-                  <td align="right">
-                     <a href="/system">System</a>
-                  </td>
-                  <td>Server component</td>
-               </tr>
-               <tr>
-                  <td align="right">
-                     <a href="/quotes">Quotes</a>
-                  </td>
-                  <td>Periodic genreation</td>
-               </tr>
-               <tr>
-                  <td align="right">
-                     <a href="/counter">Counter</a>
-                  </td>
-                  <td>Client component</td>
-               </tr>
-               <tr>
-                  <td align="right">
-                     <a href="/hello">Hello</a>
-                  </td>
-                  <td>Stateful object + data bind props</td>
-               </tr>
-               <tr>
-                  <td align="right">
-                     <a href="/forms">Forms</a>
-                  </td>
-                  <td>reactful forms + validation API + RESTful action</td>
-               </tr>
-               <tr>
-                  <td align="right">
-                     <a href="/login">Login</a>
-                  </td>
-                  <td>reactful forms RESTful action authentication</td>
-               </tr>
-               <tr>
-                  <td align="right">
-                     <a href="/profile/123">Profile</a>
-                  </td>
-                  <td>Parametric (dynamic) routes with modular CSS</td>
-               </tr>
-            </tbody>
-         </table>
-      </div>
-   </body>
+<!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/default.css">
+      <link rel="stylesheet" href="/assets/markdown.css">
+      <link rel="stylesheet" href="/assets/bootstrap-icons.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/prototype/builds/shared.js'></script>
+      <script type='module' src='/mnt/b/Repositorios/reactful/prototype/builds/bundle.js'></script></head>
+   <body>
+      <div id='root'>
+         <h1>Welcome</h1>
+         <blockquote>
+            <p>with markdown (powered by marked)</p>
+         </blockquote>
+         <table>
+            <thead>
+               <tr>
+                  <th align="right">
+                  </th>
+                  <th>
+                  </th>
+               </tr>
+            </thead>
+            <tbody>
+               <tr>
+                  <td align="right">
+                     <a href="/about">About</a>
+                  </td>
+                  <td>Static generation (default)</td>
+               </tr>
+               <tr>
+                  <td align="right">
+                     <a href="/clock">Clock</a>
+                  </td>
+                  <td>Dynamic generation (with lazy)</td>
+               </tr>
+               <tr>
+                  <td align="right">
+                     <a href="/htmlx">HTML-X</a>
+                  </td>
+                  <td>HTML with JSX using link[type="component"]</td>
+               </tr>
+               <tr>
+                  <td align="right">
+                     <a href="/system">System</a>
+                  </td>
+                  <td>Server component</td>
+               </tr>
+               <tr>
+                  <td align="right">
+                     <a href="/quotes">Quotes</a>
+                  </td>
+                  <td>Periodic genreation</td>
+               </tr>
+               <tr>
+                  <td align="right">
+                     <a href="/counter">Counter</a>
+                  </td>
+                  <td>Client component</td>
+               </tr>
+               <tr>
+                  <td align="right">
+                     <a href="/hello">Hello</a>
+                  </td>
+                  <td>Stateful object + data bind props</td>
+               </tr>
+               <tr>
+                  <td align="right">
+                     <a href="/forms">Forms</a>
+                  </td>
+                  <td>reactful forms + validation API + RESTful action</td>
+               </tr>
+               <tr>
+                  <td align="right">
+                     <a href="/login">Login</a>
+                  </td>
+                  <td>reactful forms RESTful action authentication</td>
+               </tr>
+               <tr>
+                  <td align="right">
+                     <a href="/profile/123">Profile</a>
+                  </td>
+                  <td>Parametric (dynamic) routes with modular CSS</td>
+               </tr>
+            </tbody>
+         </table>
+      </div>
+   </body>
 </html>

package/templates/sampling/builds/login.html ADDED Viewed

@@ -0,0 +1,48 @@
+<!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/default.css">
+      <link rel="stylesheet" href="/assets/markdown.css">
+      <link rel="stylesheet" href="/assets/bootstrap-icons.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/prototype/builds/shared.js'></script>
+      <script type='module' src='/mnt/b/Repositorios/reactful/prototype/builds/bundle.js'></script></head>
+   <body>
+      <div id='root'>
+         <jsx tag uid="1" own="default" src="/mnt/b/Repositorios/reactful/prototype/routes/login"
+            hidden class="default">
+            <h1>
+               <i class="bi bi-undefined bi-user" title>
+               </i>Login</h1>
+            <progress hidden>loading...</progress>
+            <form method="POST" action="http://localhost:3000/api/auth" bearer="access_token">
+               <section cols="1">
+                  <label>UserName<input bind="username" />
+                  </label>
+                  <label>PassWord<input type="password" bind="password" />
+                  </label>
+               </section>
+               <button>Submit</button>
+            </form>
+            <fieldset>
+               <legend>ERROR</legend>
+               <ul>
+               </ul>
+            </fieldset>
+            <br />
+            <fieldset style="word-break:break-all">
+               <legend>token</legend>
+            </fieldset>
+         </jsx>
+      </div>
+   </body>
+</html>

package/templates/sampling/builds/profile/index.html ADDED Viewed

@@ -0,0 +1,55 @@
+<!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/default.css">
+      <link rel="stylesheet" href="/assets/markdown.css">
+      <link rel="stylesheet" href="/assets/bootstrap-icons.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/prototype/builds/shared.js'></script>
+      <script type='module' src='/mnt/b/Repositorios/reactful/prototype/builds/bundle.js'></script></head>
+   <body>
+      <div id='root'>
+         <h1 tag="h1" uid="2" class="default">Profile</h1>
+         <jsx tag="Detail" uid="2" own="default"
+            src="/mnt/b/Repositorios/reactful/prototype/routes/profile/detail" 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="2" class="default" />
+         <p tag="p" uid="2" class="default">modular CSS chainging to red</p>
+      </div>
+   </body>
+</html>

package/templates/sampling/builds/quotes.html ADDED Viewed

@@ -0,0 +1,27 @@
+<!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/default.css">
+      <link rel="stylesheet" href="/assets/markdown.css">
+      <link rel="stylesheet" href="/assets/bootstrap-icons.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/prototype/builds/shared.js'></script>
+      <script type='module' src='/mnt/b/Repositorios/reactful/prototype/builds/bundle.js'></script></head>
+   <body>
+      <div id='root'>
+         <h1>My custom error component</h1>
+         <p> <!-- -->Unable to connect. Is the computer able to access the url?<!-- --> </p>
+         <hr />
+         <code>it will be regenerated in each 30min(press F5 to check)</code>
+      </div>
+   </body>
+</html>