Fix plugin pkg tsconfig (rancher#6930)

* Fix pkg tsconfig

* Ensure test package is removed

* Fix package versions

* Add update package and refine typescript configuration

* Fix lint issues

* Fix issues with creators

* Install dependencies

* Fix e2e

* Include components for standalone app build

* Fix issue with yarn linking shell

* Fix for yarn linking

* Fix for lstat on non-existing file

* Fix lint issue when running with yarn link

* Update TextAreaAutoGrow.vue

* Fix test script build

* Fix test script issue

* Fix script on mac

.eslintignore

@@ -19,6 +19,7 @@ assets/fonts
 shell/pkg/import.js
 pkg/rancher-components/
 shell/rancher-components/
+shell/types/shell/index.d.ts
 dist/
 coverage/
 build/

.gitignore

@@ -100,12 +100,14 @@ storybook-static/
 
 # Packages
 dist-pkg
+tmp
 
 # Others
 .todo
 
 # Plugins - temporary
 shell/rancher-components
+shell/types/shell
 
 # standalone script
 scripts/standalone/ui

shell/creators/app/app.package.json

@@ -5,5 +5,8 @@
   "engines": {
     "node": ">=12"
   },
-  "dependencies": {}
+  "dependencies": {},
+  "resolutions": {
+    "**/webpack": "4"
+  }  
 }

shell/creators/app/tsconfig.json → shell/creators/app/files/tsconfig.json

@@ -33,7 +33,8 @@
       "@types/node",
       "@nuxt/types",
       "cypress",
