import whole project

hipertracker · hipertracker · commit 23d42b37fa3e · 2021-04-03T23:11:18.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+/.history/
diff --git a/README.md b/README.md
@@ -0,0 +1,35 @@
+# Vue 3 + Typescript + Vite
+
+This template should help get you started developing with Vue 3 and Typescript in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!
+
+### If Using `<script setup>`
+
+[`<script setup>`](https://github.com/vuejs/rfcs/pull/227) is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) instead of Vetur (and disable Vetur).
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can use the following:
+
+### If Using Volar
+
+Run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+### If Using Vetur
+
+1. Install and add `@vuedx/typescript-plugin-vue` to the [plugins section](https://www.typescriptlang.org/tsconfig#plugins) in `tsconfig.json`
+2. Delete `src/shims-vue.d.ts` as it is no longer needed to provide module info to Typescript
+3. Open `src/main.ts` in VSCode
+4. Open the VSCode command palette
+5. Search and run "Select TypeScript version" -> "Use workspace version"
+
+### Using Overmind DevTools debugger
+
+Overmind DevTools: <https://overmindjs.org/core/devtools>
+
+```
+npx overmind-devtools@latest
+```
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!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>
+    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "vite-ts-overmind",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "buffer": "^6.0.3",
+    "overmind": "^27.0.0",
+    "overmind-vue": "^27.0.0",
+    "process": "^0.11.10",
+    "vue": "^3.0.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.2.1",
+    "@vue/compiler-sfc": "^3.0.5",
+    "typescript": "^4.1.3",
+    "vite": "^2.1.5",
+    "vue-tsc": "^0.0.15"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="flex justify-center">
+    <img alt="Vue logo" src="./assets/logo.png" />
+  </div>
+  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite + Overmind" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import HelloWorld from "./components/HelloWorld.vue";
+
+export default defineComponent({
+  name: "App",
+  components: {
+    HelloWorld,
+  },
+});
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/DecBtn.vue b/src/components/DecBtn.vue
@@ -0,0 +1,20 @@
+<template>
+  <button
+    type="button"
+    class="inline-flex items-center p-1.5 border border-transparent rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+  >
+    <svg
+      class="h-5 w-5"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  </button>
+</template>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -0,0 +1,76 @@
+<template>
+  <h1 class="text-2xl font-bold">{{ msg }}</h1>
+
+  <SimpleCounter />
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a
+      href="https://marketplace.visualstudio.com/items?itemName=octref.vetur"
+      target="_blank"
+      >Vetur</a
+    >
+    or
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+    (if using
+    <code>&lt;script setup&gt;</code>)
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
+  <p class="pt-2 pb-2">
+    <a href="https://overmindjs.org/" target="_blank">Vite Docs</a>
+    |
+    <a href="https://overmindjs.org/" target="_blank"><b>Overmind</b> Docs</a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useOvermind } from "../overmind";
+
+import SimpleCounter from "./SimpleCounter.vue";
+
+export default defineComponent({
+  name: "HelloWorld",
+  components: {
+    SimpleCounter,
+  },
+  props: {
+    msg: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {
+    const state = useOvermind.state();
+    return { state };
+  },
+});
+</script>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>
diff --git a/src/components/IncBtn.vue b/src/components/IncBtn.vue
@@ -0,0 +1,21 @@
+<template>
+  <button
+    type="button"
+    class="inline-flex items-center p-1.5 border border-transparent rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+  >
+    <svg
+      class="h-5 w-5"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M18 12H6"
+      />
+    </svg>
+  </button>
+</template>
diff --git a/src/components/SimpleCounter.vue b/src/components/SimpleCounter.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="pt-3 pb-3">
+    <DecBtn @click="actions.inc" />
+    <span class="bg-gray-200 text-xl ml-3 mr-3">
+      Counter: {{ state.counter }}
+    </span>
+    <IncBtn @click="actions.dec" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import IncBtn from "./IncBtn.vue";
+import DecBtn from "./DecBtn.vue";
+import { useOvermind } from "../overmind";
+
+export default defineComponent({
+  name: "SimpleCounter",
+  components: {
+    IncBtn,
+    DecBtn,
+  },
+  setup() {
+    const state = useOvermind.state();
+    const actions = useOvermind.actions();
+    return { state, actions };
+  },
+});
+</script>
diff --git a/src/main.ts b/src/main.ts
@@ -0,0 +1,10 @@
+import "./shims";
+
+import App from './App.vue'
+import { config } from "./overmind";
+import { createApp } from 'vue'
+import { createOvermind } from "overmind";
+import { withOvermind } from "overmind-vue/vue3";
+
+const overmind = createOvermind(config);
+createApp(withOvermind(overmind, App)).mount("#app");
diff --git a/src/overmind/actions.ts b/src/overmind/actions.ts
@@ -0,0 +1,9 @@
+import { Context } from "../overmind";
+
+export const inc = ({ state }: Context): void => {
+  state.counter += 1;
+};
+
+export const dec = ({ state }: Context): void => {
+  state.counter -= 1;
+};
diff --git a/src/overmind/index.ts b/src/overmind/index.ts
@@ -0,0 +1,20 @@
+import { IConfig, IContext } from "overmind";
+
+export const config = {
+  state,
+  actions,
+};
+
+export type Config = IConfig<{
+  state: typeof config.state;
+  actions: typeof config.actions;
+}>;
+
+import * as actions from "./actions";
+
+import { createHooks } from "overmind-vue/vue3";
+import state from "./state";
+
+export type Context = IContext<Config>;
+
+export const useOvermind = createHooks();
diff --git a/src/overmind/state.ts b/src/overmind/state.ts
@@ -0,0 +1,9 @@
+type State = {
+  counter: number;
+};
+
+const state: State = {
+  counter: 0,
+};
+
+export default state;
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/src/shims.ts b/src/shims.ts
@@ -0,0 +1,9 @@
+import * as process from "process";
+
+import { Buffer } from "buffer";
+
+Object.assign(self, {
+  process,
+  global: self,
+  Buffer,
+});
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()]
+})
diff --git a/yarn-error.log b/yarn-error.log
diff --git a/yarn.lock b/yarn.lock
