@tinacms/cli 0.60.9 → 0.60.10

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # tinacms-cli
 
+## 0.60.10
+
+### Patch Changes
+
+- 6154d12b8: Check for appropriate versions of react and react-dom before initializing with tinacms init
+- 8c23d69a2: Adds an MDX example when you run @tinacms/cli init
+- abf25c673: The schema can now to used on the frontend (optional for now but will be the main path moving forward).
+
+  ### How to migrate.
+
+  If you gone though the `tinacms init` process there should be a file called `.tina/components/TinaProvider`. In that file you can import the schema from `schema.ts` and add it to the TinaCMS wrapper component.
+
+  ```tsx
+  import TinaCMS from 'tinacms'
+  import schema, { tinaConfig } from '../schema.ts'
+
+  // Importing the TinaProvider directly into your page will cause Tina to be added to the production bundle.
+  // Instead, import the tina/provider/index default export to have it dynamially imported in edit-moode
+  /**
+   *
+   * @private Do not import this directly, please import the dynamic provider instead
+   */
+  const TinaProvider = ({ children }) => {
+    return (
+      <TinaCMS {...tinaConfig} schema={schema}>
+        {children}
+      </TinaCMS>
+    )
+  }
+
+  export default TinaProvider
+  ```
+
+- Updated dependencies [8b3be903f]
+- Updated dependencies [82174ff50]
+- Updated dependencies [a87e1e6fa]
+- Updated dependencies [abf25c673]
+- Updated dependencies [591640db0]
+- Updated dependencies [e8b0de1f7]
+- Updated dependencies [b01f2e382]
+  - @tinacms/datalayer@0.1.0
+  - @tinacms/graphql@0.59.9
+
 ## 0.60.9
 
 ### Patch Changes

package/dist/cmds/compile/defaultSchema.d.ts

@@ -10,4 +10,4 @@ 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.
 */
-export declare const defaultSchema = "\nimport { defineSchema, defineConfig } from \"tinacms\";\n\nexport default defineSchema({\n  collections: [\n    {\n      label: \"Blog Posts\",\n      name: \"posts\",\n      path: \"content/posts\",\n      fields: [\n        {\n          type: \"string\",\n          label: \"Title\",\n          name: \"title\",\n        },\n        {\n          type: \"string\",\n          label: \"Blog Post Body\",\n          name: \"body\",\n          isBody: true,\n          ui: {\n            component: \"textarea\"\n          },\n        },\n      ],\n    },\n  ],\n});\n\n\n\n\n// Your tina config\n// ==============\nconst branch = 'main'\n// When working locally, hit our local filesystem.\n// On a Vercel deployment, hit the Tina Cloud API\nconst apiURL =\n  process.env.NODE_ENV == 'development'\n    ? 'http://localhost:4001/graphql'\n    : `https://content.tinajs.io/content/${process.env.NEXT_PUBLIC_TINA_CLIENT_ID}/github/${branch}`\n\nexport const tinaConfig = defineConfig({\n  apiURL,\n  cmsCallback: (cms) => {\n    //  add your CMS callback code here (if you want)\n\n    // The Route Mapper\n    /**\n     * 1. Import `tinacms` and `RouteMappingPlugin`\n     **/\n    import(\"tinacms\").then(({ RouteMappingPlugin }) => {\n      /**\n       * 2. Define the `RouteMappingPlugin` see https://tina.io/docs/tinacms-context/#the-routemappingplugin for more details\n       **/\n      const RouteMapping = new RouteMappingPlugin((collection, document) => {\n        return undefined;\n      });\n      /**\n       * 3. Add the `RouteMappingPlugin` to the `cms`.\n       **/\n      cms.plugins.add(RouteMapping);\n    });\n\n    return cms;\n  },\n});\n";
+export declare const defaultSchema = "\nimport { defineSchema, defineConfig } from \"tinacms\";\n\nexport default defineSchema({\n  collections: [\n    {\n      label: \"Blog Posts\",\n      name: \"posts\",\n      path: \"content/posts\",\n      fields: [\n        {\n          type: \"string\",\n          label: \"Title\",\n          name: \"title\",\n        },\n        {\n          type: \"rich-text\",\n          label: \"Blog Post Body\",\n          name: \"body\",\n          isBody: true,\n          templates: [\n            {\n              name: \"PageSection\",\n              label: \"Page Section\",\n              fields: [\n                {\n                  type: \"string\",\n                  name: \"heading\",\n                  label: \"Heading\",\n                },\n                {\n                  type: \"string\",\n                  name: \"content\",\n                  label: \"Content\",\n                  ui: {\n                    component: \"textarea\"\n                  }\n                }\n              ],\n            },\n          ]\n        },\n      ],\n    },\n  ],\n});\n\n\n\n\n// Your tina config\n// ==============\nconst branch = 'main'\n// When working locally, hit our local filesystem.\n// On a Vercel deployment, hit the Tina Cloud API\nconst apiURL =\n  process.env.NODE_ENV == 'development'\n    ? 'http://localhost:4001/graphql'\n    : `https://content.tinajs.io/content/${process.env.NEXT_PUBLIC_TINA_CLIENT_ID}/github/${branch}`\n\nexport const tinaConfig = defineConfig({\n  apiURL,\n  cmsCallback: (cms) => {\n    //  add your CMS callback code here (if you want)\n\n    // The Route Mapper\n    /**\n     * 1. Import `tinacms` and `RouteMappingPlugin`\n     **/\n    import(\"tinacms\").then(({ RouteMappingPlugin }) => {\n      /**\n       * 2. Define the `RouteMappingPlugin` see https://tina.io/docs/tinacms-context/#the-routemappingplugin for more details\n       **/\n      const RouteMapping = new RouteMappingPlugin((collection, document) => {\n        return undefined;\n      });\n      /**\n       * 3. Add the `RouteMappingPlugin` to the `cms`.\n       **/\n      cms.plugins.add(RouteMapping);\n    });\n\n    return cms;\n  },\n});\n";

