Update dependencies (yarn, eslint, coding styles)

so that "yarn audit" report 0 errors
Many packages where deprectated including coding style

.eslintrc.js

@@ -1,8 +1,15 @@
 module.exports = {
   root: true,
-  extends: ['@sharkcore'],
+  extends: ["airbnb-base",'react-app', 
+			'plugin:prettier/recommended'],
+  plugins: [
+    '@stylistic/js'
+  ],
   rules: {
-    // TODO: Add typescript types to composerize-website
-    "react/prop-types": "off"
-  }
+    // TODO: Add typescript types to decomposerize-website
+    "react/prop-types": "off",
+	"import/no-anonymous-default-export":"off",
+	'@stylistic/js/indent': ['error', 4], 
+  },
+ "parser": "@babel/eslint-parser",
 };

.yarnrc

@@ -1 +0,0 @@
-yarn-path ".yarn/releases/yarn-1.19.0.cjs"

Makefile

@@ -6,10 +6,10 @@ eslint: node_modules
 	./tools/eslint
 
 build: node_modules
-	yarn lerna exec -- make build
+	yarn lerna exec make build
 
 test: eslint node_modules
-	yarn lerna exec -- make test
+	yarn lerna exec make test
 
 serve: build
 	serve -s packages/composerize-website/build/

README.md

@@ -90,10 +90,6 @@ console.log(composeConfig);
 - Make your changes, and build the project by running `make build`
 - Test your changes with `make test`
 
-### yarn version
-
-Needs yarn@1.19.1. See https://github.com/yarnpkg/yarn/issues/7734.
-
 ## Maintainers
 
 - Mark Larah (Twitter: [@mark_larah](https://twitter.com/mark_larah))

babel.config.json

@@ -19,7 +19,7 @@
           "@babel/preset-env",
           {
             "modules": "commonjs"
-          }
+          },
         ]
       ]
     }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "composerize",
+  "name": "composerize-root",
   "private": true,
   "license": "MIT",
   "workspaces": [
@@ -13,29 +13,50 @@
     "eslint": "eslint packages/**/*/{src,__tests__}/**/*.js --format codeframe"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.7.4",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-flow": "^7.0.0",
+    "@babel/cli": "^7.x",
+    "@babel/core": "^7.x",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/plugin-proposal-private-property-in-object": "^7.x",
+    "@babel/preset-env": "^7.x",
+    "@babel/preset-flow": "^7.x",
+    "@babel/preset-react": "^7.x",
+    "@stylistic/eslint-plugin-js": "^1.4.0",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^9.0.0",
-    "babel-jest": "^24.9.0",
-    "eslint": "^6.8.0",
-    "flow-bin": "^0.129.0",
-    "husky": "^4.2.5",
-    "jest": "^25.5.4"
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^27.4.3",
+    "babel-plugin-macros": "^3.1.0",
+    "babel-plugin-styled-components": "^2.1.4",
+    "eslint": "^8.53.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-formatter-codeframe": "^7.32.1",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "flow-bin": "^0.221.0",
+    "husky": "^8.0.3",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.4.3",
+    "jest-environment-jsdom": "^27.4.3",
+    "jest-styled-components": "^7.2.0",
+    "prettier": "^3.1.0"
   },
   "dependencies": {
-    "@sharkcore/eslint-config": "^1.1.0-alpha.3",
-    "lerna": "^3.20.2"
+    "lerna": "^7.4.2"
   },
   "engines": {
-    "node": ">=8",
-    "yarn": "<= 1.19.1"
+    "node": ">=8"
   },
   "husky": {
     "hooks": {
       "pre-commit": "./tools/eslint"
     }
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "styled-components/macro": "styled-components"
+    },
+    "prettierPath": null
   }
 }

