feat(dashboard, ui): Support TypeScript in the playground #919

akitaSummer · 2023-06-02T19:16:14Z

changeset-bot · 2023-06-02T19:16:18Z

🦋 Changeset detected

Latest commit: 10297c9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@lagon/dashboard	Patch
@lagon/ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2023-06-02T19:16:19Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
storybook	❌ Failed (Inspect)			Aug 6, 2023 4:47pm

vercel · 2023-06-02T19:16:21Z

@akitaSummer is attempting to deploy a commit to the Lagon Team on Vercel.

A member of the Team first needs to authorize it.

QuiiBz · 2023-06-04T08:27:38Z

Thanks for this PR, I'll work on #887 first (will take a bit of time, it requires a lot of work)

QuiiBz · 2023-06-04T16:42:14Z

Side note: I'm not sure if this is the right approach (we might need more changes):

I can write a Function in TS in the playground
Let's deploy it, cool it works
Now back to the playground, and the Function's code doesn't have the types anymore

This is "expected" since this approach bundles the code before uploading it, but that means we lose the original TS code. We might want to also save the original TS code and upload it alongside the bundled code, to be able to use it later (but only for deployments in the playground)

akitaSummer · 2023-06-05T16:00:22Z

Side note: I'm not sure if this is the right approach (we might need more changes):

I can write a Function in TS in the playground

Let's deploy it, cool it works

Now back to the playground, and the Function's code doesn't have the types anymore

This is "expected" since this approach bundles the code before uploading it, but that means we lose the original TS code. We might want to also save the original TS code and upload it alongside the bundled code, to be able to use it later (but only for deployments in the playground)

@QuiiBz
I understand your point. I used wasm because the resources on our server are very valuable, and I don't want esbuild to consume resources on our server. My suggestion is that if you want to support typescript code echoing, you might need to change the current table structure and save the original ts files to S3. I understand that the playground is only for an experience, and for more complex development, it's best to do it locally. If the playground supports typescript code echoing, it's better to also support code uploaded by the CLI. This would make the logic complex and I'm not sure if it's the right thing to do.

akitaSummer · 2023-06-21T19:07:28Z

@QuiiBz
The TS files shouldn't get lost now. You can give it a try.

QuiiBz

Thanks for this PR! Some feedback:

packages/dashboard/lib/hooks/useEsbuild.ts

packages/dashboard/pages/index.tsx

packages/dashboard/lib/hooks/useEsbuild.ts

QuiiBz · 2023-06-21T20:03:48Z

packages/dashboard/pages/playground/[functionId].tsx

