@blokjs/react 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,149 @@
+# @blokjs/react
+
+## 0.2.0
+
+### Minor Changes
+
+- Initial public release of Blok packages.
+
+  This release includes:
+
+  - Core packages: @blokjs/shared, @blokjs/helper, @blokjs/runner
+  - Node packages: @blokjs/api-call, @blokjs/if-else, @blokjs/react
+  - Trigger packages: pubsub, queue, webhook, websocket, worker, cron, grpc
+  - CLI tool: blokctl
+  - Editor support: @blokjs/lsp-server, @blokjs/syntax
+
+### Patch Changes
+
+- Updated dependencies
+  - @blokjs/shared@0.2.0
+  - @blokjs/helper@0.2.0
+  - @blokjs/runner@0.2.0
+
+## 0.0.17
+
+### Patch Changes
+
+- Updated dependencies
+  - @blokjs/runner@0.1.26
+
+## 0.0.16
+
+### Patch Changes
+
+- Updated dependencies
+  - @blokjs/runner@0.1.25
+
+## 0.0.15
+
+### Patch Changes
+
+- Updated dependencies
+  - @blokjs/runner@0.1.24
+
+## 0.0.14
+
+### Patch Changes
+
+- Updated dependencies
+  - @blokjs/runner@0.1.23
+
+## 0.0.13
+
+### Patch Changes
+
+- Updated dependencies
+  - @blokjs/runner@0.1.22
+
+## 0.0.12
+
+### Patch Changes
+
+- Updated dependencies
+  - @blokjs/runner@0.1.21
+
+## 0.0.11
+
+### Patch Changes
+
+- Updated dependencies
+  - @blokjs/helper@0.1.5
+  - @blokjs/runner@0.1.20
+
+## 0.0.10
+
+### Patch Changes
+
+- Updated dependencies
+  - @blokjs/runner@0.1.19
+  - @blokjs/shared@0.0.9
+
+## 0.0.9
+
+### Patch Changes
+
+- Added examples and create project' command to include examples and 'create node' command with options for type ('module' or 'class') and template ('class' or 'ui')
+- Updated dependencies
+  - @blokjs/runner@0.1.18
+  - @blokjs/shared@0.0.8
+
+## 0.0.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @blokjs/runner@0.1.17
+
+## 0.0.7
+
+### Patch Changes
+
+- Added support for YAML, XML and TOML in the workflow file. Upgraded package version recommended by Dependabot.
+- Updated dependencies
+  - @blokjs/helper@0.1.4
+  - @blokjs/runner@0.1.16
+  - @blokjs/shared@0.0.7
+
+## 0.0.6
+
+### Patch Changes
+
+- Improved the BlokService base class to accept a InputType. This force developer to always create a type to define the Node handle input. Added unit test for pending projects like if-else and api-call.
+- Updated dependencies
+  - @blokjs/runner@0.1.15
+
+## 0.0.5
+
+### Patch Changes
+
+- Added configuration options
+
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @blokjs/shared@0.0.6
+  - @blokjs/runner@0.1.14
+
+## 0.0.3
+
+### Patch Changes
+
+- Add index.html in the package
+
+## 0.0.2
+
+### Patch Changes
+
+- fixed package.json and dependabot error
+
+## 0.0.1
+
+### Patch Changes
+
+- Implemented a react node and the chatbot demo page
+- Updated dependencies
+  - @blokjs/runner@0.1.13
+  - @blokjs/shared@0.0.5

package/README.md

@@ -0,0 +1 @@
+# Node Documentation

package/app/index.jsx

@@ -0,0 +1,74 @@
+// public/app.js
+const { useState, useEffect } = React;
+
+function ChatBot() {
+	const [messages, setMessages] = useState([]);
+	const [input, setInput] = useState("");
+	const ctx = JSON.parse(atob(ctx_base64));
+
+	useEffect(() => {
+		setMessages((prevMessages) => [
+			...prevMessages,
+			{ text: "Hello! Let share a fact about cats. Ok?", sender: "bot", id: Math.floor(Math.random() * 100) },
+		]);
+		setMessages((prevMessages) => [
+			...prevMessages,
+			{ text: ctx.response.data.fact, sender: "bot", id: Math.floor(Math.random() * 100) },
+		]);
+	}, []);
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		if (input.trim()) {
+			setMessages([...messages, { text: input, sender: "user", id: Math.floor(Math.random() * 100) }]);
+			setInput("");
+
+			// Simulate bot response
+			setTimeout(() => {
+				setMessages((prevMessages) => [
+					...prevMessages,
+					{ text: `You said: ${input}`, sender: "bot", id: Math.floor(Math.random() * 100) },
+				]);
+			}, 500);
+		}
+	};
+
+	return (
+		<div className="bg-white rounded-lg shadow-md w-96 overflow-hidden">
+			<h1 className="bg-blue-500 text-white text-center py-4 text-xl font-bold">
+				Simple {ctx.request.params.workflow}
+			</h1>
+			<div className="h-96 overflow-y-auto p-4 space-y-4">
+				{messages.map((message, index) => (
+					<div
+						key={message.id}
+						className={`p-2 rounded-lg ${
+							message.sender === "user" ? "bg-blue-500 text-white ml-auto" : "bg-gray-200 text-gray-800"
+						} max-w-[80%] ${message.sender === "user" ? "text-right" : "text-left"}`}
+					>
+						{message.text}
+					</div>
+				))}
+			</div>
+			<form onSubmit={handleSubmit} className="p-4 border-t border-gray-200">
+				<div className="flex">
+					<input
+						type="text"
+						value={input}
+						onChange={(e) => setInput(e.target.value)}
+						placeholder="Type your message..."
+						className="flex-grow px-3 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+					/>
+					<button
+						type="submit"
+						className="bg-blue-500 text-white px-4 py-2 rounded-r-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+					>
+						Send
+					</button>
+				</div>
+			</form>
+		</div>
+	);
+}
+
+ReactDOM.render(<ChatBot />, document.getElementById("root"));

