Infra/dependencies graph

dependencies-graph/.eslintrc.js

@@ -0,0 +1,48 @@
+module.exports = {
+  extends: ['plugin:@typescript-eslint/recommended', 'wix/react-native', 'plugin:react-hooks/recommended'],
+  parser: '@typescript-eslint/parser',
+  // plugins: ['@typescript-eslint'],
+  rules: {
+    /* Disabled rules for typescript */
+    'no-dupe-class-members': 'off',
+    'no-undef': 'off',
+    /* Other Rules */
+    'no-unused-expressions': 'off',
+    'arrow-parens': 'off',
+    // TODO: remove after migration of legacy lifecycle methods
+    camelcase: 'off',
+    'comma-dangle': ['error', 'never'],
+    'no-mixed-operators': ['off'],
+    'no-trailing-spaces': 'off',
+    'operator-linebreak': 'off',
+    'max-len': ['warn', {code: 120, ignoreComments: true, ignoreStrings: true}],
+    'react/jsx-no-bind': [
+      'off',
+      {
+        ignoreRefs: true,
+        allowArrowFunctions: false,
+        allowBind: false
+      }
+    ],
+    'function-paren-newline': ['warn', 'never'],
+    'new-cap': ['off'], // TODO: fix this in colors.js and remove this
+    'default-case': ['off'],
+    '@typescript-eslint/no-use-before-define': 0,
+    '@typescript-eslint/explicit-function-return-type': 0,
+    '@typescript-eslint/no-var-requires': 0,
+    '@typescript-eslint/no-explicit-any': 0,
+    '@typescript-eslint/member-delimiter-style': 0,
+    '@typescript-eslint/no-unused-vars': [2, {args: 'all', argsIgnorePattern: '^_'}],
+    // "@typescript-eslint/no-unused-vars": 0, //todo: uncomment this line and use the the better unused rule above ^
+    '@typescript-eslint/no-non-null-assertion': 0,
+    '@typescript-eslint/explicit-member-accessibility': 0,
+    '@typescript-eslint/prefer-optional-chain': 'error',
+    '@typescript-eslint/ban-ts-ignore': 0,
+    '@typescript-eslint/ban-ts-comment': 0,
+    '@typescript-eslint/ban-types': 0,
+    '@typescript-eslint/no-empty-function': 0,
+    '@typescript-eslint/camelcase': 0,
+    '@typescript-eslint/indent': 0,
+    '@typescript-eslint/explicit-module-boundary-types': 0
+  }
+};

dependencies-graph/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": false,
+  "arrowParens": "avoid",
+  "jsxBracketSameLine": false,
+  "printWidth": 120
+}

dependencies-graph/DOTbuilder.js

@@ -0,0 +1,91 @@
+const POPULAR_COMPONENTS = ['Button', 'Image', 'Text', 'TouchableOpacity', 'View'];
+
+// https://stackoverflow.com/a/16348977/4759619
+const stringToColor = str => {
+  let hash = 0;
+  str.split('').forEach(char => {
+    // eslint-disable-next-line no-bitwise
+    hash = char.charCodeAt(0) + ((hash << 5) - hash);
+  });
+  let color = '#';
+  for (let i = 0; i < 3; i++) {
+    // eslint-disable-next-line no-bitwise
+    const value = (hash >> (i * 8)) & 0xff;
+    color += value.toString(16).padStart(2, '0');
+  }
+  return color;
+};
+
+class DOTBuilder {
+  _builder;
+  _dotString = '';
+  _componentsWithNoOutgoingEdges = [];
+  _allImports = new Set();
+
+  constructor(builder, {additionalPopularComponents, prefix} = {}) {
+    this._builder = builder;
+    this._popularComponents = POPULAR_COMPONENTS.map(component => (prefix ?? '') + component).concat(additionalPopularComponents);
+  }
+
+  buildDOTString() {
+    this._mainBuild();
+    this._handleComponentsWithNoOutgoingEdges();
+  }
+
+  getDOTString() {
+    return 'digraph {' + this._dotString + '}';
+  }
+
+  _mainBuild() {
+    this._builder._parser._componentsWithImports.forEach(component => {
+      let hasOutgoingEdges = false;
+      let label = component.defaultExport;
+      const popular = [];
+      component.imports.forEach(imported => {
+        if (this._popularComponents.includes(imported)) {
+          popular.push(imported);
+        } else {
+          hasOutgoingEdges = true;
+        }
+      });
+
+      if (popular.length > 0) {
+        label += ` (${popular.join(', ')})`;
+      }
+
+      if (!hasOutgoingEdges) {
+        if (!this._popularComponents.includes(component.defaultExport) && component.defaultExport !== label) {
+          this._componentsWithNoOutgoingEdges.push({
+            component: component.defaultExport,
+            label: `"${label}"`
+          });
+        }
+      } else {
+        component.imports.forEach(imported => {
+          this._allImports.add(imported);
+          if (!this._popularComponents.includes(imported)) {
+            this._dotString += `${component.defaultExport}[label="${label}"]`;
+            this._dotString += '->';
+            this._dotString += `${imported}[color="${stringToColor(label)}"]`;
+            this._dotString += ';\n';
+          }
+        });
+      }
+    });
+  }
+
+  _handleComponentsWithNoOutgoingEdges() {
+    this._componentsWithNoOutgoingEdges.forEach(({component, label}) => {
+      this._dotString = this._dotString.replace(`->${component}[`, `->${label}[`);
+    });
+
+    this._componentsWithNoOutgoingEdges.forEach(({component, label}) => {
+      if (!this._allImports.has(component)) {
+        // No edges at all
+        this._dotString += `${component}[label=${label}]->OnlyPopularImports[color="${stringToColor(label)}"];\n`;
+      }
+    });
+  }
+}
+
+module.exports = DOTBuilder;

