Merge pull request #1 from plasmicapp/master

get up to date

.eslintrc.js

@@ -42,6 +42,12 @@ module.exports = {
     // Maybe not needed, from public-packages
     // "@typescript-eslint/no-empty-interface": "off",
     // "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/triple-slash-reference": [
+      "error",
+      {
+        types: "always",
+      },
+    ],
     "no-restricted-properties": [
       "error",
       {
@@ -254,10 +260,11 @@ module.exports = {
             ],
           },
         ],
-        "path/no-relative-imports": [
+        "no-relative-import-paths/no-relative-import-paths": [
           "error",
           {
-            maxDepth: 0,
+            rootDir: "platform/wab/src",
+            prefix: "@",
           },
         ],
       },
@@ -368,7 +375,13 @@ module.exports = {
       },
     },
   ],
-  plugins: ["@typescript-eslint", "react", "jest", "import", "path"],
+  plugins: [
+    "@typescript-eslint",
+    "react",
+    "jest",
+    "import",
+    "eslint-plugin-no-relative-import-paths",
+  ],
   extends: [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",

package.json

@@ -47,16 +47,16 @@
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-path": "1.2.2",
+    "eslint-plugin-no-relative-import-paths": "1.5.4",
     "eslint-plugin-prettier": "5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "if-env": "^1.0.4",
     "jest": "29.7.0",
     "lerna": "^7.4.2",
     "nx": "^16",
     "prettier": "2.8.8",
-    "tsconfig-paths": "^4.2.0",
     "ts-node": "^10.9.2",
+    "tsconfig-paths": "^4.2.0",
     "typescript": "5.2.2"
   },
   "workspaces": [

packages/auth-react/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.20",
+  "version": "0.0.21",
   "license": "MIT",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@plasmicapp/auth-api": "0.0.17",
     "@plasmicapp/isomorphic-unfetch": "1.0.3",
-    "@plasmicapp/query": "0.1.78"
+    "@plasmicapp/query": "0.1.79"
   },
   "publishConfig": {
     "access": "public"

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/cli",
-  "version": "0.1.327",
+  "version": "0.1.329",
   "description": "plasmic cli for syncing local code with Plasmic designs",
   "engines": {
     "node": ">=12"

packages/cli/src/actions/export.ts

@@ -138,6 +138,12 @@ export async function exportProjectsCli(opts: ExportArgs): Promise<void> {
       );
     }
 
+    if (bundle.projectConfig.reactWebExportedFiles) {
+      for (const file of bundle.projectConfig.reactWebExportedFiles) {
+        writeFile(file.fileName, file.content);
+      }
+    }
+
     await Promise.all(promises);
   };
 

packages/cli/src/api.ts

@@ -66,6 +66,11 @@ export interface ProjectMetaBundle {
   jsBundleThemes?: JsBundleTheme[];
   globalContextBundle?: GlobalContextBundle;
   splitsProviderBundle?: SplitsProviderBundle;
+  // A list of files that are exported from the project and *can* be used by the user
+  reactWebExportedFiles?: Array<{
+    fileName: string;
+    content: string;
+  }>;
 }
 
 export interface IconBundle {

packages/data-sources/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.150",
+  "version": "0.1.153",
   "license": "MIT",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -47,9 +47,9 @@
   },
   "dependencies": {
     "@plasmicapp/data-sources-context": "0.1.21",
-    "@plasmicapp/host": "1.0.191",
+    "@plasmicapp/host": "1.0.194",
     "@plasmicapp/isomorphic-unfetch": "1.0.3",
-    "@plasmicapp/query": "0.1.78",
+    "@plasmicapp/query": "0.1.79",
     "fast-stringify": "^2.0.0"
   },
   "publishConfig": {

packages/host/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/host",
-  "version": "1.0.191",
+  "version": "1.0.194",
   "description": "plasmic library for app hosting",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
@@ -43,7 +43,7 @@
     "analyze": "size-limit --why"
   },
   "dependencies": {
-    "@plasmicapp/query": "0.1.78",
+    "@plasmicapp/query": "0.1.79",
     "csstype": "^3.1.2",
     "window-or-global": "^1.0.1"
   },

packages/host/src/prop-types.ts