package/dist/cmds/init/index.d.ts

@@ -1,4 +1,7 @@
 export declare function initTina(ctx: any, next: () => void, options: any): Promise<void>;
+export declare const MIN_REACT_VERSION = ">=16.14.0";
+export declare function checkDeps(ctx: any, next: () => void, options: any): Promise<void>;
+export declare const checkPackage: (packageJSON: any, packageName: any) => boolean;
 export declare function installDeps(ctx: any, next: () => void, options: any): Promise<void>;
 export declare function tinaSetup(_ctx: any, next: () => void, _options: any): Promise<void>;
 export declare function successMessage(ctx: any, next: () => void, options: any): Promise<void>;

package/dist/cmds/init/setup-files/index.d.ts

@@ -11,6 +11,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 export declare const adminPage = "import { TinaAdmin } from 'tinacms';\nexport default TinaAdmin;\n";
-export declare const blogPost = "---\ntitle: Vote For Pedro\n---\n# Welcome to the blog.\n\n> To edit this site head over to the [`/admin`](/admin) route. Then click the pencil icon in the bottom lefthand corner to start editing \uD83E\uDD99. \n\n# Dixi gaude Arethusa\n\n## Oscula mihi\n\nLorem markdownum numerabilis armentorum platanus, cultros coniunx sibi per\nsilvas, nostris clausit sequemur diverso scopulosque. Fecit tum alta sed non\nfalcato murmura, geminas donata Amyntore, quoque Nox. Invitam inquit, modo\nnocte; ut ignis faciemque manes in imagine sinistra ut mucrone non ramos\nsepulcro supplex. Crescentesque populos motura, fit cumque. Verumque est; retro\nsibi tristia bracchia Aetola telae caruerunt et.\n\n\n## Mutato fefellimus sit demisit aut alterius sollicito\n\nPhaethonteos vestes quem involvite iuvenca; furiali anne: sati totumque,\n**corpora** cum rapacibus nunc! Nervis repetatne, miserabile doleas, deprensum\nhunc, fluctus Threicio, ad urbes, magicaeque, quid. Per credensque series adicis\npoteram [quidem](#)! Iam uni mensas victrix\nvittas ut flumina Satyri adulter; bellum iacet domitae repercusso truncis urnis\nmille rigidi sub taurum.\n\n\n";
+export declare const blogPost = "---\ntitle: Vote For Pedro\n---\n# Welcome to the blog.\n\n> To edit this site head over to the [`/admin`](/admin) route. Then click the pencil icon in the bottom lefthand corner to start editing \uD83E\uDD99. \n\n# Dixi gaude Arethusa\n\n<PageSection heading=\"Oscula mihi\" content=\"Lorem markdownum numerabilis armentorum platanus, cultros coniunx sibi per\nsilvas, nostris clausit sequemur diverso scopulosque. Fecit tum alta sed non\nfalcato murmura, geminas donata Amyntore, quoque Nox. Invitam inquit, modo\nnocte; ut ignis faciemque manes in imagine sinistra ut mucrone non ramos\nsepulcro supplex. Crescentesque populos motura, fit cumque. Verumque est; retro\nsibi tristia bracchia Aetola telae caruerunt et.\"/>\n\n\n## Mutato fefellimus sit demisit aut alterius sollicito\n\nPhaethonteos vestes quem involvite iuvenca; furiali anne: sati totumque,\n**corpora** cum rapacibus nunc! Nervis repetatne, miserabile doleas, deprensum\nhunc, fluctus Threicio, ad urbes, magicaeque, quid. Per credensque series adicis\npoteram [quidem](#)! Iam uni mensas victrix\nvittas ut flumina Satyri adulter; bellum iacet domitae repercusso truncis urnis\nmille rigidi sub taurum.\n\n\n";
 export declare const nextPostPage: () => string;
 export declare const AppJsContent: (usingSrc: boolean, extraImports?: string) => string;

