chore: Move resource templates to @k8slens/resource-templates

- Switch to using webpack to bundle the templates instead of electron-builder

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Signed-off-by: Sebastian Malton <sebastian@malton.name>

package-lock.json

@@ -3979,6 +3979,10 @@
       "resolved": "packages/release-tool",
       "link": true
     },
+    "node_modules/@k8slens/resource-templates": {
+      "resolved": "packages/resource-templates",
+      "link": true
+    },
     "node_modules/@k8slens/run-many": {
       "resolved": "packages/utility-features/run-many",
       "link": true
@@ -35731,6 +35735,7 @@
         "@k8slens/metrics": "^6.5.0-alpha.4",
         "@k8slens/node-fetch": "^6.5.0-alpha.3",
         "@k8slens/react-application": "^1.0.0-alpha.2",
+        "@k8slens/resource-templates": "^1.0.0-alpha.0",
         "@kubernetes/client-node": "^0.18.1",
         "@material-ui/styles": "^4.11.5",
         "@sentry/electron": "^3.0.8",
@@ -36935,6 +36940,11 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "packages/resource-templates": {
+      "name": "@k8slens/resource-templates",
+      "version": "1.0.0-alpha.0",
+      "license": "MIT"
+    },
     "packages/semver": {
       "name": "@k8slens/semver",
       "version": "6.5.0-alpha.4",

packages/core/package.json

@@ -116,6 +116,7 @@
     "@k8slens/metrics": "^6.5.0-alpha.4",
     "@k8slens/node-fetch": "^6.5.0-alpha.3",
     "@k8slens/react-application": "^1.0.0-alpha.2",
+    "@k8slens/resource-templates": "^1.0.0-alpha.0",
     "@kubernetes/client-node": "^0.18.1",
     "@material-ui/styles": "^4.11.5",
     "@sentry/electron": "^3.0.8",

packages/core/src/renderer/components/dock/create-resource/create-resource-templates.injectable.ts

@@ -8,26 +8,26 @@ import userCreateResourceTemplatesInjectable from "./user-templates.injectable";
 import lensCreateResourceTemplatesInjectable from "./lens-templates.injectable";
 import type { GroupBase } from "react-select";
 
-export type RawTemplates = [group: string, items: [file: string, contents: string][]];
+export interface RawTemplate {
+  label: string;
+  value: string;
+}
+export interface RawTemplates {
+  label: string;
+  options: RawTemplate[];
+}
 
 const createResourceTemplatesInjectable = getInjectable({
   id: "create-resource-templates",
 
-  instantiate: async (di) => {
+  instantiate: (di) => {
-    const lensResourceTemplates = await di.inject(lensCreateResourceTemplatesInjectable);
+    const lensResourceTemplates = di.inject(lensCreateResourceTemplatesInjectable);
     const userResourceTemplates = di.inject(userCreateResourceTemplatesInjectable);
 
-    return computed((): GroupBase<{ label: string; value: string }>[] => {
+    return computed((): GroupBase<RawTemplate>[] => [
-      const res = [
+      ...userResourceTemplates.get(),
-        ...userResourceTemplates.get(),
+      lensResourceTemplates,
-        lensResourceTemplates,
+    ]);
-      ];
-
-      return res.map(([group, items]) => ({
-        label: group,
-        options: items.map(([label, value]) => ({ label, value })),
-      }));
-    });
   },
 });
 

packages/core/src/renderer/components/dock/create-resource/lens-templates.injectable.ts

@@ -3,37 +3,25 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import { hasCorrectExtension } from "./has-correct-extension";
-import readFileInjectable from "../../../../common/fs/read-file.injectable";
-import readDirectoryInjectable from "../../../../common/fs/read-directory.injectable";
 import type { RawTemplates } from "./create-resource-templates.injectable";
-import joinPathsInjectable from "../../../../common/path/join-paths.injectable";
 import parsePathInjectable from "../../../../common/path/parse.injectable";
-import lensResourcesDirInjectable from "../../../../common/vars/lens-resources-dir.injectable";
+
+const templatesContext = require.context("@k8slens/resource-templates/templates", true, /^\.\/.*\.(yaml|yml)$/);
 
 const lensCreateResourceTemplatesInjectable = getInjectable({
   id: "lens-create-resource-templates",
 
-  instantiate: async (di): Promise<RawTemplates> => {
+  instantiate: (di): RawTemplates => {
-    const readFile = di.inject(readFileInjectable);
-    const readDir = di.inject(readDirectoryInjectable);
-    const joinPaths = di.inject(joinPathsInjectable);
     const parsePath = di.inject(parsePathInjectable);
-    const resourcesDirectory = di.inject(lensResourcesDirInjectable);
 
-    /**
+    return {
-     * Mapping between file names and their contents
+      label: "lens",
-     */
+      options: templatesContext.keys()
-    const templates: [file: string, contents: string][] = [];
+        .map((key) => ({
-    const templatesFolder = joinPaths(resourcesDirectory, "templates/create-resource");
+          label: parsePath(key).name,
-
+          value: templatesContext(key) as string,
-    for (const dirEntry of await readDir(templatesFolder)) {
+        })),
-      if (hasCorrectExtension(dirEntry)) {
+    };
-        templates.push([parsePath(dirEntry).name, await readFile(joinPaths(templatesFolder, dirEntry))]);
-      }
-    }
-
-    return ["lens", templates];
   },
 });
 

packages/core/src/renderer/components/dock/create-resource/user-templates.injectable.ts

@@ -7,15 +7,15 @@ import { computed, observable } from "mobx";
 import { delay, getOrInsert, isErrnoException } from "@k8slens/utilities";
 import { readFile } from "fs/promises";
 import { hasCorrectExtension } from "./has-correct-extension";
-import type { RawTemplates } from "./create-resource-templates.injectable";
+import type { RawTemplate, RawTemplates } from "./create-resource-templates.injectable";
 import joinPathsInjectable from "../../../../common/path/join-paths.injectable";
 import watchInjectable from "../../../../common/fs/watch/watch.injectable";
 import getRelativePathInjectable from "../../../../common/path/get-relative-path.injectable";
 import homeDirectoryPathInjectable from "../../../../common/os/home-directory-path.injectable";
 import getDirnameOfPathInjectable from "../../../../common/path/get-dirname.injectable";
-import loggerInjectable from "../../../../common/logger.injectable";
 import parsePathInjectable from "../../../../common/path/parse.injectable";
 import { waitForPath } from "../../../../common/utils/wait-for-path";
+import prefixedLoggerInjectable from "../../../../common/logger/prefixed-logger.injectable";
 
 const userCreateResourceTemplatesInjectable = getInjectable({
   id: "user-create-resource-templates",
@@ -25,23 +25,29 @@ const userCreateResourceTemplatesInjectable = getInjectable({
     const getRelativePath = di.inject(getRelativePathInjectable);
     const homeDirectoryPath = di.inject(homeDirectoryPathInjectable);
     const getDirnameOfPath = di.inject(getDirnameOfPathInjectable);
-    const logger = di.inject(loggerInjectable);
+    const logger = di.inject(prefixedLoggerInjectable, "USER-CREATE-RESOURCE-TEMPLATES");
     const parsePath = di.inject(parsePathInjectable);
 
     const userTemplatesFolder = joinPaths(homeDirectoryPath, ".k8slens", "templates");
     const groupTemplates = (templates: Map<string, string>): RawTemplates[] => {
-      const res = new Map<string, [string, string][]>();
+      const res = new Map<string, RawTemplate[]>();
 
-      for (const [filePath, contents] of templates) {
+      for (const [filePath, value] of templates) {
         const rawRelative = getDirnameOfPath(getRelativePath(userTemplatesFolder, filePath));
         const title = rawRelative === "."
           ? "ungrouped"
           : rawRelative;
 
-        getOrInsert(res, title, []).push([parsePath(filePath).name, contents]);
+        getOrInsert(res, title, []).push({
+          label: parsePath(filePath).name,
+          value,
+        });
       }
 
-      return [...res.entries()];
+      return Array.from(res.entries(), ([label, options]) => ({
+        label,
+        options,
+      }));
     };
 
     /**
@@ -51,7 +57,7 @@ const userCreateResourceTemplatesInjectable = getInjectable({
 
     const onAddOrChange = async (filePath: string) => {
       if (!hasCorrectExtension(filePath)) {
-      // ignore non yaml or json files
+        // ignore non yaml or json files
         return;
       }
 
@@ -63,7 +69,7 @@ const userCreateResourceTemplatesInjectable = getInjectable({
         if (isErrnoException(error) && error.code === "ENOENT") {
         // ignore, file disappeared
         } else {
-          logger.warn(`[USER-CREATE-RESOURCE-TEMPLATES]: encountered error while reading ${filePath}`, error);
+          logger.warn(`encountered error while reading ${filePath}`, error);
         }
       }
     };
@@ -77,14 +83,14 @@ const userCreateResourceTemplatesInjectable = getInjectable({
           await waitForPath(userTemplatesFolder);
           break;
         } catch (error) {
-          logger.warn(`[USER-CREATE-RESOURCE-TEMPLATES]: encountered error while waiting for ${userTemplatesFolder} to exist, waiting and trying again`, error);
+          logger.warn(`encountered error while waiting for ${userTemplatesFolder} to exist, waiting and trying again`, error);
           await delay(i * 1000); // exponential backoff in seconds
         }
       }
 
       /**
-     * NOTE: There is technically a race condition here of the form "time-of-check to time-of-use"
+       * NOTE: There is technically a race condition here of the form "time-of-check to time-of-use"
-     */
+       */
       watch(userTemplatesFolder, {
         disableGlobbing: true,
         ignorePermissionErrors: true,
@@ -100,7 +106,7 @@ const userCreateResourceTemplatesInjectable = getInjectable({
         .on("change", onAddOrChange)
         .on("unlink", onUnlink)
         .on("error", error => {
-          logger.warn(`[USER-CREATE-RESOURCE-TEMPLATES]: encountered error while watching files under ${userTemplatesFolder}`, error);
+          logger.warn(`encountered error while watching files under ${userTemplatesFolder}`, error);
         });
     })();
 

packages/core/webpack/renderer.ts

@@ -75,6 +75,10 @@ export function webpackLensRenderer(): webpack.Configuration {
             },
           },
         },
+        {
+          test: /\.(yaml|yml)$/,
+          type: "asset/source",
+        },
         cssModulesWebpackRule(),
         ...iconsAndImagesWebpackRules(),
         ...fontsLoaderWebpackRules(),

packages/open-lens/package.json

@@ -95,11 +95,6 @@
     ],
     "afterSign": "build/notarize.js",
     "extraResources": [
-      {
-        "from": "templates/",
-        "to": "./templates/",
-        "filter": "**/*.yaml"
-      },
       "LICENSE"
     ],
     "linux": {

packages/open-lens/webpack/renderer.ts

@@ -69,9 +69,9 @@
         use: "node-loader",
       },
       {
-      test: /\.tsx?$/,
+        test: /\.tsx?$/,
-      loader: "ts-loader",
+        loader: "ts-loader",
-      options: {},
+        options: {},
       },
       cssModulesWebpackRule(),
       ...iconsAndImagesWebpackRules(),

packages/resource-templates/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@k8slens/resource-templates",
+  "version": "1.0.0-alpha.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "copyright": "© 2023 OpenLens Authors",
+  "license": "MIT",
+  "author": "OpenLens Authors <info@k8slens.dev>",
+  "files": [
+    "templates/**/*"
+  ]
+}