WIP - TS local plugins

packages/gatsby/src/bootstrap/load-plugins/load.ts

@@ -1,6 +1,7 @@
 import _ from "lodash"
 import { slash, createRequireFromPath } from "gatsby-core-utils"
 import fs from "fs"
+import { ensureDirSync } from "fs-extra"
 import path from "path"
 import crypto from "crypto"
 import glob from "glob"
@@ -19,7 +20,10 @@ import {
   ISiteConfig,
 } from "./types"
 import { PackageJson } from "../../.."
-import { COMPILED_CACHE_DIR } from "../../utils/parcel/compile-gatsby-files"
+import {
+  compileGatsbyFiles,
+  COMPILED_CACHE_DIR,
+} from "../../utils/parcel/compile-gatsby-files"
 
 const GATSBY_CLOUD_PLUGIN_NAME = `gatsby-plugin-gatsby-cloud`
 const TYPESCRIPT_PLUGIN_NAME = `gatsby-plugin-typescript`
@@ -79,18 +83,34 @@ export function resolvePlugin(
 
     if (existsSync(resolvedPath)) {
       if (existsSync(`${resolvedPath}/package.json`)) {
-        const packageJSON = JSON.parse(
-          fs.readFileSync(`${resolvedPath}/package.json`, `utf-8`)
-        ) as PackageJson
-        const name = packageJSON.name || pluginName
-        warnOnIncompatiblePeerDependency(name, packageJSON)
+        let packageJSON
+        let name
+
+        const compiledDir = `${rootDir}/${COMPILED_CACHE_DIR}/${pluginName}`
+
+        ensureDirSync(compiledDir)
+
+        // TODO - This is a proof of concept, everything will be refactored
+
+        compileGatsbyFiles(resolvedPath, compiledDir)
+          .then(() => {
+            packageJSON = JSON.parse(
+              fs.readFileSync(`${resolvedPath}/package.json`, `utf-8`)
+            ) as PackageJson
+            name = packageJSON.name || pluginName
+            warnOnIncompatiblePeerDependency(name, packageJSON)
+          })
+          .catch(error => {
+            console.error(`CAUGHT ERROR:`, error)
+          })
 
         return {
           resolve: resolvedPath,
+          resolveCompiled: compiledDir,
           name,
           id: createPluginId(name),
           version:
-            packageJSON.version || createFileContentHash(resolvedPath, `**`),
+            packageJSON?.version || createFileContentHash(resolvedPath, `**`),
         }
       } else {
         // Make package.json a requirement for local plugins too
@@ -340,12 +360,12 @@ export function loadPlugins(
   }
 
   // Add the site's default "plugin" i.e. gatsby-x files in root of site.
-  const compiledPath = `${path.join(process.cwd(), COMPILED_CACHE_DIR)}`
   plugins.push({
-    resolve: slash(compiledPath),
+    resolve: slash(process.cwd()),
+    resolveCompiled: `${path.join(process.cwd(), COMPILED_CACHE_DIR)}`,
     id: createPluginId(`default-site-plugin`),
     name: `default-site-plugin`,
-    version: createFileContentHash(compiledPath, `gatsby-*`),
+    version: createFileContentHash(slash(process.cwd()), `gatsby-*`),
     pluginOptions: {
       plugins: [],
     },

packages/gatsby/src/bootstrap/load-plugins/types.ts

@@ -17,6 +17,9 @@ export interface IPluginInfo {
   /** The absolute path to the plugin */
   resolve: string
 
+  /** The absolute path to the compiled plugin directory, if there is one */
+  resolveCompiled?: string
+
   /** The plugin name */
   name: string
 

packages/gatsby/src/internal-plugins/internal-data-bridge/gatsby-node.js

@@ -56,14 +56,11 @@ exports.sourceNodes = ({
   flattenedPlugins.forEach(plugin => {
     plugin.pluginFilepath = plugin.resolve
 
-    // Since `default-site-plugin` is a proxy for gatsby-* files that are compiled and live in .cache/compiled,
-    // use program.directory to access package.json since it is not compiled and lives in the site root
-    const dir =
-      plugin.name === `default-site-plugin` ? program.directory : plugin.resolve
-
     createNode({
       ...plugin,
-      packageJson: transformPackageJson(require(`${dir}/package.json`)),
+      packageJson: transformPackageJson(
+        require(`${plugin.resolve}/package.json`)
+      ),
       parent: null,
       children: [],
       internal: {

packages/gatsby/src/schema/graphql-engine/print-plugins.ts

@@ -45,13 +45,9 @@ function renderQueryEnginePlugins(): string {
 }
 
 function relativePluginPath(resolve: string): string {
-  const relativePath = slash(
+  return slash(
     path.relative(path.dirname(schemaCustomizationPluginsPath), resolve)
   )
-
-  // TODO: This is quite hacky, better idea anyone?
-  if (relativePath.startsWith(`.`)) return relativePath
-  return relativePath.replace(`compiled`, `..`)
 }
 
 function render(

packages/gatsby/src/services/initialize.ts

@@ -533,22 +533,26 @@ export async function initialize({
     if (env === `ssr` && plugin.skipSSR === true) return undefined
 
     const envAPIs = plugin[`${env}APIs`]
-    const dir =
-      plugin.name === `default-site-plugin` ? program.directory : plugin.resolve
 
     // Always include gatsby-browser.js files if they exist as they're
     // a handy place to include global styles and other global imports.
     try {
       if (env === `browser`) {
-        const modulePath = path.join(dir, `gatsby-${env}`)
+        const modulePath = path.join(
+          plugin?.compiledResolve || plugin.resolve,
+          `gatsby-${env}`
+        )
         return slash(resolveModule(modulePath) as string)
       }
     } catch (e) {
       // ignore
     }
 
     if (envAPIs && Array.isArray(envAPIs) && envAPIs.length > 0) {
-      const modulePath = path.join(dir, `gatsby-${env}`)
+      const modulePath = path.join(
+        plugin?.compiledResolve || plugin.resolve,
+        `gatsby-${env}`
+      )
       return slash(resolveModule(modulePath) as string)
     }
     return undefined

packages/gatsby/src/utils/parcel/compile-gatsby-files.ts

@@ -3,14 +3,14 @@ import reporter from "gatsby-cli/lib/reporter"
 
 export const COMPILED_CACHE_DIR = `.cache/compiled`
 
-export function constructBundler(dir: string): Parcel {
+export function constructBundler(entryDir: string, distDir?: string): Parcel {
   return new Parcel({
-    entries: `${dir}/gatsby-+(node|config).{ts,tsx,js}`,
+    entries: `${entryDir}/gatsby-+(node|config).{ts,tsx,js}`,
     defaultConfig: `gatsby-parcel-config`,
     mode: `production`,
     targets: {
       default: {
-        distDir: `${dir}/${COMPILED_CACHE_DIR}`,
+        distDir: distDir || `${entryDir}/${COMPILED_CACHE_DIR}`,
         outputFormat: `commonjs`,
         includeNodeModules: false,
         sourceMap: false,
@@ -19,16 +19,19 @@ export function constructBundler(dir: string): Parcel {
         },
       },
     },
-    cacheDir: `${dir}/.cache/.parcel-cache`,
+    cacheDir: `${entryDir}/.cache/.parcel-cache`,
   })
 }
 
 /**
  * Compiles known gatsby-* files (e.g. `gatsby-config`, `gatsby-node`)
  * and stores them in `.cache/compiled` relative to the site root.
  */
-export async function compileGatsbyFiles(dir: string): Promise<void> {
-  const bundler = constructBundler(dir)
+export async function compileGatsbyFiles(
+  entryDir: string,
+  distDir?: string
+): Promise<void> {
+  const bundler = constructBundler(entryDir, distDir)
 
   const activity = reporter.activityTimer(`compile gatsby files`)
   activity.start()