Merge branch 'feature/libraries-npm' into 'feature/libraries'

Feature/libraries npm

See merge request !5

.babelrc

 {
-  "presets": ["es2015", "stage-2", "react"]
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
 }

.gitignore

 /vendor/
 .idea
 composer.lock
+/node_modules/

src/index.jsx → assets-src/settings-sender-address.jsx

-import React, { Component } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
-import SenderAddress from '../components/sender-address.jsx';
+import SenderAddress from './components/sender-address.jsx';
 
 document.addEventListener('DOMContentLoaded', function () {
     let elements = document.getElementsByClassName("settings-field-sender-address");

assets/css/style.min.css

-fieldset.settings-field-sender-address{margin:0;padding:0;boder:0}table.sender-address{position:relative;table-layout:fixed;background:#fff;border:1px solid #e5e5e5;box-shadow:0 1px 1px rgba(0,0,0,.04);border-spacing:0;width:100%;clear:both;margin:0}table.sender-address thead td{display:table-cell;padding:1em;vertical-align:top;line-height:1.75em;text-align:left;font-weight:600;text-shadow:none;font-size:14px}table.sender-address tbody td{margin-bottom:9px;padding:15px 10px;line-height:1.3;vertical-align:top;border-top:1px solid #e5e5e5}table.sender-address tfoot td{border-top:1px solid #e1e1e1}table.sender-address tbody tr:nth-child(even) td{background:#f9f9f9}table.sender-address input.non-unique{background:#d62728}table.sender-address tbody td span{display:none}table.sender-address tbody td.non-unique span{display:block}table.sender-address input[type="text"]{max-width:100%;width:100%}table.sender-address input[type="email"]{max-width:100%;width:100%}table.sender-address tbody tr td:first-child select{width:100%}@media only screen and (max-width:600px){table.sender-address tbody tr td:first-child select{width:auto;max-width:100%}table.sender-address,table.sender-address tbody{display:block}table.sender-address thead{display:none}table.sender-address tbody tr td:first-child,table.sender-address thead tr td:first-child{width:100%;display:block}table.sender-address tbody tr,table.sender-address tbody td{display:block;width:100%}}
\ No newline at end of file

package.json

 {
     "name": "WooCommerce-Settings-Field-for-Sender-Address",
     "version": "1.0.0",
-  "main": "index.jsx",
     "dependencies": {
-    "@babel/plugin-transform-react-constant-elements": "^7.6.0",
-    "@babel/plugin-transform-react-inline-elements": "^7.2.0",
-    "@babel/preset-env": "^7.6.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-plugin-transform-react-pure-class-to-function": "^1.0.1",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "babel-preset-react": "^6.24.1",
-    "bootstrap": "^4.3.1",
-    "jquery": "^3.4.1",
-    "popper.js": "^1.15.0",
-    "react": "^16.9.0",
-    "react-dom": "^16.7.0"
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-scripts": "^3.4.1"
     },
     "devDependencies": {
-    "babel-core": "^6.25.0",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-env": "^1.6.0",
+        "babel-preset-react": "^6.24.1",
+        "html-react-parser": "^4.0.0",
+        "@babel/plugin-syntax-jsx": "7.22.5",
+        "@babel/plugin-transform-react-jsx": "^7.22.5",
+        "@babel/preset-react": "^7.22.5",
         "babel-preset-es2015": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "cross-env": "^5.0.1",
-    "uglify-js": "^3.6.0",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "webpack": "^3.12.0",
-    "webpack-cli": "^3.3.9"
+        "browser-sync": "^2.27.11",
+        "browser-sync-webpack-plugin": "^2.3.0",
+        "laravel-mix": "6.0.49",
+        "sass": "^1.57.1",
+        "sass-loader": "^12.6.0"
     },
+    "main": "webpack.mix.js",
     "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack && uglifyjs ./assets/js/settings-sender-address.js -c -m -o ./assets/js/settings-sender-address.min.js",
-    "dev": "cross-env BABEL_ENV=default webpack --watch"
+        "dev": "node_modules/.bin/mix",
+        "watch": "node_modules/.bin/mix watch",
+        "prod": "node_modules/.bin/mix --production"
     }
 }

src/Assets.php

@@ -10,10 +10,10 @@ namespace WpDesk\WooCommerce\ShippingMethod\Fields\SenderAddress;
 class Assets {
 
     public function enqueue( $base_url, $suffix = '', $scripts_version = '' ) {
-        wp_register_style( 'fs_sender_address_css', trailingslashit( $base_url ) . 'assets/css/style' . $suffix . '.css', array(), $scripts_version );
+        wp_register_style( 'fs_sender_address_css', trailingslashit( $base_url ) . 'assets/css/style.css', array(), $scripts_version );
         wp_enqueue_style( 'fs_sender_address_css' );
 
-        wp_enqueue_script( 'fs_sender_address', trailingslashit( $base_url ) . 'assets/js/settings-sender-address' . $suffix . '.js', array(), $scripts_version );
+        wp_enqueue_script( 'fs_sender_address', trailingslashit( $base_url ) . 'assets/js/settings-sender-address.js', array(), $scripts_version );
     }
 
 }

webpack.config.js

-const webpack = require("webpack");
-
-module.exports = {
-    entry: "./src/index.jsx",
-    output: {
-        path: __dirname,
-        filename: "./assets/js/settings-sender-address.js"
-    },
-    module: {
-        loaders: [
-            {
-                test: /.jsx$/,
-                loader: "babel-loader",
-                exclude: /node_modules/,
-                options: {
-                    presets: [["env", "react"]],
-                    plugins: ["transform-class-properties"]
-                }
-            }
-        ]
-    },
-    plugins: [
-        new webpack.optimize.UglifyJsPlugin({
-            include: /\.min\.js$/,
-            minimize: true
-        })
-    ]};

webpack.mix.js

+let mix = require( 'laravel-mix' );
+
+mix.options( {
+    processCssUrls: false,
+    cssNano: {
+        discardComments: {
+            removeAll: true,
+        },
+    },
+    manifest: false
+} );
+
+mix.js( [ 'assets-src/settings-sender-address.jsx' ], 'assets/js/settings-sender-address.js' );
+