@@ -202,11 +202,19 @@ export interface ClassType<P> extends PropTypeBase<P> {
      * knows what this selector means.
      */
     label?: string;
+    /**
+     * Initial styles to be applied for this selector
+     */
+    defaultStyles?: CSSProperties;
   }[];
   /**
    * If specified, then only shows these style sections for styling this class
    */
   styleSections?: StyleSection[];
+  /**
+   * Initial styles to be applied for this class
+   */
+  defaultStyles?: CSSProperties;
 }
 
 export interface ThemeResetClassType<P> extends PropTypeBase<P> {

packages/host/src/registerGlobalContext.ts

@@ -18,7 +18,6 @@ export type PropType<P> =
   | NumberType<P>
   | JSONLikeType<P>
   | ChoiceType<P>
-  | CustomType<P>
   | DataSourceType<P>;
 
 type RestrictPropType<T, P> = T extends string

packages/loader-gatsby/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/loader-gatsby",
-  "version": "1.0.351",
+  "version": "1.0.354",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "exports": {
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@plasmicapp/loader-core": "1.0.132",
-    "@plasmicapp/loader-react": "1.0.348",
+    "@plasmicapp/loader-react": "1.0.351",
     "@plasmicapp/watcher": "1.0.83",
     "lodash": "^4.17.21"
   }

packages/loader-nextjs/api/react-server.api.md

@@ -5,9 +5,10 @@
 ```ts
 
 /// <reference types="node" />
-/// <reference types="react" />
 
+import { fetchExtractedHeadMetadata as __EXPERMIENTAL__fetchExtractedHeadMetadata } from '@plasmicapp/nextjs-app-router/react-server';
 import { fetchExtractedQueryData as __EXPERMIENTAL__fetchExtractedQueryData } from '@plasmicapp/nextjs-app-router/react-server';
+import { withPlasmicMetadata as __EXPERMIENTAL__withPlasmicMetadata } from '@plasmicapp/nextjs-app-router/react-server';
 import { CodeComponentMeta } from '@plasmicapp/loader-react';
 import { ComponentLookupSpec } from '@plasmicapp/loader-react';
 import { ComponentMeta } from '@plasmicapp/loader-react/react-server-conditional';
@@ -35,7 +36,8 @@ import { plasmicPrepass } from '@plasmicapp/loader-react';
 import { PlasmicRootProvider as PlasmicRootProvider_2 } from '@plasmicapp/loader-react';
 import { PlasmicTranslator } from '@plasmicapp/loader-react';
 import { PropType } from '@plasmicapp/loader-react';
-import * as React_2 from 'react';
+import { default as React_2 } from 'react';
+import * as React_3 from 'react';
 import { repeatedElement } from '@plasmicapp/loader-react';
 import { ServerResponse } from 'http';
 import { TokenRegistration } from '@plasmicapp/loader-react';
@@ -47,10 +49,20 @@ import { useSelector } from '@plasmicapp/loader-react';
 import { useSelectors } from '@plasmicapp/loader-react';
 
 // @public (undocumented)
-export const __EXPERMIENTAL__extractPlasmicQueryData: (element: React.ReactElement, loader: ClientExports.NextJsPlasmicComponentLoader) => Promise<Record<string, any>>;
+export const __EXPERMIENTAL__extractPlasmicQueryData: (element: React_2.ReactElement, loader: ClientExports.NextJsPlasmicComponentLoader) => Promise<Record<string, any>>;
+
+export { __EXPERMIENTAL__fetchExtractedHeadMetadata }
 
 export { __EXPERMIENTAL__fetchExtractedQueryData }
 
+// @public
+export function __EXPERMIENTAL__withExtractPlasmicQueryData(plasmicRootProvider: React_2.ReactElement, { pathname, searchParams, }: {
+    pathname: string;
+    searchParams: Record<string, string | string[]> | undefined;
+}): Promise<React_2.JSX.Element>;
+
+export { __EXPERMIENTAL__withPlasmicMetadata }
+
 export { ComponentMeta }
 
 export { ComponentRenderData }

packages/loader-nextjs/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.376",
+  "version": "1.0.385",
   "license": "MIT",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -47,7 +47,7 @@
     "build:types": "yarn tsc",
     "build:index": "node ../../build.mjs ./src/index.tsx --use-client",
     "build:edge": "node ../../build.mjs ./src/edge.ts --no-esm",
-    "build:react-server": "node ../../build.mjs ./src/react-server.ts",
+    "build:react-server": "node ../../build.mjs ./src/react-server.tsx",
     "yalcp": "yalc publish --push",
     "test": "jest packages/loader-nextjs --config=../../jest.config.js --passWithNoTests",
     "coverage": "yarn test --coverage",
@@ -82,8 +82,8 @@
   "dependencies": {
     "@plasmicapp/loader-core": "1.0.132",
     "@plasmicapp/loader-edge": "1.0.65",
-    "@plasmicapp/loader-react": "1.0.348",
-    "@plasmicapp/nextjs-app-router": "1.0.6",
+    "@plasmicapp/loader-react": "1.0.351",
+    "@plasmicapp/nextjs-app-router": "1.0.11",
     "@plasmicapp/watcher": "1.0.83",
     "server-only": "0.0.1"
   },

packages/loader-nextjs/src/cache.ts

@@ -39,13 +39,22 @@ class FileCache {
   }
 }
 
+function hashString(str: string) {
+  let h = 0,
+    i = 0;
+  for (; i < str.length; h &= h) h = 31 * h + str.charCodeAt(i++);
+  return Math.abs(h);
+}
+
 function makeCache(opts: InitOptions) {
   const cacheDir = path.resolve(process.cwd(), ".next", ".plasmic");
   const cachePath = path.join(
     cacheDir,
-    `plasmic-${[...opts.projects.map((p) => `${p.id}@${p.version ?? ""}`)]
-      .sort()
-      .join("-")}${opts.preview ? "-preview" : ""}-cache.json`
+    `plasmic-${hashString(
+      [...opts.projects.map((p) => `${p.id}@${p.version ?? ""}`)]
+        .sort()
+        .join("-")
+    )}${opts.preview ? "-preview" : ""}-cache.json`
   );
   return new FileCache(cachePath);
 }

packages/loader-nextjs/src/index.tsx

@@ -297,6 +297,32 @@ function renderDynamicPayloadScripts(
   if (!missingModulesData || missingModulesData.length === 0) {
     return null;
   }
+
+  const isBrowser = typeof window !== "undefined";
+
+  if (isBrowser) {
+    // `next/script` seems to not be correctly added to `<head>` in the initial
+    // HTML sometimes when using custom documents:
+    // https://linear.app/plasmic/issue/PLA-10652
+
+    // Make sure to create the promises in this case - the script to actually fetch
+    // the chunks will be added once hydration is completed.
+    if (!(globalThis as any).__PlasmicBundlePromises) {
+      (globalThis as any).__PlasmicBundlePromises = {};
+    }
+    for (const { fileName } of missingModulesData) {
+      if (!(globalThis as any).__PlasmicBundlePromises[fileName]) {
+        (globalThis as any).__PlasmicBundlePromises[fileName] = new Promise(
+          (resolve) => {
+            (globalThis as any).__PlasmicBundlePromises[
+              "__promise_resolve_" + fileName
+            ] = resolve;
+          }
+        );
+      }
+    }
+  }
+
   return (
     <>
       <Script
@@ -328,16 +354,14 @@ function renderDynamicPayloadScripts(
               .join("\n")}`.trim(),
         }}
       ></Script>
-      {missingModulesData.length > 0 && (
-        <Script
-          strategy="beforeInteractive"
-          key={"load:" + missingModulesData.map((m) => m.fileName).join(";")}
-          id={"load:" + missingModulesData.map((m) => m.fileName).join(";")}
-          defer
-          async
-          src={loader.getChunksUrl(prefetchedData.bundle, missingModulesData)}
-        />
-      )}
+      <Script
+        strategy="beforeInteractive"
+        key={"load:" + missingModulesData.map((m) => m.fileName).join(";")}
+        id={"load:" + missingModulesData.map((m) => m.fileName).join(";")}
+        defer
+        async
+        src={loader.getChunksUrl(prefetchedData.bundle, missingModulesData)}
+      />
     </>
   );
 }