refactor(repl): use new setup scripts

repl/.gitignore

@@ -1,4 +1,5 @@
 node_modules
 .DS_Store
 dist
-*.local
+*.local
+*.log

repl/package.json

@@ -8,16 +8,15 @@
   "dependencies": {
     "ant-design-vue": "2.0.0-rc.2",
     "marked": "1.2.5",
-    "vue": "3.0.2"
+    "vue": "3.0.3"
   },
   "devDependencies": {
     "@types/marked": "1.2.0",
-    "@vue/compiler-sfc": "3.0.2",
+    "@vue/compiler-sfc": "3.0.3",
     "cross-env": "7.0.2",
     "import-http": "0.3.1",
-    "remove": "0.1.5",
     "rollup-plugin-esm-import-to-url": "2.1.0",
     "sass": "1.29.0",
-    "vite": "1.0.0-rc.9"
+    "vite": "^1.0.0-rc.13"
   }
 }

repl/src/App.vue

@@ -41,54 +41,43 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "vue";
+<script setup>
+import { ref } from "vue";
 import Render from "./components/Render.vue";
 import CodeMirror from "./components/CodeMirror.vue";
 import TEMPLATE_DEFAULT from "./template/default";
 
-export default defineComponent({
-  name: "App",
-  components: {
-    Render,
-    CodeMirror,
-  },
-  data() {
-    return {
-      loading: false,
-      template: TEMPLATE_DEFAULT,
-      content: "",
-      form: {
-        username: "denoland",
-        repo: "deno",
-        version: "HEAD~",
-      },
-    };
-  },
-  methods: {
-    onSubmit() {
-      const template = encodeURIComponent(this.template);
-
-      this.loading = true;
-      fetch(
-        `${import.meta.env.VITE_API_HOST}/?username=${
-          this.form.username || ""
-        }&repo=${this.form.repo || ""}&version=${
-          this.form.version || ""
-        }&template=${template || ""}`
-      )
-        .then((res) => {
-          return res.text();
-        })
-        .then((markdown) => {
-          this.content = markdown;
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-  },
+const loading = ref(false);
+const template = ref(TEMPLATE_DEFAULT);
+const form = ref({
+  username: "denoland",
+  repo: "deno",
+  version: "HEAD~",
 });
+
+const content = ref("");
+
+function onSubmit() {
+  const tpl = encodeURIComponent(template.value);
+
+  loading.value = true;
+  fetch(
+    `${import.meta.env.VITE_API_HOST}/?username=${
+      form.value.username || ""
+    }&repo=${form.value.repo || ""}&version=${
+      form.value.version || ""
+    }&template=${tpl || ""}`
+  )
+    .then((res) => {
+      return res.text();
+    })
+    .then((markdown) => {
+      content.value = markdown;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
 </script>
 
 <style lang="scss" scoped>

repl/src/components/CodeMirror.vue

@@ -4,41 +4,42 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "vue";
+<script setup>
+import { onMounted, ref, defineEmit, defineProps } from "vue";
 import CodeMirror from "https://cdn.jsdelivr.net/npm/codemirror/src/codemirror.js";
-import "./CodeMirror.css";
-
-export default defineComponent({
-  props: {
-    content: { type: String },
-    readonly: { type: Boolean, default: () => false },
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    update(value) {
-      this.editor.doc.setValue(value);
-    },
-  },
-  mounted() {
-    this.editor = CodeMirror.fromTextArea(this.$refs.input, {
-      lineNumbers: true,
-      readonly: !!this.readonly,
-    });
-    if (typeof this.content === "string") {
-      this.update(this.content);
-    }
-    this.editor.on("change", (instance, change) => {
-      const val = this.editor.doc.getValue();
-      this.$emit("update:content", val);
-    });
-  },
+
+const { content, readonly } = defineProps({
+  content: { type: String },
+  readonly: { type: Boolean, default: () => false },
+});
+
+const emit = defineEmit(["update:content"]);
+
+let editor;
+
+const input = ref(null);
+
+onMounted(() => {
+  editor = CodeMirror.fromTextArea(input.value, {
+    lineNumbers: true,
+    readonly: !!readonly,
+  });
+
+  if (typeof content === "string") {
+    update(content);
+  }
+  editor.on("change", (instance, change) => {
+    emit("update:content", editor.doc.getValue());
+  });
 });
+
+function update(value) {
+  editor.doc.setValue(value);
+}
 </script>
 
 <style lang="scss">
+@import "./CodeMirror.css";
 .my-editor {
   width: 100%;
   .CodeMirror {

repl/src/components/Markdown.vue

@@ -4,21 +4,11 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "vue";
+<script setup>
+import { computed, defineProps } from "vue";
 import marked from "marked";
 
-export default defineComponent({
-  props: {
-    content: { type: String, default: () => "" },
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    html() {
-      return marked(this.content);
-    },
-  },
-});
+const props = defineProps({ content: String, default: () => "" });
+
+const html = computed(() => marked(props.content));
 </script>

repl/src/components/Render.vue

@@ -8,32 +8,24 @@
       />
     </a-tab-pane>
     <a-tab-pane key="2" tab="Source">
-      <CodeMirror ref="CodeMirror" :content="content" :readonly="true" />
+      <CodeMirror ref="editor" :content="content" :readonly="true" />
     </a-tab-pane>
   </a-tabs>
 </template>
 
-<script>
-import { defineComponent } from "vue";
+<script setup>
+import { ref, watch, defineProps } from "vue";
 import Markdown from "./Markdown.vue";
 import CodeMirror from "./CodeMirror.vue";
 
-export default defineComponent({
-  components: {
-    Markdown,
-    CodeMirror,
-  },
-  props: {
-    content: { type: String },
-  },
-  watch: {
-    content(val) {
-      this.$refs.CodeMirror.update(val);
-    },
-  },
-  data() {
-    return {};
-  },
+const editor = ref(null);
+
+const { content } = defineProps({
+  content: { type: String },
+});
+
+watch(content, () => {
+  editor.update(val);
 });
 </script>