update: vue sfc loader

canwdev · Dec 4, 2024 · 9e5e463 · 9e5e463
1 parent 7f9da4d
commit 9e5e463
Show file tree

Hide file tree

Showing 4 changed files with 240 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+/public/test
diff --git a/public/vue/example.vue b/public/vue/example.vue
@@ -0,0 +1,117 @@
+<script>
+export default {
+  name: 'SimpleCounter',
+  data() {
+    return {
+      count: 0,
+      step: 1,
+      history: [],
+    }
+  },
+  methods: {
+    reset() {
+      // if (this.count === 0) {
+      //   return
+      // }
+      this.history.unshift({
+        count: this.count,
+        time: new Date(),
+      })
+      this.count = 0
+    },
+    add() {
+      this.count += Number(this.step)
+    },
+    minus() {
+      this.count -= Number(this.step)
+    },
+  },
+}
+</script>
+
+<template>
+  <div class="simple-counter font-code">
+    <div class="counter-number">{{ count }}</div>
+    <p class="actions">
+      <button class="vp-button" @click="reset">重置</button>
+      <input class="vp-input" type="number" placeholder="step" v-model="step" />
+      <button class="vp-button" autofocus @click="add">+</button>
+      <button class="vp-button" autofocus @click="minus">-</button>
+    </p>
+    <ul class="history">
+      <li v-for="(item, index) in history" :key="index">
+        <span class="no"> #{{ index + 1 }} </span>
+        <span class="count">
+          {{ item.count }}
+        </span>
+        <span class="time">{{ item.time.toLocaleString() }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.simple-counter {
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  overflow: auto;
+  scrollbar-width: none;
+
+  .counter-number {
+    font-size: 50px;
+    border: 1px solid;
+    text-align: right;
+    padding: 0 10px;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    button,
+    input {
+      display: inline-block;
+      width: 23%;
+      font-size: 30px;
+      height: 50px !important;
+      box-sizing: border-box;
+
+      &:focus {
+        outline: 2px solid green;
+      }
+    }
+  }
+
+  .history {
+    border: 1px solid;
+    padding-left: 0;
+    max-height: 70vh;
+    overflow: auto;
+
+    li {
+      height: 45px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 10px;
+
+      .no {
+        width: 50px;
+        color: green;
+      }
+
+      .count {
+        flex: 1;
+        font-size: 18px;
+        font-weight: bold;
+      }
+
+      & + li {
+        border-top: 1px solid $color_border;
+      }
+    }
+  }
+}
+</style>
diff --git a/public/vue/index.html b/public/vue/index.html
@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>vue3-sfc-loader</title>
+
+  <style>
+    body, html {
+      height: 100%;
+    }
+
+    body {
+      margin: 0;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    #app {
+      height: 100%;
+    }
+  </style>
+</head>
+
+<body>
+<noscript>Enable JavaScript to visit this page</noscript>
+<div id="app"></div>
+<script src="https://unpkg.com/vue@latest"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
+<script src="../lib/sass/sass.sync.min.js"></script>
+<script>
+
+  // https://github.com/FranckFreiburger/vue3-sfc-loader/tree/main
+  const options = {
+    moduleCache: {
+      vue: Vue
+    },
+    async getFile(url) {
+      const res = await fetch(url);
+      if (!res.ok)
+        throw Object.assign(new Error(res.statusText + " " + url), { res });
+      return {
+        getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text()
+      };
+    },
+    // https://github.com/FranckFreiburger/vue3-sfc-loader/discussions/181
+    processStyles(src, lang, filename, options) {
+      // console.log({ src, lang, filename, options });
+      if (lang !== "scss") {
+        throw new Error(`unsupported "${lang}" style processor`);
+      }
+
+      return new Promise((resolve, reject) => {
+        Sass.compile(src, (output) => {
+          if (output.message) {
+            reject(output);
+          } else {
+            resolve(output.text);
+          }
+        });
+      });
+    },
+    addStyle(textContent) {
+      // console.log({ textContent });
+      const style = Object.assign(document.createElement("style"), { textContent: textContent });
+      const ref = document.head.getElementsByTagName("style")[0] || null;
+      document.head.insertBefore(style, ref);
+    },
+    removeStyle(text) {
+    }
+  };
+
+  const { loadModule } = window["vue3-sfc-loader"];
+  const url = new URLSearchParams(location.search).get("file_url") || "";
+
+  if (!url) {
+    // 定义组件
+    const MyComponent = {
+      template: `
+        <div style="padding: 10px;">
+          <ul>
+            <li><a href="https://github.com/FranckFreiburger/vue3-sfc-loader" target="_blank">vue3-sfc-loader</a></li>
+            <li>支持 style scss scoped 标签！</li>
+            <li>
+              <button @click="loadExample">Load Example | 加载示例</button>
+            </li>
+          </ul>
+        </div>
+      `,
+      methods: {
+        loadExample() {
+          // 添加查询参数并刷新页面
+          const newUrl = new URL(window.location.href);
+          newUrl.searchParams.set('file_url', './example.vue');
+          window.location.href = newUrl.toString();
+        }
+      }
+    }
+    Vue.createApp(MyComponent).mount('#app')
+    console.error("param file_url is missing, example: /vue.html?file_url=http://127.0.0.1:8080/test/myComponent.vue");
+  } else {
+
+    const app = Vue.createApp({
+      components: {
+        "my-component": Vue.defineAsyncComponent(() => loadModule(url, options))
+      },
+      template: "<my-component></my-component>"
+    });
+
+    app.mount("#app");
+
+  }
+
+</script>
+</body>
+</html>
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -62,6 +62,7 @@ const routes = [
           icon: iconText,
         },
       },
+
       {
         path: 'vue-i18n-edit',
         name: 'VueI18nEditTool',
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,3 +22,5 @@ dist-ssr @@
     *.njsproj
     *.sln
     *.sw?
+    /public/test