feat: update packages to make publish smaller (#49)

* chore: replace @edx/frontend-plugin-framework with @openedx/frontend-plugin-framework in example apps

* chore: update dev and peer dependency

Author: leangseu-edx

.eslintrc.js

@@ -5,7 +5,7 @@ const config = createConfig('eslint');
 
 config.rules = {
   'import/no-unresolved': ['error', {
-    ignore: ['@edx/frontend-plugin-framework/example*'],
+    ignore: ['@openedx/frontend-plugin-framework/example*'],
   }],
   'import/no-extraneous-dependencies': ['error', {
     devDependencies: true,

Makefile

@@ -24,6 +24,8 @@ precommit:
 
 requirements:
 	npm ci
+	cd example && npm ci && cd ..
+	cd example-plugin-app && npm ci && cd ..
 
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...

README.rst

@@ -35,17 +35,13 @@ Getting Started
 Using the Example Apps
 ----------------------
 
-1. Run ``npm install`` in the root directory.
+1. Run ``make requirements`` in the root directory.
 
-2. In separate terminals, run ``npm install`` inside both example app directories (``/example`` and ``/example-plugin-app``).
+2. Run ``npm run start`` in the root directory.
 
-3. Run ``npm run start`` in both directories.
+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.
 
-Alternatively, once the packages are installed in both apps, you can run the apps from the root directory.
-
-1. ``npm run start`` runs the host MFE (``example``)
-
-2. ``npm run start:plugins`` runs the child MFE (``example-plugin-app``)
+4. Make change to the existing code, everything should be hot reloaded.
 
 Add Library Dependency
 ----------------------
@@ -103,7 +99,7 @@ file as well to define its plugin slots.
 
     // env.config.js
 
-    import { DIRECT_PLUGIN, IFRAME_PLUGIN, PLUGIN_OPERATIONS } from '@edx/frontend-plugin-framework';
+    import { DIRECT_PLUGIN, IFRAME_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
     
     // import any additional dependencies or functions to be used for each plugin operation
     import Sidebar from './widgets/social/Sidebar';

example-plugin-app/.eslintrc.js

@@ -8,7 +8,7 @@ config.rules = {
     packageDir: path.join(__dirname, '..'),
   }],
   'import/no-unresolved': ['error', {
-    ignore: ['@edx/frontend-plugin-framework*'],
+    ignore: ['@openedx/frontend-plugin-framework*'],
   }],
 };
 

example-plugin-app/package-lock.json

@@ -1,7 +1,7 @@
 /* eslint react/prop-types: off */
 
 import React from 'react';
-import { Plugin } from '@edx/frontend-plugin-framework';
+import { Plugin } from '@openedx/frontend-plugin-framework';
 
 function DefaultComponent() {
   return (

example-plugin-app/src/DefaultIframe.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Plugin } from '@edx/frontend-plugin-framework';
+import { Plugin } from '@openedx/frontend-plugin-framework';
 
 export default function PluginIframe() {
   return (

example-plugin-app/src/PluginIframe.jsx

@@ -8,7 +8,7 @@ module.exports = createConfig('webpack-dev', {
       // applications. Because this example app is using code from the parent frontend-plugin-framework
       // library, it runs into the same issues our applications do when loading libraries from
       // local source, rather than from their node_modules directory.
-      '@edx/frontend-plugin-framework': path.resolve(__dirname, '..', 'src/plugins'),
+      '@openedx/frontend-plugin-framework': path.resolve(__dirname, '..', 'dist'),
       react: path.resolve(__dirname, 'node_modules', 'react'),
       'react-dom': path.resolve(__dirname, 'node_modules', 'react-dom'),
       'react-router-dom': path.resolve(__dirname, 'node_modules', 'react-router-dom'),

example-plugin-app/webpack.dev.config.js

@@ -8,7 +8,7 @@ config.rules = {
     packageDir: path.join(__dirname, '..'),
   }],
   'import/no-unresolved': ['error', {
-    ignore: ['@edx/frontend-plugin-framework*'],
+    ignore: ['@openedx/frontend-plugin-framework*'],
   }],
 };
 

example/.eslintrc.js

@@ -3,7 +3,7 @@ import {
   DIRECT_PLUGIN,
   IFRAME_PLUGIN,
   PLUGIN_OPERATIONS,
-} from '@edx/frontend-plugin-framework';
+} from '@openedx/frontend-plugin-framework';
 import DefaultDirectWidget from './src/components/DefaultDirectWidget';
 import PluginDirect from './src/components/PluginDirect';
 import ModularComponent from './src/components/ModularComponent';

example/env.config.jsx

@@ -16,7 +16,8 @@
     "prop-types": "^15.8.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "react-router-dom": "^6.22.1",
+    "react-router": "^6.22.3",
+    "react-router-dom": "^6.22.3",
     "regenerator-runtime": "^0.14.1"
   },
   "devDependencies": {

example/package-lock.json

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { PluginSlot } from '@edx/frontend-plugin-framework';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 
 function PluginSlotWithInsert() {
   return (

example/package.json

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { PluginSlot } from '@edx/frontend-plugin-framework';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import ModularComponent from '../components/ModularComponent';
 
 

example/src/pluginSlots/PluginSlotWithInsert.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { PluginSlot } from '@edx/frontend-plugin-framework';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import ModularComponent from '../components/ModularComponent';
 
 function PluginSlotWithModularPlugins() {

example/src/pluginSlots/PluginSlotWithModifyWrapHide.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { PluginSlot } from '@edx/frontend-plugin-framework';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 
 function PluginSlotWithoutDefault() {
   return (

example/src/pluginSlots/PluginSlotWithModularPlugins.jsx

@@ -8,7 +8,7 @@ module.exports = createConfig('webpack-dev', {
       // applications. Because this example app is using code from the parent frontend-plugin-framework
       // library, it runs into the same issues our applications do when loading libraries from
       // local source, rather than from their node_modules directory.
-      '@edx/frontend-plugin-framework': path.resolve(__dirname, '..', 'src/plugins'),
+      '@openedx/frontend-plugin-framework': path.resolve(__dirname, '..', 'dist'),
       react: path.resolve(__dirname, 'node_modules', 'react'),
       'react-dom': path.resolve(__dirname, 'node_modules', 'react-dom'),
       'react-router-dom': path.resolve(__dirname, 'node_modules', 'react-router-dom'),