lesca-facebook-share - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

package.json

 {
-	"name": "lesca-facebook-share",
-	"version": "1.0.6",
-	"description": "Simple facebook share",
-	"main": "lib/index.js",
-	"scripts": {
-		"start": "webpack-dev-server --mode development",
-		"watch": "babel src/lib -w -d lib --copy-files",
-		"op": "babel src/lib -d lib --copy-files",
-		"dev": "concurrently \"npm run watch\" \"npm run start\"",
-		"rm": "rm -rf node_modules/ package-lock.json",
-		"deploy": "gh-pages -d dist",
-		"docs:prod": "webpack --mode production",
-		"build": "NODE_ENV=production webpack"
-	},
-	"keywords": [
-		"lesca",
-		"衝康吉",
-		"jameshsu1125",
-		"Facebook share"
-	],
-	"license": "MIT",
-	"devDependencies": {
-		"@babel/cli": "^7.16.8",
-		"@babel/core": "^7.16.12",
-		"@babel/plugin-proposal-class-properties": "^7.16.7",
-		"@babel/plugin-proposal-object-rest-spread": "^7.16.7",
-		"@babel/plugin-transform-runtime": "^7.16.10",
-		"@babel/preset-env": "^7.16.11",
-		"@babel/preset-react": "^7.16.7",
-		"autoprefixer": "^10.4.2",
-		"babel-loader": "^8.2.3",
-		"concurrently": "^7.0.0",
-		"css-loader": "^6.5.1",
-		"file-loader": "^6.2.0",
-		"gh-pages": "^3.2.3",
-		"html-webpack-plugin": "^5.5.0",
-		"less": "^4.1.2",
-		"less-loader": "^10.2.0",
-		"postcss": "^8.4.5",
-		"postcss-loader": "^6.2.1",
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2",
-		"style-loader": "^3.3.1",
-		"webpack": "^5.67.0",
-		"webpack-cli": "^4.9.2",
-		"webpack-dev-server": "^4.7.3"
-	},
-	"author": "jamehsu1125 <[e-mail]>",
-	"homepage": "https://github.com/jameshsu1125/lesca-facebook-share",
-	"repository": {
-		"type": "git",
-		"url": "[e-mail]:jameshsu1125/lesca-facebook-share.git"
-	},
-	"dependencies": {
-		"mobile-detect": "^1.4.5",
-		"html-react-parser": "^1.4.5",
-		"prismjs": "^1.26.0"
-	}
+  "name": "lesca-facebook-share",
+  "version": "1.0.7",
+  "description": "Simple facebook share",
+  "main": "lib/index.js",
+  "scripts": {
+    "start": "webpack-dev-server --mode development",
+    "watch": "babel src/lib -w -d lib --copy-files",
+    "op": "babel src/lib -d lib --copy-files",
+    "dev": "concurrently \"npm run watch\" \"npm run start\"",
+    "rm": "rm -rf node_modules/ package-lock.json",
+    "deploy": "gh-pages -d dist",
+    "docs:prod": "webpack --mode production",
+    "build": "NODE_ENV=production webpack"
+  },
+  "keywords": [
+    "lesca",
+    "衝康吉",
+    "jameshsu1125",
+    "Facebook share"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.9",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.6.0",
+    "@mui/material": "^5.6.0",
+    "autoprefixer": "^10.4.4",
+    "babel-loader": "^8.2.4",
+    "concurrently": "^7.1.0",
+    "css-loader": "^6.7.1",
+    "file-loader": "^6.2.0",
+    "gh-pages": "^3.2.3",
+    "html-webpack-plugin": "^5.5.0",
+    "less": "^4.1.2",
+    "less-loader": "^10.2.0",
+    "postcss": "^8.4.12",
+    "postcss-loader": "^6.2.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "style-loader": "^3.3.1",
+    "less-vars-to-js": "^1.3.0",
+    "webpack": "^5.71.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.8.1",
+    "html-react-parser": "^1.4.10",
+    "prismjs": "^1.27.0",
+    "mobile-detect": "^1.4.5"
+  },
+  "author": "jamehsu1125 <[e-mail]>",
+  "homepage": "https://github.com/jameshsu1125/lesca-facebook-share",
+  "repository": {
+    "type": "git",
+    "url": "[e-mail]:jameshsu1125/lesca-facebook-share.git"
+  }
 }

readme.md

