Replacing require.context polyfill with a simpler implementation

Author: weaverryan

src/React/assets/test/register_controller.test.tsx

@@ -11,13 +11,27 @@
 
 import {registerReactControllerComponents} from '../src/register_controller';
 import MyTsxComponent from './fixtures/MyTsxComponent';
-import {createRequireContextPolyfill} from './util/require_context_poylfill';
+// @ts-ignore
+import MyJsxComponent from './fixtures/MyJsxComponent';
+import RequireContext = __WebpackModuleApi.RequireContext;
 
-require.context = createRequireContextPolyfill(__dirname);
+const createFakeFixturesContext = (): RequireContext => {
+    const files: any = {
+        './MyJsxComponent.jsx': { default: MyJsxComponent },
+        './MyTsxComponent.tsx': { default: MyTsxComponent },
+    };
+
+    const context = (id: string): any => files[id];
+    context.keys = () => Object.keys(files);
+    context.resolve = (id: string) => id;
+    context.id = './fixtures';
+
+    return context;
+};
 
 describe('registerReactControllerComponents', () => {
-    it('test', () => {
-        registerReactControllerComponents(require.context('./fixtures', true, /\.(j|t)sx$/));
+    it('test working setup', () => {
+        registerReactControllerComponents(createFakeFixturesContext());
         const resolveComponent = (window as any).resolveReactComponent;
 
         expect(resolveComponent).not.toBeUndefined();
@@ -26,7 +40,7 @@ describe('registerReactControllerComponents', () => {
     });
 
     it('errors with a bad name', () => {
-        registerReactControllerComponents(require.context('./fixtures', true, /\.(j|t)sx$/));
+        registerReactControllerComponents(createFakeFixturesContext());
         const resolveComponent = (window as any).resolveReactComponent;
 
         expect(() => resolveComponent('MyABCComponent')).toThrow('React controller "MyABCComponent" does not exist. Possible values: MyJsxComponent, MyTsxComponent');

src/React/assets/test/util/require_context_poylfill.ts

@@ -11,13 +11,24 @@
 
 import {registerSvelteControllerComponents} from '../src/register_controller';
 import MyComponent from './fixtures/MyComponent.svelte';
-import {createRequireContextPolyfill} from './util/require_context_poylfill';
+import RequireContext = __WebpackModuleApi.RequireContext;
 
-require.context = createRequireContextPolyfill(__dirname);
+const createFakeFixturesContext = (): RequireContext => {
+    const files: any = {
+        './MyComponent.svelte': { default: MyComponent },
+    };
+
+    const context = (id: string): any => files[id];
+    context.keys = () => Object.keys(files);
+    context.resolve = (id: string) => id;
+    context.id = './fixtures';
+
+    return context;
+};
 
 describe('registerSvelteControllerComponents', () => {
     it('registers controllers from require context', () => {
-        registerSvelteControllerComponents(require.context('./fixtures', true, /\.svelte$/));
+        registerSvelteControllerComponents(createFakeFixturesContext());
         const resolveComponent = (window as any).resolveSvelteComponent;
 
         expect(resolveComponent).not.toBeUndefined();

src/Svelte/assets/test/register_controller.test.ts

@@ -1,11 +1,11 @@
 // vitest.config.ts
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { svelte } from '@sveltejs/vite-plugin-svelte';
 import configShared from '../../../vitest.config.js'
 
 export default mergeConfig(
     configShared,
     defineConfig({
          plugins: [svelte()],
      })
-);
+);

src/Svelte/assets/test/util/require_context_poylfill.ts

@@ -10,31 +10,47 @@
 'use strict';
 
 import {registerVueControllerComponents} from '../src/register_controller';
-import {createRequireContextPolyfill} from './util/require_context_poylfill';
 import Hello from './fixtures/Hello.vue'
 import Goodbye from './fixtures-lazy/Goodbye.vue'
+import RequireContext = __WebpackModuleApi.RequireContext;
+
+const createFakeFixturesContext = (lazyDir: boolean): RequireContext => {
+    const files: any = {};
+
+    if (lazyDir) {
+        files['./Goodbye.vue'] = { default: Goodbye };
+    } else {
+        files['./Hello.vue'] = { default: Hello };
+    }
+
+    const context = (id: string): any => files[id];
+    context.keys = () => Object.keys(files);
+    context.resolve = (id: string) => id;
+    context.id = './fixtures';
+
+    return context;
+};
 
-require.context = createRequireContextPolyfill(__dirname);
 
 describe('registerVueControllerComponents', () => {
     it('should resolve components synchronously', () => {
-        registerVueControllerComponents(require.context('./fixtures', true, /\.vue$/));
+        registerVueControllerComponents(createFakeFixturesContext(false));
         const resolveComponent = window.resolveVueComponent;
 
         expect(resolveComponent).not.toBeUndefined();
         expect(resolveComponent('Hello')).toBe(Hello);
     });
 
     it('should resolve lazy components asynchronously', () => {
-        registerVueControllerComponents(require.context('./fixtures-lazy', true, /\.vue$/, 'lazy'));
+        registerVueControllerComponents(createFakeFixturesContext(true));
         const resolveComponent = window.resolveVueComponent;
 
         expect(resolveComponent).not.toBeUndefined();
         expect(resolveComponent('Goodbye')).toBe(Goodbye);
     });
 
     it('errors with a bad name', () => {
-        registerVueControllerComponents(require.context('./fixtures', true, /\.vue$/));
+        registerVueControllerComponents(createFakeFixturesContext(false));
         const resolveComponent = window.resolveVueComponent;
 
         expect(() => resolveComponent('Helloooo')).toThrow('Vue controller "Helloooo" does not exist. Possible values: Hello');