feat: move to pure TS package to reduce bundle size (#89)

fix: use default import on second level for mui icons
fix(deps): update deps
fix(deps): remove dependencies and unused packages
test(ci): add concurrency setting in cypress workflow
fix(deps): allow only react 17
fix: inline sourcemap
build: add sideEffects false in package
fix(build): make mui and emotion external
fix: use chatbox namespace for translations
fix(deps): make react-i18n a peer dep
fix: use ImmutableCast in props

.eslintrc

@@ -36,14 +36,5 @@
     "@typescript-eslint/no-use-before-define": ["error"],
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off"
-  },
-  "overrides": [
-    {
-      // enable the rule specifically for TypeScript files
-      "files": ["*.ts", "*.tsx"],
-      "rules": {
-        "@typescript-eslint/explicit-function-return-type": ["error"]
-      }
-    }
-  ]
+  }
 }

.github/workflows/cypress_tests.yml

@@ -2,10 +2,11 @@ name: Cypress tests
 on: [push]
 jobs:
   test:
+    concurrency: cypress-${{ github.head_ref || github.ref }}
     runs-on: ubuntu-latest
     steps:
       - name: checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: component tests 🧪
         uses: cypress-io/github-action@v5
@@ -17,16 +18,8 @@ jobs:
       # store videos and any screenshots
       # NOTE: screenshots will be generated only if a test failed
       - name: upload screenshots
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: cypress-screenshots
           path: cypress/screenshots
-      # Test run video was always captured, so this action uses "always()" condition
-      # Make sure that the "video" setting in cypress.config is set to true, otherwise there will be no videos
-      - name: upload videos
-        uses: actions/upload-artifact@v2
-        if: always()
-        with:
-          name: cypress-videos
-          path: cypress/videos

.gitignore

@@ -11,6 +11,7 @@ node_modules
 
 # misc
 .DS_Store
+bundle-analysis.html
 
 npm-debug.log*
 yarn-debug.log*

.prettierrc

@@ -4,10 +4,11 @@
   "semi": true,
   "singleQuote": true,
   "importOrder": [
-    "^@(?!graasp|mui)(.*)",
     "^react",
-    "^@?mui(.*)",
-    "^@?graasp(.*)",
+    "^@?mui",
+    "^@?graasp",
+    "<THIRD_PARTY_MODULES>",
+    "^@/",
     "^[./]"
   ],
   "importOrderSeparation": true,

cypress.config.ts

