merge: upstream 378 commits

.eslintrc.js

@@ -1,4 +1,4 @@
-const TYPES = `Animation|AnimationSequence|AnyType|Arena|ArenaChild|ArenaFrame|ArenaFrameCell|ArenaFrameGrid|ArenaFrameRow|Arg|ArgType|BindingStruct|BoolType|Choice|ClassNamePropType|CodeComponentHelper|CodeComponentMeta|CodeComponentVariantMeta|CodeLibrary|CollectionExpr|ColorPropType|ColumnsConfig|ColumnsSetting|Component|ComponentArena|ComponentDataQuery|ComponentInstance|ComponentServerQuery|ComponentSwapSplitContent|ComponentTemplateInfo|ComponentVariantGroup|ComponentVariantSplitContent|CompositeExpr|CustomCode|CustomFunction|CustomFunctionExpr|DataSourceOpExpr|DataSourceTemplate|DataToken|DateRangeStrings|DateString|DefaultStylesClassNamePropType|DefaultStylesPropType|EventHandler|Expr|ExprText|FigmaComponentMapping|FunctionArg|FunctionExpr|FunctionType|GenericEventHandler|GlobalVariantGroup|GlobalVariantGroupParam|GlobalVariantSplitContent|HostLessPackageInfo|HrefType|ImageAsset|ImageAssetRef|Img|Interaction|KeyFrame|LabeledSelector|MapExpr|Marker|Mixin|NameArg|NamedState|NodeMarker|Num|ObjectPath|PageArena|PageHref|PageMeta|Param|PlumeInfo|PlumeInstance|PrimitiveType|ProjectDependency|PropParam|QueryData|QueryInvalidationExpr|QueryRef|RandomSplitSlice|RawText|RenderExpr|RenderFuncType|RenderableType|Rep|RichText|Rule|RuleSet|Scalar|SegmentSplitSlice|SelectorRuleSet|Site|SlotParam|Split|SplitContent|SplitSlice|State|StateChangeHandlerParam|StateParam|StrongFunctionArg|StyleExpr|StyleMarker|StyleNode|StylePropType|StyleScopeClassNamePropType|StyleToken|StyleTokenOverride|StyleTokenRef|TargetType|TemplatedString|Text|Theme|ThemeLayoutSettings|ThemeStyle|Token|TplComponent|TplNode|TplRef|TplSlot|TplTag|Var|VarRef|Variant|VariantGroup|VariantGroupState|VariantSetting|VariantedRuleSet|VariantedValue|VariantsRef|VirtualRenderExpr`;
+const TYPES = `Animation|AnimationSequence|AnyType|Arena|ArenaChild|ArenaFrame|ArenaFrameCell|ArenaFrameGrid|ArenaFrameRow|Arg|ArgType|BindingStruct|BoolType|Choice|ClassNamePropType|CodeComponentHelper|CodeComponentMeta|CodeComponentVariantMeta|CodeLibrary|CollectionExpr|ColorPropType|ColumnsConfig|ColumnsSetting|Component|ComponentArena|ComponentDataQuery|ComponentInstance|ComponentServerQuery|ComponentSwapSplitContent|ComponentTemplateInfo|ComponentVariantGroup|ComponentVariantSplitContent|CompositeExpr|CustomCode|CustomFunction|CustomFunctionExpr|DataSourceOpExpr|DataSourceTemplate|DataToken|DateRangeStrings|DateString|DefaultStylesClassNamePropType|DefaultStylesPropType|EventHandler|Expr|ExprText|FigmaComponentMapping|FunctionArg|FunctionExpr|FunctionType|GenericEventHandler|GlobalVariantGroup|GlobalVariantGroupParam|GlobalVariantSplitContent|HostLessPackageInfo|HrefType|ImageAsset|ImageAssetRef|Img|Interaction|KeyFrame|LabeledSelector|MapExpr|Marker|Mixin|MultiChoice|NameArg|NamedState|NodeMarker|Num|ObjectPath|PageArena|PageHref|PageMeta|Param|PlumeInfo|PlumeInstance|PrimitiveType|ProjectDependency|PropParam|QueryData|QueryInvalidationExpr|QueryRef|RandomSplitSlice|RawText|RenderExpr|RenderFuncType|RenderableType|Rep|RichText|Rule|RuleSet|Scalar|SegmentSplitSlice|SelectorRuleSet|Site|SlotParam|Split|SplitContent|SplitSlice|State|StateChangeHandlerParam|StateParam|StrongFunctionArg|StyleExpr|StyleMarker|StyleNode|StylePropType|StyleScopeClassNamePropType|StyleToken|StyleTokenOverride|StyleTokenRef|TargetType|TemplatedString|Text|Theme|ThemeLayoutSettings|ThemeStyle|Token|TplComponent|TplNode|TplRef|TplSlot|TplTag|Var|VarRef|Variant|VariantGroup|VariantGroupState|VariantSetting|VariantedRuleSet|VariantedValue|VariantsRef|VirtualRenderExpr`;
 
 const clientFiles = [
   "platform/wab/src/wab/main.tsx",
@@ -21,6 +21,88 @@ const testFiles = [
   "**/__mocks__/**/*",
 ];
 
+const fs = require("fs");
+const path = require("path");
+
+// Find all files in the repo with overlay, e.g. `foo.external.ts` -> `foo.ts`.
+// There are two stub types (see copy.bara.sky):
+//   - `.external.` : replaces files in both public and enterprise sync
+//   - `.public.`   : replaces files only in public sync
+function findOverlayTargets(root) {
+  const targets = [];
+  const walk = (dir) => {
+    let entries;
+    try {
+      entries = fs.readdirSync(dir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        walk(full);
+      } else if (
+        entry.name.includes(".external.") ||
+        entry.name.includes(".public.")
+      ) {
+        targets.push(
+          path
+            .relative(__dirname, full)
+            .replace(".external", "")
+            .replace(".public", "")
+        );
+      }
+    }
+  };
+  walk(root);
+  return targets;
+}
+
+const internalFiles = ["**/enterprise/**", "**/internal/**", "**/*.internal*"];
+const overlayTargets = findOverlayTargets(
+  path.join(__dirname, "platform/wab/src")
+);
+
+// Public synced files can't import enterprise/internal code.
+const noEnterpriseImportPattern = {
+  group: internalFiles,
+  message:
+    "Either move this file under `enterprise/`/`internal/`, or add an `.external`/`.public`" +
+    "stub sibling to override it (see copy.bara.sky).",
+};
+
+// Shared by the top-level rule and the public-import guard override (which replaces it per-file).
+const restrictedImportPaths = [
+  {
+    name: "@plasmicapp/host",
+    importNames: ["registerComponent", "CodeComponentMeta"],
+    message: "Please import from @plasmicapp/host/registerComponent instead",
+  },
+  {
+    name: "antd",
+    importNames: ["Modal"],
+    message:
+      "Please use drop-in replacement src/wab/client/components/widgets/Modal.tsx instead",
+  },
+  {
+    name: "react-use",
+    importNames: ["useAsync", "useAsyncRetry", "useAsyncFn"],
+    message: "Please use useAsyncStrict()/useAsyncFnStrict() instead",
+  },
+  {
+    name: "react-use/lib/useAsync",
+    message: "Please use useAsyncStrict() instead",
+  },
+  {
+    name: "react-use/lib/useAsyncRetry",
+    message: "Please use useAsyncStrict() instead",
+  },
+  {
+    name: "react-use/lib/useAsyncFn",
+    message: "Please use useAsyncFnStrict() instead",
+  },
+];
+
 module.exports = {
   root: true,
   ignorePatterns: [
@@ -29,6 +111,8 @@ module.exports = {
     "node_modules",
     "storybook-static",
 
+    // Examples lint themselves via their own `next lint`; also skipped in
+    // .lintstagedrc.js since eslint resolves `extends` before ignores.
     "examples/",
     "internal/",
     "packages/host/src/type-utils.ts",
@@ -96,38 +180,7 @@ module.exports = {
           "Please use reactPrompt() instead; window.prompt() does not work well with app hosting",
       },
     ],
-    "no-restricted-imports": [
-      "error",
-      {
-        name: "@plasmicapp/host",
-        importNames: ["registerComponent", "CodeComponentMeta"],
-        message:
-          "Please import from @plasmicapp/host/registerComponent instead",
-      },
-      {
-        name: "antd",
-        importNames: ["Modal"],
-        message:
-          "Please use drop-in replacement src/wab/client/components/widgets/Modal.tsx instead",
-      },
-      {
-        name: "react-use",
-        importNames: ["useAsync", "useAsyncRetry", "useAsyncFn"],
-        message: "Please use useAsyncStrict()/useAsyncFnStrict() instead",
-      },
-      {
-        name: "react-use/lib/useAsync",
-        message: "Please use useAsyncStrict() instead",
-      },
-      {
-        name: "react-use/lib/useAsyncRetry",
-        message: "Please use useAsyncStrict() instead",
-      },
-      {
-        name: "react-use/lib/useAsyncFn",
-        message: "Please use useAsyncFnStrict() instead",
-      },
-    ],
+    "no-restricted-imports": ["error", { paths: restrictedImportPaths }],
     "no-restricted-syntax": [
       "warn",
       {
@@ -356,6 +409,21 @@ module.exports = {
             ],
           },
         },
+        {
+          files: ["platform/wab/src/**/*.ts", "platform/wab/src/**/*.tsx"],
+          // Files allowed to import from internalFiles. Includes files which are overlay targets,
+          // since they are replaced in the public sync.
+          excludedFiles: [...testFiles, ...internalFiles, ...overlayTargets],
+          rules: {
+            "no-restricted-imports": [
+              "error",
+              {
+                paths: restrictedImportPaths,
+                patterns: [noEnterpriseImportPattern],
+              },
+            ],
+          },
+        },
       ],
 
       parserOptions: {
@@ -422,7 +490,6 @@ module.exports = {
     SocketIOClient: false,
     JSX: false,
     JQuery: false,
-    Cypress: false,
     cy: false,
   },
 };

.gitignore

@@ -34,7 +34,10 @@
 /platform/sub/typedoc.json.gz
 /platform/sub/typedoc/
 bower_components/
-node_modules/
+# No trailing slash so node_modules symlinks are ignored too, not just directories
+node_modules
+.pnpm-store/
+lerna-debug.log
 storybook-static/
 .nx/
 # ignore decrypted yaml files by sops

.lintstagedrc.js

@@ -1,12 +1,21 @@
 module.exports = {
-  "*.{js,jsx,ts,tsx,cjs,mjs,cts,mts}": ["eslint --fix", "prettier --write"],
+  "*.{js,jsx,ts,tsx,cjs,mjs,cts,mts}": (files) => {
+    // Examples lint themselves via `next lint`; the monorepo eslint can't
+    // load their eslint-config-next (`extends` resolves before ignores).
+    const eslintable = files.filter((f) => !/(^|\/)examples\//.test(f));
+    const cmds = [];
+    if (eslintable.length) {
+      cmds.push(`eslint --fix ${eslintable.map((f) => `"${f}"`).join(" ")}`);
+    }
+    cmds.push(`prettier --write ${files.map((f) => `"${f}"`).join(" ")}`);
+    return cmds;
+  },
   "*.{json,css,less,scss,md,toml,xml,yml,yaml}": ["prettier --write"],
   "Dockerfile*": ["hadolint --failure-threshold=error"],
 
   // Format HCL/Terragrunt files, but never touch generated *.lock.hcl (excluded via extglob)
   "!(*lock).hcl": (files) => {
-    // Prefer terragrunt's formatter for *.hcl; fall back to terraform fmt if needed
-    return files.map((f) => `terragrunt hclfmt --file "${f}"`);
+    return files.map((f) => `terragrunt hcl format --file "${f}"`);
   },
 
   // Terraform files (format on commit)

.tool-versions

@@ -1,2 +1,3 @@
 nodejs 24.4.0
 python 3.10.13
+terragrunt 1.0.4

CLAUDE.md

@@ -24,9 +24,9 @@ Plasmic is an open-source visual web builder. This monorepo contains:
 - Infra: Docker, k8s, Terraform
 - Package Managers: asdf, npm, yarn, pnpm
 - Languages: Node.js, TypeScript
-- Libraries: React, MobX, TypeORM, Jest, Playwright, Cypress (deprecating) Storybook
+- Libraries: React, MobX, TypeORM, Jest, Playwright, Storybook
 
 ## Instructions for AI assistant
 
-- Do not worry about styling/formatting. All files will be formatted to the same style in git hooks.
+- Do not worry about styling/formatting. All files will be formatted to the same style in git hooks, which husky manages via the generated, gitignored `.husky/_` directory. In a fresh worktree that directory doesn't exist and git silently skips all hooks, so run `pnpm install` at the worktree root before your first commit.
 - When searching files, you should almost never look through node_modules/ files and other gitignored files unless you have a explicit reason to.

CONTRIBUTING.md

@@ -22,7 +22,7 @@ This repo contains:
 
 For hacking on code components or `plasmicpkgs`, see specific additional instructions further down.
 
-We use `lerna` to help us manage dependencies among all the packages.
+`packages/` and `plasmicpkgs/` are a `pnpm` workspace (see `pnpm-workspace.yaml`), `lerna` is used for versioning and publishing.
 
 In general, we follow the "fork-and-pull" Git workflow.
 
@@ -111,7 +111,7 @@ cd packages/cli/
 
 # Step 1. (One-time)
 # Ensure dependencies are built.
-npx nx build @plasmicapp/cli
+pnpm --filter "@plasmicapp/cli..." run build
 
 # Step 2. (Repeat)
 # Hackety hack, then you can directly run the source with esbuild-register.
@@ -130,12 +130,12 @@ If you need the package installed in another npm project to test it, like say a
 # This unpublishes YOURPKG and its dependencies from your verdaccio, re-builds them, and publishes them to your local
 # verdaccio.
 # Note that this does not bump versions!
-# We are using nx under the hood, so if your dependencies haven't changed, this should be fast.
+# pnpm builds the dependency graph, so if your dependencies haven't changed, this should be fast.
 # In this example, even though we edited @plasmicapp/host, we can just think about publishing the "root" package(s) we're ultimately installing into the test app, in this case @plasmicapp/loader-nextjs.
-yarn local-publish @plasmicapp/loader-nextjs &&
+pnpm local-publish @plasmicapp/loader-nextjs &&
 
 # Or publish all packages to verdaccio. This will take longer.
-# yarn local-publish
+# pnpm local-publish
 
 # Step 3.
 # Go to the package you're testing, e.g. test-host-app.
@@ -168,32 +168,19 @@ Check that the versions in your package.json are also not holding back any plasm
 In general, you probably want all @plasmicapp/@plasmicpkgs packages to be installed from your local verdaccio, rather than having some installed from npmjs.org and others installed from local,
 since you want to prevent mismatched and duplicate package versions.
 
-### Odds and ends
-
-For a few packages like react-ssr-prepass, these are not currently integrated into the NX workspace system.
-This is because Lerna doesn't work with git submodules.
-You can publish these as individual packages with, for instance:
-
-```
-cd plasmicpkgs/SOMETHING
-yarn install # Not included in the workspace install
-yarn publish --registry=http://localhost:4873
-# Or with more options: yarn publish --canary --yes --include-merged-tags --no-git-tag-version --no-push --registry=http://localhost:4873 --force-publish
-```
-
 ## Contributing code components (`plasmicpkgs`)
 
 The above general contribution instructions also apply to plasmicpkgs, so read that if you haven't done so.
 
 Before starting, we recommend reading our docs for Code Components:
 
-- [Docs on code components][https://docs.plasmic.app/learn/code-components/]
+- [Docs on code components](https://docs.plasmic.app/learn/code-components/)
 
 ### Creating a new package
 
 Ignore this if you are just updating an existing package.
 
-To create a new plasmicpkg, the easiest approach is to clone one of the existing packages (like react-slick) and fix up the names in package.json and README. Then author your registration code in src. Please use `yarn` for package management.
+To create a new plasmicpkg, the easiest approach is to clone one of the existing packages (like `plasmicpkgs/fetch`, which has an up-to-date build setup, see [plasmicpkgs/README.md](plasmicpkgs/README.md)), then fix names in package.json and README. Then author your registration code in src. Use `pnpm` for package management.
 
 The directory name should be the same name as the main package you'll be using to import the React components. Your package must be named `@plasmicpkgs/{package-name}` and start with version 1.0.0.
 
@@ -211,17 +198,13 @@ So a typical `package.json` might look like this:
 ```json
 {
   "devDependencies": {
-    "@plasmicapp/data-sources": "0.1.53",
-    "@plasmicapp/host": "1.0.119",
-    "@size-limit/preset-small-lib": "^4.11.0",
-    "@types/node": "^14.0.26",
-    "size-limit": "^4.11.0",
-    "tsdx": "^0.14.1",
+    "@plasmicapp/data-sources": "1.0.21",
+    "@plasmicapp/host": "2.0.12",
     "tslib": "^2.2.0",
-    "typescript": "^3.9.7"
+    "typescript": "^5.7.3"
   },
   "peerDependencies": {
-    "@plasmicapp/data-sources": ">=0.1.52",
+    "@plasmicapp/data-sources": ">=1.0.0",
     "@plasmicapp/host": ">=1.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"

README.md

@@ -68,8 +68,6 @@
 
 - Interview with Lee Robinson, Plasmic as a visual CMS: https://www.youtube.com/watch?v=pcVzNR6FBAQ
 
-- Emails with React.Email: coming soon
-
 ## What is Plasmic?
 
 Plasmic is a visual builder for the web.
@@ -210,7 +208,7 @@ Read [the full technical overview](https://docs.plasmic.app/learn/technical-over
 ### Bring your own React components
 
 You can register your own arbitrary custom React components for use as building blocks within Plasmic Studio.
-[Learn more about code components](https://code-components.plasmic.site).
+[Learn more about code components](https://docs.plasmic.app/learn/code-components/).
 
 ### Codegen