package/babel.config.json

@@ -0,0 +1,12 @@
+{
+	"presets": [
+		[
+			"@babel/preset-env",
+			{
+				"useBuiltIns": false
+			}
+		],
+		["@babel/preset-react"],
+		["minify"]
+	]
+}

package/config.json

@@ -0,0 +1,56 @@
+{
+	"name": "node-name",
+	"version": "1.0.0",
+	"description": "",
+	"group": "API",
+	"config": {
+		"type": "object",
+		"properties": {
+			"inputs": {
+				"type": "object",
+				"properties": {},
+				"required": []
+			}
+		},
+		"required": ["inputs"],
+		"example": {
+			"inputs": {
+				"properties": {
+					"url": "https://countriesnow.space/api/v0.1/countries/capital",
+					"method": "POST",
+					"headers": {
+						"Content-Type": "application/json"
+					},
+					"body": {
+						"data": "Hello World"
+					}
+				}
+			}
+		}
+	},
+	"input": {
+		"anyOf": [
+			{
+				"type": "object"
+			},
+			{
+				"type": "array"
+			},
+			{
+				"type": "string"
+			}
+		],
+		"description": "This node accepts an object as input from the previous node or request body"
+	},
+	"output": {
+		"type": "object",
+		"description": "The response from the API call"
+	},
+	"steps": {
+		"type": "boolean",
+		"default": false
+	},
+	"functions": {
+		"type": "array"
+	}
+}

package/dist/app/index.d.ts

@@ -0,0 +1,3 @@
+declare function ChatBot(): React.JSX.Element;
+declare const useState: typeof React.useState;
+declare const useEffect: typeof React.useEffect;

package/dist/app/index.js

@@ -0,0 +1,52 @@
+"use strict";
+// public/app.js
+const { useState, useEffect } = React;
+function ChatBot() {
+    const [messages, setMessages] = useState([]);
+    const [input, setInput] = useState("");
+    const ctx = JSON.parse(atob(ctx_base64));
+    useEffect(() => {
+        setMessages((prevMessages) => [
+            ...prevMessages,
+            { text: "Hello! Let share a fact about cats. Ok?", sender: "bot", id: Math.floor(Math.random() * 100) },
+        ]);
+        setMessages((prevMessages) => [
+            ...prevMessages,
+            { text: ctx.response.data.fact, sender: "bot", id: Math.floor(Math.random() * 100) },
+        ]);
+    }, []);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (input.trim()) {
+            setMessages([...messages, { text: input, sender: "user", id: Math.floor(Math.random() * 100) }]);
+            setInput("");
+            // Simulate bot response
+            setTimeout(() => {
+                setMessages((prevMessages) => [
+                    ...prevMessages,
+                    { text: `You said: ${input}`, sender: "bot", id: Math.floor(Math.random() * 100) },
+                ]);
+            }, 500);
+        }
+    };
+    return (<div className="bg-white rounded-lg shadow-md w-96 overflow-hidden">
+			<h1 className="bg-blue-500 text-white text-center py-4 text-xl font-bold">
+				Simple {ctx.request.params.workflow}
+			</h1>
+			<div className="h-96 overflow-y-auto p-4 space-y-4">
+				{messages.map((message, index) => (<div key={message.id} className={`p-2 rounded-lg ${message.sender === "user" ? "bg-blue-500 text-white ml-auto" : "bg-gray-200 text-gray-800"} max-w-[80%] ${message.sender === "user" ? "text-right" : "text-left"}`}>
+						{message.text}
+					</div>))}
+			</div>
+			<form onSubmit={handleSubmit} className="p-4 border-t border-gray-200">
+				<div className="flex">
+					<input type="text" value={input} onChange={(e) => setInput(e.target.value)} placeholder="Type your message..." className="flex-grow px-3 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"/>
+					<button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded-r-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
+						Send
+					</button>
+				</div>
+			</form>
+		</div>);
+}
+ReactDOM.render(<ChatBot />, document.getElementById("root"));
+//# sourceMappingURL=index.js.map