@@ -6,8 +6,8 @@ export default defineConfig({
 
   component: {
     devServer: {
-      framework: 'create-react-app',
-      bundler: 'webpack',
+      framework: 'react',
+      bundler: 'vite',
     },
     viewportWidth: 290,
     viewportHeight: 800,

cypress/components/mention-parsing.cy.tsx

@@ -3,10 +3,8 @@ import React from 'react';
 
 import { convertJs } from '@graasp/sdk';
 
-import Chatbox, {
-  LEGACY_MENTION_MARKUP,
-  getMentionMarkupFromMember,
-} from '../../src';
+import { LEGACY_MENTION_MARKUP, getMentionMarkupFromMember } from '../../src';
+import Chatbox from '../../src/components/Chatbox/Chatbox';
 import { dataCyWrapper, messageIdCyWrapper } from '../../src/config/selectors';
 import { ALL_MEMBERS_DISPLAY, ALL_MEMBERS_MEMBER } from '../../src/constants';
 import { CHAT_ID, getMockMessage } from '../fixtures/chat_messages';

cypress/support/component.tsx

@@ -15,13 +15,16 @@
 // Import commands.js using ES2015 syntax:
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
-import { mount } from 'cypress/react';
-
 import React from 'react';
+import { I18nextProvider, initReactI18next } from 'react-i18next';
 
 import { CssBaseline } from '@mui/material';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
+import buildI18n from '@graasp/translations';
+
+import { mount } from 'cypress/react';
+
 import './commands';
 
 // Augment the Cypress namespace to include type definitions for
@@ -37,12 +40,15 @@ declare global {
 }
 
 Cypress.Commands.add('mount', (component) => {
+  const i18n = buildI18n().use(initReactI18next);
   const theme = createTheme();
   const wrapped = (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      {component}
-    </ThemeProvider>
+    <I18nextProvider i18n={i18n}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {component}
+      </ThemeProvider>
+    </I18nextProvider>
   );
   return mount(wrapped);
 });

cypress/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "target": "es5",
     "lib": ["es5", "dom"],

example/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@graasp/chatbox": "link:..",
-    "@graasp/query-client": "link:../node_modules/@graasp/query-client",
+    "@graasp/query-client": "0.4.0",
     "@mui/icons-material": "link:../node_modules/@mui/icons-material",
     "@mui/material": "link:../node_modules/@mui/material",
     "@types/jest": "link:../node_modules/@types/jest",

example/src/components/ChatboxTest.tsx

@@ -14,11 +14,11 @@ import {
   styled,
 } from '@mui/material';
 
+import { MentionButton } from '@graasp/chatbox';
 import { MUTATION_KEYS } from '@graasp/query-client';
 import { ChatMention } from '@graasp/sdk';
 import buildI18n, { namespaces } from '@graasp/translations';
 
-import { MentionButton } from '@graasp/chatbox';
 import {
   DEFAULT_CHAT_ID,
   DEFAULT_LANG,

index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/graasp.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="Graasp Chatbox test entrypoint"
+      content="A chat implementation for Graasp"
+    />
+    <!-- Load Roboto font from Google fonts -->
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <title>Graasp Chatbox</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="src/index.ts"></script>
+  </body>
+</html>

package.json

@@ -1,12 +1,15 @@
 {
   "name": "@graasp/chatbox",
   "version": "1.1.0",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "source": "index.ts",
-  "typings": "dist/index.d.ts",
+  "type": "commonjs",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "typescript": {
-    "definition": "dist/index.d.ts"
+    "definition": "./dist/index.d.ts"
   },
   "repository": "graasp/graasp-chatbox",
   "author": "Graasp",
@@ -25,9 +28,7 @@
     "node": ">=16"
   },
   "scripts": {
-    "pre-commit": "yarn prettier:check && yarn lint",
-    "post-commit": "git status",
-    "build": "rimraf dist && tsc && rollup -c rollup.config.js",
+    "build": "tsc && tsc-alias",
     "start": "rimraf dist && tsc && rollup --watch -c rollup.config.js",
     "start:example": "yarn workspace graasp-chatbox-example start",
     "prepack": "yarn build",
@@ -41,37 +42,31 @@
     "test": "yarn build",
     "hooks:uninstall": "husky uninstall",
     "hooks:install": "husky install",
-    "predeploy": "cd example && yarn install && yarn build",
-    "release": "standard-version",
     "cypress:open": "cypress open",
     "cypress:ci": "cypress run --component"
   },
   "peerDependencies": {
-    "@mui/icons-material": "*",
-    "@mui/lab": "*",
-    "@mui/material": "*",
-    "eslint": "*",
-    "react": "*",
-    "react-dom": "*"
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@graasp/translations": "^1.10.0",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/lab": "^5.0.0-alpha.121",
+    "@mui/material": "^5.11.11",
+    "react": "^17.0.0",
+    "react-dom": "*",
+    "react-i18next": "^12.0.0"
   },
   "dependencies": {
-    "@emotion/react": "11.10.6",
-    "@emotion/styled": "11.10.6",
-    "@graasp/sdk": "0.9.2",
-    "@graasp/translations": "1.8.0",
-    "@graasp/ui": "2.2.0",
-    "clsx": "1.2.1",
+    "@graasp/query-client": "0.4.0",
+    "@graasp/sdk": "0.10.0",
+    "@graasp/ui": "2.3.1",
     "i18next": "21.8.1",
-    "immutable": "4.2.4",
     "lodash.truncate": "4.4.2",
     "moment": "2.29.4",
     "prism-react-renderer": "1.3.5",
-    "react-csv": "2.2.2",
-    "react-i18next": "12.0.0",
     "react-markdown": "8.0.5",
     "react-mentions": "4.4.7",
     "react-query": "3.39.3",
-    "react-router-dom": "6.3.0",
     "remark-breaks": "3.0.2",
     "remark-gfm": "3.0.1",
     "tsc-alias": "1.8.2"
@@ -84,15 +79,12 @@
     "@commitlint/config-conventional": "17.4.4",
     "@cypress/instrument-cra": "1.4.0",
     "@cypress/react": "7.0.2",
-    "@cypress/webpack-dev-server": "3.3.0",
-    "@graasp/query-client": "0.3.0",
+    "@emotion/react": "11.10.6",
+    "@emotion/styled": "11.10.6",
+    "@graasp/translations": "1.11.0",
     "@mui/icons-material": "5.11.11",
     "@mui/lab": "5.0.0-alpha.121",
     "@mui/material": "5.11.11",
-    "@rollup/plugin-commonjs": "21.0.1",
-    "@rollup/plugin-json": "4.1.0",
-    "@rollup/plugin-node-resolve": "13.1.3",
-    "@rollup/plugin-typescript": "8.3.0",
     "@trivago/prettier-plugin-sort-imports": "3.2.0",
     "@types/jest": "27.4.0",
     "@types/lodash.truncate": "4.4.7",
@@ -104,8 +96,9 @@
     "@types/uuid": "9.0.0",
     "@typescript-eslint/eslint-plugin": "5.49.0",
     "@typescript-eslint/parser": "5.49.0",
+    "@vitejs/plugin-react": "3.1.0",
     "cross-env": "7.0.3",
-    "cypress": "12.4.0",
+    "cypress": "12.9.0",
     "env-cmd": "10.1.0",
     "eslint": "8.23.0",
     "eslint-config-prettier": "8.3.0",
@@ -116,26 +109,24 @@
     "eslint-plugin-promise": "5.2.0",
     "eslint-plugin-react": "7.30.1",
     "husky": "8.0.3",
+    "immutable": "4.2.4",
     "prettier": "2.8.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-i18next": "12.0.0",
+    "react-router-dom": "6.10.0",
     "react-scripts": "5.0.1",
     "rimraf": "3.0.2",
     "rollup": "2.77.0",
-    "rollup-jest": "1.1.3",
-    "rollup-plugin-import-css": "3.0.3",
-    "rollup-plugin-peer-deps-external": "2.2.4",
-    "rollup-plugin-tsc-alias": "1.1.2",
+    "rollup-plugin-visualizer": "5.9.0",
     "ts-loader": "9.3.1",
     "tslib": "2.5.0",
-    "typescript": "4.9.5"
+    "typescript": "4.9.5",
+    "vite": "4.2.1",
+    "vite-plugin-dts": "2.1.0"
   },
   "resolutions": {
-    "@types/react": "17.0.2",
-    "immutable": "4.2.4"
+    "@types/react": "17.0.2"
   },
-  "files": [
-    "dist"
-  ],
   "packageManager": "[email protected]"
 }