Server-Side Rendering (SSR) Compiler in Vue (TypeScript)

This challenge tasks you with building a simplified compiler for Vue components that transforms them into server-side rendering (SSR) compatible code. SSR improves initial load time and SEO by rendering components on the server before sending the HTML to the client. You'll focus on a core aspect: extracting the component's render function and its dependencies to facilitate server-side execution.

Problem Description

You are to create a TypeScript function compileToSSR that takes a Vue component (defined as a plain JavaScript object with a render function) as input and returns a string containing the compiled SSR-ready code. This code should:

1. Extract the render function: The compiled code must contain the original component's render function.
2. Identify Dependencies (Simplified): For this simplified version, assume dependencies are any calls to functions within the render function that are not built-in JavaScript functions (e.g., console.log, Math.random are okay, but a custom function myCustomFunction is a dependency). The compiled code should include a string listing these dependencies, separated by commas.
3. Wrap in a Function: The extracted render function and the dependency list should be wrapped within a new JavaScript function. This function will be the output of the compiler.

The goal is to create a function that can be easily integrated into an SSR environment, allowing the server to execute the component's render function and generate the initial HTML.

Examples

Example 1:

Input:
{
  render() {
    return `<div>Hello, ${this.message}</div>`;
  },
  data() {
    return {
      message: "World"
    };
  }
}

Output:
"function renderSSR() {\n  return `<div>Hello, ${this.message}</div>`;\n}\n"
Explanation: The render function is extracted and wrapped in a function. No dependencies are present.

Example 2:

Input:
{
  render() {
    function myCustomFunction() {
      return "Custom Value";
    }
    return `<div>${myCustomFunction()}</div>`;
  },
  data() {
    return {
      message: "World"
    };
  }
}

Output:
"function renderSSR() {\n  function myCustomFunction() {\n    return \"Custom Value\";\n  }\n  return `<div>${myCustomFunction()}</div>`;\n}\nmyCustomFunction"
Explanation: The render function is extracted, wrapped, and the dependency `myCustomFunction` is included in the output string.

Example 3: (Edge Case - No Render Function)

Input:
{
  data() {
    return {
      message: "World"
    };
  }
}

Output:
"function renderSSR() {\n  return '';\n}\n"
Explanation: If the component doesn't have a render function, return an empty string render function.

Constraints

• The input component will always be a plain JavaScript object.
• The render function, if present, will always return a string.
• Dependencies are identified by checking if a function name exists within the render function's body and is not a built-in JavaScript function. For simplicity, assume all function names are valid JavaScript identifiers.
• The output string must be valid JavaScript code.
• Performance is not a primary concern for this simplified challenge. Focus on correctness and clarity.
• The component may or may not have a render function.

Notes

• You can use regular expressions or string manipulation techniques to extract the render function and identify dependencies.
• Consider edge cases such as nested functions and complex expressions within the render function.
• This is a simplified compiler; it does not handle all aspects of SSR (e.g., data hydration, component lifecycle hooks).
• Focus on the core task of extracting the render function and identifying dependencies.
• The dependency list should only contain the names of the functions, not their definitions.
• If no dependencies are found, the dependency list should be an empty string.
• If the component does not have a render function, return a function that returns an empty string.