rumious-babel-plugin 0.0.1

package/astGenerators.js

@@ -0,0 +1,109 @@
+
+function generateAppendChild(t, target, child) {
+  return t.expressionStatement(
+    t.callExpression(t.memberExpression(target, t.identifier("appendChild")), [child])
+  );
+}
+
+function generateDynamicValueHandle(t, path, target, child, contextName) {
+  const tempId = path.scope.generateUidIdentifier("_rumious_dymanic_");
+  return [
+    t.variableDeclaration("const", [
+      t.variableDeclarator(
+        tempId,
+        t.callExpression(t.memberExpression(t.identifier("document"), t.identifier("createTextNode")), [
+          t.stringLiteral(""),
+        ])
+      ),
+    ]),
+    generateAppendChild(t,target,tempId),
+    t.expressionStatement(
+      t.callExpression(t.memberExpression(t.identifier("window.RUMIOUS_JSX"), t.identifier("dynamicValue"), false), [
+        target,
+        tempId,
+        child,
+        t.identifier(contextName)
+      ])
+    ),
+  ];
+}
+
+function generateCreateText(t, text) {
+  return t.callExpression(t.memberExpression(t.identifier("document"), t.identifier("createTextNode")), [
+    t.stringLiteral(text),
+  ]);
+}
+
+function generateCreateEl(t, varName, tagName) {
+  return t.variableDeclaration("const", [
+    t.variableDeclarator(
+      varName,
+      t.callExpression(t.memberExpression(t.identifier("document"), t.identifier("createElement")), [
+        t.stringLiteral(tagName),
+      ])
+    ),
+  ]);
+}
+
+function generateCreateFrag(t, varName) {
+  return t.variableDeclaration("const", [
+    t.variableDeclarator(
+      varName,
+      t.callExpression(t.memberExpression(t.identifier("document"), t.identifier("createDocumentFragment")), [
+      ])
+    ),
+  ]);
+}
+
+
+function generateSetAttr(t, target, name, value) {
+  return t.expressionStatement(
+    t.callExpression(t.memberExpression(target, t.identifier("setAttribute")), [t.stringLiteral(name), value])
+  );
+}
+
+function generateSetProps(t, target, key, value) {
+  return t.expressionStatement(
+    t.assignmentExpression(
+      "=",
+      t.memberExpression(t.memberExpression(target, t.identifier("props")), typeof key === "string" ? t.stringLiteral(key) : key, true),
+      value
+    )
+  );
+}
+
+
+function generateAddDirective(t, target, directive, modifier, value, contextName) {
+  return t.expressionStatement(
+    t.callExpression(t.memberExpression(t.identifier("window.RUMIOUS_JSX"), t.identifier("addDirective"), false), [
+      target,
+      t.identifier(contextName),
+      t.stringLiteral(directive),
+      t.stringLiteral(modifier),
+      value,
+    ])
+  );
+}
+
+function generateCreateComponent(t, varName, component){
+  return t.variableDeclaration("const", [
+  t.variableDeclarator(
+    varName,
+    t.callExpression(t.memberExpression(t.identifier("window.RUMIOUS_JSX"), t.identifier("createComponent")), [
+      component,
+    ])
+  ),
+]);
+}
+
+module.exports = {
+  generateAppendChild,
+  generateDynamicValueHandle,
+  generateCreateText,
+  generateCreateEl,
+  generateSetAttr,
+  generateSetProps,
+  generateAddDirective,
+  generateCreateComponent,
+  generateCreateFrag
+};

package/index.js

