@novility/react-converter-core 1.0.0

package/dist/runtime/dom.js

@@ -0,0 +1,114 @@
+const domRuntime = `
+function __appendChild(parent, child) {
+  if (child === null || child === undefined || child === false || child === true) return;
+  if (Array.isArray(child)) {
+    for (const item of child) __appendChild(parent, item);
+    return;
+  }
+  const isNode = child && (child.nodeType || (typeof Node !== "undefined" && child instanceof Node));
+  if (isNode) {
+    parent.appendChild(child);
+    return;
+  }
+  parent.appendChild(document.createTextNode(String(child)));
+}
+
+function __renderInstance(instance) {
+  const nextRoot = instance.component(instance.props || {});
+  if (instance.root && instance.root.parentNode) {
+    instance.root.parentNode.replaceChild(nextRoot, instance.root);
+  } else {
+    instance.mountTarget.appendChild(nextRoot);
+  }
+  instance.root = nextRoot;
+}
+
+function __mount(component, mountTarget, props) {
+  const instance = {
+    component,
+    props: props || {},
+    root: null,
+    mountTarget: mountTarget || document.body,
+  };
+  __renderInstance(instance);
+  return instance;
+}
+
+function __setAttribute(el, name, value) {
+  if (value === null || value === undefined || value === false) return;
+  el.setAttribute(name, String(value));
+}
+
+function __setStyle(el, value) {
+  if (!value) return;
+  if (typeof value === "string") {
+    el.setAttribute("style", value);
+    return;
+  }
+  if (typeof value !== "object") return;
+  for (const key of Object.keys(value)) {
+    const styleValue = value[key];
+    if (styleValue === null || styleValue === undefined) continue;
+    if (key.includes("-")) {
+      el.style.setProperty(key, String(styleValue));
+    } else {
+      el.style[key] = String(styleValue);
+    }
+  }
+}
+
+function __addEventListener(el, event, handler) {
+  if (typeof handler !== "function") return;
+  el.addEventListener(event, handler);
+}
+
+function __renderComponent(component, props) {
+  return component(props || {});
+}
+
+function __toCamelCase(name) {
+  return String(name).replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+
+function __getElementProps(el, lightChildren) {
+  const props = {};
+  if (!el || !el.attributes) return props;
+  for (const attr of Array.from(el.attributes)) {
+    if (attr.name === 'data-props') continue;
+    const key = __toCamelCase(attr.name);
+    props[key] = attr.value;
+  }
+  const dataProps = el.getAttribute && el.getAttribute('data-props');
+  if (dataProps) {
+    try {
+      const parsed = JSON.parse(dataProps);
+      if (parsed && typeof parsed === 'object') {
+        Object.assign(props, parsed);
+      }
+    } catch (_) {}
+  }
+  if (lightChildren && lightChildren.length) {
+    props.children = lightChildren;
+  }
+  return props;
+}
+
+function __getRootProps() {
+  if (typeof window !== "undefined" && window.__COMPILER_PROPS__) {
+    return window.__COMPILER_PROPS__ || {};
+  }
+  return {};
+}
+
+function __applyShadowStyles(cssText, styleId, shadowRoot, host) {
+  if (!cssText || !shadowRoot) return;
+  if (host && host.__styleSheet) return;
+  if (typeof injectStyles === "function") {
+    injectStyles(cssText, styleId, shadowRoot);
+    if (host) host.__styleSheet = true;
+  }
+}
+`;
+export {
+  domRuntime
+};

package/dist/runtime/hooks.js

