npm - mono-jsx - Versions diffs - 0.2.0 → 0.3.0 - Mend

mono-jsx 0.2.0 → 0.3.0

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 (10) hide show

package/README.md CHANGED Viewed

@@ -309,22 +309,63 @@ function Counter(
 }
 ```
-### Using Computed Properties
+### Using App State
-You can use `this.computed` to create computed properties based on state. The computed property will automatically update when the state changes:
+You can define app state by adding `appState` prop to the root `<html>` element. The app state is available in all components via `this.app.<stateKey>`. Changes to the app state will trigger re-renders in all components that use it:
+```tsx
+function Header(this: FC<{}, { title: string }>) {
+  return (
+    <header>
+      <h1>{this.app.title}</h1>
+    </header>
+  );
+}
+function Footer(this: FC<{}, { title: string }>) {
+  return (
+    <footer>
+      <p>(c) 2025 {this.app.title}</p>
+    </footer>
+  );
+}
+function Main(this: FC<{}, { title: string }>) {
+  return (
+    <main>
+      <h1>{this.app.title}</h1>
+      <h2>Changing the title</h2>
+      <input
+        onInput={(evt) => this.app.title = evt.target.value }
+        placeholder="Enter a new title"
+      />
+    </main>
+  );
+}
+export default {
+  fetch: (req) => (
+    <html appState={{ title: "Welcome to mono-jsx!" }}>
+      <Header />
+      <Main />
+      <Footer />
+    </html>
+  ),
+};
+```
+### Using Computed State
+You can use `this.computed` to create computed state based on state. The computed state will automatically update when the state changes:
 ```tsx
 function App(this: FC<{ input: string }>) {
-  this.input = 'Hello, world';
+  this.input = "Welcome to mono-jsx!";
   return (
     <div>
-      <h1>{this.computed(() = this.input + "!")}</h1>
+      <h1>{this.computed(() => this.input + "!")}</h1>
-      <form
-        action={(data: FormData ) => {
-          this.input = data.get("input") as string;
-        }}
-      >
+      <form action={(fd) => this.input = fd.get("input") as string}>
         <input type="text" name="input" value={this.input} />
         <button type="submit">Submit</button>
       </form>
@@ -366,7 +407,7 @@ function App(this: FC) {
 ```tsx
 // ❌ Won't work - state updates won't refresh the view
 function App(this: FC<{ message: string }>) {
-  this.message = "Hello, world";
+  this.message = "Welcome to mono-jsx!";
   return (
     <div>
       <h1 title={this.message + "!"}>{this.message + "!"}</h1>
@@ -379,7 +420,7 @@ function App(this: FC<{ message: string }>) {
 // ✅ Works correctly
 function App(this: FC) {
-  this.message = "Hello, world";
+  this.message = "Welcome to mono-jsx!";
   return (
     <div>
       <h1 title={this.computed(() => this.message + "!")}>{this.computed(() => this.message + "!")}</h1>
@@ -494,22 +535,23 @@ export default {
 You can use the `context` property in `this` to access context values in your components. The context is defined on the root `<html>` element:
 ```tsx
-function Dash(this: FC<{}, { auth: { uuid: string; name: string } }>) {
+function Dash(this: FC<{}, {}, { auth: { uuid: string; name: string } }>) {
   const { auth } = this.context;
   return (
     <div>
-      <h1>Welcome back, {auth.name}!</h1>;
+      <h1>Welcome back, {auth.name}!</h1>
       <p>Your UUID is {auth.uuid}</p>
     </div>
   );
 }
 export default {
-  fetch: (req) => {
-    const auth = doAuth(req);
+  fetch: async (req) => {
+    const auth = await doAuth(req);
     return (
       <html context={{ auth }} request={req}>
-        <Dash />
+        {!auth && <p>Please Login</p>}
+        {auth && <Dash />}
       </html>
     );
   },

package/bin/mono-jsx CHANGED Viewed

@@ -1,8 +1,7 @@
 #!/usr/bin/env node
-import { existsSync } from "node:fs";
-import { readFile, writeFile } from "node:fs/promises";
 import process from "node:process";
+import { setup } from "../setup.mjs";
 switch (process.argv[2]) {
   case "setup":
@@ -11,43 +10,3 @@ switch (process.argv[2]) {
   default:
     process.exit(0);
 }
-async function setup() {
-  if (globalThis.Deno && existsSync("deno.jsonc")) {
-    console.log("Please add the following options to your deno.jsonc file:");
-    console.log(
-      [
-        `{`,
-        `  "compilerOptions": {`,
-        `    %c"jsx": "react-jsx",`,
-        `    "jsxImportSource": "mono-jsx",%c`,
-        `  }`,
-        `}`,
-      ].join("\n"),
-      "color:green",
-      "",
-    );
-    return;
-  }
-  let tsConfigFilename = globalThis.Deno ? "deno.json" : "tsconfig.json";
-  let tsConfig = Object.create(null);
-  try {
-    const data = await readFile(tsConfigFilename, "utf8");
-    tsConfig = JSON.parse(data);
-  } catch {
-    // ignore
-  }
-  const compilerOptions = tsConfig.compilerOptions ?? (tsConfig.compilerOptions = {});
-  if (compilerOptions.jsx === "react-jsx" && compilerOptions.jsxImportSource === "mono-jsx") {
-    console.log("%cmono-jsx already setup.","color:grey");
-    return;
-  }
-  if (!globalThis.Deno) {
-    compilerOptions.module ??= "es2022";
-    compilerOptions.moduleResolution ??= "bundler";
-  }
-  compilerOptions.jsx = "react-jsx";
-  compilerOptions.jsxImportSource = "mono-jsx";
-  await writeFile(tsConfigFilename, JSON.stringify(tsConfig, null, 2));
-  console.log("✅ mono-jsx setup complete.")
-}