fix: expose app entrypoint in webpack dev config for example app

.github/workflows/ci.yml

@@ -9,18 +9,17 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [18, 20]
     steps:
     - name: Checkout
       uses: actions/checkout@v4
       with:
         fetch-depth: 0
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
       uses: actions/setup-node@v4
       with:
-        node-version: ${{ matrix.node }}
+        node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfile-check.yml@master

.nvmrc

@@ -1 +1 @@
-20
+18

README.rst

@@ -95,12 +95,6 @@ This library has the following exports:
 * ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_
 * ``dist/index.scss``: A SASS file which contains style information for the component.  It should be imported into the micro-frontend's own SCSS file.
 
-Plugins
--------
-This can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
-
-The parts of this that can be customized in that manner are documented `here </src/plugin-slots>`_.
-
 Examples
 ========
 

package.json

@@ -37,7 +37,7 @@
     "@edx/browserslist-config": "^1.1.1",
     "@edx/frontend-platform": "8.1.1",
     "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "14.1.4",
+    "@openedx/frontend-build": "14.1.2",
     "@openedx/paragon": "22.7.0",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "5.17.0",
@@ -49,7 +49,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-redux": "7.2.9",
-    "react-router-dom": "6.26.2",
+    "react-router-dom": "6.26.1",
     "react-test-renderer": "17.0.2",
     "redux": "4.2.1",
     "redux-saga": "1.3.0"
@@ -60,7 +60,6 @@
     "@fortawesome/free-regular-svg-icons": "6.6.0",
     "@fortawesome/free-solid-svg-icons": "6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@openedx/frontend-plugin-framework": "^1.3.0",
     "axios-mock-adapter": "1.22.0",
     "babel-polyfill": "6.26.0",
     "jest-environment-jsdom": "^29.7.0",

src/DesktopHeader.jsx

@@ -6,7 +6,7 @@ import { getConfig } from '@edx/frontend-platform';
 // Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
 import Avatar from './Avatar';
-import LogoSlot from './plugin-slots/LogoSlot';
+import { LinkedLogo, Logo } from './Logo';
 
 // i18n
 import messages from './Header.messages';
@@ -145,7 +145,7 @@ class DesktopHeader extends React.Component {
         <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
         <div className={`container-fluid ${logoClasses}`}>
           <div className="nav-container position-relative d-flex align-items-center">
-            <LogoSlot {...logoProps} />
+            {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
             <nav
               aria-label={intl.formatMessage(messages['header.label.main.nav'])}
               className="nav main-nav"

src/Logo.jsx

@@ -1,21 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Logo = ({
+const Logo = ({ src, alt, ...attributes }) => (
+  <img src={src} alt={alt} {...attributes} />
+);
+
+Logo.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+};
+
+const LinkedLogo = ({
   href,
   src,
   alt,
   ...attributes
 }) => (
-  <a href={href} className="logo" {...attributes}>
+  <a href={href} {...attributes}>
     <img className="d-block" src={src} alt={alt} />
   </a>
 );
 
-Logo.propTypes = {
+LinkedLogo.propTypes = {
   href: PropTypes.string.isRequired,
   src: PropTypes.string.isRequired,
   alt: PropTypes.string.isRequired,
 };
 
+export { LinkedLogo, Logo };
 export default Logo;

src/MobileHeader.jsx

@@ -6,7 +6,7 @@ import { getConfig } from '@edx/frontend-platform';
 // Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
 import Avatar from './Avatar';
-import LogoSlot from './plugin-slots/LogoSlot';
+import { LinkedLogo, Logo } from './Logo';
 
 // i18n
 import messages from './Header.messages';
@@ -155,7 +155,7 @@ class MobileHeader extends React.Component {
           </div>
         ) : null}
         <div className={`w-100 d-flex ${logoClasses}`}>
-          <LogoSlot {...logoProps} itemType="http://schema.org/Organization" />
+          { logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" />}
         </div>
         {userMenu.length > 0 || loggedOutItems.length > 0 ? (
           <div className="w-100 d-flex justify-content-end align-items-center">

src/learning-header/LearningHeader.jsx

@@ -6,16 +6,33 @@ import { AppContext } from '@edx/frontend-platform/react';
 
 import AnonymousUserMenu from './AnonymousUserMenu';
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
-import LogoSlot from '../plugin-slots/LogoSlot';
 import messages from './messages';
 
+const LinkedLogo = ({
+  href,
+  src,
+  alt,
+  ...attributes
+}) => (
+  <a href={href} {...attributes}>
+    <img className="d-block" src={src} alt={alt} />
+  </a>
+);
+
+LinkedLogo.propTypes = {
+  href: PropTypes.string.isRequired,
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+};
+
 const LearningHeader = ({
   courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
 }) => {
   const { authenticatedUser } = useContext(AppContext);
 
   const headerLogo = (
-    <LogoSlot
+    <LinkedLogo
+      className="logo"
       href={`${getConfig().LMS_BASE_URL}/dashboard`}
       src={getConfig().LOGO_URL}
       alt={getConfig().SITE_NAME}

src/plugin-slots/LogoSlot/README.md

@@ -1,69 +0,0 @@
-# Logo Slot
-
-### Slot ID: `logo_slot`
-
-## Description
-
-This slot is used to replace/modify/hide the logo.
-
-## Examples
-
-### Modify URL
-
-The following `env.config.jsx` will modify the link href for the logo.
-
-```jsx
-import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const modifyLogoHref = ( widget ) => {
-  widget.content.href = "https://openedx.org/";
-  return widget;
-};
-
-const config = {
-  pluginSlots: {
-    logo_slot: {
-      keepDefault: true,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Modify,
-          widgetId: 'default_contents',
-          fn: modifyLogoHref,
-        },
-      ]
-    },
-  },
-}
-
-export default config;
-```
-
-### Custom Component
-
-The following `env.config.jsx` will replace the logo entirely (in this case with a centered 🗺️ `h1`)
-
-```jsx
-import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
-
-const config = {
-  pluginSlots: {
-    logo_slot: {
-      keepDefault: false,
-      plugins: [
-        {
-          op: PLUGIN_OPERATIONS.Insert,
-          widget: {
-            id: 'custom_logo_component',
-            type: DIRECT_PLUGIN,
-            RenderWidget: () => (
-              <h1 style={{textAlign: 'center'}}>🗺️</h1>
-            ),
-          },
-        },
-      ]
-    }
-  },
-}
-
-export default config;
-```

src/plugin-slots/LogoSlot/index.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import Logo from '../../Logo';
-
-const LogoSlot = ({
-  href, src, alt, ...attributes
-}) => (
-  <PluginSlot
-    id="logo_slot"
-    slotOptions={{
-      mergeProps: true,
-    }}
-  >
-    <Logo href={href} src={src} alt={alt} {...attributes} />
-  </PluginSlot>
-);
-
-LogoSlot.propTypes = {
-  href: PropTypes.string.isRequired,
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-};
-
-export default LogoSlot;

src/plugin-slots/README.md

@@ -1,3 +0,0 @@
-# `frontend-component-header` Plugin Slots
-
-* [`logo_slot`](./LogoSlot/)

webpack.dev.config.js

@@ -2,7 +2,9 @@ const path = require('path');
 const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('webpack-dev', {
-  entry: path.resolve(__dirname, 'example'),
+  entry: {
+    app: path.resolve(__dirname, 'example'),
+  },
   output: {
     path: path.resolve(__dirname, 'example/dist'),
     publicPath: '/',