{"files":[{"path":"compiler\/forget\/packages\/snap\/src\/compiler-worker.ts","status":"M"},{"path":"compiler\/forget\/src\/Babel\/BabelPlugin.ts","status":"M"},{"path":"compiler\/forget\/src\/Babel\/InstrumentForgetBabelPlugin.ts","status":"A"},{"path":"compiler\/forget\/src\/Babel\/PluginOptions.ts","status":"M"},{"path":"compiler\/forget\/src\/__tests__\/compiler-test.ts","status":"M"},{"path":"compiler\/forget\/src\/__tests__\/fixtures\/compiler\/instrument-forget-gating-test.expect.md","status":"A"},{"path":"compiler\/forget\/src\/__tests__\/fixtures\/compiler\/instrument-forget-gating-test.js","status":"A"},{"path":"compiler\/forget\/src\/__tests__\/fixtures\/compiler\/instrument-forget-test.expect.md","status":"A"},{"path":"compiler\/forget\/src\/__tests__\/fixtures\/compiler\/instrument-forget-test.js","status":"A"},{"path":"compiler\/forget\/src\/__tests__\/test-utils\/generateTestsFromFixtures.ts","status":"M"}],"patch":"diff --git a\/compiler\/forget\/packages\/snap\/src\/compiler-worker.ts b\/compiler\/forget\/packages\/snap\/src\/compiler-worker.ts\nindex dc0977e05b..33f0cafa63 100644\n--- a\/compiler\/forget\/packages\/snap\/src\/compiler-worker.ts\n+++ b\/compiler\/forget\/packages\/snap\/src\/compiler-worker.ts\n@@ -91,6 +91,7 @@ export async function compile(\n }\n \n let gating = null;\n+ let instrumentForget = null;\n if (firstLine.indexOf(\"@gating\") !== -1) {\n gating = {\n source: \"ReactForgetFeatureFlag\",\n@@ -98,6 +99,19 @@ export async function compile(\n };\n }\n \n+ if (firstLine.indexOf(\"@instrumentForget\") !== -1) {\n+ instrumentForget = {\n+ gating: {\n+ source: \"ReactInstrumentForgetFeatureFlag\",\n+ importSpecifierName: \"isInstrumentForgetEnabled_Fixtures\",\n+ },\n+ instrumentFn: {\n+ source: \"react-forget-runtime\",\n+ importSpecifierName: \"useRenderCounter\",\n+ },\n+ };\n+ }\n+\n let panicOnBailout = true;\n if (firstLine.indexOf(\"@panicOnBailout false\") !== -1) {\n panicOnBailout = false;\n@@ -120,9 +134,11 @@ export async function compile(\n ],\n ]),\n validateHooksUsage: true,\n+ inlineUseMemo: true,\n },\n logger: null,\n gating,\n+ instrumentForget,\n panicOnBailout,\n isDev: true,\n }).code;\ndiff --git a\/compiler\/forget\/src\/Babel\/BabelPlugin.ts b\/compiler\/forget\/src\/Babel\/BabelPlugin.ts\nindex 32193f9713..10f2122749 100644\n--- a\/compiler\/forget\/src\/Babel\/BabelPlugin.ts\n+++ b\/compiler\/forget\/src\/Babel\/BabelPlugin.ts\n@@ -17,8 +17,9 @@ import {\n } from \"..\/CompilerError\";\n import { compile } from \"..\/CompilerPipeline\";\n import { GeneratedSource } from \"..\/HIR\";\n+import { addInstrumentForget } from \".\/InstrumentForgetBabelPlugin\";\n import {\n- GatingOptions,\n+ ExternalFunction,\n PluginOptions,\n parsePluginOptions,\n } from \".\/PluginOptions\";\n@@ -57,16 +58,16 @@ export default function ReactForgetBabelPlugin(\n ): void {\n try {\n const compiled = compile(fn, pass.opts.environment);\n+ if (fn.node.id == null) {\n+ CompilerError.invariant(\n+ \"FunctionDeclaration must have a name\",\n+ fn.node.loc ?? GeneratedSource\n+ );\n+ }\n+ const originalIdent = fn.node.id;\n \n if (pass.opts.gating != null) {\n \/\/ Rename existing function\n- if (fn.node.id == null) {\n- CompilerError.invariant(\n- \"FunctionDeclaration must have a name\",\n- fn.node.loc ?? GeneratedSource\n- );\n- }\n- const original = fn.node.id;\n fn.node.id = addSuffix(fn.node.id, \"_uncompiled\");\n \n \/\/ Rename and append compiled function\n@@ -85,12 +86,42 @@ export default function ReactForgetBabelPlugin(\n buildGatingTest({\n originalFnDecl: fn,\n compiledIdent: compiled.id,\n- originalIdent: original,\n+ originalIdent,\n gating: pass.opts.gating,\n })\n );\n+ if (pass.opts.instrumentForget != null) {\n+ const gatingIdentifierName =\n+ pass.opts.instrumentForget.gating.importSpecifierName;\n+ const instrumentFnName =\n+ pass.opts.instrumentForget.instrumentFn.importSpecifierName;\n+ addInstrumentForget(\n+ fn,\n+ originalIdent.name,\n+ gatingIdentifierName,\n+ instrumentFnName\n+ );\n+ addInstrumentForget(\n+ compiledFn,\n+ originalIdent.name,\n+ gatingIdentifierName,\n+ instrumentFnName\n+ );\n+ }\n } else {\n fn.replaceWith(compiled);\n+ if (pass.opts.instrumentForget != null) {\n+ const gatingIdentifierName =\n+ pass.opts.instrumentForget.gating.importSpecifierName;\n+ const instrumentFnName =\n+ pass.opts.instrumentForget.instrumentFn.importSpecifierName;\n+ addInstrumentForget(\n+ fn,\n+ originalIdent.name,\n+ gatingIdentifierName,\n+ instrumentFnName\n+ );\n+ }\n }\n \n hasForgetCompiledCode = true;\n@@ -302,10 +333,23 @@ export default function ReactForgetBabelPlugin(\n );\n }\n }\n+ \/\/ TODO: check for duplicate import specifiers\n if (options.gating != null) {\n path.unshiftContainer(\n \"body\",\n- buildImportForGatingModule(options.gating)\n+ buildImportForExternalFunction(options.gating)\n+ );\n+ }\n+ if (options.instrumentForget != null) {\n+ path.unshiftContainer(\n+ \"body\",\n+ buildImportForExternalFunction(options.instrumentForget.gating)\n+ );\n+ path.unshiftContainer(\n+ \"body\",\n+ buildImportForExternalFunction(\n+ options.instrumentForget.instrumentFn\n+ )\n );\n }\n }\n@@ -430,7 +474,7 @@ type GatingTestOptions = {\n originalFnDecl: BabelCore.NodePath;\n compiledIdent: t.Identifier;\n originalIdent: t.Identifier;\n- gating: GatingOptions;\n+ gating: ExternalFunction;\n };\n function buildGatingTest({\n originalFnDecl,\n@@ -473,8 +517,8 @@ function addSuffix(id: t.Identifier, suffix: string): t.Identifier {\n return t.identifier(`${id.name}${suffix}`);\n }\n \n-function buildImportForGatingModule(\n- gating: GatingOptions\n+function buildImportForExternalFunction(\n+ gating: ExternalFunction\n ): t.ImportDeclaration {\n const specifierIdent = buildSpecifierIdent(gating);\n return t.importDeclaration(\n@@ -483,7 +527,7 @@ function buildImportForGatingModule(\n );\n }\n \n-function buildSpecifierIdent(gating: GatingOptions): t.Identifier {\n+function buildSpecifierIdent(gating: ExternalFunction): t.Identifier {\n return t.identifier(gating.importSpecifierName);\n }\n \ndiff --git a\/compiler\/forget\/src\/Babel\/InstrumentForgetBabelPlugin.ts b\/compiler\/forget\/src\/Babel\/InstrumentForgetBabelPlugin.ts\nnew file mode 100644\nindex 0000000000..12c79d62bf\n--- \/dev\/null\n+++ b\/compiler\/forget\/src\/Babel\/InstrumentForgetBabelPlugin.ts\n@@ -0,0 +1,34 @@\n+\/**\n+ * Copyright (c) Meta Platforms, Inc. and affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\/\n+\n+import { NodePath } from \"@babel\/core\";\n+import * as t from \"@babel\/types\";\n+import \".\/BabelPlugin\";\n+\n+export function addInstrumentForget(\n+ fn: NodePath,\n+ fnName: string,\n+ gatingIdentifierName: string,\n+ instrumentFnName: string\n+): void {\n+ const fnBody = fn.get(\"body\");\n+ \/\/ Technically, this is a conditional hook call. However, we expect\n+ \/\/ __DEV__ and gatingIdentifier to be runtime constants\n+ const testExpr: t.Node = t.ifStatement(\n+ t.logicalExpression(\n+ \"&&\",\n+ t.identifier(\"__DEV__\"),\n+ t.identifier(gatingIdentifierName)\n+ ),\n+ t.expressionStatement(\n+ t.callExpression(t.identifier(instrumentFnName), [\n+ t.stringLiteral(fnName),\n+ ])\n+ )\n+ );\n+ fnBody.unshiftContainer(\"body\", testExpr);\n+}\ndiff --git a\/compiler\/forget\/src\/Babel\/PluginOptions.ts b\/compiler\/forget\/src\/Babel\/PluginOptions.ts\nindex 6c04b6ee35..37145c2019 100644\n--- a\/compiler\/forget\/src\/Babel\/PluginOptions.ts\n+++ b\/compiler\/forget\/src\/Babel\/PluginOptions.ts\n@@ -7,7 +7,7 @@\n \n import { EnvironmentConfig } from \"..\/HIR\/Environment\";\n \n-export type GatingOptions = {\n+export type ExternalFunction = {\n \/**\n * Source for the imported module that exports the `importSpecifierName` functions\n *\/\n@@ -18,6 +18,11 @@ export type GatingOptions = {\n importSpecifierName: string;\n };\n \n+export type InstrumentForgetOptions = {\n+ gating: ExternalFunction;\n+ instrumentFn: ExternalFunction;\n+};\n+\n export type PluginOptions = {\n \/**\n * Enable to make Forget only compile functions containing the 'use forget' directive.\n@@ -48,7 +53,35 @@ export type PluginOptions = {\n *\n * var Foo = isForgetEnabled_Pokes() ? Foo_forget : Foo_uncompiled;\n *\/\n- gating: GatingOptions | null;\n+ gating: ExternalFunction | null;\n+ \/**\n+ * Enables instrumentation codegen. This emits a dev-mode only + gated call to\n+ * an instrumentation function, for components and hooks that Forget compiles.\n+ * For example:\n+ * instrumentForget: {\n+ * gating: {\n+ * source: 'ReactInstrumentForgetFeatureFlag',\n+ * importSpecifierName: 'isInstrumentForgetEnabled_Pokes',\n+ * },\n+ * instrumentFn: {\n+ * source: 'react-forget-runtime',\n+ * importSpecifierName: 'useRenderCounter',\n+ * }\n+ * }\n+ *\n+ * produces:\n+ * import {isInstrumentForgetEnabled_Pokes} from 'ReactInstrumentForgetFeatureFlag';\n+ * import {useRenderCounter} from 'react-forget-runtime';\n+ *\n+ * function Component(props) {\n+ * if (__DEV__ && isInstrumentForgetEnabled_Pokes) {\n+ * useRenderCounter();\n+ * }\n+ * \/\/ ...\n+ * }\n+ *\n+ *\/\n+ instrumentForget: InstrumentForgetOptions | null;\n \n panicOnBailout: boolean;\n \n@@ -66,6 +99,7 @@ export const defaultOptions: PluginOptions = {\n logger: null,\n gating: null,\n isDev: false,\n+ instrumentForget: null,\n } as const;\n \n export function parsePluginOptions(obj: unknown): PluginOptions {\ndiff --git a\/compiler\/forget\/src\/__tests__\/compiler-test.ts b\/compiler\/forget\/src\/__tests__\/compiler-test.ts\nindex 3745e23507..bd984b34b6 100644\n--- a\/compiler\/forget\/src\/__tests__\/compiler-test.ts\n+++ b\/compiler\/forget\/src\/__tests__\/compiler-test.ts\n@@ -62,6 +62,7 @@ describe(\"React Forget\", () => {\n },\n logger: null,\n gating: options.gating,\n+ instrumentForget: options.instrumentForget,\n panicOnBailout: options.panicOnBailout,\n isDev: true,\n }).code,\ndiff --git a\/compiler\/forget\/src\/__tests__\/fixtures\/compiler\/instrument-forget-gating-test.expect.md b\/compiler\/forget\/src\/__tests__\/fixtures\/compiler\/instrument-forget-gating-test.expect.md\nnew file mode 100644\nindex 0000000000..e697e059fc\n--- \/dev\/null\n+++ b\/compiler\/forget\/src\/__tests__\/fixtures\/compiler\/instrument-forget-gating-test.expect.md\n@@ -0,0 +1,78 @@\n+\n+## Input\n+\n+```javascript\n+\/\/ @instrumentForget @forgetDirective @gating\n+\n+function Bar(props) {\n+ \"use forget\";\n+ return

{props.bar}<\/div>;\n+}\n+\n+function NoForget(props) {\n+ return {props.noForget}<\/Bar>;\n+}\n+\n+function Foo(props) {\n+ \"use forget\";\n+ return {props.bar}<\/Foo>;\n+}\n+\n+```\n+\n+## Code\n+\n+```javascript\n+import { useRenderCounter } from \"react-forget-runtime\";\n+import { isInstrumentForgetEnabled_Fixtures } from \"ReactInstrumentForgetFeatureFlag\";\n+import { isForgetEnabled_Fixtures } from \"ReactForgetFeatureFlag\";\n+import { unstable_useMemoCache as useMemoCache } from \"react\"; \/\/ @instrumentForget @forgetDirective @gating\n+\n+function Bar_uncompiled(props) {\n+ \"use forget\";\n+ if (__DEV__ && isInstrumentForgetEnabled_Fixtures) useRenderCounter(\"Bar\");\n+ return

{props.bar}<\/div>;\n+}\n+function Bar_forget(props) {\n+ if (__DEV__ && isInstrumentForgetEnabled_Fixtures) useRenderCounter(\"Bar\");\n+ const $ = useMemoCache(2);\n+ const c_0 = $[0] !== props.bar;\n+ let t0;\n+ if (c_0) {\n+ t0 =

{props.bar}<\/div>;\n+ $[0] = props.bar;\n+ $[1] = t0;\n+ } else {\n+ t0 = $[1];\n+ }\n+ return t0;\n+}\n+const Bar = isForgetEnabled_Fixtures() ? Bar_forget : Bar_uncompiled;\n+\n+function NoForget(props) {\n+ return {props.noForget}<\/Bar>;\n+}\n+\n+function Foo_uncompiled(props) {\n+ \"use forget\";\n+ if (__DEV__ && isInstrumentForgetEnabled_Fixtures) useRenderCounter(\"Foo\");\n+ return {props.bar}<\/Foo>;\n+}\n+function Foo_forget(props) {\n+ if (__DEV__ && isInstrumentForgetEnabled_Fixtures) useRenderCounter(\"Foo\");\n+ const $ = useMemoCache(2);\n+ const c_0 = $[0] !== props.bar;\n+ let t0;\n+ if (c_0) {\n+ t0 = {props.bar}<\/Foo>;\n+ $[0] = props.bar;\n+ $[1] = t0;\n+ } else {\n+ t0 = $[1];\n+ }\n+ return t0;\n+}\n+const Foo = isForgetEnabled_Fixtures() ? Foo_forget : Foo_uncompiled;\n+\n+```\n+ \n\\ No newline at end of file\ndiff --git a\/compiler\/forget\/src\/__tests__\/fixtures\/compiler\/instrument-forget-gating-test.js b\/compiler\/forget\/src\/__tests__\/fixtures\/compiler\/instrument-forget-gating-test.js\nnew file mode 100644\nindex 0000000000..61eb62269e\n--- \/dev\/null\n+++ b\/compiler\/forget\/src\/__tests__\/fixtures\/compiler\/instrument-forget-gating-test.js\n@@ -0,0 +1,15 @@\n+\/\/ @instrumentForget @forgetDirective @gating\n+\n+function Bar(props) {\n+ \"use forget\";\n+ return

{props.bar}<\/div>;\n+}\n+\n+function NoForget(props) {\n+ return {props.noForget}<\/Bar>;\n+}\n+\n+function Foo(props) {\n+ \"use forget\";\n+ return {props.bar}<\/Foo>;\n+}\n+\n+```\n+\n+## Code\n+\n+```javascript\n+import { useRenderCounter } from \"react-forget-runtime\";\n+import { isInstrumentForgetEnabled_Fixtures } from \"ReactInstrumentForgetFeatureFlag\";\n+import { unstable_useMemoCache as useMemoCache } from \"react\"; \/\/ @instrumentForget @forgetDirective\n+\n+function Bar(props) {\n+ if (__DEV__ && isInstrumentForgetEnabled_Fixtures) useRenderCounter(\"Bar\");\n+ const $ = useMemoCache(2);\n+ const c_0 = $[0] !== props.bar;\n+ let t0;\n+ if (c_0) {\n+ t0 =

{props.bar}<\/div>;\n+ $[0] = props.bar;\n+ $[1] = t0;\n+ } else {\n+ t0 = $[1];\n+ }\n+ return t0;\n+}\n+\n+function NoForget(props) {\n+ return {props.noForget}<\/Bar>;\n+}\n+\n+function Foo(props) {\n+ if (__DEV__ && isInstrumentForgetEnabled_Fixtures) useRenderCounter(\"Foo\");\n+ const $ = useMemoCache(2);\n+ const c_0 = $[0] !== props.bar;\n+ let t0;\n+ if (c_0) {\n+ t0 = {props.bar}<\/Foo>;\n+ $[0] = props.bar;\n+ $[1] = t0;\n+ } else {\n+ t0 = $[1];\n+ }\n+ return t0;\n+}\n+\n+```\n+ \n\\ No newline at end of file\ndiff --git a\/compiler\/forget\/src\/__tests__\/fixtures\/compiler\/instrument-forget-test.js b\/compiler\/forget\/src\/__tests__\/fixtures\/compiler\/instrument-forget-test.js\nnew file mode 100644\nindex 0000000000..95076cf30c\n--- \/dev\/null\n+++ b\/compiler\/forget\/src\/__tests__\/fixtures\/compiler\/instrument-forget-test.js\n@@ -0,0 +1,15 @@\n+\/\/ @instrumentForget @forgetDirective\n+\n+function Bar(props) {\n+ \"use forget\";\n+ return

{props.bar}<\/div>;\n+}\n+\n+function NoForget(props) {\n+ return {props.noForget}<\/Bar>;\n+}\n+\n+function Foo(props) {\n+ \"use forget\";\n+ return {props.bar}<\/Foo>;\n+}\ndiff --git a\/compiler\/forget\/src\/__tests__\/test-utils\/generateTestsFromFixtures.ts b\/compiler\/forget\/src\/__tests__\/test-utils\/generateTestsFromFixtures.ts\nindex 47f63d7782..6256789e58 100644\n--- a\/compiler\/forget\/src\/__tests__\/test-utils\/generateTestsFromFixtures.ts\n+++ b\/compiler\/forget\/src\/__tests__\/test-utils\/generateTestsFromFixtures.ts\n@@ -12,7 +12,11 @@\n import fs from \"fs\";\n import glob from \"glob\";\n import path from \"path\";\n-import { GatingOptions, PluginOptions } from \"..\/..\/Babel\/PluginOptions\";\n+import {\n+ ExternalFunction,\n+ InstrumentForgetOptions,\n+ PluginOptions,\n+} from \"..\/..\/Babel\/PluginOptions\";\n \n const EXPECT_SUFFIX = \".expect.md\";\n \n@@ -93,7 +97,8 @@ export default function generateTestsFromFixtures(\n let input: string | null = null;\n let debug = false;\n let enableOnlyOnUseForgetDirective = false;\n- let gating: GatingOptions | null = null;\n+ let gating: ExternalFunction | null = null;\n+ let instrumentForget: InstrumentForgetOptions | null = null;\n let inlineUseMemo = true;\n let panicOnBailout = true;\n let memoizeJsxElements = true;\n@@ -119,6 +124,18 @@ export default function generateTestsFromFixtures(\n importSpecifierName: \"isForgetEnabled_Fixtures\",\n };\n }\n+ if (lines[0]!.indexOf(\"@instrumentForget\") !== -1) {\n+ instrumentForget = {\n+ gating: {\n+ source: \"ReactInstrumentForgetFeatureFlag\",\n+ importSpecifierName: \"isInstrumentForgetEnabled_Fixtures\",\n+ },\n+ instrumentFn: {\n+ source: \"react-forget-runtime\",\n+ importSpecifierName: \"useRenderCounter\",\n+ },\n+ };\n+ }\n if (lines[0]!.indexOf(\"@inlineUseMemo false\") !== -1) {\n inlineUseMemo = false;\n }\n@@ -139,6 +156,7 @@ export default function generateTestsFromFixtures(\n debug,\n enableOnlyOnUseForgetDirective,\n gating,\n+ instrumentForget,\n language: parseLanguage(input),\n panicOnBailout,\n isDev: true,\n","commit":{"revision":"0b697d1903318b75c1e61b749365a44d39d67ebb","authoredAt":"2023-05-17T14:39:27-04:00","authorName":"Mofei Zhang","authorEmail":"mofei.zhang@utexas.edu","subject":"[babel plugin] Add codegen for useRenderCounter","shortRevision":"0b697d1903"},"parents":["bceb786c5aad621d9f6c2ee4dd3c04fe921919bb"],"body":""}

dillon1000/react

Files changed