lilact 0.5.1 → 0.6.0

package/root/demos/form-elements.jsx

@@ -2,7 +2,7 @@ module.exports = function() {
 
   return <>
 
-    <p>Boolean attributes: literal JSX -> Lilact correct; pasted-as-HTML examples below intentionally look wrong</p>
+    <p>Boolean attributes: literal JSX -> Lilact correct; HTML examples below intentionally look wrong</p>
     <div style={{ fontFamily: "sans-serif" }}>
       <h3>Boolean: disabled={false} (should NOT render disabled)</h3>
       <input disabled={false} />
@@ -76,17 +76,17 @@ module.exports = function() {
       <hr />
 
       {/* JSX camelCase: works in Lilact; if pasted literally into HTML it’s “visibly wrong” because HTML won’t interpret JSX props */}
-      <h3>JSX attribute casing: className="..." (Lilact applies class; pasted HTML uses className literally)</h3>
+      <h3>JSX attribute casing: className="..." (Lilact applies class; HTML uses className literally)</h3>
       <div className="demo" style={{ padding: 8, border: "1px solid #888" }}>
         className target
       </div>
 
-      <h3>HTML uses class; Lilact uses className (pasted HTML would ignore className)</h3>
+      <h3>HTML uses class; Lilact uses className (HTML would ignore className)</h3>
       <div class="demo" style={{ padding: 8, border: "1px solid #888" }}>
-        (This one uses class, so pasted HTML is correct.)
+        (This one uses class, so HTML is correct.)
       </div>
 
-      <h3>JSX attribute casing: htmlFor="x" (Lilact links label; pasted HTML uses htmlFor literally)</h3>
+      <h3>JSX attribute casing: htmlFor="x" (Lilact links label; HTML uses htmlFor literally)</h3>
       <label htmlFor="x_Lilact">Click label (Lilact should focus input)</label>
       <input id="x_Lilact" type="text" placeholder="Focus target" />
 
@@ -94,16 +94,16 @@ module.exports = function() {
       <label htmlFor="y_html">Click label (HTML should focus input)</label>
       <input id="y_html" type="text" placeholder="Focus target" />
 
-      <h3>JSX: tabIndex={2} (Lilact sets focus order; pasted HTML won’t)</h3>
+      <h3>JSX: tabIndex={2} (Lilact sets focus order; HTML won’t)</h3>
       <input tabIndex={2} defaultValue="tabIndex Lilact" />
 
-      <h3>JSX: readOnly={true} (Lilact makes readonly; pasted HTML won’t interpret readonly={true})</h3>
+      <h3>JSX: readOnly={true} (Lilact makes readonly; HTML won’t interpret readonly={true})</h3>
       <input readOnly={true} defaultValue="readonly (Lilact)" />
 
-      <h3>JSX: maxLength={5} (Lilact enforces length; pasted HTML won’t parse maxLength={5})</h3>
+      <h3>JSX: maxLength={5} (Lilact enforces length; HTML won’t parse maxLength={5})</h3>
       <input maxLength={5} defaultValue="123456789" />
       <p style={{ margin: "4px 0 0" }}>
-        Type/try to enter more: Lilact will limit to 5 chars; pasted HTML won’t.
+        Type/try to enter more: Lilact will limit to 5 chars; HTML won’t.
       </p>
     </div>
   </>

package/root/index.html

@@ -65,7 +65,9 @@ injectGlobal({ 	code: { 	whiteSpace: "pre !important",
 												padding: "10px 0",
 												fontSize: "14px !important",
 												display: "block",
-												overflowWrap: "anywhere" } 
+												overflowWrap: "anywhere" },
+								p: {padding: "10px"},
+								body: {padding: "20px"}
 							});
 
 const outer = css({
@@ -125,7 +127,7 @@ function DemoView({ file })
 	}
 	
 	return 	<>
-						<button onClick={()=>setOpen(!isOpen)} className={collapsible}>
+						<button onClick={()=>setOpen(!isOpen)} className={collapsible} type="button">
 							<span className={left}>{ (isOpen?'- ':'+ ') + file[0] + ' '}</span>
 							<b className={right}>{file[1]}</b>
 						</button>
@@ -145,14 +147,11 @@ function DemoView({ file })
 
 function DemoBlock({file}) 
 {
-	return 	<> 
-						<div>
+	return <div key={file[0]}>
 							<Suspense fallback={<Spinner/>}>
 					      <DemoView file={file} />
 							</Suspense>
-						</div>
-					</>
-	;
+					</div>
 }
 
 
@@ -175,36 +174,41 @@ function App()
 		['transition.jsx',			'( useState, Transition )'],
 		['lazy.jsx',						'( lazy, require, Suspene, Spinner )'],
 		['form-elements.jsx',		'()'],
-		['error-boundary.jsx',				'( ErrorBoundary, useState )'],
-		['error-1.jsx',						'-- JSX Parser Error --'],
-		['error-2.jsx',						'-- Error in Component initialization --'],
-		// ['error-3.jsx',						'-- Error in Callback --'],
-		// ['error-4.jsx',						'-- Error Component Stack --'],
+		['error-boundary.jsx',						'( ErrorBoundary, useState )'],
+		['error-parser.jsx',							'-- JSX Parser Error --'],
+		['error-init.jsx',								'-- Error in Component initialization --'],
+		['error-component-stack.jsx',			'-- Error Component Stack --'],
+		['error-callback.jsx',						'-- Error in Callback --'],
 	];
 
 	return 	<>
-						<h3>Lilact Demos</h3>
-						
+						<center>
+						<img src="icon.png" width="128"/><br/>
+						<h1>Lilact Demos</h1>
+
 						<p>These scripts are transpiled and run directly in your browser. You have already loaded Lilact completely!</p>
 
 						<p>These examples are not meant to be pretty.
 
 							These are bare minimum examples of the React API implemented in Lilact.</p>
 
-						<p>Note that we are using the development version here to have proptypes warnings.
-							If you switch to production mode proptypes won't check anything.</p>
+						<p>Note that we are using the development version here to have PropTypes warnings.
+							If you switch to production mode PropTypes won't check anything.</p>
+
+						<p>In many examples like boundary or PropTypes you should have your browser console opened to see the logs.</p>
 
-						<p>In many examples like boundary or proptypes you should have your browser console opened to see the logs.</p>
+						<p><b>Error examples other than ErrorBoundary demo will cause the page to stop working, as there is no
+						boundary in place.<br/>It is natural of course, and you should refresh the page to continue testing.</b></p>
 						
 						<p>See the{" "}<a href="../">Lilact Documentation</a>{" "}for more info.</p>
-
+						</center>
 						{demos.map((x)=><DemoBlock file={x}/>)}
 
 						<hr/>
 						<p>
-Copyright (C) 2024-2026 Arash Kazemi {" <contact.arash.kazemi@gmail.com>"}. All rights reserved.
-<br/><br/>
-Lilact project is subject to the terms of BSD-2-Clause License. See the `LICENSE.TXT` file for more details.
+							Copyright (C) 2024-2026 Arash Kazemi {" <contact.arash.kazemi@gmail.com>"}. All rights reserved.
+							<br/><br/>
+							Lilact project is subject to the terms of BSD-2-Clause License. See the `LICENSE.TXT` file for more details.
 						</p>
 					</>
 }