attio 0.0.1-experimental.20241001 → 0.0.1-experimental.20241002

package/lib/api/start-graphql-server.js

@@ -11,7 +11,7 @@ export function startGraphqlServer(sendBack) {
     const startServer = async () => {
         const currentFilePath = fileURLToPath(import.meta.url);
         const currentDirPath = dirname(currentFilePath);
-        const schemaPath = path.resolve(currentDirPath, "..", "schema.graphql");
+        const schemaPath = path.resolve(currentDirPath, "..", "..", "schema.graphql");
         const schemaString = fs.readFileSync(schemaPath, "utf8");
         const port = await findAvailablePort(8700);
         const schema = buildSchema(schemaString);

package/lib/client/hooks/index.d.ts

@@ -1,5 +1,4 @@
 export { useDialog } from "./use-dialog.js";
-export { runQuery } from "./run-query.js";
 export { useAsyncCache, AsyncCacheConfig, AsyncFunction } from "./use-async-cache.js";
 export { useQuery } from "./use-query.js";
 export { useRecord } from "./use-record.js";

package/lib/client/hooks/use-query.d.ts

@@ -1,5 +1,6 @@
-export declare function useQuery<T>(
+import { Query } from "../run-query";
+export declare function useQuery<Variables, Result>(
 /** GraphQL query */
-query: string, 
+query: Query<Variables, Result>, 
 /** GraphQL query variables */
-variableValues?: Record<string, any>): T;
+variableValues?: Variables): Result;

package/lib/client/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./hooks/index.js";
 export * from "./components/index.js";
+export { runQuery, Query } from "./run-query.js";
 export * as Forms from "./forms/index.js";
 export { FormArray } from "./forms/array.js";
 export { FormNumber } from "./forms/number.js";

package/lib/client/{hooks/run-query.d.ts → run-query.d.ts}

@@ -2,3 +2,7 @@
  * Imperatively runs a GraphQL query.
  */
 export declare function runQuery(query: string, variableValues?: Record<string, any>): Promise<any>;
+export type Query<Variables, Result> = {
+    __data: Result;
+    __variables: Variables;
+} & string;

package/lib/commands/dev.js

@@ -53,6 +53,14 @@ export default function Dev({ options: { debug } }) {
                     React.createElement(Text, null,
                         "Env: ",
                         JSON.stringify(snapshot.children.env?.getSnapshot().value))),
+                React.createElement(Box, null,
+                    React.createElement(Text, null,
+                        "Code Gen:",
+                        " ",
+                        JSON.stringify(snapshot.children["code-gen"]?.getSnapshot()?.value),
+                        " ",
+                        snapshot.children["code-gen"]?.getSnapshot().context.error
+                            ?.message)),
                 snapshot.context.devVersion?.app_id && (React.createElement(Box, null,
                     React.createElement(Text, null,
                         "App ID: ",

package/lib/graphql/generate-operations.js

@@ -0,0 +1,151 @@
+import fs from "fs";
+import { parse, visit, validate, print, OperationTypeNode, isObjectType, isListType, isNonNullType, isInputObjectType, isEnumType, getNamedType, } from "graphql";
+import path from "path";
+import { format } from "prettier";
+function findGraphQLFiles(dir) {
+    const files = [];
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+            files.push(...findGraphQLFiles(fullPath));
+        }
+        else if (entry.isFile() && path.extname(entry.name) === ".graphql") {
+            files.push(fullPath);
+        }
+    }
+    return files;
+}
+function generateEnumTypeDefinition(type) {
+    const values = type
+        .getValues()
+        .map((v) => `'${v.name}'`)
+        .join(" | ");
+    return values;
+}
+function generateTypeDefinition(type) {
+    if (isNonNullType(type)) {
+        return generateTypeDefinition(type.ofType);
+    }
+    if (isListType(type)) {
+        return `${generateTypeDefinition(type.ofType)}`;
+    }
+    if (isObjectType(type) || isInputObjectType(type)) {
+        return type.name;
+    }
+    if (isEnumType(type)) {
+        return generateEnumTypeDefinition(type);
+    }
+    switch (type.name) {
+        case "Int":
+        case "Float":
+            return "number";
+        case "String":
+        case "ID":
+            return "string";
+        case "Boolean":
+            return "boolean";
+        default:
+            return "any";
+    }
+}
+function generateInputObjectTypeDefinition(type) {
+    const fields = Object.values(type.getFields())
+        .map((field) => `${field.name}: ${generateTypeDefinition(field.type)}`)
+        .join(", ");
+    return `{ ${fields} }`;
+}
+function generateTypeDefinitionFromSelectionSet(selectionSet, parentType) {
+    const fieldDefinitions = selectionSet.selections
+        .map((selection) => {
+        if (selection.kind === "Field") {
+            const field = parentType.getFields()[selection.name.value];
+            if (!field) {
+                throw new Error(`Field ${selection.name.value} not found in type ${parentType.name}`);
+            }
+            let fieldType = field.type;
+            let fieldTypeDefinition = "";
+            if (selection.selectionSet) {
+                if (isObjectType(getNamedType(fieldType))) {
+                    fieldTypeDefinition = generateTypeDefinitionFromSelectionSet(selection.selectionSet, getNamedType(fieldType));
+                }
+            }
+            else {
+                fieldTypeDefinition = generateTypeDefinition(fieldType);
+            }
+            return `${selection.name.value}: ${fieldTypeDefinition}${isListType(fieldType) ? "[]" : ""}`;
+        }
+        return "";
+    })
+        .filter(Boolean);
+    return `{${fieldDefinitions.join(",")}}`;
+}
+function generateReturnType(selectionSet, schema) {
+    const queryType = schema.getQueryType();
+    if (!queryType) {
+        throw new Error("Query type not found in schema");
+    }
+    return generateTypeDefinitionFromSelectionSet(selectionSet, queryType);
+}
+function generateOperationFunction(graphqlFileName, operationName, variableDefinitions, schema, selectionSet) {
+    const typeName = `${operationName.charAt(0).toUpperCase() + operationName.slice(1)}`;
+    const returnType = generateReturnType(selectionSet, schema);
+    let input;
+    if (variableDefinitions.length === 1) {
+        const varDef = variableDefinitions[0];
+        const varType = schema.getType(print(varDef.type).replace(/[!]/g, ""));
+        const varTypeString = isInputObjectType(varType)
+            ? generateInputObjectTypeDefinition(varType)
+            : generateTypeDefinition(varType);
+        input = `export type ${typeName}Variables = ${varTypeString}`;
+    }
+    else {
+        const variables = variableDefinitions
+            .map((def) => {
+            const varType = schema.getType(print(def.type).replace(/[!]/g, ""));
+            const varTypeString = isInputObjectType(varType)
+                ? generateInputObjectTypeDefinition(varType)
+                : generateTypeDefinition(varType);
+            return `${def.variable.name.value}: ${varTypeString}`;
+        })
+            .join(", ");
+        input = `export interface ${typeName}Variables { ${variables} }`;
+    }
+    return `
+declare module "./${graphqlFileName}" {
+  ${input}
+
+  export interface ${typeName}Result ${returnType}
+
+  const value: Query<${typeName}Variables, ${typeName}Result>
+  export default value
+}
+`;
+}
+export async function generateOperationFromQuery(graphqlFileName, query, schema) {
+    const ast = parse(query);
+    let operations = "";
+    const validationErrors = validate(schema, ast);
+    if (validationErrors.length > 0) {
+        throw new Error(`Validation errors: ${validationErrors.map((e) => e.message).join("\n")}`);
+    }
+    visit(ast, {
+        OperationDefinition(node) {
+            if (node.name && node.operation === OperationTypeNode.QUERY) {
+                const operationName = node.name.value;
+                const variableDefinitions = node.variableDefinitions || [];
+                operations += generateOperationFunction(graphqlFileName, operationName, variableDefinitions, schema, node.selectionSet);
+            }
+        },
+    });
+    return format(operations, { parser: "typescript" });
+}
+export async function generateOperations(rootDir, schema) {
+    const graphqlFiles = findGraphQLFiles(rootDir);
+    let operations = "";
+    for (const file of graphqlFiles) {
+        const content = fs.readFileSync(file, "utf-8");
+        operations += await generateOperationFromQuery(path.basename(file), content, schema);
+    }
+    return format(operations, { parser: "typescript" });
+}

package/lib/graphql/generate-types.js

@@ -0,0 +1,109 @@
+import { isObjectType, isInputObjectType, isScalarType, isEnumType, isListType, isNonNullType, } from "graphql";
+import { format } from "prettier";
+function countTypeUsages(schema) {
+    const typeUsages = new Map();
+    Object.values(schema.getTypeMap()).forEach((type) => {
+        if ((isObjectType(type) || isInputObjectType(type)) && !type.name.startsWith("__")) {
+            Object.values(type.getFields()).forEach((field) => {
+                let fieldType = field.type;
+                while (isListType(fieldType) || isNonNullType(fieldType)) {
+                    fieldType = fieldType.ofType;
+                }
+                if (isObjectType(fieldType) || isInputObjectType(fieldType)) {
+                    const usage = typeUsages.get(fieldType.name) || { count: 0, type: fieldType };
+                    usage.count++;
+                    typeUsages.set(fieldType.name, usage);
+                }
+            });
+        }
+    });
+    return typeUsages;
+}
+function generateFieldType(type, schema, typeUsages, seenTypes = new Set()) {
+    if (isListType(type)) {
+        return `Array<${generateFieldType(type.ofType, schema, typeUsages, seenTypes)}>`;
+    }
+    if (isNonNullType(type)) {
+        return generateFieldType(type.ofType, schema, typeUsages, seenTypes);
+    }
+    if (isScalarType(type)) {
+        switch (type.name) {
+            case "ID":
+            case "String":
+                return "string";
+            case "Int":
+            case "Float":
+                return "number";
+            case "Boolean":
+                return "boolean";
+            default:
+                return "any";
+        }
+    }
+    if (isEnumType(type)) {
+        return type
+            .getValues()
+            .map((v) => `'${v.name}'`)
+            .join(" | ");
+    }
+    if (isObjectType(type) || isInputObjectType(type)) {
+        const usage = typeUsages.get(type.name);
+        if (usage && usage.count > 1) {
+            return type.name;
+        }
+        if (seenTypes.has(type.name)) {
+            return type.name;
+        }
+        seenTypes.add(type.name);
+        const fields = type.getFields();
+        let inlineType = "{";
+        Object.entries(fields).forEach(([fieldName, field]) => {
+            const fieldType = generateFieldType(field.type, schema, typeUsages, new Set(seenTypes));
+            inlineType += `${fieldName}: ${fieldType};`;
+        });
+        inlineType += "}";
+        return inlineType;
+    }
+    return "any";
+}
+function generateDocComment(description) {
+    if (!description)
+        return "";
+    const lines = description.split("\n");
+    if (lines.length === 1) {
+        return `/** ${description} */`;
+    }
+    return `/**\n * ${lines.join("\n * ")}\n */`;
+}
+function generateType(type, schema, typeUsages) {
+    let typeString = "";
+    const typeComment = generateDocComment(type.description ?? "");
+    if (typeComment) {
+        typeString += `${typeComment}\n`;
+    }
+    typeString += `export type ${type.name.charAt(0).toUpperCase() + type.name.slice(1)} = {`;
+    const fields = type.getFields();
+    Object.entries(fields).forEach(([fieldName, field]) => {
+        typeString += "\n";
+        const fieldComment = generateDocComment(field.description);
+        if (fieldComment) {
+            typeString += `${fieldComment}\n`;
+        }
+        const fieldType = generateFieldType(field.type, schema, typeUsages);
+        typeString += `${fieldName}: ${fieldType};`;
+    });
+    typeString += "\n};";
+    return typeString;
+}
+export async function generateTypesFromSchema(schema) {
+    const typeUsages = countTypeUsages(schema);
+    let types = "";
+    const typeMap = schema.getTypeMap();
+    Object.values(typeMap).forEach((type) => {
+        if ((isObjectType(type) || isInputObjectType(type)) && !type.name.startsWith("__")) {
+            types += generateType(type, schema, typeUsages);
+            types += "\n\n";
+        }
+    });
+    return await format(types, { parser: "typescript" });
+}

package/lib/graphql/parse-schema.js

@@ -0,0 +1,65 @@
+import { codeFrameColumns } from "@babel/code-frame";
+import fs from "fs";
+import { parse, validateSchema, buildASTSchema } from "graphql";
+import { validateSDL } from "graphql/validation/validate.js";
+function formatGraphQlError(e, source, filename) {
+    if (e.locations?.length) {
+        return `${e.message}\n\n${filename}:${e.locations[0].line}\n\n${e.locations
+            .map(({ line, column }) => codeFrameColumns(source, {
+            start: { line, column },
+        }))
+            .join(`\n\n`)}\n`;
+    }
+    else {
+        throw e;
+    }
+}
+export function parseSchemaString(schemaString, schemaPath) {
+    let parsedSchema;
+    try {
+        parsedSchema = parse(schemaString);
+    }
+    catch (ex) {
+        throw Object.assign(new Error(formatGraphQlError(ex, schemaString, schemaPath)), {
+            code: `GRAPHQL_SYNTAX_ERROR`,
+        });
+    }
+    parsedSchema = {
+        ...parsedSchema,
+        definitions: parsedSchema.definitions
+            .slice()
+            .sort((a, b) => {
+            if (!a.name)
+                return -1;
+            if (!b.name)
+                return 1;
+            if (a.name.value.toLowerCase() > b.name.value.toLowerCase())
+                return 1;
+            if (a.name.value.toLowerCase() < b.name.value.toLowerCase())
+                return -1;
+            return 0;
+        }),
+    };
+    const sdlValidationErrors = validateSDL(parsedSchema);
+    if (sdlValidationErrors.length) {
+        throw Object.assign(new Error(formatGraphQlError(sdlValidationErrors[0], schemaString, schemaPath)), {
+            code: `GRAPHQL_SCHEMA_ERROR`,
+        });
+    }
+    const schema = buildASTSchema(parsedSchema, { assumeValid: false, assumeValidSDL: false });
+    const schemaValidationErrors = validateSchema(schema);
+    if (schemaValidationErrors.length > 0) {
+        throw Object.assign(new Error(formatGraphQlError(schemaValidationErrors[0], schemaString, schemaPath)), {
+            code: `GRAPHQL_SCHEMA_ERROR`,
+        });
+    }
+    return {
+        source: schemaString,
+        documentNode: parsedSchema,
+        schema,
+    };
+}
+export function parseSchema(schemaPath) {
+    const schemaString = fs.readFileSync(schemaPath, "utf-8");
+    return parseSchemaString(schemaString, schemaPath);
+}

package/lib/graphql.d.ts

@@ -0,0 +1,4 @@
+declare module "*.graphql" {
+    const value: string
+    export default value
+}

package/lib/machines/code-gen-machine.js

@@ -0,0 +1,102 @@
+import { sendTo, assign, setup, fromCallback } from "xstate";
+import { parseSchema } from "../graphql/parse-schema.js";
+import { findNodeModulesPath } from "../util/find-node-modules-path.js";
+import { updateOperationTypes } from "../util/update-operation-types.js";
+export const codeGenMachine = setup({
+    types: {
+        context: {},
+        events: {},
+        input: {},
+    },
+    guards: {
+        "all finished": (_, params) => params.finished.length === 2,
+    },
+    actors: {
+        loadSchema: fromCallback(({ sendBack }) => {
+            const loadSchema = async () => {
+                try {
+                    const path = await findNodeModulesPath(["schema.graphql"]);
+                    if (!path) {
+                        sendBack({ type: "Error", error: new Error("No schema found") });
+                        return;
+                    }
+                    const { schema } = parseSchema(path);
+                    sendBack({ type: "Schema Loaded", schema });
+                }
+                catch (error) {
+                    sendBack({ type: "Error", error });
+                }
+            };
+            loadSchema();
+        }),
+        generateOperations: fromCallback(({ sendBack, input }) => {
+            updateOperationTypes(input.schema)
+                .then(() => sendBack({ type: "Done" }))
+                .catch((error) => sendBack({ type: "Error", error }));
+        }),
+    },
+    actions: {
+        clearFinished: assign({
+            finished: [],
+        }),
+        setOperationsFinished: assign({
+            finished: (_, params) => params.finished.concat("operations.ts"),
+        }),
+        setError: assign({
+            error: (_, params) => params.error,
+        }),
+        setSchema: assign({
+            schema: (_, params) => params.schema,
+        }),
+        raiseDone: sendTo(({ context }) => context.parentRef, { type: "Code Generation Done" }),
+    },
+}).createMachine({
+    id: "GraphQL Code Generation Machine",
+    context: ({ input }) => ({
+        schema: null,
+        finished: [],
+        parentRef: input.parentRef,
+    }),
+    states: {
+        "Load Schema": {
+            on: {
+                "Error": {
+                    target: "Errored",
+                    actions: { type: "setError", params: ({ event }) => event },
+                },
+                "Schema Loaded": {
+                    target: "Generating Operations",
+                    actions: { type: "setSchema", params: ({ event }) => event },
+                    reenter: true,
+                },
+            },
+            invoke: {
+                src: "loadSchema",
+            },
+        },
+        "Done": {
+            entry: "raiseDone",
+        },
+        "Errored": {},
+        "Generating Operations": {
+            on: {
+                Done: {
+                    target: "Done",
+                },
+                Error: {
+                    target: "Errored",
+                    actions: { type: "setError", params: ({ event }) => event },
+                },
+            },
+            invoke: {
+                src: "generateOperations",
+                input: ({ context }) => ({ schema: context.schema }),
+            },
+        },
+    },
+    initial: "Load Schema",
+    on: {
+        Change: ".Load Schema",
+    },
+    description: `Generates operations typescript types`,
+});

package/lib/machines/dev-machine.js

@@ -9,6 +9,7 @@ import { startUpload } from "../api/start-upload.js";
 import { loadAppConfigFile } from "../util/app-config.js";
 import { loadDeveloperConfig, loadInitialDeveloperConfig, } from "../util/load-developer-config.js";
 import { loadEnv } from "../util/load-env.js";
+import { codeGenMachine } from "./code-gen-machine.js";
 import { envMachine } from "./env-machine.js";
 import { jsMachine } from "./js-machine.js";
 import { tsMachine } from "./ts-machine.js";
@@ -22,10 +23,11 @@ export const devMachine = setup({
         "have dev version": ({ context }) => Boolean(context.devVersion),
     },
     actors: {
-        javascript: jsMachine,
-        typescript: tsMachine,
-        env: envMachine,
-        loadConfig: fromCallback(({ sendBack }) => {
+        "javascript": jsMachine,
+        "typescript": tsMachine,
+        "env": envMachine,
+        "code-gen": codeGenMachine,
+        "loadConfig": fromCallback(({ sendBack }) => {
             const config = loadInitialDeveloperConfig();
             if (typeof config === "string") {
                 sendBack({ type: "Initialization Error", error: config });
@@ -33,12 +35,12 @@ export const devMachine = setup({
             }
             sendBack({ type: "Initialized", config });
         }),
-        listenForGraphqlOpen: fromCallback(({ input }) => {
+        "listenForGraphqlOpen": fromCallback(({ input }) => {
             readline.emitKeypressEvents(process.stdin);
             if (process.stdin.isTTY) {
                 process.stdin.setRawMode(true);
             }
-            const handleKeyPress = (str, key) => {
+            const handleKeyPress = (_, key) => {
                 if (key.name?.toLowerCase() === "o") {
                     open(`http://localhost:${input.graphqlPort}/graphql`);
                 }
@@ -51,7 +53,7 @@ export const devMachine = setup({
                 }
             };
         }),
-        prepareUpload: fromCallback(({ sendBack }) => {
+        "prepareUpload": fromCallback(({ sendBack }) => {
             const prepareUpload = async () => {
                 const config = await loadDeveloperConfig();
                 if (typeof config === "string")
@@ -76,7 +78,7 @@ export const devMachine = setup({
                 error: typeof error === "string" ? new Error(error) : error,
             }));
         }),
-        upload: fromCallback(({ sendBack, input: { config: { token, developer_slug: developerSlug }, contents, devVersion: { app_id: appId, app_dev_version_id: devVersionId }, }, }) => {
+        "upload": fromCallback(({ sendBack, input: { config: { token, developer_slug: developerSlug }, contents, devVersion: { app_id: appId, app_dev_version_id: devVersionId }, }, }) => {
             const upload = async () => {
                 const { client_bundle_upload_url, server_bundle_upload_url, app_dev_version_bundle_id: bundleId, } = await startUpload({
                     token,
@@ -114,7 +116,7 @@ export const devMachine = setup({
             };
             upload().catch((error) => sendBack({ type: "Upload Error", error }));
         }),
-        watch: fromCallback(({ sendBack }) => {
+        "watch": fromCallback(({ sendBack }) => {
             const watcher = chokidar.watch([
                 "src/app",
                 "src/assets",
@@ -129,7 +131,7 @@ export const devMachine = setup({
                 watcher.close();
             };
         }),
-        graphql: fromCallback(({ sendBack }) => startGraphqlServer(sendBack)),
+        "graphql": fromCallback(({ sendBack }) => startGraphqlServer(sendBack)),
     },
     actions: {
         clearUploadError: assign({ uploadError: undefined }),
@@ -137,6 +139,10 @@ export const devMachine = setup({
             enqueue.sendTo("javascript", event);
             enqueue.sendTo("typescript", event);
             enqueue.sendTo("env", event);
+            enqueue.sendTo("code-gen", event);
+        }),
+        sendCodeGenerationDone: enqueueActions(({ enqueue }) => {
+            enqueue.sendTo("typescript", { type: "Change" });
         }),
         setConfig: assign({
             config: (_, params) => params.config,
@@ -180,6 +186,11 @@ export const devMachine = setup({
                     id: "env",
                     input: ({ self }) => ({ parentRef: self }),
                 },
+                {
+                    src: "code-gen",
+                    id: "code-gen",
+                    input: ({ self }) => ({ parentRef: self }),
+                },
                 { src: "watch" },
             ],
             states: {
@@ -276,6 +287,17 @@ export const devMachine = setup({
                         Watching: {},
                     },
                     initial: "Validating",
+                    on: {
+                        "Change": {
+                            target: "TypeScript",
+                            actions: "sendChange",
+                        },
+                        "Code Generation Done": {
+                            target: "TypeScript",
+                            description: `Re-enter TypeScript build when code generation is complete`,
+                            actions: "sendCodeGenerationDone",
+                        },
+                    },
                 },
                 Graphql: {
                     invoke: {

package/lib/machines/js-machine.js

@@ -52,7 +52,7 @@ export const jsMachine = setup({
                             }),
                             write,
                             outfile: path.resolve("dist", "index.js"),
-                            loader: { ".png": "dataurl" },
+                            loader: { ".png": "dataurl", ".graphql": "text" },
                         });
                         return {
                             rebuild: async () => {