-      "rancher"
+      "rancher",
+      "shell"
     ]
   },
   "exclude": [

shell/creators/app/init

@@ -1,13 +1,12 @@
 #!/usr/bin/env node
 
-const fs = require('fs-extra');
 const path = require('path');
-const exec = require('child_process').exec;
+const fs = require('fs-extra');
 
 const targets = {
-  'dev': './node_modules/.bin/nuxt dev',
-  'nuxt': './node_modules/.bin/nuxt',
-  'build': './node_modules/.bin/nuxt build'
+  dev:   './node_modules/.bin/nuxt dev',
+  nuxt:  './node_modules/.bin/nuxt',
+  build: './node_modules/.bin/nuxt build'
 };
 
 const files = [
@@ -30,8 +29,8 @@ if (args.length == 3) {
   const folder = path.resolve('.');
 
   appFolder = path.join(folder, name);
-  console.log(`  Creating application folder: ${ appFolder}`);
-  fs.ensureDirSync(appFolder);  
+  console.log(`  Creating application folder: ${ appFolder }`);
+  fs.ensureDirSync(appFolder);
 }
 
 // Check that there is a package file
@@ -71,18 +70,23 @@ const creatorPkgData = fs.readFileSync(path.join(__dirname, 'package.json'));
 const creatorPkg = JSON.parse(creatorPkgData);
 
 pkg.dependencies['@rancher/shell'] = `^${ creatorPkg.version }`;
-pkg.dependencies['core-js'] = '^3.20.3';
-pkg.dependencies['css-loader'] = '4.3.0';
+
+// Rest of dependencies are in the _pkgs property of package.json - copy then across
+if (creatorPkg._pkgs) {
+  Object.keys(creatorPkg._pkgs).forEach((pkgName) => {
+    pkg.dependencies[pkgName] = creatorPkg._pkgs[pkgName];
+  });
+}
 
 fs.writeFileSync(path.join(appFolder, 'package.json'), JSON.stringify(pkg, null, 2));
 
 // Copy base files
 files.forEach((file) => {
-  const src = path.join(__dirname, file);
+  const src = path.join(__dirname, 'files', file);
   const dest = path.join(appFolder, file);
 
   if (!fs.existsSync(dest)) {
-    console.log('  Adding file: ' + file);
+    console.log(`  Adding file: ${ file }`);
 
     const folder = path.dirname(file);
 
@@ -93,9 +97,4 @@ files.forEach((file) => {
   }
 });
 
-// require("child_process").spawn('yarn', ['install'], {
-//   cwd: process.cwd(),
-//   stdio: "inherit"
-// });
-
-console.log('');
+console.log('');

shell/creators/app/package.json

@@ -7,12 +7,18 @@
   "private": false,
   "bin": "./init",
   "files": [
-    "*.*",
+    "**/*.*",
     "init"
   ],
   "engines": {
     "node": ">=12"
   },
+  "_requires": [
+    "core-js",
+    "css-loader",
+    "@types/lodash",
+    "@rancher/components"
+  ],
   "dependencies": {
     "fs-extra": "^10.0.0"
   }

shell/creators/pkg/tsconfig.json → shell/creators/pkg/files/tsconfig.json

@@ -16,12 +16,16 @@
     "typeRoots": [
       "../../node_modules",
       "../../node_modules/@rancher/shell/types"
-    ],
+    ],    
     "types": [
       "node",
       "webpack-env",
+      "@types/node",
+      "@types/jest",
+      "@types/lodash",
       "@nuxt/types",
-      "rancher"
+      "rancher",
+      "shell"
     ],
     "lib": [
       "esnext",
@@ -30,24 +34,21 @@
       "scripthost"
     ],
     "paths": {
-      "@shell/core/*": [
-        "../../node_modules/@rancher/shell/core/*"
-      ],
-      "@shell/config/*": [
-        "../../node_modules/@rancher/shell/config/*"
+      "@shell/*": [
+        "../../node_modules/@rancher/shell/*"
       ],
-      "@shell/store/*": [
-        "../../node_modules/@rancher/shell/store/*"
+      "@components/*": [
+        "@rancher/components/*"
       ]
     }
   },
   "include": [
     "**/*.ts",
+    "**/*.d.ts",
     "**/*.tsx",
-    "**/*.vue",
-    "../../node_modules/@rancher/shell/core/types.ts"
+    "**/*.vue"
   ],
   "exclude": [
-    "node_modules"
+    "../../node_modules"
   ]
 }

shell/creators/pkg/init

@@ -95,7 +95,7 @@ if (addTypeFolders) {
 
 // Copy base files
 files.forEach((file) => {
-  const src = path.join(__dirname, file);
+  const src = path.join(__dirname, 'files', file);
   const dest = path.join(path.join(pkgFolder, file));
 
   if (!fs.existsSync(dest)) {

shell/creators/pkg/package.json

@@ -7,7 +7,7 @@
   "private": false,
   "bin": "./init",
   "files": [
-    "*.*",
+    "**/*.*",
     "init"
   ],
   "engines": {

shell/creators/update/init

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+
+const path = require('path');
+const fs = require('fs-extra');
+const { spawnSync } = require('child_process');
+
+const scriptFolder = __dirname;
+const dest = path.resolve('.');
+
+// Remove first two args
+let args = process.argv;
+args.splice(0, 2);
+
+const res = spawnSync(`${__dirname}/upgrade`, args, {
+  cwd: dest,
+  shell: false,
+  stdio: [ 'ignore', process.stdout, process.stderr ],
+});
+
+if (res.status !== 0) {
+  process.exit(res.status);
+}
+
+// Read the existing package.json
+let rawdata = fs.readFileSync(path.join(dest, 'package.json'));
+const appPackage = JSON.parse(rawdata);
+
+// Read the package.json from the app creator
+rawdata = fs.readFileSync(path.join(scriptFolder, 'app', 'package.json'));
+const latestPackage = JSON.parse(rawdata);
+
+// Read the package.json from the upgrade creator
+rawdata = fs.readFileSync(path.join(scriptFolder, 'package.json'));
+const upgradePackage = JSON.parse(rawdata);
+
+// Update dependency versions to match the latest from the creator
+Object.keys(latestPackage._pkgs).forEach((key) => {
+  appPackage.dependencies[key] = latestPackage._pkgs[key];
+});
+
+// Add in the weback resolution
+appPackage.resolutions = appPackage.resolutions || {};
+appPackage.resolutions['**/webpack'] = '4';
+
+// Update the version of @rancher/shell
+const shellVersion = upgradePackage.version;
+
+appPackage.dependencies['@rancher/shell'] = shellVersion;
+
+fs.writeFileSync(path.join(dest, 'package.json'), JSON.stringify(appPackage, null, 2) + '\n');
+
+spawnSync(`yarn`, ['install'], {
+  cwd: dest,
+  shell: false,
+  stdio: [ 'ignore', process.stdout, process.stderr ],
+});

shell/creators/update/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@rancher/create-update",
+  "description": "Rancher UI Update helper",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "author": "SUSE",
+  "private": false,
+  "bin": "./init",
+  "files": [
+    "**/*.*",
+    "init",
+    "upgrade"
+  ],
+  "engines": {
+    "node": ">=12"
+  },
+  "dependencies": {
+    "fs-extra": "^10.0.0"
+  }
+}

shell/creators/update/upgrade

@@ -0,0 +1,56 @@
+#!/usr/bin/env sh
+
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+
+echo "Upgrading Rancher Shell"
+
+# Get the version number from the package.json file
+VERSION=$(node -p -e "require('${SCRIPT_DIR}/package.json').version")
+
+echo "Updating to version: ${VERSION}"
+echo ""
+
+FORCE="false"
+
+if [ "$1" == "-f" ]; then
+  FORCE="true"
+fi
+
+# Check for a clean git repository
+if [ ! -d ".git" ] && [ "${FORCE}" == "false" ]; then
+  echo "Not runnning in a git repository. Re-run with -f to ignore this check"
+  echo "Note: This action will update yuor files - running in a git repsository will ensure you have visibility over changes made"
+  exit 1 
+fi
+
+if [[ $(git diff --stat) != '' ]] && [ "${FORCE}" == "false" ]; then
+  echo "Git repository is not clean. Re-run with -f to ignore this check"
+  echo "Note: This action will update yuor files - running in a clean git repsository will ensure you have visibility over changes made"
+  exit 1 
+fi
+
+# Check this is a Rancher Extension
+if [ ! -f "./package.json" ]; then
+  echo "Can't find package.json - check you're running from the correct folder"
+  exit 1 
+fi
+
+HAS_SHELL=$(grep "\"@rancher/shell\"" package.json -c )
+if [ "${HAS_SHELL}" != "1" ]; then
+  echo "package.json does not reference @rancher/shell - check you're running from the correct folder"
+  exit 1 
+fi
+
+# Copy files for the top-level folder (from the app creator)
+rsync --exclude nuxt.config.js ${SCRIPT_DIR}/app/files/* .
+
+# Go through each folder in the pkg folder and update their files
+for pkg in ./pkg/*
+do
+  if [ -d "${pkg}" ]; then
+    pkgName=$(basename $pkg)
+    echo "Updating package ${pkgName}"
+
+    cp ${SCRIPT_DIR}/pkg/files/* ${pkg}
+  fi
+done

shell/nuxt.config.js

@@ -38,7 +38,7 @@ const perfTest = (process.env.PERF_TEST === 'true'); // Enable performance testi
 // 1 = Skip browser check
 // 2 = Do not skip any checks
 const skipEsLintCheckStr = (process.env.SKIP_ESLINT || '');
-const skipEsLintCheck = parseInt(skipEsLintCheckStr, 10) || 2;
+let skipEsLintCheck = parseInt(skipEsLintCheckStr, 10) || 2;
 
 // ===============================================================================================
 // Nuxt configuration
@@ -55,6 +55,21 @@ export default function(dir, _appConfig) {
   let COMPONENTS_DIR = path.join(SHELL_ABS, 'rancher-components');
   let typescript = {};
 
+  if (fs.existsSync(SHELL_ABS)) {
+    const stat = fs.lstatSync(SHELL_ABS);
+
+    // If @rancher/shell is a symlink, then use the components folder for it
+    if (stat.isSymbolicLink()) {
+      const REAL_SHELL_ABS = fs.realpathSync(SHELL_ABS); // In case the shell is being linked via 'yarn link'
+
+      COMPONENTS_DIR = path.join(REAL_SHELL_ABS, '..', 'pkg', 'rancher-components', 'src', 'components');
+
+      // For now, skip eslint check when being linked via yarn link - pkg folder is linked otherwise
+      // This will change when we remove nuxt
+      skipEsLintCheck = true;
+    }
+  }
+
   // If we have a local folder named 'shell' then use that rather than the one in node_modules
   // This will be the case in the main dashboard repository.
   if (fs.existsSync(path.join(dir, 'shell'))) {

shell/pkg/vue.config.js

@@ -11,6 +11,15 @@ module.exports = function(dir) {
   const SHELL = path.join(dir, '.shell');
   let COMPONENTS_DIR = path.join(SHELL, 'rancher-components');
 
+  const stat = fs.lstatSync(SHELL);
+
+  // If @rancher/shell is a symlink, then use the components folder for it
+  if (stat.isSymbolicLink() && !fs.existsSync(COMPONENTS_DIR)) {
+    const REAL_SHELL = fs.realpathSync(SHELL);
+
+    COMPONENTS_DIR = path.join(REAL_SHELL, '..', 'pkg', 'rancher-components', 'src', 'components');
+  }
+
   if (fs.existsSync(path.join(maindir, 'shell'))) {
     COMPONENTS_DIR = path.join(maindir, 'pkg', 'rancher-components', 'src', 'components');
   }