lilact 0.5.0 → 0.5.2

package/root/demos/error-callback.jsx

@@ -0,0 +1,20 @@
+module.exports = function() {
+
+  return <>
+      <button onClick={()=>{doUnknown()}}>
+        Press to get Error!
+      </button>
+
+      <p>Notice that the onClick arrow handler body is wrapped in curly brackets. <br/><br/>
+
+        {"<button onClick={()=>{doUnknown()}}>"}<br/><br/>
+
+        JS runtimes currently lack a consistent reporting mechanism for errors produced in eval,
+        and as Lilact runs the transpiled JSX in eval, tracing errors is very difficult.
+        I implemented a tracking mechanism to overcome this, but for the sake of efficiency, 
+        it is block-based and only locates the code that is in  {" {} "} blocks. As a result, the callbacks
+        should be wrapped in a {" {} "} to be tracable. It works otherwise, and the error itself will still 
+        be shown, but it is not possible to display the exact location of the error.</p>
+    </>
+
+}

package/root/demos/error-component-stack.jsx

@@ -0,0 +1,39 @@
+const { ErrorBoundary, useState } = Lilact;
+
+function Demo() {
+  const [mode, setMode] = useState("safe"); // "safe" | "direct" | "deep"
+
+  return (
+    <div>
+      <p>
+        This is the same as ErrorBoundary demo, but without boundary.
+      </p>
+      <div style={{ marginBottom: 12 }}>
+        <button onClick={() => setMode("direct")}>Direct-child throws</button>{" "}
+        <button onClick={() => setMode("deep")}>Deep-child throws</button>
+      </div>
+      {mode === "direct" && <ExplodingChild />}
+      {mode === "deep" && <DeepTree />}
+    </div>
+  );
+}
+
+/* Direct descendant that throws during render */
+function ExplodingChild() {
+  throw new Error("Direct child error");
+  // return <div>won't render</div>;
+}
+
+/* Deeply nested tree where a leaf throws */
+function Leaf() {
+  throw new Error("Deep child error");
+  // return <div>leaf</div>;
+}
+function Middle() {
+  return <div><Leaf /></div>;
+}
+function DeepTree() {
+  return <section><Middle /></section>;
+}
+
+module.exports = Demo;

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,35 +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)'],
-		['error-3.jsx',						'(Error in Callback)'],
+		['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>
 					</>
 }