Provide different layers' APIs to describeCompat suites

examples/data-objects/table-document/.eslintrc.js

@@ -11,4 +11,16 @@ module.exports = {
 	rules: {
 		"@typescript-eslint/strict-boolean-expressions": "off",
 	},
+	overrides: [
+		{
+			// Rules only for test files
+			files: ["*.spec.ts", "src/test/**"],
+			rules: {
+				// ESLint's resolver doesn't resolve relative imports of ESNext modules correctly, since
+				// it resolves the path relative to the .ts file (and assumes a file with a .js extension
+				// should exist there)
+				"import/no-unresolved": ["error", { ignore: ["^\\.(.*)\\.js$"] }],
+			},
+		},
+	],
 };

examples/data-objects/table-document/README.md

@@ -20,3 +20,4 @@ For example, to support a feature like simple user attribution, the app can appe
 
 Being an example, this package should have `private: true` in `package.json` but alas there's one consumer of Fluid
 taking a dependency on it, so we can't do that yet.
+Once it can be converted, or once that consumer confirms they don't need both ESNext and CommonJS modules, it should also drop the CommonJS build (this has already been done for the package's tests, but not its public API).

examples/data-objects/table-document/src/test/.mocharc.js

@@ -7,6 +7,6 @@
 
 const packageDir = `${__dirname}/../..`;
 
-const getFluidTestMochaConfig = require("@fluid-internal/test-version-utils/mocharc-common.js");
+const getFluidTestMochaConfig = require("@fluid-internal/test-version-utils/mocharc-common.cjs");
 const config = getFluidTestMochaConfig(packageDir);
 module.exports = config;

examples/data-objects/table-document/src/test/table.spec.ts → examples/data-objects/table-document/src/test/table.spec.mts

@@ -7,9 +7,9 @@ import { strict as assert } from "assert";
 import { requestFluidObject } from "@fluidframework/runtime-utils";
 import { ITestObjectProvider } from "@fluidframework/test-utils";
 import { describeLoaderCompat } from "@fluid-internal/test-version-utils";
