From 1c19e8f1a1fafcc8475ef287cef469cfe7a4864b Mon Sep 17 00:00:00 2001 From: Braden MacDonald Date: Thu, 1 Aug 2024 14:37:15 -0700 Subject: [PATCH] feat: convert this library to be "buildless" --- .env.development | 2 -- .releaserc | 4 +-- README.md | 13 +++++++++ babel.config.js | 3 -- example/index.js | 42 ---------------------------- example/index.scss | 6 ---- example/jest.config.example.js | 30 -------------------- example/setupTest.example.js | 51 ---------------------------------- package.json | 43 ++++++++++------------------ public/index.html | 11 -------- src/{index.jsx => index.tsx} | 0 webpack.dev.config.js | 19 ------------- webpack.prod.config.js | 14 ---------- www/package-lock.json | 9 +++--- 14 files changed, 35 insertions(+), 212 deletions(-) delete mode 100644 .env.development delete mode 100644 babel.config.js delete mode 100644 example/index.js delete mode 100644 example/index.scss delete mode 100644 example/jest.config.example.js delete mode 100644 example/setupTest.example.js delete mode 100755 public/index.html rename src/{index.jsx => index.tsx} (100%) delete mode 100644 webpack.dev.config.js delete mode 100644 webpack.prod.config.js diff --git a/.env.development b/.env.development deleted file mode 100644 index 549f3c1c5..000000000 --- a/.env.development +++ /dev/null @@ -1,2 +0,0 @@ -NODE_ENV='development' -NODE_PATH=./src diff --git a/.releaserc b/.releaserc index c50b00637..3d0cc7cee 100644 --- a/.releaserc +++ b/.releaserc @@ -6,7 +6,7 @@ { "path": "@semantic-release/github", "assets": { - "path": "dist/*" + "path": "src/*" } } ], @@ -18,7 +18,7 @@ { "path": "@semantic-release/github", "assets": { - "path": "dist/*" + "path": "src/*" } } ], diff --git a/README.md b/README.md index fe0c00c89..409df3289 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,19 @@ It will also configure the editor to be viewable in the gallery view. Adding the - To make this easier, we provide example files for `jest.config.js` and `setupTest.js` that are known to work. You can find them in the example/ folder. +## Installing into Course Authoring MFE in dev mode + +This is tricky to do correctly, but something like this should work, allowing +you to edit this code and see it reflected immediately in the MFE. Run these +commands, starting from the course authoring MFE's working directory: + +``` +npm install +rm -rf node_modules/@edx/frontend-lib-content-components && ln -s "$(realpath ../frontend-lib-content-components)" node_modules/@edx/frontend-lib-content-components +cd ../frontend-lib-content-components +rm -rf node_modules && ln -s ../frontend-app-course-authoring/node_modules node_modules +``` + ## License The code in this repository is licensed under the AGPLv3 unless otherwise diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index d0dc882ca..000000000 --- a/babel.config.js +++ /dev/null @@ -1,3 +0,0 @@ -const { createConfig } = require('@openedx/frontend-build'); - -module.exports = createConfig('babel'); diff --git a/example/index.js b/example/index.js deleted file mode 100644 index d454d7f4d..000000000 --- a/example/index.js +++ /dev/null @@ -1,42 +0,0 @@ -import 'babel-polyfill'; - -import React from 'react'; -import ReactDOM from 'react-dom'; -import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform'; -import { AppContext, AppProvider } from '@edx/frontend-platform/react'; - -import './index.scss'; - -subscribe(APP_READY, () => { - ReactDOM.render( - - {/* We can fake out authentication by including another provider here with the data we want */} - - {/* put stuff here? */} - -
Logged out state
- - {/* We can fake out authentication by including another provider here with the data we want */} - - {/* put stuff here? */} - -
Logged in state
- , - document.getElementById('root'), - ); -}); - -initialize({ - messages: [] -}); diff --git a/example/index.scss b/example/index.scss deleted file mode 100644 index 64195d940..000000000 --- a/example/index.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "@edx/brand/paragon/fonts"; -@import "@edx/brand/paragon/variables"; -@import "@openedx/paragon/scss/core/core"; -@import "@edx/brand/paragon/overrides"; - -@import "@edx/frontend-lib-content-components/index"; diff --git a/example/jest.config.example.js b/example/jest.config.example.js deleted file mode 100644 index d9f817728..000000000 --- a/example/jest.config.example.js +++ /dev/null @@ -1,30 +0,0 @@ -const { createConfig } = require('@openedx/frontend-build'); - -module.exports = createConfig('jest', { - setupFiles: [ - '/src/setupTest.js', - ], - setupFilesAfterEnv: [ - '/src/setupTestEnv.js', - ], - collectCoverageFrom: [ - "**/*.{js,jsx}", - ], - testMatch: [ - '**/specs/**/*.spec.(js|jsx)|**/__tests__/*.(js|jsx)|**/specs/*.spec.(js|jsx)', - ], - roots: [ - 'src/', - ], - coveragePathIgnorePatterns: [ - 'src/setupTestEnv.js', - 'src/setupTest.js', - 'jest.config.js', - 'src/i18n', - '/node_modules/', - '/specs/' - ], - moduleNameMapper: { - '^lodash-es$': 'lodash', - }, -}); diff --git a/example/setupTest.example.js b/example/setupTest.example.js deleted file mode 100644 index a31024e0a..000000000 --- a/example/setupTest.example.js +++ /dev/null @@ -1,51 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies */ -import 'core-js/stable'; -import 'regenerator-runtime/runtime'; -import MutationObserver from '@sheerun/mutationobserver-shim'; -import { mergeConfig } from '@edx/frontend-platform'; - -/* need to mock window for tinymce on import, as it is JSDOM incompatible */ - -Object.defineProperty(window, 'matchMedia', { - writable: true, - value: jest.fn().mockImplementation(query => ({ - matches: false, - media: query, - onchange: null, - addListener: jest.fn(), // Deprecated - removeListener: jest.fn(), // Deprecated - addEventListener: jest.fn(), - removeEventListener: jest.fn(), - dispatchEvent: jest.fn(), - })), -}); - -mergeConfig({ - STUDIO_BASE_URL: process.env.STUDIO_BASE_URL, - BLOCKSTORE_COLLECTION_UUID: process.env.BLOCKSTORE_COLLECTION_UUID, - SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL: process.env.SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL, -}); - -window.MutationObserver = MutationObserver; - -let store = {}; - -const mockStorage = { - getItem: (key) => { - if (key in store) { - return store[key]; - } - return null; - }, - setItem: (key, value) => { - store[key] = `${value}`; - }, - removeItem: (key) => { - delete store[key]; - }, - reset() { - store = {}; - }, -}; - -Object.defineProperty(window, 'localStorage', { value: mockStorage }); diff --git a/package.json b/package.json index 4f4dcb03b..647b7384c 100644 --- a/package.json +++ b/package.json @@ -2,24 +2,23 @@ "name": "@edx/frontend-lib-content-components", "version": "1.0.0-semantically-released", "description": "A library of high-level components for content handling.", - "main": "dist/index.js", "publishConfig": { "access": "public" }, "scripts": { - "prepare": "make build", - "build": "make build", "i18n_extract": "fedx-scripts formatjs extract", "lint": "fedx-scripts eslint --ext .js --ext .jsx .", "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .", "snapshot": "fedx-scripts jest --updateSnapshot", - "start": "fedx-scripts webpack-dev-server --progress", "test": "fedx-scripts jest --coverage", "addXblock": "node addXblock" }, - "files": [ - "/dist" - ], + "exports": { + ".": { + "import": "./src/index.tsx", + "types": "./src/index.tsx" + } + }, "husky": { "hooks": { "pre-commit": "npm run lint" @@ -27,24 +26,20 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/edx/frontend-lib-content-components.git" + "url": "git+https://github.com/openedx/frontend-lib-content-components.git" }, "author": "edX", "license": "AGPL-3.0", "bugs": { - "url": "https://github.com/edx/frontend-lib-content-components/issues" + "url": "https://github.com/openedx/frontend-lib-content-components/issues" }, "browserslist": [ "extends @edx/browserslist-config" ], - "homepage": "https://github.com/edx/frontend-lib-content-components#readme", + "homepage": "https://github.com/openedx/frontend-lib-content-components#readme", "devDependencies": { - "@edx/browserslist-config": "^1.1.1", - "@edx/frontend-platform": "8.0.0", "@edx/react-unit-test-utils": "3.0.0", "@edx/reactifex": "^2.1.1", - "@openedx/frontend-build": "14.0.3", - "@openedx/paragon": "^22.0.0", "@testing-library/dom": "^8.13.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^12.1.5", @@ -53,13 +48,8 @@ "eslint-plugin-import": "^2.26.0", "husky": "7.0.4", "jest-canvas-mock": "^2.5.1", - "prop-types": "15.7.2", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-router-dom": "6.15.0", "react-test-renderer": "^17.0.2", - "redux-saga": "1.1.3", - "webpack-cli": "4.10.0" + "redux-mock-store": "^1.5.4" }, "dependencies": { "@codemirror/lang-html": "^6.0.0", @@ -71,10 +61,8 @@ "@dnd-kit/sortable": "^7.0.2", "@dnd-kit/utilities": "^3.2.1", "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3", - "@edx/browserslist-config": "^1.1.1", "@reduxjs/toolkit": "^1.8.1", "@tinymce/tinymce-react": "^3.14.0", - "babel-polyfill": "6.26.0", "classnames": "^2.5.1", "codemirror": "^6.0.0", "fast-xml-parser": "^4.0.10", @@ -91,7 +79,6 @@ "redux": "4.1.2", "redux-devtools-extension": "^2.13.9", "redux-logger": "^3.0.6", - "redux-mock-store": "^1.5.4", "redux-thunk": "^2.4.1", "reselect": "^4.1.5", "tinymce": "^5.10.4", @@ -100,10 +87,10 @@ "xmlchecker": "^0.1.0" }, "peerDependencies": { - "@edx/frontend-platform": "^7.0.1 || ^8.0.0", - "@openedx/paragon": "^21.5.7 || ^22.0.0", - "prop-types": "^15.5.10", - "react": "^16.14.0 || ^17.0.0", - "react-dom": "^16.14.0 || ^17.0.0" + "@edx/frontend-platform": "^8", + "@openedx/paragon": "^22", + "prop-types": "^15", + "react": "^17 || ^18", + "react-dom": "^17 || ^18" } } diff --git a/public/index.html b/public/index.html deleted file mode 100755 index 145b9004c..000000000 --- a/public/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - Header - - - - -
- - diff --git a/src/index.jsx b/src/index.tsx similarity index 100% rename from src/index.jsx rename to src/index.tsx diff --git a/webpack.dev.config.js b/webpack.dev.config.js deleted file mode 100644 index 719194f4e..000000000 --- a/webpack.dev.config.js +++ /dev/null @@ -1,19 +0,0 @@ -const path = require('path'); -const { createConfig } = require('@openedx/frontend-build'); - -module.exports = createConfig('webpack-dev', { - entry: path.resolve(__dirname, 'src'), - output: { - path: path.resolve(__dirname, 'dist'), - publicPath: '/', - }, - resolve: { - modules: [ - path.resolve(__dirname, './src'), - 'node_modules', - ], - alias: { - '@edx/frontend-lib-content-components': path.resolve(__dirname, 'src'), - }, - }, -}); diff --git a/webpack.prod.config.js b/webpack.prod.config.js deleted file mode 100644 index e1d7e9766..000000000 --- a/webpack.prod.config.js +++ /dev/null @@ -1,14 +0,0 @@ -const path = require('path'); -const { createConfig } = require('@openedx/frontend-build'); - -const config = createConfig('webpack-prod'); - -config.resolve.modules = [ - path.resolve(__dirname, 'src'), - path.resolve(__dirname, 'dist'), - 'node_modules', -]; - -config.module.rules[0].exclude = /node_modules\/(?!(query-string|split-on-first|strict-uri-encode|@edx))/; - -module.exports = config; diff --git a/www/package-lock.json b/www/package-lock.json index db0f9a236..b43c7476f 100644 --- a/www/package-lock.json +++ b/www/package-lock.json @@ -38,6 +38,7 @@ "@dnd-kit/core": "^6.0.8", "@dnd-kit/sortable": "^7.0.2", "@dnd-kit/utilities": "^3.2.1", + "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3", "@edx/browserslist-config": "^1.1.1", "@reduxjs/toolkit": "^1.8.1", "@tinymce/tinymce-react": "^3.14.0", @@ -68,10 +69,10 @@ }, "devDependencies": { "@edx/browserslist-config": "^1.1.1", - "@edx/frontend-platform": "7.0.1", - "@edx/react-unit-test-utils": "2.0.0", + "@edx/frontend-platform": "8.0.0", + "@edx/react-unit-test-utils": "3.0.0", "@edx/reactifex": "^2.1.1", - "@openedx/frontend-build": "13.0.27", + "@openedx/frontend-build": "14.0.3", "@openedx/paragon": "^22.0.0", "@testing-library/dom": "^8.13.0", "@testing-library/jest-dom": "^5.16.5", @@ -90,7 +91,7 @@ "webpack-cli": "4.10.0" }, "peerDependencies": { - "@edx/frontend-platform": "^7.0.1", + "@edx/frontend-platform": "^7.0.1 || ^8.0.0", "@openedx/paragon": "^21.5.7 || ^22.0.0", "prop-types": "^15.5.10", "react": "^16.14.0 || ^17.0.0",