feat: A leaner example app that is built using Vite

Makefile

@@ -25,6 +25,7 @@ precommit:
 requirements:
 	npm ci
 	cd example && npm ci && cd ..
+	cd example-vite && npm ci && cd ..
 	cd example-plugin-app && npm ci && cd ..
 
 i18n.extract:

README.rst

@@ -39,7 +39,7 @@ Using the Example Apps
 
 2. Run ``npm run start`` in the root directory.
 
-3. Open another terminal and run ``npm run start:example`` to start the example app. You can visit http://localhost:8080 to see the example app.
+3. Open another terminal and run ``npm run start:example-vite`` to start the example app. You can visit http://localhost:8080 to see the example app.
 
 4. Make change to the existing code, everything should be hot reloaded.
 

example-vite/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

example-vite/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

example-vite/env.config.tsx

@@ -0,0 +1,156 @@
+import {
+  DIRECT_PLUGIN,
+  IFRAME_PLUGIN,
+  PLUGIN_OPERATIONS,
+} from '@openedx/frontend-plugin-framework';
+// import DefaultDirectWidget from './src/components/DefaultDirectWidget';
+import PluginDirect from './src/components/PluginDirect';
+import ModularComponent from './src/components/ModularComponent';
+
+const modifyWidget = (widget) => {
+  const newContent = {
+    title: 'Modified Modular Plugin',
+    uniqueText: 'Note that the original text defined in the JS config is replaced by this modified one.',
+  };
+  const modifiedWidget = widget;
+  modifiedWidget.content = newContent;
+  return modifiedWidget;
+};
+
+const wrapWidget = ({ component, idx }) => (
+  <div className="bg-warning" data-testid={`wrapper${idx + 1}`} key={idx}>
+    <p>This is a wrapper component that is placed around the default content.</p>
+    {component}
+    <p>With this wrapper, you can add anything before or after a component.</p>
+    <p>Note in the JS config that an iFrame plugin was Inserted, but a Hide operation was also used to hide it!</p>
+  </div>
+);
+
+// Note that in an actual application this file would be added to .gitignore.
+const config = {
+  pluginSlots: {
+    slot_with_insert_operation: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'inserted_direct_plugin',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: PluginDirect,
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'inserted_iframe_plugin',
+            type: IFRAME_PLUGIN,
+            priority: 30,
+            url: 'http://localhost:8081/plugin_iframe',
+            title: 'The iFrame plugin that is inserted in the slot',
+          },
+        },
+      ],
+    },
+    slot_with_modify_wrap_hidden_operations: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'inserted_plugin',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: ModularComponent,
+            content: {
+              title: 'Modular Direct Plugin',
+              uniqueText: 'This is some text that will be replaced by the Modify operation below.',
+            },
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'inserted_iframe_plugin',
+            type: IFRAME_PLUGIN,
+            priority: 30,
+            url: 'http://localhost:8081/plugin_iframe',
+            title: 'This iFrame plugin will be hidden due to the Hide operation in this config.',
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Wrap,
+          widgetId: 'default_contents',
+          wrapper: wrapWidget,
+        },
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'inserted_plugin',
+          fn: modifyWidget,
+        },
+        {
+          op: PLUGIN_OPERATIONS.Hide,
+          widgetId: "inserted_iframe_plugin",
+        },
+      ],
+    },
+    slot_with_modular_plugins: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'inserted_direct_plugin',
+            type: DIRECT_PLUGIN,
+            priority: 1,
+            RenderWidget: ModularComponent,
+            content: {
+              title: 'Modular Direct Plugin',
+              uniqueText: 'This is a direct plugin with priority of 1, which is why it appears first in this slot.',
+            },
+          },
+        },
+      ],
+    },
+    slot_without_default: {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'inserted_direct_plugin',
+            type: DIRECT_PLUGIN,
+            priority: 1,
+            RenderWidget: ModularComponent,
+            content: {
+              title: 'Modular Direct Plugin With Content Defined in JS Config',
+              uniqueText: 'This modular component receives some of its content from the JS config (such as this text).',
+            },
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'inserted_direct_plugin',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: PluginDirect,
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'inserted_iframe_plugin',
+            type: IFRAME_PLUGIN,
+            priority: 30,
+            url: 'http://localhost:8081/plugin_iframe',
+            title: 'The iFrame plugin that is inserted in the slot',
+          },
+        },
+      ],
+    }
+  },
+};
+
+export default config;

example-vite/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend-plugin-framework demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>