@tinacms/app 0.0.22 → 0.0.24

package/appFiles/src/lib/machines/util.ts

@@ -0,0 +1,205 @@
+/**
+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 { DocumentBlueprint } from '../formify/types'
+
+type Location = number[] | null
+
+export const getBlueprintValues = (
+  data: object,
+  path: string,
+  index: number = 0
+): string[] | undefined => {
+  if (!data) {
+    return
+  }
+  const pathArray = path.split('.')
+  const next = pathArray[index]
+  if (next === '[]') {
+    if (Array.isArray(data)) {
+      const values: string[] = []
+      data.forEach((item) => {
+        const res = getBlueprintValues(item, path, index + 1)
+        if (res) {
+          res.forEach((item) => {
+            values.push(item)
+          })
+        }
+      })
+      return values
+    }
+  } else {
+    const value = data[next]
+    // Is last item
+    if (pathArray.length === index + 1) {
+      if (Array.isArray(value)) {
+        return value
+      } else {
+        return [value]
+      }
+    } else {
+      return getBlueprintValues(value, path)
+    }
+  }
+}
+
+export const getAllIn = (
+  data: object | object[] | null,
+  path: string,
+  index: number = 0,
+  location: Location = null
+): { value: { id: string }; location: Location }[] | undefined => {
+  if (!data) {
+    return
+  }
+  const pathArray = path.split('.')
+  const next = pathArray[index]
+  if (next === '[]') {
+    if (Array.isArray(data)) {
+      const values: { value: { id: string }; location: Location }[] = []
+      data.forEach((item, dataIndex) => {
+        const res = getAllIn(item, path, index + 1, [
+          ...(location || []),
+          dataIndex,
+        ])
+        if (res) {
+          res.forEach((item) => {
+            values.push(item)
+          })
+        }
+      })
+      return values
+    }
+  } else {
+    const value = data[next]
+    // Is last item
+    if (pathArray.length === index + 1) {
+      if (Array.isArray(value)) {
+        const v = value.map((item, index) => ({
+          value: item,
+          location: [...(location || []), index],
+        }))
+        return v
+      } else {
+        if (typeof value === 'string') {
+          const v = [{ value: { id: value }, location }]
+          return v
+        } else {
+          // FIXME: this should always be `_internalSys.path` but we're not populating the
+          // data properly on resolveData yet. But even when we are, will need to keep that out
+          // of the user-provided payload (maybe not?)
+          const id = value?._internalSys?.path || value?.id
+          if (id) {
+            const v = [{ value: { id, ...value }, location }]
+            return v
+          }
+        }
+      }
+    } else {
+      const v = getAllIn(value, path, index + 1, location)
+      return v
+    }
+  }
+}
+export const getAllInBlueprint = (
+  data: object | object[] | null,
+  path: string,
+  index: number = 0,
+  location: Location = null
+):
+  | { value: { _internalSys: { path: string } }; location: Location }[]
+  | undefined => {
+  if (!data) {
+    return
+  }
+  const pathArray = path.split('.')
+  const next = pathArray[index]
+  if (next === '[]') {
+    if (Array.isArray(data)) {
+      const values: {
+        value: { _internalSys: { path: string } }
+        location: Location
+      }[] = []
+      data.forEach((item, dataIndex) => {
+        const res = getAllInBlueprint(item, path, index + 1, [
+          ...(location || []),
+          dataIndex,
+        ])
+        if (res) {
+          res.forEach((item) => {
+            values.push(item)
+          })
+        }
+      })
+      return values
+    }
+  } else {
+    const value = data[next]
+    // Is last item
+    if (pathArray.length === index + 1) {
+      if (Array.isArray(value)) {
+        throw new Error(`Unexpected array value for getAllInBlueprint`)
+      } else {
+        if (typeof value === 'string') {
+          throw new Error(`Unexpected string value for getAllInBlueprint`)
+        } else {
+          const id = value?._internalSys?.path || value?.id
+          if (id) {
+            const v = [
+              { value: { _internalSys: value._internalSys }, location },
+            ]
+            return v
+          }
+        }
+      }
+    } else {
+      const v = getAllInBlueprint(value, path, index + 1, location)
+      return v
+    }
+  }
+}
+
+export const getBlueprintFromLocation = (
+  location: string,
+  blueprints: DocumentBlueprint[]
+) => {
+  const blueprintString = location
+    .split('.')
+    .map((item) => (isNaN(Number(item)) ? item : '[]'))
+    .join('.')
+  const blueprint = blueprints.find(({ id }) => id === blueprintString)
+  if (!blueprint) {
+    throw new Error(`Unable to find blueprint at ${blueprintString}`)
+  }
+  return blueprint
+}
+
+// FIXME: this assumes children are in order (which they
+// are AFAIK but shouldn't be relied on)
+export const getBlueprintChildren = (
+  blueprint: DocumentBlueprint,
+  blueprints: DocumentBlueprint[]
+) => {
+  const foundChildren: DocumentBlueprint[] = []
+  blueprints.forEach((otherBlueprint) => {
+    if (foundChildren.find(({ id }) => otherBlueprint.id.startsWith(id))) {
+      return
+    }
+    if (
+      otherBlueprint.id.startsWith(blueprint.id) &&
+      otherBlueprint.id !== blueprint.id
+    ) {
+      foundChildren.push(otherBlueprint)
+    }
+  })
+  return foundChildren
+}

package/appFiles/src/main.tsx

@@ -0,0 +1,24 @@
+/**
+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 React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+import './index.css'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+)

package/appFiles/src/preview.tsx

@@ -0,0 +1,114 @@
+/**
+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 React from 'react'
+import { useMachine } from '@xstate/react'
+import { queryMachine, initialContext } from './lib/machines/query-machine'
+import { useCMS, defineStaticConfig } from 'tinacms'
+
+type Config = Parameters<typeof defineStaticConfig>[0]
+
+type PostMessage = {
+  type: 'open' | 'close'
+  id: string
+  data: object
+}
+
+export const Preview = (
+  props: Config & {
+    url: string
+    iframeRef: React.MutableRefObject<HTMLIFrameElement>
+  }
+) => {
+  const [activeQuery, setActiveQuery] = React.useState<PostMessage | null>(null)
+
+  React.useEffect(() => {
+    if (props.iframeRef.current) {
+      window.addEventListener('message', (event: MessageEvent<PostMessage>) => {
+        if (event.data.type === 'open') {
+          setActiveQuery(event.data)
+        }
+      })
+    }
+  }, [props.iframeRef.current])
+
+  return (
+    <div className="tina-tailwind">
+      {activeQuery && (
+        <QueryMachine
+          key={activeQuery.id}
+          payload={activeQuery}
+          iframeRef={props.iframeRef}
+        />
+      )}
+      <div className="h-full overflow-scroll">
+        <div className="">
+          <div className="col-span-5 ">
+            <div className="h-screen flex flex-col">
+              <div className="relative flex-1 bg-gray-300 col-span-2 overflow-scroll flex items-center justify-center">
+                <iframe
+                  ref={props.iframeRef}
+                  className="h-full w-full bg-white"
+                  src={props.url}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const QueryMachine = (props: {
+  payload: PostMessage
+  iframeRef: React.MutableRefObject<HTMLIFrameElement>
+}) => {
+  const cms = useCMS()
+
+  const machine = React.useMemo(
+    () =>
+      queryMachine.withContext({
+        ...initialContext,
+        cms,
+        // @ts-ignore FIXME: add formifyCallback args to Config type
+        formifyCallback: props.formifyCallback,
+      }),
+    []
+  )
+
+  const [state, send] = useMachine(machine)
+  React.useEffect(() => {
+    if (state.matches('pipeline.ready')) {
+      cms.events.dispatch({ type: 'forms:register', value: 'complete' })
+    } else if (state.matches('pipeline.initializing')) {
+      cms.events.dispatch({ type: 'forms:register', value: 'start' })
+    }
+  }, [JSON.stringify(state.value)])
+
+  React.useEffect(() => {
+    if (props.iframeRef.current) {
+      send({ type: 'IFRAME_MOUNTED', value: props.iframeRef.current })
+      if (props.payload.type === 'open') {
+        send({ type: 'ADD_QUERY', value: props.payload })
+      }
+      window.addEventListener('message', (event: MessageEvent<PostMessage>) => {
+        // useTinaHook cleans itself up when the component unmounts by sending a close message
+        if (event.data.type === 'close') {
+          send({ type: 'REMOVE_QUERY' })
+        }
+      })
+    }
+  }, [props.iframeRef.current])
+
+  return null
+}

package/appFiles/src/vite-env.d.ts

@@ -0,0 +1,14 @@
+/**
+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.
+*/
+
+/// <reference types="vite/client" />

