Task; extract and create npm package

[thewahome]

Overview

• Extracts the npm package code into its own folder inside the vscode folder.
• Adds pipeline changes to generate both the package and vsix in the GitHub actions
• Adds pipeline changes to deploy the npm package to npm

Folder Visualisation

vscode
├── microsoft-kiota/
├── npm-package/
│ ├── lib/
│ │ ├── generateClient.ts
│ │ ├── generatePlugin.ts
│ │ └── ...
│ ├── tests/
│ │ ├── generateClient.spec.ts
│ │ └── ...
│ ├── connect.ts
│ ├── install.ts
│ ├── ...
│ ├── runtime.json
│ ├── readme.md
│ └── index.ts
├── node_modules/
├── ...
├── lerna.json
└── package.json

Testing the npm package

1. Package the Kiota npm package. It should generate a .tgz file microsoft-kiota-1.0.0.tgz.

cd vscode/npm-package
npm pack

2. Create a new directory for your project and navigate into it:
   Initialize a new Node.js project. The default is (commonjs), but you can change it later to ES6 modules by setting "module": "ES6" in your tsconfig.json file and reinstall the kiota npm package

mkdir use-kiota
cd use-kiota
npm init -y
npm install typescript @types/node --save-dev
npm install 'path/to/microsoft-kiota-1.0.0.tgz'
npx tsc --init
code .

3. Create a new file named index.ts at the root of the project and add the following code:

import { getKiotaVersion } from '@microsoft/kiota';
const getVersion = async () => {
  const version = await getKiotaVersion();
  console.log(version);
}
console.log("Hello, World!");
getVersion();

4. Run the TypeScript compiler to compile your index.ts file into JavaScript and run the compiled code:

npx tsc
node index.js

The expected result is:

Hello, World!
1.23.0

[baywet]

we'll need additional steps to publish the package as well.

[baywet]

should we also add the microsoft graph eslint configuration? (see kiota-typescript or graph TS)

[baywet]

I think the need to match what's in the package.json name. Aslo using more explicit names would probably help people running the commands

[thewahome]

I tried this... it uses the folder name not the name of the package.

Also what would be the names we would give? Plus it would increase the number of code changes to rename the folders

[garethj-msft]

Put a few structural comments in

[garethj-msft]

FIlename snake case?

[garethj-msft]

I don't feel like the npm-package folder should live under vscode as it should have no dependencies on vscode

[thewahome]

Would another location allow the extension to share the npm-package from elsewhere?

[garethj-msft]

I think the general pattern is to create a kind of fake minimal package at the top level to define the workspace

[sonarqubecloud]

Quality Gate failed for 'kiota'

Failed conditions
2 Security Hotspots
0.0% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud