diff --git a/manifest.json b/manifest.json index eb47a34..4dbe0ac 100644 --- a/manifest.json +++ b/manifest.json @@ -1,5 +1,5 @@ { - "requiredSdkVersion": "~0.0.66", + "requiredSdkVersion": "~0.1.14", "name": "TourPlugin", - "javascriptEntrypointUrl": "https://PLUGIN_HOST/TourPlugin.js" + "javascriptEntrypointUrl": "TourPlugin.js" } diff --git a/package-lock.json b/package-lock.json index bbd9b48..91fcc77 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "tour-plugin", - "version": "0.1.0", + "version": "0.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "tour-plugin", - "version": "0.1.0", + "version": "0.2.0", "dependencies": { "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -14,7 +14,7 @@ "@types/react": "^18.2.13", "@types/react-dom": "^18.2.6", "babel-plugin-syntax-dynamic-import": "^6.18.0", - "bigbluebutton-html-plugin-sdk": "0.0.66", + "bigbluebutton-html-plugin-sdk": "0.1.21", "browser-bunyan": "^1.8.0", "path": "^0.12.7", "react": "^18.2.0", @@ -34,6 +34,7 @@ "@typescript-eslint/eslint-plugin": "^6.2.0", "@typescript-eslint/parser": "^6.2.0", "babel-loader": "^9.1.2", + "copy-webpack-plugin": "^12.0.2", "css-loader": "^6.7.4", "eslint": "^8.45.0", "eslint-config-airbnb": "^19.0.4", @@ -2299,6 +2300,19 @@ "node": ">= 8" } }, + "node_modules/@sindresorhus/merge-streams": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz", + "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@testing-library/dom": { "version": "10.2.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.2.0.tgz", @@ -3761,9 +3775,9 @@ "dev": true }, "node_modules/bigbluebutton-html-plugin-sdk": { - "version": "0.0.66", - "resolved": "https://registry.npmjs.org/bigbluebutton-html-plugin-sdk/-/bigbluebutton-html-plugin-sdk-0.0.66.tgz", - "integrity": "sha512-cjwq4N5EKB177bB910Jw6+QP/NN5bdZXxV16rNfpz3B28/NTMQ5of2x62TA7LEdJcM3KZNxFE5Caxhx9cpibmQ==", + "version": "0.1.21", + "resolved": "https://registry.npmjs.org/bigbluebutton-html-plugin-sdk/-/bigbluebutton-html-plugin-sdk-0.1.21.tgz", + "integrity": "sha512-5ouzEqKGY/dFYJmGa4+j0yGK54WxVdC8YvqB/QyLLQckKBYvKPNDICI1l9lZEpMTuTP1OL6BVOQ0fZ3f3CjPiw==", "license": "LGPL-3.0", "dependencies": { "@apollo/client": "^3.8.7", @@ -4228,6 +4242,88 @@ "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==", "dev": true }, + "node_modules/copy-webpack-plugin": { + "version": "12.0.2", + "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-12.0.2.tgz", + "integrity": "sha512-SNwdBeHyII+rWvee/bTnAYyO8vfVdcSTud4EIb6jcZ8inLeWucJE0DnxXQBjlQ5zlteuuvooGQy3LIyGxhvlOA==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-glob": "^3.3.2", + "glob-parent": "^6.0.1", + "globby": "^14.0.0", + "normalize-path": "^3.0.0", + "schema-utils": "^4.2.0", + "serialize-javascript": "^6.0.2" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.1.0" + } + }, + "node_modules/copy-webpack-plugin/node_modules/globby": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-14.1.0.tgz", + "integrity": "sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@sindresorhus/merge-streams": "^2.1.0", + "fast-glob": "^3.3.3", + "ignore": "^7.0.3", + "path-type": "^6.0.0", + "slash": "^5.1.0", + "unicorn-magic": "^0.3.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/copy-webpack-plugin/node_modules/ignore": { + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz", + "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4" + } + }, + "node_modules/copy-webpack-plugin/node_modules/path-type": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-6.0.0.tgz", + "integrity": "sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/copy-webpack-plugin/node_modules/slash": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz", + "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/core-js-compat": { "version": "3.37.1", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.1.tgz", @@ -5602,16 +5698,17 @@ "dev": true }, "node_modules/fast-glob": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", - "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz", + "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==", "dev": true, + "license": "MIT", "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", - "micromatch": "^4.0.4" + "micromatch": "^4.0.8" }, "engines": { "node": ">=8.6.0" @@ -7543,10 +7640,11 @@ } }, "node_modules/micromatch": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz", - "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, + "license": "MIT", "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" @@ -10178,6 +10276,19 @@ "node": ">=4" } }, + "node_modules/unicorn-magic": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz", + "integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", diff --git a/package.json b/package.json index 7c0e91e..04ae0b2 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "@types/react": "^18.2.13", "@types/react-dom": "^18.2.6", "babel-plugin-syntax-dynamic-import": "^6.18.0", - "bigbluebutton-html-plugin-sdk": "0.0.66", + "bigbluebutton-html-plugin-sdk": "0.1.21", "browser-bunyan": "^1.8.0", "path": "^0.12.7", "react": "^18.2.0", @@ -22,7 +22,7 @@ "build-bundle": "webpack --mode production", "start": "webpack serve --mode development", "build:watch": "rm -rf dist && tsc -w --module CommonJS", - "lint": "eslint ./src/*", + "lint": "eslint ./src", "lint:fix": "npm run lint -- --fix", "lint:watch": "watch 'yarn lint'" }, @@ -42,20 +42,16 @@ "@babel/core": "^7.21.8", "@babel/preset-env": "^7.21.5", "@babel/preset-react": "^7.18.6", - "@types/react-modal": "^3.16.0", - "babel-loader": "^9.1.2", - "css-loader": "^6.7.4", - "style-loader": "^3.3.3", - "ts-loader": "^9.4.3", - "webpack": "^5.83.1", - "webpack-cli": "^5.1.1", - "webpack-dev-server": "^4.15.1", "@types/node": "^20.4.4", "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", + "@types/react-modal": "^3.16.0", "@types/styled-components": "^5.1.26", "@typescript-eslint/eslint-plugin": "^6.2.0", "@typescript-eslint/parser": "^6.2.0", + "babel-loader": "^9.1.2", + "copy-webpack-plugin": "^12.0.2", + "css-loader": "^6.7.4", "eslint": "^8.45.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-base": "^15.0.0", @@ -66,7 +62,12 @@ "eslint-watch": "^8.0.0", "lint-staged": "11.2.0", "react-dom": "^18.2.0", + "style-loader": "^3.3.3", + "ts-loader": "^9.4.3", "typescript": "^5.1.6", - "watch": "^1.0.2" + "watch": "^1.0.2", + "webpack": "^5.83.1", + "webpack-cli": "^5.1.1", + "webpack-dev-server": "^4.15.1" } } diff --git a/src/index.tsx b/src/index.tsx index 0ced0fc..a2b3757 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -9,10 +9,10 @@ const pluginName = document.currentScript?.getAttribute('pluginName') || 'plugin const root = ReactDOM.createRoot(document.getElementById(uuid)); root.render( - + , ); diff --git a/src/tour/component.tsx b/src/tour/component.tsx index 5611824..0138697 100644 --- a/src/tour/component.tsx +++ b/src/tour/component.tsx @@ -7,7 +7,7 @@ import { IntlShape, createIntl, defineMessages } from 'react-intl'; import { BbbPluginSdk, OptionsDropdownOption, PluginApi, pluginLogger, IntlLocaleUiDataNames, - LayoutPresentatioAreaUiDataNames, UiLayouts, + LayoutPresentationAreaUiDataNames, UiLayouts, } from 'bigbluebutton-html-plugin-sdk'; import { TourPluginProps, Settings, ClientSettingsSubscriptionResultType } from './types'; import getTourFeatures from './getTourFeatures'; @@ -57,14 +57,13 @@ export function startTour( presentationInitiallyOpened, ).forEach((feature) => { feature.steps.forEach((step) => { - /* @ts-ignore */ tour.addStep({ ...step, // Only show step if the element is visible showOn: () => !!document.querySelector( step.attachTo.element, ), - }); + } as Parameters[0]); }); }); @@ -84,10 +83,14 @@ function TourPlugin( fallbackLocale: 'en', }); - const layoutInformation = pluginApi.useUiData(LayoutPresentatioAreaUiDataNames.CURRENT_ELEMENT, [{ - isOpen: presentationInitiallyOpened, - currentElement: UiLayouts.WHITEBOARD, - }]); + const layoutInformation = pluginApi.useUiData( + LayoutPresentationAreaUiDataNames.CURRENT_ELEMENT, + [{ + isOpen: presentationInitiallyOpened, + currentElement: UiLayouts.WHITEBOARD, + }, + ], + ); // TODO revisit when fixed // const settings = pluginApi.usePluginSettings()?.data; @@ -148,7 +151,9 @@ function TourPlugin( icon: 'presentation', onClick: async () => { setPresentationInitiallyOpened(layoutInformation[0]?.isOpen); - pluginLogger.info('Starting Tour'); + pluginLogger.info({ + logCode: 'plg_started', + }, `Plugin started: ${pluginApi.pluginName}`); // ensure only userList is open (to also work on Mobile) pluginApi.uiCommands.sidekickOptionsContainer.close(); pluginApi.uiCommands.sidekickOptionsContainer.open(); diff --git a/tsconfig.json b/tsconfig.json index 308dc3a..1a97d79 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,6 +8,7 @@ "allowJs": true, "moduleResolution": "node", "allowSyntheticDefaultImports": true, + "skipLibCheck": true, }, "paths": { "*": ["node_modules/@types/*", "node_modules/*"] diff --git a/webpack.config.js b/webpack.config.js index 96dc3c2..909a633 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,10 +1,14 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +const CopyWebpackPlugin = require('copy-webpack-plugin'); +const path = require('path'); + module.exports = { entry: './src/index.tsx', output: { filename: 'TourPlugin.js', library: 'TourPlugin', libraryTarget: 'umd', - publicPath: '/static/', + publicPath: '/', globalObject: 'this', }, devServer: { @@ -16,7 +20,19 @@ module.exports = { client: { overlay: false, }, - }, + setupMiddlewares: (middlewares, devServer) => { + if (!devServer) { + throw new Error('webpack-dev-server is not defined'); + } + + // Serve manifest.json from the project root when requested at /manifest.json + devServer.app.get('/manifest.json', (req, res) => { + res.sendFile(path.resolve(__dirname, 'manifest.json')); + }); + + return middlewares; + }, + }, module: { rules: [ { @@ -40,4 +56,11 @@ module.exports = { resolve: { extensions: ['.js', '.jsx', '.tsx', '.ts'], }, + plugins: [ + new CopyWebpackPlugin({ + patterns: [ + { from: 'manifest.json', to: './' }, // Copy manifest.json to static/ in the output folder + ], + }), + ], };