feat: JSX serialization

packages/dom-expressions/src/serializer.js

@@ -1,4 +1,5 @@
-import { Feature, Serializer, getCrossReferenceHeader } from "seroval";
+import { Feature, Serializer, getCrossReferenceHeader, createPlugin } from "seroval";
+import { SSRNode } from "./ssr-node";
 import {
  CustomEventPlugin,
  DOMExceptionPlugin,
@@ -18,6 +19,31 @@ const ES2017FLAG =
 
 const GLOBAL_IDENTIFIER = '_$HY.r'; // TODO this is a pending name
 
+const JSXPlugin = createPlugin({
+ tag: 'SolidJSX',
+ test(value) {
+ return value.constructor === SSRNode;
+ },
+ parse: {
+ sync(value, ctx) {
+ // return ctx.parse(value.t);
+ return undefined;
+ },
+ async(value, ctx) {
+ // return ctx.parse(value.t);
+ return undefined;
+ },
+ stream(value, ctx) {
+ // return ctx.parse(value.t);
+ return undefined;
+ },
+ },
+ serialize(node, ctx) {
+ // return '_$HY.tmpl(' + ctx.serialize(node) + ')';
+ return 'void 0';
+ },
+});
+
 export function createSerializer({ onData, onDone, scopeId, onError }) {
  return new Serializer({
  scopeId,
@@ -34,12 +60,13 @@ export function createSerializer({ onData, onDone, scopeId, onError }) {
  ResponsePlugin,
  URLSearchParamsPlugin,
  URLPlugin,
+ JSXPlugin
  ],
  globalIdentifier: GLOBAL_IDENTIFIER,
  disabledFeatures: ES2017FLAG,
  onData,
  onDone,
- onError,
+ onError
  });
 }
 

packages/dom-expressions/src/server.js

@@ -1,5 +1,6 @@
 import { Aliases, BooleanAttributes, ChildProperties } from "./constants";
 import { sharedConfig, root } from "rxcore";
+import { SSRNode, resolveSSRNode } from "./ssr-node";
 import { createSerializer, getLocalHeaderScript } from "./serializer";
 export { createComponent } from "rxcore";
 
@@ -304,7 +305,7 @@ export function ssr(t, ...nodes) {
  t = result + t[nodes.length];
  }
 
- return { t };
+ return new SSRNode(t);
 }
 
 export function ssrClassList(value) {
@@ -373,9 +374,9 @@ export function ssrElement(tag, props, children, needsId) {
  if (i !== keys.length - 1) result += " ";
  }
 
- if (skipChildren) return { t: result + "/>" };
+ if (skipChildren) return new SSRNode(result + "/>");
  if (typeof children === "function") children = children();
- return { t: result + `>${resolveSSRNode(children, true)}</${tag}>` };
+ return new SSRNode(result + `>${resolveSSRNode(children, true)}</${tag}>`)
 }
 
 export function ssrAttribute(key, value, isBoolean) {
@@ -440,23 +441,9 @@ export function escape(s, attr) {
  return left < s.length ? out + s.substring(left) : out;
 }
 
-export function resolveSSRNode(node, top) {
- const t = typeof node;
- if (t === "string") return node;
- if (node == null || t === "boolean") return "";
- if (Array.isArray(node)) {
- let prev = {};
- let mapped = "";
- for (let i = 0, len = node.length; i < len; i++) {
- if (!top && typeof prev !== "object" && typeof node[i] !== "object") mapped += `<!--!$-->`;
- mapped += resolveSSRNode((prev = node[i]));
- }
- return mapped;
- }
- if (t === "object") return node.t;
- if (t === "function") return resolveSSRNode(node());
- return String(node);
-}
+export {
+ resolveSSRNode,
+};
 
 export function mergeProps(...sources) {
  const target = {};

packages/dom-expressions/src/ssr-node.js

@@ -0,0 +1,23 @@
+export class SSRNode {
+ constructor(t) {
+ this.t = t;
+ }
+}
+
+export function resolveSSRNode(node, top) {
+ const t = typeof node;
+ if (t === "string") return node;
+ if (node == null || t === "boolean") return "";
+ if (Array.isArray(node)) {
+ let prev = {};
+ let mapped = "";
+ for (let i = 0, len = node.length; i < len; i++) {
+ if (!top && typeof prev !== "object" && typeof node[i] !== "object") mapped += `<!--!$-->`;
+ mapped += resolveSSRNode((prev = node[i]));
+ }
+ return mapped;
+ }
+ if (t === "object") return node.t;
+ if (t === "function") return resolveSSRNode(node());
+ return String(node);
+}