Adding types to mxgraph. (#182)

* adding typings and schemaDesigner

* Fixing typings

* Fixing build scripts and copying refernce to index.d.ts

* fixing dir paths

* Adding references to original typings repo and updating cd

* remove yarn

* fixing git ignore

* pushing package lock

* remove schemaDesigner code

* remove refs

* Fixing lint and adding ci pipeline

* Adding hello world example and switching to yarn

* Updating readme and ci cd

* updating pipelines

* Fixing examples

.github/workflows/cd.yml

@@ -25,12 +25,15 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '18'
+
+      - name: Install yarn
+        run: npm install -g yarn
 
       - name: Install Dependencies
-        run: npm install
+        run: yarn
 
-      - name: Run tsc
-        run: npx tsc
+      - name: Run build
+        run: yarn build
 
       - name: Generate release notes
         run: |
@@ -54,7 +57,7 @@ jobs:
           fi
 
       - name: Create npm package
-        run: npm pack
+        run: yarn pack
 
       - name: Checkout release branch
         uses: actions/checkout@v4

.github/workflows/ci.yml

@@ -0,0 +1,36 @@
+name: PR checks
+on:
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  checks:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+
+      - name: Install yarn
+        run: npm install -g yarn
+
+      - name: Install Dependencies
+        run: yarn
+
+      - name: Run build
+        run: yarn build
+
+      - name: Run lint
+        run: yarn lint

.gitignore

@@ -3,4 +3,5 @@ dist
 .jshintrc
 examples/**/dist
 .idea/
-*.tgz
+*.tgz
+.DS_Store

.npmignore

@@ -22,4 +22,5 @@ pom.xml
 target
 *.tgz
 .github/
-test/
+test/
+ts-examples/

README.md

@@ -5,7 +5,9 @@ azdataGraph is a derivative of mxGraph, which is a fully client side JavaScript
 
 This is a graph diagraming component developed for use in Azure Data Studio.
 
-For more information on mxGraph please see https://github.com/jgraph/mxgraph.
+For more information on mxGraph please see [mxgraph](https://github.com/jgraph/mxgraph)
+
+Typings for the mxGraph library are included in this package. The typings are forked from [typed-mxgraph](https://github.com/typed-mxgraph/typed-mxgraph)
 
 ## How to publish a new version of azdataGraph
 
@@ -17,12 +19,13 @@ For more information on mxGraph please see https://github.com/jgraph/mxgraph.
 
 ## To manually publish a new version of azdataGraph
 1. Clone the azdataGraph repository
-2. Make your changes
-3. Update the version number in the `package.json` file
-4. Run `npm install` to install the dependencies
-5. Run `npm pack` to create a tarball of the package
-6. Push the contents of the tarball to the release branch
-7. Create a new release in the Github UI
-8. Create a new tag with the version number and set the release branch as the target
-9. Publish the release
+1. Make your changes
+1. Update the version number in the `package.json` file
+1. Run `yarn` to install the dependencies
+1. Run `yarn build` to build the package
+1. Run `yarn pack` to create a tarball of the package
+1. Push the contents of the tarball to the release branch
+1. Create a new release in the Github UI
+1. Create a new tag with the version number and set the release branch as the target
+1. Publish the release
 

build.js

@@ -0,0 +1,102 @@
+const { typecheckPlugin } = require("@jgoz/esbuild-plugin-typecheck");
+const esbuild = require("esbuild");
+const fs = require("fs");
+const path = require("path");
+
+const config = {
+    entryPoints: ['./src/ts/index.ts'],
+    outfile: './dist/index.js',
+    bundle: true,
+    format: 'esm',
+    target: 'esnext',
+    sourcemap: true,
+    loader: {
+        ".ts": "ts",
+        ".css": "css",
+        ".gif": "dataurl",
+    },
+    plugins: [{
+        name: 'rebuild-notify',
+        setup(build) {
+            build.onEnd(result => {
+                console.log(`build ended with ${result.errors.length} errors`);
+                // HERE: somehow restart the server from here, e.g., by sending a signal that you trap and react to inside the server.
+            })
+        },
+    },
+    typecheckPlugin({
+        watch: process.argv.includes('--watch')
+    }),
+    ],
+};
+
+// check if watch is provided as an argument
+
+const run = async () => {
+    const ctx = await esbuild.context(config);
+    if (process.argv.includes('--watch')) {
+        console.log('Watching code');
+        await ctx.watch();
+    } else {
+        console.log('Building code');
+        await ctx.rebuild();
+        ctx.dispose();
+    }
+};
+
+run();
+
+function copyFilesRecursively(sourceDir, destDir) {
+    if (!fs.existsSync(sourceDir)) {
+        console.error(`Source directory "${sourceDir}" does not exist.`);
+        return;
+    }
+
+    // Ensure the destination directory exists
+    fs.mkdirSync(destDir, { recursive: true });
+
+    // Read all files and directories in the source directory
+    const items = fs.readdirSync(sourceDir);
+
+    items.forEach((item) => {
+        const sourcePath = path.join(sourceDir, item);
+        const destPath = path.join(destDir, item);
+
+        if (fs.statSync(sourcePath).isDirectory()) {
+            // If it's a directory, recursively copy its contents
+            copyFilesRecursively(sourcePath, destPath);
+        } else {
+            // If it's a file, copy it to the destination
+            fs.copyFileSync(sourcePath, destPath);
+            console.log(`Copied: ${sourcePath} -> ${destPath}`);
+        }
+    });
+}
+
+
+// Example usage
+const sourceFolder = path.resolve("src/ts/mxtypings");
+const destinationFolder = path.resolve("dist/src/ts/mxtypings");
+
+copyFilesRecursively(sourceFolder, destinationFolder);
+console.log("Copying complete!");
+
+// append text to top of a file
+
+const prependText = (filePath, text) => {
+    console.log(`Prepending ${text} to ${filePath}`);
+    const data = fs.readFileSync(filePath, 'utf8');
+    const fd = fs.openSync(filePath
+        , 'w+');
+    const insert = Buffer.from(text +
+        data);
+    fs.writeSync(fd, insert, 0, insert.length, 0);
+    fs.close(fd, (err) => {
+        if (err) {
+            console.error(err);
+            return;
+        }
+    });
+}
+
+prependText('./dist/src/ts/index.d.ts', `/// <reference path="./mxtypings/index.d.ts" />\n`);

eslint.config.mjs

@@ -0,0 +1,29 @@
+import licenseHeader from "eslint-plugin-license-header";
+import tseslint from 'typescript-eslint';
+
+export default [
+    {
+        files: ['src/ts/**/*.ts'],
+        ignores: ['src/ts/mxtypings/**/*.d.ts'],
+        languageOptions: {
+            parser: tseslint.parser,
+        },
+        plugins: {
+            'license-header': licenseHeader,
+        },
+        rules: {
+            "license-header/header": [
+                "error",
+                [
+                    "/*---------------------------------------------------------------------------------------------",
+                    " *  Copyright (c) Microsoft Corporation. All rights reserved.",
+                    " *  Licensed under the Source EULA.See License.txt in the project root for license information.",
+                    " * --------------------------------------------------------------------------------------------*/",
+                ]
+            ],
+            "no-var": "error",
+            "prefer-const": "error",
+            "eqeqeq": "error",
+        }
+    }
+];

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Examples</title>
+    </head>
+    <body>
+        <h1>Examples</h1>
+        <ul>
+            <li><a href="ts-examples/helloWorld.html">Hello World</a></li>
+        </ul>
+    </body>
+</html>