@@ -0,0 +1,148 @@
+const { declare } = require('@babel/helper-plugin-utils');
+const { randomName } = require('./utils');
+const {
+  generateCreateEl,
+  generateAppendChild,
+  generateDynamicValueHandle,
+  generateCreateText,
+  generateCreateComponent,
+  generateCreateFrag
+} = require('./astGenerators');
+const {
+  processAttributes,
+  processProps,
+  jsxNameToExpression,
+} = require('./jsxProcessor');
+
+function attachSourceMeta(t, elId, node, filename) {
+  if (process.env.NODE_ENV !== 'development' || !node.loc) return [];
+  
+  const { line, column } = node.loc.start;
+  
+  return [
+    t.expressionStatement(
+      t.assignmentExpression(
+        "=",
+        t.memberExpression(elId, t.identifier("_source")),
+        t.objectExpression([
+          t.objectProperty(t.identifier("fileName"), t.stringLiteral(filename)),
+          t.objectProperty(t.identifier("line"), t.numericLiteral(line)),
+          t.objectProperty(t.identifier("column"), t.numericLiteral(column)),
+        ])
+      )
+    )
+  ];
+}
+
+function transformJSXElement(t, path, element, contextName, filename) {
+  const tagName = element.openingElement ? element.openingElement.name : null;
+  const isComponent = tagName && (t.isJSXMemberExpression(tagName) || /^[A-Z]/.test(tagName.name));
+  const isFragment = isComponent && tagName.name === "Fragment";
+  const elId = isFragment ? path.scope.generateUidIdentifier("rumious_frag") : path.scope.generateUidIdentifier("rumious_el");
+  const statements = [];
+  
+  if (isFragment) {
+    statements.push(generateCreateFrag(t, elId));
+    statements.push(...attachSourceMeta(t, elId, element, filename));
+    
+    if (!element.children || element.children.length === 0) {
+      return { elId: elId, statements };
+    }
+    
+    for (const child of element.children) {
+      if (t.isJSXText(child)) {
+        const text = child.value;
+        if (text) {
+          const textNode = generateCreateText(t, text);
+          statements.push(generateAppendChild(t, elId, textNode));
+        }
+      } else if (t.isJSXExpressionContainer(child)) {
+        if (child.expression.type !== "NullLiteral" && child.expression.type !== "UndefinedLiteral") {
+          statements.push(...generateDynamicValueHandle(t, path, elId, child.expression, contextName));
+        }
+      } else if (t.isJSXElement(child) || t.isJSXFragment(child)) {
+        const nested = transformJSXElement(t, path, child, contextName, filename);
+        statements.push(...nested.statements);
+        statements.push(generateAppendChild(t, elId, nested.elId));
+      }
+    }
+    return { elId: elId, statements };
+  }
+  
+  if (isComponent) {
+    statements.push(generateCreateComponent(t, elId, jsxNameToExpression(t, tagName)));
+    statements.push(...attachSourceMeta(t, elId, element, filename));
+    
+    statements.push(
+      t.expressionStatement(
+        t.callExpression(t.memberExpression(elId, t.identifier("setup")), [t.identifier(contextName), jsxNameToExpression(t, tagName)])
+      )
+    );
+    statements.push(...processProps(t, elId, element.openingElement.attributes));
+  } else {
+    statements.push(generateCreateEl(t, elId, tagName ? tagName.name : "div"));
+    statements.push(...attachSourceMeta(t, elId, element, filename));
+    statements.push(...processAttributes(t, elId, element.openingElement.attributes, contextName));
+  }
+  
+  for (const child of element.children) {
+    if (t.isJSXText(child)) {
+      const text = child.value;
+      if (text) {
+        const textNode = generateCreateText(t, text);
+        statements.push(generateAppendChild(t, elId, textNode));
+      }
+    } else if (t.isJSXExpressionContainer(child)) {
+      if (child.expression.type !== "NullLiteral" && child.expression.type !== "UndefinedLiteral") {
+        statements.push(...generateDynamicValueHandle(t, path, elId, child.expression, contextName));
+      }
+    } else if (t.isJSXElement(child) || t.isJSXFragment(child)) {
+      const nested = transformJSXElement(t, path, child, contextName, filename);
+      statements.push(...nested.statements);
+      statements.push(generateAppendChild(t, elId, nested.elId));
+    }
+  }
+  
+  return { elId, statements };
+}
+
+module.exports = declare((api) => {
+  api.assertVersion(7);
+  const t = api.types;
+  
+  return {
+    name: "rumious-babel-plugin",
+    visitor: {
+      JSXElement(path) {
+        const rootName = randomName("rumious_root");
+        const contextName = randomName("rumious_ctx");
+        const filename = path.hub.file.opts.filename || "unknown_file";
+        
+        const { elId, statements } = transformJSXElement(t, path, path.node, contextName, filename);
+        
+        statements.push(
+          t.expressionStatement(
+            t.callExpression(t.memberExpression(t.identifier(rootName), t.identifier("appendChild")), [elId])
+          )
+        );
+        statements.push(t.returnStatement(t.identifier(rootName)));
+        
+        const fn = t.functionExpression(
+          null,
+          [t.identifier(rootName), t.identifier(contextName)],
+          t.blockStatement(statements.map((s) => t.cloneNode(s, true)))
+        );
+        
+        const callTemplate = t.callExpression(
+          t.memberExpression(
+            t.memberExpression(t.identifier("window"), t.identifier("RUMIOUS_JSX")),
+            t.identifier("template")
+          ),
+          [fn]
+        );
+        
+        path.replaceWith(callTemplate);
+      },
+    },
+  };
+});

package/jsxProcessor.js

