feat(add-angular-to-qwik): create the package

package.json

@@ -13,10 +13,14 @@
     "@nx/linter": "16.5.0",
     "@nx/vite": "16.5.0",
     "@nx/workspace": "16.5.0",
+    "@swc/cli": "~0.1.62",
+    "@swc/core": "~1.3.51",
     "@types/node": "^18.16.1",
+    "@types/yargs": "^17.0.24",
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@typescript-eslint/parser": "^5.60.1",
     "@vitest/ui": "~0.32.0",
+    "chalk": "^4.1.2",
     "eslint": "~8.15.0",
     "eslint-config-prettier": "8.1.0",
     "eslint-plugin-qwik": "~1.2.6",
@@ -34,9 +38,13 @@
     "vite": "~4.4.0",
     "vite-plugin-dts": "~2.3.0",
     "vite-tsconfig-paths": "~4.2.0",
-    "vitest": "~0.32.0"
+    "vitest": "~0.32.0",
+    "yargs": "^17.7.2"
   },
   "nx": {
     "includedScripts": []
+  },
+  "dependencies": {
+    "@swc/helpers": "~0.5.0"
   }
 }

packages/add-angular-to-qwik/.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../.eslintrc",
+  "rules": {},
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/add-angular-to-qwik/README.md

@@ -0,0 +1,7 @@
+# add-angular-to-qwik
+
+## What is It?
+
+This is a simple utility package that allows runs an integration to add Angular to your existing Qwik application.
+
+Run `npx add-angular-to-qwik@latest` to try it out!

packages/add-angular-to-qwik/bin/add-angular-to-qwik.ts

@@ -0,0 +1,142 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import * as yargs from 'yargs';
+import * as chalk from 'chalk';
+
+import { CreateWorkspaceOptions } from 'create-nx-workspace/';
+import {
+  getPackageManagerCommand,
+  detectPackageManager,
+} from 'nx/src/utils/package-manager';
+import { output } from 'create-nx-workspace/src/utils/output';
+import { readFileSync, unlinkSync, writeFileSync } from 'fs';
+import { execSync } from 'child_process';
+
+interface Arguments extends CreateWorkspaceOptions {
+  installMaterialExample: boolean;
+}
+
+export const commandsObject: yargs.Argv<Arguments> = yargs
+  .wrap(yargs.terminalWidth())
+  .parserConfiguration({
+    'strip-dashed': true,
+    'dot-notation': true,
+  })
+  .command<Arguments>(
+    // this is the default and only command
+    '$0 [options]',
+    'Add Angular to the Qwik workspace',
+    (yargs) => [
+      yargs.option('installMaterialExample', {
+        describe: chalk.dim`Add dependencies for the Angular Material and qwikified example component, that uses it`,
+        type: 'boolean',
+      }),
+    ],
+
+    async (argv: yargs.ArgumentsCamelCase<Arguments>) => {
+      await main(argv).catch((error) => {
+        const { version } = require('../package.json');
+        output.error({
+          title: `Something went wrong! v${version}`,
+        });
+        throw error;
+      });
+    }
+  )
+  .help('help', chalk.dim`Show help`)
+  .version(
+    'version',
+    chalk.dim`Show version`,
+    require('../package.json').version
+  ) as yargs.Argv<Arguments>;
+
+async function main(parsedArgs: yargs.Arguments<Arguments>) {
+  let isQwikNxInstalled = false;
+  const pm = getRelevantPackageManagerCommand();
+
+  output.log({
+    title: `Adding Angular to your workspace.`,
+    bodyLines: [
+      'To make sure the command works reliably in all environments, and that the integration is applied correctly,',
+      `We will run "${pm.install}" several times. Please wait.`,
+    ],
+  });
+
+  try {
+    // letting Nx think that's an Nx repo
+    writeFileSync(
+      'project.json',
+      JSON.stringify({
+        name: 'temp-project',
+        sourceRoot: 'src',
+        projectType: 'application',
+        targets: {},
+      })
+    );
+
+    isQwikNxInstalled = checkIfPackageInstalled('qwik-nx');
+
+    if (!isQwikNxInstalled) {
+      execSync(`${pm.add} qwik-nx@latest nx@latest`, { stdio: [0, 1, 2] });
+    }
+    const installMaterialExample = parsedArgs['installMaterialExample'];
+    const installMaterialExampleFlag =
+      installMaterialExample === true || installMaterialExample === false
+        ? `--installMaterialExample=${parsedArgs['installMaterialExample']}`
+        : undefined;
+
+    const cmd = [
+      'npx nx g qwik-nx:angular-in-app',
+      '--project=temp-project',
+      installMaterialExampleFlag,
+      '--skipFormat',
+    ].filter(Boolean);
+    execSync(cmd.join(' '), { stdio: [0, 1, 2] });
+  } catch (error) {
+    output.error({
+      title: 'Failed to add angular to your repo',
+      bodyLines: ['Reverting changes.', 'See original printed error above.'],
+    });
+    cleanup(isQwikNxInstalled, pm.uninstall);
+    process.exit(1);
+  }
+
+  cleanup(isQwikNxInstalled, pm.uninstall);
+
+  output.log({
+    title: `Successfully added Angular integration to your repo`,
+  });
+}
+
+function checkIfPackageInstalled(pkg: string): boolean {
+  const packageJson = JSON.parse(readFileSync('package.json', 'utf-8'));
+  return (
+    !!packageJson['dependencies']?.[pkg] ||
+    !!packageJson['devDependencies']?.[pkg]
+  );
+}
+
+function getRelevantPackageManagerCommand() {
+  const pm = detectPackageManager();
+  const pmc = getPackageManagerCommand(pm);
+  let uninstall: string;
+  if (pm === 'npm') {
+    uninstall = 'npm uninstall';
+  } else if (pm === 'yarn') {
+    uninstall = 'yarn remove';
+  } else {
+    uninstall = 'pnpm remove';
+  }
+
+  return {
+    install: pmc.install,
+    add: pmc.add,
+    uninstall,
+  };
+}
+
+function cleanup(isQwikNxInstalled: boolean, uninstallCmd: string) {
+  unlinkSync('project.json');
+  if (!isQwikNxInstalled) {
+    execSync(`${uninstallCmd} qwik-nx nx`, { stdio: [0, 1, 2] });
+  }
+}