package/dist/index.js

@@ -2,22 +2,8 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   __markAsModule(target);
@@ -40,10 +26,10 @@ var __toModule = (module2) => {
 __export(exports, {
   viteBuild: () => viteBuild
 });
-var import_plugin_react = __toModule(require("@vitejs/plugin-react"));
 var import_fs_extra = __toModule(require("fs-extra"));
-var import_vite = __toModule(require("vite"));
 var import_path2 = __toModule(require("path"));
+var import_vite = __toModule(require("vite"));
+var import_plugin_react = __toModule(require("@vitejs/plugin-react"));
 
 // src/tailwind.ts
 var import_tailwindcss = __toModule(require("tailwindcss"));
@@ -296,122 +282,163 @@ var viteTina = () => {
   };
 };
 
+// src/html.ts
+var devHTML = `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/tina.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TinaCMS</title>
+  </head>
+
+  <!-- if development -->
+  <script type="module">
+    import RefreshRuntime from 'http://localhost:5173/@react-refresh'
+    RefreshRuntime.injectIntoGlobalHook(window)
+    window.$RefreshReg$ = () => {}
+    window.$RefreshSig$ = () => (type) => type
+    window.__vite_plugin_react_preamble_installed__ = true
+  <\/script>
+  <script type="module" src="http://localhost:5173/@vite/client"><\/script>
+  <script
+    type="module"
+    src="http://localhost:5173/INSERT_OUTPUT_FOLDER_NAME/src/main.tsx"
+  ><\/script>
+  <body class="tina-tailwind">
+    <div id="root"></div>
+  </body>
+</html>`;
+var prodHTML = `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TinaCMS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"><\/script>
+  </body>
+</html>
+`;
+
 // src/index.ts
