feat: wmill dev v0

devfrontend/README.md

@@ -1,47 +1,18 @@
-# Svelte + TS + Vite
+# devfrontend
 
-This template should help get you started developing with Svelte and TypeScript in Vite.
+The frontend for `wmill dev`
 
-## Recommended IDE Setup
+## Quickstart
 
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+### dev
 
-## Need an official Svelte framework?
-
-Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
-
-## Technical considerations
-
-**Why use this over SvelteKit?**
-
-- It brings its own routing solution which might not be preferable for some users.
-- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
-
-This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
-
-Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
-
-**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
-
-Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
-
-**Why include `.vscode/extensions.json`?**
-
-Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
-
-**Why enable `allowJs` in the TS template?**
-
-While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
-
-**Why is HMR not preserving my local component state?**
-
-HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
-
-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
-
-```ts
-// store.ts
-// An extremely simple external store
-import { writable } from 'svelte/store'
-export default writable(0)
+```
+npm run dev
+```
+
+### deploy
+
+```
+denobundle dist
+mv bundle.js ../cli/src/
 ```

devfrontend/package-lock.json

@@ -7,6 +7,9 @@
     "": {
       "name": "devfrontend",
       "version": "0.0.0",
+      "dependencies": {
+        "windmill-client": "^0.3.1"
+      },
       "devDependencies": {
         "@rgossiaux/svelte-headlessui": "^1.0.2",
         "@sveltejs/vite-plugin-svelte": "^2.0.4",
@@ -30,6 +33,7 @@
       }
     },
     "../backend/parsers/windmill-parser-wasm/pkg": {
+      "name": "windmill-parser-wasm",
       "version": "1.109.1",
       "dev": true
     },
@@ -3346,6 +3350,11 @@
         "npm": ">=8.0.0"
       }
     },
+    "node_modules/windmill-client": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/windmill-client/-/windmill-client-0.3.1.tgz",
+      "integrity": "sha512-RpsLlp+fJion0jQ7dAPFS+e5Xk+6bVVWW66IXnSgjqkOIPZkWWPwu46IQa+rYWjrvEf0Scyuhx6sd8Lxakn8Sg=="
+    },
     "node_modules/windmill-components": {
       "version": "1.109.8",
       "resolved": "https://registry.npmjs.org/windmill-components/-/windmill-components-1.109.8.tgz",

devfrontend/package.json

@@ -29,5 +29,8 @@
     "vite": "^4.3.9",
     "windmill-components": "^1.109.8",
     "windmill-parser-wasm": "file:../backend/parsers/windmill-parser-wasm/pkg"
+  },
+  "dependencies": {
+    "windmill-client": "^0.3.1"
   }
 }

devfrontend/src/App.svelte

@@ -7,10 +7,12 @@
   import Button from 'windmill-components/components/common/button/Button.svelte'
   import { emptySchema, getModifierKey } from 'windmill-components/utils'
   import { inferArgs } from 'windmill-components/infer'
+	import github from 'svelte-highlight/styles/github'
 
-  import type { CompletedJob, Job, Preview } from 'windmill-components/package/gen';
   import { Pane, Splitpanes} from 'svelte-splitpanes'
   import { faPlay } from '@fortawesome/free-solid-svg-icons'
+  import { CompletedJob, Job, JobService } from 'windmill-client'
+  import { workspaceStore } from 'windmill-components/stores';
 
   let testJobLoader: TestJobLoader
 
@@ -22,11 +24,11 @@
   let testIsLoading = false
   let testJob: Job | undefined
   let pastPreviews: CompletedJob[] = []
-  let lang = 'deno' as Preview.language
   let validCode = true
 
+  type LastEdit = { content: string; path: string; language: string, workspace: string, username: string};
 
-  let currentScript: {path: string, content: string} | undefined = undefined
+  let currentScript: LastEdit | undefined = undefined
 
   let schema = emptySchema()
   const href = window.location.href;
@@ -54,30 +56,38 @@
   });
 
   function runTest() {
-		testJobLoader.runPreview(path, code, lang, args,)
+    $workspaceStore = currentScript.workspace
+    //@ts-ignore
+		testJobLoader.runPreview(currentScript.path, currentScript.content, currentScript.language, args, undefined)
 	}
 
   async function loadPastTests(): Promise<void> {
 		pastPreviews = await JobService.listCompletedJobs({
-			workspace: $workspaceStore!,
+			workspace: currentScript.workspace,
 			jobKinds: 'preview',
-			createdBy: $userStore?.username,
-			scriptPathExact: path
+			createdBy: currentScript.username,
+			scriptPathExact: currentScript.path,
 		})
 	}
 
-
+	function onKeyDown(event: KeyboardEvent) {
+		if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
+			event.preventDefault()
+			runTest()
+		}
+	}
 
   let lastPath = undefined
-  async function replaceScript({path, content, language}: {path: string, content: string, language: "deno" | "python3" | "go" | "bash"}) {
-    currentScript = {path, content}
-    if (lastPath !== path) {
+  async function replaceScript(LastEdit: LastEdit) {
+    currentScript = LastEdit
+    if (lastPath !== LastEdit.path) {
       schema = emptySchema()
     }
     try {
-    await inferArgs(language, content, schema )
+    //@ts-ignore
+    await inferArgs(LastEdit.language, LastEdit.content, schema )
     schema = schema
-    lastPath = path
+    lastPath = LastEdit.path
     validCode = true
     } catch (e) {
       console.error(e)
@@ -87,6 +97,8 @@
   
 </script>
 
+<svelte:window on:keydown={onKeyDown} />
+
 <TestJobLoader
 	on:done={loadPastTests}
 	bind:this={testJobLoader}
@@ -95,9 +107,13 @@
 />
 
 
+<svelte:head>
+	{@html github}
+</svelte:head>
+
 <main class="h-screen w-full">
   <div class="flex flex-col h-full">
-    <div class="text-center w-full text-lg truncate py-1">{currentScript?.path ?? 'Not editing a script'}</div>
+    <div class="text-center w-full text-lg truncate py-1">{currentScript?.path ?? 'Not editing a script'} {currentScript?.language ?? ''}</div>
     {#if !validCode}
       <div class="text-center w-full text-lg truncate py-1 text-red-500">Invalid code</div>
     {/if}
@@ -115,6 +131,7 @@
         </Button>
       {:else}
         <Button
+          disabled={currentScript === undefined}
           color="dark"
           on:click={() => {
             runTest()
@@ -144,7 +161,7 @@
         </div>
       </Pane>
       <Pane size={67}>
-        <LogPanel {lang} previewJob={testJob} {pastPreviews} previewIsLoading={testIsLoading} />
+        <LogPanel lang={currentScript?.language} previewJob={testJob} {pastPreviews} previewIsLoading={testIsLoading} />
       </Pane>
     </Splitpanes>
   </div>

devfrontend/src/lib/Counter.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  let count: number = 0
-  const increment = () => {
-    count += 1
-  }
-</script>
-
-<button on:click={increment}>
-  count is {count}
-</button>

devfrontend/vite.config.ts

@@ -1,7 +1,17 @@
-import { defineConfig } from 'vite'
-import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [svelte()],
-})
+  server: {
+    port: 5173,
+    proxy: {
+      "^/api/.*": {
+        target: process.env.REMOTE ?? "http://localhost:3000/",
+        changeOrigin: true,
+        cookieDomainRewrite: "localhost",
+      },
+    },
+  },
+});