Skip to main content

Plugin merger file - src/index.ts

Structure of a plugin​

  • src
    • index.ts: This will be the merger file of a plugin.
  • template : The entire running project for backend or frontend lies here. This has all the features, for example auth, chat, media etc.

Destructuring index.ts​

  1. Methods: Every plugin uses generic merge and install methods defined in @gluestack-framework-v3/framework.

Let's study those methods:

  • copyDirectory: It helps in merging the directories that we pass to it.
  • mergeTsconfigPaths: It helps in merging tsconfig paths. Mkae sure tsconfig of your plugin is a valid json.
  • mergeEnvExamples: It helps in merging envexample file.
  • mergePackageJsonDependencies: It helps in merging dependencies, devdependencies and scripts of package.json
  • replaceFile: It takes paths and replaces the file from the specified filepath. Generally when we copy directories, it doesn't override the already present file.
  • updatePluginJson: We are maintaining plugin.json file in the project to keep track of installed plugins in that project. This method updates that file in the project.

  1. Logger: We have defined a logger in the framework. We can use that from the framework in our plugin.

  2. PluginAdapter: There is a plugin adapter which has all the paths defined for the plugin. It is a super class. We use a lot of methods from PluginAdapter for e.g.

    • pluginAdapter.getPluginName()
    • pluginAdapter.getPluginType()
    • pluginAdapter.getGenerateFrom()
    • pluginAdapter.getProjectDependenciesPath()
    • this.pluginAdapter.getPluginDependenciesPathPackageJson()
    • this.pluginAdapter.getProjectPluginJsonPath()
    • this.pluginAdapter.getProjectPath()

  3. BasePlugin: Baseplugin has some abstract and protected methods defined. We extend our plugin class from BasePlugin.

After having all the methods, logger, adapter and classes, we will see how this works. We have three abstract methods defined in BasePlugin

  • install
  • uninstall
  • update

Install will use all these methods for the install.

 async install(): Promise<void> {
    logger.info("Starting update process...");
    try {
      const directories = [
        "graphql",
        "app",
        "assets",
        "components",
        "context",
        "services",
        "hooks",
        "types",
        "utils",
      ];
      await this.copyDirectories(directories); // Helper function to copy directories
      await this.mergePackageJsonDependencies(); // Merge the package.json dependencies
      await this.mergeTsconfigPaths(); // Merge the tsconfig paths
      await this.mergeEnvExample(); // Merge the env.example
      await this.replaceMainLayoutFile(); // Replace the main layout file in expo router stack
      await this.updatePluginJson(); // Update the plugin json
    } catch (error) {
      console.error("Error during update process:", error);
      throw error;
    }
    logger.info("Update process completed successfully.");
  }