Add Checkbox for Iintersection or Union Types

maltejur · May 19, 2022 · 864ac71 · 864ac71
1 parent 14d8b83
commit 864ac71
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "directus-extension-generate-types",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "AGPL-3.0",
   "keywords": [
     "directus",

diff --git a/src/components/code.vue b/src/components/code.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="code">
-    <i>{{ downloadName }}</i>
+    <i>
+      {{ downloadName }}
+      <v-progress-circular
+        indeterminate
+        v-if="loading && rendered"
+        class="inline-progress"
+      />
+    </i>
     <div class="generate-types-textarea">
       <pre v-html="rendered" v-if="rendered" />
       <v-progress-circular indeterminate v-else />
@@ -28,6 +35,7 @@ export default {
     value: String,
     language: String,
     downloadName: String,
+    loading: Boolean,
   },
   computed: {
     rendered() {
@@ -81,6 +89,13 @@ export default {
   align-self: flex-end;
   margin-top: 15px;
 }
+
+.inline-progress {
+  --v-progress-circular-size: 1em;
+  display: inline;
+  /* vertical-align: sub; */
+  margin: 0 5px;
+}
 </style>
 
 <style>

diff --git a/src/lib/generateTypes/ts.ts b/src/lib/generateTypes/ts.ts
@@ -1,7 +1,10 @@
 import { Field } from "lib/types";
 import { getCollections } from "../api";
 
-export default async function generateTsTypes(api) {
+export default async function generateTsTypes(
+  api,
+  useIntersectionTypes = false
+) {
   const collections = await getCollections(api);
   let ret = "";
   const types = [];
@@ -14,7 +17,7 @@ export default async function generateTsTypes(api) {
     collection.fields.forEach((field) => {
       ret += `  ${field.field}${
         field.schema?.is_nullable ? "?" : ""
-      }: ${getType(field)};\n`;
+      }: ${getType(field, useIntersectionTypes)};\n`;
     });
     ret += "};\n\n";
   });
@@ -37,17 +40,17 @@ function pascalCase(str: string) {
     .join("");
 }
 
-function getType(field: Field) {
+function getType(field: Field, useIntersectionTypes = false) {
   let type: string;
   if (["integer", "bigInteger", "float", "decimal"].includes(field.type))
     type = "number";
   else if (["boolean"].includes(field.type)) type = "boolean";
   else if (["json", "csv"].includes(field.type)) type = "unknown";
   else type = "string";
   if (field.relation) {
-    type += ` & ${pascalCase(field.relation.collection)}${
-      field.relation.type === "many" ? "[]" : ""
-    }`;
+    type += ` ${useIntersectionTypes ? "&" : "|"} ${pascalCase(
+      field.relation.collection
+    )}${field.relation.type === "many" ? "[]" : ""}`;
   }
   return type;
 }
diff --git a/src/routes/ts.vue b/src/routes/ts.vue
@@ -9,13 +9,26 @@
         :value="types"
         language="typescript"
         downloadName="types.ts"
+        :loading="loading"
       />
       <div class="div">
         <p>
           To use these types with the <code>@directus/sdk</code>, include the
           <code>types.ts</code> like this:
         </p>
         <CodeComponent :value="exampleCode" language="typescript" />
+        <h3 class="type-title">Options</h3>
+        <v-checkbox v-model="useIntersectionTypes" @click="generateTypes">
+          <span>
+            Use Intersection Types (<code>&</code>) instead of Union Types
+            (<code>|</code>) for relational fields.
+            <a
+              href="https://github.com/maltejur/directus-extension-generate-types/pull/3#issuecomment-1037243032"
+            >
+              Learn more
+            </a>
+          </span>
+        </v-checkbox>
       </div>
     </div>
   </private-view>
@@ -38,10 +51,28 @@ export default {
 import { CustomDirectusTypes } from "./types";
 
 const directus = new Directus<CustomDirectusTypes>("<directus url>");`,
+      useIntersectionTypes:
+        localStorage.getItem(
+          "directus-extension-generate-types-use-intersection-types"
+        ) === "true",
+      loading: false,
     };
   },
+  methods: {
+    generateTypes() {
+      console.log(window.localStorage);
+      localStorage.setItem(
+        "directus-extension-generate-types-use-intersection-types",
+        this.useIntersectionTypes
+      );
+      generateTsTypes(this.api, this.useIntersectionTypes).then((types) => {
+        this.types = types;
+        this.loading = false;
+      });
+    },
+  },
   mounted() {
-    generateTsTypes(this.api).then((types) => (this.types = types));
+    this.generateTypes();
   },
 };
 </script>
@@ -64,4 +95,18 @@ code {
   padding: 3px;
   border-radius: 4px;
 }
+
+.type-title {
+  margin: 10px 0;
+}
+
+a {
+  color: var(--primary-110);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
 </style>