Switch to vite + ts components

ccecc09f · Georg Krause · ff8ad9a8 · ff8ad9a8 · ccecc09f · ccecc09f
Verified Commit ccecc09f authored 3 years ago by Georg Krause
--- a/babel.config.js
+++ b/babel.config.js
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
-};
--- a/index.html
+++ b/index.html
+<!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.ts"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
 {
-  "name": "@funkwhale/vui",
+  "name": "vui2",
-  "version": "0.1.0",
+  "version": "0.0.0",
-  "main": "dist/vui.umd.min.js",
-  "files": [
-    "dist/*",
-    "src/*"
-  ],
  "scripts": {
-    "build": "vue-cli-service build --target lib --name vui src/main.js",
+    "dev": "vite",
-    "test:unit": "vue-cli-service test:unit",
+    "build": "vue-tsc --noEmit && vite build",
-    "lint": "vue-cli-service lint"
+    "preview": "vite preview"
  },
  "dependencies": {
-    "core-js": "^3.6.5",
+    "@funkwhale/ui": "/home/georg/workspace/funkwhale/ui",
-    "vue": "^3.0.0"
+    "vue": "^3.2.25"
  },
  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vitejs/plugin-vue": "^2.0.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
+    "sass": "^1.49.7",
-    "@vue/cli-plugin-unit-mocha": "~4.5.0",
+    "typescript": "^4.4.4",
-    "@vue/cli-service": "~4.5.0",
+    "vite": "^2.7.2",
-    "@vue/compiler-sfc": "^3.0.0",
+    "vue-tsc": "^0.29.8"
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "^2.0.0-0",
-    "babel-eslint": "^10.1.0",
-    "chai": "^4.1.2",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0",
-    "prettier": "^2.2.1"
  }
 }
--- a/src/App.vue
+++ b/src/App.vue
+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+import FunkwhaleButton from './components/FunkwhaleButton.vue'
+</script>
+<template>
+  <FunkwhaleButton text="Button" />
+</template>
+<style></style>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
-<template>
-  <div>
-    <button>Button</button>
-  </div>
-</template>
-<script>
-export default {
-  name: "Button",
-};
-</script>
-<style></style>
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
-import Button from "./Button.vue";
-export default Button;
--- a/src/components/FunkwhaleButton.vue
+++ b/src/components/FunkwhaleButton.vue
+<script setup lang="ts">
+import { ref } from 'vue'
+defineProps<{ text: string }>()
+const count = ref(0)
+</script>
+<template>
+	<button class="fw button is-primary">{{ text }}</button>
+</template>
+<style lang="scss">
+@import '@funkwhale/ui/src/elements/buttons.scss';
+</style>
--- a/src/components/index.js
+++ b/src/components/index.js
-export { default as Button } from "./Button";
--- a/src/env.d.ts
+++ b/src/env.d.ts
+/// <reference types="vite/client" />
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/src/main.js
+++ b/src/main.js
-import * as components from "./components";
-const ComponentLibrary = {
-  install(Vue) {
-    for (const componentName in components) {
-      const component = components[componentName];
-      Vue.component(component.name, component);
-    }
-  },
-};
-export default ComponentLibrary;
-if (typeof window !== "undefined" && window.Vue) {
-  window.Vue.use(ComponentLibrary);
-}
--- a/src/main.ts
+++ b/src/main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+createApp(App).mount('#app')
--- a/tests/unit/Button.spec.js
+++ b/tests/unit/Button.spec.js
-import { expect } from "chai";
-import { shallowMount } from "@vue/test-utils";
-import Button from "@/components/Button/Button.vue";
-describe("Button.vue", () => {
-  it("renders", () => {
-    const wrapper = shallowMount(Button);
-		expect(wrapper.text()).to.equal("Button");
-  });
-});
--- a/tsconfig.json
+++ b/tsconfig.json
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()]
+})
--- a/yarn.lock
+++ b/yarn.lock