updates, remove react, solid, preact bridge code as universal won't be supporting them

Author: wakaztahir

.agents/skills/building/SKILL.md

@@ -157,7 +157,7 @@ comptime if(intrinsics::is_interpretation()) {
 
 We test most libraries in the tests above (`lang/tests/build.lab`) but some libraries like:
 - `html_cbi`, `css_cbi`, `js_cbi`, `components`
-- `react_cbi`, `preact_cbi`, `solid_cbi`, `universal_cbi`
+- `universal_cbi`
 
 These are compiler plugins, tested via a separate executable:
 
@@ -178,7 +178,7 @@ Helpful flags:
 If you modify anything inside the [server](/server/) directory, note that it's part of the LSP target.
 
 These modules are all LSP-related and require the LSP server running to verify:
-- `html_ide`, `css_ide`, `js_ide`, `react_ide`, `preact_ide`, `solid_ide`, `universal_ide`, `md_ide`
+- `html_ide`, `css_ide`, `js_ide`, `universal_ide`, `md_ide`
 
 ```bash
 # Build LSP

.agents/skills/cbi_plugin_api/SKILL.md

@@ -144,9 +144,7 @@ These are the plugins shipped with the compiler. Each demonstrates different CBI
 | `css_cbi` | `lang/libs/css_cbi/` | `#css` macro | Parses CSS properties, generates style strings |
 | `js_cbi` | `lang/libs/js_cbi/` | `#js` macro | Inlines JavaScript code into the JS bundle |
 | `universal_cbi` | `lang/libs/universal_cbi/` | `#universal` component | SSR + hydration — generates server function + JS hydration |
-| `react_cbi` | `lang/libs/react_cbi/` | `#react` component | React-style JSX → runtime calls |
-| `preact_cbi` | `lang/libs/preact_cbi/` | `#preact` component | Preact-style JSX → runtime calls |
-| `solid_cbi` | `lang/libs/solid_cbi/` | `#solid` component | SolidJS-style JSX |
+
 | `md_cbi` | `lang/libs/md_cbi/` | Markdown processing | Converts markdown to HTML |
 
 ### Example: html_cbi Structure

.agents/skills/macro_code_gen/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: Macro Code gen
 description:
-    How libraries (html_cbi, preact_cbi, react_cbi, solid_cbi, universal_cbi) generate code
+    How libraries (html_cbi, universal_cbi) generate code
 ---
 
 When you write in chemical
@@ -47,13 +47,12 @@ func my_html(page : &mut HtmlPage, name : &std::string_view) {
 
 This is how we handle chemical values, But you may notice that we support top level macros
 
-`#preact`, `#react`, `#solid`, `#universal` All these component framework libraries are top level macros. The reason being
-that these handle components and that's why.
+`#universal` is the component macro. It handles SSR + hydration for server-rendered interactive UI.
 
-for example
+For example:
 
 ```chemical
-#preact Greeting(props) {
+#universal Greeting(props) {
     return <div>Hello {props.name}</div>
 }
 ```
@@ -75,6 +74,6 @@ The function names maybe a little different, but they accomplish similar logic,
 universal lib generate a function that takes two more parameters, an SsrAttributeList, content for the children
 universal lib also generates in both bundles, HTML that is server side rendered (from the component) and then a js function
 that would hydrate the emitted html.
-universal components are fast and they render everywhere, they work in react, preact and solid components. They work in `#html` too.
+universal components are fast and they render everywhere. They work in `#html` blocks too.
 
 For more information on universal components, load the `universal` skill. For developing new compiler plugins or understanding the plugin API, load the `cbi_plugin_api` skill. For understanding the compiler intrinsics and reflection APIs that macros can use at compile time, load the `intrinsics_compiler_reflection` skill.

.agents/skills/universal/SKILL.md

@@ -8,11 +8,12 @@ description: Diagnose, fix, and implement features in the Chemical universal com
 Universal library is present in `lang/libs/universal_cbi`, its a macro processing library, it handles
 specifically `#univeral` macros, for examples you can look for components present in `lang/libs/components`
 
-Universal library emits components, Universal library is meant for server side rendering + hydration, The reason
-its called universal is because we have libraries like `react_cbi`, `preact_cbi`, `solid_cbi`, they do not do hydration + ssr,
-instead they just translate jsx to runtime calls, which is way easier. Universal components are supposed to
-work inside react, preact or solid components, we have another `#html` macro, library `html_cbi`, universal components
-work inside the html macro too. So yeah, Universal components work everywhere, they are fast because they do ssr + hydration.
+Universal library emits components, Universal library is meant for server side rendering + hydration.
+Universal components work inside `#html` blocks (processed by `html_cbi`) and are the primary way
+to build interactive UI. They do SSR + hydration for fast initial paint and full interactivity.
+
+> **Note:** React, Preact, and Solid framework bridges (`react_cbi`, `preact_cbi`, `solid_cbi`) have been
+> removed. The universal component system is the only supported component model.
 
 ### How universal performs ssr + hydration.
 
@@ -22,14 +23,13 @@ third the text for the children, yes we pass children as `SsrText` (a struct in
 
 The server function does two things, it appends a js function that would perform hydration into the js bundle, It also appends the server side rendered html
 to the html bundle.
-A trick used by `react_cbi`, `solid_cbi` and `preact_cbi`, they actually capture this html and put it into the js bundle.
+The universal component system captures this html and puts it into the js bundle for hydration.
 
 When I say js bundle or html bundle, A struct HtmlPage present in `lang/libs/page` is used for each page, it contains strings
 in which we append, `pageHtml`, `pageHeadJs`, `pageJs`, these fields are used to write the final output.
 
-`react_cbi`, `solid_cbi` and `preact_cbi` write their components to `pageHeadJs`, because we use umd bundles, so that everything is rendered
-without flash of unrendered components, `universal_cbi` however appends to the `pageJs`, so its components are present in the js loaded at the end of body
-this means we have to use a queue to hydrate universal components, once they have been rendered.
+`universal_cbi` appends to the `pageJs`, so its components are present in the js loaded at the end of body.
+This means we have to use a queue (`$__uni_hydration_queue`) to hydrate universal components once they have been rendered.
 
 One very important thing to note:
 

lang/libs/html_cbi/src/converter/language/component.ch

@@ -176,11 +176,8 @@ func (converter : &mut ASTConverter) convertHtmlComponent(element : *mut HtmlEle
         // appendUIntCall.get_args().push(uIdVal as *mut Value);
         // converter.vec.push(appendUIntCall as *mut ASTNode);
 
-        // Emit " data-u-comp="Name">
+        // Emit closing quote and >
         converter.str.append('"');
-        // converter.str.append_view(" data-u-comp=\"")
-        // get_module_scoped_name(signature.functionNode as *mut ASTNode, signature.name, converter.str);
-        // converter.str.append('"');
         converter.str.append('>');
         converter.put_chain_in();
 
@@ -312,22 +309,7 @@ func (converter : &mut ASTConverter) convertHtmlComponent(element : *mut HtmlEle
 
     s.append_view("<script>")
 
-    if(signature.mountStrategy == MountStrategy.Preact) {
-        // Preact Mount Strategy
-        s.append_view("$_pm(document.currentScript, ")
-        get_module_scoped_name(signature.functionNode as *mut ASTNode, signature.name, &mut *s)
-        s.append_view(", {")
-    } else if(signature.mountStrategy == MountStrategy.React) {
-        // React Mount Strategy
-        s.append_view("$_rm(document.currentScript, ")
-        get_module_scoped_name(signature.functionNode as *mut ASTNode, signature.name, &mut *s)
-        s.append_view(", {")
-    } else if(signature.mountStrategy == MountStrategy.Solid) {
-        // Solid Mount Strategy
-        s.append_view("$_sm(document.currentScript, ")
-        get_module_scoped_name(signature.functionNode as *mut ASTNode, signature.name, &mut *s)
-        s.append_view(", {")
-    } else if(signature.mountStrategy == MountStrategy.Universal) {
+    if(signature.mountStrategy == MountStrategy.Universal) {
         // Universal Mount Strategy (HTML-first, no framework dependency)
         s.append_view("$_um(document.currentScript, ")
         get_module_scoped_name(signature.functionNode as *mut ASTNode, signature.name, &mut *s)

lang/libs/page/src/page.ch

@@ -418,61 +418,10 @@ public struct HtmlPage {
         appendViewportMeta();
     }
 
-    // TODO: why is the preact setup so large, fix that
-    func defaultPreactSetup(&mut self) {
-        pageHead.append_view(std::string_view("""<script src="https://unpkg.com/preact/dist/preact.min.js"></script><script src="https://unpkg.com/preact/hooks/dist/hooks.umd.js"></script>"""))
-        pageHeadJs.append_view(std::string_view("""window.$_p = preact;window.$_ph = preactHooks; window.$_pm = (e,c,p) => {const P = document.createDocumentFragment(); $_p.render($_p.h(c, p || {}), P); e.replaceWith(P); };"""))
-        // universal component bridge for preact
-        pageHeadJs.append_view(std::string_view("""
-function UniPreactBridge({ html, fnName, props }) {
-    const ref = $_ph.useRef(null);
-    $_ph.useLayoutEffect(() => {
-        const target = ref.current;
-        window.$__uni_dispatch(fnName, target, props);
-    }, [fnName, props]);
-    return $_p.h('div', {
-        ref,
-        style: "display: contents",
-        dangerouslySetInnerHTML: { __html: html }
-    });
-}
-const $p_uni_ch = (html, fnName, props) => $_p.h(UniPreactBridge, { html, fnName, props });
-"""))
-    }
-
-    func reactHeadJs(&mut self) {
-        pageHeadJs.append_view(std::string_view("""window.$_r = React; window.$_rd = ReactDOM; window.$_rm = (e, c, p) => { const P = document.createElement("div"); e.replaceWith(P); $_rd.createRoot(P).render($_r.createElement(c, p || {})); }"""));
-        pageHeadJs.append_view(std::string_view("""
-function UniReactBridge({ html, fnName, props }) {
-    const ref = $_r.useRef(null);
-    $_r.useLayoutEffect(() => {
-        const target = ref.current;
-        window.$__uni_dispatch(fnName, target, props);
-    }, [fnName, props]);
-    return $_r.createElement('div', {
-        ref,
-        style: { display: 'contents' },
-        dangerouslySetInnerHTML: { __html: html }
-    });
-}
-const $r_uni_ch = (html, fnName, props) => $_r.createElement(UniReactBridge, { html, fnName, props });
-"""))
-    }
-
-    func defaultDevelopmentReactSetup(&mut self) {
-        pageHead.append_view(std::string_view("""<script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>"""))
-        reactHeadJs()
-    }
-
-    func defaultReactSetup(&mut self) {
-        pageHead.append_view(std::string_view("""<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>"""))
-        reactHeadJs()
-    }
-
     func defaultUniversalSetup(&mut self) {
         // we must not put anything else in the head js
         // everything else must go into body js
-        // this is just required for react, solid and preact integration to work
+        // universal component hydration runtime
         pageHeadJs.append_view(std::string_view("""
 window.$__uni_hydration_queue = []
 window.$__uni_error = ((message, details = "", cause = null) => {
@@ -1281,59 +1230,6 @@ window.$__universal_flush = function() {
         pageJsEnd.append_view(std::string_view("window.$__universal_flush();"))
     }
 
-    func asynchronousSolidSetup(&mut self) {
-        pageHead.append_view(std::string_view("""<script type="module">
-            import * as solid from 'https://esm.sh/solid-js@1.9.10';
-            import * as web from 'https://esm.sh/solid-js@1.9.10/web'; 
-            import h from 'https://esm.sh/solid-js@1.9.10/h';
-            window.$_s = solid;
-            window.$_sw = web;
-            window.$_sh = h;
-            if(window.$_sc) window.$_sc();
-        </script> 
-        <script>
-            let $_sr_queue = [];
-            function $_sr(e, comp, props) {
-                const mount = document.createElement('div');
-                e.replaceWith(mount);
-                $_sw.render(() => comp(props || {}), mount);
-            }
-            window.$_sc = () => {
-                for(var i = 0; i < $_sr_queue.length; i++) {
-                    const q = $_sr_queue[i];
-                    $_sr(q[0], q[1], q[2])
-                }
-                $_sr_queue = [];
-            }
-            window.$_sm = (e, comp, props) => {
-                if(window.$_sw) {
-                    $_sr(e, comp, props)
-                } else {
-                    $_sr_queue.push([e, comp, props])
-                }
-            };
-        </script>"""))
-    }
-
-    func defaultSolidSetup(&mut self) {
-        pageHead.append_view(std::string_view("""<script src="https://unpkg.com/solid-umd@1.9.10/dist/solid.min.js"></script><script src="https://unpkg.com/solid-umd@1.9.10/dist/solid-web.min.js"></script><script src="https://unpkg.com/solid-umd@1.9.10/dist/solid-h.min.js"></script>"""))
-        pageHeadJs.append_view(std::string_view("""window.$_s = Solid; window.$_sw = SolidWeb; window.$_sh = SolidH.default || SolidH; window.$_sm = (e, comp, props) => { const mount = document.createElement('div'); e.replaceWith(mount); $_sw.render(() => comp(props || {}), mount); };"""))
-        pageHeadJs.append_view(std::string_view("""
-function UniSolidBridge(props) {
-   let el;
-   $_s.onMount(() => {
-       window.$__uni_dispatch(props.fnName, el, props.props);
-   });
-   return $_sh("div", {
-       ref: (r) => el = r,
-       style: { display: "contents" },
-       innerHTML: props.html
-   });
-}
-const $s_uni_ch = (html, fnName, props) => $_sh(UniSolidBridge, { html, fnName, props });
-"""))
-    }
-
     func getFinalizedPageJs(&self) : std::string {
         var str = std::string();
         str.reserve(pageJs.size() + pageJsEnd.size())

lang/libs/page/src/ssr.ch

@@ -595,9 +595,8 @@ public func renderCssAttrValue(page : &mut HtmlPage, attrVal : &SsrAttributeValu
     writeJsPrimitiveAttrValue(page, &mut page.pageCss, attrVal)
 }
 
-// this function allows libraries like preact, solid and react to move rendered html to js buffer
-// then they send the html to a function that creates an element out of it
-// then they hydrate that element, this is usually done for a universal component that renders html for ssr
+// This function moves rendered html to the js buffer for hydration.
+// Universal components use this to capture SSR HTML and hydrate it on the client.
 public func move_html_to_js_with_lambda_start(page : &mut HtmlPage, index : size_t) {
     page.pageHeadJs.append_view("\n(() => { const html = `");
     const delta_size = page.pageHtml.size() - index;

lang/libs/universal_cbi/src/converter/converter_jsx.ch

@@ -55,85 +55,6 @@ func (converter : &mut JsConverter) convertJSXComponent(element : *mut JsJSXElem
         }
 
         const signature = element.componentSignature;
-        if(signature.mountStrategy != MountStrategy.Universal) {
-             converter.put_chain_in();
-
-             const builder = converter.builder;
-             const location = intrinsics::get_raw_location();
-
-             // signature.name(page)
-             var base = builder.make_identifier(&signature.name, signature.functionNode, false, location);
-             var pageId = builder.make_identifier(std::string_view("page"), converter.support.pageNode, false, location);
-             var call = builder.make_function_call_node(base, converter.parent, location);
-             call.get_args().push(pageId);
-             converter.vec.push(call);
-
-             converter.str.append_view("<script>");
-
-             const mountFn = switch(signature.mountStrategy) {
-                 MountStrategy.React => view("$_rm")
-                 MountStrategy.Preact => view("$_pm")
-                 MountStrategy.Solid => view("$_sm")
-                 default => view("$_dm")
-             }
-
-             converter.str.append_view(&mountFn);
-             converter.str.append_view("(document.currentScript, ");
-             get_module_scoped_name(signature.functionNode, signature.name, &mut converter.str);
-             converter.str.append_view(", {");
-
-             var attrCount = 0u;
-             const attributes = &element.opening.attributes;
-             for(var i : uint = 0; i < attributes.size(); i++) {
-                 const attrNode = attributes.get(i);
-                 if(attrNode.kind == JsNodeKind.JSXAttribute) {
-                     const attr = attrNode as *mut JsJSXAttribute;
-                     if(attr.name.equals("children")) continue;
-
-                     if(attrCount > 0) converter.str.append_view(", ");
-                     converter.str.append_view(&attr.name);
-                     converter.str.append_view(": ");
-
-                     if(attr.value == null) {
-                         converter.str.append_view("true");
-                     } else if(attr.value.kind == JsNodeKind.Literal) {
-                         converter.convertJsNode(attr.value);
-                     } else if(attr.value.kind == JsNodeKind.JSXExpressionContainer) {
-                         const container = attr.value as *mut JsJSXExpressionContainer;
-                         if(container.expression != null) {
-                             if(container.expression.kind == JsNodeKind.ChemicalValue) {
-                                 const cv = container.expression as *mut JsChemicalValue;
-                                 const cvType = cv.value.getType();
-                                 const isStr = cvType != null && (cvType.getKind() == BaseTypeKind.String ||
-                                     cvType.getKind() == BaseTypeKind.Pointer ||
-                                     cvType.getKind() == BaseTypeKind.ExpressiveString);
-                                 if(isStr) converter.str.append('"');
-
-                                 converter.put_chain_in();
-                                 converter.put_chemical_value_in(cv.value);
-
-                                 if(isStr) {
-                                     converter.put_char_chain('"');
-                                 }
-                             } else if(container.expression.kind == JsNodeKind.MemberAccess) {
-                                  const mem = container.expression as *mut JsMemberAccess;
-                                  if(mem.object != null && mem.object.kind == JsNodeKind.Identifier && converter.is_component_props_name((mem.object as *mut JsIdentifier).value)) {
-                                       converter.put_chain_in();
-                                       const v = converter.make_ssr_prop_v_call(mem.property);
-                                       const renderCall = converter.render_ssr_value_call(v);
-                                       converter.vec.push(renderCall);
-                                  }
-                             }
-                         }
-                     }
-                     attrCount++;
-                 }
-             }
-
-             converter.str.append_view("});</script>");
-             converter.put_chain_in();
-             return;
-        }
 
         const hash = signature.functionNode.getEncodedLocation();
 
@@ -262,11 +183,6 @@ func (converter : &mut JsConverter) convertJSXComponent(element : *mut JsJSXElem
         return;
     }
 
-    if(element.componentSignature != null && element.componentSignature.mountStrategy != MountStrategy.Universal) {
-        converter.str.append_view("null");
-        return;
-    }
-
     if(element.componentSignature != null && converter.target == BufferType.JavaScript) {
         converter.put_chain_in();
         const signature = element.componentSignature;
@@ -344,11 +260,6 @@ func (converter : &mut JsConverter) convertJSXComponent(element : *mut JsJSXElem
         return;
     }
 
-    if(element.componentSignature != null && element.componentSignature.mountStrategy != MountStrategy.Universal) {
-        converter.str.append_view("null");
-        return;
-    }
-
     converter.str.append_view("$_ur.createElement(");
     if(tagNameNode.kind == JsNodeKind.Identifier) {
         if(element.componentSignature != null) get_module_scoped_name(element.componentSignature.functionNode, tagName, &mut converter.str);