@@ -0,0 +1,116 @@
+const {
+  generateAddDirective,
+  generateSetAttr,
+  generateSetProps,
+} = require('./astGenerators');
+
+function processDirective(t, target, attr, directive, modifier, contextName) {
+  const value = attr.value ?
+    t.isStringLiteral(attr.value) ?
+    attr.value :
+    t.isJSXExpressionContainer(attr.value) ?
+    attr.value.expression :
+    t.stringLiteral("") :
+    t.booleanLiteral(true);
+  return generateAddDirective(t, target, directive, modifier, value, contextName);
+}
+
+function processNamespace(t, target, attr, contextName) {
+  const name = attr.name.name.name;
+  const namespace = attr.name.namespace.name;
+  if (["bind", "on"].includes(namespace)) {
+    return processDirective(t, target, attr, namespace, name, contextName);
+  }
+  const value = attr.value ?
+    t.isStringLiteral(attr.value) ?
+    attr.value :
+    t.isJSXExpressionContainer(attr.value) ?
+    attr.value.expression :
+    t.stringLiteral("") :
+    t.booleanLiteral(true);
+  return generateSetAttr(t, target, t.binaryExpression("+", t.stringLiteral(`${namespace}:`), t.stringLiteral(name)), value);
+}
+
+function processAttributes(t, elId, attributes, contextName) {
+  const statements = [];
+  const standaloneDirectives = ["ref", "model","inject"];
+  
+  for (const attr of attributes) {
+    if (t.isJSXAttribute(attr) && !t.isJSXNamespacedName(attr.name)) {
+      const name = attr.name.name;
+      const value = attr.value ?
+        t.isStringLiteral(attr.value) ?
+        attr.value :
+        t.isJSXExpressionContainer(attr.value) ?
+        attr.value.expression :
+        t.stringLiteral("") :
+        t.booleanLiteral(true);
+      if (standaloneDirectives.includes(name)) {
+        statements.push(processDirective(t, elId, attr, name, "standalone", contextName));
+      } else {
+        statements.push(generateSetAttr(t, elId, name, value));
+      }
+    } else if (t.isJSXAttribute(attr) && t.isJSXNamespacedName(attr.name)) {
+      statements.push(processNamespace(t, elId, attr, contextName));
+    } else if (t.isJSXSpreadAttribute(attr)) {
+      const props = attr.argument;
+      const key = t.identifier("key");
+      const value = t.memberExpression(props, key, true);
+      statements.push(
+        t.forInStatement(
+          t.variableDeclaration("let", [t.variableDeclarator(key)]),
+          props,
+          t.blockStatement([
+            t.expressionStatement(t.callExpression(t.memberExpression(elId, t.identifier("setAttribute")), [key, value])),
+          ])
+        )
+      );
+    }
+  }
+  return statements;
+}
+
+function processProps(t, elId, props) {
+  const statements = [];
+  for (let prop of props) {
+    if (t.isJSXAttribute(prop)) {
+      const name = prop.name.name;
+      const value = prop.value ?
+        t.isStringLiteral(prop.value) ?
+        prop.value :
+        t.isJSXExpressionContainer(prop.value) ?
+        prop.value.expression :
+        t.stringLiteral("") :
+        t.booleanLiteral(true);
+      statements.push(generateSetProps(t, elId, name, value));
+    } else if (t.isJSXSpreadAttribute(prop)) {
+      const propExpr = prop.argument;
+      const key = t.identifier("key");
+      const value = t.memberExpression(propExpr, key, true);
+      statements.push(
+        t.forInStatement(
+          t.variableDeclaration("let", [t.variableDeclarator(key)]),
+          propExpr,
+          t.blockStatement([generateSetProps(t, elId, key, value)])
+        )
+      );
+    }
+  }
+  return statements;
+}
+
+function jsxNameToExpression(t, name) {
+  if (t.isJSXIdentifier(name)) return t.identifier(name.name);
+  if (t.isJSXMemberExpression(name)) {
+    return t.memberExpression(jsxNameToExpression(t, name.object), t.identifier(name.property.name));
+  }
+  return t.identifier("unknown");
+}
+
+module.exports = {
+  processDirective,
+  processNamespace,
+  processAttributes,
+  processProps,
+  jsxNameToExpression,
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "rumious-babel-plugin",
+	"version": "0.0.1",
+	"description":"Babel plugin for Rumious ",
+	"main": "./index.js",
+	"keywords": [
+		"rumious",
+		"core",
+		"framework",
+		"babel",
+		"plugin",
+		"babel-plugin"
+	],
+	"scripts": {
+	},
+	"author": "smtdfc",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/smtdfc/rumious"
+	},
+	"bugs": {
+		"url": "https://github.com/smtdfc/rumious/issues"
+	},
+	"homepage": "https://github.com/smtdfc/rumious#readme",
+	"files": [
+	  "index.js",
+	  "jsxProcessor.js",
+	  "utils.js",
+	  "astGenerators.js",
+		"README.md"
+	],
+	"engines": {
+		"node": ">=16"
+	},
+	"dependencies": {
+	}
+}

package/utils.js

@@ -0,0 +1,6 @@
+
+function randomName(prefix) {
+  return `_${prefix}_${Math.random().toString(16).slice(2, 10)}`;
+}
+
+module.exports = { randomName };