package/dist/index.js

@@ -114,7 +114,7 @@ var commander = __toModule(require("commander"));
 
 // pnp:/home/runner/work/tinacms/tinacms/packages/@tinacms/cli/package.json
 var name = "@tinacms/cli";
-var version = "0.60.9";
+var version = "0.60.10";
 
 // pnp:/home/runner/work/tinacms/tinacms/packages/@tinacms/cli/src/utils/theme.ts
 var import_chalk = __toModule(require("chalk"));
@@ -417,13 +417,31 @@ export default defineSchema({
           name: "title",
         },
         {
-          type: "string",
+          type: "rich-text",
           label: "Blog Post Body",
           name: "body",
           isBody: true,
-          ui: {
-            component: "textarea"
-          },
+          templates: [
+            {
+              name: "PageSection",
+              label: "Page Section",
+              fields: [
+                {
+                  type: "string",
+                  name: "heading",
+                  label: "Heading",
+                },
+                {
+                  type: "string",
+                  name: "content",
+                  label: "Content",
+                  ui: {
+                    component: "textarea"
+                  }
+                }
+              ],
+            },
+          ]
         },
       ],
     },
@@ -840,14 +858,12 @@ title: Vote For Pedro
 
 # Dixi gaude Arethusa
 
-## Oscula mihi
-
-Lorem markdownum numerabilis armentorum platanus, cultros coniunx sibi per
+<PageSection heading="Oscula mihi" content="Lorem markdownum numerabilis armentorum platanus, cultros coniunx sibi per
 silvas, nostris clausit sequemur diverso scopulosque. Fecit tum alta sed non
 falcato murmura, geminas donata Amyntore, quoque Nox. Invitam inquit, modo
 nocte; ut ignis faciemque manes in imagine sinistra ut mucrone non ramos
 sepulcro supplex. Crescentesque populos motura, fit cumque. Verumque est; retro
-sibi tristia bracchia Aetola telae caruerunt et.
+sibi tristia bracchia Aetola telae caruerunt et."/>
 
 
 ## Mutato fefellimus sit demisit aut alterius sollicito
@@ -868,6 +884,7 @@ var nextPostPage = () => `// THIS FILE HAS BEEN GENERATED WITH THE TINA CLI.
   import Head from "next/head";
   import { createGlobalStyle } from "styled-components";
   import { useTina } from "tinacms/dist/edit-state";
+  import { TinaMarkdown } from 'tinacms/dist/rich-text'
 
   const query = gql\`
     query BlogPostQuery($relativePath: String!) {
@@ -913,8 +930,7 @@ var nextPostPage = () => `// THIS FILE HAS BEEN GENERATED WITH THE TINA CLI.
     text-decoration: underline;
   }
   \`;
-  const defaultMarked = (markdown) => markdown;
-  // Use the props returned by get static props (this can be deleted when the edit provider and tina-wrapper are moved to _app.js)
+  
   const BlogPage = (props) => {
     const { data } = useTina({
       query,
@@ -933,12 +949,6 @@ var nextPostPage = () => `// THIS FILE HAS BEEN GENERATED WITH THE TINA CLI.
             crossOrigin="anonymous"
             referrerPolicy="no-referrer"
           />
-          {/* Marked CDN */}
-          <script
-            type="text/javascript"
-            crossOrigin="anonymous"
-            src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.0/marked.min.js"
-          />
         </Head>
         <div>
           <div
@@ -949,12 +959,9 @@ var nextPostPage = () => `// THIS FILE HAS BEEN GENERATED WITH THE TINA CLI.
             <h1 className="text-3xl m-8 text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
               {data.getPostsDocument.data.title}
             </h1>
-            {/* Convert markdown to html in the browser only */}
-            {typeof window !== "undefined" && (
-              <ContentSection
-                content={window.marked.parse(data.getPostsDocument.data.body)}
-              ></ContentSection>
-            )}
+            <ContentSection
+              content={data.getPostsDocument.data.body}
+            ></ContentSection>
           </div>
           <div className="bg-green-100 text-center">
             Lost and looking for a place to start?
@@ -1019,6 +1026,19 @@ var nextPostPage = () => `// THIS FILE HAS BEEN GENERATED WITH THE TINA CLI.
   };
   
   export default BlogPage;