@@ -0,0 +1,223 @@
+function getHookRuntime(hooksUsed) {
+  const hooks = new Set(hooksUsed);
+  const needsDeps = hooks.has("useEffect") || hooks.has("useMemo") || hooks.has("useCallback");
+  const needsEffects = hooks.has("useEffect");
+  let code = "";
+  code += "let __currentInstance = null;\n";
+  code += "function __getCurrentInstance() {\n";
+  code += "  if (!__currentInstance) {\n";
+  code += '    throw new Error("Hooks can only be called inside a component render.");\n';
+  code += "  }\n";
+  code += "  return __currentInstance;\n";
+  code += "}\n\n";
+  if (needsDeps) {
+    code += "function __areHookDepsEqual(prevDeps, nextDeps) {\n";
+    code += "  if (!Array.isArray(prevDeps) || !Array.isArray(nextDeps)) return false;\n";
+    code += "  if (prevDeps.length !== nextDeps.length) return false;\n";
+    code += "  for (let i = 0; i < prevDeps.length; i += 1) {\n";
+    code += "    if (!Object.is(prevDeps[i], nextDeps[i])) return false;\n";
+    code += "  }\n";
+    code += "  return true;\n";
+    code += "}\n\n";
+  }
+  if (needsEffects) {
+    code += "function __flushEffects(instance) {\n";
+    code += "  if (!instance.pendingEffects.length) return;\n";
+    code += "  const effects = instance.pendingEffects.slice();\n";
+    code += "  instance.pendingEffects.length = 0;\n";
+    code += "  const run = () => {\n";
+    code += "    for (const item of effects) {\n";
+    code += "      const previous = instance.hooks[item.index];\n";
+    code += '      if (previous && typeof previous.cleanup === "function") {\n';
+    code += "        previous.cleanup();\n";
+    code += "      }\n";
+    code += "      const cleanup = item.effect();\n";
+    code += "      instance.hooks[item.index] = {\n";
+    code += "        deps: item.deps,\n";
+    code += '        cleanup: typeof cleanup === "function" ? cleanup : null,\n';
+    code += "      };\n";
+    code += "    }\n";
+    code += "  };\n";
+    code += '  if (typeof queueMicrotask === "function") {\n';
+    code += "    queueMicrotask(run);\n";
+    code += "  } else {\n";
+    code += "    setTimeout(run, 0);\n";
+    code += "  }\n";
+    code += "}\n\n";
+  }
+  code += "function __renderInstance(instance) {\n";
+  code += "  instance.hookIndex = 0;\n";
+  code += "  instance.pendingEffects = [];\n";
+  code += "  instance.childIndex = 0;\n";
+  code += "  __currentInstance = instance;\n";
+  code += "  const nextRoot = instance.component(instance.props || {});\n";
+  code += "  __currentInstance = null;\n";
+  code += "  if (instance.root && instance.root.parentNode) {\n";
+  code += "    instance.root.parentNode.replaceChild(nextRoot, instance.root);\n";
+  code += "  } else {\n";
+  code += "    instance.mountTarget.appendChild(nextRoot);\n";
+  code += "  }\n";
+  code += "  instance.root = nextRoot;\n";
+  if (needsEffects) {
+    code += "  __flushEffects(instance);\n";
+  }
+  code += "}\n\n";
+  code += "function __mount(component, mountTarget, props) {\n";
+  code += "  const instance = {\n";
+  code += "    component,\n";
+  code += "    props: props || {},\n";
+  code += "    hooks: [],\n";
+  code += "    hookIndex: 0,\n";
+  code += "    pendingEffects: [],\n";
+  code += "    children: [],\n";
+  code += "    childIndex: 0,\n";
+  code += "    root: null,\n";
+  code += "    mountTarget: mountTarget || document.body,\n";
+  code += "  };\n";
+  code += "  __renderInstance(instance);\n";
+  code += "  return instance;\n";
+  code += "}\n\n";
+  code += "function __renderComponent(component, props) {\n";
+  code += "  const parent = __getCurrentInstance();\n";
+  code += "  const index = parent.childIndex++;\n";
+  code += "  let instance = parent.children[index];\n";
+  code += "  if (!instance || instance.component !== component) {\n";
+  code += "    instance = {\n";
+  code += "      component,\n";
+  code += "      props: {},\n";
+  code += "      hooks: [],\n";
+  code += "      hookIndex: 0,\n";
+  code += "      pendingEffects: [],\n";
+  code += "      children: [],\n";
+  code += "      childIndex: 0,\n";
+  code += "      root: null,\n";
+  code += "      mountTarget: null,\n";
+  code += "    };\n";
+  code += "    parent.children[index] = instance;\n";
+  code += "  }\n";
+  code += "  instance.props = props || {};\n";
+  code += "  instance.hookIndex = 0;\n";
+  code += "  instance.pendingEffects = [];\n";
+  code += "  instance.childIndex = 0;\n";
+  code += "  const prev = __currentInstance;\n";
+  code += "  __currentInstance = instance;\n";
+  code += "  const nextRoot = component(instance.props);\n";
+  code += "  __currentInstance = prev;\n";
+  code += "  instance.root = nextRoot;\n";
+  if (needsEffects) {
+    code += "  __flushEffects(instance);\n";
+  }
+  code += "  return nextRoot;\n";
+  code += "}\n\n";
+  code += "function __teardownInstance(instance) {\n";
+  code += "  if (!instance) return;\n";
+  code += "  if (instance.children) {\n";
+  code += "    for (const child of instance.children) {\n";
+  code += "      __teardownInstance(child);\n";
+  code += "    }\n";
+  code += "  }\n";
+  code += "  if (instance.hooks) {\n";
+  code += "    for (const hook of instance.hooks) {\n";
+  code += '      if (hook && typeof hook.cleanup === "function") {\n';
+  code += "        hook.cleanup();\n";
+  code += "      }\n";
+  code += "    }\n";
+  code += "  }\n";
+  code += "}\n\n";
+  if (hooks.has("useState")) {
+    code += "function useState(initialValue) {\n";
+    code += "  const instance = __getCurrentInstance();\n";
+    code += "  const index = instance.hookIndex++;\n";
+    code += "  if (!Object.prototype.hasOwnProperty.call(instance.hooks, index)) {\n";
+    code += '    instance.hooks[index] = typeof initialValue === "function" ? initialValue() : initialValue;\n';
+    code += "  }\n";
+    code += "  const setState = (value) => {\n";
+    code += '    const nextValue = typeof value === "function" ? value(instance.hooks[index]) : value;\n';
+    code += "    if (!Object.is(nextValue, instance.hooks[index])) {\n";
+    code += "      instance.hooks[index] = nextValue;\n";
+    code += "      __renderInstance(instance);\n";
+    code += "    }\n";
+    code += "  };\n";
+    code += "  return [instance.hooks[index], setState];\n";
+    code += "}\n\n";
+  }
+  if (hooks.has("useReducer")) {
+    code += "function useReducer(reducer, initialArg, init) {\n";
+    code += "  const instance = __getCurrentInstance();\n";
+    code += "  const index = instance.hookIndex++;\n";
+    code += "  if (!Object.prototype.hasOwnProperty.call(instance.hooks, index)) {\n";
+    code += "    instance.hooks[index] = init ? init(initialArg) : initialArg;\n";
+    code += "  }\n";
+    code += "  const dispatch = (action) => {\n";
+    code += "    const nextValue = reducer(instance.hooks[index], action);\n";
+    code += "    if (!Object.is(nextValue, instance.hooks[index])) {\n";
+    code += "      instance.hooks[index] = nextValue;\n";
+    code += "      __renderInstance(instance);\n";
+    code += "    }\n";
+    code += "  };\n";
+    code += "  return [instance.hooks[index], dispatch];\n";
+    code += "}\n\n";
+  }
+  if (hooks.has("useRef")) {
+    code += "function useRef(initialValue) {\n";
+    code += "  const instance = __getCurrentInstance();\n";
+    code += "  const index = instance.hookIndex++;\n";
+    code += "  if (!Object.prototype.hasOwnProperty.call(instance.hooks, index)) {\n";
+    code += "    instance.hooks[index] = { current: initialValue };\n";
+    code += "  }\n";
+    code += "  return instance.hooks[index];\n";
+    code += "}\n\n";
+  }
+  if (hooks.has("useMemo")) {
+    code += "function useMemo(factory, deps) {\n";
+    code += "  const instance = __getCurrentInstance();\n";
+    code += "  const index = instance.hookIndex++;\n";
+    code += "  const prev = instance.hooks[index];\n";
+    code += "  if (prev && deps && __areHookDepsEqual(prev.deps, deps)) {\n";
+    code += "    return prev.value;\n";
+    code += "  }\n";
+    code += "  const value = factory();\n";
+    code += "  instance.hooks[index] = { value, deps };\n";
+    code += "  return value;\n";
+    code += "}\n\n";
+  }
+  if (hooks.has("useCallback")) {
+    code += "function useCallback(callback, deps) {\n";
+    code += "  const instance = __getCurrentInstance();\n";
+    code += "  const index = instance.hookIndex++;\n";
+    code += "  const prev = instance.hooks[index];\n";
+    code += "  if (prev && deps && __areHookDepsEqual(prev.deps, deps)) {\n";
+    code += "    return prev.callback;\n";
+    code += "  }\n";
+    code += "  instance.hooks[index] = { callback, deps };\n";
+    code += "  return callback;\n";
+    code += "}\n\n";
+  }
+  if (hooks.has("useEffect")) {
+    code += "function useEffect(effect, deps) {\n";
+    code += "  const instance = __getCurrentInstance();\n";
+    code += "  const index = instance.hookIndex++;\n";
+    code += "  const prev = instance.hooks[index];\n";
+    code += "  const hasChanged = !prev || !deps || !__areHookDepsEqual(prev.deps, deps);\n";
+    code += "  if (hasChanged) {\n";
+    code += "    instance.pendingEffects.push({ index, effect, deps });\n";
+    code += "  }\n";
+    code += "  if (!prev) {\n";
+    code += "    instance.hooks[index] = { deps, cleanup: null };\n";
+    code += "  }\n";
+    code += "}\n\n";
+  }
+  if (hooks.has("useContext")) {
+    code += "function useContext(context) {\n";
+    code += "  if (!context) return undefined;\n";
+    code += '  if (Object.prototype.hasOwnProperty.call(context, "value")) {\n';
+    code += "    return context.value;\n";
+    code += "  }\n";
+    code += "  return context.current;\n";
+    code += "}\n\n";
+  }
+  return code;
+}
+export {
+  getHookRuntime
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@novility/react-converter-core",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./runtime/*": "./dist/runtime/*.js"
+  },
+  "description": "Core conversion engine for React-Converter",
+  "author": "Mohamed Khaled",
+  "contributors": [
+    "Ali Badawi"
+  ],
+  "license": "Proprietary",
+  "scripts": {
+    "build": "esbuild src/index.js --bundle --platform=node --format=esm --outfile=dist/index.js --external:@babel/* --external:postcss --external:tailwindcss --external:fs-extra && esbuild src/runtime/*.js --outdir=dist/runtime --platform=node --format=esm",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Novility/react-converter-core.git"
+  },
+  "keywords": [
+    "react",
+    "converter",
+    "vanilla",
+    "jsx",
+    "ast"
+  ],
+  "dependencies": {
+    "@babel/parser": "^7.29.3",
+    "@babel/traverse": "^7.29.0",
+    "@babel/types": "^7.29.0",
+    "@tailwindcss/postcss": "^4.3.0",
+    "fs-extra": "^11.3.4",
+    "postcss": "^8.5.14",
+    "tailwindcss": "^4.3.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.28.0"
+  }
+}