-var import_esbuild = __toModule(require("esbuild"));
 var server;
 var viteBuild = async ({
   rootPath,
   outputFolder,
   publicFolder,
-  local,
+  local: l,
   apiUrl
 }) => {
-  const prebuildPath = import_path2.default.resolve(__dirname, "assets");
-  const pathToConfig = import_path2.default.join(rootPath, ".tina", "config");
-  const packageJSONFilePath = import_path2.default.join(rootPath, "package.json");
-  const outDir = import_path2.default.join(rootPath, publicFolder, outputFolder);
-  await import_fs_extra.default.emptyDir(outDir);
-  await import_fs_extra.default.ensureDir(outDir);
-  await import_fs_extra.default.writeFile(import_path2.default.join(rootPath, publicFolder, outputFolder, ".gitignore"), `index.html
-assets/
-vite.svg`);
-  const packageJSON = JSON.parse(import_fs_extra.default.readFileSync(packageJSONFilePath).toString() || "{}");
-  const define = {};
-  const deps = (packageJSON == null ? void 0 : packageJSON.dependencies) || [];
-  const peerDeps = (packageJSON == null ? void 0 : packageJSON.peerDependencies) || [];
-  const devDeps = (packageJSON == null ? void 0 : packageJSON.devDependencies) || [];
-  const external = Object.keys(__spreadValues(__spreadValues(__spreadValues({}, deps), peerDeps), devDeps));
-  const out = import_path2.default.join(rootPath, ".tina", "__generated__", "out.jsx");
-  await (0, import_esbuild.build)({
-    bundle: true,
-    platform: "browser",
-    target: ["es2020"],
-    entryPoints: [pathToConfig],
-    format: "esm",
-    treeShaking: true,
-    outfile: out,
-    external: [...external, "./node_modules/*"],
-    loader: loaders,
-    define
-  });
-  const base = `/${outputFolder}/`;
-  const MONOREPO_DEV = process.env.MONOREPO_DEV;
-  const root = MONOREPO_DEV ? import_path2.default.join(__dirname, "../appFiles") : outDir;
+  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 outputPath = import_path2.default.join(rootPath, publicFolder, outputFolder);
+  const appCopyPath = import_path2.default.join(__dirname, "..", "appFiles");
+  const appRootPath = import_path2.default.join(generatedPath, "app");
+  const devHTMLPath = import_path2.default.join(outputPath, "index.html");
+  const prodHTMLPath = import_path2.default.join(appRootPath, "index.html");
+  const configPath = import_path2.default.join(rootPath, ".tina", "config");
+  const configPrebuildPath = import_path2.default.join(generatedPath, "prebuild", "config.js");
+  const prebuildConfig = {
+    root: import_path2.default.join(generatedPath, "prebuild"),
+    esbuild: {
+      target: "es2020"
+    },
+    mode: local ? "development" : "production",
+    build: {
+      outDir: import_path2.default.join(generatedPath, "prebuild"),
+      lib: {
+        entry: configPath,
+        fileName: () => {
+          return "config.js";
+        },
+        formats: ["es"]
+      },
+      rollupOptions: {
+        external: ["react", "react-dom", "tinacms", "next"]
+      }
+    },
+    logLevel: "silent"
+  };
+  await (0, import_vite.build)(prebuildConfig);
+  const alias = {
+    TINA_IMPORT: configPrebuildPath
+  };
   const config = {
-    root,
-    base,
+    root: appRootPath,
+    base: `/${outputFolder}/`,
     mode: local ? "development" : "production",
-    plugins: [(0, import_plugin_react.default)(), viteTina()],
+    plugins: [(0, import_vite.splitVendorChunkPlugin)(), (0, import_plugin_react.default)(), viteTina()],
     define: {
-      "process.env": {},
+      "process.env": "new Object()",
       __API_URL__: `"${apiUrl}"`
     },
+    esbuild: {
+      target: "es2020"
+    },
     server: {
-      strictPort: true,
       port: 5173,
       fs: {
         strict: false
       }
     },
     resolve: {
-      alias: {
-        TINA_IMPORT: out
-      }
+      alias,
+      dedupe: ["graphql"]
     },
     build: {
       sourcemap: true,
-      outDir,
+      outDir: outputPath,
       emptyOutDir: false
     },
     logLevel: "silent"
   };
-  if (local) {
-    const indexDev = await import_fs_extra.default.readFileSync(import_path2.default.join(__dirname, "index.dev.html")).toString();
-    if (MONOREPO_DEV) {
-      console.warn("MONOREPO_DEV mode, vite root is @tinacms/app");
-      await import_fs_extra.default.outputFileSync(import_path2.default.join(outDir, "index.html"), indexDev.replace(`INSERT_OUTPUT_FOLDER_NAME`, outputFolder).replace("assets/out.es.js", "src/main.tsx"));
-    } else {
-      await import_fs_extra.default.outputFileSync(import_path2.default.join(outDir, "index.html"), indexDev.replace(`INSERT_OUTPUT_FOLDER_NAME`, outputFolder));
-      await import_fs_extra.default.copySync(prebuildPath, import_path2.default.join(outDir, "assets"));
-    }
+  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
+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();
     }
     server = await (0, import_vite.createServer)(config);
     await server.listen();
-    await server.printUrls();
   } else {
-    await import_fs_extra.default.copyFileSync(import_path2.default.join(__dirname, "index.html"), import_path2.default.join(outDir, "index.html"));
-    await import_fs_extra.default.copySync(prebuildPath, import_path2.default.join(outDir, "assets"));
+    await import_fs_extra.default.outputFile(prodHTMLPath, prodHTML);
     await (0, import_vite.build)(config);
-    await import_fs_extra.default.rmSync(out);
+  }
+  if (!node_env) {
+    delete process.env.NODE_ENV;
+  } else {
+    process.env.NODE_ENV = node_env;
   }
 };
-var loaders = {
-  ".aac": "file",
-  ".css": "file",
-  ".eot": "file",
-  ".flac": "file",
-  ".gif": "file",
-  ".jpeg": "file",
-  ".jpg": "file",
-  ".json": "json",
-  ".mp3": "file",
-  ".mp4": "file",
-  ".ogg": "file",
-  ".otf": "file",
-  ".png": "file",
-  ".svg": "file",
-  ".ttf": "file",
-  ".wav": "file",
-  ".webm": "file",
-  ".webp": "file",
-  ".woff": "file",
-  ".woff2": "file",
-  ".js": "jsx",
-  ".jsx": "jsx",
-  ".tsx": "tsx"
-};
+function execShellCommand(cmd) {
+  const exec = require("child_process").exec;
+  return new Promise((resolve, reject) => {
+    exec(cmd, (error, stdout, stderr) => {
+      if (error) {
+        reject(error);
+      }
+      resolve(stdout ? stdout : stderr);
+    });
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   viteBuild