Refactoring with Typescript

README.md

@@ -74,11 +74,9 @@ And the script at the bottom of the page
 ## Documentation
 
 ```javascript
-Toastify({
+Toast({
   text: "This is a toast",
   duration: 3000,
-  destination: "https://github.com/apvarun/toastify-js",
-  newWindow: true,
   close: true,
   gravity: "top", // `top` or `bottom`
   position: "left", // `left`, `center` or `right`
@@ -87,10 +85,10 @@ Toastify({
     background: "linear-gradient(to right, #00b09b, #96c93d)",
   },
   onClick: function(){} // Callback after click
-}).showToast();
+}).show();
 ```
 
-> Toast messages will be centered on devices with screen width less than 360px.
+> Toast messages will be centered on devices with screen width less than 480px.
 
 * See the [changelog](https://github.com/apvarun/toastify-js/blob/master/CHANGELOG.md)
 
@@ -99,33 +97,17 @@ Toastify({
 If you want to use custom classes on the toast for customizing (like info or warning for example), you can do that as follows:
 
 ```javascript
-Toastify({
+Toast({
   text: "This is a toast",
   className: "info",
   style: {
     background: "linear-gradient(to right, #00b09b, #96c93d)",
   }
-}).showToast();
+}).show();
 ```
 
 Multiple classes also can be assigned as a string, with spaces between class names.
 
-### Add some offset
-
-If you want to add offset to the toast, you can do that as follows:
-
-```javascript
-Toastify({
-  text: "This is a toast with offset",
-  offset: {
-    x: 50, // horizontal axis - can be a number or a string indicating unity. eg: '2em'
-    y: 10 // vertical axis - can be a number or a string indicating unity. eg: '2em'
-  },
-}).showToast();
-```
-
-Toast will be pushed 50px from right in x axis and 10px from top in y axis.
-
 **Note:**
 
 If `position` is equals to `left`, it will be pushed from left.
@@ -138,25 +120,17 @@ If `gravity` is equals to `bottom`, it will be pushed from bottom.
 | text | string | Message to be displayed in the toast | "Hi there!" |
 | node | ELEMENT_NODE | Provide a node to be mounted inside the toast. `node` takes higher precedence over `text` |  |
 | duration | number | Duration for which the toast should be displayed.<br>-1 for permanent toast | 3000 |
-| selector | string \| ELEMENT_NODE | ShadowRoot | CSS Selector or Element Node on which the toast should be added | body |
-| destination | URL string | URL to which the browser should be navigated on click of the toast |  |
-| newWindow | boolean | Decides whether the `destination` should be opened in a new window or not | false |
 | close | boolean | To show the close icon or not | false |
 | gravity | "top" or "bottom" | To show the toast from top or bottom | "top" |
 | position | "left" or "right" | To show the toast on left or right | "right" |
-| backgroundColor | CSS background value | To be deprecated, use `style.background` option instead. Sets the background color of the toast |  |
-| avatar | URL string | Image/icon to be shown before text |  |
 | className | string | Ability to provide custom class name for further customization |  |
 | stopOnFocus | boolean | To stop timer when hovered over the toast (Only if duration is set) | true |
-| callback | Function | Invoked when the toast is dismissed |  |
+| onClose | Function | Invoked when the toast is dismissed |  |
 | onClick | Function | Invoked when the toast is clicked |  |
-| offset | Object | Ability to add some offset to axis | |
-| escapeMarkup | boolean | Toggle the default behavior of escaping HTML markup | true |
 | style | object | Use the HTML DOM Style properties to add any style directly to toast | |
 | ariaLive | string | Announce the toast to screen readers, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions for options | "polite" |
 | oldestFirst | boolean | Set the order in which toasts are stacked in page | true |
 
-> Deprecated properties: `backgroundColor` -  use `style.background` option instead
 
 ## Browsers support
 

build/build.js

@@ -0,0 +1,60 @@
+const root = process.cwd();
+import { join, parse } from 'path';
+import { readFileSync, existsSync, mkdirSync } from 'fs';
+import esbuild from 'esbuild';
+function mkdir(path) {
+    return existsSync(path) || mkdirSync(path)
+}
+const sourcePath = join(root, 'src');
+const packagePath = join(root, 'package.json');
+const tsconfigPath = join(root, 'tsconfig.json');
+const packageConfig = JSON.parse(readFileSync(packagePath, 'utf8'));
+const tsConfig = JSON.parse(readFileSync(tsconfigPath, 'utf8'));
+const distPath = parse(packageConfig.main).dir;
+const mainPath = join(sourcePath, `${packageConfig.name}.ts`);
+const cssPath = join(sourcePath, `${packageConfig.name}.css`);
+mkdir(distPath);
+esbuild.buildSync({
+    allowOverwrite: true,
+    entryPoints: [mainPath],
+    outfile: join(distPath, `${packageConfig.name}.js`),
+    minify: false,
+    sourcemap: true,
+    platform: 'browser',
+    format: 'iife',
+    target: tsConfig.target,
+    charset: 'utf8'
+});
+esbuild.buildSync({
+    allowOverwrite: true,
+    entryPoints: [mainPath],
+    outfile: join(distPath, `${packageConfig.name}.min.js`),
+    minify: true,
+    sourcemap: true,
+    platform: 'browser',
+    format: 'iife',
+    target: tsConfig.target,
+    charset: 'utf8'
+});
+esbuild.buildSync({
+    allowOverwrite: true,
+    entryPoints: [cssPath],
+    outfile: join(distPath, `${packageConfig.name}.css`),
+    minify: false,
+    loader: {
+        '.css': 'css'
+    },
+    platform: 'browser',
+    charset: 'utf8'
+});
+esbuild.buildSync({
+    allowOverwrite: true,
+    entryPoints: [cssPath],
+    outfile: join(distPath, `${packageConfig.name}.min.css`),
+    minify: true,
+    loader: {
+        '.css': 'css'
+    },
+    platform: 'browser',
+    charset: 'utf8'
+});

dist/toastify.css

@@ -0,0 +1,170 @@
+.offscreen-container {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  max-width: 480px;
+}
+.toast-container {
+  isolation: isolate;
+  position: fixed;
+  z-index: 2147483647;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  transition: transform calc(0.6 * var(--toast-rate) * 1s) ease, opacity calc(0.6 * var(--toast-rate) * 1s) ease;
+}
+.toast-container.toast-top {
+  top: 0;
+}
+.toast-container.toast-bottom {
+  bottom: 0;
+}
+.toast-container.toast-left {
+  left: 0;
+  align-items: flex-start;
+}
+.toast-container.toast-center {
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+.toast-container.toast-right {
+  right: 0;
+  align-items: flex-end;
+}
+#toast-container-top-left .toast {
+  margin: 10px 0 0 10px;
+  transform-origin: left center;
+}
+#toast-container-top-center .toast {
+  margin: 10px 0 0 0;
+  transform-origin: top;
+}
+#toast-container-top-right .toast {
+  margin: 10px 10px 0 0;
+  transform-origin: right center;
+}
+#toast-container-bottom-left .toast {
+  margin: 0 0 10px 10px;
+  transform-origin: left center;
+}
+#toast-container-bottom-center .toast {
+  margin: 0 0 10px 0;
+  transform-origin: bottom;
+}
+#toast-container-bottom-right .toast {
+  margin: 0 10px 10px 0;
+  transform-origin: right center;
+}
+.toast {
+  --toast-rate: 1;
+  --toast-translate: 0;
+  --toast-scale: 1;
+  position: relative;
+  transition: transform calc(0.4s * var(--toast-rate)) cubic-bezier(0.34, 1.56, 0.64, 1), opacity calc(0.3s * var(--toast-rate)) ease;
+  transform: translate3d(0, var(--toast-translate), 0) scale(var(--toast-scale));
+  max-width: 480px;
+  max-height: 0px;
+  will-change: transform, opacity;
+  backface-visibility: hidden;
+  contain: content;
+  border-radius: 6px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
+}
+.toast-close {
+  position: absolute;
+  color: white;
+  top: 5px;
+  right: 5px;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 12px;
+  z-index: 2147483648;
+  transform-origin: center center;
+}
+.toast-content {
+  border-radius: 6px;
+  padding: 14px 18px 14px 18px;
+  max-width: 100%;
+  box-sizing: border-box;
+  background: rgb(55, 208, 255);
+  color: white;
+  cursor: pointer;
+  white-space: normal;
+  word-break: break-all;
+  overflow: hidden;
+  position: relative;
+}
+.toast-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.8);
+  transform: scaleX(var(--toast-progress, 1));
+  transition: transform calc(0.1 * var(--toast-rate) * 1s) ease-in;
+  will-change: transform;
+  backface-visibility: hidden;
+}
+.toast:hover {
+  z-index: 2147483648;
+  --toast-scale: 1.15;
+}
+.toast-container.toast-left .toast .toast-content .toast-progress {
+  transform-origin: left;
+}
+.toast-container.toast-center .toast .toast-content .toast-progress {
+  transform-origin: center;
+}
+.toast-container.toast-right .toast .toast-content .toast-progress {
+  transform-origin: right;
+}
+.toast-container.toast-top .toast.show {
+  animation: toast-in-top calc(0.3 * var(--toast-rate) * 1s) ease-in-out forwards;
+}
+.toast-container.toast-bottom .toast.show {
+  animation: toast-in-bottom calc(0.3 * var(--toast-rate) * 1s) ease-in-out forwards;
+}
+.toast-container.toast-top .toast.hide {
+  animation: toast-out-top calc(0.3 * var(--toast-rate) * 1s) ease-in-out forwards;
+}
+.toast-container.toast-bottom .toast.hide {
+  animation: toast-out-bottom calc(0.3 * var(--toast-rate) * 1s) ease-in-out forwards;
+}
+@keyframes toast-in-top {
+  from {
+    opacity: 0;
+    max-height: 0px;
+  }
+  to {
+    max-height: var(--toast-height);
+  }
+}
+@keyframes toast-in-bottom {
+  from {
+    opacity: 0;
+    max-height: 0px;
+  }
+  to {
+    max-height: var(--toast-height);
+  }
+}
+@keyframes toast-out-top {
+  from {
+    max-height: var(--toast-height);
+  }
+  to {
+    opacity: 0;
+    max-height: 0px;
+  }
+}
+@keyframes toast-out-bottom {
+  from {
+    max-height: var(--toast-height);
+  }
+  to {
+    opacity: 0;
+    max-height: 0px;
+  }
+}