Better dual ESM/CJS support, tsconfig module now Node16, improved pnp…

…m support (#791)

Co-authored-by: James Hunt <[email protected]>

.github/workflows/codeql.yaml

@@ -13,12 +13,13 @@ name: "CodeQL"
 
 on:
     push:
-        branches: ["main", main*]
+        branches: [main, mainv2]
     pull_request:
         # The branches below must be a subset of the branches above
-        branches: ["main", "main*"]
+        branches: [main, mainv2]
     schedule:
         - cron: "0 2 * * 6"
+    workflow_dispatch:
 
 jobs:
     analyze:

.github/workflows/live-share-build-samples.yaml

@@ -5,6 +5,7 @@ on:
         branches: [main, mainv2]
     pull_request:
         branches: [main, mainv2]
+    workflow_dispatch:
 
 jobs:
     build:

.github/workflows/live-share-formatting.yaml

@@ -5,6 +5,7 @@ on:
         branches: [main, mainv2]
     pull_request:
         branches: [main, mainv2]
+    workflow_dispatch:
 
 jobs:
     build:

.github/workflows/live-share-test-packages.yaml

@@ -5,6 +5,7 @@ on:
         branches: [main, mainv2]
     pull_request:
         branches: [main, mainv2]
+    workflow_dispatch:
 
 jobs:
     build:
@@ -20,8 +21,7 @@ jobs:
               uses: actions/setup-node@v3
               with:
                   node-version: ${{ matrix.node-version }}
-            - run: npm install
-            - run: npm run build:packages
+            - run: npm install # install will trigger a build of all packages
 
             - name: "test live-share"
               run: npm run test

.github/workflows/live-share-test-usage.yaml

@@ -0,0 +1,41 @@
+name: Test Usage of Live Share SDK packages in different JS environments
+
+on:
+    push:
+        branches: [main, mainv2]
+    pull_request:
+        branches: [main, mainv2]
+    workflow_dispatch:
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+
+        strategy:
+            matrix:
+                node-version: [18.x]
+
+        steps:
+            - uses: actions/checkout@v3
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v3
+              with:
+                  node-version: ${{ matrix.node-version }}
+            - run: npm install # install will trigger a build of all packages
+
+            - name: "test live-share with cjs app"
+              run: npm run test
+              working-directory: internal/usage-test/cjs-test
+
+            - name: "test live-share with esm app"
+              run: npm run test
+              working-directory: internal/usage-test/esm-test
+
+            - uses: pnpm/action-setup@v4
+              name: Install pnpm for next step
+              with:
+                  version: 9
+                  run_install: false
+            - name: "test live-share with pnpm typescript esm app"
+              run: pnpm run test
+              working-directory: internal/usage-test/pnpm-test

.gitignore

@@ -367,4 +367,5 @@ docs/assets/main.js
 coverage/
 nyc/
 .nyc_output/
-build-data.json
+build-data.json
+tsconfig.tsbuildinfo

internal/build-tools/build-package.js

@@ -0,0 +1,55 @@
+/**
+ * Tool used to consolidate building package with different outputs of esm, cjs, or cjs with tests included.
+ * Invokation with all arguments looks like `node <path>/build-package.js --cjs --esm --test`
+ */
+
+const childProcess = require("child_process");
+const fs = require("fs");
+const { argv } = require("process");
+
+async function build(tsConfig) {
+    console.log(
+        "building",
+        process.env.PWD.substring(process.env.PWD.indexOf("packages")),
+        tsConfig
+    );
+    return new Promise((resolve, reject) => {
+        const buildProcess = childProcess.spawn(
+            "npx",
+            ["tsc", "-p", tsConfig],
+            {
+                shell: true,
+                stdio: "inherit",
+            }
+        );
+
+        buildProcess.on("close", (code) => {
+            if (code == 0) {
+                resolve();
+            } else {
+                reject(code);
+            }
+        });
+    });
+}
+
+function addCJSPackageJsonOverride(type) {
+    fs.writeFileSync(
+        `./bin/${type}/package.json`,
+        JSON.stringify({ type: "commonjs" })
+    );
+}
+
+const esmBuildTask = argv.includes("--esm")
+    ? build("tsconfig.json")
+    : Promise.resolve();
+
+const cjsBuildTask = argv.includes("--cjs")
+    ? build("tsconfig.cjs.json").then(() => addCJSPackageJsonOverride("cjs"))
+    : Promise.resolve();
+
+const testBuildTask = argv.includes("--test")
+    ? build("tsconfig.test.json").then(() => addCJSPackageJsonOverride("test"))
+    : Promise.resolve();
+
+Promise.all([esmBuildTask, cjsBuildTask, testBuildTask]);

internal/test-utils/package.json

@@ -24,29 +24,29 @@
         "tsc": "tsc"
     },
     "dependencies": {
-        "@fluid-experimental/attributor": "^2.0.0-rc.5.0.1",
-        "@fluid-experimental/sequence-deprecated": "^2.0.0-rc.5.0.1",
-        "@fluidframework/agent-scheduler": "^2.0.0-rc.5.0.1",
-        "@fluidframework/aqueduct": "^2.0.0-rc.5.0.1",
-        "@fluidframework/cell": "^2.0.0-rc.5.0.1",
-        "@fluidframework/container-loader": "^2.0.0-rc.5.0.1",
-        "@fluidframework/container-runtime": "^2.0.0-rc.5.0.1",
-        "@fluidframework/core-interfaces": "^2.0.0-rc.5.0.1",
-        "@fluidframework/core-utils": "^2.0.0-rc.5.0.1",
-        "@fluidframework/counter": "^2.0.0-rc.5.0.1",
-        "@fluidframework/datastore-definitions": "^2.0.0-rc.5.0.1",
-        "@fluidframework/driver-definitions": "^2.0.0-rc.5.0.1",
-        "@fluidframework/local-driver": "^2.0.0-rc.5.0.1",
-        "@fluidframework/map": "^2.0.0-rc.5.0.1",
-        "@fluidframework/matrix": "^2.0.0-rc.5.0.1",
-        "@fluidframework/ordered-collection": "^2.0.0-rc.5.0.1",
-        "@fluidframework/register-collection": "^2.0.0-rc.5.0.1",
-        "@fluidframework/runtime-definitions": "^2.0.0-rc.5.0.1",
-        "@fluidframework/sequence": "^2.0.0-rc.5.0.1",
+        "@fluid-experimental/attributor": "^2.0.0",
+        "@fluid-experimental/sequence-deprecated": "^2.0.0",
+        "@fluidframework/agent-scheduler": "^2.0.0",
+        "@fluidframework/aqueduct": "^2.0.0",
+        "@fluidframework/cell": "^2.0.0",
+        "@fluidframework/container-loader": "^2.0.0",
+        "@fluidframework/container-runtime": "^2.0.0",
+        "@fluidframework/core-interfaces": "^2.0.0",
+        "@fluidframework/core-utils": "^2.0.0",
+        "@fluidframework/counter": "^2.0.0",
+        "@fluidframework/datastore-definitions": "^2.0.0",
+        "@fluidframework/driver-definitions": "^2.0.0",
+        "@fluidframework/local-driver": "^2.0.0",
+        "@fluidframework/map": "^2.0.0",
+        "@fluidframework/matrix": "^2.0.0",
+        "@fluidframework/ordered-collection": "^2.0.0",
+        "@fluidframework/register-collection": "^2.0.0",
+        "@fluidframework/runtime-definitions": "^2.0.0",
+        "@fluidframework/sequence": "^2.0.0",
         "@fluidframework/server-local-server": "^5.0.0",
-        "@fluidframework/telemetry-utils": "^2.0.0-rc.5.0.1",
-        "@fluidframework/test-driver-definitions": "^2.0.0-rc.2.0.8",
-        "@fluidframework/test-utils": "^2.0.0-rc.5.0.1"
+        "@fluidframework/telemetry-utils": "^2.0.0",
+        "@fluid-internal/test-driver-definitions": "^2.0.0",
+        "@fluidframework/test-utils": "^2.0.0"
     },
     "devDependencies": {
         "@fluidframework/eslint-config-fluid": "^5.3.0",

internal/test-utils/src/localServerTestDriver.ts

@@ -11,7 +11,7 @@ import {
     ILocalDeltaConnectionServer,
     LocalDeltaConnectionServer,
 } from "@fluidframework/server-local-server";
-import { ITestDriver } from "@fluidframework/test-driver-definitions";
+import { ITestDriver } from "@fluid-internal/test-driver-definitions";
 import { LocalDriverApiType, LocalDriverApi } from "./localDriverApi.js";
 
 /**

internal/test-utils/tsconfig.json

@@ -69,7 +69,7 @@
         "skipLibCheck": true /* Skip type checking of declaration files. */,
         "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
     },
