@tinacms/app 0.0.24 → 0.0.26

package/appFiles/src/fields/rich-text/monaco/use-debounce.ts

@@ -0,0 +1,37 @@
+/**
+
+Copyright 2021 Forestry.io Holdings, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+*/
+import { useState, useEffect } from 'react'
+export function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value)
+  useEffect(
+    () => {
+      // Update debounced value after delay
+      const handler = setTimeout(() => {
+        setDebouncedValue(value)
+      }, delay)
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      // This is how we prevent debounced value from updating if value is changed ...
+      // .. within the delay period. Timeout gets cleared and restarted.
+      return () => {
+        clearTimeout(handler)
+      }
+    },
+    [value, delay] // Only re-call effect if value or delay changes
+  )
+  return debouncedValue
+}

package/appFiles/src/lib/machines/document-machine.ts

@@ -11,14 +11,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import { Client, Field, Form, FormOptions, TinaCMS } from 'tinacms'
-import { assign, createMachine } from 'xstate'
+import { assign, createMachine, sendParent } from 'xstate'
 import {
   resolveForm,
   Templateable,
   TinaFieldEnriched,
   TinaSchema,
 } from 'tinacms'
-import { sendParent } from 'xstate/lib/actions'
 
 export type FieldType = Field & TinaFieldEnriched
 export type FormValues = Record<string, unknown>

package/appFiles/src/lib/machines/query-machine.ts

@@ -120,6 +120,9 @@ export const queryMachine =
             }
           | {
               type: 'FIELD_CHANGE'
+            }
+          | {
+              type: 'EDIT_MODE'
             },
       },
       id: '(machine)',
