Merge pull request #731 from fkhadra/next

V9

.eslintrc.json

@@ -0,0 +1,25 @@
+{
+    "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "plugin:react/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "react-hooks",
+    "@typescript-eslint"
+  ],
+  "rules": {
+    "react-hooks/exhaustive-deps": "warn"
+  }
+}

.github/workflows/build.yaml

@@ -11,11 +11,13 @@ jobs:
       - name: Install node
         uses: actions/setup-node@v1
         with:
-            node-version: '14.x'
+            node-version: '16.x'
       - name: Install dependencies
         run: yarn 
       - name: Lint
         run: yarn lint
+      - name: Setup
+        run: yarn setup
       - name: Test
         run: yarn run test:coverage 
       - name: Coveralls GitHub Action

.gitignore

@@ -9,4 +9,5 @@ yarn-error.log
 cjs/
 esm/
 dist/
-.cache
+.cache
+/addons

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run prettier && npm run lint

CONTRIBUTING.md

@@ -8,6 +8,7 @@ Please note we have a code of conduct, please follow it in all your interactions
 
 ## General Guidelines
 
+- Before starting to work on something, please open an issue first
 - If adding a new feature, write the corresponding test
 - Ensure that nothing get broke. You can use the playground for that
 - If applicable, update the [documentation](https://github.com/fkhadra/react-toastify-doc)
@@ -19,7 +20,7 @@ Please note we have a code of conduct, please follow it in all your interactions
 
 ### Pre-requisites
 
-- *Node:* `^9.0.0`
+- *Node:* `^16.0.0`
 - *Yarn*
 
 ### Install
@@ -36,7 +37,9 @@ git checkout -b my-branch
 Install dependencies:
 
 ```sh
-yarn install
+yarn install 
+// then
+yarn setup
 ```
 
 ## Developing
@@ -52,7 +55,7 @@ yarn start
 yarn test
 
 # Prettify all the things
-yarn prettier-all
+yarn prettier
 ```
 
 ### Project structure
@@ -67,7 +70,7 @@ The playground let you test your changes, it's like the demo of react-toastify.
 
 #### Src
 
-- [toast:](https://github.com/fkhadra/react-toastify/blob/master/src/core/toast.tsx) Contain the exposed api (`toast.success...`).
+- [toast:](https://github.com/fkhadra/react-toastify/blob/master/src/core/toast.ts) Contain the exposed api (`toast.success...`).
 
 - [eventManager:](https://github.com/fkhadra/react-toastify/blob/master/src/core/eventManager.ts) 
 This is the glue between `toast` and `ToastContainer`. In fact, it is just a dead simple pubsub.

babel.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        shippedProposals: true,
+        targets: '>0.5%, not ie 11, not op_mini all',
+      },
+    ],
+  ],
+};

build-addons.mjs

@@ -0,0 +1,63 @@
+import { existsSync } from 'node:fs';
+import { readdir, readFile, writeFile, rename } from 'node:fs/promises';
+import { exec } from 'node:child_process';
+import path from 'node:path';
+import { promisify } from 'node:util';
+
+const asyncExec = promisify(exec);
+
+const packageJson = JSON.parse(
+  await readFile(new URL('./package.json', import.meta.url))
+);
+
+const DEBUG = process.argv.slice(2)[0] === 'debug';
+const BASE_DIR = './src/addons';
+const MICRO_BUNDLE = './node_modules/.bin/microbundle';
+
+try {
+  const dirs = await readdir(BASE_DIR);
+
+  for (const dir of dirs) {
+    let entryPoint = path.join(BASE_DIR, dir, 'index.ts');
+    const exportKey = `./addons/${dir}`;
+    const exportValues = {
+      require: '',
+      import: ''
+    };
+
+    if (!existsSync(entryPoint)) {
+      if (existsSync(`${entryPoint}x`)) {
+        entryPoint = `${entryPoint}x`;
+      } else {
+        throw new Error(`${entryPoint} does not exist`);
+      }
+    }
+
+    for (const moduleType of ['cjs', 'esm']) {
+      const filename = moduleType === 'esm' ? 'index.esm.js' : 'index.js';
+      const out = `./dist/addons/${dir}/${filename}`;
+      const exportOut = `./addons/${dir}/${filename}`;
+
+      const { stdout, stderr } = await asyncExec(
+        `${MICRO_BUNDLE} -i ${entryPoint} -o ${out} --no-pkg-main -f ${moduleType} --jsx React.createElement --external react-toastify --compress ${!DEBUG}`
+      );
+      console.log(stdout);
+      console.log(stderr);
+
+      if (moduleType === 'cjs') {
+        exportValues.require = exportOut;
+      } else if (moduleType === 'esm') {
+        exportValues.import = exportOut;
+      }
+    }
+
+    packageJson.exports = Object.assign(packageJson.exports, {
+      [exportKey]: exportValues
+    });
+  }
+
+  await writeFile('./package.json', JSON.stringify(packageJson, null, 2));
+  await rename('./dist/addons', './addons');
+} catch (error) {
+  throw error;
+}

example/components/App.tsx

@@ -12,7 +12,7 @@ import { Radio } from './Radio';
 import { Checkbox } from './Checkbox';
 import { ContainerCode, ContainerCodeProps } from './ContainerCode';
 import { ToastCode, ToastCodeProps } from './ToastCode';
-import { flags, transitions } from './constants';
+import { flags, themes, transitions } from './constants';
 
 import { ToastContainer, toast, Id } from '../../src/index';
 import '../../scss/main.scss';
@@ -193,11 +193,11 @@ class App extends React.Component {
                   Theme
                   <select
                     name="theme"
-                    id="transthemeition"
+                    id="theme"
                     onChange={this.handleRadioOrSelect}
                     value={this.state.theme}
                   >
-                    {['light', 'dark', 'colored'].map(k => (
+                    {themes.map(k => (
                       <option key={k} value={k}>
                         {k}
                       </option>

example/components/ContainerCode.tsx

@@ -30,7 +30,8 @@ export const ContainerCode: React.FC<ContainerCodeProps> = ({
   rtl,
   pauseOnFocusLoss,
   isDefaultProps,
-  draggable
+  draggable,
+  theme
 }) => (
   <div>
     <h3>Toast Container</h3>
@@ -43,6 +44,10 @@ export const ContainerCode: React.FC<ContainerCodeProps> = ({
         <span className="code__props">position</span>
         {`="${position}"`}
       </div>
+      <div>
+        <span className="code__props">theme</span>
+        {`="${theme}"`}
+      </div>
       <div>
         <span className="code__props">autoClose</span>
         {`={${disableAutoClose ? false : autoClose}}`}

example/components/ToastCode.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import { themes } from './constants';
+
 function getType(type: string) {
   switch (type) {
     case 'default':
@@ -26,6 +28,7 @@ export interface ToastCodeProps {
   type: string;
   draggable: boolean;
   progress: number;
+  theme: typeof themes[number];
 }
 
 export const ToastCode: React.FC<ToastCodeProps> = ({
@@ -37,7 +40,8 @@ export const ToastCode: React.FC<ToastCodeProps> = ({
   pauseOnHover,
   type,
   draggable,
-  progress
+  progress,
+  theme
 }) => (
   <div>
     <h3>Toast Emitter</h3>
@@ -50,6 +54,10 @@ export const ToastCode: React.FC<ToastCodeProps> = ({
         <span className="code__props">position</span>
         {`: "${position}"`},
       </div>
+      <div>
+        <span className="code__props">theme</span>
+        {`: "${theme}"`},
+      </div>
       <div>
         <span className="code__props">autoClose</span>
         {`: ${disableAutoClose ? false : autoClose}`},

example/components/constants.ts

@@ -41,3 +41,5 @@ export const transitions = {
   zoom: Zoom,
   flip: Flip
 };
+
+export const themes = <const>['light', 'dark', 'colored'];

example/index.tsx

@@ -1,13 +1,14 @@
 import 'react-app-polyfill/ie11';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import * as React from 'react';
 import { App } from './components/App';
 
 import './index.css';
 
-render(
+const root = createRoot(document.getElementById('root')!);
+
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );

example/package.json

@@ -10,22 +10,21 @@
   },
   "dependencies": {
     "react-app-polyfill": "^3.0.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.5"
   },
   "alias": {
     "react": "../node_modules/react",
-    "react-dom": "../node_modules/react-dom/profiling",
-    "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
+    "react-dom": "../node_modules/react-dom"
   },
   "devDependencies": {
-    "@parcel/config-default": "^2.3.1",
-    "@parcel/transformer-sass": "2.3.1",
-    "@parcel/transformer-typescript-tsc": "^2.3.1",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
-    "@types/styled-components": "^5.1.22",
-    "parcel": "^2.3.1",
-    "sass": "^1.49.7",
-    "typescript": "^4.5.5"
+    "@parcel/config-default": "^2.4.0",
+    "@parcel/transformer-sass": "2.4.0",
+    "@parcel/transformer-typescript-tsc": "^2.4.0",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
+    "@types/styled-components": "^5.1.24",
+    "parcel": "^2.4.0",
+    "sass": "^1.49.9",
+    "typescript": "^4.6.3"
   }
-}
+}