Skip to content

Commit

Permalink
Convert webflow example to use esnext modules (#15940)
Browse files Browse the repository at this point in the history
## Description

This makes progress toward #15917 by converting @fluid-example/webflow
to use esnext modules.

This is the most involved update of any of the packages that depend on
`@fluid-internal/test-version-utils`, since ESNext modules don't support
the `require.extensions` api (they don't support `require`), which was
the technique used to make webpack-style CSS imports not blow up when
run in a node environment. Instead, it's recommended to use the node esm
loader API. Although this API is experimental, it hasn't receive any
changes between v16.12 and the node latest (v20.x).
  • Loading branch information
Abe27342 authored Jun 16, 2023
1 parent 1fd70e0 commit dac7f34
Show file tree
Hide file tree
Showing 45 changed files with 169 additions and 131 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ 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)
// AB#4614 tracks moving to eslint-import-resolver-typescript (which handles such imports
// out of the box) and removing this exception.
"import/no-unresolved": ["error", { ignore: ["^\\.(.*)\\.js$"] }],
},
parserOptions: {
project: ["./tsconfig.json", "./src/test/tsconfig.json"],
Expand Down
26 changes: 13 additions & 13 deletions examples/data-objects/webflow/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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 esm-loader-css\" 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",
Expand Down Expand Up @@ -109,9 +109,9 @@
"cross-env": "^7.0.3",
"css-loader": "^1.0.0",
"eslint": "~8.6.0",
"esm-loader-css": "^1.0.4",
"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",
Expand Down
2 changes: 1 addition & 1 deletion examples/data-objects/webflow/src/clipboard/debug.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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");
6 changes: 3 additions & 3 deletions examples/data-objects/webflow/src/clipboard/paste.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion examples/data-objects/webflow/src/document/debug.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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");
10 changes: 5 additions & 5 deletions examples/data-objects/webflow/src/document/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
10 changes: 5 additions & 5 deletions examples/data-objects/webflow/src/editor/caret.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
2 changes: 1 addition & 1 deletion examples/data-objects/webflow/src/editor/debug.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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");
14 changes: 7 additions & 7 deletions examples/data-objects/webflow/src/editor/editor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion examples/data-objects/webflow/src/editor/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@
* Licensed under the MIT License.
*/

export { Editor } from "./editor";
export { Editor } from "./editor.js";
2 changes: 1 addition & 1 deletion examples/data-objects/webflow/src/host/debug.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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");
4 changes: 2 additions & 2 deletions examples/data-objects/webflow/src/host/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
6 changes: 3 additions & 3 deletions examples/data-objects/webflow/src/host/searchmenu/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
4 changes: 2 additions & 2 deletions examples/data-objects/webflow/src/host/webFlow.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>(
Expand Down
14 changes: 7 additions & 7 deletions examples/data-objects/webflow/src/host/webflowView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
4 changes: 2 additions & 2 deletions examples/data-objects/webflow/src/html/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) =>
Expand Down
2 changes: 1 addition & 1 deletion examples/data-objects/webflow/src/html/debug.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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");
16 changes: 8 additions & 8 deletions examples/data-objects/webflow/src/html/formatters.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
8 changes: 4 additions & 4 deletions examples/data-objects/webflow/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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() });
Expand Down
7 changes: 2 additions & 5 deletions examples/data-objects/webflow/src/package.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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");
9 changes: 9 additions & 0 deletions examples/data-objects/webflow/src/packageVersion.ts
Original file line number Diff line number Diff line change
@@ -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";
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@
const packageDir = `${__dirname}/../..`;

const getFluidTestMochaConfig = require("@fluid-internal/test-version-utils/mocharc-common.js");
const config = getFluidTestMochaConfig(packageDir, ["ignore-styles"]);
const config = getFluidTestMochaConfig(packageDir);
module.exports = config;
2 changes: 1 addition & 1 deletion examples/data-objects/webflow/src/test/direction.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import { strict as assert } from "assert";
import { Direction, getDeltaX, getDeltaY } from "../util";
import { Direction, getDeltaX, getDeltaY } from "../util/index.js";

const cases = [
{ name: "none", direction: Direction.none, expectedX: 0, expectedY: 0 },
Expand Down
4 changes: 2 additions & 2 deletions examples/data-objects/webflow/src/test/flowdocument.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import { Marker, ReferenceType } from "@fluidframework/merge-tree";
import { requestFluidObject } from "@fluidframework/runtime-utils";
import { ITestObjectProvider } from "@fluidframework/test-utils";
import { describeLoaderCompat } from "@fluid-internal/test-version-utils";
import { FlowDocument } from "../document";
import { TagName } from "../util";
import { FlowDocument } from "../document/index.js";
import { TagName } from "../util/index.js";

describeLoaderCompat("FlowDocument", (getTestObjectProvider) => {
let doc: FlowDocument;
Expand Down
10 changes: 5 additions & 5 deletions examples/data-objects/webflow/src/test/layout.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@
* Licensed under the MIT License.
*/

// eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports
require("jsdom-global")("", { url: "http://localhost" });
// eslint-disable-next-line import/no-unassigned-import
import "jsdom-global/register.js";
window.performance.mark ??= () => undefined as PerformanceMark;
window.performance.measure ??= () => undefined as PerformanceMeasure;

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 { htmlFormatter } from "..";
import { FlowDocument } from "../document";
import { Layout } from "../view/layout";
import { htmlFormatter } from "../index.js";
import { FlowDocument } from "../document/index.js";
import { Layout } from "../view/layout.js";

interface ISnapshotNode {
node: Node;
Expand Down
4 changes: 2 additions & 2 deletions examples/data-objects/webflow/src/test/segmentspan.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import { TextSegment } from "@fluidframework/merge-tree";
import { requestFluidObject } from "@fluidframework/runtime-utils";
import { ITestObjectProvider } from "@fluidframework/test-utils";
import { describeLoaderCompat } from "@fluid-internal/test-version-utils";
import { FlowDocument } from "../document";
import { SegmentSpan } from "../document/segmentspan";
import { FlowDocument } from "../document/index.js";
import { SegmentSpan } from "../document/segmentspan.js";

describeLoaderCompat("SegmentSpan", (getTestObjectProvider) => {
let doc: FlowDocument;
Expand Down
2 changes: 1 addition & 1 deletion examples/data-objects/webflow/src/test/strings.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import { strict as assert } from "assert";
import { areStringsEquivalent } from "../util";
import { areStringsEquivalent } from "../util/index.js";

function test(left: string | undefined | null, right: string | undefined | null) {
const isLeftEmpty = left === "" || left === null || left === undefined;
Expand Down
2 changes: 1 addition & 1 deletion examples/data-objects/webflow/src/test/tokenlist.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import { strict as assert } from "assert";
import { findToken, TokenList } from "../util";
import { findToken, TokenList } from "../util/index.js";

describe("TokenList", () => {
describe("findToken", () => {
Expand Down
Loading

0 comments on commit dac7f34

Please sign in to comment.