package/dist/app/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../app/index.jsx"],"names":[],"mappings":"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"}

package/dist/app/index.merged.min.js

@@ -0,0 +1,2 @@
+"use strict";// public/app.js
+function _toConsumableArray(a){return _arrayWithoutHoles(a)||_iterableToArray(a)||_unsupportedIterableToArray(a)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(a){if("undefined"!=typeof Symbol&&null!=a[Symbol.iterator]||null!=a["@@iterator"])return Array.from(a)}function _arrayWithoutHoles(a){if(Array.isArray(a))return _arrayLikeToArray(a)}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_unsupportedIterableToArray(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(b,c){if(b){if("string"==typeof b)return _arrayLikeToArray(b,c);var a={}.toString.call(b).slice(8,-1);return"Object"===a&&b.constructor&&(a=b.constructor.name),"Map"===a||"Set"===a?Array.from(b):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?_arrayLikeToArray(b,c):void 0}}function _arrayLikeToArray(b,c){(null==c||c>b.length)&&(c=b.length);for(var d=0,f=Array(c);d<c;d++)f[d]=b[d];return f}function _iterableToArrayLimit(b,c){var d=null==b?null:"undefined"!=typeof Symbol&&b[Symbol.iterator]||b["@@iterator"];if(null!=d){var g,h,j,k,l=[],a=!0,m=!1;try{if(j=(d=d.call(b)).next,0===c){if(Object(d)!==d)return;a=!1}else for(;!(a=(g=j.call(d)).done)&&(l.push(g.value),l.length!==c);a=!0);}catch(a){m=!0,h=a}finally{try{if(!a&&null!=d["return"]&&(k=d["return"](),Object(k)!==k))return}finally{if(m)throw h}}return l}}function _arrayWithHoles(a){if(Array.isArray(a))return a}var _React=React,useState=_React.useState,useEffect=_React.useEffect;function ChatBot(){var a=Math.floor,b=useState([]),c=_slicedToArray(b,2),d=c[0],f=c[1],g=useState(""),h=_slicedToArray(g,2),i=h[0],j=h[1],k=JSON.parse(atob(ctx_base64));useEffect(function(){f(function(b){return[].concat(_toConsumableArray(b),[{text:"Hello! Let share a fact about cats. Ok?",sender:"bot",id:a(100*Math.random())}])}),f(function(b){return[].concat(_toConsumableArray(b),[{text:k.response.data.fact,sender:"bot",id:a(100*Math.random())}])})},[]);return/*#__PURE__*/React.createElement("div",{className:"bg-white rounded-lg shadow-md w-96 overflow-hidden"},/*#__PURE__*/React.createElement("h1",{className:"bg-blue-500 text-white text-center py-4 text-xl font-bold"},"Simple ",k.request.params.workflow),/*#__PURE__*/React.createElement("div",{className:"h-96 overflow-y-auto p-4 space-y-4"},d.map(function(a){return/*#__PURE__*/React.createElement("div",{key:a.id,className:"p-2 rounded-lg ".concat("user"===a.sender?"bg-blue-500 text-white ml-auto":"bg-gray-200 text-gray-800"," max-w-[80%] ").concat("user"===a.sender?"text-right":"text-left")},a.text)})),/*#__PURE__*/React.createElement("form",{onSubmit:function(b){b.preventDefault(),i.trim()&&(f([].concat(_toConsumableArray(d),[{text:i,sender:"user",id:a(100*Math.random())}])),j(""),setTimeout(function(){f(function(b){return[].concat(_toConsumableArray(b),[{text:"You said: ".concat(i),sender:"bot",id:a(100*Math.random())}])})},500))},className:"p-4 border-t border-gray-200"},/*#__PURE__*/React.createElement("div",{className:"flex"},/*#__PURE__*/React.createElement("input",{type:"text",value:i,onChange:function(a){return j(a.target.value)},placeholder:"Type your message...",className:"flex-grow px-3 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"}),/*#__PURE__*/React.createElement("button",{type:"submit",className:"bg-blue-500 text-white px-4 py-2 rounded-r-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"},"Send"))))}ReactDOM.render(/*#__PURE__*/React.createElement(ChatBot,null),document.getElementById("root"));

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+/**
+ * React Node - Function-First Implementation
+ *
+ * Renders React applications by loading a compiled React bundle and rendering it in an HTML template.
+ * Migrated from class-based to function-first pattern using defineNode.
+ */
+import { z } from "zod";
+declare const inputSchema: z.ZodObject<{
+    react_app: z.ZodString;
+    title: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+    scripts: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+    metas: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+    index_html: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+    styles: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+    root_element: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+}, "strip", z.ZodTypeAny, {
+    react_app: string;
+    title: string;
+    scripts: string;
+    metas: string;
+    index_html: string;
+    styles: string;
+    root_element: string;
+}, {
+    react_app: string;
+    title?: string | undefined;
+    scripts?: string | undefined;
+    metas?: string | undefined;
+    index_html?: string | undefined;
+    styles?: string | undefined;
+    root_element?: string | undefined;
+}>;
+declare const outputSchema: z.ZodString;
+declare const _default: import("@blokjs/runner").FunctionNode<z.ZodObject<{
+    react_app: z.ZodString;
+    title: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+    scripts: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+    metas: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+    index_html: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+    styles: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+    root_element: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+}, "strip", z.ZodTypeAny, {
+    react_app: string;
+    title: string;
+    scripts: string;
+    metas: string;
+    index_html: string;
+    styles: string;
+    root_element: string;
+}, {
+    react_app: string;
+    title?: string | undefined;
+    scripts?: string | undefined;
+    metas?: string | undefined;
+    index_html?: string | undefined;
+    styles?: string | undefined;
+    root_element?: string | undefined;
+}>, z.ZodString>;
+export default _default;
+export type InputType = z.infer<typeof inputSchema>;
+export type OutputType = z.infer<typeof outputSchema>;

package/dist/index.html

@@ -0,0 +1,23 @@
+<!-- views/index.ejs -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <%-metas%>
+    <title><%=title%></title>
+    <%-styles%>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script type="text/javascript">
+        var ctx_base64 = '<%=ctx%>';
+    </script>
+</head>
+<body class="bg-gray-100 flex items-center justify-center min-h-screen">
+    <div id="<%=root_element%>"></div>
+    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+    <%-scripts%>
+    <%-react_app%>
+</body>
+</html>

package/dist/index.js

@@ -0,0 +1,76 @@
+/**
+ * React Node - Function-First Implementation
+ *
+ * Renders React applications by loading a compiled React bundle and rendering it in an HTML template.
+ * Migrated from class-based to function-first pattern using defineNode.
+ */
+import fs from "node:fs";
+import path from "node:path";
+import { defineNode } from "@blokjs/runner";
+import ejs from "ejs";
+import { z } from "zod";
+// Input schema using Zod (migrated from JSON Schema)
+const inputSchema = z.object({
+    react_app: z.string({
+        description: "Path to the compiled React application bundle (e.g., './app/index.merged.min.js')",
+    }),
+    title: z.string().optional().default("React App"),
+    scripts: z.string().optional().default(""),
+    metas: z.string().optional().default(""),
+    index_html: z.string().optional().default("index.html"),
+    styles: z.string().optional().default(""),
+    root_element: z.string().optional().default("root"),
+});
+// Output is HTML string
+const outputSchema = z.string();
+// Helper: Resolve path relative to node directory
+const rootDir = path.resolve(__dirname, ".");
+function root(relPath) {
+    return path.resolve(rootDir, relPath);
+}
+export default defineNode({
+    name: "react",
+    description: "Renders React applications by loading a compiled bundle and rendering it in an HTML template",
+    contentType: "text/html",
+    input: inputSchema,
+    output: outputSchema,
+    async execute(ctx, inputs) {
+        // Resolve React app bundle path
+        const file_path = inputs.react_app || "./app/index.merged.min.js";
+        const react_script_template = '<script type="text/babel">REACT_SCRIPT</script>';
+        // Load React script from the node module location
+        const min_file = root(file_path);
+        let react_app = fs.readFileSync(min_file, "utf8");
+        react_app = react_script_template.replace("REACT_SCRIPT", `\n${react_app}\n`);
+        // Read index.html template from the node module location
+        const content = fs.readFileSync(root(inputs.index_html), "utf8");
+        const render = ejs.compile(content, { client: false });
+        // Clone context for template (removing sensitive data)
+        const ctxCloned = {
+            config: ctx.config,
+            inputs: inputs,
+            response: ctx.response,
+            request: {
+                body: ctx.request.body,
+                headers: ctx.request.headers,
+                url: ctx.request.url,
+                originalUrl: ctx.request.originalUrl,
+                query: ctx.request.query,
+                params: ctx.request.params,
+                cookies: ctx.request.cookies,
+            },
+        };
+        // Render HTML with EJS
+        const html = render({
+            title: inputs.title,
+            metas: inputs.metas,
+            styles: inputs.styles,
+            scripts: inputs.scripts,
+            root_element: inputs.root_element,
+            react_app,
+            ctx: btoa(JSON.stringify(ctxCloned)),
+        });
+        return html;
+    },
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}

package/dist/inputSchema.d.ts

@@ -0,0 +1,29 @@
+export declare const inputSchema: {
+    $schema: string;
+    title: string;
+    type: string;
+    properties: {
+        title: {
+            type: string;
+        };
+        index_html: {
+            type: string;
+        };
+        scripts: {
+            type: string;
+        };
+        react_app: {
+            type: string;
+        };
+        styles: {
+            type: string;
+        };
+        root_element: {
+            type: string;
+        };
+        metas: {
+            type: string;
+        };
+    };
+    required: string[];
+};

package/dist/inputSchema.js

@@ -0,0 +1,30 @@
+export const inputSchema = {
+    $schema: "http://json-schema.org/draft-07/schema#",
+    title: "Generated schema for Root",
+    type: "object",
+    properties: {
+        title: {
+            type: "string",
+        },
+        index_html: {
+            type: "string",
+        },
+        scripts: {
+            type: "string",
+        },
+        react_app: {
+            type: "string",
+        },
+        styles: {
+            type: "string",
+        },
+        root_element: {
+            type: "string",
+        },
+        metas: {
+            type: "string",
+        },
+    },
+    required: ["react_app"],
+};
+//# sourceMappingURL=inputSchema.js.map

package/dist/inputSchema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputSchema.js","sourceRoot":"","sources":["../inputSchema.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;IAC1B,OAAO,EAAE,yCAAyC;IAClD,KAAK,EAAE,2BAA2B;IAClC,IAAI,EAAE,QAAQ;IACd,UAAU,EAAE;QACX,KAAK,EAAE;YACN,IAAI,EAAE,QAAQ;SACd;QACD,UAAU,EAAE;YACX,IAAI,EAAE,QAAQ;SACd;QACD,OAAO,EAAE;YACR,IAAI,EAAE,QAAQ;SACd;QACD,SAAS,EAAE;YACV,IAAI,EAAE,QAAQ;SACd;QACD,MAAM,EAAE;YACP,IAAI,EAAE,QAAQ;SACd;QACD,YAAY,EAAE;YACb,IAAI,EAAE,QAAQ;SACd;QACD,KAAK,EAAE;YACN,IAAI,EAAE,QAAQ;SACd;KACD;IACD,QAAQ,EAAE,CAAC,WAAW,CAAC;CACvB,CAAC"}

package/index.html

@@ -0,0 +1,23 @@
+<!-- views/index.ejs -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <%-metas%>
+    <title><%=title%></title>
+    <%-styles%>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script type="text/javascript">
+        var ctx_base64 = '<%=ctx%>';
+    </script>
+</head>
+<body class="bg-gray-100 flex items-center justify-center min-h-screen">
+    <div id="<%=root_element%>"></div>
+    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+    <%-scripts%>
+    <%-react_app%>
+</body>
+</html>

package/index.ts

@@ -0,0 +1,92 @@
+/**
+ * React Node - Function-First Implementation
+ *
+ * Renders React applications by loading a compiled React bundle and rendering it in an HTML template.
+ * Migrated from class-based to function-first pattern using defineNode.
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+import { defineNode } from "@blokjs/runner";
+import type { Context } from "@blokjs/shared";
+import ejs from "ejs";
+import { z } from "zod";
+
+// Input schema using Zod (migrated from JSON Schema)
+const inputSchema = z.object({
+	react_app: z.string({
+		description: "Path to the compiled React application bundle (e.g., './app/index.merged.min.js')",
+	}),
+	title: z.string().optional().default("React App"),
+	scripts: z.string().optional().default(""),
+	metas: z.string().optional().default(""),
+	index_html: z.string().optional().default("index.html"),
+	styles: z.string().optional().default(""),
+	root_element: z.string().optional().default("root"),
+});
+
+// Output is HTML string
+const outputSchema = z.string();
+
+// Helper: Resolve path relative to node directory
+const rootDir = path.resolve(__dirname, ".");
+function root(relPath: string): string {
+	return path.resolve(rootDir, relPath);
+}
+
+export default defineNode({
+	name: "react",
+	description: "Renders React applications by loading a compiled bundle and rendering it in an HTML template",
+	contentType: "text/html",
+
+	input: inputSchema,
+	output: outputSchema,
+
+	async execute(ctx: Context, inputs) {
+		// Resolve React app bundle path
+		const file_path = inputs.react_app || "./app/index.merged.min.js";
+		const react_script_template = '<script type="text/babel">REACT_SCRIPT</script>';
+
+		// Load React script from the node module location
+		const min_file = root(file_path);
+		let react_app = fs.readFileSync(min_file, "utf8");
+		react_app = react_script_template.replace("REACT_SCRIPT", `\n${react_app}\n`);
+
+		// Read index.html template from the node module location
+		const content = fs.readFileSync(root(inputs.index_html), "utf8");
+		const render = ejs.compile(content, { client: false });
+
+		// Clone context for template (removing sensitive data)
+		const ctxCloned = {
+			config: ctx.config,
+			inputs: inputs,
+			response: ctx.response,
+			request: {
+				body: ctx.request.body,
+				headers: ctx.request.headers,
+				url: ctx.request.url,
+				originalUrl: ctx.request.originalUrl,
+				query: ctx.request.query,
+				params: ctx.request.params,
+				cookies: ctx.request.cookies,
+			},
+		};
+
+		// Render HTML with EJS
+		const html = render({
+			title: inputs.title,
+			metas: inputs.metas,
+			styles: inputs.styles,
+			scripts: inputs.scripts,
+			root_element: inputs.root_element,
+			react_app,
+			ctx: btoa(JSON.stringify(ctxCloned)),
+		});
+
+		return html;
+	},
+});
+
+// Export types for backward compatibility
+export type InputType = z.infer<typeof inputSchema>;
+export type OutputType = z.infer<typeof outputSchema>;

package/index.ts.backup

@@ -0,0 +1,103 @@
+import fs from "node:fs";
+import path from "node:path";
+import { type INanoServiceResponse, NanoService, NanoServiceResponse } from "@blok/runner";
+import { type Context, GlobalError } from "@blok/shared";
+import ejs from "ejs";
+import { inputSchema } from "./inputSchema";
+
+type InputType = {
+	react_app: string;
+	title?: string;
+	scripts?: string;
+	metas?: string;
+	index_html?: string;
+	styles?: string;
+	root_element?: string;
+};
+
+const rootDir = path.resolve(__dirname, ".");
+
+export default class React extends NanoService<InputType> {
+	constructor() {
+		super();
+
+		// Set the input "JSON Schema Format" here for automated validation
+		// Learn JSON Schema: https://json-schema.org/learn/getting-started-step-by-step
+		this.inputSchema = inputSchema;
+
+		// Set the output "JSON Schema Format" here for automated validation
+		// Learn JSON Schema: https://json-schema.org/learn/getting-started-step-by-step
+		this.outputSchema = {};
+
+		// Set html content type
+		this.contentType = "text/html";
+	}
+
+	/**
+	 * Relative path to root
+	 */
+	root(relPath: string): string {
+		return path.resolve(rootDir, relPath);
+	}
+
+	async handle(ctx: Context, inputs: InputType): Promise<INanoServiceResponse> {
+		// Create a new instance of the response
+		const response = new NanoServiceResponse();
+		let file_path = inputs.react_app;
+		if (file_path === undefined || file_path === "") file_path = "./app/index.merged.min.js";
+		const react_script_template = '<script type="text/babel">REACT_SCRIPT</script>';
+
+		const title = inputs.title || "React App";
+		const scripts = inputs.scripts || "";
+		const metas = inputs.metas || "";
+		const index_html = inputs.index_html || "index.html";
+		const styles = inputs.styles || "";
+		const root_element = inputs.root_element || "root";
+
+		try {
+			// Load React script from the current module location
+			const min_file = this.root(file_path);
+			let react_app = fs.readFileSync(min_file, "utf8");
+			react_app = react_script_template.replace("REACT_SCRIPT", `\n${react_app}\n`);
+
+			// Read index.html file from the current module location
+			const content = fs.readFileSync(this.root(index_html), "utf8");
+			const render = ejs.compile(content, { client: false });
+			const ctxCloned = {
+				config: ctx.config,
+				inputs: inputs,
+				response: ctx.response,
+				request: {
+					body: ctx.request.body,
+					headers: ctx.request.headers,
+					url: ctx.request.url,
+					originalUrl: ctx.request.originalUrl,
+					query: ctx.request.query,
+					params: ctx.request.params,
+					cookies: ctx.request.cookies,
+				},
+			};
+
+			const html = render({
+				title,
+				metas,
+				styles,
+				scripts,
+				root_element,
+				react_app,
+				ctx: btoa(JSON.stringify(ctxCloned)),
+			});
+
+			// Your code here
+			response.setSuccess(html); // Set the success
+		} catch (error: unknown) {
+			const nodeError: GlobalError = new GlobalError((error as Error).message);
+			nodeError.setCode(500);
+			nodeError.setStack((error as Error).stack);
+			nodeError.setName(this.name);
+			response.setError(nodeError); // Set the error
+		}
+
+		return response;
+	}
+}

package/inputSchema.ts

@@ -0,0 +1,29 @@
+export const inputSchema = {
+	$schema: "http://json-schema.org/draft-07/schema#",
+	title: "Generated schema for Root",
+	type: "object",
+	properties: {
+		title: {
+			type: "string",
+		},
+		index_html: {
+			type: "string",
+		},
+		scripts: {
+			type: "string",
+		},
+		react_app: {
+			type: "string",
+		},
+		styles: {
+			type: "string",
+		},
+		root_element: {
+			type: "string",
+		},
+		metas: {
+			type: "string",
+		},
+	},
+	required: ["react_app"],
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+	"name": "@blokjs/react",
+	"version": "0.2.0",
+	"description": "",
+	"type": "module",
+	"engines": {
+		"node": ">=18.0.0"
+	},
+	"author": "Deskree Technologies Inc.",
+	"license": "Apache-2.0",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"scripts": {
+		"test:dev": "vitest",
+		"test": "vitest run",
+		"build:ts": "rm -rf dist && tsc",
+		"build:dev": "tsc --watch",
+		"build:babel": "rm -rf dist/app/index.merged.min.js && babel dist/app --out-file dist/app/index.merged.min.js",
+		"build": "npm run build:ts && npm run build:babel && cp index.html dist/index.html"
+	},
+	"devDependencies": {
+		"@types/node": "^22.15.21",
+		"@types/ejs": "^3.1.5",
+		"typescript": "^5.8.3",
+		"vitest": "^4.0.18",
+		"@babel/cli": "^7.28.6",
+		"@babel/core": "^7.28.6",
+		"@babel/preset-env": "^7.28.6",
+		"@babel/preset-react": "^7.28.5",
+		"babel-minify": "^0.5.2"
+	},
+	"dependencies": {
+		"@blokjs/shared": "workspace:*",
+		"@blokjs/runner": "workspace:*",
+		"@blokjs/helper": "workspace:*",
+		"ejs": "^3.1.10",
+		"zod": "^3.24.2"
+	},
+	"private": false,
+	"publishConfig": {
+		"access": "public"
+	}
+}

package/test/helper.ts

@@ -0,0 +1,57 @@
+import type { ParamsDictionary } from "@blokjs/runner";
+import type { Context } from "@blokjs/shared";
+
+export default function ctx(): Context {
+	const ctx: Context = {
+		response: {
+			data: {
+				title: "Chat bot",
+			},
+			error: null,
+		},
+		request: {
+			body: {},
+		},
+		config: {},
+		id: "",
+		error: {
+			message: "",
+			code: undefined,
+			json: undefined,
+			stack: undefined,
+			name: undefined,
+		},
+		logger: {
+			log: (message: string): void => {
+				throw new Error("Function not implemented.");
+			},
+			getLogs: (): string[] => {
+				throw new Error("Function not implemented.");
+			},
+			getLogsAsText: (): string => {
+				throw new Error("Function not implemented.");
+			},
+			getLogsAsBase64: (): string => {
+				throw new Error("Function not implemented.");
+			},
+			logLevel: (level: string, message: string): void => {
+				throw new Error("Function not implemented.");
+			},
+			error: (message: string, stack: string): void => {
+				throw new Error("Function not implemented.");
+			},
+		},
+		eventLogger: undefined,
+		_PRIVATE_: undefined,
+	};
+
+	ctx.config = {
+		react: {
+			inputs: {
+				react_app: "./dist/app/index.merged.min.js",
+			},
+		},
+	} as unknown as ParamsDictionary;
+
+	return ctx;
+}

package/test/index.mockup.html

@@ -0,0 +1,27 @@
+<!-- views/index.ejs -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <title>React App</title>
+    
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script type="text/javascript">
+        var ctx_base64 = 'eyJjb25maWciOnsicmVhY3QiOnsiaW5wdXRzIjp7InJlYWN0X2FwcCI6Ii4vZGlzdC9hcHAvaW5kZXgubWVyZ2VkLm1pbi5qcyJ9fX0sImlucHV0cyI6eyJyZWFjdF9hcHAiOiIuL2Rpc3QvYXBwL2luZGV4Lm1lcmdlZC5taW4uanMiLCJ0aXRsZSI6IlJlYWN0IEFwcCIsInNjcmlwdHMiOiIiLCJtZXRhcyI6IiIsImluZGV4X2h0bWwiOiJpbmRleC5odG1sIiwic3R5bGVzIjoiIiwicm9vdF9lbGVtZW50Ijoicm9vdCJ9LCJyZXNwb25zZSI6eyJkYXRhIjp7InRpdGxlIjoiQ2hhdCBib3QifSwiZXJyb3IiOm51bGx9LCJyZXF1ZXN0Ijp7ImJvZHkiOnt9fX0=';
+    </script>
+</head>
+<body class="bg-gray-100 flex items-center justify-center min-h-screen">
+    <div id="root"></div>
+    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+    
+    <script type="text/babel">
+"use strict";// public/app.js
+function _toConsumableArray(a){return _arrayWithoutHoles(a)||_iterableToArray(a)||_unsupportedIterableToArray(a)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(a){if("undefined"!=typeof Symbol&&null!=a[Symbol.iterator]||null!=a["@@iterator"])return Array.from(a)}function _arrayWithoutHoles(a){if(Array.isArray(a))return _arrayLikeToArray(a)}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_unsupportedIterableToArray(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(b,c){if(b){if("string"==typeof b)return _arrayLikeToArray(b,c);var a={}.toString.call(b).slice(8,-1);return"Object"===a&&b.constructor&&(a=b.constructor.name),"Map"===a||"Set"===a?Array.from(b):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?_arrayLikeToArray(b,c):void 0}}function _arrayLikeToArray(b,c){(null==c||c>b.length)&&(c=b.length);for(var d=0,f=Array(c);d<c;d++)f[d]=b[d];return f}function _iterableToArrayLimit(b,c){var d=null==b?null:"undefined"!=typeof Symbol&&b[Symbol.iterator]||b["@@iterator"];if(null!=d){var g,h,j,k,l=[],a=!0,m=!1;try{if(j=(d=d.call(b)).next,0===c){if(Object(d)!==d)return;a=!1}else for(;!(a=(g=j.call(d)).done)&&(l.push(g.value),l.length!==c);a=!0);}catch(a){m=!0,h=a}finally{try{if(!a&&null!=d["return"]&&(k=d["return"](),Object(k)!==k))return}finally{if(m)throw h}}return l}}function _arrayWithHoles(a){if(Array.isArray(a))return a}var _React=React,useState=_React.useState,useEffect=_React.useEffect;function ChatBot(){var a=Math.floor,b=useState([]),c=_slicedToArray(b,2),d=c[0],f=c[1],g=useState(""),h=_slicedToArray(g,2),i=h[0],j=h[1],k=JSON.parse(atob(ctx_base64));useEffect(function(){f(function(b){return[].concat(_toConsumableArray(b),[{text:"Hello! Let share a fact about cats. Ok?",sender:"bot",id:a(100*Math.random())}])}),f(function(b){return[].concat(_toConsumableArray(b),[{text:k.response.data.fact,sender:"bot",id:a(100*Math.random())}])})},[]);return/*#__PURE__*/React.createElement("div",{className:"bg-white rounded-lg shadow-md w-96 overflow-hidden"},/*#__PURE__*/React.createElement("h1",{className:"bg-blue-500 text-white text-center py-4 text-xl font-bold"},"Simple ",k.request.params.workflow),/*#__PURE__*/React.createElement("div",{className:"h-96 overflow-y-auto p-4 space-y-4"},d.map(function(a){return/*#__PURE__*/React.createElement("div",{key:a.id,className:"p-2 rounded-lg ".concat("user"===a.sender?"bg-blue-500 text-white ml-auto":"bg-gray-200 text-gray-800"," max-w-[80%] ").concat("user"===a.sender?"text-right":"text-left")},a.text)})),/*#__PURE__*/React.createElement("form",{onSubmit:function(b){b.preventDefault(),i.trim()&&(f([].concat(_toConsumableArray(d),[{text:i,sender:"user",id:a(100*Math.random())}])),j(""),setTimeout(function(){f(function(b){return[].concat(_toConsumableArray(b),[{text:"You said: ".concat(i),sender:"bot",id:a(100*Math.random())}])})},500))},className:"p-4 border-t border-gray-200"},/*#__PURE__*/React.createElement("div",{className:"flex"},/*#__PURE__*/React.createElement("input",{type:"text",value:i,onChange:function(a){return j(a.target.value)},placeholder:"Type your message...",className:"flex-grow px-3 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"}),/*#__PURE__*/React.createElement("button",{type:"submit",className:"bg-blue-500 text-white px-4 py-2 rounded-r-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"},"Send"))))}ReactDOM.render(/*#__PURE__*/React.createElement(ChatBot,null),document.getElementById("root"));
+
+</script>
+</body>
+</html>

package/test/index.test.ts

@@ -0,0 +1,32 @@
+/**
+ * React Node Tests - Updated for Function-First Implementation
+ *
+ * Tests migrated from class-based to function-first pattern.
+ * All existing behavior is preserved.
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+import type { IBlokResponse } from "@blokjs/runner";
+import { beforeAll, expect, test } from "vitest";
+import ReactNode from "../index";
+import ctx from "./helper";
+
+let rootDir: string;
+
+beforeAll(() => {
+	rootDir = path.resolve(__dirname, ".");
+});
+
+// Validate React rendering from Node
+test("Render index.html page", async () => {
+	const context = ctx();
+	const inputs = { react_app: "./dist/app/index.merged.min.js" };
+
+	const response = (await ReactNode.handle(context, inputs)) as IBlokResponse;
+	const mockup_file = path.resolve(rootDir, "index.mockup.html");
+	const message: string = fs.readFileSync(mockup_file, "utf8");
+
+	expect(response.success).toEqual(true);
+	expect(response.data).toEqual(message);
+});

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"compilerOptions": {
+		"target": "es2022",
+		"allowJs": true,
+		"module": "es2022",
+		"moduleResolution": "bundler",
+		"declaration": true,
+		"sourceMap": true,
+		"outDir": "./dist",
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"strict": true,
+		"noUnusedLocals": true,
+		"noImplicitReturns": true,
+		"skipLibCheck": true
+	},
+	"include": ["./*", "app/**/*", "index.html"],
+	"exclude": ["node_modules", "dist"],
+	"compileOnSave": true
+}