Experiment/live editor (#639)

Blog post and experimental Supply Chain Editor
vmware-tanzu · Feb 23, 2022 · 1e9f3bb · 1e9f3bb
1 parent f0617ec
commit 1e9f3bb
Show file tree

Hide file tree

Showing 126 changed files with 50,532 additions and 0 deletions.
diff --git a/Makefile b/Makefile
@@ -136,6 +136,7 @@ copyright:
 		-ignore site/static/\*\* \
 		-ignore site/content/docs/\*/crds/\*.yaml \
 		-ignore site/themes/\*\* \
+		-ignore experimental/live-editor/node_modules/\*\* \
 		.
 
 .PHONY: pre-push .pre-push-check

diff --git a/experimental/live-editor/.gitignore b/experimental/live-editor/.gitignore
@@ -0,0 +1,3 @@
+dist
+node_modules
+yarn-error.log
diff --git a/experimental/live-editor/Makefile b/experimental/live-editor/Makefile
@@ -0,0 +1,14 @@
+.PHONY: deps
+deps:
+	yarn
+
+.PHONY: build
+build: deps
+	yarn build
+
+.PHONY: install
+install:
+	mkdir -p ../../site/themes/template/static/live-editor
+	rm -rf ../../site/themes/template/static/live-editor/*
+	cp -r dist/* ../../site/themes/template/static/live-editor/
+
diff --git a/experimental/live-editor/README.md b/experimental/live-editor/README.md
@@ -0,0 +1,52 @@
+
+# Blueprint and Owner Live editor.
+
+## Roadmap
+
+### Proof Of Concept
+
+* Supply chain editor (no delivery, workload or deliverable)
+* Pako style compact URL with saving
+* Visualiser for Supply Chain
+* Autocomplete for resources
+  * Don't show forward references (or self references)
+  * Type validation for references
+* Host it somewhere. Hugo seems inordinately painful for this, but I could be co-erced
+* document build and delivery process to update the editor wherever it lands
+
+
+### Near future
+
+* Finish the `scheming` tool that takes any CRD and produces a json schema
+  * This will make it easier to keep the editor up to date
+
+### Further Future
+
+* Workload with supply chain, including viz and param matching
+* Param autocomplete across files
+* Use a worker for the language extension
+* Do something about transpiling/packing, Vite hates Monaco-Yaml afaict
+* Automate build/deploy (perhaps at this point we get a dedicated repository?)
+
+# Howto
+
+## Updating the Schema today
+
+1. Grab the schema with:
+   ```
+   cat config/crd/bases/carto.run_clustersupplychains.yaml | yq '.spec.versions[] | select(.name="v1alpha1") | .schema.openAPIV3Schema'
+   ```
+2. paste into [`./hack/schema.js`](./hack/schema.js)
+3. then run 
+   ```
+   ./hack/schema.js  | pbcopy
+   ```
+
+4. and paste final schema into [`./src/main.js`](./src/main.js)
+
+
+## Install/Update blog post
+
+```
+make build install
+```
diff --git a/experimental/live-editor/hack/schema.js b/experimental/live-editor/hack/schema.js
diff --git a/experimental/live-editor/hack/yaml1.js b/experimental/live-editor/hack/yaml1.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright 2021 VMware
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {parseDocument} from "yaml"
+
+let doc = [
+    "---",
+    "foo: bar",
+    "boom: bang"
+].join("\n")
+
+
+let out = parseDocument(doc, )
diff --git a/experimental/live-editor/index.html b/experimental/live-editor/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!--
+ Copyright 2021 VMware
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/experimental/live-editor/jsconfig.json b/experimental/live-editor/jsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "esnext",
+    "module": "esnext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/experimental/live-editor/package.json b/experimental/live-editor/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "cartographer-live-editor",
+  "version": "0.0.0",
+  "type": "module",
+  "license": "Apache-2.0",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build",
+    "preview": "vite preview",
+    "schema": "./hack/schema.js"
+  },
+  "devDependencies": {
+    "@openapi-contrib/openapi-schema-to-json-schema": "^3.1.1",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
+    "@types/json-schema": "^7.0.0",
+    "autoprefixer": "^10.4.2",
+    "js-base64": "^3.7.2",
+    "jsonc-parser": "^3.0.0",
+    "mermaid": "^8.14.0",
+    "monaco-editor": "^0.30.0",
+    "monaco-yaml": "file:./src/monaco-yaml",
+    "pako": "^2.0.4",
+    "path-browserify": "^1.0.0",
+    "postcss": "^8.4.5",
+    "postcss-load-config": "^3.1.1",
+    "prettier": "2.0.5",
+    "svelte": "^3.44.0",
+    "svelte-copy-to-clipboard": "^0.2.5",
+    "svelte-preprocess": "^4.10.1",
+    "svelte-simple-modal": "^1.3.1",
+    "tailwindcss": "^3.0.12",
+    "vite": "^2.7.2",
+    "vscode-languageserver-textdocument": "^1.0.0",
+    "vscode-languageserver-types": "^3.0.0",
+    "yaml": "^2.0.0-10"
+  },
+  "dependencies": {
+    "upper-case-first": "^2.0.2"
+  }
+}
diff --git a/experimental/live-editor/postcss.config.cjs b/experimental/live-editor/postcss.config.cjs
@@ -0,0 +1,29 @@
+/**
+ * Copyright 2021 VMware
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+const config = {
+  plugins: [
+    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+    tailwindcss(),
+    //But others, like autoprefixer, need to run after,
+    autoprefixer,
+  ],
+};
+
+module.exports = config;
diff --git a/experimental/live-editor/public/favicon.png b/experimental/live-editor/public/favicon.png
diff --git a/experimental/live-editor/src/App.svelte b/experimental/live-editor/src/App.svelte
@@ -0,0 +1,58 @@
+<script>
+    import FlexPane from "./lib/FlexPane.svelte";
+    import Viz from "./lib/Viz.svelte";
+    import Modal from 'svelte-simple-modal';
+    import Navigation from "./lib/Navigation.svelte";
+    import {compressedState, document} from "./store.js";
+    import {inflate} from "pako";
+    import {toUint8Array} from "js-base64";
+    import Monaco from "./lib/Monaco.svelte";
+
+    let loaded = false
+
+    const pushURL = (isLoaded, state) => {
+        if (!isLoaded || !state) {
+            return
+        }
+        let pageUrl = new URL(window.location.href)
+        pageUrl.searchParams.set("pako", state)
+        window.history.pushState('', '', pageUrl);
+    }
+
+    $: pushURL(loaded, $compressedState)
+
+
+    const onPageLoad = () => {
+        let pageUrl = new URL(window.location.href)
+        let pako = pageUrl.searchParams.get("pako")
+        if (pako) {
+            $document = inflate(toUint8Array(pako), {to: 'string'})
+        }
+        loaded = true
+    }
+</script>
+
+<svelte:window on:load={onPageLoad}/>
+
+<main class="h-screen">
+    <Modal
+            unstyled={true}
+            closeButton={false}
+            classBg="fixed top-0 left-0 w-screen h-screen flex flex-col justify-center bg-gray-400/[.6] z-50"
+            classWindowWrap="relative m-2 max-h-full"
+            classWindow="relative w-1/3 max-w-full max-h-full my-2 mx-auto text-black border border-sky-600 shadow-lg bg-white"
+            classContent="relative p-2 overflow-auto"
+    >
+
+        <div class="h-full flex flex-col overflow-hidden">
+            <Navigation/>
+            {#if loaded}
+                <FlexPane>
+                    <Monaco slot="left" class="h-full m-2"/>
+                    <Viz slot="right" class="content-center"/>
+                </FlexPane>
+            {/if}
+        </div>
+    </Modal>
+</main>
+
diff --git a/experimental/live-editor/src/app.css b/experimental/live-editor/src/app.css
@@ -0,0 +1,20 @@
+/**
+ * Copyright 2021 VMware
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/experimental/live-editor/src/lib/FlexPane.svelte b/experimental/live-editor/src/lib/FlexPane.svelte
@@ -0,0 +1,41 @@
+<script>
+    import {onMount} from "svelte";
+
+    let resizer
+    let leftPane
+    let width = "50%"
+
+    const resize = (e) => {
+        const newWidth = e.pageX - leftPane.getBoundingClientRect().left;
+        if (newWidth > 50) {
+            width = `${newWidth}px`;
+        }
+    };
+    const stopResize = () => {
+        window.removeEventListener('mousemove', resize);
+    };
+
+    onMount(() => {
+        resizer.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            window.addEventListener('mousemove', resize);
+            window.addEventListener('mouseup', stopResize);
+        });
+    })
+</script>
+
+<div class="flex-1 flex overflow-hidden">
+    <div class="hidden md:flex flex-col" bind:this={leftPane} style="width: {width};">
+        <slot name="left">
+            <div style="text-align: center;">
+                <em>missing &lt;slot=&quot;left&quot;&gt;</em>
+            </div>
+        </slot>
+    </div>
+    <div id="resizeHandler" class="hover:bg-sky-400 bg-sky-700 cursor-col-resize pr-1" bind:this={resizer}></div>
+    <div class="flex-1 flex flex-col overflow-hidden">
+        <div style="text-align: center;">
+            <slot name="right"><em>missing &lt;slot=&quot;right&quot;&gt;</em></slot>
+        </div>
+    </div>
+</div>