mini-notifier - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

dist/draw.d.ts

@@ -0,5 +1,7 @@
+import { ConfigureOptions } from ".";
 export declare type NotifyOptions = {
     time?: number;
     style?: "success" | "error" | "prompt";
-    target?: HTMLElement;
+    container?: ConfigureOptions["container"];
+    position?: ConfigureOptions["position"];
 };
@@ -11,3 +13,4 @@ export declare type ConfirmOptions = {
     cancelHandler?: () => void;
-    target?: HTMLElement;
+    container?: ConfigureOptions["container"];
+    position?: ConfigureOptions["position"];
 };
@@ -22,6 +25,6 @@ export declare type PromptOptions = NotifyOptions & {
 };
-declare const alert: (message: string, options?: NotifyOptions) => HTMLElement;
-declare const confirm: (message: string, options?: ConfirmOptions) => HTMLElement;
-declare const prompt: (message: string, options?: PromptOptions) => HTMLElement;
-declare const getWrapper: (injectCssVars?: boolean | undefined) => HTMLElement;
-export { alert, confirm, prompt, getWrapper };
+declare const notify: (message: string, options?: NotifyOptions) => HTMLElement;
+declare const confirm: (message: string, options: ConfirmOptions, themePrefix: string) => HTMLElement;
+declare const prompt: (message: string, options: PromptOptions, themePrefix: string) => HTMLElement;
+declare const createContainer: (position: ConfigureOptions["position"]) => HTMLElement;
+export { notify, confirm, prompt, createContainer };

dist/index.d.ts

@@ -1,6 +0,11 @@
-import "./css/index.css";
+import "./css/index.scss";
 import * as draw from "./draw";
-export declare function prepareContainer(container?: HTMLElement, injectCssVars?: boolean): HTMLElement;
+export declare type ConfigureOptions = {
+    container: HTMLElement;
+    position: "bottom-left" | "bottom-right" | "top-left" | "top-right" | "center";
+    themePrefix: string;
+};
+export declare function configure(options?: Partial<ConfigureOptions>): void;
 export declare function notify(message?: string, options?: draw.NotifyOptions): void;
 export declare function confirm(message?: string, options?: draw.ConfirmOptions): void;
 export declare function prompt(message?: string, options?: draw.PromptOptions): void;

package.json

@@ -7,19 +7,11 @@ {
   ],
-  "version": "0.5.1",
-  "scripts": {
-    "dev": "npm run clean && rollup -cw",
-    "prebuild": "npm run clean",
-    "build": "npm run build:types && npm run build:js",
-    "build:types": "tsc --emitDeclarationOnly",
-    "build:js": "rollup -c",
-    "serve": "http-server .",
-    "clean": "rimraf dist"
-  },
   "files": [
     "dist"
   ],
+  "version": "0.6.0",
+  "type": "module",
   "license": "MIT",
   "author": "Lhapaipai",
-  "module": "dist/index.es.js",
-  "main": "dist/index.umd.js",
+  "module": "dist/mini-notifier.js",
+  "main": "dist/mini-notifier.umd.cjs",
   "types": "dist/index.d.ts",
@@ -30,26 +22,22 @@ "repository": {
   },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build && yarn build:types",
+    "preview": "vite preview",
+    "build:types": "tsc src/index.ts --declaration --emitDeclarationOnly --outDir dist"
+  },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^22.0.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.30.6",
-    "@typescript-eslint/parser": "^5.30.6",
-    "autoprefixer": "^10.4.7",
-    "eslint": "^8.20.0",
+    "@typescript-eslint/eslint-plugin": "^5.35.1",
+    "@typescript-eslint/parser": "^5.35.1",
+    "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "fs-extra": "^10.1.0",
-    "http-server": "^14.1.1",
-    "postcss-import": "^14.1.0",
-    "postcss-nested": "^5.0.6",
     "prettier": "^2.7.1",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.77.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "typescript": "^4.7.4"
+    "sass": "^1.54.5",
+    "typescript": "^4.6.4",
+    "vite": "^3.0.7"
   },
   "volta": {
-    "node": "16.16.0"
+    "node": "16.17.0"
   }
 }

README.md

@@ -15,7 +15,12 @@ # miniNotifier
 <link rel="stylesheet" href="dist/style.css">
-<script src="dist/mini-notifier.umd.js"></script>
+<script src="dist/mini-notifier.umd.cjs"></script>
+<script>
+  { notify, prompt, confirm, configure } = miniNotifier;
+</script>
 ```
 
+with a bundler like `vite` or `webpack`.
+
 ```js
-import { notify, prompt, confirm, prepareContainer } from 'mini-notifier';
+import { notify, prompt, confirm, configure } from 'mini-notifier';
 import 'mini-notifier/dist/style.css';
@@ -25,10 +30,11 @@ ```
 ```js
-miniNotifier.notify('hello world');
+notify('hello world');
 
-miniNotifier.notify(message, {
+notify(message, {
   time: 5000,
-  style: 'success|error'
+  style: 'success|error',
+  position: 'top-left'
 });
 
-miniNotifier.confirm('Are you sure ?', {
+confirm('Are you sure ?', {
   okText: 'Yes',
@@ -41,3 +47,3 @@ cancelText: 'Sorry, no',
 
-miniNotifier.prompt('Enter your email', {
+prompt('Enter your email', {
   okText: 'Enter',
@@ -49,5 +55,11 @@ okHandler: (data) => console.log('your email:', data),
 
-miniNotifier.notify('hello world', {
-  target: document.querySelector('#box')
+notify('hello world', {
+  container: document.querySelector('#box')
 });
+
+configure({
+  container: document.body,
+  position: 'bottom-left',
+  themePrefix: 'penta'
+});
 ```
@@ -57,20 +69,9 @@
 
-If you want to custom the MiniNotifier theme. You can ask mini-notifier not to load css vars with `prepareContainer`.
+If you want to custom the MiniNotifier theme. You can define your own css vars.
 
-```js
-import { notify, prepareContainer } from 'mini-notifier';
-import 'mini-notifier/dist/style.css';
 
-// Do not inject css vars.
-prepareContainer(document.body, false);
+```css
+:root {
+  --primary-color500: #ffea66;
 
-notify('hello world');
-```
-
-```css
-/* add here your custom css vars */
-.mini-notifier-container {
-  --primary-color: #ffea66;
-  --primary-color-dark: #eac800;
-  
   --red500: #dc3545;
@@ -80,5 +81,15 @@ --red200: #f8d7da;
   --green200: #e1fae1;
-  
+
   --border-radius: .25rem;
 }
 ```
+
+in order to integrate as much as possible into your application, no css has been applied to the buttons.
+
+If you want ready-to-go theme you can add `pentatrion-theme` package from npm.
+
+```
+import "pentatrion-theme/css/button.scss";
+import "pentatrion-theme/css/text-textarea-select.scss";
+import "pentatrion-theme/css/variables.scss";
+```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

9

-52.63%

Number of lines in readme file

89

12.66%

Is type module

Yes

NaN

Worsened metrics

Total package byte prevSize

16644

-46.9%

Lines of code

141

-67.06%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes