connector-v2 -- main as base

apps/zipper.dev/package.json

@@ -79,7 +79,7 @@
     "@types/react-timeago": "^4.1.5",
     "@uploadthing/react": "^6.0.2",
     "@vercel/kv": "^1.0.0",
-    "@zipper-inc/client-js": "^0.1.6",
+    "@zipper-inc/client-js": "^0.1.7",
     "@zipper/types": "*",
     "@zipper/ui": "*",
     "@zipper/utils": "*",
@@ -97,6 +97,7 @@
     "into-stream": "^6.0.0",
     "ioredis": "^5.2.2",
     "jose": "^4.11.4",
+    "jscodeshift": "^0.15.1",
     "jsonwebtoken": "^9.0.0",
     "jszip": "^3.10.1",
     "langchain": "^0.0.130",
@@ -154,7 +155,7 @@
     "@types/bcryptjs": "^2.4.2",
     "@types/cors": "^2.8.13",
     "@types/jest": "^29.4.0",
-    "@types/jscodeshift": "^0.11.10",
+    "@types/jscodeshift": "^0.11.11",
     "@types/jsonwebtoken": "^9.0.2",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.shuffle": "^4.2.7",

apps/zipper.dev/src/components/context/editor-context.tsx

@@ -35,6 +35,7 @@ import {
 } from '~/utils/playground.utils';
 import { runZipperLinter } from '~/utils/zipper-editor-linter';
 import { rewriteSpecifier } from '~/utils/rewrite-imports';
+import { getFileExtension } from '~/utils/file-extension';
 
 type OnValidate = AddParameters<
   Required<EditorProps>['onValidate'],