+
+  const PageSection = props => {
+    return (
+      <>
+        <h2>{ props.heading }</h2>
+        <p>{ props.content }</p>
+      </>
+    )
+  }
+
+  const components = {
+    PageSection: PageSection,
+  }
   
   const ContentSection = ({ content }) => {
     return (
@@ -1128,7 +1148,7 @@ var nextPostPage = () => `// THIS FILE HAS BEEN GENERATED WITH THE TINA CLI.
         </div>
         <div className="relative px-4 sm:px-6 lg:px-8">
           <div className="text-lg max-w-prose mx-auto">
-            <div dangerouslySetInnerHTML={{ __html: content }}></div>
+            <TinaMarkdown components={components} content={content}/>
             <GlobalStyle />
           </div>
         </div>
@@ -1218,6 +1238,60 @@ async function initTina(ctx, next, options) {
   logger.info(successText("Setting up Tina..."));
   next();
 }
+var MIN_REACT_VERSION = ">=16.14.0";
+async function checkDeps(ctx, next, options) {
+  const bar = new import_progress.default("Checking dependencies. :prog", 1);
+  const packageJSON = JSON.parse((await import_fs_extra4.default.readFileSync(packageJSONPath)).toString());
+  if (!checkPackage(packageJSON, "react") || !checkPackage(packageJSON, "react-dom")) {
+    const message = `Unable to initialize Tina due to outdated dependencies, try upgrading the following packages:
+      "react@${MIN_REACT_VERSION}"
+      "react-dom@${MIN_REACT_VERSION}"
+
+  Then re-rerun "@tinacms/cli init"`;
+    throw new Error(message);
+  }
+  bar.tick({
+    prog: "\u2705"
+  });
+  logger.level = "fatal";
+  next();
+}
+var checkPackage = (packageJSON, packageName) => {
+  let strippedVersion;
+  Object.entries(packageJSON.dependencies).map(([depPackageName, version2]) => {
+    if (depPackageName === packageName) {
+      strippedVersion = version2.replace(/^[^a-zA-Z0-9]*|[^a-zA-Z0-9]*$/g, "");
+    }
+  });
+  return checkVersion(strippedVersion);
+};
+var checkVersion = (version2) => {
+  const majorMin = 16;
+  const minorMin = 14;
+  const parts = version2.split(".");
+  const major = Number(parts[0]);
+  const minor = Number(parts[1]);
+  if (parts.length === 1) {
+    if (isNaN(major)) {
+      return true;
+    } else if (major > majorMin) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  if (major > majorMin) {
+    return true;
+  } else if (major === majorMin) {
+    if (minor >= minorMin) {
+      return true;
+    } else {
+      return false;
+    }
+  } else {
+    return false;
+  }
+};
 async function installDeps(ctx, next, options) {
   const bar = new import_progress.default("Installing Tina packages. This might take a moment... :prog", 2);
   const deps = ["tinacms", "styled-components", "@tinacms/cli"];
@@ -1233,6 +1307,7 @@ async function installDeps(ctx, next, options) {
   next();
 }
 var baseDir = process.cwd();
+var packageJSONPath = import_path5.default.join(baseDir, "package.json");
 var blogContentPath = import_path5.default.join(baseDir, "content", "posts");
 var blogPostPath = import_path5.default.join(blogContentPath, "HelloWorld.md");
 var TinaFolder = import_path5.default.join(baseDir, ".tina");
@@ -1633,6 +1708,7 @@ var baseCmds = [
     options: [experimentalDatalayer, noTelemetryOption],
     description: "Add Tina Cloud to an existing project",
     action: (options) => chain([
+      checkDeps,
       initTina,
       installDeps,
       async (_ctx, next) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/cli",
-  "version": "0.60.9",
+  "version": "0.60.10",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
@@ -57,8 +57,8 @@
     "@graphql-codegen/visitor-plugin-common": "^2.4.0",
     "@graphql-tools/graphql-file-loader": "^7.2.0",
     "@graphql-tools/load": "^7.3.2",
-    "@tinacms/datalayer": "0.0.2",
-    "@tinacms/graphql": "0.59.8",
+    "@tinacms/datalayer": "0.1.0",
+    "@tinacms/graphql": "0.59.9",
     "@tinacms/metrics": "0.0.2",
     "@yarnpkg/esbuild-plugin-pnp": "^2.0.1-rc.3",
     "add": "^2.0.6",