workflow(sfc-playground): share and download buttons

2021-03-28 23:36:36 -04:00
parent aa8bf1b7a3
commit 9613969ffc
15 changed files with 232 additions and 25 deletions
--- a/packages/sfc-playground/src/download/download.ts
+++ b/packages/sfc-playground/src/download/download.ts
@@ -0,0 +1,31 @@
+import { exportFiles } from '../store'
+import { saveAs } from 'file-saver'
+
+import index from './template/index.html?raw'
+import main from './template/main.js?raw'
+import pkg from './template/package.json?raw'
+import config from './template/vite.config.js?raw'
+import readme from './template/README.md?raw'
+
+export async function downloadProject() {
+  const { default: JSZip } = await import('jszip')
+  const zip = new JSZip()
+
+  // basic structure
+  zip.file('index.html', index)
+  zip.file('package.json', pkg)
+  zip.file('vite.config.js', config)
+  zip.file('README.md', readme)
+
+  // project src
+  const src = zip.folder('src')!
+  src.file('main.js', main)
+
+  const files = exportFiles()
+  for (const file in files) {
+    src.file(file, files[file])
+  }
+
+  const blob = await zip.generateAsync({ type: 'blob' })
+  saveAs(blob, 'vue-project.zip')
+}
--- a/packages/sfc-playground/src/download/template/README.md
+++ b/packages/sfc-playground/src/download/template/README.md
@@ -0,0 +1,14 @@
+# Vite Vue Starter
+
+This is a project template using [Vite](https://vitejs.dev/). It requires [Node.js](https://nodejs.org) v12+.
+
+To start:
+
+```sh
+npm install
+npm run dev
+
+# if using yarn:
+yarn
+yarn dev
+```
--- a/packages/sfc-playground/src/download/template/index.html
+++ b/packages/sfc-playground/src/download/template/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/packages/sfc-playground/src/download/template/main.js
+++ b/packages/sfc-playground/src/download/template/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
--- a/packages/sfc-playground/src/download/template/package.json
+++ b/packages/sfc-playground/src/download/template/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "vite-vue-starter",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.0.9"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.1.5",
+    "@vue/compiler-sfc": "^3.0.9",
+    "vite": "^2.1.3"
+  }
+}
--- a/packages/sfc-playground/src/download/template/vite.config.js
+++ b/packages/sfc-playground/src/download/template/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()]
+})