feat(plugin): create plugin to integrate modules

packages/pages/src/common/src/parsers/sourceFileParser.test.ts

@@ -193,40 +193,6 @@ describe("getVariablePropertyByName", () => {
   });
 });
 
-describe("addReactImports", () => {
-  it("correctly adds react imports", () => {
-    const parser = createParser(`const foo = foo;`);
-    parser.addReactImports();
-    expect(
-      parser.getAllText().includes(`import * as React from "react";`)
-    ).toBeTruthy();
-    expect(
-      parser.getAllText().includes(`import * as ReactDOM from "react-dom";`)
-    ).toBeTruthy();
-  });
-
-  it("doesn't add additional imports if already there", () => {
-    const expected =
-      `import * as React from "react";\n` +
-      `import * as ReactDOM from "react-dom";\n`;
-    const parser = createParser(
-      `import * as React from "react";\n` +
-        `import * as ReactDOM from "react-dom";\n`
-    );
-    parser.addReactImports();
-    expect(parser.getAllText()).toEqual(expected);
-  });
-
-  it("only adds imports if they are missing", () => {
-    const expected =
-      `import * as React from "react";\n` +
-      `import * as ReactDOM from "react-dom";\n`;
-    const parser = createParser(`import * as React from "react";`);
-    parser.addReactImports();
-    expect(parser.getAllText()).toEqual(expected);
-  });
-});
-
 describe("removeUnusedImports", () => {
   it("correctly removes unused imports", () => {
     const parser = createParser(`import * as React from "react";`);

packages/pages/src/common/src/parsers/sourceFileParser.ts

@@ -274,33 +274,6 @@ export default class SourceFileParser {
     return this.sourceFile.getEnd();
   }
 
-  /**
-   * Adds react and react-dom imports if they do not exist.
-   */
-  addReactImports() {
-    const existingReactImport = this.sourceFile.getImportDeclaration(
-      (i) => i.getModuleSpecifierValue() === "react"
-    );
-    if (!existingReactImport) {
-      this.sourceFile.addImportDeclaration({
-        moduleSpecifier: "react",
-        namespaceImport: "React",
-        isTypeOnly: false,
-      });
-    }
-
-    const existingReactDOMImport = this.sourceFile.getImportDeclaration(
-      (i) => i.getModuleSpecifierValue() === "react-dom"
-    );
-    if (!existingReactDOMImport) {
-      this.sourceFile.addImportDeclaration({
-        moduleSpecifier: "react-dom",
-        namespaceImport: "ReactDOM",
-        isTypeOnly: false,
-      });
-    }
-  }
-
   removeUnusedImports() {
     this.sourceFile.fixUnusedIdentifiers();
   }

packages/pages/src/vite-plugin/modules/plugin.ts

@@ -1,4 +1,4 @@
-import { build, createLogger } from "vite";
+import { build, createLogger, Plugin } from "vite";
 import { ProjectStructure } from "../../common/src/project/structure.js";
 import { glob } from "glob";
 import path from "node:path";
@@ -8,6 +8,7 @@ import { processEnvVariables } from "../../util/processEnvVariables.js";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import pc from "picocolors";
 import { addResponseHeadersToConfigYaml } from "../../util/editConfigYaml.js";
+// https://github.com/dolanmiu/vite-plugin-scope-tailwind/issues/5
 // @ts-expect-error due to type any
 import scopeTailwind from "vite-plugin-scope-tailwind";
 import SourceFileParser, {
@@ -19,19 +20,14 @@ import nested from "postcss-nested";
 
 const wrappedCode = (moduleName: string, containerName: string): string => {
   return `
-// The following code is added during build and removed after build is completed.
-const moduleContainerForBuildUseOnly = document.getElementById('${containerName}');
-if (!moduleContainerForBuildUseOnly) {
-  throw new Error('could not find ${containerName} element');
-}
-
-ReactDOM.render(
-  <React.StrictMode>
-    <${moduleName}/>
-  </React.StrictMode>,
-  moduleContainerForBuildUseOnly
-);
-  `;
+  const moduleContainerForBuildUseOnly = document.getElementById('${containerName}');
+  if (!moduleContainerForBuildUseOnly) {
+    throw new Error('could not find ${containerName} element');
+  }
+  ReactDOM.render(
+    /* @__PURE__ */ jsx(${moduleName}, {}),
+    moduleContainerForBuildUseOnly
+  );`;
 };
 
 const moduleResponseHeaderProps = {
@@ -80,7 +76,6 @@ export const buildModules = async (
   }
 
   for (const [moduleName, fileInfo] of Object.entries(filepaths)) {
-    const index = addExtraModuleCode(fileInfo.path, moduleName);
     logger.info = (msg, options) => {
       if (msg.includes("building for production")) {
         loggerInfo(pc.green(`\nBuilding ${moduleName} module...`));
@@ -117,13 +112,7 @@ export const buildModules = async (
           fileInfo.name
         ),
       },
-      esbuild: {
-        logOverride: {
-          "css-syntax-error": "silent",
-        },
-      },
       build: {
-        chunkSizeWarningLimit: 2000,
         emptyOutDir: false,
         outDir: outdir,
         minify: true,
@@ -138,6 +127,7 @@ export const buildModules = async (
       },
       define: processEnvVariables(envVarConfig.envVarPrefix),
       plugins: [
+        addWrappedCodePlugin(fileInfo.path, moduleName),
         scopeTailwind({ react: true }),
         nodePolyfills({
           globals: {
@@ -148,10 +138,42 @@ export const buildModules = async (
         }),
       ],
     });
-    removeAddedModuleCode(fileInfo.path, index);
   }
 };
 
+export default function addWrappedCodePlugin(
+  path: string,
+  moduleName: string
+): Plugin {
+  return {
+    name: "wrapped-code-plugin",
+    apply: "build",
+    transform(source: string, id: string) {
+      if (id === path) {
+        return (
+          getReactImports(source) + source + extraModuleCode(path, moduleName)
+        );
+      }
+      return null;
+    },
+  };
+}
+
+const getReactImports = (source: string): string => {
+  let imports = "";
+  if (!(source.includes(`from 'react'`) || source.includes(`from "react"`))) {
+    imports += `import * as React from 'react';\n`;
+  }
+  if (
+    !(
+      source.includes(`from 'react-dom'`) || source.includes(`from "react-dom"`)
+    )
+  ) {
+    imports += `import * as ReactDOM from 'react-dom';\n`;
+  }
+  return imports;
+};
+
 const shouldBundleModules = (projectStructure: ProjectStructure) => {
   const { rootFolders, subfolders } = projectStructure.config;
   return fs.existsSync(path.join(rootFolders.source, subfolders.modules));
@@ -168,44 +190,23 @@ const getModuleName = (modulePath: string): string | undefined => {
 };
 
 /**
- * Adds custom code to module such that it works for user when bundled into umd.js.
+ * Adds custom code to module when bundled into umd.js.
  *
  * @param modulePath
  * @param name set by ModuleConfig or filename
- * @returns number of added index
  */
-const addExtraModuleCode = (modulePath: string, name: string): number => {
+const extraModuleCode = (modulePath: string, name: string) => {
   const sfp = new SourceFileParser(modulePath, createTsMorphProject());
   const declaration = sfp.getVariableDeclarationByType("Module");
   if (declaration === undefined) {
     throw new Error(`Cannot find variable Module in ${modulePath}`);
   }
   const moduleName = declaration.getName();
-  const insertIndex = sfp.getEndPos();
-  const afterInsertIndex = sfp.insertStatement(
-    wrappedCode(moduleName, name),
-    insertIndex
-  );
-  sfp.addReactImports();
-  sfp.save();
-  return afterInsertIndex - insertIndex;
-};
-
-/**
- * Removes the custom code we added after bundling is done.
- *
- * @param modulePath
- * @param index index added (such as via addExtraModuleCode)
- */
-const removeAddedModuleCode = (modulePath: string, index: number) => {
-  const sfp = new SourceFileParser(modulePath, createTsMorphProject());
-  sfp.removeStatement(sfp.getEndPos() - index, sfp.getEndPos());
-  sfp.removeUnusedImports();
-  sfp.save();
+  return wrappedCode(moduleName, name);
 };
 
 /**
- * Returns the postcss.config filepath if it exists in module.
+ * Returns the postcss.config filepath if it exists in the module.
  * Else returns the root postcss.config filepath.
  * If there is none, throws error.
  *