-    "exclude": ["build", "dist", "node_modules"],
+    "exclude": ["bin", "node_modules"],
     "include": ["test/**/*.ts"],
     "files": ["src/index.ts"]
 }

internal/usage-test/.gitignore

@@ -0,0 +1,3 @@
+# lock files not needed for usage tests
+pnpm-lock.yaml
+package-lock.json

internal/usage-test/cjs-test/.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

internal/usage-test/cjs-test/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "live-share-cjs-test",
+    "version": "1.0.0",
+    "description": "",
+    "main": "src/index.js",
+    "type": "commonjs",
+    "scripts": {
+        "test": "npm install && node src/index.js"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+        "@microsoft/live-share": "file:/../../../packages/live-share",
+        "fluid-framework": "^2.0.0"
+    },
+    "devDependencies": {
+        "@fluidframework/test-runtime-utils": "^2.0.0"
+    }
+}

internal/usage-test/cjs-test/src/index.js

@@ -0,0 +1,19 @@
+const { LiveShareClient, TestLiveShareHost } = require("@microsoft/live-share");
+const { waitForDelay } = require("@microsoft/live-share/internal");
+
+const client = new LiveShareClient(TestLiveShareHost.create());
+const canUseLiveShare = client !== undefined;
+const canUseLiveShareInternal = waitForDelay(10) !== undefined;
+
+if (!canUseLiveShare) {
+    process.exit(1);
+}
+
+if (!canUseLiveShareInternal) {
+    process.exit(2);
+}
+
+console.log("client", client);
+console.log(
+    "Sucessfully imported and able to use Live Share package in cjs project"
+);

