@kithinji/pod 1.0.14 → 1.0.16

package/dist/types/plugins/generators/generate_server_component.d.ts

@@ -1,2 +1,4 @@
+import type { Decorator } from "@swc/core";
 export declare function generateServerComponent(filePath: string, code: string): string;
+export declare function stringifyDecorator(decorator: Decorator): string;
 //# sourceMappingURL=generate_server_component.d.ts.map

package/dist/types/plugins/generators/generate_server_component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate_server_component.d.ts","sourceRoot":"","sources":["../../../../src/plugins/generators/generate_server_component.ts"],"names":[],"mappings":"AAoBA,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,MAAM,GACX,MAAM,CAUR"}
+{"version":3,"file":"generate_server_component.d.ts","sourceRoot":"","sources":["../../../../src/plugins/generators/generate_server_component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,SAAS,EAGV,MAAM,WAAW,CAAC;AA0BnB,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,MAAM,GACX,MAAM,CAqER;AAgED,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,CAiB/D"}

package/dist/types/plugins/transformers/j2d.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"j2d.d.ts","sourceRoot":"","sources":["../../../../src/plugins/transformers/j2d.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAY,MAAM,aAAa,CAAC;AACvD,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAE3C,UAAU,aAAa;IACrB,KAAK,EAAE,OAAO,UAAU,CAAC;CAC1B;AAED,UAAU,WAAW;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAu0BD,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,aAAa,GAAG,SAAS,CAAC,WAAW,CAAC,CAqKvE"}
+{"version":3,"file":"j2d.d.ts","sourceRoot":"","sources":["../../../../src/plugins/transformers/j2d.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAY,MAAM,aAAa,CAAC;AACvD,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAE3C,UAAU,aAAa;IACrB,KAAK,EAAE,OAAO,UAAU,CAAC;CAC1B;AAED,UAAU,WAAW;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA23BD,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,aAAa,GAAG,SAAS,CAAC,WAAW,CAAC,CAmKvE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kithinji/pod",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "",
   "bin": {
     "pod": "./dist/main.js"

package/src/main.ts

@@ -28,7 +28,7 @@ import { dockerize } from "./docker";
 
 const program = new Command();
 
-program.name("pod").description("Pod cli tool").version("1.0.14");
+program.name("pod").description("Pod cli tool").version("1.0.16");
 
 program
   .command("new <name>")

package/src/plugins/generators/generate_server_component.ts

@@ -1,5 +1,10 @@
-import { parseSync } from "@swc/core";
-import type { ClassDeclaration, Decorator } from "@swc/core";
+import { parseSync, printSync } from "@swc/core";
+import type {
+  ClassDeclaration,
+  Decorator,
+  ImportDeclaration,
+  ModuleItem,
+} from "@swc/core";
 
 interface MethodParam {
   name: string;
@@ -13,11 +18,18 @@ interface ComponentMethod {
   isAsync: boolean;
 }
 
-interface ComponentInfo {
-  className: string;
+interface ClassStub {
+  name: string;
+  propsType: string;
+  decorators: string[];
+  constructorParams: string[];
   methods: ComponentMethod[];
 }
 
+interface ImportMap {
+  [localName: string]: string;
+}
+
 export function generateServerComponent(
   filePath: string,
   code: string
@@ -28,39 +40,68 @@ export function generateServerComponent(
     decorators: true,
   });
 
-  const componentInfo = extractComponentInfo(ast);
-
-  return generateStubCode(componentInfo);
-}
+  const importMap: ImportMap = {};
+  for (const item of ast.body) {
+    if (item.type === "ImportDeclaration") {
+      const decl = item as ImportDeclaration;
+      for (const specifier of decl.specifiers ?? []) {
+        let localName: string;
+        if (specifier.type === "ImportSpecifier") {
+          localName = specifier.local.value;
+        } else if (specifier.type === "ImportDefaultSpecifier") {
+          localName = specifier.local.value;
+        } else {
+          continue;
+        }
+        importMap[localName] = decl.source.value;
+      }
+    }
+  }
 
-function extractComponentInfo(ast: any): ComponentInfo {
-  let componentClass: ClassDeclaration | null = null;
+  const preservedNodes: ModuleItem[] = [];
+  const stubbedClasses: ClassStub[] = [];
 
   for (const item of ast.body) {
+    let shouldStub = false;
+
     if (
       item.type === "ExportDeclaration" &&
-      item.declaration.type === "ClassDeclaration"
+      item.declaration?.type === "ClassDeclaration"
     ) {
       const classDecl = item.declaration as ClassDeclaration;
 
       if (hasComponentDecorator(classDecl.decorators)) {
-        componentClass = classDecl;
-        break;
+        shouldStub = true;
+        const stub = extractClassStub(classDecl);
+        if (stub) {
+          stubbedClasses.push(stub);
+        }
       }
     }
-  }
 
-  if (!componentClass || !componentClass.identifier) {
-    throw new Error("Component class is undefined");
+    if (!shouldStub) {
+      preservedNodes.push(item);
+    }
   }
 
-  const className = componentClass.identifier.value;
-  const methods = extractMethods(componentClass);
-
-  return {
-    className,
-    methods,
-  };
+  const preservedCode =
+    preservedNodes.length > 0
+      ? printSync({
+          type: "Module",
+          span: ast.span,
+          body: preservedNodes,
+          interpreter: ast.interpreter,
+        }).code
+      : "";
+
+  const stubCode = stubbedClasses
+    .map((stub) => generateStubCode(stub))
+    .join("\n\n");
+
+  return `
+${preservedCode}
+${stubCode}
+  `.trim();
 }
 
 function hasComponentDecorator(decorators?: Decorator[]): boolean {
@@ -86,6 +127,136 @@ function hasComponentDecorator(decorators?: Decorator[]): boolean {
   });
 }
 
+function extractClassStub(classDecl: ClassDeclaration): ClassStub | null {
+  const className = classDecl.identifier?.value;
+  if (!className) return null;
+
+  let propsType = "{}";
+  const decorators: string[] = [];
+  const constructorParams: string[] = [];
+
+  if (classDecl.decorators) {
+    for (const dec of classDecl.decorators) {
+      const str = stringifyDecorator(dec);
+      if (str) decorators.push(str);
+    }
+  }
+
+  for (const member of classDecl.body) {
+    if (member.type === "ClassProperty") {
+      if (member.key.type === "Identifier" && member.key.value === "props") {
+        propsType = extractPropsType(member);
+      }
+    } else if (member.type === "Constructor") {
+      for (const param of member.params) {
+        const paramStr = stringifyParam(param);
+        if (paramStr) constructorParams.push(paramStr);
+      }
+    }
+  }
+
+  const methods = extractMethods(classDecl);
+
+  return {
+    name: className,
+    propsType,
+    decorators,
+    constructorParams,
+    methods,
+  };
+}
+
+export function stringifyDecorator(decorator: Decorator): string {
+  const exprCode = printSync({
+    type: "Module",
+    span: { start: 0, end: 0, ctxt: 0 },
+    body: [
+      {
+        type: "ExpressionStatement",
+        expression: decorator.expression,
+        span: { start: 0, end: 0, ctxt: 0 },
+      },
+    ],
+    interpreter: "",
+  }).code;
+
+  const cleanCode = exprCode.replace(/^#!.*\n/, "").trim();
+
+  return `@${cleanCode.replace(/;$/, "")}`;
+}
+
+function extractPropsType(member: any): string {
+  const typeAnn = member.typeAnnotation?.typeAnnotation;
+  if (!typeAnn) return "{}";
+
+  if (typeAnn.type === "TsTypeLiteral") {
+    const props: string[] = [];
+    for (const m of typeAnn.members) {
+      if (m.type === "TsPropertySignature") {
+        const key = m.key.type === "Identifier" ? m.key.value : "?";
+        const t = m.typeAnnotation
+          ? stringifyType(m.typeAnnotation.typeAnnotation)
+          : "any";
+        props.push(`${key}: ${t}`);
+      }
+    }
+    return `{ ${props.join("; ")} }`;
+  }
+
+  return stringifyType(typeAnn);
+}
+
+function stringifyParam(param: any): string {
+  let decorators: string[] = [];
+  if (param.decorators) {
+    for (const d of param.decorators) {
+      const str = stringifyDecorator(d);
+      if (str) decorators.push(str);
+    }
+  }
+  const decoratorPrefix = decorators.length ? decorators.join(" ") + " " : "";
+
+  let typeName = "any";
+  let paramName = "";
+  let accessibility = "";
+
+  if (param.type === "TsParameterProperty") {
+    accessibility = param.accessibility || "";
+    const inner = param.param;
+    if (inner.type !== "Identifier") return "";
+
+    paramName = inner.value;
+    if (inner.typeAnnotation?.typeAnnotation) {
+      typeName = extractTypeName(inner.typeAnnotation.typeAnnotation);
+    }
+  } else if (param.type === "Parameter") {
+    const pat = param.pat;
+    if (pat.type !== "Identifier") return "";
+
+    paramName = pat.value;
+    if (pat.typeAnnotation?.typeAnnotation) {
+      typeName = extractTypeName(pat.typeAnnotation.typeAnnotation);
+    }
+  } else {
+    return "";
+  }
+
+  const accessPrefix = accessibility ? `${accessibility} ` : "";
+  const result = `${decoratorPrefix}${accessPrefix}${paramName}: ${typeName}`;
+
+  return result;
+}
+
+function extractTypeName(typeNode: any): string {
+  if (
+    typeNode.type === "TsTypeReference" &&
+    typeNode.typeName.type === "Identifier"
+  ) {
+    return typeNode.typeName.value;
+  }
+  return stringifyType(typeNode);
+}
+
 function extractMethods(classDecl: ClassDeclaration): ComponentMethod[] {
   const methods: ComponentMethod[] = [];
 
@@ -209,33 +380,36 @@ function stringifyType(typeNode: any): string {
   }
 }
 
-function generateStubCode(componentInfo: ComponentInfo): string {
-  const className = componentInfo.className;
+function generateStubCode(stub: ClassStub): string {
+  const className = stub.name;
 
-  const build = componentInfo.methods.find((p) => p.name == "build");
+  const build = stub.methods.find((p) => p.name == "build");
 
   if (build == undefined) {
     throw new Error("Component has no build function");
   }
 
+  const decoratorsStr =
+    stub.decorators.length > 0 ? stub.decorators.join("\n") + "\n" : "";
+
   return `import { 
-  Component, 
-  Inject, 
-  getCurrentInjector, 
-  OrcaComponent,
-  JSX,
-  OSC,
-  HttpClient,
-  symbolValueReviver
+  Inject as _Inject, 
+  getCurrentInjector as _getCurrentInjector, 
+  OrcaComponent as _OrcaComponent,
+  JSX as _JSX,
+  OSC as _OSC,
+  HttpClient as _HttpClient,
+  symbolValueReviver as _symbolValueReviver
 } from "@kithinji/orca";
 
-@Component()
-export class ${className} extends OrcaComponent {
+
+${decoratorsStr}export class ${className} extends _OrcaComponent {
     props!: any;
 
     constructor(
-      @Inject("OSC_URL", { maybe: true }) private oscUrl?: string,
-      private readonly http: HttpClient,
+      @_Inject("OSC_URL", { maybe: true }) private oscUrl?: string,
+      private readonly http: _HttpClient,
+      ${stub.constructorParams.join(", ")}
     ) {
       super();
 
@@ -248,20 +422,20 @@ export class ${className} extends OrcaComponent {
         const root = document.createElement("div");
         root.textContent = "loading...";
 
-        const injector = getCurrentInjector();
+        const injector = _getCurrentInjector();
 
         if(injector == null) {
           throw new Error("Injector is null");
         }
 
-        const osc = new OSC(root);
+        const osc = new _OSC(root);
 
-        const subscription = this.http.post<JSX.Element>(
+        const subscription = this.http.post<_JSX.Element>(
           \`\${this.oscUrl}?c=${className}\`, {
             body: this.props,
-            reviver: symbolValueReviver,
+            reviver: _symbolValueReviver,
           }
-        ).subscribe((jsx: JSX.Element) => {
+        ).subscribe((jsx: _JSX.Element) => {
           const action = jsx.action || "insert";
 
           if (action === "insert") {

package/src/plugins/generators/tsx_server_stub.ts

@@ -12,7 +12,7 @@ interface ClassStub {
   name: string;
   propsType: string;
   decorators: string[];
-  constructorParams: string[]; // added for constructor arguments
+  constructorParams: string[];
 }
 
 interface ImportMap {

package/src/plugins/transformers/j2d.ts

@@ -105,6 +105,43 @@ class ASTUtilities {
       body.push(...statements);
     }
   }
+
+  addEffectCleanup(
+    scope: any,
+    effectCall: BabelTypes.CallExpression
+  ): BabelTypes.Statement[] {
+    const cleanupId = scope.generateUidIdentifier("cleanup");
+
+    return [
+      // const _cleanup1 = $effect(...)
+      this.t.variableDeclaration("const", [
+        this.t.variableDeclarator(cleanupId, effectCall),
+      ]),
+      // self.__cleanup = [...(self.__cleanup || []), _cleanup1]
+      this.t.expressionStatement(
+        this.t.assignmentExpression(
+          "=",
+          this.t.memberExpression(
+            this.t.identifier("self"),
+            this.t.identifier("__cleanup")
+          ),
+          this.t.arrayExpression([
+            this.t.spreadElement(
+              this.t.logicalExpression(
+                "||",
+                this.t.memberExpression(
+                  this.t.identifier("self"),
+                  this.t.identifier("__cleanup")
+                ),
+                this.t.arrayExpression([])
+              )
+            ),
+            cleanupId,
+          ])
+        )
+      ),
+    ];
+  }
 }
 
 class JSXUtilities {
@@ -370,6 +407,7 @@ class ElementTransformer {
         jsxElement.openingElement.attributes,
         elId,
         statements,
+        scope,
         context
       );
 
@@ -531,6 +569,7 @@ class ElementTransformer {
     attributes: Array<BabelTypes.JSXAttribute | BabelTypes.JSXSpreadAttribute>,
     elId: BabelTypes.Identifier,
     statements: BabelTypes.Statement[],
+    scope: any,
     context: TransformContext
   ): {
     hasRef: boolean;
@@ -555,14 +594,24 @@ class ElementTransformer {
           context.observableSignals,
           this.astUtils
         );
-        statements.push(
-          this.t.expressionStatement(
+
+        const effectCall = this.t.callExpression(this.t.identifier("$effect"), [
+          this.t.arrowFunctionExpression(
+            [],
             this.t.callExpression(this.t.identifier("$spread"), [
               elId,
               this.astUtils.replaceThisWithSelf(replaced),
             ])
-          )
+          ),
+        ]);
+
+        const cleanupStatements = this.astUtils.addEffectCleanup(
+          scope,
+          effectCall
         );
+
+        statements.push(...cleanupStatements);
+
         continue;
       }
 
@@ -610,7 +659,7 @@ class ElementTransformer {
       }
 
       if (key === "style" && this.t.isJSXExpressionContainer(attr.value)) {
-        this.processStyleAttribute(attr, elId, statements, context);
+        this.processStyleAttribute(attr, elId, statements, scope, context);
         continue;
       }
 
@@ -658,6 +707,7 @@ class ElementTransformer {
     attr: BabelTypes.JSXAttribute,
     elId: BabelTypes.Identifier,
     statements: BabelTypes.Statement[],
+    scope: any,
     context: TransformContext
   ): void {
     if (!this.t.isJSXExpressionContainer(attr.value)) return;
@@ -672,17 +722,19 @@ class ElementTransformer {
       context.observableSignals,
       this.astUtils
     );
-    statements.push(
-      this.t.expressionStatement(
+
+    const effectCall = this.t.callExpression(this.t.identifier("$effect"), [
+      this.t.arrowFunctionExpression(
+        [],
         this.t.callExpression(this.t.identifier("$style"), [
           elId,
-          this.t.arrowFunctionExpression(
-            [],
-            this.astUtils.replaceThisWithSelf(replaced)
-          ),
+          this.astUtils.replaceThisWithSelf(replaced),
         ])
-      )
-    );
+      ),
+    ]);
+    const cleanupStatements = this.astUtils.addEffectCleanup(scope, effectCall);
+
+    statements.push(...cleanupStatements);
   }
 
   private processRegularAttribute(
@@ -872,6 +924,7 @@ export function j2d({ types: t }: PluginContext): PluginObj<PluginState> {
             { local: "$style", imported: "style" },
             { local: "$spread", imported: "spread" },
             { local: "$toSignal", imported: "toSignal" },
+            { local: "$effect", imported: "effect" },
           ];
 
           for (const helper of helpers) {
@@ -913,7 +966,6 @@ export function j2d({ types: t }: PluginContext): PluginObj<PluginState> {
         const body = path.node.body;
         if (!t.isBlockStatement(body)) return;
 
-        // Collect all observables from JSX
         const observables = new Map<string, BabelTypes.Expression>();
         path.traverse({
           JSXElement(jsxPath: NodePath<BabelTypes.JSXElement>) {
@@ -932,14 +984,12 @@ export function j2d({ types: t }: PluginContext): PluginObj<PluginState> {
           },
         });
 
-        // Add self reference
         body.body.unshift(
           t.variableDeclaration("const", [
             t.variableDeclarator(t.identifier("self"), t.thisExpression()),
           ])
         );
 
-        // Create signal declarations for observables
         const observableSignals = new Map<string, BabelTypes.Identifier>();
         const signalDeclarations: BabelTypes.Statement[] = [];