dependencies-graph/README.md

@@ -0,0 +1,4 @@
+# dependencies-graph-uilib
+
+uilib dependencies graph generator
+

dependencies-graph/builder.js

@@ -0,0 +1,81 @@
+const fs = require('fs');
+
+class Builder {
+  _folders;
+  _parser;
+  _componentsNames = [];
+
+  constructor(folders, parser) {
+    this._folders = folders;
+    this._parser = parser;
+  }
+
+  buildComponents({prefixToAdd, prefixToInclude} = {}) {
+    this._parse();
+    this._componentsNames = this._componentsNames.concat(this._parser._componentsWithImports.map(component => component.defaultExport));
+    this._removeAndRenameComponents(prefixToInclude);
+    this._addPrefix(prefixToAdd);
+  }
+
+  writeToFile(fileFullPath) {
+    if (fs.existsSync(fileFullPath)) {
+      fs.rmSync(fileFullPath);
+    }
+    fs.writeFileSync(fileFullPath, JSON.stringify(this._parser._componentsWithImports, null, 2));
+  }
+
+  readFromFile(fileName, prefix) {
+    this._parser.clear();
+    this._parser._componentsWithImports = JSON.parse(fs.readFileSync(fileName, 'utf8'));
+    this._addPrefix(prefix);
+    this._componentsNames = this._componentsNames.concat(this._parser._componentsWithImports.map(component => component.defaultExport));
+  }
+
+  _addPrefix(prefix) {
+    if (!prefix) {
+      return;
+    }
+
+    for (let i = 0; i < this._parser._componentsWithImports.length; ++i) {
+      this._parser._componentsWithImports[i].defaultExport =
+        prefix + this._parser._componentsWithImports[i].defaultExport;
+      for (let j = 0; j < this._parser._componentsWithImports[i].imports.length; ++j) {
+        this._parser._componentsWithImports[i].imports[j] = prefix + this._parser._componentsWithImports[i].imports[j];
+      }
+    }
+  }
+
+  _removeAndRenameComponents(prefixToInclude) {
+    for (let i = 0; i < this._parser._componentsWithImports.length; ++i) {
+      for (let j = this._parser._componentsWithImports[i].imports.length - 1; j >= 0; --j) {
+        const currentImport = this._parser._componentsWithImports[i].imports[j];
+        if (
+          // this._parser._functions.has(currentImport) ||
+          this._parser._enums.has(currentImport) ||
+          this._parser._interfaces.has(currentImport) ||
+          this._parser._types.has(currentImport) ||
+          (!this._componentsNames.includes(currentImport) &&
+            !currentImport.endsWith('Old') &&
+            !currentImport.endsWith('New') &&
+            (!prefixToInclude || !currentImport.startsWith(prefixToInclude)))
+        ) {
+          this._parser._componentsWithImports[i].imports.splice(j, 1);
+        } else if (
+          !this._componentsNames.includes(currentImport) &&
+          (currentImport.endsWith('Old') || currentImport.endsWith('New')) &&
+          this._componentsNames.includes(currentImport.slice(0, -3))
+        ) {
+          this._parser._componentsWithImports[i].imports[j] = currentImport.slice(0, -3);
+        }
+      }
+    }
+  }
+
+  _parse() {
+    for (let i = 0; i < this._folders.length; ++i) {
+      this._parser.parse(this._folders[i]);
+    }
+  }
+}
+
+module.exports = Builder;

dependencies-graph/index.js

@@ -0,0 +1,18 @@
+// const path = require('path');
+const Builder = require('./builder');
+const Parser = require('./parser');
+const verbose = false;
+const parser = new Parser({verbose});
+const builder = new Builder(process.argv.slice(2), parser);
+
+builder.buildComponents();
+
+// const componentsFileName = path.join(__dirname, '/components.json');
+// builder.writeToFile(componentsFileName);
+// builder.readFromFile(componentsFileName);
+
+const DOTbuilder = require('./DOTbuilder');
+dotBuilder = new DOTbuilder(builder);
+dotBuilder.buildDOTString();
+
+console.log(dotBuilder.getDOTString());

dependencies-graph/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "dependencies-graph-uilib",
+  "version": "0.0.1",
+  "description": "uilib dependencies graph generator",
+  "keywords": [
+    "eslint",
+    "dependencies",
+    "DOT"
+  ],
+  "author": "Michael Leib <[email protected]>",
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wix/react-native-ui-lib/blob/master/dependencies-graph/README.md"
+  },
+  "main": "index.js",
+  "scripts": {
+    "build": "node ./index.js ../src/components ../src/incubator ../lib"
+  },
+  "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.3.1",
+    "@typescript-eslint/parser": "^5.3.1",
+    "eslint": "6.8.0",
+    "prettier": "^3.2.5",
+    "prettier-eslint": "16.3.0",
+    "typescript": "4.9.5"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  }
+}