-import { TableDocument } from "../document";
-import { TableSlice } from "../slice";
-import { TableDocumentItem } from "../table";
+import { TableDocument } from "../document.js";
+import { TableSlice } from "../slice.js";
+import { TableDocumentItem } from "../table.js";
 
 describeLoaderCompat("TableDocument", (getTestObjectProvider) => {
 	let tableDocument: TableDocument;

examples/data-objects/table-document/src/test/tableWithInterception.spec.ts → examples/data-objects/table-document/src/test/tableWithInterception.spec.mts

@@ -9,9 +9,9 @@ import { IFluidDataStoreContext } from "@fluidframework/runtime-definitions";
 import { requestFluidObject } from "@fluidframework/runtime-utils";
 import { ITestObjectProvider } from "@fluidframework/test-utils";
 import { describeLoaderCompat } from "@fluid-internal/test-version-utils";
-import { ITable } from "../table";
-import { TableDocument } from "../document";
-import { createTableWithInterception } from "../interception";
+import { ITable } from "../table.js";
+import { TableDocument } from "../document.js";
+import { createTableWithInterception } from "../interception/index.js";
 
 describeLoaderCompat("Table Document with Interception", (getTestObjectProvider) => {
 	describe("Simple User Attribution", () => {

examples/data-objects/table-document/src/test/tsconfig.json

@@ -6,6 +6,7 @@
 		"types": ["node", "mocha"],
 		"declaration": false,
 		"declarationMap": false,
+		"module": "esnext",
 	},
 	"include": ["./**/*"],
 	"references": [

examples/data-objects/webflow/.eslintrc.js → examples/data-objects/webflow/.eslintrc.cjs

@@ -12,6 +12,10 @@ module.exports = {
 		"max-len": "off",
 		"no-bitwise": "off",
 		"no-case-declarations": "off",
+		// ESLint's resolver doesn't resolve relative imports of ESNext modules correctly, since
+		// it resolves the path relative to the .ts file (and assumes a file with a .js extension
+		// should exist there)
+		"import/no-unresolved": ["error", { ignore: ["^\\.(.*)\\.js$"] }],
 	},
 	parserOptions: {
 		project: ["./tsconfig.json", "./src/test/tsconfig.json"],

examples/data-objects/webflow/ignore-loader.mjs

@@ -0,0 +1,20 @@
+const extensionsRegex = /\.css$/;
+
+/**
+ * This uses the node loader API (see https://nodejs.org/docs/latest-v16.x/api/esm.html#loaders)
+ * to enable webpack-style imports of .css modules.
+ *
+ * This is the recommended successor to `require.extensions`, which was used by https://www.npmjs.com/package/ignore-styles
+ * to accomplish the same thing.
+ */
+export async function load(url, context, nextLoad) {
+	if (extensionsRegex.test(url)) {
+		return {
+			format: "json",
+			source: "{}",
+		};
+	}
+
+	// Defer to the next hook in the chain.
+	return nextLoad(url, context);
+}

examples/data-objects/webflow/package.json

@@ -12,15 +12,15 @@
 	"license": "MIT",
 	"author": "Microsoft and contributors",
 	"sideEffects": false,
+	"type": "module",
 	"main": "dist/index.js",
-	"module": "lib/index.js",
+	"module": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"scripts": {
 		"build": "fluid-build . --task build",
-		"build:commonjs": "fluid-build . --task commonjs",
 		"build:compile": "fluid-build . --task compile",
-		"build:copy": "copyfiles -u 1 \"src/**/*.css\" dist/ && copyfiles -u 1 \"src/**/*.css\" lib/",
-		"build:esnext": "tsc --project ./tsconfig.esnext.json",
+		"build:copy": "copyfiles -u 1 \"src/**/*.css\" dist/",
+		"build:esnext": "tsc",
 		"build:test": "tsc --project ./src/test/tsconfig.json",
 		"clean": "rimraf dist lib *.tsbuildinfo *.build.log",
 		"dev": "npm run build:esnext -- --watch",
@@ -32,16 +32,16 @@
 		"prepack": "npm run webpack",
 		"prettier": "prettier --check . --ignore-path ../../../.prettierignore",
 		"prettier:fix": "prettier --write . --ignore-path ../../../.prettierignore",
-		"start": "webpack serve --config webpack.config.js",
-		"start:docker": "webpack serve --config webpack.config.js --env mode=docker",
-		"start:r11s": "webpack serve --config webpack.config.js --env mode=r11s",
-		"start:single": "webpack serve --config webpack.config.js --env.single true",
-		"start:spo": "webpack serve --config webpack.config.js --env mode=spo",
-		"start:spo-df": "webpack serve --config webpack.config.js --env mode=spo-df",
-		"start:tinylicious": "webpack serve --config webpack.config.js --env mode=tinylicious",
+		"start": "webpack serve --config webpack.config.cjs",
+		"start:docker": "webpack serve --config webpack.config.cjs --env mode=docker",
+		"start:r11s": "webpack serve --config webpack.config.cjs --env mode=r11s",
+		"start:single": "webpack serve --config webpack.config.cjs --env.single true",
+		"start:spo": "webpack serve --config webpack.config.cjs --env mode=spo",
+		"start:spo-df": "webpack serve --config webpack.config.cjs --env mode=spo-df",
+		"start:tinylicious": "webpack serve --config webpack.config.cjs --env mode=tinylicious",
 		"test": "npm run test:mocha",
 		"test:coverage": "nyc npm test -- --reporter xunit --reporter-option output=nyc/junit-report.xml --exit",
-		"test:mocha": "mocha --config src/test/.mocharc.js dist/test/**/*.spec.js",
+		"test:mocha": "cross-env NODE_OPTIONS=\"--experimental-loader ./ignore-loader.mjs\" mocha --config src/test/.mocharc.cjs dist/test/**/*.spec.js",
 		"test:mocha:multireport": "cross-env FLUID_TEST_MULTIREPORT=1 npm run test:mocha",
 		"test:mocha:verbose": "cross-env FLUID_TEST_VERBOSE=1 npm run test:mocha",
 		"tsc": "tsc",
@@ -111,7 +111,6 @@
 		"eslint": "~8.6.0",
 		"file-loader": "^3.0.1",
 		"html-loader": "^3.1.0",
-		"ignore-styles": "^5.0.1",
 		"jsdom": "^16.7.0",
 		"jsdom-global": "^3.0.2",
 		"mocha": "^10.2.0",

examples/data-objects/webflow/src/clipboard/debug.ts

@@ -4,6 +4,6 @@
  */
 
 import { IDebugger } from "debug";
-import { debug as parent } from "../debug";
+import { debug as parent } from "../debug.js";
 
 export const debug: IDebugger = parent.extend("clipboard");

examples/data-objects/webflow/src/clipboard/paste.ts

@@ -3,9 +3,9 @@
  * Licensed under the MIT License.
  */
 
-import { FlowDocument } from "../document";
-import { TagName } from "../util";
-import { debug } from "./debug";
+import { FlowDocument } from "../document/index.js";
+import { TagName } from "../util/index.js";
+import { debug } from "./debug.js";
 
 const enum ClipboardFormat {
 	html = "text/html",

examples/data-objects/webflow/src/document/debug.ts

@@ -4,6 +4,6 @@
  */
 
 import { IDebugger } from "debug";
-import { debug as parent } from "../debug";
+import { debug as parent } from "../debug.js";
 
 export const debug: IDebugger = parent.extend("document");

examples/data-objects/webflow/src/document/index.ts

@@ -41,11 +41,11 @@ import {
 } from "@fluidframework/sequence";
 import { ISharedDirectory, SharedDirectory } from "@fluidframework/map";
 import { IEvent } from "@fluidframework/common-definitions";
-import { clamp, emptyArray, randomId, TagName, TokenList } from "../util";
-import { IHTMLAttributes } from "../util/attr";
-import { documentType } from "../package";
-import { debug } from "./debug";
-import { SegmentSpan } from "./segmentspan";
+import { clamp, emptyArray, randomId, TagName, TokenList } from "../util/index.js";
+import { IHTMLAttributes } from "../util/attr.js";
+import { documentType } from "../package.js";
+import { debug } from "./debug.js";
+import { SegmentSpan } from "./segmentspan.js";
 
 export const enum DocSegmentKind {
 	text = "text",

examples/data-objects/webflow/src/editor/caret.ts

@@ -4,12 +4,12 @@
  */
 
 import { LocalReferencePosition, ReferencePosition } from "@fluidframework/merge-tree";
-import { DocSegmentKind, getDocSegmentKind } from "../document";
-import { clamp, Dom, hasTagName, TagName } from "../util";
-import { updateRef } from "../util/localref";
+import { DocSegmentKind, getDocSegmentKind } from "../document/index.js";
+import { clamp, Dom, hasTagName, TagName } from "../util/index.js";
+import { updateRef } from "../util/localref.js";
 
-import { eotSegment, Layout } from "../view/layout";
-import { debug } from "./debug";
+import { eotSegment, Layout } from "../view/layout.js";
+import { debug } from "./debug.js";
 
 export class Caret {
 	private get doc() {

examples/data-objects/webflow/src/editor/debug.ts

@@ -4,6 +4,6 @@
  */
 
 import { IDebugger } from "debug";
-import { debug as parent } from "../debug";
+import { debug as parent } from "../debug.js";
 
 export const debug: IDebugger = parent.extend("editor");

examples/data-objects/webflow/src/editor/editor.ts

@@ -4,13 +4,13 @@
  */
 
 import { FluidObject } from "@fluidframework/core-interfaces";
-import { paste } from "../clipboard/paste";
-import { FlowDocument } from "../document";
-import { Direction, getDeltaX, KeyCode } from "../util";
-import { IFormatterState, RootFormatter } from "../view/formatter";
-import { Layout } from "../view/layout";
-import { Caret } from "./caret";
-import { debug } from "./debug";
+import { paste } from "../clipboard/paste.js";
+import { FlowDocument } from "../document/index.js";
+import { Direction, getDeltaX, KeyCode } from "../util/index.js";
+import { IFormatterState, RootFormatter } from "../view/formatter.js";
+import { Layout } from "../view/layout.js";
+import { Caret } from "./caret.js";
+import { debug } from "./debug.js";
 
 export class Editor {
 	private readonly layout: Layout;

examples/data-objects/webflow/src/editor/index.ts

@@ -3,4 +3,4 @@
  * Licensed under the MIT License.
  */
 
-export { Editor } from "./editor";
+export { Editor } from "./editor.js";

examples/data-objects/webflow/src/host/debug.ts

@@ -4,6 +4,6 @@
  */
 
 import { IDebugger } from "debug";
-import { debug as parent } from "../debug";
+import { debug as parent } from "../debug.js";
 
 export const debug: IDebugger = parent.extend("host");

examples/data-objects/webflow/src/host/index.ts

@@ -3,5 +3,5 @@
  * Licensed under the MIT License.
  */
 
-export { WebFlow } from "./webFlow";
-export { WebflowView } from "./webflowView";
+export { WebFlow } from "./webFlow.js";
+export { WebflowView } from "./webflowView.js";

examples/data-objects/webflow/src/host/searchmenu/index.ts

@@ -3,9 +3,9 @@
  * Licensed under the MIT License.
  */
 
-import { Dom, ICommand, KeyCode, randomId } from "../../util";
-import { debug } from "../debug";
-import { View } from "./view";
+import { Dom, ICommand, KeyCode, randomId } from "../../util/index.js";
+import { debug } from "../debug.js";
+import { View } from "./view.js";
 
 // eslint-disable-next-line import/no-unassigned-import
 import "./index.css";

examples/data-objects/webflow/src/host/webFlow.ts

@@ -13,8 +13,8 @@ import {
 	LazyLoadedDataObject,
 } from "@fluidframework/data-object-base";
 import { ISharedDirectory, SharedDirectory } from "@fluidframework/map";
-import { FlowDocument } from "../document";
-import { hostType } from "../package";
+import { FlowDocument } from "../document/index.js";
+import { hostType } from "../package.js";
 
 export class WebFlow extends LazyLoadedDataObject<ISharedDirectory> {
 	private static readonly factory = new LazyLoadedDataObjectFactory<WebFlow>(

examples/data-objects/webflow/src/host/webflowView.tsx

@@ -5,17 +5,17 @@
 
 import React, { KeyboardEventHandler, useEffect, useRef, useState } from "react";
 
-import { FlowDocument } from "../document";
-import { Editor } from "../editor";
-import { htmlFormatter } from "../html/formatters";
-import { ICommand, TagName } from "../util";
-import { IFormatterState, RootFormatter } from "../view/formatter";
-import { debug } from "./debug";
+import { FlowDocument } from "../document/index.js";
+import { Editor } from "../editor/index.js";
+import { htmlFormatter } from "../html/formatters.js";
+import { ICommand, TagName } from "../util/index.js";
+import { IFormatterState, RootFormatter } from "../view/formatter.js";
+import { debug } from "./debug.js";
 // eslint-disable-next-line import/no-unassigned-import
 import "./index.css";
 // eslint-disable-next-line import/no-unassigned-import
 import "./debug.css";
-import { SearchMenuView } from "./searchmenu";
+import { SearchMenuView } from "./searchmenu/index.js";
 
 const always = () => true;
 

examples/data-objects/webflow/src/html/css.ts

@@ -4,8 +4,8 @@
  */
 
 import { ISegment } from "@fluidframework/merge-tree";
-import { getCss } from "../document";
-import { areStringsEquivalent } from "../util";
+import { getCss } from "../document/index.js";
+import { areStringsEquivalent } from "../util/index.js";
 
 // Note: Similar to TokenList.set(..), but elides the search for duplicate tokens.
 const concat = (leftTokens: string, rightTokens: string) =>

examples/data-objects/webflow/src/html/debug.ts

@@ -4,6 +4,6 @@
  */
 
 import { IDebugger } from "debug";
-import { debug as parent } from "../debug";
+import { debug as parent } from "../debug.js";
 
 export const debug: IDebugger = parent.extend("html");

examples/data-objects/webflow/src/html/formatters.ts

@@ -5,14 +5,14 @@
 
 import { assert } from "@fluidframework/common-utils";
 import { Marker, TextSegment } from "@fluidframework/merge-tree";
-import { DocSegmentKind, getCss, getDocSegmentKind } from "../document";
-import { emptyObject, TagName } from "../util";
-import { getAttrs, syncAttrs } from "../util/attr";
-
-import { Formatter, IFormatterState, RootFormatter } from "../view/formatter";
-import { Layout } from "../view/layout";
-import { ICssProps, sameCss, syncCss } from "./css";
-import { debug } from "./debug";
+import { DocSegmentKind, getCss, getDocSegmentKind } from "../document/index.js";
+import { emptyObject, TagName } from "../util/index.js";
+import { getAttrs, syncAttrs } from "../util/attr.js";
+
+import { Formatter, IFormatterState, RootFormatter } from "../view/formatter.js";
+import { Layout } from "../view/layout.js";
+import { ICssProps, sameCss, syncCss } from "./css.js";
+import { debug } from "./debug.js";
 
 class HtmlFormatter extends RootFormatter<IFormatterState> {
 	public begin(layout: Layout) {

examples/data-objects/webflow/src/index.ts

@@ -6,10 +6,10 @@
 import { ContainerViewRuntimeFactory } from "@fluid-example/example-utils";
 import React from "react";
 
-export { FlowDocument } from "./document";
-export { Editor } from "./editor";
-import { WebFlow, WebflowView } from "./host";
-export { htmlFormatter } from "./html/formatters";
+export { FlowDocument } from "./document/index.js";
+export { Editor } from "./editor/index.js";
+import { WebFlow, WebflowView } from "./host/index.js";
+export { htmlFormatter } from "./html/formatters.js";
 
 const webFlowViewCallback = (webFlow: WebFlow) =>
 	React.createElement(WebflowView, { docP: webFlow.getFlowDocument() });

examples/data-objects/webflow/src/package.ts

@@ -3,12 +3,9 @@
  * Licensed under the MIT License.
  */
 
-/* eslint-disable @typescript-eslint/no-var-requires */
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const { name, version } = require("../package.json");
-/* eslint-enable @typescript-eslint/no-var-requires */
+import { pkgName, pkgVersion } from "./packageVersion.js";
 
-const makeTypeName = (type: string) => `${name}/${type}@${version}`;
+const makeTypeName = (type: string) => `${pkgName}/${type}@${pkgVersion}`;
 
 export const hostType = makeTypeName("host");
 export const documentType = makeTypeName("flow-document");

examples/data-objects/webflow/src/packageVersion.ts

@@ -0,0 +1,9 @@
+/*!
+ * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
+ * Licensed under the MIT License.
+ *
+ * THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY
+ */
+
+export const pkgName = "@fluid-example/webflow";
+export const pkgVersion = "2.0.0-internal.5.1.0";