+              }),
+              ...(tsCode.length > 0
+                ? [
+                    fetch(deployment.tsCodeUrl!, {


I'm wondering if it makes sense to only upload the TS code when we previously had a TS code? Meaning TS is only supported when creating Functions via the dashboard, and not when creating them via the CLI (which makes sense because we can't support this)

I understand what you're saying. Firstly, V8 can only run JS code, which means we only have two options: one is to store only TS code and transpile it to JS at runtime, but it will reduce our performance, so I don't recommend this approach. The other option is to store both TS and JS code, but it will cost us more space. I chose the latter because for users, response time is the most important factor. Also, as you mentioned, the CLI results will only support JS, and I think this is unavoidable in the current scenario. If you want to avoid this problem, the playground would have to implement a file system (such as using a webcontainer), which would involve a lot of work and is not within the scope of this PR.

Completely agree. We could probably add a new column to the Function table that will be used to check if the function has been created using the CLI or the Dashboard. With that, we could easily only show the Playground button if the Function has been created from the Dashboard.

Give it a try and see if it meets your requirements.

Thanks, I'll take a look this weekend and we then should be ready to merge

@QuiiBz How is the progress, can this pr be merged?

QuiiBz

I was really busy recently, apologize for the delay

QuiiBz · 2023-07-30T06:50:12Z

packages/dashboard/prisma/schema.prisma

@@ -143,6 +143,7 @@ model Deployment {
  triggerer    String   @default("Lagon")
  commit       String?
  isProduction Boolean  @default(false)
+  platform     String   @default("CLI")


The platform should be set to a Function and not a Deployment

Give it a try and see if it meets your requirements.

QuiiBz · 2023-07-30T06:50:22Z

packages/ui/src/components/LogLine/index.tsx

@@ -38,15 +39,17 @@ export const LogLine = ({ date, level = 'info', message }: LogLineProps) => {
  return (
    <div className={cx(['group flex w-full justify-between rounded-md px-2 py-1', containerStyle])}>
      <div className="flex items-start gap-4">
-        <p className={cx(['w-36 whitespace-pre text-sm', dateStyle])}>{date.toLocaleString('en-US')}</p>
+        {date && <p className={cx(['w-36 whitespace-pre text-sm', dateStyle])}>{date.toLocaleString('en-US')}</p>}


Suggested change

{date && <p className={cx(['w-36 whitespace-pre text-sm', dateStyle])}>{date.toLocaleString('en-US')}</p>}

{date ? <p className={cx(['w-36 whitespace-pre text-sm', dateStyle])}>{date.toLocaleString('en-US')}</p> : null}

QuiiBz · 2023-07-30T06:50:58Z

packages/ui/src/components/LogLine/index.tsx

-      >
-        Copy
-      </span>
+      {!hiddenCopy && (


Let's use a descriptive name instead of double negation:

Suggested change

{!hiddenCopy && (

{showCopy ? (

akitaSummer added 2 commits June 3, 2023 03:10

feat: add esbuild

86bbe47

docs: add change

f3f8eda

fix: fix docker compose change

435c146

vercel bot deployed to Preview – storybook June 2, 2023 19:18 View deployment

fix: fix git lint

87ec5ef

vercel bot deployed to Preview – storybook June 2, 2023 19:38 View deployment

akitaSummer added 2 commits June 22, 2023 01:20

Merge branch 'main' into feat/playground_typescript

51ab136

fix: fix ts deploy

dcc19ef

vercel bot deployed to Preview – storybook June 21, 2023 19:07 View deployment

akitaSummer added 2 commits June 22, 2023 03:20

feat: add DEFAULT_TS_FUNCTION

c15a56d

fix: fix empty catch

8cea804

vercel bot deployed to Preview – storybook June 21, 2023 19:23 View deployment

QuiiBz requested changes Jun 21, 2023

View reviewed changes

fix: add define

b413863

vercel bot deployed to Preview – storybook June 22, 2023 06:50 View deployment

akitaSummer added 3 commits June 24, 2023 16:38

Merge branch 'main' into feat/playground_typescript

c740604

feat: add deployment platform

ba42726

Merge branch 'main' into feat/playground_typescript

6f488ca

vercel bot deployed to Preview – storybook June 26, 2023 08:40 View deployment

QuiiBz requested changes Jul 30, 2023

View reviewed changes

akitaSummer added 2 commits August 7, 2023 00:22

feat: update to function

6ae6ed3

Merge branch 'main' into feat/playground_typescript

689a9c7

vercel bot had a problem deploying to Preview – storybook August 6, 2023 16:40 Failure

fix: fix createDeployment

10297c9

vercel bot had a problem deploying to Preview – storybook August 6, 2023 16:47 Failure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dashboard, ui): Support TypeScript in the playground #919

feat(dashboard, ui): Support TypeScript in the playground #919

akitaSummer commented Jun 2, 2023

changeset-bot bot commented Jun 2, 2023 •

edited

Loading

vercel bot commented Jun 2, 2023 •

edited

Loading

vercel bot commented Jun 2, 2023

QuiiBz commented Jun 4, 2023

QuiiBz commented Jun 4, 2023

akitaSummer commented Jun 5, 2023

akitaSummer commented Jun 21, 2023

QuiiBz left a comment

QuiiBz Jun 21, 2023

akitaSummer Jun 22, 2023

QuiiBz Jun 24, 2023

akitaSummer Jun 26, 2023

QuiiBz Jun 30, 2023

akitaSummer Jul 28, 2023

QuiiBz left a comment

QuiiBz Jul 30, 2023

akitaSummer Aug 6, 2023

QuiiBz Jul 30, 2023

akitaSummer Aug 6, 2023

QuiiBz Jul 30, 2023

akitaSummer Aug 6, 2023

	{date && <p className={cx(['w-36 whitespace-pre text-sm', dateStyle])}>{date.toLocaleString('en-US')}</p>}
	{date ? <p className={cx(['w-36 whitespace-pre text-sm', dateStyle])}>{date.toLocaleString('en-US')}</p> : null}

feat(dashboard, ui): Support TypeScript in the playground #919

Are you sure you want to change the base?

feat(dashboard, ui): Support TypeScript in the playground #919

Conversation

akitaSummer commented Jun 2, 2023

changeset-bot bot commented Jun 2, 2023 • edited Loading

🦋 Changeset detected

vercel bot commented Jun 2, 2023 • edited Loading

vercel bot commented Jun 2, 2023

QuiiBz commented Jun 4, 2023

QuiiBz commented Jun 4, 2023

akitaSummer commented Jun 5, 2023

akitaSummer commented Jun 21, 2023

QuiiBz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

QuiiBz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

changeset-bot bot commented Jun 2, 2023 •

edited

Loading

vercel bot commented Jun 2, 2023 •

edited

Loading