@@ -56,6 +57,7 @@ export type EditorContextType = {
   setModelIsDirty: (path: string, isDirty: boolean) => void;
   isEditorDirty: () => boolean;
   modelHasErrors: (path: string) => boolean;
+  getModelByFilename: (filename: string) => monaco.editor.ITextModel | null;
   setModelHasErrors: (path: string, isErroring: boolean) => void;
   editorHasErrors: () => boolean;
   getErrorFiles: () => string[];
@@ -107,6 +109,7 @@ export const EditorContext = createContext<EditorContextType>({
   setModelIsDirty: noop,
   isEditorDirty: () => false,
   modelHasErrors: () => false,
+  getModelByFilename: () => null,
   setModelHasErrors: () => false,
   editorHasErrors: () => false,
   getErrorFiles: () => [],
@@ -698,6 +701,16 @@ const EditorContextProvider = ({
       .filter(([, value]) => value)
       .map(([filename]) => filename);
 
+  const getModelByFilename = (filename: string) => {
+    if (!monacoRef?.current || !editor) return null;
+    const uri = getUriFromPath(
+      `file:///${filename}`,
+      monacoRef.current.Uri.parse,
+      getFileExtension(filename) || 'tsx',
+    );
+    return editor.getModel(uri);
+  };
+
   return (
     <EditorContext.Provider
       value={{
@@ -713,6 +726,7 @@ const EditorContextProvider = ({
         setModelIsDirty,
         isEditorDirty,
         modelHasErrors,
+        getModelByFilename,
         setModelHasErrors,
         editorHasErrors,
         getErrorFiles,

apps/zipper.dev/src/components/context/run-app-context.tsx

@@ -38,6 +38,15 @@ type AppInfoWithHashes = AppInfo & {
   playgroundVersionHash: string | null;
   publishedVersionHash: string | null;
 };
+type RunResult =
+  | { ok: false; runId: string }
+  | {
+      ok: true;
+      filename: string;
+      version?: string;
+      result: string;
+      runId: string;
+    };
 
 export type RunAppContextType = {
   appInfo: AppInfoWithHashes;
@@ -51,7 +60,7 @@ export type RunAppContextType = {
   run: (params?: {
     shouldSave?: boolean;
     isCurrentScriptEntryPoint?: boolean;
-  }) => Promise<string | undefined>;
+  }) => Promise<RunResult | undefined>;
   boot: (params?: { shouldSave?: boolean }) => Promise<BootPayload>;
   bootPromise: MutableRefObject<Promise<BootPayload>>;
   configs: Zipper.BootPayload['configs'];
@@ -67,7 +76,7 @@ export const RunAppContext = createContext<RunAppContextType>({
   userAuthConnectors: [],
   setResults: noop,
   bootPromise: { current: Promise.resolve({} as BootPayload) },
-  run: () => Promise.resolve(''),
+  run: () => Promise.resolve(undefined),
   boot: () => Promise.resolve({} as BootPayload),
   configs: {},
 });
@@ -391,7 +400,7 @@ export function RunAppProvider({
     cleanUpLogTimers();
     updateLogs({ version, runId, fromTimestamp: oneSecondAgo });
 
-    return runId;
+    return { ...result, runId };
   };
 
   return (

apps/zipper.dev/src/components/playground/app-edit-sidebar-applet-connectors.tsx

@@ -22,13 +22,6 @@ export const AppEditSidebarAppletConnectors = () => {
   const [githubAuthRequired, setGitHubAuthRequired] = useState(false);
   // state to hold whether user needs to authenticate with github
 
-  // get the existing Slack connector data from the database
-  const slackConnector = trpc.slackConnector.get.useQuery(
-    { appId: appInfo.id },
-    {
-      enabled: slackAuthRequired,
-    },
-  );
   // get the existing GitHub connector data from the database
   const githubConnector = trpc.githubConnector.get.useQuery(
     { appId: appInfo.id },
@@ -87,16 +80,9 @@ export const AppEditSidebarAppletConnectors = () => {
   // get the Slack auth URL -- if required --from the backend
   // (it includes an encrypted state value that links the auth request to the app)
   const slackAuthURL = trpc.slackConnector.getAuthUrl.useQuery(
+    { appId },
     {
-      appId,
-      scopes: {
-        bot: slackConnector.data?.workspaceScopes || [],
-        user: slackConnector.data?.userScopes || [],
-      },
-      postInstallationRedirect: window.location.href,
-    },
-    {
-      enabled: slackConnector.isFetched,
+      enabled: slackAuthRequired,
     },
   );
 

apps/zipper.dev/src/components/playground/app-edit-sidebar-applet.tsx

@@ -246,7 +246,7 @@ export const AppEditSidebarApplet = ({ appSlug }: { appSlug: string }) => {
                     setRunId(
                       await run({
                         shouldSave: appInfo.canUserEdit,
-                      }),
+                      }).then((r) => r?.runId),
                     );
                   }}
                   display="flex"

apps/zipper.dev/src/components/playground/tab-code.tsx

@@ -222,6 +222,8 @@ export const CodeTab: React.FC<CodeTabProps> = ({ app, mainScript }) => {
           w="full"
           spacing={0}
           onMouseEnter={onMouseEnter('PlaygroundCode')}
+          overflow="scroll"
+          pb="4"
           onMouseLeave={onMouseLeave}
           border={
             hoveredElement === 'PlaygroundCode'

apps/zipper.dev/src/connectors/slack/constants.ts

@@ -1,4 +1,13 @@
-export const code = `import { WebClient } from "https://deno.land/x/[email protected]/mod.js";
+const redirectHost =
+  process.env.NODE_ENV === 'development'
+    ? process.env.NEXT_PUBLIC_ZIPPER_DOT_DEV_HOST
+    : 'https://zipper.dev';
+
+export const code = `import { WebClient } from 'https://deno.land/x/[email protected]/mod.js';
+import { initApplet } from 'https://deno.land/x/[email protected]/mod.ts';
+import { SlackUserAuth } from 'https://zipper.dev/zipper-inc/slack-install-link/src/main.ts';
+
+export const slackConnectorConfig: Partial<SlackUserAuth> = {};
 
 // This is an Slack API client intialized with the applet developer's Slack token
 // THIS CLIENT DOES NOT USE THE USER TOKEN
@@ -15,6 +24,40 @@ client.sendToChannel = async (text: string, channelName: string) => {
 // The current user's Slack token is available in the context of a handler function
 export const getUserClient = (userToken: string) => new WebClient(userToken);
 
+type SlackConnectorInput = {
+  action:
+    | 'get-auth-url' // Install the app
+    | 'get-config'; // Needed to exchange code for token
+};
+
+export async function handler(
+  input: SlackConnectorInput,
+  ctx: Zipper.HandlerContext,
+) {
+  const thisAppletPlaygroundUrl = \`${redirectHost}/\${
+    ctx.appInfo.author?.organization || ctx.appInfo.author?.slug
+  }/\${ctx.appInfo.slug}/src/slack-connector.ts\`;
+
+  const config = {
+    ...slackConnectorConfig,
+    zipperAppId: ctx.appInfo.id,
+    postInstallRedirect: thisAppletPlaygroundUrl,
+  };
+
+  switch (input.action) {
+    case 'get-auth-url': {
+      const link = await initApplet('slack-install-link')
+        .path('link-only')
+        .run(config);
+
+      return link;
+    }
+    case 'get-config': {
+      return config;
+    }
+  }
+}
+
 export default client;
 `;