refactor: lazy load blocks handler

package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "1.21.1",
+  "version": "1.21.3",
   "description": "An extension for automating your browser by connecting blocks",
   "repository": {
     "type": "git",

src/components/newtab/workflow/edit/EditJavascriptCode.vue

@@ -7,29 +7,30 @@
       class="w-full mb-1"
       @change="updateData({ description: $event })"
     />
-    <ui-input
-      v-if="!data.everyNewTab"
-      :model-value="data.timeout"
-      :label="t('workflow.blocks.javascript-code.timeout.placeholder')"
-      :title="t('workflow.blocks.javascript-code.timeout.title')"
-      type="number"
-      class="mb-2 w-full"
-      @change="updateData({ timeout: +$event })"
-    />
-    <ui-select
-      :model-value="data.context"
-      :label="t('workflow.blocks.javascript-code.context.name')"
-      class="mb-2 w-full"
-      @change="updateData({ context: $event })"
-    >
-      <option
-        v-for="item in ['website', 'background']"
-        :key="item"
-        :value="item"
+    <template v-if="!data.everyNewTab">
+      <ui-input
+        :model-value="data.timeout"
+        :label="t('workflow.blocks.javascript-code.timeout.placeholder')"
+        :title="t('workflow.blocks.javascript-code.timeout.title')"
+        type="number"
+        class="mb-2 w-full"
+        @change="updateData({ timeout: +$event })"
+      />
+      <ui-select
+        :model-value="data.context"
+        :label="t('workflow.blocks.javascript-code.context.name')"
+        class="mb-2 w-full"
+        @change="updateData({ context: $event })"
       >
-        {{ t(`workflow.blocks.javascript-code.context.items.${item}`) }}
-      </option>
-    </ui-select>
+        <option
+          v-for="item in ['website', 'background']"
+          :key="item"
+          :value="item"
+        >
+          {{ t(`workflow.blocks.javascript-code.context.items.${item}`) }}
+        </option>
+      </ui-select>
+    </template>
     <p class="text-sm ml-1 text-gray-600 dark:text-gray-200">
       {{ t('workflow.blocks.javascript-code.name') }}
     </p>

src/newtab/utils/workflowEngine/blocksHandler.js

@@ -1,13 +1,20 @@
 import customHandlers from '@business/blocks/backgroundHandler';
 import { toCamelCase } from '@/utils/helper';
 
-const blocksHandler = require.context('./blocksHandler', false, /\.js$/);
-const handlers = blocksHandler.keys().reduce((acc, key) => {
-  const name = key.replace(/^\.\/handler|\.js/g, '');
+const blocksHandler = require.context(
+  './blocksHandler',
+  false,
+  /\.js$/,
+  'lazy'
+);
+const handlers = {};
 
-  acc[toCamelCase(name)] = blocksHandler(key).default;
+blocksHandler.keys().forEach((key) => {
+  const name = key.replace(/^\.\/handler|\.js/g, '');
 
-  return acc;
+  blocksHandler(key).then((module) => {
+    handlers[toCamelCase(name)] = module.default;
+  });
 }, {});
 
 export default function () {