packages/composerize-website/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://www.composerize.com",
   "dependencies": {
     "babel-plugin-styled-components": "^1.10.7",
-    "composerize": "*",
+    "composerize": "latest",
     "html5-boilerplate": "^7.2.0",
     "normalize.css": "^8.0.1",
     "react": "16.x",
@@ -17,7 +17,7 @@
     "styled-components": "5.x"
   },
   "devDependencies": {
-    "react-scripts": "3.4.1"
+    "react-scripts": "^5.x"
   },
   "scripts": {
     "start": "make .env && react-scripts start",

packages/composerize-website/src/App.test.js

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment jsdom
+ */
+
 /* eslint-env jest */
 
 import React from 'react';
@@ -5,6 +9,10 @@ import ReactDOM from 'react-dom';
 
 import App from './App';
 
+jest.mock('normalize.css', () => ({}));
+jest.mock('html5-boilerplate/dist/css/main.css', () => ({}));
+jest.mock('./App.css', () => ({}));
+
 it('renders without crashing', () => {
     const div = document.createElement('div');
     ReactDOM.render(<App />, div);

packages/composerize-website/src/Main.js

@@ -49,7 +49,7 @@ export default class Main extends Component {
     }
 
     updateConversion() {
-        this.setState(state => {
+        this.setState((state) => {
             try {
                 return {
                     output: Composerize(state.command, state.compose, state.version),

packages/composerize-website/src/components/Output.js

@@ -22,7 +22,7 @@ const Blurb = styled.div`
     margin-bottom: 10px;
 `;
 
-export default props => (
+export default (props) => (
     <Section border>
         <Label>Output</Label>
         <Blurb>

packages/composerize-website/src/components/Section.js

@@ -9,8 +9,8 @@ const Section = styled.div`
 
 const Spacer = styled.div`
     display: flex;
-    padding-top: ${props => (props.topPadding ? '30' : '0')}px;
-    border-top: ${props => (props.border ? '1' : '0')}px solid #dcd4d8;
+    padding-top: ${(props) => (props.topPadding ? '30' : '0')}px;
+    border-top: ${(props) => (props.border ? '1' : '0')}px solid #dcd4d8;
 `;
 
 export default ({ children, topPadding, border }) => (

packages/composerize-website/src/components/TextInput.js

@@ -19,7 +19,7 @@ export default class TextInput extends Component {
             <StyledInput
                 rows={rows ?? 1}
                 value={value}
-                onChange={e => {
+                onChange={(e) => {
                     this.handleChange(e);
                 }}
             />

packages/composerize-website/src/registerServiceWorker.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/prefer-default-export
 export function unregister() {
     if ('serviceWorker' in navigator) {
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
             registration.unregister();
         });
     }

packages/composerize/__tests__/mappings.test.js

@@ -303,10 +303,10 @@ test('basic image (https://github.com/magicmark/composerize/issues/542)', () =>
 
 test('volumes declaration (https://github.com/magicmark/composerize/issues/524)', () => {
     expect(
-  Composerize(
-    'docker run --restart=unless-stopped -d --name=readymedia1 --net=host -v /my/video/path:/media -v readymediacache:/cache -e VIDEO_DIR1=/media/my_video_files ypopovych/readymedia'
-  )
-).toMatchInlineSnapshot(`
+        Composerize(
+            'docker run --restart=unless-stopped -d --name=readymedia1 --net=host -v /my/video/path:/media -v readymediacache:/cache -e VIDEO_DIR1=/media/my_video_files ypopovych/readymedia',
+        ),
+    ).toMatchInlineSnapshot(`
 "name: <your project name>
 services:
     readymedia:

packages/composerize/babel.config.json

@@ -0,0 +1,28 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "8",
+          "browsers": [">0.2%", "not dead", "not op_mini all"]
+        },
+        "modules": false
+      }
+    ],
+    "@babel/preset-flow"
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "modules": "commonjs"
+          },
+		  "@babel/preset-react"
+        ]
+      ]
+    }
+  }
+}

packages/composerize/jest.config.js

@@ -11,5 +11,5 @@ module.exports = {
             lines: 100,
             statements: 100,
         },
-    },
+    }
 };

packages/composerize/package.json

@@ -12,26 +12,27 @@
     "composerize": "cli.js"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.7.4",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-flow": "^7.0.0",
+    "@babel/cli": "^7.x",
+    "@babel/core": "^7.x",
+    "@babel/plugin-proposal-private-property-in-object": "^7.x",
+    "@babel/preset-env": "^7.x",
+    "@babel/preset-flow": "^7.x",
+    "@rollup/plugin-babel": "6.x",
+    "@rollup/plugin-commonjs": "25.x",
+    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-node-resolve": "15.x",
+    "@rollup/plugin-replace": "5.x",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^24.9.0",
-    "flow-bin": "^0.129.0",
-    "husky": "^0.14.3",
-    "jest": "^25.5.4",
-    "rollup": "^0.59.0",
-    "rollup-plugin-babel": "4.x",
-    "rollup-plugin-commonjs": "9.x",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^27.4.3",
+    "jest": "^27.4.3",
+    "rollup": "4.x",
     "rollup-plugin-node-builtins": "2.x",
     "rollup-plugin-node-globals": "1.x",
-    "rollup-plugin-node-resolve": "3.x",
-    "rollup-plugin-replace": "2.x",
-    "rollup-plugin-uglify": "3.x"
+    "rollup-plugin-uglify": "6.x"
   },
   "dependencies": {
-    "composeverter": "*",
+    "composeverter": "latest",
     "core-js": "^2.5.5",
     "deepmerge": "^2.1.0",
     "invariant": "^2.2.4",

packages/composerize/rollup.config.mjs

@@ -1,27 +1,26 @@
-import commonjs from 'rollup-plugin-commonjs';
-import resolve from 'rollup-plugin-node-resolve';
-import babel from 'rollup-plugin-babel';
-import uglify from 'rollup-plugin-uglify';
-import replace from 'rollup-plugin-replace';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import babel from '@rollup/plugin-babel';
+import { uglify } from 'rollup-plugin-uglify';
+import replace from '@rollup/plugin-replace';
 import builtins from 'rollup-plugin-node-builtins';
 import globals from 'rollup-plugin-node-globals';
+import json from '@rollup/plugin-json';
 
 export default {
     input: 'src/index.js',
     plugins: [
         babel({
             include: ['src/**/*.js', 'node_modules/camelcase/**/*.js'],
+			babelHelpers: 'bundled',
         }),
-        commonjs({
-            namedExports: {
-                'node_modules/yargs-parser/index.js': ['default'],
-                'node_modules/camelcase/index.js': ['camelcase'],
-            },
-        }),
+        json(),
+        commonjs(),
         globals(),
         builtins(),
         replace({
             'process.env.NODE_ENV': JSON.stringify('production'),
+			preventAssignment: false,
         }),
         resolve(),
         uglify(),

packages/composerize/src/index.js

@@ -1,7 +1,5 @@
 // @flow
 
-import 'core-js/fn/object/entries';
-
 import yaml from 'yaml';
 import parser from 'yargs-parser';
 import deepmerge from 'deepmerge';
@@ -77,7 +75,7 @@ const getComposeFileJson = (input: string, existingComposeFile: string): Compose
         const result = maybeGetComposeEntry(key, value);
         if (result) {
             const entries = Array.isArray(result) ? result : [result];
-            entries.forEach(entry => {
+            entries.forEach((entry) => {
                 // Store whatever the next entry will be
                 const json = getComposeJson(entry, network);
                 service = deepmerge(service, json);
@@ -90,6 +88,7 @@ const getComposeFileJson = (input: string, existingComposeFile: string): Compose
     });
 
     const image = command[0];
+    // $FlowFixMe: prop missing
     service.image = image;
     if (command.length > 1) {
         let argStart = 1;
@@ -98,38 +97,51 @@ const getComposeFileJson = (input: string, existingComposeFile: string): Compose
             commandArgsArray.push(command[argStart]);
             argStart += 1;
         }
+        // $FlowFixMe: prop missing
         service.command = commandArgsArray.join(' ');
     }
 
-    const isNamedVolume = source => source && !source.includes('/') && !source.includes('\\') && !source.includes('$');
+    const isNamedVolume = (source: string) =>
+        source && !source.includes('/') && !source.includes('\\') && !source.includes('$');
     const namedVolumes = [];
+    // $FlowFixMe: prop missing
     if (service.volumes) {
+        // $FlowFixMe: prop missing
         for (let volumeIndex = 0; volumeIndex < service.volumes.length; volumeIndex += 1) {
             let source;
+            // $FlowFixMe: prop missing
             if (typeof service.volumes[volumeIndex] === 'string') {
+                // $FlowFixMe: prop missing
                 const volumeName = service.volumes[volumeIndex].split(':')[0];
                 source = volumeName;
             } else {
+                // $FlowFixMe: prop missing
                 const volumeSource = service.volumes[volumeIndex].source;
                 source = volumeSource;
             }
             if (isNamedVolume(source)) {
-                namedVolumes.push([source, {external: {name: source}}]);
+                namedVolumes.push([source, { external: { name: source } }]);
             }
         }
     }
 
     const namedNetworks = [];
+    // $FlowFixMe: prop missing
     if (service.networks) {
+        // $FlowFixMe: prop missing
         if (Array.isArray(service.networks)) {
+            // $FlowFixMe: prop missing
             for (let networkIndex = 0; networkIndex < service.networks.length; networkIndex += 1) {
                 namedNetworks.push([
+                    // $FlowFixMe: prop missing
                     service.networks[networkIndex],
+                    // $FlowFixMe: prop missing
                     { external: { name: service.networks[networkIndex] } },
                 ]);
             }
         } else {
-            Object.keys(service.networks).forEach(serviceNetworkName => {
+            // $FlowFixMe: prop missing
+            Object.keys(service.networks).forEach((serviceNetworkName) => {
                 // TODO: supposed to be done by babel : if (service.networks.hasOwnProperty(network))
                 namedNetworks.push([serviceNetworkName, { external: { name: serviceNetworkName } }]);
             });
@@ -183,6 +195,7 @@ export default (input: string, existingComposeFile: string = '', composeVersion:
 
         result = deepmerge(result, composeFile);
     });
+    // $FlowFixMe: prop missing
     if (!result.services)
         throw new SyntaxError('must have at least a valid docker run/create/service create/container run command');
 

packages/composerize/src/logic.js

@@ -15,14 +15,14 @@ import type {
 
 import type { RawValue } from './index';
 
-export const fromEntries = (iterable: Iterable<any>) =>
+export const fromEntries = (iterable: Iterable<any>): any =>
     [...iterable].reduce((obj, [key, val]) => ({ ...obj, [key]: val }), {});
 
 const parseListAsValueComposeEntryObject = (argValue: string, listSeparator: string, entrySeparator: string) => {
     const args = argValue.split(listSeparator);
 
     return fromEntries(
-        args.map(_arg => {
+        args.map((_arg) => {
             const [k, v] = _arg.split(entrySeparator, 2);
             return [k, /^-?\d+$/.test(String(v)) ? parseInt(v, 10) : v];
         }),
@@ -90,7 +90,7 @@ export const getComposeEntry = (mapping: Mapping, value: RawValue): ComposeEntry
     if (mapping.type === 'Envs') {
         const values = Array.isArray(value) ? value : [value];
 
-        return values.map(_value => {
+        return values.map((_value) => {
             const [k, v] = String(_value).split('=', 2);
             return ({
                 path: mapping.path,
@@ -103,7 +103,7 @@ export const getComposeEntry = (mapping: Mapping, value: RawValue): ComposeEntry
         const values = Array.isArray(value) ? value : [value];
 
         return values.map(
-            _value =>
+            (_value) =>
                 ({
                     path: mapping.path,
                     value: [parseListAsValueComposeEntryObject(String(_value), ',', '=')],
@@ -123,7 +123,7 @@ export const getComposeEntry = (mapping: Mapping, value: RawValue): ComposeEntry
     if (mapping.type === 'DeviceBlockIOConfigWeight') {
         const values = Array.isArray(value) ? value : [value];
 
-        return values.map(_value => {
+        return values.map((_value) => {
             const [path, weight] = String(_value).split(':');
 
             return ({
@@ -141,7 +141,7 @@ export const getComposeEntry = (mapping: Mapping, value: RawValue): ComposeEntry
     if (mapping.type === 'DeviceBlockIOConfigRate') {
         const values = Array.isArray(value) ? value : [value];
 
-        return values.map(_value => {
+        return values.map((_value) => {
             const [path, rate] = String(_value).split(':');
 
             return ({
@@ -159,7 +159,7 @@ export const getComposeEntry = (mapping: Mapping, value: RawValue): ComposeEntry
     if (mapping.type === 'Ulimits') {
         const values = Array.isArray(value) ? value : [value];
 
-        return values.map(_value => {
+        return values.map((_value) => {
             const [limitName, limitValue] = String(_value).split('=');
             invariant(
                 limitName && limitValue,

packages/composerize/src/mappings.js

@@ -58,8 +58,8 @@ export type ValueComposeEntry = {
 };
 
 export type IgnoreComposeEntry = {
-    path: null,
-    value: null,
+    path?: null,
+    value?: null,
 };
 
 export type ComposeEntry =