@@ -1,3 +0,15 @@
-[![dev by JamesHsu](https://img.shields.io/badge/Dev%20by-Jameshsu1125-green)](https://github.com/jameshsu1125/) [![made in Taiwan](https://img.shields.io/badge/Made%20in-Taiwan-orange)](https://github.com/jameshsu1125/) [![npm](https://img.shields.io/badge/npm-Jameshsu1125-red)](https://www.npmjs.com/~jameshsu1125)
+[![NPM](https://img.shields.io/badge/NPM-ba443f?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/)
+[![React](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)](https://nodejs.org/en/)
+[![React](https://img.shields.io/badge/-ReactJs-61DAFB?style=for-the-badge&logo=react&logoColor=white)](https://zh-hant.reactjs.org/)
+[![React](https://img.shields.io/badge/Less-1d365d?style=for-the-badge&logo=less&logoColor=white)](https://lesscss.org/)
+[![React](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)](https://www.w3schools.com/html/)
+[![React](https://img.shields.io/badge/-CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)](https://www.w3schools.com/css/)
+[![NPM](https://img.shields.io/badge/DEV-Jameshsu1125-9cf?style=for-the-badge)](https://www.npmjs.com/~jameshsu1125)
 
+# Why use it?
+
+It use for share url to Facebook simply.
+
+#### [Live Demo](https://jameshsu1125.github.io/lesca-facebook-share/)
+
 # Installation
@@ -9,38 +21,43 @@
 
-# Demo
+## Usage
 
-[Live Demo](https://jameshsu1125.github.io/lesca-facebook-share/)
+install before DOM Render
 
-# Usage
-
 ```javascript
 import Facebook from 'lesca-facebook-share';
 
-// run install in entry file.
-Facebook.install('facebook-app-id'); // get one => https://developers.facebook.com/apps/
+Facebook.install('facebook-app-id'); // get your id => https://developers.facebook.com/apps/
 ```
 
+share with parameters
+
 ```javascript
-import Facebook from 'lesca-facebook-share';
+Facebook.share({
+  url: 'https://github.com/jameshsu1125/lesca-facebook-share',
+  quote: 'use share facebook api simply',
+  hashtag: 'lesca_facebook_share',
+  redirect_uri: window.location.href,
+});
+```
 
-function share() {
-	Facebook.share({
-		url: 'https://github.com/jameshsu1125/lesca-facebook-share',
-		quote: 'use share facebook api simply',
-		hashtag: 'lesca_facebook_share',
-		redirect_uri: window.location.href,
-	});
-}
+## Development
 
-<button onClick={share}>share to facebook</button>;
-```
+### Methods
 
-# Methods
+| method                                                                                               |          description          | return |
+| :--------------------------------------------------------------------------------------------------- | :---------------------------: | -----: |
+| .install(uid: _string_)                                                                              |      initialize with uid      |   void |
+| .share({ **url**: _string_, **hashtag**: _string_, **quote**: _string_, **redirect_url**: _string_}) | [parmaters](#share-parmaters) |        |
 
-| method                                        |   options    |            description             |       default |
-| :-------------------------------------------- | :----------: | :--------------------------------: | ------------: |
-| .install(uid)                                 |     uid      | install FB.js with facebook app id |               |
-| .share({ url, hashtag, quote, redirect_uri }) |     url      |     The URL you want to share      |               |
-|                                               |   hashtag    |            with hashtag            |               |
-|                                               |    quote     |             with quote             |               |
-|                                               | redirect_uri |      mobile device necessary       | location root |
+#### share parmaters
+
+| parmaters                  |             description             |       default |
+| :------------------------- | :---------------------------------: | ------------: |
+| **url**: _string_          |              share url              |               |
+| **hashtag**: _string_      |               hashtag               |          void |
+| **quote**: _string_        |                quote                |          void |
+| **redirect_url**: _string_ | redirect url (**mobile necessary**) | location.href |
+
+### Features
+
+- maintain if necessary

src/docs/index.js

@@ -1,59 +0,35 @@
-import { render } from 'react-dom';
-import { Navation, Code } from './components';
-import Demo from './demo';
-import Facebook from '../lib/index';
-
+import { Container } from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import Navigation from './components/navigation';
+import Demo from './pages/demo';
+import Usage from './pages/usage';
 import './styles.less';
+import { theme } from './theme';
 
-const homepage = 'https://github.com/jameshsu1125/lesca-facebook-share';
-const name = 'lesca-facebook-share';
-const description = 'simple facebook share';
-const code = `import Facebook from 'lesca-facebook-share'; 
+const App = () => {
+	const [state, setState] = useState('demo');
 
-Facebook.install('facebook-app-id'); // => https://developers.facebook.com/apps/
-`;
+	const appendPage = () => {
+		switch (state) {
+			default:
+			case 'demo':
+				return <Demo />;
 
-const code2 = `import Facebook from 'lesca-facebook-share
+			case 'usage':
+				return <Usage />;
+		}
+	};
 
-const share = () => {
-	Facebook.share({
-		url: 'https://github.com/jameshsu1125/lesca-facebook-share',
-		quote: 'use share facebook api simply',
-		hashtag: 'lesca_facebook_share',
-	});
-};
-return <button onClick={share}>Facebook Share</button>
-`;
-
-Facebook.install('171368189560011');
-
-const Page = () => {
 	return (
-		<>
-			<Navation />
-			<div className='content'>
-				<div>
-					<h1>{name}</h1>
-					<figcaption>{description}</figcaption>
-				</div>
-				<div>
-					<h2>install</h2>
-					<Code code={`npm install ${name} --save`} theme='markup' />
-				</div>
-				<div>
-					<h2>run install on entry file</h2>
-					<Code code={code} />
-					<h2>share your url with parameters</h2>
-					<Code code={code2} theme='javascript' />
-					<Demo />
-				</div>
-				<div>
-					<h2>Usage</h2>
-					<a href={homepage}>Documentation</a>
-				</div>
-			</div>
-		</>
+		<ThemeProvider theme={theme}>
+			<Navigation setState={setState} state={state} />
+			<Container style={{ paddingTop: '70px' }} maxWidth='lg'>
+				{appendPage()}
+			</Container>
+		</ThemeProvider>
 	);
 };
 
-render(<Page />, document.getElementById('app'));
+createRoot(document.getElementById('app')).render(<App />);

webpack.config.js

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const Meta = require('./template/template.meta');
 
 module.exports = {
-	entry: path.join(__dirname, 'src/docs'),
-	output: {
-		path: path.join(__dirname, 'dist'),
-		filename: 'bundle.js',
-	},
-	module: {
-		rules: [
-			{ test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/ },
-			{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
-			{ test: /\.less$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] },
-			{
-				test: /\.(png|jpg|gif|svg)$/,
-				use: [{ loader: 'file-loader', options: { name: 'img/[path][name].[ext]', context: 'src/docs' } }],
-			},
-		],
-	},
-	plugins: [
-		new HtmlWebpackPlugin({
-			template: path.join(__dirname, 'src/docs/index.html'),
-		}),
-	],
-	resolve: {
-		extensions: ['.js', '.jsx'],
-	},
-	devServer: {
-		port: 8000,
-		https: true,
-	},
+  entry: path.join(__dirname, 'src/docs'),
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+  module: {
+    rules: [
+      { test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/ },
+      { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
+      { test: /\.less$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: { name: 'img/[path][name].[ext]', context: 'src/docs' },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      ...Meta,
+      template: 'template/template.html',
+    }),
+  ],
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+  devServer: {
+    port: 8000,
+    https: true,
+  },
 };

No alert changes

Improved metrics

Total package byte prevSize

21750

increased by24.06%

Dependency count

0

decreased by-100%

Number of package files

27

increased by58.82%

Lines of code

412

increased by30.38%

Number of lines in readme file

63

increased by36.96%

Worsened metrics

Dev dependency count

32

increased by33.33%

Dependency changes

• - Removedhtml-react-parser@^1.4.5

• - Removedmobile-detect@^1.4.5

• - Removedprismjs@^1.26.0

• - Removeddom-serializer@1.4.1(transitive)

• - Removeddomelementtype@2.3.0(transitive)

• - Removeddomhandler@4.3.1(transitive)

• - Removeddomutils@2.8.0(transitive)

• - Removedentities@2.2.03.0.1(transitive)

• - Removedhtml-dom-parser@1.2.0(transitive)

• - Removedhtml-react-parser@1.4.14(transitive)

• - Removedhtmlparser2@7.2.0(transitive)

• - Removedinline-style-parser@0.1.1(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedmobile-detect@1.4.5(transitive)

• - Removedprismjs@1.29.0(transitive)

• - Removedreact@18.3.1(transitive)

• - Removedreact-property@2.0.0(transitive)

• - Removedstyle-to-js@1.1.1(transitive)

• - Removedstyle-to-object@0.3.0(transitive)