@@ -368,11 +371,16 @@ export const queryMachine =
             }
           })
           if (context.cms) {
-            context.cms.events.subscribe(`forms:fields:onChange`, () => {
-              callback({ type: 'FIELD_CHANGE' })
+            context.cms.events.subscribe(`forms:fields:onChange`, (event) => {
+              // Nested forms from rich-text also trigger this event
+              if (Object.keys(context.documentMap).includes(event.formId)) {
+                callback({ type: 'FIELD_CHANGE' })
+              }
             })
-            context.cms.events.subscribe(`forms:reset`, () => {
-              callback({ type: 'FIELD_CHANGE' })
+            context.cms.events.subscribe(`forms:reset`, (event) => {
+              if (Object.keys(context.documentMap).includes(event.formId)) {
+                callback({ type: 'FIELD_CHANGE' })
+              }
             })
           }
         },

package/appFiles/src/preview.tsx

@@ -13,12 +13,12 @@ limitations under the License.
 import React from 'react'
 import { useMachine } from '@xstate/react'
 import { queryMachine, initialContext } from './lib/machines/query-machine'
-import { useCMS, defineStaticConfig } from 'tinacms'
+import { useCMS, defineConfig } from 'tinacms'
 
-type Config = Parameters<typeof defineStaticConfig>[0]
+type Config = Parameters<typeof defineConfig>[0]
 
 type PostMessage = {
-  type: 'open' | 'close'
+  type: 'open' | 'close' | 'isEditMode'
   id: string
   data: object
 }
@@ -97,6 +97,13 @@ const QueryMachine = (props: {
 
   React.useEffect(() => {
     if (props.iframeRef.current) {
+      window.addEventListener('message', (event: MessageEvent<PostMessage>) => {
+        if (event?.data?.type === 'isEditMode') {
+          props.iframeRef?.current?.contentWindow?.postMessage({
+            type: 'tina:editMode',
+          })
+        }
+      })
       send({ type: 'IFRAME_MOUNTED', value: props.iframeRef.current })
       if (props.payload.type === 'open') {
         send({ type: 'ADD_QUERY', value: props.payload })

package/dist/index.js

@@ -326,6 +326,7 @@ var prodHTML = `<!DOCTYPE html>
 
 // src/index.ts
 var server;
+var hasCopiedFiles = false;
 var viteBuild = async ({
   rootPath,
   outputFolder,
@@ -336,7 +337,7 @@ var viteBuild = async ({
   const local = l;
   const localBuild = l;
   const node_env = JSON.stringify(process.env.NODE_ENV);
-  const generatedPath = import_path2.default.join(rootPath, ".tina/__generated__");
+  const generatedPath = import_path2.default.join(rootPath, ".tina", "__generated__");
   const outputPath = import_path2.default.join(rootPath, publicFolder, outputFolder);
   const appCopyPath = import_path2.default.join(__dirname, "..", "appFiles");
   const appRootPath = import_path2.default.join(generatedPath, "app");
@@ -365,6 +366,10 @@ var viteBuild = async ({
     },
     logLevel: "silent"
   };
+  if (!hasCopiedFiles) {
+    import_fs_extra.default.remove(import_path2.default.join(generatedPath, "prebuild"));
+    import_fs_extra.default.remove(import_path2.default.join(generatedPath, "app"));
+  }
   await (0, import_vite.build)(prebuildConfig);
   const alias = {
     TINA_IMPORT: configPrebuildPath
@@ -398,26 +403,30 @@ var viteBuild = async ({
     },
     logLevel: "silent"
   };
-  if (true) {
-    await import_fs_extra.default.copy(appCopyPath, appRootPath);
-  } else {
-    await import_fs_extra.default.createSymlink(import_path2.default.join(appCopyPath, "src"), import_path2.default.join(appRootPath, "src"), "dir");
-    await import_fs_extra.default.createSymlink(import_path2.default.join(appCopyPath, "package.json"), import_path2.default.join(appRootPath, "package.json"), "file");
-  }
-  await execShellCommand(`npm --prefix ${appRootPath} i --legacy-peer-deps --omit=dev --no-package-lock`);
-  await import_fs_extra.default.outputFile(import_path2.default.join(outputPath, ".gitignore"), `index.html
+  if (!hasCopiedFiles) {
+    if (process.env.MONOREPO_DEV) {
+      console.warn("Using monorepo dev mode, source files will be symlinked");
+      await import_fs_extra.default.createSymlink(appCopyPath, appRootPath, "dir");
+    } else {
+      await import_fs_extra.default.copy(appCopyPath, appRootPath);
+    }
+    await execShellCommand(`npm --prefix ${appRootPath} i --legacy-peer-deps --omit=dev --no-package-lock`);
+    await import_fs_extra.default.outputFile(import_path2.default.join(outputPath, ".gitignore"), `index.html
 assets/`);
+  }
   if (localBuild) {
-    const replaceAll = (string, target, value) => {
-      const regex = new RegExp(target, "g");
-      return string.valueOf().replace(regex, value);
-    };
-    await import_fs_extra.default.outputFile(devHTMLPath, replaceAll(devHTML, "INSERT_OUTPUT_FOLDER_NAME", outputFolder));
-    if (server) {
-      await server.close();
+    if (!hasCopiedFiles) {
+      const replaceAll = (string, target, value) => {
+        const regex = new RegExp(target, "g");
+        return string.valueOf().replace(regex, value);
+      };
+      await import_fs_extra.default.outputFile(devHTMLPath, replaceAll(devHTML, "INSERT_OUTPUT_FOLDER_NAME", outputFolder));
+    }
+    if (!server) {
+      server = await (0, import_vite.createServer)(config);
+      await server.listen();
     }
-    server = await (0, import_vite.createServer)(config);
-    await server.listen();
+    hasCopiedFiles = true;
   } else {
     await import_fs_extra.default.outputFile(prodHTMLPath, prodHTML);
     await (0, import_vite.build)(config);

package/dist/test-utils.d.ts

@@ -0,0 +1 @@
+export * from "../src/test-utils"

package/dist/test-utils.js

@@ -0,0 +1,294 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+
+// src/test-utils.ts
+__export(exports, {
+  printBlueprints: () => printBlueprints,
+  printState: () => printState
+});
+
+// appFiles/src/lib/formify/index.ts
+var G = __toModule(require("graphql"));
+var formify = async ({
+  schema,
+  optimizedDocumentNode
+}) => {
+  const blueprints = [];
+  const visitor = {
+    OperationDefinition: (node2) => {
+      if (!node2.name) {
+        return __spreadProps(__spreadValues({}, node2), {
+          name: {
+            kind: "Name",
+            value: `QueryOperation`
+          }
+        });
+      }
+      return node2;
+    }
+  };
+  const documentNodeWithName = G.visit(optimizedDocumentNode, visitor);
+  const optimizedQuery = documentNodeWithName;
+  const typeInfo = new G.TypeInfo(schema);
+  const addMetaFields = (node2) => {
+    var _a;
+    return __spreadProps(__spreadValues({}, node2), {
+      selectionSet: __spreadProps(__spreadValues({}, node2.selectionSet || {
+        kind: "SelectionSet",
+        selections: []
+      }), {
+        selections: [...((_a = node2.selectionSet) == null ? void 0 : _a.selections) || [], ...metaFields]
+      })
+    });
+  };
+  const getPath = (path, node2) => {
+    let currentLevel = node2;
+    const fieldPath = [];
+    path.forEach((item) => {
+      currentLevel = currentLevel[item];
+      if (!Array.isArray(currentLevel)) {
+        if (currentLevel.kind === "Field") {
+          fieldPath.push(currentLevel.name.value);
+        }
+      }
+    });
+    return fieldPath;
+  };
+  const addBlueprints = (node2, _key, _parent, path, ancestors) => {
+    const fieldPath = getPath(path, ancestors[0]);
+    const nextInfo = (innerNode) => {
+      var _a, _b;
+      const fields2 = [];
+      G.visit(innerNode, G.visitWithTypeInfo(typeInfo, {
+        Field: {
+          enter: (node3) => {
+            var _a2, _b2, _c;
+            typeInfo.enter(node3);
+            if (node3.name.value !== innerNode.name.value) {
+              if ((_a2 = node3.selectionSet) == null ? void 0 : _a2.selections.length) {
+                const subInfo = nextInfo(node3);
+                fields2.push({
+                  name: node3.name.value,
+                  alias: ((_b2 = node3.alias) == null ? void 0 : _b2.value) || node3.name.value,
+                  fields: subInfo.fields
+                });
+                return false;
+              } else {
+                fields2.push({
+                  name: node3.name.value,
+                  alias: ((_c = node3.alias) == null ? void 0 : _c.value) || node3.name.value
+                });
+              }
+            }
+          },
+          leave: (node3) => {
+            typeInfo.leave(node3);
+          }
+        }
+      }));
+      if (fields2 == null ? void 0 : fields2.length) {
+        return {
+          name: innerNode.name.value,
+          alias: ((_a = innerNode.alias) == null ? void 0 : _a.value) || innerNode.name.value,
+          fields: fields2
+        };
+      } else {
+        return {
+          name: innerNode.name.value,
+          alias: ((_b = innerNode.alias) == null ? void 0 : _b.value) || innerNode.name.value
+        };
+      }
+    };
+    const result = nextInfo(node2);
+    const mergeFields = (fields2) => {
+      if (!fields2) {
+        return [];
+      }
+      const groupBy = (items, key) => items.reduce((result2, item) => __spreadProps(__spreadValues({}, result2), {
+        [item[key]]: [...result2[item[key]] || [], item]
+      }), {});
+      const groups = groupBy(fields2, "alias");
+      const groupedFields = [];
+      Object.entries(groups).forEach(([name, items]) => {
+        const subFields = [];
+        items.forEach((item) => {
+          var _a;
+          (_a = item.fields) == null ? void 0 : _a.forEach((field) => subFields.push(field));
+        });
+        const fieldName = items[0].name;
+        const fieldAlias = items[0].alias;
+        if (subFields == null ? void 0 : subFields.length) {
+          groupedFields.push({
+            name: fieldName,
+            alias: fieldAlias,
+            fields: subFields
+          });
+        } else {
+          groupedFields.push({ name: fieldName, alias: fieldAlias });
+        }
+      });
+      return groupedFields;
+    };
+    const fields = mergeFields(result.fields);
+    if (false) {
+    } else {
+      if (fields == null ? void 0 : fields.length) {
+        blueprints.push({
+          name: result.name,
+          alias: result.alias,
+          fields,
+          path: fieldPath
+        });
+      } else {
+        blueprints.push({
+          name: result.name,
+          alias: result.alias,
+          path: fieldPath
+        });
+      }
+    }
+  };
+  const formifyVisitor = {
+    InlineFragment: {
+      enter: (node2) => {
+        typeInfo.enter(node2);
+      },
+      leave: (node2) => {
+        typeInfo.leave(node2);
+      }
+    },
+    Field: {
+      enter: (node2, key, parent, path, ancestors) => {
+        typeInfo.enter(node2);
+        const type = typeInfo.getType();
+        if (type) {
+          const namedType = G.getNamedType(type);
+          if (G.isInterfaceType(namedType)) {
+            if (namedType.name === "Node") {
+              return addMetaFields(node2, key, parent, path, ancestors);
+            }
+          }
+          if (G.isUnionType(namedType)) {
+            const types = namedType.getTypes();
+            if (types.every((type2) => {
+              return type2.getInterfaces().some((intfc) => intfc.name === "Node");
+            })) {
+              return addMetaFields(node2, key, parent, path, ancestors);
+            }
+          }
+          if (G.isObjectType(namedType)) {
+            if (namedType.getInterfaces().some((intfc) => intfc.name === "Node")) {
+              return addMetaFields(node2, key, parent, path, ancestors);
+            }
+          }
+        }
+      }
+    }
+  };
+  const blueprintVisitor = {
+    InlineFragment: {
+      enter: (node2) => {
+        typeInfo.enter(node2);
+      },
+      leave: (node2) => {
+        typeInfo.leave(node2);
+      }
+    },
+    Field: {
+      enter: (node2, key, parent, path, ancestors) => {
+        typeInfo.enter(node2);
+        const type = typeInfo.getType();
+        if (type) {
+          const namedType = G.getNamedType(type);
+          if (G.isInterfaceType(namedType)) {
+            if (namedType.name === "Node") {
+              addBlueprints(node2, key, parent, path, ancestors);
+              return false;
+            }
+          }
+          if (G.isUnionType(namedType)) {
+            const types = namedType.getTypes();
+            if (types.every((type2) => {
+              return type2.getInterfaces().some((intfc) => intfc.name === "Node");
+            })) {
+              addBlueprints(node2, key, parent, path, ancestors);
+              return false;
+            }
+          }
+          if (G.isObjectType(namedType)) {
+            if (namedType.getInterfaces().some((intfc) => intfc.name === "Node")) {
+              addBlueprints(node2, key, parent, path, ancestors);
+              return false;
+            }
+          }
+        }
+      }
+    }
+  };
+  const formifiedQuery = G.visit(optimizedQuery, G.visitWithTypeInfo(typeInfo, formifyVisitor));
+  G.visit(formifiedQuery, G.visitWithTypeInfo(typeInfo, blueprintVisitor));
+  return { formifiedQuery, blueprints };
+};
+var node = G.parse(`
+ query Sample {
+  ...on Document {
+    _internalSys: _sys {
+      path
+    }
+  }
+ }`);
+var metaFields = node.definitions[0].selectionSet.selections;
+
+// src/test-utils.ts
+var printState = (obj) => {
+  return obj;
+};
+var printBlueprints = ({ schema, client, query }) => {
+  const optimizedQuery = client.getOptimizedQuery(query);
+  const res = formify({ schema, optimizedQuery });
+  const { formifiedQuery, blueprints } = res;
+  return { formifiedQuery, blueprints };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  printBlueprints,
+  printState
+});

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "@tinacms/app",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "main": "dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
       "require": "./dist/index.js"
+    },
+    "./dist/test-utils": {
+      "types": "./dist/test-utils.d.ts",
+      "import": "./dist/test-utils.es.js",
+      "require": "./dist/test-utils.js"
     }
   },
   "files": [
@@ -20,6 +25,10 @@
       {
         "name": "src/index.ts",
         "target": "node"
+      },
+      {
+        "name": "src/test-utils.ts",
+        "target": "node"
       }
     ]
   },
@@ -28,7 +37,8 @@
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2",
     "@tinacms/scripts": "0.51.3",
-    "tinacms": "0.69.19",
+    "tinacms": "0.70.0",
+    "@tinacms/mdx": "0.61.15",
     "jest": "^27.0.6"
   },
   "dependencies": {
@@ -53,7 +63,10 @@
     "react-router-dom": "6.3.0",
     "tailwindcss": "^3.1.6",
     "typescript": "^4.6.4",
-    "vite": "^3.1.3"
+    "vite": "3.1.8",
+    "@monaco-editor/react": "4.4.5",
+    "monaco-editor": "0.31.0",
+    "webfontloader": "1.6.28"
   },
   "scripts": {
     "types": "rm dist/index.d.ts && touch dist/index.d.ts && echo \"export declare const viteBuild: (args: any) => any\" > dist/index.d.ts",