packages/add-angular-to-qwik/bin/index.ts

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+import { commandsObject } from './add-angular-to-qwik';
+
+commandsObject.argv;

packages/add-angular-to-qwik/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  transform: {
+    '^.+\\.[tj]sx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
+  globals: { 'ts-jest': { tsconfig: '<rootDir>/tsconfig.spec.json' } },
+  displayName: 'add-angular-to-qwik',
+  testEnvironment: 'node',
+  preset: '../../jest.preset.js',
+};

packages/add-angular-to-qwik/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "add-angular-to-qwik",
+  "version": "0.1.3",
+  "private": false,
+  "description": "Adds Angular to the Qwik repo",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/QwikDev/qwik-angular.git",
+    "directory": "packages/add-angular-to-qwik"
+  },
+  "keywords": [
+    "Qwik",
+    "Angular",
+    "Web",
+    "CLI"
+  ],
+  "bin": {
+    "add-angular-to-qwik": "./bin/index.js"
+  },
+  "author": "Dmitriy Stepanenko",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/QwikDev/qwik-angular/issues"
+  },
+  "homepage": "https://github.com/QwikDev/qwik-angular",
+  "peerDependencies": {
+    "qwik-nx": "^1.0.9"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
+}

packages/add-angular-to-qwik/project.json

@@ -0,0 +1,103 @@
+{
+  "name": "add-angular-to-qwik",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/add-angular-to-qwik",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/add-angular-to-qwik",
+        "main": "packages/add-angular-to-qwik/bin/add-angular-to-qwik.ts",
+        "tsConfig": "packages/add-angular-to-qwik/tsconfig.lib.json",
+        "assets": [
+          "packages/add-angular-to-qwik/README.md",
+          {
+            "input": "packages/add-angular-to-qwik",
+            "glob": "**/files/**",
+            "output": "/"
+          },
+          {
+            "input": "packages/add-angular-to-qwik",
+            "glob": "**/files/**/.gitkeep",
+            "output": "/"
+          },
+          {
+            "input": "packages/add-angular-to-qwik",
+            "glob": "**/*.json",
+            "ignore": ["**/tsconfig*.json", "project.json", ".eslintrc.json"],
+            "output": "/"
+          },
+          {
+            "input": "packages/add-angular-to-qwik",
+            "glob": "**/*.js",
+            "ignore": ["**/jest.config.js"],
+            "output": "/"
+          },
+          {
+            "input": "packages/add-angular-to-qwik",
+            "glob": "**/*.d.ts",
+            "output": "/"
+          },
+          {
+            "input": "",
+            "glob": "LICENSE",
+            "output": "/"
+          }
+        ],
+        "updateBuildableProjectDepsInPackageJson": true
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "options": {
+        "lintFilePatterns": [
+          "packages/add-angular-to-qwik/**/*.ts",
+          "packages/add-angular-to-qwik/**/*.spec.ts",
+          "packages/add-angular-to-qwik/**/*_spec.ts",
+          "packages/add-angular-to-qwik/**/*.spec.tsx",
+          "packages/add-angular-to-qwik/**/*.spec.js",
+          "packages/add-angular-to-qwik/**/*.spec.jsx",
+          "packages/add-angular-to-qwik/**/*.d.ts"
+        ]
+      },
+      "outputs": ["{options.outputFile}"]
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {}
+    },
+    "version-publish": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "noVerify": true,
+        "push": false,
+        "releaseAs": "patch",
+        "postTargets": [
+          "add-angular-to-qwik:publish",
+          "add-angular-to-qwik:push-to-github"
+        ]
+      }
+    },
+    "publish": {
+      "executor": "ngx-deploy-npm:deploy",
+      "options": {
+        "access": "public"
+      },
+      "configurations": {
+        "local": {
+          "registry": "http://localhost:4873"
+        }
+      }
+    },
+    "push-to-github": {
+      "executor": "@jscutlery/semver:github",
+      "options": {
+        "tag": "${tag}",
+        "notes": "${notes}"
+      }
+    }
+  },
+  "implicitDependencies": []
+}

packages/add-angular-to-qwik/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["node", "jest"],
+    "strict": true
+  },
+  "include": [],
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

packages/add-angular-to-qwik/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*_spec.ts",
+    "**/*_test.ts",
+    "jest.config.ts"
+  ],
+  "include": ["**/*.ts", "package.json", "bin/add-angular-to-qwik.ts"]
+}