internal/usage-test/esm-test/.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

internal/usage-test/esm-test/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "live-share-esm-test",
+    "version": "1.0.0",
+    "description": "",
+    "main": "src/index.js",
+    "type": "module",
+    "scripts": {
+        "test": "npm install && node src/index.js"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+        "@microsoft/live-share": "file:/../../../packages/live-share",
+        "fluid-framework": "^2.0.0"
+    },
+    "devDependencies": {
+        "@fluidframework/test-runtime-utils": "^2.0.0"
+    }
+}

internal/usage-test/esm-test/src/index.js

@@ -0,0 +1,19 @@
+import { LiveShareClient, TestLiveShareHost } from "@microsoft/live-share";
+import { waitForDelay } from "@microsoft/live-share/internal";
+
+const client = new LiveShareClient(TestLiveShareHost.create());
+const canUseLiveShare = client !== undefined;
+const canUseLiveShareInternal = waitForDelay(10) !== undefined;
+
+if (!canUseLiveShare) {
+    process.exit(1);
+}
+
+if (!canUseLiveShareInternal) {
+    process.exit(2);
+}
+
+console.log("client", client);
+console.log(
+    "Sucessfully imported and able to use Live Share package in esm project"
+);

internal/usage-test/pnpm-test/.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

internal/usage-test/pnpm-test/package.json

@@ -0,0 +1,22 @@
+{
+    "name": "live-share-pnpm-test",
+    "version": "1.0.0",
+    "description": "",
+    "main": "bin/index.js",
+    "type": "module",
+    "scripts": {
+        "test": "pnpm install && pnpm run build && node bin/index.js",
+        "build": "tsc -p tsconfig.json"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+        "@microsoft/live-share": "file:/../../../packages/live-share",
+        "fluid-framework": "^2.0.0"
+    },
+    "devDependencies": {
+        "@fluidframework/test-runtime-utils": "^2.0.0",
+        "@types/node": "^20.14.14"
+    }
+}

internal/usage-test/pnpm-test/src/index.ts

@@ -0,0 +1,19 @@
+import { LiveShareClient, TestLiveShareHost } from "@microsoft/live-share";
+import { waitForDelay } from "@microsoft/live-share/internal";
+
+const client = new LiveShareClient(TestLiveShareHost.create());
+const canUseLiveShare = client !== undefined;
+const canUseLiveShareInternal = waitForDelay(10) !== undefined;
+
+if (!canUseLiveShare) {
+    process.exit(1);
+}
+
+if (!canUseLiveShareInternal) {
+    process.exit(2);
+}
+
+console.log("client", client);
+console.log(
+    "Sucessfully imported and able to use Live Share package in pnpm typescript esm project"
+);

internal/usage-test/pnpm-test/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "module": "Node16",
+        "moduleResolution": "Node16",
+        "outDir": "./bin",
+        "rootDir": "./src",
+        "composite": true,
+        "declaration": true,
+        "declarationMap": true,
+        "esModuleInterop": true,
+        "incremental": true,
+        "inlineSources": true,
+        "jsx": "react",
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "noImplicitAny": false,
+        "noUnusedLocals": true,
+        "pretty": true,
+        "sourceMap": true,
+        "strict": true,
+        "target": "ES2020",
+        "types": ["node"],
+        "skipLibCheck": true
+    },
+    "files": ["src/index.ts"]
+}